sparkdesign 0.4.8 → 0.4.10

package/cli/registry/basic/accordion.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+
+import { cn } from "@/lib/utils"
+import { ArrowDownSLine } from "./icons-inline"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    data-slot="accordion-item"
+    className={cn("border-b border-border-tertiary last:border-b-0", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    chevronIcon?: React.ReactNode
+  }
+>(({ className, children, chevronIcon, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      data-slot="accordion-trigger"
+      className={cn(
+        "group flex flex-1 items-center justify-between gap-2 py-4 text-left text-sm font-medium text-text transition-all outline-none hover:text-text-secondary",
+        "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",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <span
+        className="inline-flex shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180"
+        aria-hidden
+      >
+        {chevronIcon ?? <ArrowDownSLine className="size-4 text-text-secondary" />}
+      </span>
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = "AccordionTrigger"
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    data-slot="accordion-content"
+    className={cn(
+      "overflow-hidden text-sm text-text-secondary data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = "AccordionContent"
+
+export type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
+export type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+export type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+  chevronIcon?: React.ReactNode
+}
+export type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/cli/registry/basic/badge.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base [&>svg]:size-3 [&>svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-text-on-primary hover:bg-primary-hover",
+        secondary: "border-transparent bg-fill-secondary text-text hover:bg-fill",
+        destructive: "border-transparent bg-error text-text-on-primary hover:bg-error-hover",
+        outline: "border-border-tertiary bg-transparent text-text",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export type BadgeProps = React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & {
+    asChild?: boolean
+  }
+
+export { Badge, badgeVariants }

package/cli/registry/basic/button.tsx

@@ -2,11 +2,10 @@ 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,transform] duration-200 active:scale-[0.98] focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer',
+  'inline-flex items-center justify-center gap-1.5 font-medium 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',
   {
     variants: {
       variant: {
@@ -91,18 +90,24 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         aria-busy={loading || undefined}
         {...props}
       >
-        {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>
+        {asChild ? (
+          children
+        ) : (
+          <>
+            {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>
+            )}
+          </>
         )}
       </Comp>
     )

package/cli/registry/basic/calendar.tsx

@@ -31,7 +31,7 @@ function Calendar({
     <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",
+        "group/calendar bg-bg-base p-3 [--cell-size:2rem] [[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
@@ -55,24 +55,24 @@ function Calendar({
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          "h-[var(--cell-size)] w-[var(--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",
+          "h-[var(--cell-size)] w-[var(--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)",
+          "flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          "flex h-[var(--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",
+          "has-focus:border-primary-border border-border-tertiary shadow-sm has-focus:ring-primary-border/50 has-focus:ring-[3px] relative rounded-md border",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
@@ -80,7 +80,7 @@ function Calendar({
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "font-medium select-none",
+          "select-none font-medium",
           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",
@@ -94,7 +94,7 @@ function Calendar({
         ),
         week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
-          "w-(--cell-size) select-none",
+          "w-[var(--cell-size)] select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
@@ -102,20 +102,20 @@ function Calendar({
           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",
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-sm",
           props.showWeekNumber
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-sm"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-sm",
           defaultClassNames.day
         ),
         range_start: cn(
-          "rounded-l-md bg-fill-secondary",
+          "rounded-l-sm 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),
+        range_end: cn("rounded-r-sm bg-fill-secondary", defaultClassNames.range_end),
         today: cn(
-          "rounded-md bg-fill-secondary text-text data-[selected=true]:rounded-none",
+          "rounded-sm bg-fill-secondary text-text data-[selected=true]:rounded-sm",
           defaultClassNames.today
         ),
         outside: cn(
@@ -164,7 +164,7 @@ function Calendar({
         WeekNumber: ({ children, ...props }) => {
           return (
             <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
+              <div className="flex size-[var(--cell-size)] items-center justify-center text-center">
                 {children}
               </div>
             </td>
@@ -209,7 +209,7 @@ function CalendarDayButton({
       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",
+        "flex aspect-square size-auto w-full min-w-[var(--cell-size)] flex-col gap-1 px-0 leading-none font-normal hover:rounded-sm 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-sm data-[range-end=true]:rounded-r-sm 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-sm data-[range-start=true]:rounded-l-sm data-[range-start=true]:bg-primary data-[range-start=true]:text-text-on-primary data-[selected=true]:rounded-sm data-[selected=true]:!outline-none data-[selected=true]:!shadow-none data-[selected=true]:!ring-0 data-[selected=true]:!ring-offset-0 data-[selected=true]:!border-transparent data-[selected=true]:focus-visible:!ring-0 data-[selected=true]:focus-visible:!outline-none data-[selected-single=true]:rounded-sm 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
       )}

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useLayoutEffect, type ReactNode } from 'react'
+import { useState, useRef, useLayoutEffect, type KeyboardEvent, type ReactNode } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { cn } from '@/lib/utils'
 import { MOTION_EXPAND } from '@/lib/motion'
@@ -89,6 +89,13 @@ export function CollapsibleCard({
     setTimeout(() => setIsAnimating(false), 300)
   }
 
+  const handleToggleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!collapsible) return
+    if (event.key !== 'Enter' && event.key !== ' ') return
+    event.preventDefault()
+    handleToggle()
+  }
+
   const showArrow = collapsible && (isHovered || headerIcon == null)
   const headerIconNode = showArrow
     ? <ArrowDownSLine className={cn('w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0 transition-transform duration-200 text-text-secondary', isExpanded ? 'rotate-0' : '-rotate-90')} />
@@ -123,7 +130,9 @@ export function CollapsibleCard({
         <div
           className={cn('flex flex-row items-center gap-2 flex-1 min-w-0', collapsible && 'cursor-pointer')}
           onClick={handleToggle}
+          onKeyDown={handleToggleKeyDown}
           role={collapsible ? 'button' : undefined}
+          tabIndex={collapsible ? 0 : undefined}
           aria-expanded={collapsible ? isExpanded : undefined}
         >
           <div className="w-[var(--font-size-sm)] h-[var(--font-size-sm)] flex items-center justify-center shrink-0 text-text-secondary [&>svg]:w-[var(--font-size-sm)] [&>svg]:h-[var(--font-size-sm)]">

package/cli/registry/basic/combobox.tsx

@@ -22,6 +22,7 @@ export interface ComboboxOption {
 
 export interface ComboboxProps {
   options: ComboboxOption[]
+  size?: 'default' | 'compact'
   value?: string
   defaultValue?: string
   onValueChange?: (value: string) => void
@@ -46,6 +47,7 @@ function Combobox({
   placeholder = 'Select an option…',
   searchPlaceholder = 'Search…',
   emptyText = 'No option found.',
+  size = 'compact',
   disabled,
   className,
   contentClassName,
@@ -96,9 +98,16 @@ function Combobox({
         </PopoverTrigger>
         <PopoverContent
           align={align}
-          className={cn('w-[var(--radix-popover-trigger-width)] min-w-56 p-0', contentClassName)}
+          contentPadding="compact"
+          className={cn('w-[var(--radix-popover-trigger-width)] min-w-56', contentClassName)}
         >
-          <Command>
+          <Command
+            className={cn(
+              'w-full',
+              size === 'compact' &&
+                '[&_[data-slot=command-input-wrapper]]:h-8 [&_[data-slot=command-input]]:h-8 [&_[data-slot=command-input-wrapper]]:px-2 [&_[data-slot=command-input]]:py-1.5 [&_[cmdk-group]]:p-0 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-1.5 [&_[data-slot=command-empty]]:py-3'
+            )}
+          >
             <CommandInput placeholder={searchPlaceholder} />
             <CommandList>
               <CommandEmpty>{emptyText}</CommandEmpty>

package/cli/registry/basic/date-picker.tsx

@@ -61,15 +61,16 @@ function DatePicker({
             !selected && 'text-text-tertiary',
             className,
           )}
-          suffixIcon={<CalendarIcon className="ml-auto size-4 opacity-60" />}
+          prefixIcon={<CalendarIcon className="size-4 text-text-tertiary" />}
         >
           {selected ? format(selected, formatString) : <span>{placeholder}</span>}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align={align}>
+      <PopoverContent className="w-auto" contentPadding="compact" align={align}>
         <Calendar
           mode="single"
           selected={selected}
+          defaultMonth={selected}
           onSelect={handleSelect}
           autoFocus
         />

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'