@gentleduck/registry-ui 0.2.1

package/src/button/button.constants.ts

@@ -0,0 +1,44 @@
+import { cva } from '@gentleduck/variants'
+
+export const buttonVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+
+  {
+    defaultVariants: {
+      border: 'default',
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      border: {
+        default: '',
+        destructive: 'border border-destructive/40 bg-destructive/40 hover:border-destructive hover:bg-destructive/65',
+        primary: 'border border-border/40 hover:border-border/80',
+        secondary: 'border border-secondary/40 bg-secondary/40 hover:border-secondary hover:bg-secondary/65',
+        warning: 'border border-warning/40 bg-warning/40 hover:border-warning hover:bg-warning/65',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        icon: 'size-9',
+        'icon-lg': 'size-10',
+        'icon-sm': 'size-8',
+        lg: 'h-10 px-6 has-[>svg]:px-4',
+        sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',
+      },
+      variant: {
+        dashed:
+          'border border-input border-dashed bg-background text-accent-foreground shadow-xs hover:bg-accent/50 hover:text-accent-foreground',
+        default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
+        destructive: 'bg-destructive/90 text-destructive-foreground shadow-xs hover:bg-destructive/70',
+        expand_icon: 'group relative bg-primary text-primary-foreground hover:bg-primary/90',
+        ghost: 'text-accent-foreground hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        nothing: '',
+        outline:
+          'border border-input bg-background text-accent-foreground shadow-xs hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        warning: 'bg-warning/90 text-warning-foreground shadow-xs hover:bg-warning/70',
+      },
+    },
+  },
+)

package/src/button/button.tsx

@@ -0,0 +1,79 @@
+import { cn } from '@gentleduck/libs/cn'
+import { Slot, Slottable } from '@gentleduck/primitives/slot'
+import { Loader } from 'lucide-react'
+import * as React from 'react'
+import { buttonVariants } from './button.constants'
+import type { AnimationIconProps, ButtonProps } from './button.types'
+
+/**
+ * Renders a customizable button component, supporting various styles and behaviors.
+ */
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      variant = 'default',
+      size = 'default',
+      border = 'default',
+      asChild,
+      className,
+      loading,
+      isCollapsed,
+      icon,
+      secondIcon,
+      type = 'button',
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const Component = (asChild ? Slot : 'button') as React.ElementType
+
+    return (
+      <Component
+        data-slot="button"
+        {...props}
+        aria-busy={loading ? true : undefined}
+        className={cn(
+          buttonVariants({
+            border,
+            className,
+            size: isCollapsed ? 'icon' : size,
+            variant,
+          }),
+        )}
+        disabled={loading ?? disabled}
+        ref={ref}
+        type={type}>
+        {loading ? <Loader aria-hidden="true" className="animate-spin" /> : icon}
+        <Slottable>{!isCollapsed && children}</Slottable>
+        {!isCollapsed && secondIcon && secondIcon}
+      </Component>
+    )
+  },
+)
+Button.displayName = 'Button'
+
+/**
+ * Renders an animation icon component.
+ */
+function AnimationIcon({ children, animationIcon }: AnimationIconProps): React.JSX.Element {
+  return (
+    <>
+      {animationIcon?.icon && animationIcon.iconPlacement === 'left' && (
+        <div className="w-0 pe-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:pe-2 group-hover:opacity-100 ltr:translate-x-[-1.3em] ltr:group-hover:-translate-x-1 rtl:translate-x-[1.3em] rtl:group-hover:translate-x-1">
+          {animationIcon?.icon}
+        </div>
+      )}
+      {children}
+      {animationIcon?.icon && animationIcon.iconPlacement === 'right' && (
+        <div className="w-0 ps-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-0 group-hover:ps-2 group-hover:opacity-100 ltr:translate-x-[1.3em] rtl:translate-x-[-1.3em]">
+          {animationIcon?.icon}
+        </div>
+      )}
+    </>
+  )
+}
+AnimationIcon.displayName = 'AnimationIcon'
+
+export { Button, AnimationIcon }

package/src/button/button.types.ts

@@ -0,0 +1,38 @@
+import type { VariantProps } from '@gentleduck/variants'
+import type { buttonVariants } from './button.constants'
+
+/**
+ * Props for the Button component, combining native button attributes, variant styles, and custom options.
+ */
+export interface ButtonProps
+  extends Omit<React.HTMLProps<HTMLButtonElement>, 'size'>,
+    VariantProps<typeof buttonVariants> {
+  /** Render as child component using Slot (e.g., for custom wrappers) */
+  asChild?: boolean
+  /** Controls collapsed state for buttons like sidebar toggles */
+  isCollapsed?: boolean
+  /** Shows loading state/spinner in the button */
+  loading?: boolean
+  /** Primary icon to display in the button */
+  icon?: React.ReactNode
+  /** Secondary icon (e.g., for split actions or toggles) */
+  secondIcon?: React.ReactNode
+}
+
+/**
+ * Props for components that support optional animated icons.
+ */
+export type AnimationIconProps = {
+  /** The content inside the icon wrapper */
+  children: React.ReactNode
+  /**
+   * Optional animated icon configuration.
+   * Modify the variant to use animation styles.
+   */
+  animationIcon?: {
+    /** Icon to animate (if applicable) */
+    icon?: React.ReactNode
+    /** Determines icon position relative to the children */
+    iconPlacement?: 'left' | 'right'
+  }
+}

package/src/button/index.ts

@@ -0,0 +1,3 @@
+export * from './button'
+export * from './button.constants'
+export * from './button.types'

package/src/button-group/button-group.constants.ts

@@ -0,0 +1,26 @@
+import { cva } from '@gentleduck/variants'
+
+export const buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:relative [&>*]:hover:z-[1] [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+    variants: {
+      orientation: {
+        horizontal: `
+[&>*:not(:first-child)]:rounded-s-none
+[&>*:not(:last-child)]:rounded-e-none
+[&>*:nth-last-child(2):has(+span[aria-hidden])]:!rounded-e-md
+[&>*:not(:first-child)]:-ms-px
+`,
+        vertical: `
+flex-col
+[&>*:not(:first-child)]:rounded-t-none
+[&>*:not(:last-child)]:rounded-b-none
+[&>*:not(:first-child)]:-mt-px
+`,
+      },
+    },
+  },
+)

package/src/button-group/button-group.tsx

@@ -0,0 +1,65 @@
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import { Slot } from '@gentleduck/primitives/slot'
+import type { VariantProps } from '@gentleduck/variants'
+import * as React from 'react'
+import { Separator } from '../separator'
+import { buttonGroupVariants } from './button-group.constants'
+
+const ButtonGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof buttonGroupVariants>
+>(({ className, orientation = 'horizontal', dir, ...props }, ref) => {
+  const direction = useDirection(dir as Direction)
+  return (
+    <div
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      data-orientation={orientation}
+      data-slot="button-group"
+      dir={direction}
+      ref={ref}
+      role="group"
+      {...props}
+    />
+  )
+})
+ButtonGroup.displayName = 'ButtonGroup'
+
+const ButtonGroupText = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'> & {
+    asChild?: boolean
+  }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      className={cn(
+        "flex items-center gap-2 rounded-md border bg-muted px-4 font-medium text-sm shadow-xs [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+ButtonGroupText.displayName = 'ButtonGroupText'
+
+const ButtonGroupSeparator = React.forwardRef<
+  React.ComponentRef<typeof Separator>,
+  React.ComponentPropsWithoutRef<typeof Separator>
+>(({ className, orientation = 'vertical', ...props }, ref) => {
+  return (
+    <Separator
+      className={cn('!m-0 relative self-stretch bg-input data-[orientation=vertical]:h-auto', className)}
+      data-slot="button-group-separator"
+      orientation={orientation}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+ButtonGroupSeparator.displayName = 'ButtonGroupSeparator'
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText }

package/src/button-group/index.ts

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

package/src/calendar/calendar.tsx

@@ -0,0 +1,191 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
+import * as React from 'react'
+import { type DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
+import { Button, buttonVariants } from '../button'
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  formatters,
+  components,
+  dir,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>['variant']
+}) {
+  const direction = useDirection(dir as Direction)
+  const defaultClassNames = getDefaultClassNames()
+  const localeTag = React.useMemo(() => {
+    const code = props.locale?.code
+    if (!code) return undefined
+    return code.startsWith('ar') ? `${code}-u-nu-arab` : code
+  }, [props.locale])
+
+  const monthFormatter = React.useMemo(() => {
+    return new Intl.DateTimeFormat(localeTag, { month: 'short' })
+  }, [localeTag])
+
+  const captionFormatter = React.useMemo(() => {
+    return new Intl.DateTimeFormat(localeTag, { month: 'long', year: 'numeric' })
+  }, [localeTag])
+
+  const numberFormatter = React.useMemo(() => {
+    return new Intl.NumberFormat(localeTag)
+  }, [localeTag])
+
+  const formatLocalizedNumber = React.useCallback(
+    (value: number) => {
+      return numberFormatter.format(value)
+    },
+    [numberFormatter],
+  )
+
+  return (
+    <DayPicker
+      dir={direction}
+      captionLayout={captionLayout}
+      className={cn(
+        'group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent p-3 [--cell-size:--spacing(8)]',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      classNames={{
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) select-none p-0 aria-disabled:opacity-50',
+          defaultClassNames.button_next,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) select-none p-0 aria-disabled:opacity-50',
+          defaultClassNames.button_previous,
+        ),
+        caption_label: cn(
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
+          defaultClassNames.caption_label,
+        ),
+        day: cn(
+          'group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-s-md [&:last-child[data-selected=true]_button]:rounded-e-md',
+          defaultClassNames.day,
+        ),
+        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+        dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),
+        dropdown_root: cn(
+          'relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdowns: cn(
+          'flex h-(--cell-size) w-full items-center justify-center gap-1.5 font-medium text-sm',
+          defaultClassNames.dropdowns,
+        ),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
+        month_caption: cn(
+          'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
+        nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),
+        outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
+        range_end: cn('rounded-e-md bg-accent', defaultClassNames.range_end),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_start: cn('rounded-s-md bg-accent', defaultClassNames.range_start),
+        root: cn('w-fit', defaultClassNames.root),
+        table: 'w-full border-collapse',
+        today: cn(
+          'rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        week: cn('mt-2 flex w-full', defaultClassNames.week),
+        week_number: cn('select-none text-[0.8rem] text-muted-foreground', defaultClassNames.week_number),
+        week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
+        weekday: cn(
+          'flex-1 select-none rounded-md font-normal text-[0.8rem] text-muted-foreground',
+          defaultClassNames.weekday,
+        ),
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === 'left') {
+            return <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+          }
+
+          if (orientation === 'right') {
+            return <ChevronRightIcon className={cn('size-4', className)} {...props} />
+          }
+
+          return <ChevronDownIcon className={cn('size-4', className)} {...props} />
+        },
+        DayButton: CalendarDayButton,
+        Root: ({ className, rootRef, ...props }) => {
+          return <div className={cn(className)} data-slot="calendar" ref={rootRef} {...props} />
+        },
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      formatters={{
+        formatCaption: (date) => captionFormatter.format(date),
+        formatDay: (date) => formatLocalizedNumber(date.getDate()),
+        formatMonthDropdown: (date) => monthFormatter.format(date),
+        formatWeekNumber: (weekNumber) => formatLocalizedNumber(weekNumber),
+        formatYearDropdown: (date) => String(date.getFullYear()),
+        ...formatters,
+      }}
+      showOutsideDays={showOutsideDays}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = 'Calendar'
+
+function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      className={cn(
+        'flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-s-md data-[range-end=true]:rounded-e-md data-[range-end=true]:bg-primary data-[range-middle=true]:bg-accent data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      data-day={day.date.toLocaleDateString()}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      data-range-start={modifiers.range_start}
+      data-selected-single={
+        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
+      }
+      ref={ref}
+      size="icon"
+      variant="ghost"
+      {...props}
+    />
+  )
+}
+CalendarDayButton.displayName = 'CalendarDayButton'
+
+export { Calendar, CalendarDayButton }

package/src/calendar/index.ts

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

package/src/card/card.tsx

@@ -0,0 +1,81 @@
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import * as React from 'react'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, dir, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
+    return (
+      <div
+        ref={ref}
+        className={cn('flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm', className)}
+        data-card=""
+        dir={direction}
+        {...props}
+      />
+    )
+  },
+)
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-card-action:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      data-slot="card-header"
+      {...props}
+    />
+  ),
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('font-semibold leading-none', className)} data-slot="card-title" {...props} />
+  ),
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-muted-foreground text-sm', className)} data-slot="card-description" {...props} />
+  ),
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+      data-slot="card-action"
+      {...props}
+    />
+  ),
+)
+CardAction.displayName = 'CardAction'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('px-6', className)} data-slot="card-content" {...props} />
+  ),
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center justify-end gap-2 px-6 [.border-t]:pt-6', className)}
+      data-slot="card-footer"
+      {...props}
+    />
+  ),
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }

package/src/card/index.ts

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