From a8ff32f5eef8a029027b659e5cd15e1e1e0f9c5d Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Sat, 18 Oct 2025 17:11:29 +0700
Subject: [PATCH 1/4] migrate: `toggle`, `toggle-group`, `toast` and `textarea`

---
 .../src/app/playground/shadcn/page.tsx        |  52 ++
 .../playground/shadcn/textarea-section.tsx    | 257 ++++++++
 .../app/playground/shadcn/toast-section.tsx   | 576 ++++++++++++++++++
 .../shadcn/toggle-group-section.tsx           | 395 ++++++++++++
 .../app/playground/shadcn/toggle-section.tsx  | 326 ++++++++++
 .../src/components/providers.tsx              |   4 +-
 packages/react/package.json                   |   2 +
 .../compound/reorder-group/index.tsx          |  12 +
 .../react/components/primitives/dialog.tsx    |   4 +-
 .../src/react/components/primitives/toast.tsx |   7 +-
 .../react/components/primitives/toggle.tsx    |  34 ++
 packages/react/src/react/styles/tailwind.css  |   3 +-
 .../react/v2/components/primitives/button.tsx |   2 +-
 .../react/v2/components/primitives/dialog.tsx |   2 +-
 .../react/v2/components/primitives/index.ts   |   4 +
 .../react/v2/components/primitives/input.tsx  |   2 +-
 .../react/v2/components/primitives/sheet.tsx  |   2 +-
 .../v2/components/primitives/sidebar.tsx      |  10 +-
 .../react/v2/components/primitives/sonner.tsx |  73 +++
 .../v2/components/primitives/textarea.tsx     |  18 +
 .../react/v2/components/primitives/toggel.tsx |  47 ++
 .../v2/components/primitives/toggle-group.tsx |  71 +++
 .../v2/components/primitives/tooltip.tsx      |   2 +-
 pnpm-lock.yaml                                |  58 ++
 24 files changed, 1944 insertions(+), 19 deletions(-)
 create mode 100644 examples/ui-playground/src/app/playground/shadcn/textarea-section.tsx
 create mode 100644 examples/ui-playground/src/app/playground/shadcn/toast-section.tsx
 create mode 100644 examples/ui-playground/src/app/playground/shadcn/toggle-group-section.tsx
 create mode 100644 examples/ui-playground/src/app/playground/shadcn/toggle-section.tsx
 create mode 100644 packages/react/v2/components/primitives/sonner.tsx
 create mode 100644 packages/react/v2/components/primitives/textarea.tsx
 create mode 100644 packages/react/v2/components/primitives/toggel.tsx
 create mode 100644 packages/react/v2/components/primitives/toggle-group.tsx

diff --git a/examples/ui-playground/src/app/playground/shadcn/page.tsx b/examples/ui-playground/src/app/playground/shadcn/page.tsx
index 7e72b72a..e2595acd 100644
--- a/examples/ui-playground/src/app/playground/shadcn/page.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/page.tsx
@@ -12,6 +12,10 @@ import { ComboboxSection } from './combobox-section'
 import { DropdownMenuSection } from './dropdown-menu-section'
 import { InputSection } from './input-section'
 import { LinkSection } from './link-section'
+import { TextareaSection } from './textarea-section'
+import { ToastSection } from './toast-section'
+import { ToggleGroupSection } from './toggle-group-section'
+import { ToggleSection } from './toggle-section'
 import { TooltipSection } from './tooltip-section'
 
 export default function ComboboxPage() {
@@ -56,6 +60,26 @@ export default function ComboboxPage() {
           Collapsible
         </Typography>
         <CollapsibleSection />
+
+        <Typography type="h2" weight="bold" id="toggle">
+          Toggle
+        </Typography>
+        <ToggleSection />
+
+        <Typography type="h2" weight="bold" id="toggle-group">
+          Toggle Group
+        </Typography>
+        <ToggleGroupSection />
+
+        <Typography type="h2" weight="bold" id="textarea">
+          Textarea
+        </Typography>
+        <TextareaSection />
+
+        <Typography type="h2" weight="bold" id="toast">
+          Toast
+        </Typography>
+        <ToastSection />
       </div>
       <div className="relative bg-card border-l border-border w-[200px]">
         <div className="sticky inset-0 max-h-screen [overscroll-behavior:none] p-4">
@@ -112,6 +136,34 @@ export default function ComboboxPage() {
               {'>'} Collapsible
             </Link>
             <hr />
+            <Link
+              href="#toggle"
+              className={linkVariants({ className: 'text-text-secondary', variant: 'plain' })}
+            >
+              {'>'} Toggle
+            </Link>
+            <hr />
+            <Link
+              href="#toggle-group"
+              className={linkVariants({ className: 'text-text-secondary', variant: 'plain' })}
+            >
+              {'>'} Toggle Group
+            </Link>
+            <hr />
+            <Link
+              href="#textarea"
+              className={linkVariants({ className: 'text-text-secondary', variant: 'plain' })}
+            >
+              {'>'} Textarea
+            </Link>
+            <hr />
+            <Link
+              href="#toast"
+              className={linkVariants({ className: 'text-text-secondary', variant: 'plain' })}
+            >
+              {'>'} Toast
+            </Link>
+            <hr />
             <Link
               href="/playground/shadcn/sidebar"
               className={linkVariants({ className: 'text-text-secondary', variant: 'plain' })}
diff --git a/examples/ui-playground/src/app/playground/shadcn/textarea-section.tsx b/examples/ui-playground/src/app/playground/shadcn/textarea-section.tsx
new file mode 100644
index 00000000..e9e8e73a
--- /dev/null
+++ b/examples/ui-playground/src/app/playground/shadcn/textarea-section.tsx
@@ -0,0 +1,257 @@
+import React from 'react'
+
+import { Typography } from '@genseki/react'
+import { Label, Textarea } from '@genseki/react/v2'
+
+import { PlaygroundCard } from '~/src/components/card'
+
+// Basic Textarea
+function BasicTextarea() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Textarea placeholder="Type your message here..." />
+    </div>
+  )
+}
+
+// Textarea with Label
+function TextareaWithLabel() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="space-y-4">
+        <label htmlFor="message" className="text-sm font-medium">
+          Message
+        </label>
+        <Textarea id="message" placeholder="Type your message here..." />
+      </div>
+    </div>
+  )
+}
+
+// Textarea with Description
+function TextareaWithDescription() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="space-y-4">
+        <label htmlFor="feedback" className="text-sm font-medium">
+          Feedback
+        </label>
+        <Textarea
+          id="feedback"
+          placeholder="Please provide your feedback..."
+          className="min-h-24"
+        />
+        <p className="text-sm text-muted-foreground">
+          Please provide detailed feedback about your experience.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+// Disabled Textarea
+function DisabledTextarea() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Textarea placeholder="This textarea is disabled" disabled />
+    </div>
+  )
+}
+
+// Textarea with Error State
+function TextareaWithError() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="space-y-4">
+        <Label htmlFor="error-textarea" className="text-sm font-medium">
+          Message
+        </Label>
+        <Textarea
+          id="error-textarea"
+          placeholder="Type your message here..."
+          aria-invalid="true"
+          className="border-destructive focus-visible:ring-destructive"
+        />
+        <p className="text-sm text-destructive">
+          This field is required and must be at least 10 characters.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+// Textarea with Different Sizes
+function TextareaSizes() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="space-y-4">
+        <Label className="text-sm font-medium">Small</Label>
+        <Textarea placeholder="Small textarea" className="min-h-16 text-sm" />
+      </div>
+      <div className="space-y-4">
+        <Label className="text-sm font-medium">Default</Label>
+        <Textarea placeholder="Default textarea" />
+      </div>
+      <div className="space-y-4">
+        <Label className="text-sm font-medium">Large</Label>
+        <Textarea placeholder="Large textarea" className="min-h-48 text-lg" />
+      </div>
+    </div>
+  )
+}
+
+// Textarea with Character Count
+function TextareaWithCharacterCount() {
+  const [value, setValue] = React.useState('')
+  const maxLength = 200
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="space-y-4">
+        <Label htmlFor="character-count" className="text-sm font-medium">
+          Message
+        </Label>
+        <Textarea
+          id="character-count"
+          placeholder="Type your message here..."
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          maxLength={maxLength}
+        />
+        <div className="flex justify-between text-sm text-muted-foreground">
+          <span>
+            Character count: {value.length}/{maxLength}
+          </span>
+          <span className={value.length > maxLength * 0.9 ? 'text-destructive' : ''}>
+            {maxLength - value.length} remaining
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Textarea with Auto Resize
+function TextareaWithAutoResize() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="space-y-4">
+        <Label htmlFor="auto-resize" className="text-sm font-medium">
+          Auto-resizing textarea
+        </Label>
+        <Textarea
+          id="auto-resize"
+          placeholder="This textarea will grow as you type..."
+          className="field-sizing-content min-h-16"
+        />
+      </div>
+    </div>
+  )
+}
+
+// Textarea with Custom Styling
+function TextareaWithCustomStyling() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="space-y-4">
+        <Label htmlFor="custom-styling" className="text-sm font-medium">
+          Custom styled textarea
+        </Label>
+        <Textarea
+          id="custom-styling"
+          placeholder="This textarea has custom styling..."
+          className="border-2 border-blue-300 focus-visible:border-blue-500 focus-visible:ring-blue-200 bg-blue-50/50"
+        />
+      </div>
+    </div>
+  )
+}
+
+export function TextareaSection() {
+  return (
+    <>
+      <div className="grid gap-8">
+        <PlaygroundCard title="Basic Textarea" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            A basic textarea input for multi-line text entry.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <BasicTextarea />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Textarea with Label" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Textarea with an associated label for better accessibility.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <TextareaWithLabel />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Textarea with Description" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Textarea with descriptive text to help users understand the expected input.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <TextareaWithDescription />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Disabled Textarea" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            A disabled textarea that cannot be interacted with.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <DisabledTextarea />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Textarea with Error State" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Textarea in an error state with validation feedback.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <TextareaWithError />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Textarea Sizes" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Different sizes of textarea components for various use cases.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <TextareaSizes />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Textarea with Character Count" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Textarea with character counting functionality and validation.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <TextareaWithCharacterCount />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Auto-resizing Textarea" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Textarea that automatically adjusts its height based on content.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <TextareaWithAutoResize />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Textarea with Custom Styling" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Textarea with custom styling to match specific design requirements.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <TextareaWithCustomStyling />
+          </div>
+        </PlaygroundCard>
+      </div>
+    </>
+  )
+}
diff --git a/examples/ui-playground/src/app/playground/shadcn/toast-section.tsx b/examples/ui-playground/src/app/playground/shadcn/toast-section.tsx
new file mode 100644
index 00000000..4f4fdf85
--- /dev/null
+++ b/examples/ui-playground/src/app/playground/shadcn/toast-section.tsx
@@ -0,0 +1,576 @@
+import React from 'react'
+
+import {
+  CheckCircleIcon,
+  DownloadIcon,
+  EnvelopeIcon,
+  HeartIcon,
+  ShareIcon,
+} from '@phosphor-icons/react'
+
+import { Typography } from '@genseki/react'
+import { Button, toast } from '@genseki/react/v2'
+
+import { PlaygroundCard } from '~/src/components/card'
+
+// Basic Toast
+function BasicToast() {
+  const showToast = () => {
+    toast('Hello, this is a basic toast!')
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Button onClick={showToast}>Show Basic Toast</Button>
+    </div>
+  )
+}
+
+// Toast Types
+function ToastTypes() {
+  const showSuccess = () => {
+    toast.success('Operation completed successfully!')
+  }
+
+  const showDefault = () => {
+    toast.loading('asda')
+  }
+
+  const showError = () => {
+    toast.error('Something went wrong!')
+  }
+
+  const showWarning = () => {
+    toast.warning('Please check your input')
+  }
+
+  const showInfo = () => {
+    toast.info('Here is some information')
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Button onClick={showDefault} variant="outline">
+        Default toast
+      </Button>
+      <Button onClick={showSuccess} variant="outline">
+        Success Toast
+      </Button>
+      <Button onClick={showInfo} variant="outline">
+        Info Toast
+      </Button>
+      <Button onClick={showError} variant="destructive">
+        Error Toast
+      </Button>
+      <Button onClick={showWarning} variant="destructive">
+        Warning Toast
+      </Button>
+    </div>
+  )
+}
+
+// Toast with Description
+function ToastWithDescription() {
+  const showDefaultToast = () => {
+    toast('Email is already registered.', {
+      description: "Your item's in the cart. Tap here to check it out.",
+      action: {
+        label: 'View',
+        onClick(event) {},
+      },
+      cancel: {
+        label: 'Cancel',
+        onClick(event) {},
+      },
+    })
+  }
+
+  const showSuccessToast = () => {
+    toast.success('Email is already registered.', {
+      description: "Your item's in the cart. Tap here to check it out.",
+      action: {
+        label: 'View',
+        onClick(event) {},
+      },
+      cancel: {
+        label: 'Cancel',
+        onClick(event) {},
+      },
+    })
+  }
+
+  const showInfoToast = () => {
+    toast.info('Email is already registered.', {
+      description: "Your item's in the cart. Tap here to check it out.",
+      action: {
+        label: 'View',
+        onClick(event) {},
+      },
+      cancel: {
+        label: 'Cancel',
+        onClick(event) {},
+      },
+    })
+  }
+
+  const showErrorToast = () => {
+    toast.error('Email is already registered.', {
+      description: "Your item's in the cart. Tap here to check it out.",
+      action: {
+        label: 'View',
+        onClick(event) {},
+      },
+      cancel: {
+        label: 'Cancel',
+        onClick(event) {},
+      },
+    })
+  }
+
+  const showWarningToast = () => {
+    toast.warning('Email is already registered.', {
+      description: "Your item's in the cart. Tap here to check it out.",
+      action: {
+        label: 'View',
+        onClick(event) {},
+      },
+      cancel: {
+        label: 'Cancel',
+        onClick(event) {},
+      },
+    })
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Button onClick={showDefaultToast}>
+        <EnvelopeIcon />
+        Send Email (Default)
+      </Button>
+      <Button onClick={showSuccessToast}>
+        <EnvelopeIcon />
+        Send Email (Success)
+      </Button>
+      <Button onClick={showInfoToast}>
+        <EnvelopeIcon />
+        Send Email (Info)
+      </Button>
+      <Button onClick={showErrorToast} variant="destructive">
+        <EnvelopeIcon />
+        Send Email (Error)
+      </Button>
+      <Button onClick={showWarningToast} variant="destructive">
+        <EnvelopeIcon />
+        Send Email (Warning)
+      </Button>
+    </div>
+  )
+}
+
+// Toast with Action
+function ToastWithAction() {
+  const showToast = () => {
+    toast('File uploaded successfully', {
+      description: 'Your file has been uploaded to the cloud.',
+      action: {
+        label: 'View',
+        onClick: () => console.log('View clicked'),
+      },
+    })
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Button onClick={showToast}>Show Toast with Action</Button>
+    </div>
+  )
+}
+
+// Toast with Custom Duration
+function ToastWithCustomDuration() {
+  const showQuickToast = () => {
+    toast('This will disappear quickly', {
+      duration: 1000,
+    })
+  }
+
+  const showLongToast = () => {
+    toast('This will stay for a while', {
+      duration: 10000,
+    })
+  }
+
+  const showPersistentToast = () => {
+    toast('This will stay until dismissed', {
+      duration: Infinity,
+    })
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Button onClick={showQuickToast} variant="outline">
+        Quick Toast (1s)
+      </Button>
+      <Button onClick={showLongToast} variant="outline">
+        Long Toast (10s)
+      </Button>
+      <Button onClick={showPersistentToast} variant="outline">
+        Persistent Toast
+      </Button>
+    </div>
+  )
+}
+
+// Toast with Custom Icons
+function ToastWithCustomIcons() {
+  const showHeartToast = () => {
+    toast('Added to favorites', {
+      icon: <HeartIcon />,
+      description: 'This item has been added to your favorites.',
+    })
+  }
+
+  const showDownloadToast = () => {
+    toast('Download started', {
+      icon: <DownloadIcon />,
+      description: 'Your download will begin shortly.',
+    })
+  }
+
+  const showShareToast = () => {
+    toast('Link copied to clipboard', {
+      icon: <ShareIcon />,
+      description: 'You can now paste it anywhere.',
+    })
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Button onClick={showHeartToast} variant="outline">
+        <HeartIcon />
+        Heart Toast
+      </Button>
+      <Button onClick={showDownloadToast} variant="outline">
+        <DownloadIcon />
+        Download Toast
+      </Button>
+      <Button onClick={showShareToast} variant="outline">
+        <ShareIcon />
+        Share Toast
+      </Button>
+    </div>
+  )
+}
+
+// Loading Toast
+function LoadingToast() {
+  const showLoadingToast = () => {
+    const toastId = toast.loading('Processing your request...')
+
+    // Simulate async operation
+    setTimeout(() => {
+      toast.success('Request completed!', {
+        id: toastId,
+      })
+    }, 3000)
+  }
+
+  const showLoadingWithUpdate = () => {
+    const toastId = toast.loading('Uploading file...', {
+      description: 'Please wait while we upload your file.',
+    })
+
+    // Simulate progress updates
+    setTimeout(() => {
+      toast.loading('Processing file...', {
+        id: toastId,
+        description: 'Almost done!',
+      })
+    }, 2000)
+
+    setTimeout(() => {
+      toast.success('Upload complete!', {
+        id: toastId,
+        description: 'Your file has been uploaded successfully.',
+      })
+    }, 4000)
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Button onClick={showLoadingToast} variant="outline">
+        Show Loading Toast
+      </Button>
+      <Button onClick={showLoadingWithUpdate} variant="outline">
+        Show Loading with Updates
+      </Button>
+    </div>
+  )
+}
+
+// Promise Toast
+function PromiseToast() {
+  const showPromiseToast = () => {
+    const promise = () => new Promise((resolve) => setTimeout(resolve, 2000))
+
+    toast.promise(promise, {
+      loading: 'Loading...',
+      success: 'Data has been saved!',
+      error: 'Error saving data!',
+    })
+  }
+
+  const showPromiseWithError = () => {
+    const promise = () => new Promise((_resolve, reject) => setTimeout(reject, 2000))
+
+    toast.promise(promise, {
+      loading: 'Processing...',
+      success: 'Success!',
+      error: 'Something went wrong!',
+    })
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Button onClick={showPromiseToast} variant="outline">
+        Show Promise Toast
+      </Button>
+      <Button onClick={showPromiseWithError} variant="destructive">
+        Show Promise Error
+      </Button>
+    </div>
+  )
+}
+
+// Toast Positioning
+function ToastPositioning() {
+  const showTopLeftToast = () => {
+    toast('Top Left Toast', {
+      position: 'top-left',
+    })
+  }
+
+  const showTopRightToast = () => {
+    toast('Top Right Toast', {
+      position: 'top-right',
+    })
+  }
+
+  const showBottomLeftToast = () => {
+    toast('Bottom Left Toast', {
+      position: 'bottom-left',
+    })
+  }
+
+  const showBottomRightToast = () => {
+    toast('Bottom Right Toast', {
+      position: 'bottom-right',
+    })
+  }
+
+  const showTopCenterToast = () => {
+    toast('Top Center Toast', {
+      position: 'top-center',
+    })
+  }
+
+  const showBottomCenterToast = () => {
+    toast('Bottom Center Toast', {
+      position: 'bottom-center',
+    })
+  }
+
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      <Button onClick={showTopLeftToast} variant="outline" size="sm">
+        Top Left
+      </Button>
+      <Button onClick={showTopCenterToast} variant="outline" size="sm">
+        Top Center
+      </Button>
+      <Button onClick={showTopRightToast} variant="outline" size="sm">
+        Top Right
+      </Button>
+      <Button onClick={showBottomLeftToast} variant="outline" size="sm">
+        Bottom Left
+      </Button>
+      <Button onClick={showBottomCenterToast} variant="outline" size="sm">
+        Bottom Center
+      </Button>
+      <Button onClick={showBottomRightToast} variant="outline" size="sm">
+        Bottom Right
+      </Button>
+    </div>
+  )
+}
+
+// Dismissible Toast
+function DismissibleToast() {
+  const showDismissibleToast = () => {
+    toast('This toast can be dismissed', {
+      description: 'Click the X button or swipe to dismiss.',
+      dismissible: true,
+    })
+  }
+
+  const showNonDismissibleToast = () => {
+    toast('This toast cannot be dismissed', {
+      description: 'You cannot dismiss this toast manually.',
+      dismissible: false,
+    })
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Button onClick={showDismissibleToast} variant="outline">
+        Dismissible Toast
+      </Button>
+      <Button onClick={showNonDismissibleToast} variant="outline">
+        Non-Dismissible Toast
+      </Button>
+    </div>
+  )
+}
+
+// Toast with Custom Styling
+function ToastWithCustomStyling() {
+  const showCustomToast = () => {
+    toast('Custom styled toast', {
+      description: 'This toast has custom styling.',
+      className: 'bg-blue-500 text-white',
+      style: {
+        border: '2px solid #3b82f6',
+      },
+    })
+  }
+
+  const showRichToast = () => {
+    toast(
+      <div className="flex items-center gap-2">
+        <CheckCircleIcon className="text-green-500" />
+        <span className="font-semibold">Success!</span>
+      </div>,
+      {
+        description: 'Your action was completed successfully.',
+      }
+    )
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Button onClick={showCustomToast} variant="outline">
+        Custom Styled Toast
+      </Button>
+      <Button onClick={showRichToast} variant="outline">
+        Rich Content Toast
+      </Button>
+    </div>
+  )
+}
+
+export function ToastSection() {
+  return (
+    <>
+      <div className="grid gap-8">
+        <PlaygroundCard title="Basic Toast" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            A simple toast notification that appears temporarily.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <BasicToast />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Toast Types" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Different types of toast notifications for various scenarios.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <ToastTypes />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Toast with Description" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Toast notifications with additional descriptive text.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <ToastWithDescription />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Toast with Action" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Toast notifications with actionable buttons.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <ToastWithAction />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Toast with Custom Duration" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Control how long toast notifications stay visible.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <ToastWithCustomDuration />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Toast with Custom Icons" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Toast notifications with custom icons for better visual context.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <ToastWithCustomIcons />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Loading Toast" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Toast notifications for loading states and async operations.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <LoadingToast />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Promise Toast" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Toast notifications that automatically update based on promise states.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <PromiseToast />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Toast Positioning" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Control where toast notifications appear on the screen.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <ToastPositioning />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Dismissible Toast" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Control whether users can manually dismiss toast notifications.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <DismissibleToast />
+          </div>
+        </PlaygroundCard>
+
+        <PlaygroundCard title="Toast with Custom Styling" categoryTitle="Component">
+          <Typography type="body" className="text-muted-foreground mb-4">
+            Customize the appearance of toast notifications with styles and rich content.
+          </Typography>
+          <div className="p-4 bg-background w-full rounded-lg">
+            <ToastWithCustomStyling />
+          </div>
+        </PlaygroundCard>
+      </div>
+    </>
+  )
+}
diff --git a/examples/ui-playground/src/app/playground/shadcn/toggle-group-section.tsx b/examples/ui-playground/src/app/playground/shadcn/toggle-group-section.tsx
new file mode 100644
index 00000000..56f40c18
--- /dev/null
+++ b/examples/ui-playground/src/app/playground/shadcn/toggle-group-section.tsx
@@ -0,0 +1,395 @@
+import React from 'react'
+
+import {
+  AlignCenterHorizontalSimpleIcon,
+  AlignLeftSimpleIcon,
+  AlignRightSimpleIcon,
+  BookmarkIcon,
+  ColumnsIcon,
+  GridFourIcon,
+  HeartIcon,
+  ListBulletsIcon,
+  ListIcon,
+  ListNumbersIcon,
+  StarIcon,
+  TextBolderIcon,
+  TextItalicIcon,
+  TextUnderlineIcon,
+} from '@phosphor-icons/react'
+
+import { Typography } from '@genseki/react'
+import { ToggleGroup, ToggleGroupItem } from '@genseki/react/v2'
+
+import { PlaygroundCard } from '~/src/components/card'
+
+// Basic Toggle Group - Single Selection
+function BasicToggleGroup() {
+  const [value, setValue] = React.useState('left')
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <ToggleGroup type="single" value={value} onValueChange={setValue}>
+        <ToggleGroupItem value="left">Left</ToggleGroupItem>
+        <ToggleGroupItem value="center">Center</ToggleGroupItem>
+        <ToggleGroupItem value="right">Right</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
+
+// Toggle Group - Multiple Selection
+function MultipleToggleGroup() {
+  const [value, setValue] = React.useState<string[]>([])
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <ToggleGroup type="multiple" value={value} onValueChange={setValue}>
+        <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+        <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+        <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
+
+// Toggle Group Variants
+function ToggleGroupVariants() {
+  const [defaultValue, setDefaultValue] = React.useState('option1')
+  const [outlineValue, setOutlineValue] = React.useState('option1')
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <ToggleGroup
+        type="single"
+        value={defaultValue}
+        onValueChange={setDefaultValue}
+        variant="default"
+      >
+        <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
+        <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
+        <ToggleGroupItem value="option3">Option 3</ToggleGroupItem>
+      </ToggleGroup>
+
+      <ToggleGroup
+        type="single"
+        value={outlineValue}
+        onValueChange={setOutlineValue}
+        variant="outline"
+      >
+        <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
+        <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
+        <ToggleGroupItem value="option3">Option 3</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
+
+// Toggle Group Sizes
+function ToggleGroupSizes() {
+  const [smValue, setSmValue] = React.useState('small')
+  const [defaultValue, setDefaultValue] = React.useState('default')
+  const [lgValue, setLgValue] = React.useState('large')
+
+  return (
+    <div className="flex flex-wrap items-center gap-4">
+      <ToggleGroup type="single" value={smValue} onValueChange={setSmValue} size="sm">
+        <ToggleGroupItem value="small">Small</ToggleGroupItem>
+        <ToggleGroupItem value="medium">Medium</ToggleGroupItem>
+      </ToggleGroup>
+
+      <ToggleGroup
+        type="single"
+        value={defaultValue}
+        onValueChange={setDefaultValue}
+        size="default"
+      >
+        <ToggleGroupItem value="default">Default</ToggleGroupItem>
+        <ToggleGroupItem value="large">Large</ToggleGroupItem>
+      </ToggleGroup>
+
+      <ToggleGroup type="single" value={lgValue} onValueChange={setLgValue} size="lg">
+        <ToggleGroupItem value="large">Large</ToggleGroupItem>
+        <ToggleGroupItem value="extra">Extra</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
+
+// Toggle Group with Icons
+function ToggleGroupWithIcons() {
+  const [value, setValue] = React.useState<string[]>([])
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <ToggleGroup type="multiple" value={value} onValueChange={setValue}>
+        <ToggleGroupItem value="bold" size="default">
+          <TextBolderIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic" size="default">
+          <TextItalicIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="underline" size="default">
+          <TextUnderlineIcon />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
+
+// Text Formatting Toolbar
+function TextFormattingToolbar() {
+  const [formats, setFormats] = React.useState<string[]>([])
+
+  return (
+    <div className="space-y-4">
+      <ToggleGroup type="multiple" value={formats} onValueChange={setFormats} variant="outline">
+        <ToggleGroupItem value="bold">
+          <TextBolderIcon />
+          Bold
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic">
+          <TextItalicIcon />
+          Italic
+        </ToggleGroupItem>
+        <ToggleGroupItem value="underline">
+          <TextUnderlineIcon />
+          Underline
+        </ToggleGroupItem>
+      </ToggleGroup>
+      <div className="rounded-md border p-4">
+        <p
+          className={`text-sm ${formats.includes('bold') ? 'font-bold' : ''} ${formats.includes('italic') ? 'italic' : ''} ${formats.includes('underline') ? 'underline' : ''}`}
+        >
+          This text will change based on the selected formatting options.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+// List Type Selector
+function ListTypeSelector() {
+  const [listType, setListType] = React.useState('bullet')
+
+  return (
+    <div className="space-y-4">
+      <ToggleGroup type="single" value={listType} onValueChange={setListType}>
+        <ToggleGroupItem value="bullet">
+          <ListBulletsIcon />
+          Bullet List
+        </ToggleGroupItem>
+        <ToggleGroupItem value="numbered">
+          <ListNumbersIcon />
+          Numbered List
+        </ToggleGroupItem>
+      </ToggleGroup>
+      <div className="rounded-md border p-4">
+        <p className="text-sm">
+          Selected list type: {listType === 'bullet' ? 'Bullet List' : 'Numbered List'}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+// Text Alignment
+function TextAlignment() {
+  const [alignment, setAlignment] = React.useState('left')
+
+  return (
+    <div className="space-y-4">
+      <ToggleGroup type="single" value={alignment} onValueChange={setAlignment}>
+        <ToggleGroupItem value="left">
+          <AlignLeftSimpleIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="center">
+          <AlignCenterHorizontalSimpleIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="right">
+          <AlignRightSimpleIcon />
+        </ToggleGroupItem>
+      </ToggleGroup>
+      <div className="rounded-md border p-4">
+        <p className={`text-sm text-${alignment}`}>This text is aligned {alignment}.</p>
+      </div>
+    </div>
+  )
+}
+
+// View Mode Selector
+function ViewModeSelector() {
+  const [viewMode, setViewMode] = React.useState('grid')
+
+  return (
+    <div className="space-y-4">
+      <ToggleGroup type="single" value={viewMode} onValueChange={setViewMode} variant="outline">
+        <ToggleGroupItem value="grid">
+          <GridFourIcon />
+          Grid
+        </ToggleGroupItem>
+        <ToggleGroupItem value="list">
+          <ListIcon />
+          List
+        </ToggleGroupItem>
+        <ToggleGroupItem value="columns">
+          <ColumnsIcon />
+          Columns
+        </ToggleGroupItem>
+      </ToggleGroup>
+      <div className="rounded-md border p-4">
+        <p className="text-sm">Current view mode: {viewMode}</p>
+      </div>
+    </div>
+  )
+}
+
+// Filter Tags
+function FilterTags() {
+  const [selectedFilters, setSelectedFilters] = React.useState<string[]>(['featured'])
+
+  return (
+    <div className="space-y-4">
+      <ToggleGroup type="multiple" value={selectedFilters} onValueChange={setSelectedFilters}>
+        <ToggleGroupItem value="featured">
+          <StarIcon />
+          Featured
+        </ToggleGroupItem>
+        <ToggleGroupItem value="favorite">
+          <HeartIcon />
+          Favorite
+        </ToggleGroupItem>
+        <ToggleGroupItem value="bookmarked">
+          <BookmarkIcon />
+          Bookmarked
+        </ToggleGroupItem>
+      </ToggleGroup>
+      <div className="rounded-md border p-4">
+        <p className="text-sm">
+          Active filters: {selectedFilters.length > 0 ? selectedFilters.join(', ') : 'None'}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+// Disabled States
+function DisabledStates() {
+  const [value, setValue] = React.useState('option2')
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <ToggleGroup type="single" value={value} onValueChange={setValue}>
+        <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
+        <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
+        <ToggleGroupItem value="option3" disabled>
+          Disabled
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
+
+export function ToggleGroupSection() {
+  return (
+    <div className="grid gap-8">
+      <PlaygroundCard title="Basic Toggle Group - Single Selection" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A toggle group that allows only one item to be selected at a time.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <BasicToggleGroup />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Toggle Group - Multiple Selection" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A toggle group that allows multiple items to be selected simultaneously.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <MultipleToggleGroup />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Toggle Group Variants" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Toggle groups come in different visual variants.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <ToggleGroupVariants />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Toggle Group Sizes" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Toggle groups are available in three sizes: small, default, and large.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <ToggleGroupSizes />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Toggle Group with Icons" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Icon-only toggle groups for compact interfaces.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <ToggleGroupWithIcons />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Text Formatting Toolbar" categoryTitle="Use Case">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A practical example of using toggle groups for text formatting controls.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <TextFormattingToolbar />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="List Type Selector" categoryTitle="Use Case">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A toggle group for selecting between different list types.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <ListTypeSelector />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Text Alignment" categoryTitle="Use Case">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A toggle group for text alignment controls with visual feedback.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <TextAlignment />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="View Mode Selector" categoryTitle="Use Case">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A toggle group for switching between different view modes.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <ViewModeSelector />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Filter Tags" categoryTitle="Use Case">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A toggle group for applying multiple filters with tags.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <FilterTags />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Disabled States" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Toggle groups support disabled states for individual items.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <DisabledStates />
+        </div>
+      </PlaygroundCard>
+    </div>
+  )
+}
diff --git a/examples/ui-playground/src/app/playground/shadcn/toggle-section.tsx b/examples/ui-playground/src/app/playground/shadcn/toggle-section.tsx
new file mode 100644
index 00000000..6e8c2a97
--- /dev/null
+++ b/examples/ui-playground/src/app/playground/shadcn/toggle-section.tsx
@@ -0,0 +1,326 @@
+import React from 'react'
+
+import {
+  AlignCenterHorizontalSimpleIcon,
+  AlignLeftSimpleIcon,
+  AlignRightSimpleIcon,
+  BookmarkIcon,
+  HeartIcon,
+  ListBulletsIcon,
+  ListNumbersIcon,
+  StarIcon,
+  TextBolderIcon,
+  TextItalicIcon,
+  TextUnderlineIcon,
+} from '@phosphor-icons/react'
+
+import { Typography } from '@genseki/react'
+import { Toggle } from '@genseki/react/v2'
+
+import { PlaygroundCard } from '~/src/components/card'
+
+// Basic Toggle
+function BasicToggle() {
+  const [isPressed, setIsPressed] = React.useState(false)
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Toggle pressed={isPressed} onPressedChange={setIsPressed}>
+        Toggle me
+      </Toggle>
+      <Toggle pressed={false} disabled>
+        Disabled
+      </Toggle>
+    </div>
+  )
+}
+
+// Toggle Variants
+function ToggleVariants() {
+  const [defaultPressed, setDefaultPressed] = React.useState(false)
+  const [outlinePressed, setOutlinePressed] = React.useState(false)
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Toggle pressed={defaultPressed} onPressedChange={setDefaultPressed} variant="default">
+        Default
+      </Toggle>
+      <Toggle pressed={outlinePressed} onPressedChange={setOutlinePressed} variant="outline">
+        Outline
+      </Toggle>
+    </div>
+  )
+}
+
+// Toggle Sizes
+function ToggleSizes() {
+  const [smPressed, setSmPressed] = React.useState(false)
+  const [defaultPressed, setDefaultPressed] = React.useState(false)
+  const [lgPressed, setLgPressed] = React.useState(false)
+
+  return (
+    <div className="flex flex-wrap items-center gap-4">
+      <Toggle pressed={smPressed} onPressedChange={setSmPressed} size="sm">
+        Small
+      </Toggle>
+      <Toggle pressed={defaultPressed} onPressedChange={setDefaultPressed} size="default">
+        Default
+      </Toggle>
+      <Toggle pressed={lgPressed} onPressedChange={setLgPressed} size="lg">
+        Large
+      </Toggle>
+    </div>
+  )
+}
+
+// Toggle with Icons
+function ToggleWithIcons() {
+  const [boldPressed, setBoldPressed] = React.useState(false)
+  const [italicPressed, setItalicPressed] = React.useState(false)
+  const [underlinePressed, setUnderlinePressed] = React.useState(false)
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Toggle pressed={boldPressed} onPressedChange={setBoldPressed} size="default">
+        <TextBolderIcon />
+      </Toggle>
+      <Toggle pressed={italicPressed} onPressedChange={setItalicPressed} size="default">
+        <TextItalicIcon />
+      </Toggle>
+      <Toggle pressed={underlinePressed} onPressedChange={setUnderlinePressed} size="default">
+        <TextUnderlineIcon />
+      </Toggle>
+    </div>
+  )
+}
+
+// Toggle with Icons and Text
+function ToggleWithIconsAndText() {
+  const [listPressed, setListPressed] = React.useState(false)
+  const [numbersPressed, setNumbersPressed] = React.useState(false)
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Toggle pressed={listPressed} onPressedChange={setListPressed}>
+        <ListBulletsIcon />
+        Bullet List
+      </Toggle>
+      <Toggle pressed={numbersPressed} onPressedChange={setNumbersPressed}>
+        <ListNumbersIcon />
+        Numbered List
+      </Toggle>
+    </div>
+  )
+}
+
+// Text Formatting Example
+function TextFormattingExample() {
+  const [boldPressed, setBoldPressed] = React.useState(false)
+  const [italicPressed, setItalicPressed] = React.useState(false)
+  const [underlinePressed, setUnderlinePressed] = React.useState(false)
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        <Toggle
+          pressed={boldPressed}
+          onPressedChange={setBoldPressed}
+          size="default"
+          variant="outline"
+        >
+          <TextBolderIcon />
+        </Toggle>
+        <Toggle
+          pressed={italicPressed}
+          onPressedChange={setItalicPressed}
+          size="default"
+          variant="outline"
+        >
+          <TextItalicIcon />
+        </Toggle>
+        <Toggle
+          pressed={underlinePressed}
+          onPressedChange={setUnderlinePressed}
+          size="default"
+          variant="outline"
+        >
+          <TextUnderlineIcon />
+        </Toggle>
+      </div>
+      <div className="rounded-md border p-4">
+        <p
+          className={`text-sm ${boldPressed ? 'font-bold' : ''} ${italicPressed ? 'italic' : ''} ${underlinePressed ? 'underline' : ''}`}
+        >
+          This text will change based on the selected formatting options.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+// Alignment Controls
+function AlignmentControls() {
+  const [alignment, setAlignment] = React.useState<'left' | 'center' | 'right'>('left')
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        <Toggle
+          pressed={alignment === 'left'}
+          onPressedChange={(pressed) => pressed && setAlignment('left')}
+          size="default"
+          variant="outline"
+        >
+          <AlignLeftSimpleIcon />
+        </Toggle>
+        <Toggle
+          pressed={alignment === 'center'}
+          onPressedChange={(pressed) => pressed && setAlignment('center')}
+          size="default"
+          variant="outline"
+        >
+          <AlignCenterHorizontalSimpleIcon />
+        </Toggle>
+        <Toggle
+          pressed={alignment === 'right'}
+          onPressedChange={(pressed) => pressed && setAlignment('right')}
+          size="default"
+          variant="outline"
+        >
+          <AlignRightSimpleIcon />
+        </Toggle>
+      </div>
+      <div className="rounded-md border p-4">
+        <p className={`text-sm text-${alignment}`}>This text is aligned {alignment}.</p>
+      </div>
+    </div>
+  )
+}
+
+// Favorite Actions
+function FavoriteActions() {
+  const [favorites, setFavorites] = React.useState<Record<string, boolean>>({
+    heart: false,
+    star: false,
+    bookmark: false,
+  })
+
+  const toggleFavorite = (key: string) => {
+    setFavorites((prev) => ({ ...prev, [key]: !prev[key] }))
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-4">
+        <Toggle
+          pressed={favorites.heart}
+          onPressedChange={() => toggleFavorite('heart')}
+          size="default"
+        >
+          <HeartIcon />
+        </Toggle>
+        <Toggle
+          pressed={favorites.star}
+          onPressedChange={() => toggleFavorite('star')}
+          size="default"
+        >
+          <StarIcon />
+        </Toggle>
+        <Toggle
+          pressed={favorites.bookmark}
+          onPressedChange={() => toggleFavorite('bookmark')}
+          size="default"
+        >
+          <BookmarkIcon />
+        </Toggle>
+      </div>
+      <div className="rounded-md border p-4">
+        <p className="text-sm">
+          Favorites:{' '}
+          {Object.entries(favorites)
+            .filter(([_, value]) => value)
+            .map(([key]) => key)
+            .join(', ') || 'None'}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function ToggleSection() {
+  return (
+    <div className="grid gap-8">
+      <PlaygroundCard title="Basic Toggle" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A simple toggle button that can be pressed or unpressed.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <BasicToggle />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Toggle Variants" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Toggle buttons come in different visual variants.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <ToggleVariants />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Toggle Sizes" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Toggle buttons are available in three sizes: small, default, and large.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <ToggleSizes />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Toggle with Icons" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Icon-only toggle buttons for compact interfaces.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <ToggleWithIcons />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Toggle with Icons and Text" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Toggle buttons with both icons and text labels.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <ToggleWithIconsAndText />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Text Formatting Example" categoryTitle="Use Case">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A practical example of using toggles for text formatting controls.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <TextFormattingExample />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Alignment Controls" categoryTitle="Use Case">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Toggle buttons for text alignment controls with visual feedback.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <AlignmentControls />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Favorite Actions" categoryTitle="Use Case">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Independent toggle buttons for favorite/bookmark functionality.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <FavoriteActions />
+        </div>
+      </PlaygroundCard>
+    </div>
+  )
+}
diff --git a/examples/ui-playground/src/components/providers.tsx b/examples/ui-playground/src/components/providers.tsx
index b4fbc373..dbb094c0 100644
--- a/examples/ui-playground/src/components/providers.tsx
+++ b/examples/ui-playground/src/components/providers.tsx
@@ -4,7 +4,7 @@ import type { PropsWithChildren } from 'react'
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 
-import { Toast } from '@genseki/react'
+import { Toaster } from '@genseki/react/v2'
 
 export function Providers(props: PropsWithChildren) {
   return (
@@ -16,7 +16,7 @@ export function Providers(props: PropsWithChildren) {
       enableColorScheme
     >
       {props.children}
-      <Toast />
+      <Toaster />
     </NextThemesProvider>
   )
 }
diff --git a/packages/react/package.json b/packages/react/package.json
index 1573543c..fae36476 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -59,6 +59,8 @@
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@react-aria/i18n": "^3.12.9",
diff --git a/packages/react/src/react/components/compound/reorder-group/index.tsx b/packages/react/src/react/components/compound/reorder-group/index.tsx
index 74d431f4..4050b36e 100644
--- a/packages/react/src/react/components/compound/reorder-group/index.tsx
+++ b/packages/react/src/react/components/compound/reorder-group/index.tsx
@@ -17,12 +17,18 @@ import { DotsSixIcon } from '@phosphor-icons/react'
 
 import { BaseIcon, Button, Typography } from '../../primitives'
 
+/**
+ * @deprecated Implement yourselves
+ */
 interface ReorderGroupProps {
   title?: string
   children: ReactNode
   onReorder?: (newOrder: string[]) => void
 }
 
+/**
+ * @deprecated Implement yourselves
+ */
 interface SortableItemProps {
   id: string
   children: ReactElement
@@ -30,6 +36,9 @@ interface SortableItemProps {
   order?: number
 }
 
+/**
+ * @deprecated Implement yourselves
+ */
 const ReorderGroup = ({ children, onReorder, title }: ReorderGroupProps) => {
   // convert children to array of ReactElement
   const elements = Children.toArray(children) as ReactElement[]
@@ -86,6 +95,9 @@ const ReorderGroup = ({ children, onReorder, title }: ReorderGroupProps) => {
   )
 }
 
+/**
+ * @deprecated Implement yourselves
+ */
 const SortableItem = ({ id, children, title, order }: SortableItemProps) => {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id })
 
diff --git a/packages/react/src/react/components/primitives/dialog.tsx b/packages/react/src/react/components/primitives/dialog.tsx
index 6334e521..1dc82b39 100644
--- a/packages/react/src/react/components/primitives/dialog.tsx
+++ b/packages/react/src/react/components/primitives/dialog.tsx
@@ -260,7 +260,7 @@ const DialogCloseIndicator = ({ className, ...props }: CloseButtonIndicatorProps
       slot="close"
       className={composeTailwindRenderProps(
         className,
-        'close hover:bg-secondary focus:bg-secondary focus:outline-hidden focus-visible:ring-primary absolute right-1 top-1 z-50 grid size-12 place-content-center rounded-xl focus-visible:ring-1 sm:right-2 sm:top-2 sm:size-7 sm:rounded-md'
+        'close hover:bg-secondary focus:bg-secondary focus:outline-hidden focus-visible:ring-primary absolute right-1 top-1 z-50 grid size-12 place-content-center rounded-xl focus-visible:ring-[2px] sm:right-2 sm:top-2 sm:size-7 sm:rounded-md'
       )}
     >
       <BaseIcon icon={XIcon} size="sm" weight="bold" />
@@ -288,7 +288,7 @@ const DialogCloseIcon = ({ className, ...props }: CloseButtonIndicatorProps) =>
       slot="close"
       className={composeTailwindRenderProps(
         className,
-        'close absolute top-4 right-4 z-50 grid size-8 place-content-center rounded-full hover:bg-secondary focus:bg-secondary focus:outline-hidden focus-visible:ring-1 focus-visible:ring-primary sm:top-5 sm:right-5 sm:size-8 sm:rounded-md'
+        'close absolute top-4 right-4 z-50 grid size-8 place-content-center rounded-full hover:bg-secondary focus:bg-secondary focus:outline-hidden focus-visible:ring-[2px] focus-visible:ring-primary sm:top-5 sm:right-5 sm:size-8 sm:rounded-md'
       )}
       {...props}
     >
diff --git a/packages/react/src/react/components/primitives/toast.tsx b/packages/react/src/react/components/primitives/toast.tsx
index abd55e45..6e33c278 100644
--- a/packages/react/src/react/components/primitives/toast.tsx
+++ b/packages/react/src/react/components/primitives/toast.tsx
@@ -2,13 +2,12 @@
 
 import { Toaster as ToasterPrimitive, type ToasterProps } from 'sonner'
 
-import { useTheme } from '../../providers/theme'
-
+/**
+ * @deprecated
+ */
 const Toast = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme()
   return (
     <ToasterPrimitive
-      theme={theme as ToasterProps['theme']}
       className="toaster group"
       richColors
       toastOptions={{
diff --git a/packages/react/src/react/components/primitives/toggle.tsx b/packages/react/src/react/components/primitives/toggle.tsx
index be6ac019..bd3abe24 100644
--- a/packages/react/src/react/components/primitives/toggle.tsx
+++ b/packages/react/src/react/components/primitives/toggle.tsx
@@ -7,6 +7,9 @@ import { composeRenderProps, ToggleButton, ToggleButtonGroup } from 'react-aria-
 import type { VariantProps } from 'tailwind-variants'
 import { tv } from 'tailwind-variants'
 
+/**
+ * @deprecated
+ */
 type ToggleGroupContextProps = {
   isDisabled?: boolean
   gap?: 0 | 1 | 2 | 3 | 4
@@ -15,6 +18,9 @@ type ToggleGroupContextProps = {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'square-petite'
 }
 
+/**
+ * @deprecated
+ */
 const ToggleGroupContext = createContext<ToggleGroupContextProps>({
   gap: 1,
   intent: 'outline',
@@ -22,22 +28,38 @@ const ToggleGroupContext = createContext<ToggleGroupContextProps>({
   size: 'md',
 })
 
+/**
+ * @deprecated
+ */
 type BaseToggleGroupProps = Omit<ToggleGroupContextProps, 'gap' | 'intent'>
+
+/**
+ * @deprecated
+ */
 interface ToggleGroupPropsNonZeroGap extends BaseToggleGroupProps {
   gap?: Exclude<ToggleGroupContextProps['gap'], 0>
   intent?: ToggleGroupContextProps['intent']
 }
 
+/**
+ * @deprecated
+ */
 interface ToggleGroupPropsGapZero extends BaseToggleGroupProps {
   gap?: 0
   intent?: Exclude<ToggleGroupContextProps['intent'], 'plain'>
 }
 
+/**
+ * @deprecated
+ */
 type ToggleGroupProps = ToggleButtonGroupProps &
   (ToggleGroupPropsGapZero | ToggleGroupPropsNonZeroGap) & {
     ref?: React.RefObject<HTMLDivElement>
   }
 
+/**
+ * @deprecated
+ */
 const toggleGroupStyles = tv({
   base: 'flex',
   variants: {
@@ -74,6 +96,9 @@ const toggleGroupStyles = tv({
   ],
 })
 
+/**
+ * @deprecated
+ */
 const ToggleGroup = ({
   className,
   ref,
@@ -104,6 +129,9 @@ const ToggleGroup = ({
   )
 }
 
+/**
+ * @deprecated
+ */
 const toggleStyles = tv({
   base: [
     'inset-ring inset-ring-border cursor-default items-center gap-x-2 rounded-lg outline-hidden sm:text-sm',
@@ -155,10 +183,16 @@ const toggleStyles = tv({
   ],
 })
 
+/**
+ * @deprecated
+ */
 interface ToggleProps extends ToggleButtonProps, VariantProps<typeof toggleStyles> {
   ref?: React.RefObject<HTMLButtonElement>
 }
 
+/**
+ * @deprecated
+ */
 const Toggle = ({ className, intent, ref, ...props }: ToggleProps) => {
   const {
     intent: groupIntent,
diff --git a/packages/react/src/react/styles/tailwind.css b/packages/react/src/react/styles/tailwind.css
index 31bf4f8c..2ea7c804 100644
--- a/packages/react/src/react/styles/tailwind.css
+++ b/packages/react/src/react/styles/tailwind.css
@@ -183,6 +183,7 @@
 
   /* Surface */
 
+  --color-surface-primary: var(--color-white);
   --color-surface-primary-hover: var(--color-bluegray-100);
   --color-surface-primary-active: var(--color-bluegray-100);
   --color-surface-primary-disabled: var(--color-bluegray-50);
@@ -463,7 +464,7 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background: var(--border);
+    background: var(--color-border);
     border-radius: 4px;
   }
 }
diff --git a/packages/react/v2/components/primitives/button.tsx b/packages/react/v2/components/primitives/button.tsx
index e3a34ae7..412acfa6 100644
--- a/packages/react/v2/components/primitives/button.tsx
+++ b/packages/react/v2/components/primitives/button.tsx
@@ -11,7 +11,7 @@ import { cn } from '../../../src/react/utils/cn'
 
 const buttonVariants = cva(
   [
-    "inline-flex items-center justify-center gap-4 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring ring-offset-1 focus-visible:ring-ring focus-visible:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "inline-flex items-center justify-center gap-4 whitespace-nowrap rounded-md text-base font-medium transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring ring-offset-1 focus-visible:ring-ring focus-visible:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     'disabled:opacity-80 cursor-pointer',
   ],
   {
diff --git a/packages/react/v2/components/primitives/dialog.tsx b/packages/react/v2/components/primitives/dialog.tsx
index f96686c4..7aabbae6 100644
--- a/packages/react/v2/components/primitives/dialog.tsx
+++ b/packages/react/v2/components/primitives/dialog.tsx
@@ -59,7 +59,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-8 right-8 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-4 focus:ring-offset-4 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-8"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-8 right-8 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-[2px] focus:ring-offset-4 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-8"
           >
             <XIcon />
             <span className="sr-only">Close</span>
diff --git a/packages/react/v2/components/primitives/index.ts b/packages/react/v2/components/primitives/index.ts
index cccacad5..6e40958e 100644
--- a/packages/react/v2/components/primitives/index.ts
+++ b/packages/react/v2/components/primitives/index.ts
@@ -15,4 +15,8 @@ export * from './separator'
 export * from './sheet'
 export * from './sidebar'
 export * from './skeleton'
+export * from './sonner'
+export * from './textarea'
+export * from './toggel'
+export * from './toggle-group'
 export * from './tooltip'
diff --git a/packages/react/v2/components/primitives/input.tsx b/packages/react/v2/components/primitives/input.tsx
index 9416252d..a18b5ba5 100644
--- a/packages/react/v2/components/primitives/input.tsx
+++ b/packages/react/v2/components/primitives/input.tsx
@@ -11,7 +11,7 @@ function Input({
     <input
       type={type}
       className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-18 w-full min-w-0 rounded-md border bg-transparent px-6 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-14 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-18 w-full min-w-0 rounded-md border bg-transparent px-6 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:bg-transparent file:rounded-sm file:px-4 file:h-full file:border-0 file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 ',
         'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
         'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
         className
diff --git a/packages/react/v2/components/primitives/sheet.tsx b/packages/react/v2/components/primitives/sheet.tsx
index 3222ca19..897f5d04 100644
--- a/packages/react/v2/components/primitives/sheet.tsx
+++ b/packages/react/v2/components/primitives/sheet.tsx
@@ -64,7 +64,7 @@ function SheetContent({
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-8 right-8 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-4 focus:ring-offset-4 focus:outline-hidden disabled:pointer-events-none">
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-8 right-8 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-[2px] focus:ring-offset-4 focus:outline-hidden disabled:pointer-events-none">
           <XIcon className="size-8" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
diff --git a/packages/react/v2/components/primitives/sidebar.tsx b/packages/react/v2/components/primitives/sidebar.tsx
index 385f7a40..70fceec6 100644
--- a/packages/react/v2/components/primitives/sidebar.tsx
+++ b/packages/react/v2/components/primitives/sidebar.tsx
@@ -382,7 +382,7 @@ function SidebarGroupLabel({
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        'text-sidebar-foreground/70 ring-sidebar-ring flex h-16 shrink-0 items-center rounded-md px-4 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-8 [&>svg]:shrink-0',
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-16 shrink-0 items-center rounded-md px-4 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-[2px] [&>svg]:size-8 [&>svg]:shrink-0',
         'group-data-[collapsible=icon]:-mt-16 group-data-[collapsible=icon]:opacity-0',
         className
       )}
@@ -403,7 +403,7 @@ function SidebarGroupAction({
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-7 right-6 flex aspect-square w-10 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-8 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-7 right-6 flex aspect-square w-10 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-[2px] [&>svg]:size-8 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-4 md:after:hidden',
         'group-data-[collapsible=icon]:hidden',
@@ -448,7 +448,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-4 overflow-hidden rounded-md p-4 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-16 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-16! group-data-[collapsible=icon]:p-4! [&>span:last-child]:truncate [&>svg]:size-8 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-4 overflow-hidden rounded-md p-4 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-[2px] active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-16 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-16! group-data-[collapsible=icon]:p-4! [&>span:last-child]:truncate [&>svg]:size-8 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -535,7 +535,7 @@ function SidebarMenuAction({
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-3 right-2 flex aspect-square w-10 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-8 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-3 right-2 flex aspect-square w-10 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-[2px] [&>svg]:size-8 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-4 md:after:hidden',
         'peer-data-[size=sm]/menu-button:top-2',
@@ -649,7 +649,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-14 min-w-0 -translate-x-px items-center gap-4 overflow-hidden rounded-md px-4 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-8 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-14 min-w-0 -translate-x-px items-center gap-4 overflow-hidden rounded-md px-4 outline-hidden focus-visible:ring-[2px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-8 [&>svg]:shrink-0',
         'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',
diff --git a/packages/react/v2/components/primitives/sonner.tsx b/packages/react/v2/components/primitives/sonner.tsx
new file mode 100644
index 00000000..bcd13bf2
--- /dev/null
+++ b/packages/react/v2/components/primitives/sonner.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import {
+  CheckCircleIcon,
+  InfoIcon,
+  SpinnerIcon,
+  WarningCircleIcon,
+  WarningIcon,
+} from '@phosphor-icons/react'
+import { toast, Toaster as Sonner, type ToasterProps } from 'sonner'
+
+import { cn } from '../../../src/react/utils/cn'
+
+const Toaster = (props: ToasterProps) => {
+  console.log(props)
+  return (
+    <Sonner
+      className="toaster group"
+      icons={{
+        success: <CheckCircleIcon weight="fill" className="size-8 text-icon-correct " />,
+        info: <InfoIcon weight="fill" className="size-8 text-icon-info" />,
+        warning: <WarningIcon weight="fill" className="size-8 text-icon-accent" />,
+        error: <WarningCircleIcon weight="fill" className="size-8 text-icon-incorrect" />,
+        loading: <SpinnerIcon weight="regular" className="size-8 animate-spin text-text-primary" />,
+      }}
+      toastOptions={{
+        className:
+          'group/each !gap-0 [&:has([data-description],[data-action],[data-cancel])]:!flex [&:has([data-description],[data-action],[data-cancel])]:!flex-wrap',
+        classNames: {
+          icon: '!m-0 !mr-5 group-[&:has([data-description],[data-action],[data-cancel])]/each:!mb-5',
+          success: cn(
+            '!bg-surface-correct !border-border-correct [&:has([data-description],[data-action],[data-cancel])]:!bg-surface-primary',
+            '[&_*:where([data-title],[data-description])]:!text-text-correct-bold ', // Title and description styling
+            '[&_*[data-cancel]]:!bg-surface-correct [&_*[data-cancel]]:!text-text-correct-bold', // Cancel button styling
+            '[&_*[data-action]]:!bg-surface-correct-hover [&_*[data-action]]:!text-text-inverse' // Action button styling
+          ),
+          error: cn(
+            '!bg-surface-incorrect !border-border-incorrect [&:has([data-description],[data-action],[data-cancel])]:!bg-surface-primary',
+            '[&_*:where([data-title],[data-description])]:!text-text-incorrect-bold ', // Title and description styling
+            '[&_*[data-cancel]]:!bg-surface-incorrect [&_*[data-cancel]]:!text-text-incorrect-bold', // Cancel button styling
+            '[&_*[data-action]]:!bg-surface-incorrect-hover [&_*[data-action]]:!text-text-inverse' // Action button styling
+          ),
+          warning: cn(
+            '!bg-surface-accent !border-border-accent [&:has([data-description],[data-action],[data-cancel])]:!bg-surface-primary',
+            '[&_*:where([data-title],[data-description])]:!text-text-accent-bold ', // Title and description styling
+            '[&_*[data-cancel]]:!bg-surface-accent [&_*[data-cancel]]:!text-text-accent-bold', // Cancel button styling
+            '[&_*[data-action]]:!bg-surface-accent-hover [&_*[data-action]]:!text-text-inverse' // Action button styling
+          ),
+          info: cn(
+            '!bg-surface-info !border-border-info [&:has([data-description],[data-action],[data-cancel])]:!bg-surface-primary',
+            '[&_*:where([data-title],[data-description])]:!text-text-info-bold ', // Title and description styling
+            '[&_*[data-cancel]]:!bg-surface-info [&_*[data-cancel]]:!text-text-info-bold', // Cancel button styling
+            '[&_*[data-action]]:!bg-surface-info-hover [&_*[data-action]]:!text-text-inverse' // Action button styling
+          ),
+          content: '!basis-full', // Content wrap both title and description
+          title: '!text-base !font-medium',
+          description: '!text-base !font-normal',
+          cancelButton: '!m-0 !mt-6 !rounded-sm',
+          actionButton: '!m-0 !mt-6 !rounded-sm [button+&]:!ml-6',
+        },
+        style: {
+          '--normal-bg': 'var(--color-popover)',
+          '--normal-text': 'var(--color-popover-foreground)',
+          '--normal-border': 'var(--color-border)',
+          '--border-radius': 'var(--color-radius)',
+        } as React.CSSProperties,
+      }}
+      {...props}
+    />
+  )
+}
+
+export { toast, Toaster }
diff --git a/packages/react/v2/components/primitives/textarea.tsx b/packages/react/v2/components/primitives/textarea.tsx
new file mode 100644
index 00000000..8765ced2
--- /dev/null
+++ b/packages/react/v2/components/primitives/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+import { cn } from '../../../src/react/utils/cn'
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-32 w-full rounded-md border bg-transparent px-6 py-4 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[2px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/packages/react/v2/components/primitives/toggel.tsx b/packages/react/v2/components/primitives/toggel.tsx
new file mode 100644
index 00000000..2cc893d2
--- /dev/null
+++ b/packages/react/v2/components/primitives/toggel.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import * as React from 'react'
+
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '../../../src/react/utils/cn'
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-4 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-18 px-4 min-w-18',
+        sm: 'h-16 px-3 min-w-16',
+        lg: 'h-20 px-5 min-w-20',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/packages/react/v2/components/primitives/toggle-group.tsx b/packages/react/v2/components/primitives/toggle-group.tsx
new file mode 100644
index 00000000..7b4c8950
--- /dev/null
+++ b/packages/react/v2/components/primitives/toggle-group.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import * as React from 'react'
+
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+import { type VariantProps } from 'class-variance-authority'
+
+import { toggleVariants } from './toggel'
+
+import { cn } from '../../../src/react/utils/cn'
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        'min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/packages/react/v2/components/primitives/tooltip.tsx b/packages/react/v2/components/primitives/tooltip.tsx
index 98b556b9..58376c9f 100644
--- a/packages/react/v2/components/primitives/tooltip.tsx
+++ b/packages/react/v2/components/primitives/tooltip.tsx
@@ -43,7 +43,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-4 data-[side=left]:slide-in-from-right-4 data-[side=right]:slide-in-from-left-4 data-[side=top]:slide-in-from-bottom-4 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-6 py-3 text-xs text-balance',
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-4 data-[side=left]:slide-in-from-right-4 data-[side=right]:slide-in-from-left-4 data-[side=top]:slide-in-from-bottom-4 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-6 py-3 text-base font-semibold text-balance',
           className
         )}
         {...props}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f83376ce..d3c4fc6c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -445,6 +445,12 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.2.0
         version: 1.2.2(@types/react@19.1.6)(react@19.1.0)
+      '@radix-ui/react-toggle':
+        specifier: ^1.1.10
+        version: 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.6))(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle-group':
+        specifier: ^1.1.11
+        version: 1.1.11(@types/react-dom@19.1.6(@types/react@19.1.6))(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-tooltip':
         specifier: ^1.2.8
         version: 1.2.8(@types/react-dom@19.1.6(@types/react@19.1.6))(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -1791,6 +1797,32 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-toggle-group@1.1.11':
+    resolution: {integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.10':
+    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-tooltip@1.2.8':
     resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
     peerDependencies:
@@ -7156,6 +7188,32 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.6
 
+  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@19.1.6(@types/react@19.1.6))(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.6)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.6)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.6))(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.6(@types/react@19.1.6))(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.6))(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.6)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.6
+      '@types/react-dom': 19.1.6(@types/react@19.1.6)
+
+  '@radix-ui/react-toggle@1.1.10(@types/react-dom@19.1.6(@types/react@19.1.6))(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.6))(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.6)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.6
+      '@types/react-dom': 19.1.6(@types/react@19.1.6)
+
   '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.1.6(@types/react@19.1.6))(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3

From 2f6bf7b04e5bece5e936b27150b2857de07b3b8d Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Sat, 18 Oct 2025 18:01:23 +0700
Subject: [PATCH 2/4] fix: `textarea`ring styling, `input` ring styling,
 ui-playground `card` component, `label` font size

---
 .../playground/shadcn/textarea-section.tsx    | 42 +++++++------------
 .../src/react/components/primitives/card.tsx  | 12 ++----
 .../v2/components/primitives/input-group.tsx  |  2 +-
 .../react/v2/components/primitives/input.tsx  |  7 ++--
 .../react/v2/components/primitives/label.tsx  |  2 +-
 .../v2/components/primitives/textarea.tsx     |  3 +-
 6 files changed, 26 insertions(+), 42 deletions(-)

diff --git a/examples/ui-playground/src/app/playground/shadcn/textarea-section.tsx b/examples/ui-playground/src/app/playground/shadcn/textarea-section.tsx
index e9e8e73a..76e1ff46 100644
--- a/examples/ui-playground/src/app/playground/shadcn/textarea-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/textarea-section.tsx
@@ -19,9 +19,7 @@ function TextareaWithLabel() {
   return (
     <div className="flex flex-col gap-4">
       <div className="space-y-4">
-        <label htmlFor="message" className="text-sm font-medium">
-          Message
-        </label>
+        <Label htmlFor="message">Message</Label>
         <Textarea id="message" placeholder="Type your message here..." />
       </div>
     </div>
@@ -33,17 +31,15 @@ function TextareaWithDescription() {
   return (
     <div className="flex flex-col gap-4">
       <div className="space-y-4">
-        <label htmlFor="feedback" className="text-sm font-medium">
-          Feedback
-        </label>
+        <Label htmlFor="feedback">Feedback</Label>
         <Textarea
           id="feedback"
           placeholder="Please provide your feedback..."
           className="min-h-24"
         />
-        <p className="text-sm text-muted-foreground">
+        <Typography type="caption" className=" text-muted-foreground">
           Please provide detailed feedback about your experience.
-        </p>
+        </Typography>
       </div>
     </div>
   )
@@ -63,18 +59,16 @@ function TextareaWithError() {
   return (
     <div className="flex flex-col gap-4">
       <div className="space-y-4">
-        <Label htmlFor="error-textarea" className="text-sm font-medium">
-          Message
-        </Label>
+        <Label htmlFor="error-textarea">Message</Label>
         <Textarea
           id="error-textarea"
           placeholder="Type your message here..."
           aria-invalid="true"
           className="border-destructive focus-visible:ring-destructive"
         />
-        <p className="text-sm text-destructive">
+        <Typography type="caption" className=" text-destructive">
           This field is required and must be at least 10 characters.
-        </p>
+        </Typography>
       </div>
     </div>
   )
@@ -85,15 +79,15 @@ function TextareaSizes() {
   return (
     <div className="flex flex-col gap-4">
       <div className="space-y-4">
-        <Label className="text-sm font-medium">Small</Label>
-        <Textarea placeholder="Small textarea" className="min-h-16 text-sm" />
+        <Label>Small</Label>
+        <Textarea placeholder="Small textarea" className="min-h-16 " />
       </div>
       <div className="space-y-4">
-        <Label className="text-sm font-medium">Default</Label>
+        <Label>Default</Label>
         <Textarea placeholder="Default textarea" />
       </div>
       <div className="space-y-4">
-        <Label className="text-sm font-medium">Large</Label>
+        <Label>Large</Label>
         <Textarea placeholder="Large textarea" className="min-h-48 text-lg" />
       </div>
     </div>
@@ -108,9 +102,7 @@ function TextareaWithCharacterCount() {
   return (
     <div className="flex flex-col gap-4">
       <div className="space-y-4">
-        <Label htmlFor="character-count" className="text-sm font-medium">
-          Message
-        </Label>
+        <Label htmlFor="character-count">Message</Label>
         <Textarea
           id="character-count"
           placeholder="Type your message here..."
@@ -118,7 +110,7 @@ function TextareaWithCharacterCount() {
           onChange={(e) => setValue(e.target.value)}
           maxLength={maxLength}
         />
-        <div className="flex justify-between text-sm text-muted-foreground">
+        <div className="flex justify-between  text-muted-foreground">
           <span>
             Character count: {value.length}/{maxLength}
           </span>
@@ -136,9 +128,7 @@ function TextareaWithAutoResize() {
   return (
     <div className="flex flex-col gap-4">
       <div className="space-y-4">
-        <Label htmlFor="auto-resize" className="text-sm font-medium">
-          Auto-resizing textarea
-        </Label>
+        <Label htmlFor="auto-resize">Auto-resizing textarea</Label>
         <Textarea
           id="auto-resize"
           placeholder="This textarea will grow as you type..."
@@ -154,9 +144,7 @@ function TextareaWithCustomStyling() {
   return (
     <div className="flex flex-col gap-4">
       <div className="space-y-4">
-        <Label htmlFor="custom-styling" className="text-sm font-medium">
-          Custom styled textarea
-        </Label>
+        <Label htmlFor="custom-styling">Custom styled textarea</Label>
         <Textarea
           id="custom-styling"
           placeholder="This textarea has custom styling..."
diff --git a/packages/react/src/react/components/primitives/card.tsx b/packages/react/src/react/components/primitives/card.tsx
index e847c026..fd61ca1d 100644
--- a/packages/react/src/react/components/primitives/card.tsx
+++ b/packages/react/src/react/components/primitives/card.tsx
@@ -3,9 +3,7 @@
 import React from 'react'
 
 import { IconChevronLgRight } from '@intentui/icons'
-import { CubeIcon, Folder } from '@phosphor-icons/react'
-
-import { BaseIcon } from './base-icon'
+import { CubeIcon, FolderIcon } from '@phosphor-icons/react'
 
 import { BadgeOrange } from '../../icons/badge-orange'
 import { DotsCard } from '../../icons/dots-card'
@@ -22,11 +20,7 @@ const Card: React.FC<CardProps> = ({ title, itemNumber, description, buttonTitle
   return (
     <div className="bg-white rounded-2xl shadow-sm p-2 max-w-sm w-[296px] border border-bluegray-300 relative">
       <BadgeOrange className="size-24 absolute top-0 left-6 -translate-y-1/2 z-[1]" />
-      <BaseIcon
-        icon={CubeIcon}
-        size="md"
-        className="text-text-brand size-10 absolute top-0 left-8 -translate-y-1/2 z-[2] translate-x-1/2"
-      />
+      <CubeIcon className="text-text-brand size-10 absolute top-0 left-8 -translate-y-1/2 z-[2] translate-x-1/2" />
       {/* Header */}
       <div className="flex justify-between items-center px-8 pb-4 pt-14 border-b border-bluegray-300 relative overflow-hidden">
         {/* Dots */}
@@ -36,7 +30,7 @@ const Card: React.FC<CardProps> = ({ title, itemNumber, description, buttonTitle
         <p className="text-lg font-semibold text-bluegray-800">{title}</p>
         {itemNumber && (
           <div className="flex items-center gap-2">
-            <BaseIcon icon={Folder} size="md" className="text-text-secondary" />
+            <FolderIcon className="text-text-secondary" />
             <span className="text-sm text-text-secondary">{itemNumber} items</span>
           </div>
         )}
diff --git a/packages/react/v2/components/primitives/input-group.tsx b/packages/react/v2/components/primitives/input-group.tsx
index 21b83300..e9e9cf81 100644
--- a/packages/react/v2/components/primitives/input-group.tsx
+++ b/packages/react/v2/components/primitives/input-group.tsx
@@ -31,7 +31,7 @@ function InputGroup({
         'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-6',
 
         // Focus state.
-        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[2px]',
 
         // Error state.
         'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
diff --git a/packages/react/v2/components/primitives/input.tsx b/packages/react/v2/components/primitives/input.tsx
index a18b5ba5..091abbf2 100644
--- a/packages/react/v2/components/primitives/input.tsx
+++ b/packages/react/v2/components/primitives/input.tsx
@@ -11,9 +11,10 @@ function Input({
     <input
       type={type}
       className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-18 w-full min-w-0 rounded-md border bg-transparent px-6 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:bg-transparent file:rounded-sm file:px-4 file:h-full file:border-0 file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 ',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-18 w-full min-w-0 rounded-md border bg-transparent px-6 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:bg-transparent file:rounded-sm file:px-4 file:h-full file:border-0 file:text-sm file:font-medium',
+        'disabled:pointer-events-none disabled::cursor-not-allowed disabled:text-text-disabled disabled:bg-surface-primary-disabled disabled:border-border-primary disabled:placeholder:text-text-disabled',
+        'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[2px]',
+        'aria-invalid:ring-destructive dark:aria-invalid:ring-destructive aria-invalid:border-destructive',
         className
       )}
       data-slot="input"
diff --git a/packages/react/v2/components/primitives/label.tsx b/packages/react/v2/components/primitives/label.tsx
index 6dc0323b..d0539c35 100644
--- a/packages/react/v2/components/primitives/label.tsx
+++ b/packages/react/v2/components/primitives/label.tsx
@@ -11,7 +11,7 @@ function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimiti
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        'flex items-center gap-1 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        'flex items-center gap-1 text-base leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         className
       )}
       {...props}
diff --git a/packages/react/v2/components/primitives/textarea.tsx b/packages/react/v2/components/primitives/textarea.tsx
index 8765ced2..eca5c825 100644
--- a/packages/react/v2/components/primitives/textarea.tsx
+++ b/packages/react/v2/components/primitives/textarea.tsx
@@ -7,7 +7,8 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
     <textarea
       data-slot="textarea"
       className={cn(
-        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-32 w-full rounded-md border bg-transparent px-6 py-4 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[2px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive dark:aria-invalid:ring-destructive aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-32 w-full rounded-md border bg-transparent px-7 py-6 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[2px]',
+        'disabled:pointer-events-none disabled::cursor-not-allowed disabled:text-text-disabled disabled:bg-surface-primary-disabled disabled:border-border-primary disabled:placeholder:text-text-disabled',
         className
       )}
       {...props}

From d03d85d28fe0a298c393a7a5ddcf2f8591cdc83e Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Sat, 18 Oct 2025 18:19:55 +0700
Subject: [PATCH 3/4] fix: ui-playground section styling.

---
 .../playground/shadcn/collapsible-section.tsx | 65 ++++++++++---------
 .../src/app/playground/shadcn/page.tsx        |  2 +-
 .../playground/shadcn/textarea-section.tsx    |  8 +--
 .../app/playground/shadcn/toast-section.tsx   |  2 +-
 .../ui-playground/src/components/card.tsx     |  4 +-
 .../v2/components/primitives/input-group.tsx  |  4 +-
 .../react/v2/components/primitives/input.tsx  |  2 +-
 .../v2/components/primitives/textarea.tsx     |  2 +-
 8 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/examples/ui-playground/src/app/playground/shadcn/collapsible-section.tsx b/examples/ui-playground/src/app/playground/shadcn/collapsible-section.tsx
index ed8efeb4..7ec2570d 100644
--- a/examples/ui-playground/src/app/playground/shadcn/collapsible-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/collapsible-section.tsx
@@ -35,7 +35,7 @@ function BasicCollapsible() {
           </div>
         </div>
         <CollapsibleContent className="space-y-2 mt-4">
-          <div className="rounded-md border px-4 py-3 text-sm">
+          <div className="rounded-md border px-4 py-3 ">
             This is the collapsible content that can be shown or hidden.
           </div>
         </CollapsibleContent>
@@ -61,15 +61,15 @@ function FileTreeStyle() {
             </Button>
           </CollapsibleTrigger>
           <CollapsibleContent className="ml-6 space-y-1">
-            <div className="flex items-center gap-2 p-2 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2 p-2  text-muted-foreground">
               <FileIcon />
               report.pdf
             </div>
-            <div className="flex items-center gap-2 p-2 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2 p-2  text-muted-foreground">
               <FileIcon />
               presentation.pptx
             </div>
-            <div className="flex items-center gap-2 p-2 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2 p-2  text-muted-foreground">
               <FileIcon />
               notes.txt
             </div>
@@ -84,15 +84,15 @@ function FileTreeStyle() {
             </Button>
           </CollapsibleTrigger>
           <CollapsibleContent className="ml-6 space-y-1">
-            <div className="flex items-center gap-2 p-2 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2 p-2  text-muted-foreground">
               <ImageIcon />
               photo1.jpg
             </div>
-            <div className="flex items-center gap-2 p-2 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2 p-2  text-muted-foreground">
               <ImageIcon />
               photo2.png
             </div>
-            <div className="flex items-center gap-2 p-2 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2 p-2  text-muted-foreground">
               <ImageIcon />
               screenshot.png
             </div>
@@ -107,15 +107,15 @@ function FileTreeStyle() {
             </Button>
           </CollapsibleTrigger>
           <CollapsibleContent className="ml-6 space-y-1">
-            <div className="flex items-center gap-2 p-2 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2 p-2  text-muted-foreground">
               <VideoIcon />
               tutorial.mp4
             </div>
-            <div className="flex items-center gap-2 p-2 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2 p-2  text-muted-foreground">
               <VideoIcon />
               demo.mov
             </div>
-            <div className="flex items-center gap-2 p-2 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2 p-2  text-muted-foreground">
               <MusicNoteIcon />
               audio.mp3
             </div>
@@ -168,12 +168,12 @@ function FAQStyle() {
           >
             <CollapsibleTrigger asChild>
               <Button variant="ghost" className="w-full justify-between h-auto p-4 text-left">
-                <span className="font-medium">{item.question}</span>
+                <Typography className="font-medium">{item.question}</Typography>
                 {openItems.includes(item.id) ? <CaretDownIcon /> : <CaretRightIcon />}
               </Button>
             </CollapsibleTrigger>
-            <CollapsibleContent className="px-4 pb-4">
-              <div className="text-sm text-muted-foreground">{item.answer}</div>
+            <CollapsibleContent className="px-6 py-4">
+              <Typography className="text-muted-foreground">{item.answer}</Typography>
             </CollapsibleContent>
           </Collapsible>
         ))}
@@ -183,7 +183,7 @@ function FAQStyle() {
 }
 
 // Settings Panel Style
-function SettingsPanelStyle() {
+function SettingTypographyelStyle() {
   const [openSections, setOpenSections] = React.useState<string[]>(['general'])
 
   const toggleSection = (sectionId: string) => {
@@ -199,19 +199,19 @@ function SettingsPanelStyle() {
       content: (
         <div className="space-y-3">
           <div className="flex items-center justify-between">
-            <span className="text-sm">Dark Mode</span>
+            <Typography className="">Dark Mode</Typography>
             <Button variant="outline" size="sm">
               Toggle
             </Button>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-sm">Notifications</span>
+            <Typography className="">Notifications</Typography>
             <Button variant="outline" size="sm">
               Configure
             </Button>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-sm">Language</span>
+            <Typography className="">Language</Typography>
             <Button variant="outline" size="sm">
               English
             </Button>
@@ -225,19 +225,19 @@ function SettingsPanelStyle() {
       content: (
         <div className="space-y-3">
           <div className="flex items-center justify-between">
-            <span className="text-sm">Two-Factor Authentication</span>
+            <Typography className="">Two-Factor Authentication</Typography>
             <Button variant="outline" size="sm">
               Enable
             </Button>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-sm">Data Export</span>
+            <Typography className="">Data Export</Typography>
             <Button variant="outline" size="sm">
               Export
             </Button>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-sm">Account Deletion</span>
+            <Typography className="">Account Deletion</Typography>
             <Button variant="destructive" size="sm">
               Delete
             </Button>
@@ -251,19 +251,19 @@ function SettingsPanelStyle() {
       content: (
         <div className="space-y-3">
           <div className="flex items-center justify-between">
-            <span className="text-sm">Debug Mode</span>
+            <Typography className="">Debug Mode</Typography>
             <Button variant="outline" size="sm">
               Off
             </Button>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-sm">Cache Management</span>
+            <Typography className="">Cache Management</Typography>
             <Button variant="outline" size="sm">
               Clear
             </Button>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-sm">Reset Settings</span>
+            <Typography className="">Reset Settings</Typography>
             <Button variant="destructive" size="sm">
               Reset
             </Button>
@@ -283,12 +283,17 @@ function SettingsPanelStyle() {
               onOpenChange={() => toggleSection(section.id)}
             >
               <CollapsibleTrigger asChild>
-                <Button variant="ghost" className="w-full justify-between h-auto p-4">
-                  <span className="font-medium">{section.title}</span>
+                <Button
+                  variant="ghost"
+                  className="w-full justify-between h-auto p-4 data-[state=open]:rounded-bl-none data-[state=open]:rounded-br-none"
+                >
+                  <Typography className="font-medium">{section.title}</Typography>
                   {openSections.includes(section.id) ? <CaretDownIcon /> : <CaretRightIcon />}
                 </Button>
               </CollapsibleTrigger>
-              <CollapsibleContent className="px-4 pb-4">{section.content}</CollapsibleContent>
+              <CollapsibleContent className="p-4 pl-6 border-t border-border">
+                {section.content}
+              </CollapsibleContent>
             </Collapsible>
           </div>
         ))}
@@ -323,7 +328,7 @@ function MultipleIndependentCollapsibles() {
           </CollapsibleTrigger>
           <CollapsibleContent className="mt-2">
             <div className="rounded-md border p-4">
-              <p className="text-sm">
+              <p className="">
                 This is the content for section 1. Each collapsible can be controlled independently.
               </p>
             </div>
@@ -339,7 +344,7 @@ function MultipleIndependentCollapsibles() {
           </CollapsibleTrigger>
           <CollapsibleContent className="mt-2">
             <div className="rounded-md border p-4">
-              <p className="text-sm">
+              <p className="">
                 This section starts open by default. You can see how the state is managed
                 independently.
               </p>
@@ -355,7 +360,7 @@ function MultipleIndependentCollapsibles() {
           </CollapsibleTrigger>
           <CollapsibleContent className="mt-2">
             <div className="rounded-md border p-4">
-              <p className="text-sm">
+              <p className="">
                 This is the third section. Notice how each collapsible maintains its own state.
               </p>
             </div>
@@ -401,7 +406,7 @@ export function CollapsibleSection() {
           A settings panel with collapsible sections for different categories.
         </Typography>
         <div className="p-4 bg-background w-full rounded-lg">
-          <SettingsPanelStyle />
+          <SettingTypographyelStyle />
         </div>
       </PlaygroundCard>
 
diff --git a/examples/ui-playground/src/app/playground/shadcn/page.tsx b/examples/ui-playground/src/app/playground/shadcn/page.tsx
index e2595acd..4a89b6f6 100644
--- a/examples/ui-playground/src/app/playground/shadcn/page.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/page.tsx
@@ -20,7 +20,7 @@ import { TooltipSection } from './tooltip-section'
 
 export default function ComboboxPage() {
   return (
-    <div className="flex gap-y-8">
+    <div className="bg-background flex gap-y-8">
       <div className="flex-1 max-w-4xl flex flex-col gap-y-8 py-16 mx-auto">
         <Typography type="h1" weight="bold">
           Shadcn components
diff --git a/examples/ui-playground/src/app/playground/shadcn/textarea-section.tsx b/examples/ui-playground/src/app/playground/shadcn/textarea-section.tsx
index 76e1ff46..a0620347 100644
--- a/examples/ui-playground/src/app/playground/shadcn/textarea-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/textarea-section.tsx
@@ -111,12 +111,12 @@ function TextareaWithCharacterCount() {
           maxLength={maxLength}
         />
         <div className="flex justify-between  text-muted-foreground">
-          <span>
+          <Typography>
             Character count: {value.length}/{maxLength}
-          </span>
-          <span className={value.length > maxLength * 0.9 ? 'text-destructive' : ''}>
+          </Typography>
+          <Typography className={value.length > maxLength * 0.9 ? 'text-destructive' : ''}>
             {maxLength - value.length} remaining
-          </span>
+          </Typography>
         </div>
       </div>
     </div>
diff --git a/examples/ui-playground/src/app/playground/shadcn/toast-section.tsx b/examples/ui-playground/src/app/playground/shadcn/toast-section.tsx
index 4f4fdf85..62af2b8a 100644
--- a/examples/ui-playground/src/app/playground/shadcn/toast-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/toast-section.tsx
@@ -448,7 +448,7 @@ function ToastWithCustomStyling() {
     toast(
       <div className="flex items-center gap-2">
         <CheckCircleIcon className="text-green-500" />
-        <span className="font-semibold">Success!</span>
+        <Typography className="font-semibold">Success!</Typography>
       </div>,
       {
         description: 'Your action was completed successfully.',
diff --git a/examples/ui-playground/src/components/card.tsx b/examples/ui-playground/src/components/card.tsx
index 72fc9fd3..ad74f913 100644
--- a/examples/ui-playground/src/components/card.tsx
+++ b/examples/ui-playground/src/components/card.tsx
@@ -14,7 +14,7 @@ export const PlaygroundCard = ({
 }: PlaygroundCardProps) => {
   return (
     <div className="border-border inline-flex min-w-[260px] flex-col rounded-lg border bg-background">
-      <div className="border-border flex w-full flex-col gap-y-4 border-b px-4 py-6">
+      <div className="border-border flex w-full flex-col gap-y-4 border-b px-6 py-8">
         <div className="flex items-center gap-x-2">
           <div className="rounded-md bg-blue-500 p-2">
             <StarIcon className="text-text-inverse" />
@@ -27,7 +27,7 @@ export const PlaygroundCard = ({
           {title}
         </Typography>
       </div>
-      <div className="flex w-full flex-col items-start gap-y-2 px-4 py-4">
+      <div className="flex w-full flex-col items-start gap-y-2 p-6">
         <Typography type="label" weight="medium" className="text-muted-fg bg-muted rounded-sm p-2">
           Description
         </Typography>
diff --git a/packages/react/v2/components/primitives/input-group.tsx b/packages/react/v2/components/primitives/input-group.tsx
index e9e9cf81..37a2abf3 100644
--- a/packages/react/v2/components/primitives/input-group.tsx
+++ b/packages/react/v2/components/primitives/input-group.tsx
@@ -31,10 +31,10 @@ function InputGroup({
         'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-6',
 
         // Focus state.
-        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[2px]',
+        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[2px]',
 
         // Error state.
-        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+        'has-[[data-slot][aria-invalid=true]]:ring-destructive has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive',
 
         // Custom
         isPending && 'bg-muted pointer-events-none animate-pulse',
diff --git a/packages/react/v2/components/primitives/input.tsx b/packages/react/v2/components/primitives/input.tsx
index 091abbf2..433e456b 100644
--- a/packages/react/v2/components/primitives/input.tsx
+++ b/packages/react/v2/components/primitives/input.tsx
@@ -12,7 +12,7 @@ function Input({
       type={type}
       className={cn(
         'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-18 w-full min-w-0 rounded-md border bg-transparent px-6 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:bg-transparent file:rounded-sm file:px-4 file:h-full file:border-0 file:text-sm file:font-medium',
-        'disabled:pointer-events-none disabled::cursor-not-allowed disabled:text-text-disabled disabled:bg-surface-primary-disabled disabled:border-border-primary disabled:placeholder:text-text-disabled',
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-text-disabled disabled:border-border-primary disabled:placeholder:text-text-disabled',
         'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[2px]',
         'aria-invalid:ring-destructive dark:aria-invalid:ring-destructive aria-invalid:border-destructive',
         className
diff --git a/packages/react/v2/components/primitives/textarea.tsx b/packages/react/v2/components/primitives/textarea.tsx
index eca5c825..50808c73 100644
--- a/packages/react/v2/components/primitives/textarea.tsx
+++ b/packages/react/v2/components/primitives/textarea.tsx
@@ -8,7 +8,7 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
       data-slot="textarea"
       className={cn(
         'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive dark:aria-invalid:ring-destructive aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-32 w-full rounded-md border bg-transparent px-7 py-6 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[2px]',
-        'disabled:pointer-events-none disabled::cursor-not-allowed disabled:text-text-disabled disabled:bg-surface-primary-disabled disabled:border-border-primary disabled:placeholder:text-text-disabled',
+        'disabled:pointer-events-none disabled::cursor-not-allowed disabled:text-text-disabled disabled:border-border-primary disabled:placeholder:text-text-disabled',
         className
       )}
       {...props}

From 6978378c2f78781ec34651239e76e396fe63d005 Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Sun, 19 Oct 2025 12:19:44 +0700
Subject: [PATCH 4/4] fix: `sonner` styling, misspelling file name  `toggel` to
 `toggle`, remove `console.log`

---
 .../react/v2/components/primitives/index.ts   |   2 +-
 .../react/v2/components/primitives/sonner.tsx | 127 ++++++++++--------
 .../v2/components/primitives/toggle-group.tsx |   2 +-
 .../primitives/{toggel.tsx => toggle.tsx}     |   0
 4 files changed, 73 insertions(+), 58 deletions(-)
 rename packages/react/v2/components/primitives/{toggel.tsx => toggle.tsx} (100%)

diff --git a/packages/react/v2/components/primitives/index.ts b/packages/react/v2/components/primitives/index.ts
index 6e40958e..37ba3732 100644
--- a/packages/react/v2/components/primitives/index.ts
+++ b/packages/react/v2/components/primitives/index.ts
@@ -17,6 +17,6 @@ export * from './sidebar'
 export * from './skeleton'
 export * from './sonner'
 export * from './textarea'
-export * from './toggel'
+export * from './toggle'
 export * from './toggle-group'
 export * from './tooltip'
diff --git a/packages/react/v2/components/primitives/sonner.tsx b/packages/react/v2/components/primitives/sonner.tsx
index bcd13bf2..56bae9e4 100644
--- a/packages/react/v2/components/primitives/sonner.tsx
+++ b/packages/react/v2/components/primitives/sonner.tsx
@@ -12,62 +12,77 @@ import { toast, Toaster as Sonner, type ToasterProps } from 'sonner'
 import { cn } from '../../../src/react/utils/cn'
 
 const Toaster = (props: ToasterProps) => {
-  console.log(props)
-  return (
-    <Sonner
-      className="toaster group"
-      icons={{
-        success: <CheckCircleIcon weight="fill" className="size-8 text-icon-correct " />,
-        info: <InfoIcon weight="fill" className="size-8 text-icon-info" />,
-        warning: <WarningIcon weight="fill" className="size-8 text-icon-accent" />,
-        error: <WarningCircleIcon weight="fill" className="size-8 text-icon-incorrect" />,
-        loading: <SpinnerIcon weight="regular" className="size-8 animate-spin text-text-primary" />,
-      }}
-      toastOptions={{
-        className:
-          'group/each !gap-0 [&:has([data-description],[data-action],[data-cancel])]:!flex [&:has([data-description],[data-action],[data-cancel])]:!flex-wrap',
-        classNames: {
-          icon: '!m-0 !mr-5 group-[&:has([data-description],[data-action],[data-cancel])]/each:!mb-5',
-          success: cn(
-            '!bg-surface-correct !border-border-correct [&:has([data-description],[data-action],[data-cancel])]:!bg-surface-primary',
-            '[&_*:where([data-title],[data-description])]:!text-text-correct-bold ', // Title and description styling
-            '[&_*[data-cancel]]:!bg-surface-correct [&_*[data-cancel]]:!text-text-correct-bold', // Cancel button styling
-            '[&_*[data-action]]:!bg-surface-correct-hover [&_*[data-action]]:!text-text-inverse' // Action button styling
-          ),
-          error: cn(
-            '!bg-surface-incorrect !border-border-incorrect [&:has([data-description],[data-action],[data-cancel])]:!bg-surface-primary',
-            '[&_*:where([data-title],[data-description])]:!text-text-incorrect-bold ', // Title and description styling
-            '[&_*[data-cancel]]:!bg-surface-incorrect [&_*[data-cancel]]:!text-text-incorrect-bold', // Cancel button styling
-            '[&_*[data-action]]:!bg-surface-incorrect-hover [&_*[data-action]]:!text-text-inverse' // Action button styling
-          ),
-          warning: cn(
-            '!bg-surface-accent !border-border-accent [&:has([data-description],[data-action],[data-cancel])]:!bg-surface-primary',
-            '[&_*:where([data-title],[data-description])]:!text-text-accent-bold ', // Title and description styling
-            '[&_*[data-cancel]]:!bg-surface-accent [&_*[data-cancel]]:!text-text-accent-bold', // Cancel button styling
-            '[&_*[data-action]]:!bg-surface-accent-hover [&_*[data-action]]:!text-text-inverse' // Action button styling
-          ),
-          info: cn(
-            '!bg-surface-info !border-border-info [&:has([data-description],[data-action],[data-cancel])]:!bg-surface-primary',
-            '[&_*:where([data-title],[data-description])]:!text-text-info-bold ', // Title and description styling
-            '[&_*[data-cancel]]:!bg-surface-info [&_*[data-cancel]]:!text-text-info-bold', // Cancel button styling
-            '[&_*[data-action]]:!bg-surface-info-hover [&_*[data-action]]:!text-text-inverse' // Action button styling
-          ),
-          content: '!basis-full', // Content wrap both title and description
-          title: '!text-base !font-medium',
-          description: '!text-base !font-normal',
-          cancelButton: '!m-0 !mt-6 !rounded-sm',
-          actionButton: '!m-0 !mt-6 !rounded-sm [button+&]:!ml-6',
-        },
-        style: {
-          '--normal-bg': 'var(--color-popover)',
-          '--normal-text': 'var(--color-popover-foreground)',
-          '--normal-border': 'var(--color-border)',
-          '--border-radius': 'var(--color-radius)',
-        } as React.CSSProperties,
-      }}
-      {...props}
-    />
-  )
+  const toastOprions: ToasterProps = {
+    ...props,
+    icons: {
+      success: <CheckCircleIcon weight="fill" className="size-8 text-icon-correct " />,
+      info: <InfoIcon weight="fill" className="size-8 text-icon-info" />,
+      warning: <WarningIcon weight="fill" className="size-8 text-icon-accent" />,
+      error: <WarningCircleIcon weight="fill" className="size-8 text-icon-incorrect" />,
+      loading: <SpinnerIcon weight="regular" className="size-8 animate-spin text-text-primary" />,
+      ...props.icons,
+    },
+    toastOptions: {
+      ...props.toastOptions,
+      className: cn(
+        'group/each !gap-0 [&:has([data-description],[data-action],[data-cancel])]:!flex [&:has([data-description],[data-action],[data-cancel])]:!flex-wrap',
+        props.toastOptions?.className
+      ),
+      classNames: {
+        ...props.toastOptions?.classNames,
+        icon: cn(
+          '!m-0 !mr-5 group-[&:has([data-description],[data-action],[data-cancel])]/each:!mb-5',
+          props.toastOptions?.classNames?.icon
+        ),
+        success: cn(
+          '!bg-surface-correct !border-border-correct [&:has([data-description],[data-action],[data-cancel])]:!bg-surface-primary',
+          '[&_*:where([data-title],[data-description])]:!text-text-correct-bold ', // Title and description styling
+          '[&_*[data-cancel]]:!bg-surface-correct [&_*[data-cancel]]:!text-text-correct-bold', // Cancel button styling
+          '[&_*[data-action]]:!bg-surface-correct-hover [&_*[data-action]]:!text-text-inverse', // Action button styling
+          props.toastOptions?.classNames?.success
+        ),
+        error: cn(
+          '!bg-surface-incorrect !border-border-incorrect [&:has([data-description],[data-action],[data-cancel])]:!bg-surface-primary',
+          '[&_*:where([data-title],[data-description])]:!text-text-incorrect-bold ', // Title and description styling
+          '[&_*[data-cancel]]:!bg-surface-incorrect [&_*[data-cancel]]:!text-text-incorrect-bold', // Cancel button styling
+          '[&_*[data-action]]:!bg-surface-incorrect-hover [&_*[data-action]]:!text-text-inverse', // Action button styling
+          props.toastOptions?.classNames?.error
+        ),
+        warning: cn(
+          '!bg-surface-accent !border-border-accent [&:has([data-description],[data-action],[data-cancel])]:!bg-surface-primary',
+          '[&_*:where([data-title],[data-description])]:!text-text-accent-bold ', // Title and description styling
+          '[&_*[data-cancel]]:!bg-surface-accent [&_*[data-cancel]]:!text-text-accent-bold', // Cancel button styling
+          '[&_*[data-action]]:!bg-surface-accent-hover [&_*[data-action]]:!text-text-inverse', // Action button styling
+          props.toastOptions?.classNames?.warning
+        ),
+        info: cn(
+          '!bg-surface-info !border-border-info [&:has([data-description],[data-action],[data-cancel])]:!bg-surface-primary',
+          '[&_*:where([data-title],[data-description])]:!text-text-info-bold ', // Title and description styling
+
+          '[&_*[data-cancel]]:!bg-surface-info [&_*[data-cancel]]:!text-text-info-bold', // Cancel button styling
+          '[&_*[data-action]]:!bg-surface-info-hover [&_*[data-action]]:!text-text-inverse', // Action button styling
+          props.toastOptions?.classNames?.info
+        ),
+        content: cn('!basis-full', props.toastOptions?.classNames?.content), // Content wrap both title and description
+        title: cn('!text-base !font-medium', props.toastOptions?.classNames?.title),
+        description: cn('!text-base !font-normal', props.toastOptions?.classNames?.description),
+        cancelButton: cn('!m-0 !mt-6 !rounded-sm', props.toastOptions?.classNames?.cancelButton),
+        actionButton: cn(
+          '!m-0 !mt-6 !rounded-sm [button+&]:!ml-6',
+          props.toastOptions?.classNames?.actionButton
+        ),
+      },
+      style: {
+        '--normal-bg': 'var(--color-popover)',
+        '--normal-text': 'var(--color-popover-foreground)',
+        '--normal-border': 'var(--color-border)',
+        '--border-radius': 'var(--color-radius)',
+        ...props.toastOptions?.style,
+      } as React.CSSProperties,
+    },
+  }
+
+  return <Sonner className="toaster group" {...toastOprions} />
 }
 
 export { toast, Toaster }
diff --git a/packages/react/v2/components/primitives/toggle-group.tsx b/packages/react/v2/components/primitives/toggle-group.tsx
index 7b4c8950..d4f30696 100644
--- a/packages/react/v2/components/primitives/toggle-group.tsx
+++ b/packages/react/v2/components/primitives/toggle-group.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
 import { type VariantProps } from 'class-variance-authority'
 
-import { toggleVariants } from './toggel'
+import { toggleVariants } from './toggle'
 
 import { cn } from '../../../src/react/utils/cn'
 
diff --git a/packages/react/v2/components/primitives/toggel.tsx b/packages/react/v2/components/primitives/toggle.tsx
similarity index 100%
rename from packages/react/v2/components/primitives/toggel.tsx
rename to packages/react/v2/components/primitives/toggle.tsx