sparkdesign 0.4.6 → 0.4.8

package/cli/registry/basic/alert-dialog.tsx

@@ -3,6 +3,7 @@ import { motion } from 'framer-motion'
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
+import { MOTION_FADE, MOTION_SLIDE_UP } from '@/lib/motion'
 import { getThemeFromDocument } from './theme-from-document'
 
 const AlertDialog = AlertDialogPrimitive.Root
@@ -16,9 +17,7 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Overlay ref={ref} asChild {...props}>
     <motion.div
       className={cn('fixed inset-0 z-50 bg-bg-mask/60', className)}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.15 }}
+      {...MOTION_FADE}
     />
   </AlertDialogPrimitive.Overlay>
 ))
@@ -59,9 +58,7 @@ const AlertDialogContent = React.forwardRef<
         <AlertDialogPrimitive.Content ref={ref} asChild {...props}>
           <motion.div
             className={cn(contentVariants({ size }), className)}
-            initial={{ opacity: 0, y: 8 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+            {...MOTION_SLIDE_UP}
           >
             {children}
           </motion.div>

package/cli/registry/basic/alert.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative grid w-full items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm',
+  {
+    variants: {
+      variant: {
+        default: 'border-border-tertiary bg-bg-container text-text [&>svg]:text-text-secondary',
+        info: 'border-primary-border bg-primary-bg text-text [&>svg]:text-primary',
+        success: 'border-success-border bg-success-bg text-text [&>svg]:text-success',
+        warning: 'border-warning-border bg-warning-bg text-text [&>svg]:text-warning',
+        destructive: 'border-error-border bg-error-bg text-text [&>svg]:text-error',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+)
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="alert"
+      className={cn(
+        alertVariants({ variant }),
+        'has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-3',
+        '[&>svg]:size-4 [&>svg]:translate-y-0.5',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'col-start-2 min-h-4 font-medium leading-5 tracking-tight text-text',
+        'line-clamp-1',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'col-start-2 grid justify-items-start gap-1 text-sm leading-6 text-text-secondary',
+      '[&_p]:leading-6',
+      className,
+    )}
+    {...props}
+  />
+))
+AlertDescription.displayName = 'AlertDescription'
+
+export type AlertTitleProps = React.HTMLAttributes<HTMLDivElement>
+export type AlertDescriptionProps = React.HTMLAttributes<HTMLDivElement>
+
+export { Alert, AlertTitle, AlertDescription, alertVariants }

package/cli/registry/basic/aspect-ratio.tsx

@@ -0,0 +1,8 @@
+import type * as React from 'react'
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export type AspectRatioProps = React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>
+
+export { AspectRatio }

package/cli/registry/basic/breadcrumb.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { MoreLine } from './icons-inline'
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'nav'> & { separator?: React.ReactNode }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = 'Breadcrumb'
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 text-sm text-text-tertiary break-words sm:gap-2.5',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+BreadcrumbList.displayName = 'BreadcrumbList'
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
+  ),
+)
+BreadcrumbItem.displayName = 'BreadcrumbItem'
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<'a'> & { asChild?: boolean }
+>(({ className, asChild, ...props }, ref) => {
+  if (asChild) {
+    return (
+      <span
+        className={cn('transition-colors hover:text-text', className)}
+        {...(props as React.HTMLAttributes<HTMLSpanElement>)}
+      />
+    )
+  }
+  return (
+    <a
+      ref={ref}
+      className={cn('transition-colors hover:text-text', className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = 'BreadcrumbLink'
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('font-normal text-text', className)}
+      {...props}
+    />
+  ),
+)
+BreadcrumbPage.displayName = 'BreadcrumbPage'
+
+const BreadcrumbSeparator: React.FC<React.ComponentPropsWithoutRef<'li'>> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn('[&>svg]:size-3.5 text-text-tertiary', className)}
+    {...props}
+  >
+    {children ?? (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        aria-hidden
+      >
+        <path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z" />
+      </svg>
+    )}
+  </li>
+)
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
+
+const BreadcrumbEllipsis: React.FC<React.ComponentPropsWithoutRef<'span'>> = ({
+  className,
+  ...props
+}) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn('flex size-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreLine className="size-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/cli/registry/basic/button-group.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonGroupVariants = cva(
+  // isolate + z-10 on focused child keeps focus ring from being clipped by siblings.
+  'inline-flex isolate [&>*]:focus-visible:relative [&>*]:focus-visible:z-10',
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          'flex-row items-stretch [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none',
+        vertical:
+          'flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+)
+
+export interface ButtonGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof buttonGroupVariants> {}
+
+const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ className, orientation = 'horizontal', ...props }, ref) => (
+    <div
+      ref={ref}
+      role="group"
+      data-orientation={orientation ?? 'horizontal'}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  ),
+)
+ButtonGroup.displayName = 'ButtonGroup'
+
+export type ButtonGroupTextProps = React.HTMLAttributes<HTMLDivElement>
+
+const ButtonGroupText = React.forwardRef<HTMLDivElement, ButtonGroupTextProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'inline-flex h-9 shrink-0 items-center gap-1.5 rounded bg-fill-secondary px-3 text-sm font-medium text-text select-none',
+        "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+ButtonGroupText.displayName = 'ButtonGroupText'
+
+export interface ButtonGroupSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const ButtonGroupSeparator = React.forwardRef<HTMLDivElement, ButtonGroupSeparatorProps>(
+  ({ className, orientation = 'vertical', ...props }, ref) => (
+    <div
+      ref={ref}
+      role="separator"
+      aria-orientation={orientation}
+      data-orientation={orientation}
+      className={cn(
+        'shrink-0 self-stretch bg-border-tertiary',
+        orientation === 'vertical' ? 'w-px' : 'h-px w-full',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+ButtonGroupSeparator.displayName = 'ButtonGroupSeparator'
+
+export { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, buttonGroupVariants }

package/cli/registry/basic/button.tsx

@@ -1,18 +1,22 @@
 import { forwardRef } from 'react'
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { Slot } from 'radix-ui'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
+import { Spinner } from './spinner'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-1.5 font-medium transition-colors duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer',
+  'inline-flex items-center justify-center gap-1.5 font-medium transition-[colors,transform] duration-200 active:scale-[0.98] focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer',
   {
     variants: {
       variant: {
         primary: 'bg-primary text-text-on-primary hover:bg-primary-hover',
         secondary: 'bg-bg-highlight text-text-on-primary hover:bg-bg-highlight-hover',
         tertiary: 'bg-fill-secondary text-text hover:bg-fill',
+        outline: 'border border-border-tertiary bg-bg-container text-text hover:bg-fill-secondary',
         ghost: 'bg-transparent text-text-secondary hover:bg-fill-secondary hover:text-text',
         text: 'bg-transparent text-text-secondary hover:text-text',
+        destructive: 'bg-error text-text-on-primary hover:bg-error-hover',
       },
       size: {
         sm: 'h-7 px-2 text-xs',
@@ -49,6 +53,8 @@ export interface ButtonProps
   textButton?: boolean
   prefixIcon?: ReactNode
   suffixIcon?: ReactNode
+  loading?: boolean
+  asChild?: boolean
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -62,13 +68,17 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       suffixIcon,
       rounded = 'square',
       disabled = false,
+      loading = false,
+      asChild = false,
       className,
       ...props
     },
     ref
   ) => {
+    const Comp = asChild ? Slot.Root : 'button'
+    const isDisabled = disabled || loading
     return (
-      <button
+      <Comp
         ref={ref}
         className={buttonVariants({
           variant: textButton ? 'text' : variant,
@@ -77,21 +87,24 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           textOnly: textButton,
           className,
         })}
-        disabled={disabled}
+        disabled={isDisabled}
+        aria-busy={loading || undefined}
         {...props}
       >
-        {prefixIcon && (
+        {loading ? (
+          <Spinner className="shrink-0" />
+        ) : prefixIcon ? (
           <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
             {prefixIcon}
           </span>
-        )}
+        ) : null}
         {children}
         {suffixIcon && (
           <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
             {suffixIcon}
           </span>
         )}
-      </button>
+      </Comp>
     )
   }
 )

package/cli/registry/basic/calendar.tsx

@@ -0,0 +1,221 @@
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+} from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "./button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-bg-base p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-md border border-border-tertiary shadow-sm has-focus:border-primary-border has-focus:ring-[3px] has-focus:ring-primary-border/50",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-bg-container opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-text-tertiary",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-md text-[0.8rem] font-normal text-text-tertiary select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-text-tertiary select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-fill-secondary",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-fill-secondary", defaultClassNames.range_end),
+        today: cn(
+          "rounded-md bg-fill-secondary text-text data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-text-tertiary aria-selected:text-text-tertiary",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-text-tertiary opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        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,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}
+
+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
+      ref={ref}
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "inline-flex items-center justify-center transition-colors hover:bg-fill-secondary hover:text-text",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 px-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-primary-border group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-primary-border/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-text-on-primary data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-fill-secondary data-[range-middle=true]:text-text data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-text-on-primary data-[selected-single=true]:bg-primary data-[selected-single=true]:text-text-on-primary dark:hover:text-text [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }