sparkdesign 0.4.7 → 0.4.9

package/cli/registry/basic/drawer.tsx

@@ -3,6 +3,7 @@ import { motion } from 'framer-motion'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
+import { MOTION_FADE, MOTION_DURATION, MOTION_EASE } from '@/lib/motion'
 import { CloseLine } from './icons-inline'
 import { getThemeFromDocument } from './theme-from-document'
 
@@ -18,10 +19,7 @@ const DrawerOverlay = React.forwardRef<
   <DialogPrimitive.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 }}
-      exit={{ opacity: 0 }}
-      transition={{ duration: 0.15 }}
+      {...MOTION_FADE}
     />
   </DialogPrimitive.Overlay>
 ))
@@ -83,7 +81,7 @@ const DrawerContent = React.forwardRef<
               initial={motionProps.initial}
               animate={motionProps.animate}
               exit={motionProps.exit}
-              transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
+              transition={{ duration: MOTION_DURATION.slow, ease: MOTION_EASE.standard }}
             >
               {children}
               {showCloseButton && (

package/cli/registry/basic/dropdown-menu.tsx

@@ -3,6 +3,7 @@ import { motion } from 'framer-motion'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
+import { MOTION_SCALE_IN } from '@/lib/motion'
 import { ArrowRightLine, CheckLine } from './icons-inline'
 import { getThemeFromDocument } from './theme-from-document'
 
@@ -42,9 +43,7 @@ const DropdownMenuContent = React.forwardRef<
           {...props}
         >
           <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.15, ease: [0.4, 0, 0.2, 1] }}
+            {...MOTION_SCALE_IN}
           >
             {children}
           </motion.div>

package/cli/registry/basic/ellipsis-text.tsx

@@ -0,0 +1,151 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  forwardRef,
+  type ReactNode,
+  type CSSProperties,
+} from 'react'
+import { clsx } from 'clsx'
+import { Tooltip } from './tooltip'
+
+export interface EllipsisTextProps {
+  /** Text or inline content to display. */
+  children: ReactNode
+  /**
+   * Maximum visible lines before truncation.
+   * @default 1
+   */
+  lines?: number
+  /** Extra className for the text node. */
+  className?: string
+  /**
+   * Tooltip placement when overflow is detected.
+   * @default 'top'
+   */
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+  /** Extra className for Tooltip content. */
+  tooltipClassName?: string
+  /** Custom tooltip content. Defaults to children. */
+  tooltipContent?: ReactNode
+  /**
+   * Disable tooltip even when content overflows.
+   * @default false
+   */
+  disabled?: boolean
+  /** Inline style for the text node. */
+  style?: CSSProperties
+  /**
+   * Rendered text element.
+   * @default 'span'
+   */
+  as?: 'span' | 'div' | 'p'
+}
+
+function setRef<T>(ref: React.Ref<T> | undefined, value: T | null) {
+  if (!ref) return
+  if (typeof ref === 'function') ref(value)
+  else (ref as React.MutableRefObject<T | null>).current = value
+}
+
+export const EllipsisText = forwardRef<HTMLElement, EllipsisTextProps>(
+  (
+    {
+      children,
+      lines = 1,
+      className = '',
+      placement = 'top',
+      tooltipClassName = '',
+      tooltipContent,
+      disabled = false,
+      style,
+      as: Component = 'span',
+    },
+    ref
+  ) => {
+    const textRef = useRef<HTMLElement>(null)
+    const [isOverflowing, setIsOverflowing] = useState(false)
+
+    const checkOverflow = useCallback(() => {
+      const el = textRef.current
+      if (!el) return
+      const overflowing =
+        lines === 1
+          ? el.scrollWidth > el.clientWidth
+          : el.scrollHeight > el.clientHeight
+      setIsOverflowing(overflowing)
+    }, [lines])
+
+    useEffect(() => {
+      const raf = requestAnimationFrame(() => checkOverflow())
+      const el = textRef.current
+      if (!el) return () => cancelAnimationFrame(raf)
+      const ro = new ResizeObserver(() => checkOverflow())
+      ro.observe(el)
+      window.addEventListener('resize', checkOverflow)
+      return () => {
+        cancelAnimationFrame(raf)
+        ro.disconnect()
+        window.removeEventListener('resize', checkOverflow)
+      }
+    }, [checkOverflow, children])
+
+    const ellipsisStyle: CSSProperties =
+      lines === 1
+        ? {
+            display: 'block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            ...style,
+          }
+        : {
+            overflow: 'hidden',
+            display: '-webkit-box',
+            WebkitLineClamp: lines,
+            WebkitBoxOrient: 'vertical',
+            ...style,
+          }
+
+    const refCallback = useCallback(
+      (el: HTMLElement | null) => {
+        setRef(textRef, el)
+        setRef(ref, el)
+      },
+      [ref]
+    )
+
+    const triggerNode = (
+      <Component
+        ref={refCallback}
+        className={className}
+        style={ellipsisStyle}
+      >
+        {children}
+      </Component>
+    )
+
+    const useTooltip = isOverflowing && !disabled
+    if (useTooltip) {
+      return (
+        <Tooltip
+          content={tooltipContent ?? children}
+          side={placement}
+          contentClassName={clsx(tooltipClassName)}
+        >
+          <span
+            ref={refCallback}
+            className={className}
+            style={ellipsisStyle}
+          >
+            {children}
+          </span>
+        </Tooltip>
+      )
+    }
+    return triggerNode
+  }
+)
+
+EllipsisText.displayName = 'EllipsisText'

package/cli/registry/basic/form.tsx

@@ -0,0 +1,186 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "./label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+function FormField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({ ...props }: ControllerProps<TFieldValues, TName>) {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function useFormField() {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  if (!fieldContext.name) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        ref={ref}
+        data-slot="form-item"
+        className={cn("space-y-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-error", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      data-slot="form-description"
+      className={cn("text-sm text-text-tertiary", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      data-slot="form-message"
+      className={cn("text-sm font-medium text-error", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

package/cli/registry/basic/hover-card.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { motion } from 'framer-motion'
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
 import { cn } from '@/lib/utils'
+import { MOTION_SCALE_IN } from '@/lib/motion'
 import { getThemeFromDocument } from './theme-from-document'
 
 const HoverCard = HoverCardPrimitive.Root
@@ -41,9 +42,7 @@ const HoverCardContent = React.forwardRef<
             {...props}
           >
             <motion.div
-              initial={{ opacity: 0, y: 4 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.15, ease: [0.4, 0, 0.2, 1] }}
+              {...MOTION_SCALE_IN}
             >
               {children}
             </motion.div>

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

@@ -1,10 +1,11 @@
 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'
 
 const iconButtonVariants = cva(
-  'flex-none shrink-0 inline-flex items-center justify-center box-border transition-colors duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer [&>*]:flex [&>*]:items-center [&>*]:justify-center [&>*]:size-full [&>*]:[&>svg]:block [&>*]:[&>svg]:leading-none',
+  'flex-none shrink-0 inline-flex items-center justify-center box-border transition-[color,background-color,border-color,box-shadow,transform] duration-200 active:scale-[0.98] focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer [&>*]:flex [&>*]:items-center [&>*]:justify-center [&>*]:size-full [&>*]:[&>svg]:block [&>*]:[&>svg]:leading-none',
   {
     variants: {
       variant: {
@@ -13,6 +14,7 @@ const iconButtonVariants = cva(
         tertiary: 'bg-fill-secondary text-text hover:bg-fill',
         ghost: 'bg-transparent text-text-secondary hover:bg-fill-secondary hover:text-text',
         iconOnly: 'bg-transparent text-text-secondary hover:text-text',
+        destructive: 'bg-error text-text-on-primary hover:bg-error-hover',
       },
       rounded: {
         square: 'rounded',
@@ -32,10 +34,19 @@ const iconButtonVariants = cva(
   }
 )
 
-export interface IconButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof iconButtonVariants> {
+type IconButtonAccessibleName =
+  | { 'aria-label': string; 'aria-labelledby'?: string; title?: string }
+  | { 'aria-label'?: string; 'aria-labelledby': string; title?: string }
+  | { 'aria-label'?: string; 'aria-labelledby'?: string; title: string }
+
+export type IconButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'aria-label' | 'aria-labelledby' | 'title'
+> &
+  VariantProps<typeof iconButtonVariants> &
+  IconButtonAccessibleName & {
   icon: ReactNode
+  asChild?: boolean
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
@@ -46,20 +57,24 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       rounded = 'square',
       icon,
       disabled = false,
+      asChild = false,
       className,
       ...props
     },
     ref
-  ) => (
-    <button
-      ref={ref}
-      className={cn(iconButtonVariants({ variant, size, rounded }), className)}
-      disabled={disabled}
-      {...props}
-    >
-      <span className="inline-flex shrink-0 size-full items-center justify-center">{icon}</span>
-    </button>
-  )
+  ) => {
+    const Comp = asChild ? Slot.Root : 'button'
+    return (
+      <Comp
+        ref={ref}
+        className={cn(iconButtonVariants({ variant, size, rounded }), className)}
+        disabled={disabled}
+        {...props}
+      >
+        <span className="inline-flex shrink-0 size-full items-center justify-center">{icon}</span>
+      </Comp>
+    )
+  }
 )
 IconButton.displayName = 'IconButton'
 

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

@@ -3,8 +3,8 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 import { Button } from "./button"
-import { Input } from "./input"
-import { Textarea } from "./textarea"
+import { Input, type InputProps } from "./input"
+import { Textarea, type TextareaProps } from "./textarea"
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -129,7 +129,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
 function InputGroupInput({
   className,
   ...props
-}: React.ComponentProps<"input">) {
+}: InputProps) {
   return (
     <Input
       data-slot="input-group-control"
@@ -145,7 +145,7 @@ function InputGroupInput({
 function InputGroupTextarea({
   className,
   ...props
-}: React.ComponentProps<"textarea">) {
+}: TextareaProps) {
   return (
     <Textarea
       data-slot="input-group-control"

package/cli/registry/basic/input.tsx

@@ -1,27 +1,43 @@
 import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+const inputVariants = cva(
+  [
+    'flex w-full min-w-0 rounded-lg border border-border-tertiary bg-bg-container text-text transition-colors',
+    'placeholder:text-text-tertiary',
+    'file:border-0 file:bg-transparent file:font-medium file:text-text',
+    'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
+    'focus:border-border-secondary focus-visible:border-border-secondary',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    'aria-invalid:border-error aria-invalid:ring-0',
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        sm: 'h-7 px-2 py-0.5 text-xs file:text-xs',
+        md: 'h-9 px-3 py-1 text-sm file:text-sm',
+        lg: 'h-11 px-4 py-1.5 text-base file:text-base',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+)
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => (
+  ({ className, type, size = 'md', ...props }, ref) => (
     <input
       type={type}
       ref={ref}
-      className={cn(
-        'flex h-9 w-full min-w-0 rounded-lg border border-border-tertiary bg-bg-container px-3 py-1 text-sm text-text transition-colors',
-        'placeholder:text-text-tertiary',
-        'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-text',
-        'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
-        'focus:border-border-secondary focus-visible:border-border-secondary',
-        'disabled:cursor-not-allowed disabled:opacity-50',
-        'aria-invalid:border-error aria-invalid:ring-0',
-        className,
-      )}
+      className={cn(inputVariants({ size }), className)}
       {...props}
     />
   ),
 )
 Input.displayName = 'Input'
 
-export { Input }
+export { Input, inputVariants }

package/cli/registry/basic/popover.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { motion } from 'framer-motion'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { cn } from '@/lib/utils'
+import { MOTION_SCALE_IN } from '@/lib/motion'
 import { getThemeFromDocument } from './theme-from-document'
 
 const Popover = PopoverPrimitive.Root
@@ -42,9 +43,7 @@ const PopoverContent = React.forwardRef<
             {...props}
           >
             <motion.div
-              initial={{ opacity: 0, y: 4 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.15, ease: [0.4, 0, 0.2, 1] }}
+              {...MOTION_SCALE_IN}
             >
               {children}
             </motion.div>

package/cli/registry/basic/select.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as SelectPrimitive from '@radix-ui/react-select'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 import { ArrowDownSLine, ArrowUpLine, CheckLine } from './icons-inline'
 import { getThemeFromDocument } from './theme-from-document'
@@ -12,21 +13,39 @@ const Select = SelectPrimitive.Root
 const SelectGroup = SelectPrimitive.Group
 const SelectValue = SelectPrimitive.Value
 
+const selectTriggerVariants = cva(
+  [
+    'flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-border-tertiary bg-bg-container text-text placeholder:text-muted-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+    'focus:border-border-secondary focus-visible:border-border-secondary data-[state=open]:border-border-secondary',
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        sm: 'h-7 px-2 py-0.5 text-xs',
+        md: 'h-9 px-3 py-2 text-sm',
+        lg: 'h-11 px-4 py-2.5 text-base',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+)
+
 export interface SelectTriggerProps
-  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+  extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'size'>,
+    VariantProps<typeof selectTriggerVariants> {
   triggerIcon?: React.ReactNode
+  size?: 'sm' | 'md' | 'lg'
 }
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   SelectTriggerProps
->(({ className, children, disabled, triggerIcon, ...props }, ref) => (
+>(({ className, children, disabled, triggerIcon, size = 'md', ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     disabled={disabled}
     className={cn(
-      'flex h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-border-tertiary bg-bg-container px-3 py-2 text-sm text-text placeholder:text-muted-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      'focus:border-border-secondary focus-visible:border-border-secondary data-[state=open]:border-border-secondary',
+      selectTriggerVariants({ size }),
       FOCUS_RESET,
       className
     )}
@@ -175,4 +194,5 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
+  selectTriggerVariants,
 }