From c2c4364ccc0f587ae5465a8a4d4265c2fbe1460c Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Sun, 13 Oct 2024 15:48:59 +0700
Subject: [PATCH] remove touch-target

---
 components/ui/aside.tsx                       |  5 +---
 components/ui/button.tsx                      |  5 +---
 components/ui/dialog.tsx                      |  5 +---
 components/ui/disclosure.tsx                  |  5 ++--
 components/ui/index.ts                        |  1 -
 components/ui/link.tsx                        |  5 +---
 components/ui/menu.tsx                        |  5 +---
 components/ui/show-more.tsx                   |  3 +--
 components/ui/table.tsx                       |  9 ++++----
 components/ui/text-field.tsx                  |  5 ++--
 components/ui/toggle.tsx                      |  3 +--
 components/ui/touch-target.tsx                | 15 ------------
 components/ui/tree.tsx                        |  5 ++--
 .../docs/components/buttons/button.mdx        |  3 ---
 .../docs/components/buttons/toggle.mdx        |  3 ---
 .../docs/components/buttons/touch-target.mdx  | 23 -------------------
 .../docs/components/collections/tree.mdx      |  2 +-
 .../content/docs/prologue/release-notes.mdx   |  2 ++
 18 files changed, 20 insertions(+), 84 deletions(-)
 delete mode 100644 components/ui/touch-target.tsx
 delete mode 100644 resources/content/docs/components/buttons/touch-target.mdx

diff --git a/components/ui/aside.tsx b/components/ui/aside.tsx
index 89cc4c39..bd88a62b 100644
--- a/components/ui/aside.tsx
+++ b/components/ui/aside.tsx
@@ -16,7 +16,6 @@ import { tv } from "tailwind-variants"
 import { Button, ButtonPrimitive } from "./button"
 import { cr, useMediaQuery } from "./primitive"
 import { Sheet } from "./sheet"
-import { TouchTarget } from "./touch-target"
 
 const aside = tv({
   slots: {
@@ -162,9 +161,7 @@ const Item = ({ isCurrent, children, className, icon: Icon, ...props }: ItemProp
         <>
           {Icon && <Icon data-slot="icon" />}
           <span className="col-start-2">
-            <TouchTarget>
-              {typeof children === "function" ? children(values) : children}
-            </TouchTarget>
+            {typeof children === "function" ? children(values) : children}
             {props.badge && (
               <div className="bdx h-[1.30rem] px-1 rounded-md text-muted-fg text-xs font-medium ring-1 ring-fg/20 grid place-content-center w-auto inset-y-1/2 -translate-y-1/2 absolute right-1.5 bg-fg/[0.02] dark:bg-fg/10">
                 {props.badge}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 590c720f..a15e53c8 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -9,7 +9,6 @@ import {
 import { tv } from "tailwind-variants"
 
 import { cr, focusButtonStyles } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const buttonStyles = tv(
   {
@@ -119,9 +118,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         )}
       >
         {(values) => (
-          <TouchTarget>
-            {typeof props.children === "function" ? props.children(values) : props.children}
-          </TouchTarget>
+          <>{typeof props.children === "function" ? props.children(values) : props.children}</>
         )}
       </ButtonPrimitive>
     )
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 52bde5c5..3b73193d 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -18,7 +18,6 @@ import { tv } from "tailwind-variants"
 
 import { Button, type ButtonProps } from "./button"
 import { useMediaQuery } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const dialogStyles = tv({
   slots: {
@@ -53,9 +52,7 @@ type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
 const Trigger = (props: ButtonPrimitiveProps) => (
   <ButtonPrimitive {...props}>
     {(values) => (
-      <TouchTarget>
-        {typeof props.children === "function" ? props.children(values) : props.children}
-      </TouchTarget>
+      <>{typeof props.children === "function" ? props.children(values) : props.children}</>
     )}
   </ButtonPrimitive>
 )
diff --git a/components/ui/disclosure.tsx b/components/ui/disclosure.tsx
index f6d43d20..801e82a8 100644
--- a/components/ui/disclosure.tsx
+++ b/components/ui/disclosure.tsx
@@ -18,7 +18,6 @@ import {
 import { tv } from "tailwind-variants"
 
 import { cn, cr, tm } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 interface DisclosureGroupProps extends DisclosureGroupPrimitiveProps {
   hideBorder?: boolean
@@ -128,7 +127,7 @@ const Trigger = ({ className, ...props }: ButtonProps) => {
       )}
     >
       {(values) => (
-        <TouchTarget>
+        <>
           {typeof props.children === "function" ? props.children(values) : props.children}
           {!hideIndicator && (
             <IconChevronLeft
@@ -137,7 +136,7 @@ const Trigger = ({ className, ...props }: ButtonProps) => {
               )}
             />
           )}
-        </TouchTarget>
+        </>
       )}
     </Button>
   )
diff --git a/components/ui/index.ts b/components/ui/index.ts
index 39915851..66e9060a 100644
--- a/components/ui/index.ts
+++ b/components/ui/index.ts
@@ -1,6 +1,5 @@
 export * from './primitive';
 export * from './progress-circle';
-export * from './touch-target';
 export * from './aside';
 export * from './tree';
 export * from './chart';
diff --git a/components/ui/link.tsx b/components/ui/link.tsx
index b93090a0..e7de31f8 100644
--- a/components/ui/link.tsx
+++ b/components/ui/link.tsx
@@ -6,7 +6,6 @@ import { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from "rea
 import { tv } from "tailwind-variants"
 
 import { cr } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const linkStyles = tv({
   base: "forced-colors:outline-[Highlight] relative focus-visible:outline-2 outline outline-offset-2 disabled:focus-visible:outline-0 outline-0 outline-primary rounded disabled:opacity-60 forced-colors:disabled:text-[GrayText] border-transparent transition-colors disabled:cursor-default",
@@ -38,9 +37,7 @@ const Link = ({ className, ...props }: LinkProps) => {
       )}
     >
       {(values) => (
-        <TouchTarget>
-          {typeof props.children === "function" ? props.children(values) : props.children}
-        </TouchTarget>
+        <>{typeof props.children === "function" ? props.children(values) : props.children}</>
       )}
     </LinkPrimitive>
   )
diff --git a/components/ui/menu.tsx b/components/ui/menu.tsx
index 6380bba1..421564ec 100644
--- a/components/ui/menu.tsx
+++ b/components/ui/menu.tsx
@@ -27,7 +27,6 @@ import { DropdownItemDetails, dropdownItemStyles, DropdownSection } from "./drop
 import { Keyboard } from "./keyboard"
 import { Popover } from "./popover"
 import { cn, cr, tm } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 interface MenuContextProps {
   respectScreen: boolean
@@ -72,9 +71,7 @@ interface MenuTriggerProps extends ButtonProps {
 const Trigger = ({ className, ...props }: MenuTriggerProps) => (
   <Button className={trigger({ className })} {...props}>
     {(values) => (
-      <TouchTarget>
-        {typeof props.children === "function" ? props.children(values) : props.children}
-      </TouchTarget>
+      <>{typeof props.children === "function" ? props.children(values) : props.children}</>
     )}
   </Button>
 )
diff --git a/components/ui/show-more.tsx b/components/ui/show-more.tsx
index 9950880a..8a9a2842 100644
--- a/components/ui/show-more.tsx
+++ b/components/ui/show-more.tsx
@@ -7,7 +7,6 @@ import { tv } from "tailwind-variants"
 
 import { buttonStyles } from "./button"
 import { cr } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const showMoreStyles = tv({
   base: "text-sm leading-6 after:border-muted before:border-muted",
@@ -55,7 +54,7 @@ const ShowMore = ({
           className={buttonStyles({ shape: "circle", appearance: "outline", size: "small" })}
         >
           {cr(props.children, (children) => (
-            <TouchTarget>{children}</TouchTarget>
+            <>{children}</>
           ))}
         </ToggleButton>
       ) : (
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index ae2088eb..9a06179b 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -29,7 +29,6 @@ import { tv } from "tailwind-variants"
 
 import { Checkbox } from "./checkbox"
 import { cn, cr } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const table = tv({
   slots: {
@@ -143,13 +142,13 @@ const TableColumn = ({ children, isResizable = false, className, ...props }: Tab
           <>
             {children}
             {allowsSorting && (
-              <TouchTarget>
+              <>
                 <span className={cellIcon({ className: isHovered ? "bg-secondary-fg/10" : "" })}>
                   <IconChevronLgDown
                     className={sortDirection === "ascending" ? "rotate-180" : ""}
                   />
                 </span>
-              </TouchTarget>
+              </>
             )}
             {isResizable && <ColumnResizer />}
           </>
@@ -204,9 +203,9 @@ const TableRow = <T extends object>({
             className="relative bg-transparent pl-3.5 py-1.5 text-muted-fg pressed:text-fg"
             slot="drag"
           >
-            <TouchTarget>
+            <>
               <IconHamburger />
-            </TouchTarget>
+            </>
           </Button>
         </Cell>
       )}
diff --git a/components/ui/text-field.tsx b/components/ui/text-field.tsx
index 2bd328ea..f692c74b 100644
--- a/components/ui/text-field.tsx
+++ b/components/ui/text-field.tsx
@@ -13,7 +13,6 @@ import {
 import type { FieldProps } from "./field"
 import { Description, FieldError, FieldGroup, fieldGroupPrefixStyles, Input, Label } from "./field"
 import { ctr } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 type InputType = Exclude<TextInputDOMProps["type"], "password">
 
@@ -80,13 +79,13 @@ const TextField = ({
             onPress={handleTogglePasswordVisibility}
             className="atrs relative isSfx x2e2 [&_[data-slot=icon]]:text-muted-fg focus:outline-none focus-visible:ring-1 focus-visible:ring-primary rounded"
           >
-            <TouchTarget>
+            <>
               {isPasswordVisible ? (
                 <IconEyeClosed className="transition animate-in" />
               ) : (
                 <IconEye className="transition animate-in" />
               )}
-            </TouchTarget>
+            </>
           </ButtonPrimitive>
         ) : isLoading && indicatorPlace === "suffix" ? (
           <IconLoader className="animate-spin isSfx" />
diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
index 1431cfaf..35a402b1 100644
--- a/components/ui/toggle.tsx
+++ b/components/ui/toggle.tsx
@@ -6,7 +6,6 @@ import { ToggleButton as ToggleButtonPrimitive, ToggleButtonProps } from "react-
 import { tv, VariantProps } from "tailwind-variants"
 
 import { cr, focusButtonStyles } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const toggleStyles = tv({
   extend: focusButtonStyles,
@@ -59,7 +58,7 @@ const Toggle = ({ className, ...props }: ToggleProps) => {
       )}
     >
       {cr(props.children, (children) => (
-        <TouchTarget>{children}</TouchTarget>
+        <>{children}</>
       ))}
     </ToggleButtonPrimitive>
   )
diff --git a/components/ui/touch-target.tsx b/components/ui/touch-target.tsx
deleted file mode 100644
index dc852430..00000000
--- a/components/ui/touch-target.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from "react"
-
-const TouchTarget = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      <span
-        className="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
-        aria-hidden="true"
-      />
-      {children}
-    </>
-  )
-}
-
-export { TouchTarget }
diff --git a/components/ui/tree.tsx b/components/ui/tree.tsx
index 081c5b3d..4943c7c6 100644
--- a/components/ui/tree.tsx
+++ b/components/ui/tree.tsx
@@ -15,7 +15,6 @@ import { tv } from "tailwind-variants"
 
 import { Checkbox } from "./checkbox"
 import { cr } from "./primitive"
-import { TouchTarget } from "./touch-target"
 
 const treeStyles = tv({
   base: "flex border max-h-96 min-w-72 [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin] py-2 rounded-lg bg-bg cursor-default lg:text-sm flex-col overflow-auto forced-color-adjust-none outline-none",
@@ -90,9 +89,9 @@ const ItemContent = (props: React.ComponentProps<typeof TreeItemContent>) => {
 const Indicator = () => {
   return (
     <Button className="shrink-0 relative" slot="chevron">
-      <TouchTarget>
+      <>
         <IconChevronRight className="size-5" />
-      </TouchTarget>
+      </>
     </Button>
   )
 }
diff --git a/resources/content/docs/components/buttons/button.mdx b/resources/content/docs/components/buttons/button.mdx
index 8a265133..ddc7ee56 100644
--- a/resources/content/docs/components/buttons/button.mdx
+++ b/resources/content/docs/components/buttons/button.mdx
@@ -15,9 +15,6 @@ A button lets peeps do stuff with clicks, presses, taps, and keystrokes.
 ## Installation
 <Installation options={{isComponent: true}} items={['button']}/>
 
-## Composed Components
-<Composed components={['touch-target']}/>
-
 ## Manual Installation
 
 <Installation options={{isManual: true}} items={['react-aria-components']}/>
diff --git a/resources/content/docs/components/buttons/toggle.mdx b/resources/content/docs/components/buttons/toggle.mdx
index fb02f61c..317ec7b5 100644
--- a/resources/content/docs/components/buttons/toggle.mdx
+++ b/resources/content/docs/components/buttons/toggle.mdx
@@ -15,9 +15,6 @@ A toggle button lets folks flip a choice on or off, like switching between two v
 ## Installation
 <Installation options={{isComponent: true}} items={['toggle']}/>
 
-## Composed Components
-<Composed components={['touch-target']}/>
-
 ## Manual Installation
 <Installation options={{isManual: true}} items={['react-aria-components']}/>
 
diff --git a/resources/content/docs/components/buttons/touch-target.mdx b/resources/content/docs/components/buttons/touch-target.mdx
deleted file mode 100644
index e0f2adcb..00000000
--- a/resources/content/docs/components/buttons/touch-target.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: "Touch Target"
-description: Touch Target's a slick component used in other parts of your project that need trigger, like button, link, menu trigger, and more.
-order: 4
-published: true
-status: primitive
----
-
-## Basic
-There’s not much to see here directly, but you can check out related components like [Button](/docs/components/buttons/button), [Link](/docs/components/navigation/link), and others.
-
-<Note>
-  Heads up: when you incorporate components such as **button**, **dialog**, or **menu**, and other components that use the `TouchTarget` component, the touch target functionality is included automatically. No separate installation required.
-</Note>
-
-## Installation
-<Installation options={{isComponent: true}} items={['touch-target']}/>
-
-## Manual Installation
-<SourceCode toShow={['touch-target']} />
-
-## Why Use Touch Target?
-This component is designed to appear on touch screen devices. If you watched Adam Wathan’s talk at [Laracon](https://youtu.be/MrzrSFbxW7M?t=1959), you’ll understand its importance. For simplicity, we use this component to enhance button accessibility on touch devices.
diff --git a/resources/content/docs/components/collections/tree.mdx b/resources/content/docs/components/collections/tree.mdx
index 7043aa2b..d644f91b 100644
--- a/resources/content/docs/components/collections/tree.mdx
+++ b/resources/content/docs/components/collections/tree.mdx
@@ -15,7 +15,7 @@ A tree is a hierarchical list of items, allowing users to navigate through neste
 <Installation options={{ isComponent: true }} items={['tree']}/>
 
 ## Composed Components
-<Composed components={['checkbox', 'touch-target']}/>
+<Composed components={['checkbox']}/>
 
 ## Manual Installation
 <Installation options={{ isManual: true }} items={['react-aria-components', 'justd-icons']} />
diff --git a/resources/content/docs/prologue/release-notes.mdx b/resources/content/docs/prologue/release-notes.mdx
index eb6b770f..d45d6eb3 100644
--- a/resources/content/docs/prologue/release-notes.mdx
+++ b/resources/content/docs/prologue/release-notes.mdx
@@ -20,6 +20,8 @@ This all changes are made on the 2024 release.
 - Remove border from Badge
 - Remove light dan dark from Badge
 - Fix color on Badge
+- Touch Target is now removed from components since it's not needed anymore
+- Table now have resize props [Table](/docs/components/collections/table)
 
 ## 10 October
 - Sidebar now can be collapse [Aside](/docs/components/layouts/aside)