@gentleduck/registry-ui 0.2.1

package/src/skeleton/skeleton.tsx

@@ -0,0 +1,22 @@
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import * as React from 'react'
+
+const Skeleton = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, dir, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
+    return (
+      <div
+        ref={ref}
+        aria-hidden="true"
+        className={cn('animate-pulse rounded-md bg-muted motion-reduce:animate-none', className)}
+        dir={direction}
+        {...props}
+        data-slot="skeleton"
+      />
+    )
+  },
+)
+Skeleton.displayName = 'Skeleton'
+
+export { Skeleton }

package/src/slider/index.ts

@@ -0,0 +1 @@
+export * from './slider'

package/src/slider/slider.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import * as SliderPrimitive from '@gentleduck/primitives/slider'
+import * as React from 'react'
+
+function Slider({
+  className,
+  defaultValue,
+  orientation = 'horizontal',
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
+    [value, defaultValue, min, max],
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      data-orientation={orientation}
+      defaultValue={defaultValue}
+      orientation={orientation}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center data-[orientation='vertical']:h-full data-[orientation='vertical']:min-h-40 data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col data-disabled:opacity-50",
+        className,
+      )}
+      {...props}>
+      <SliderPrimitive.Track
+        data-orientation={orientation}
+        data-slot="slider-track"
+        className="relative grow overflow-hidden rounded-full bg-muted data-[orientation='horizontal']:h-1 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-1">
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          data-orientation={orientation}
+          className="absolute select-none bg-primary data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-orientation={orientation}
+          data-slot="slider-thumb"
+          key={index}
+          className="relative block size-4 shrink-0 select-none rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:outline-hidden focus-visible:ring-3 active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

package/src/sonner/index.ts

@@ -0,0 +1,4 @@
+export * from './sonner'
+export * from './sonner.chunks'
+export * from './sonner.libs'
+export * from './sonner.types'

package/src/sonner/sonner.chunks.tsx

@@ -0,0 +1,80 @@
+import { cn } from '@gentleduck/libs/cn'
+import { CircleCheck, Loader } from 'lucide-react'
+import type React from 'react'
+import { toast } from 'sonner'
+import { Button } from '../button'
+import { Progress } from '../progress'
+import { formatTime } from './sonner.libs'
+import type { UploadSonnerProps } from './sonner.types'
+
+const SonnerUpload = ({
+  progress,
+  attachments,
+  remainingTime,
+  onCancel,
+  onComplete,
+}: UploadSonnerProps): React.JSX.Element => {
+  return (
+    <div className="flex w-full gap-3" data-slot="content">
+      <CircleCheck
+        aria-hidden="true"
+        className={cn(
+          '!size-[18px] mt-2 hidden fill-primary [&_path]:stroke-primary-foreground',
+          progress >= 100 && 'flex',
+        )}
+      />
+      <Loader
+        aria-hidden="true"
+        className={cn(
+          '!size-[18px] mt-2 hidden animate-spin text-foreground-muted opacity-70',
+          progress < 100 && 'flex',
+        )}
+      />
+      <div className="flex w-full flex-col gap-2">
+        <div className="flex w-full justify-between" role="status">
+          <p className="text-foreground text-sm">
+            {progress >= 100
+              ? `Upload complete`
+              : attachments
+                ? `Uploading ${attachments} file${attachments > 1 ? 's' : ''}...`
+                : `Uploading...`}
+          </p>
+          <div className="flex items-center gap-2">
+            {progress <= 100 && (
+              <p className="font-mono text-foreground-light text-sm">{`${remainingTime && !Number.isNaN(remainingTime) && Number.isFinite(remainingTime) && remainingTime !== 0 ? `${formatTime(remainingTime)} remaining -` : ''}`}</p>
+            )}
+            <p className="font-mono text-foreground-light text-sm">{`${progress}%`}</p>
+          </div>
+        </div>
+        <Progress className="h-1 w-full" value={progress} />
+        <div className="flex w-full items-center justify-between gap-2">
+          <small className="w-full text-foreground-muted text-xs">
+            {progress < 100 ? 'Please do not close the browser until completed' : 'Upload complete'}
+          </small>
+
+          {progress === 100 && (
+            <Button
+              border="default"
+              onClick={(_) => onComplete?.(_, (id: string) => toast.dismiss(id))}
+              size="sm"
+              variant="default">
+              Complete
+            </Button>
+          )}
+
+          {progress < 100 && (
+            <Button
+              border="default"
+              onClick={(_) => onCancel?.(_, (id: string) => toast.dismiss(id))}
+              size="sm"
+              variant="default">
+              Cancel
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { SonnerUpload }

package/src/sonner/sonner.libs.ts

@@ -0,0 +1,13 @@
+export function formatTime(seconds: number) {
+  const days = Math.floor(seconds / (24 * 3600))
+  seconds %= 24 * 3600
+  const hours = Math.floor(seconds / 3600)
+  seconds %= 3600
+  const minutes = Math.floor(seconds / 60)
+  seconds = Math.floor(seconds % 60)
+
+  if (days > 0) return `${days}d `
+  if (hours > 0) return `${hours}h `
+  if (minutes > 0) return `${minutes}m `
+  return `${seconds}s`
+}

package/src/sonner/sonner.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import { useTheme } from 'next-themes'
+import type * as React from 'react'
+import { Toaster as Sonner, type ToasterProps } from 'sonner'
+
+const Toaster = ({ dir, className, ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+  const direction = useDirection(dir as Direction)
+
+  return (
+    <Sonner
+      className={cn('toaster group [&_li>div]:w-full', className)}
+      dir={direction}
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-border': 'var(--border)',
+          '--normal-text': 'var(--popover-foreground)',
+        } as React.CSSProperties
+      }
+      theme={theme as ToasterProps['theme']}
+      {...props}
+    />
+  )
+}
+Toaster.displayName = 'Toaster'
+
+export { Toaster }

package/src/sonner/sonner.types.ts

@@ -0,0 +1,9 @@
+import type { Toaster as Sonner } from 'sonner'
+export type ToasterProps = React.ComponentProps<typeof Sonner>
+export type UploadSonnerProps = {
+  progress: number
+  attachments: number
+  remainingTime?: number
+  onCancel?: (_e: React.MouseEvent<HTMLButtonElement>, onCancel: (_id: string) => void) => void
+  onComplete?: (_e: React.MouseEvent<HTMLButtonElement>, onComplete: (_id: string) => void) => void
+}

package/src/switch/index.ts

@@ -0,0 +1 @@
+export * from './switch'

package/src/switch/switch.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { checkersStylePattern } from '@gentleduck/motion/anim'
+import { useSvgIndicator } from '@gentleduck/primitives/checkers'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import * as React from 'react'
+
+const Switch = React.forwardRef<
+  HTMLInputElement,
+  Omit<React.HTMLProps<HTMLInputElement>, 'ref'> & {
+    indicator?: React.ReactElement
+    checkedIndicator?: React.ReactElement
+    onCheckedChange?: (checked: boolean) => void
+  }
+>(({ className, indicator, checkedIndicator, onChange, onCheckedChange, dir, style, ...props }, ref) => {
+  const direction = useDirection(dir as Direction)
+  const { indicatorReady, checkedIndicatorReady, inputStyle, SvgIndicator } = useSvgIndicator({
+    checkedIndicator,
+    indicator,
+  })
+
+  return (
+    <>
+      <input
+        className={cn(
+          checkersStylePattern({
+            indicatorState:
+              indicatorReady && checkedIndicatorReady
+                ? 'both'
+                : indicatorReady
+                  ? 'indicatorReady'
+                  : checkedIndicatorReady
+                    ? 'checkedIndicatorReady'
+                    : 'default',
+            type: 'switch',
+          }),
+          'transition-all transition-discrete duration-[200ms,150ms] ease-(--duck-motion-ease)',
+          '[&:before,&:after]:transition-gpu [&:before,&:after]:duration-[inherit] [&:before,&:after]:ease-[inherit] [&:before,&:after]:will-change-[inherit]',
+          '[&[dir=ltr]:checked]:after:translate-x-full [&[dir=ltr]]:after:translate-x-0',
+          '[&[dir=rtl]:checked]:after:-translate-x-full [&[dir=rtl]]:after:translate-x-0',
+
+          className,
+        )}
+        onChange={(e) => {
+          onChange?.(e)
+          onCheckedChange?.(e.target.checked)
+        }}
+        ref={ref}
+        role="switch"
+        dir={direction}
+        style={{ ...style, ...inputStyle }}
+        type="checkbox"
+        {...props}
+        data-slot="switch"
+      />
+      <SvgIndicator className="sr-only" />
+    </>
+  )
+})
+Switch.displayName = 'Switch'
+
+export { Switch }

package/src/table/index.ts

@@ -0,0 +1 @@
+export * from './table'

package/src/table/table.tsx

@@ -0,0 +1,95 @@
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import * as React from 'react'
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, dir, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
+    return (
+      <div className="relative w-full overflow-auto" dir={direction}>
+        <table className={cn('w-full caption-bottom text-sm', className)} data-slot="table" ref={ref} {...props} />
+      </div>
+    )
+  },
+)
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead className={cn('[&_tr]:border-b', className)} data-slot="table-header" ref={ref} {...props} />
+  ),
+)
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody className={cn('[&_tr:last-child]:border-0', className)} data-slot="table-body" ref={ref} {...props} />
+  ),
+)
+TableBody.displayName = 'TableBody'
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot
+      className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+      data-slot="table-footer"
+      ref={ref}
+      {...props}
+    />
+  ),
+)
+TableFooter.displayName = 'TableFooter'
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+      data-slot="table-row"
+      ref={ref}
+      {...props}
+    />
+  ),
+)
+TableRow.displayName = 'TableRow'
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, scope = 'col', ...props }, ref) => (
+    <th
+      className={cn(
+        'px-4 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0',
+        className,
+      )}
+      data-slot="table-head"
+      ref={ref}
+      scope={scope}
+      {...props}
+    />
+  ),
+)
+TableHead.displayName = 'TableHead'
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      className={cn('p-4 align-middle [&:has([role=checkbox])]:pe-0', className)}
+      data-slot="table-cell"
+      ref={ref}
+      {...props}
+    />
+  ),
+)
+TableCell.displayName = 'TableCell'
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption
+      className={cn('mt-4 text-sm text-muted-foreground', className)}
+      data-slot="table-caption"
+      ref={ref}
+      {...props}
+    />
+  ),
+)
+TableCaption.displayName = 'TableCaption'
+
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption }

package/src/tabs/index.ts

@@ -0,0 +1 @@
+export * from './tabs'

package/src/tabs/tabs.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import { MountMinimal } from '@gentleduck/primitives/mount'
+import * as React from 'react'
+
+export function useTabs() {
+  const context = React.useContext(TabsContext)
+  if (context === null) {
+    throw new Error('useTabs must be used within a TabsList')
+  }
+  return context
+}
+
+export interface TabsContextProps {
+  activeItem: string
+  setActiveItem: React.Dispatch<React.SetStateAction<string>>
+  tabsId: string
+}
+
+const TabsContext = React.createContext<TabsContextProps | null>(null)
+
+export interface TabsProps extends Omit<React.HTMLProps<HTMLDivElement>, 'defaultValue' | 'ref'> {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+}
+
+const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
+  ({ value, defaultValue, onValueChange, dir, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
+    const [activeItem, setActiveItem] = React.useState<string>(defaultValue ?? value ?? '')
+    const tabsId = React.useId()
+
+    React.useEffect(() => {
+      if (onValueChange) onValueChange(activeItem)
+    }, [activeItem])
+
+    return (
+      <TabsContext.Provider value={{ activeItem, setActiveItem, tabsId }}>
+        <div {...props} data-slot="tabs" dir={direction} ref={ref} />
+      </TabsContext.Provider>
+    )
+  },
+)
+Tabs.displayName = 'Tabs'
+
+export interface TabsListProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'role'> {}
+
+const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(({ className, ...props }, ref) => (
+  <div
+    className={cn(
+      'inline-flex w-fit items-center justify-center gap-2 rounded-md bg-muted p-1 text-muted-foreground',
+      className,
+    )}
+    ref={ref}
+    role="tablist"
+    {...props}
+    data-slot="tabs-list"
+  />
+))
+TabsList.displayName = 'TabsList'
+
+export interface TabsTriggerProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'value'> {
+  value: string
+  defaultChecked?: boolean
+}
+
+const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({ className, children, defaultChecked, onClick, value, disabled, ...props }, ref) => {
+    const { setActiveItem, activeItem, tabsId } = useTabs()
+    const isActive = value === activeItem
+
+    React.useEffect(() => {
+      if (defaultChecked) setActiveItem(value)
+    }, [defaultChecked])
+
+    return (
+      <button
+        aria-controls={`${tabsId}-content-${value}`}
+        aria-selected={isActive}
+        className={cn(
+          'relative inline-flex h-[29.04px] items-center justify-center gap-2 whitespace-nowrap rounded-sm px-3 font-medium text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          isActive && 'bg-background text-foreground shadow-sm',
+          disabled && 'pointer-events-none opacity-50',
+          className,
+        )}
+        data-value={value}
+        disabled={disabled}
+        id={`${tabsId}-trigger-${value}`}
+        onClick={(e) => {
+          setActiveItem(value)
+          onClick?.(e as React.MouseEvent<HTMLButtonElement>)
+        }}
+        ref={ref}
+        role="tab"
+        tabIndex={isActive ? 0 : -1}
+        {...props}
+        type="button"
+        data-slot="tabs-trigger">
+        {children}
+      </button>
+    )
+  },
+)
+TabsTrigger.displayName = 'TabsTrigger'
+
+const TabsContent = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.HTMLProps<HTMLDivElement>, 'ref'> & {
+    value: string
+    forceMount?: boolean
+  }
+>(({ children, forceMount = false, className, value, ...props }, ref) => {
+  const { activeItem, tabsId } = useTabs()
+  const localRef = React.useRef<HTMLDivElement>(null)
+
+  return (
+    <div
+      aria-hidden={activeItem !== value}
+      aria-labelledby={`${tabsId}-trigger-${value}`}
+      className={cn(
+        'mt-2 shrink-0 list-none ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        activeItem === value ? 'h-auto opacity-100' : 'h-0 opacity-0',
+        className,
+      )}
+      data-value={value}
+      hidden={activeItem !== value}
+      id={`${tabsId}-content-${value}`}
+      ref={(node) => {
+        ;(localRef as React.RefObject<HTMLDivElement | null>).current = node
+        if (typeof ref === 'function') {
+          ref(node)
+        } else if (ref) {
+          ref.current = node
+        }
+      }}
+      role="tabpanel"
+      tabIndex={-1}
+      {...props}
+      data-slot="tabs-content">
+      <MountMinimal forceMount={forceMount} open={activeItem === value} ref={null}>
+        {children}
+      </MountMinimal>
+    </div>
+  )
+})
+TabsContent.displayName = 'TabsContent'
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/textarea/index.ts

@@ -0,0 +1 @@
+export * from './textarea'

package/src/textarea/textarea.tsx

@@ -0,0 +1,24 @@
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import * as React from 'react'
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  ({ className, dir, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
+    return (
+      <textarea
+        className={cn(
+          'field-sizing-content flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:disabled:bg-input/80',
+          className,
+        )}
+        data-slot="textarea"
+        dir={direction}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }

package/src/toggle/index.ts

@@ -0,0 +1,2 @@
+export * from './toggle'
+export * from './toggle.constants'

package/src/toggle/toggle.constants.ts

@@ -0,0 +1,22 @@
+import { cva } from '@gentleduck/variants'
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center gap-2 rounded-md font-medium text-sm ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-disabled:pointer-events-none data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        lg: 'h-10 min-w-11 px-5 px-6 has-[>svg]:px-4',
+        sm: 'h-8 min-w-9 gap-1.5 px-2.5 px-3 has-[>svg]:px-2.5',
+      },
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+    },
+  },
+)

package/src/toggle/toggle.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import * as TogglePrimitive from '@gentleduck/primitives/toggle'
+import type { VariantProps } from '@gentleduck/variants'
+import * as React from 'react'
+import { toggleVariants } from './toggle.constants'
+
+const Toggle = React.forwardRef<
+  React.ComponentRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant = 'default', size = 'default', ...props }, ref) => {
+  return (
+    <TogglePrimitive.Root
+      className={cn(toggleVariants({ className, size, variant }))}
+      data-slot="toggle"
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Toggle.displayName = 'Toggle'
+
+export { Toggle }

package/src/toggle-group/index.ts

@@ -0,0 +1 @@
+export * from './toggle-group'