sparkdesign 0.0.1 → 0.1.10

package/registry/basic/switch.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const rootVariants = cva(
+  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full overflow-hidden border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-fill-secondary',
+  {
+    variants: {
+      size: { md: 'h-5 w-9', lg: 'h-6 w-11' },
+    },
+    defaultVariants: { size: 'md' },
+  }
+)
+
+const thumbVariants = cva(
+  'pointer-events-none block rounded-full bg-text-on-primary ring-0 transition-transform data-[state=unchecked]:translate-x-0',
+  {
+    variants: {
+      size: {
+        md: 'h-4 w-4 data-[state=checked]:translate-x-4',
+        lg: 'h-5 w-5 data-[state=checked]:translate-x-4.5',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+)
+
+export interface SwitchProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, 'onChange'>,
+    VariantProps<typeof rootVariants> {
+  size?: 'md' | 'lg'
+}
+
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ className, size = 'md', disabled = false, ...rest }, ref) => (
+    <SwitchPrimitives.Root
+      ref={ref}
+      className={cn(rootVariants({ size }), className)}
+      disabled={disabled}
+      {...rest}
+    >
+      <SwitchPrimitives.Thumb className={thumbVariants({ size })} />
+    </SwitchPrimitives.Root>
+  )
+)
+Switch.displayName = 'Switch'
+
+export { Switch }

package/registry/basic/table.tsx

@@ -0,0 +1,117 @@
+import { forwardRef } from 'react'
+import type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react'
+import { cn } from '@/lib/utils'
+
+const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto scrollbar-auto">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  )
+)
+Table.displayName = 'Table'
+
+const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn('[&_tr]:border-b border-border-tertiary', className)}
+    {...props}
+  />
+))
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+))
+TableBody.displayName = 'TableBody'
+
+const TableFooter = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'border-t border-border-tertiary bg-fill-tertiary font-medium [&>tr]:last:border-b-0',
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = 'TableFooter'
+
+const TableRow = forwardRef<
+  HTMLTableRowElement,
+  HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'border-b border-border-tertiary transition-colors hover:bg-fill-tertiary data-[state=selected]:bg-fill-tertiary',
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = 'TableRow'
+
+const TableHead = forwardRef<
+  HTMLTableCellElement,
+  ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-10 px-4 text-left align-middle font-medium text-text-secondary [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = 'TableHead'
+
+const TableCell = forwardRef<
+  HTMLTableCellElement,
+  TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', className)}
+    {...props}
+  />
+))
+TableCell.displayName = 'TableCell'
+
+const TableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn('mt-4 text-sm text-text-secondary', className)} {...props} />
+))
+TableCaption.displayName = 'TableCaption'
+
+export type TableProps = HTMLAttributes<HTMLTableElement>
+export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>
+export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>
+export type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>
+export type TableRowProps = HTMLAttributes<HTMLTableRowElement>
+export type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement>
+export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>
+export type TableCaptionProps = HTMLAttributes<HTMLTableCaptionElement>
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/registry/basic/tabs.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const Tabs = TabsPrimitive.Root
+
+const tabsListVariants = cva(
+  'inline-flex items-center justify-center text-text-secondary data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',
+  {
+    variants: {
+      variant: {
+        default: 'rounded-lg bg-fill-secondary p-0.5 gap-0.5',
+        line: 'gap-6 border-b border-border-tertiary bg-transparent p-0',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  }
+)
+
+const tabsTriggerVariants = cva(
+  'inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-text cursor-pointer data-[orientation=vertical]:justify-start data-[orientation=vertical]:rounded-md data-[orientation=vertical]:px-3 data-[orientation=vertical]:py-2',
+  {
+    variants: {
+      variant: {
+        default: 'rounded-md px-3 py-1.5 data-[state=active]:bg-bg-container data-[state=active]:shadow-sm',
+        line: 'rounded-none border-b-2 border-transparent px-1 pb-2 pt-0 data-[state=active]:border-primary data-[state=active]:shadow-none',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  }
+)
+
+export interface TabsListProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,
+    VariantProps<typeof tabsListVariants> {}
+
+export interface TabsTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,
+    VariantProps<typeof tabsTriggerVariants> {}
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, variant = 'default', ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(tabsListVariants({ variant }), className)}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(({ className, variant = 'default', ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(tabsTriggerVariants({ variant }), className)}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 outline-none ring-0 data-[state=inactive]:hidden',
+      'data-[orientation=vertical]:mt-0 data-[orientation=vertical]:ml-2',
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+export type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, tabsTriggerVariants }

package/registry/basic/tag.tsx

@@ -0,0 +1,161 @@
+import * as React from 'react'
+import { motion } from 'framer-motion'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { CloseLargeLine } from './icons-inline'
+
+const tagVariants = cva(
+  'inline-flex items-center justify-center gap-1.5 rounded-md border px-2.5 py-0.5 text-xs font-medium transition-colors whitespace-nowrap cursor-pointer group',
+  {
+    variants: {
+      appearance: { filled: '', outline: 'bg-transparent' },
+      color: {
+        primary: '',
+        success: '',
+        error: '',
+        warning: '',
+        info: '',
+        link: '',
+        pink: '',
+        purple: '',
+        yellow: '',
+        orange: '',
+        teal: '',
+        blue: '',
+        mauve: '',
+        slate: '',
+        lavender: '',
+        sage: '',
+      },
+    },
+    compoundVariants: [
+      { appearance: 'filled', color: 'primary', className: 'border-transparent bg-primary text-text-on-primary hover:bg-primary-hover' },
+      { appearance: 'filled', color: 'success', className: 'border-transparent bg-success-bg text-success border-success-border hover:bg-success-bg-hover' },
+      { appearance: 'filled', color: 'error', className: 'border-transparent bg-error-bg text-error border-error-border hover:bg-error-bg-hover' },
+      { appearance: 'filled', color: 'warning', className: 'border-transparent bg-warning-bg text-warning border-warning-border hover:bg-warning-bg-hover' },
+      { appearance: 'filled', color: 'info', className: 'border-transparent bg-info-bg text-info border-info-border hover:bg-info-bg-hover' },
+      { appearance: 'filled', color: 'link', className: 'border-transparent bg-transparent text-link underline-offset-4 hover:underline hover:text-link' },
+      { appearance: 'filled', color: 'pink', className: 'border-transparent bg-pink-bg text-pink hover:bg-pink-bg-hover' },
+      { appearance: 'filled', color: 'purple', className: 'border-transparent bg-purple-bg text-purple hover:bg-purple-bg-hover' },
+      { appearance: 'filled', color: 'yellow', className: 'border-transparent bg-yellow-bg text-yellow hover:bg-yellow-bg-hover' },
+      { appearance: 'filled', color: 'orange', className: 'border-transparent bg-orange-bg text-orange hover:bg-orange-bg-hover' },
+      { appearance: 'filled', color: 'teal', className: 'border-transparent bg-teal-bg text-teal hover:bg-teal-bg-hover' },
+      { appearance: 'filled', color: 'blue', className: 'border-transparent bg-blue-bg text-blue hover:bg-blue-bg-hover' },
+      { appearance: 'filled', color: 'mauve', className: 'border-transparent bg-mauve-bg text-mauve hover:bg-mauve-bg-hover' },
+      { appearance: 'filled', color: 'slate', className: 'border-transparent bg-slate-bg text-slate hover:bg-slate-bg-hover' },
+      { appearance: 'filled', color: 'lavender', className: 'border-transparent bg-lavender-bg text-lavender hover:bg-lavender-bg-hover' },
+      { appearance: 'filled', color: 'sage', className: 'border-transparent bg-sage-bg text-sage hover:bg-sage-bg-hover' },
+      { appearance: 'outline', color: 'primary', className: 'border-primary-border text-primary hover:bg-primary-bg' },
+      { appearance: 'outline', color: 'success', className: 'border-success-border text-success hover:bg-success-bg' },
+      { appearance: 'outline', color: 'error', className: 'border-error-border text-error hover:bg-error-bg' },
+      { appearance: 'outline', color: 'warning', className: 'border-warning-border text-warning hover:bg-warning-bg' },
+      { appearance: 'outline', color: 'info', className: 'border-info-border text-info hover:bg-info-bg' },
+      { appearance: 'outline', color: 'link', className: 'border-transparent text-link underline-offset-4 hover:underline hover:text-link' },
+      { appearance: 'outline', color: 'pink', className: 'border-pink text-pink hover:bg-pink-bg' },
+      { appearance: 'outline', color: 'purple', className: 'border-purple text-purple hover:bg-purple-bg' },
+      { appearance: 'outline', color: 'yellow', className: 'border-yellow text-yellow hover:bg-yellow-bg' },
+      { appearance: 'outline', color: 'orange', className: 'border-orange text-orange hover:bg-orange-bg' },
+      { appearance: 'outline', color: 'teal', className: 'border-teal text-teal hover:bg-teal-bg' },
+      { appearance: 'outline', color: 'blue', className: 'border-blue text-blue hover:bg-blue-bg' },
+      { appearance: 'outline', color: 'mauve', className: 'border-mauve text-mauve hover:bg-mauve-bg' },
+      { appearance: 'outline', color: 'slate', className: 'border-slate text-slate hover:bg-slate-bg' },
+      { appearance: 'outline', color: 'lavender', className: 'border-lavender text-lavender hover:bg-lavender-bg' },
+      { appearance: 'outline', color: 'sage', className: 'border-sage text-sage hover:bg-sage-bg' },
+    ],
+    defaultVariants: { appearance: 'filled', color: 'primary' },
+  }
+)
+
+export interface TagProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,
+    VariantProps<typeof tagVariants> {
+  closable?: boolean
+  onClose?: (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void
+  closeAriaLabel?: string
+  closeIcon?: React.ReactNode
+}
+
+const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+  (
+    {
+      className,
+      appearance = 'filled',
+      color = 'primary',
+      closable = false,
+      onClose,
+      closeAriaLabel = 'Close tag',
+      closeIcon,
+      children,
+      onMouseEnter: onMouseEnterProp,
+      onMouseLeave: onMouseLeaveProp,
+      ...props
+    },
+    ref
+  ) => {
+    const [isHovered, setIsHovered] = React.useState(false)
+    const showClose = closable && typeof onClose === 'function'
+
+    const handleMouseEnter = (e: React.MouseEvent<HTMLSpanElement>) => {
+      if (showClose) setIsHovered(true)
+      onMouseEnterProp?.(e)
+    }
+    const handleMouseLeave = (e: React.MouseEvent<HTMLSpanElement>) => {
+      if (showClose) setIsHovered(false)
+      onMouseLeaveProp?.(e)
+    }
+    const handleCloseClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+      onClose?.(e)
+    }
+    const handleCloseKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (e.key !== 'Enter' && e.key !== ' ') return
+      e.preventDefault()
+      e.stopPropagation()
+      onClose?.(e)
+    }
+
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          tagVariants({ appearance, color }),
+          showClose && 'gap-0 pr-1.5',
+          className
+        )}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        {children}
+        {showClose && (
+          <motion.div
+            aria-hidden
+            initial={false}
+            animate={{
+              width: isHovered ? 16 : 0,
+              marginLeft: isHovered ? 2 : 0,
+              opacity: isHovered ? 1 : 0,
+            }}
+            transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+            className="flex min-w-0 shrink-0 overflow-hidden"
+            style={{ pointerEvents: isHovered ? 'auto' : 'none' }}
+          >
+            <button
+              type="button"
+              aria-label={closeAriaLabel}
+              className="inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-current/80 hover:text-current focus:outline-none"
+              onClick={handleCloseClick}
+              onKeyDown={handleCloseKeyDown}
+            >
+              {closeIcon ?? <CloseLargeLine className="h-3 w-3" />}
+            </button>
+          </motion.div>
+        )}
+      </span>
+    )
+  }
+)
+Tag.displayName = 'Tag'
+
+export { Tag, tagVariants }

package/registry/basic/theme-from-document.ts

@@ -0,0 +1,10 @@
+export function getThemeFromDocument(): Record<string, string> {
+  if (typeof document === 'undefined') return {}
+  const el = document.documentElement
+  const out: Record<string, string> = {}
+  const theme = el.getAttribute('data-theme')
+  const style = el.getAttribute('data-style')
+  if (theme) out['data-theme'] = theme
+  if (style) out['data-style'] = style
+  return out
+}

package/registry/basic/toggle.tsx

@@ -0,0 +1,223 @@
+import { createContext, forwardRef, useContext } from 'react'
+import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center gap-1.5 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[state=on]:bg-fill data-[state=on]:text-text',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-transparent text-text-secondary hover:bg-fill-secondary hover:text-text data-[state=on]:bg-fill data-[state=on]:text-text',
+        outline:
+          'border border-border-tertiary bg-transparent text-text-secondary hover:bg-fill-secondary hover:text-text data-[state=on]:border-border-secondary data-[state=on]:bg-fill data-[state=on]:text-text',
+      },
+      size: {
+        sm: 'h-7 px-2 text-xs',
+        md: 'h-9 px-3 text-sm',
+        lg: 'h-11 px-4 text-base',
+      },
+      rounded: {
+        square: 'rounded',
+        pill: 'rounded-full',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'md', rounded: 'square' },
+  }
+)
+
+export interface ToggleProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, 'asChild'>,
+    VariantProps<typeof toggleVariants> {
+  children?: ReactNode
+  prefixIcon?: ReactNode
+  suffixIcon?: ReactNode
+}
+
+export const Toggle = forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  ToggleProps
+>(
+  (
+    {
+      variant = 'default',
+      size = 'md',
+      rounded = 'square',
+      className,
+      prefixIcon,
+      suffixIcon,
+      children,
+      ...props
+    },
+    ref
+  ) => (
+    <TogglePrimitive.Root
+      ref={ref}
+      className={toggleVariants({ variant, size, rounded, className })}
+      {...props}
+    >
+      {prefixIcon && (
+        <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
+          {prefixIcon}
+        </span>
+      )}
+      {children}
+      {suffixIcon && (
+        <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
+          {suffixIcon}
+        </span>
+      )}
+    </TogglePrimitive.Root>
+  )
+)
+Toggle.displayName = 'Toggle'
+
+type ToggleGroupContextValue = VariantProps<typeof toggleVariants> & {
+  spacing?: 'none' | 'sm' | 'md'
+}
+
+const ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null)
+const spacingClasses = { none: 'gap-0', sm: 'gap-1', md: 'gap-2' } as const
+
+const toggleGroupItemGroupClasses = [
+  'shrink-0',
+  'group-data-[spacing=0]/toggle-group:rounded-none',
+  'group-data-[spacing=0]/toggle-group:group-data-[orientation=horizontal]/toggle-group:first:rounded-l',
+  'group-data-[spacing=0]/toggle-group:group-data-[orientation=horizontal]/toggle-group:last:rounded-r',
+  'group-data-[spacing=0]/toggle-group:group-data-[orientation=vertical]/toggle-group:first:rounded-t',
+  'group-data-[spacing=0]/toggle-group:group-data-[orientation=vertical]/toggle-group:last:rounded-b',
+  'group-data-[spacing=0]/toggle-group:data-[variant=outline]:group-data-[orientation=horizontal]/toggle-group:[&:not(:first-child)]:border-l-0',
+  'group-data-[spacing=0]/toggle-group:data-[variant=outline]:group-data-[orientation=vertical]/toggle-group:[&:not(:first-child)]:border-t-0',
+].join(' ')
+
+type ToggleGroupRootProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>
+
+export type ToggleGroupProps = ToggleGroupRootProps &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: 'none' | 'sm' | 'md'
+    children?: ReactNode
+  }
+
+const ToggleGroup = forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  ToggleGroupProps
+>(
+  (
+    {
+      type = 'single',
+      variant = 'default',
+      size = 'md',
+      rounded = 'square',
+      spacing = 'none',
+      className,
+      orientation = 'horizontal',
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const rootClassName = cn(
+      'group/toggle-group inline-flex w-fit',
+      orientation === 'horizontal' ? 'flex-row' : 'flex-col',
+      orientation === 'vertical' && 'items-stretch',
+      spacingClasses[spacing],
+      className
+    )
+    const commonProps = {
+      ref,
+      orientation,
+      'data-spacing': spacing === 'none' ? '0' : spacing,
+      'data-orientation': orientation,
+      'data-variant': variant,
+      'data-size': size,
+      className: rootClassName,
+    } as const
+    return (
+      <ToggleGroupContext.Provider value={{ variant, size, rounded, spacing }}>
+        {type === 'multiple' ? (
+          <ToggleGroupPrimitive.Root
+            {...commonProps}
+            {...(props as ToggleGroupPrimitive.ToggleGroupMultipleProps)}
+            type="multiple"
+          >
+            {children}
+          </ToggleGroupPrimitive.Root>
+        ) : (
+          <ToggleGroupPrimitive.Root
+            {...commonProps}
+            {...(props as ToggleGroupPrimitive.ToggleGroupSingleProps)}
+            type="single"
+          >
+            {children}
+          </ToggleGroupPrimitive.Root>
+        )}
+      </ToggleGroupContext.Provider>
+    )
+  }
+)
+ToggleGroup.displayName = 'ToggleGroup'
+
+export interface ToggleGroupItemProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>, 'asChild'>,
+    VariantProps<typeof toggleVariants> {
+  value: string
+  children?: ReactNode
+  prefixIcon?: ReactNode
+  suffixIcon?: ReactNode
+}
+
+const ToggleGroupItem = forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  ToggleGroupItemProps
+>(
+  (
+    {
+      variant: variantProp,
+      size: sizeProp,
+      rounded: roundedProp,
+      className,
+      prefixIcon,
+      suffixIcon,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const ctx = useContext(ToggleGroupContext)
+    const variant = variantProp ?? ctx?.variant ?? 'default'
+    const size = sizeProp ?? ctx?.size ?? 'md'
+    const rounded = roundedProp ?? ctx?.rounded ?? 'square'
+    return (
+      <ToggleGroupPrimitive.Item
+        ref={ref}
+        data-variant={variant}
+        data-size={size}
+        className={cn(
+          toggleVariants({ variant, size, rounded }),
+          ctx && toggleGroupItemGroupClasses,
+          'focus-visible:z-10',
+          className
+        )}
+        {...props}
+      >
+        {prefixIcon && (
+          <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
+            {prefixIcon}
+          </span>
+        )}
+        {children}
+        {suffixIcon && (
+          <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
+            {suffixIcon}
+          </span>
+        )}
+      </ToggleGroupPrimitive.Item>
+    )
+  }
+)
+ToggleGroupItem.displayName = 'ToggleGroupItem'
+
+export { ToggleGroup, ToggleGroupItem, toggleVariants }