sparkdesign 0.4.8 → 0.4.10

package/cli/registry/basic/stepper.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+type StepStatus = 'complete' | 'current' | 'upcoming' | 'error'
+
+const stepperVariants = cva('group/stepper flex w-full', {
+  variants: {
+    orientation: {
+      horizontal: 'items-start',
+      vertical: 'flex-col',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+})
+
+export interface StepperProps
+  extends React.OlHTMLAttributes<HTMLOListElement>,
+    VariantProps<typeof stepperVariants> {}
+
+export interface StepperItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  status?: StepStatus
+}
+
+export type StepperIndicatorProps = React.HTMLAttributes<HTMLSpanElement>
+export type StepperContentProps = React.HTMLAttributes<HTMLDivElement>
+export type StepperTitleProps = React.HTMLAttributes<HTMLDivElement>
+export type StepperDescriptionProps = React.HTMLAttributes<HTMLDivElement>
+export type StepperSeparatorProps = React.HTMLAttributes<HTMLSpanElement>
+
+function CheckIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16" className="size-3.5">
+      <path
+        fill="currentColor"
+        d="M6.2 11.3 2.9 8l1-1 2.3 2.3 5-5 1 1-6 6z"
+      />
+    </svg>
+  )
+}
+
+function Stepper({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: StepperProps) {
+  return (
+    <ol
+      data-slot="stepper"
+      data-orientation={orientation}
+      className={cn(stepperVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function StepperItem({
+  className,
+  status = 'upcoming',
+  ...props
+}: StepperItemProps) {
+  return (
+    <li
+      data-slot="stepper-item"
+      data-status={status}
+      className={cn(
+        'group/stepper-item relative flex min-w-0 flex-1 gap-3',
+        'group-data-[orientation=horizontal]/stepper:flex-col group-data-[orientation=horizontal]/stepper:items-center group-data-[orientation=horizontal]/stepper:gap-2 group-data-[orientation=horizontal]/stepper:text-center',
+        'data-[status=current]:text-text data-[status=upcoming]:text-text-tertiary',
+        'data-[status=complete]:text-text data-[status=error]:text-error',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function StepperIndicator({ className, children, ...props }: StepperIndicatorProps) {
+  return (
+    <span
+      data-slot="stepper-indicator"
+      className={cn(
+        'z-10 flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-semibold transition-colors',
+        'border-border-tertiary bg-bg-container text-text-tertiary',
+        'group-data-[status=complete]/stepper-item:border-primary group-data-[status=complete]/stepper-item:bg-primary group-data-[status=complete]/stepper-item:text-text-on-primary',
+        'group-data-[status=current]/stepper-item:border-primary group-data-[status=current]/stepper-item:text-primary',
+        'group-data-[status=error]/stepper-item:border-error group-data-[status=error]/stepper-item:bg-error-bg group-data-[status=error]/stepper-item:text-error',
+        className
+      )}
+      {...props}
+    >
+      <span className="group-data-[status=complete]/stepper-item:hidden">
+        {children}
+      </span>
+      <span className="hidden group-data-[status=complete]/stepper-item:inline-flex">
+        <CheckIcon />
+      </span>
+    </span>
+  )
+}
+
+function StepperContent({ className, ...props }: StepperContentProps) {
+  return (
+    <div
+      data-slot="stepper-content"
+      className={cn(
+        'min-w-0 flex-1 pb-6 group-data-[orientation=horizontal]/stepper:pb-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function StepperTitle({ className, ...props }: StepperTitleProps) {
+  return (
+    <div
+      data-slot="stepper-title"
+      className={cn('text-sm font-medium leading-5 text-current', className)}
+      {...props}
+    />
+  )
+}
+
+function StepperDescription({ className, ...props }: StepperDescriptionProps) {
+  return (
+    <div
+      data-slot="stepper-description"
+      className={cn('mt-1 text-sm leading-5 text-text-tertiary', className)}
+      {...props}
+    />
+  )
+}
+
+function StepperSeparator({ className, ...props }: StepperSeparatorProps) {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="stepper-separator"
+      className={cn(
+        'absolute left-3.5 top-7 h-[calc(100%-1.75rem)] w-px -translate-x-1/2 bg-border-tertiary',
+        'group-data-[orientation=horizontal]/stepper:left-[calc(50%+1rem)] group-data-[orientation=horizontal]/stepper:right-[calc(-50%+1rem)] group-data-[orientation=horizontal]/stepper:top-3.5 group-data-[orientation=horizontal]/stepper:h-px group-data-[orientation=horizontal]/stepper:w-auto group-data-[orientation=horizontal]/stepper:translate-x-0',
+        'group-data-[status=complete]/stepper-item:bg-primary',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Stepper,
+  StepperItem,
+  StepperIndicator,
+  StepperContent,
+  StepperTitle,
+  StepperDescription,
+  StepperSeparator,
+}
+export type { StepStatus }

package/cli/registry/basic/timeline.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const timelineMarkerVariants = cva(
+  'mt-1.5 flex size-2.5 shrink-0 rounded-full ring-4 ring-bg-base',
+  {
+    variants: {
+      tone: {
+        default: 'bg-border',
+        primary: 'bg-primary',
+        success: 'bg-success',
+        warning: 'bg-warning',
+        error: 'bg-error',
+      },
+    },
+    defaultVariants: {
+      tone: 'default',
+    },
+  }
+)
+
+export type TimelineProps = React.OlHTMLAttributes<HTMLOListElement>
+export type TimelineItemProps = React.LiHTMLAttributes<HTMLLIElement>
+export type TimelineContentProps = React.HTMLAttributes<HTMLDivElement>
+export type TimelineTitleProps = React.HTMLAttributes<HTMLDivElement>
+export type TimelineDescriptionProps = React.HTMLAttributes<HTMLDivElement>
+export type TimelineTimeProps = React.TimeHTMLAttributes<HTMLTimeElement>
+export type TimelineConnectorProps = React.HTMLAttributes<HTMLSpanElement>
+export interface TimelineMarkerProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof timelineMarkerVariants> {}
+
+function Timeline({ className, ...props }: TimelineProps) {
+  return (
+    <ol
+      data-slot="timeline"
+      className={cn('flex flex-col', className)}
+      {...props}
+    />
+  )
+}
+
+function TimelineItem({ className, ...props }: TimelineItemProps) {
+  return (
+    <li
+      data-slot="timeline-item"
+      className={cn('group/timeline-item relative grid grid-cols-[auto_minmax(0,1fr)] gap-3 pb-6 last:pb-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TimelineMarker({ className, tone, ...props }: TimelineMarkerProps) {
+  return (
+    <span
+      data-slot="timeline-marker"
+      className={cn(timelineMarkerVariants({ tone }), className)}
+      {...props}
+    />
+  )
+}
+
+function TimelineConnector({ className, ...props }: TimelineConnectorProps) {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="timeline-connector"
+      className={cn(
+        'absolute left-1.5 top-5 h-[calc(100%-1.25rem)] w-px bg-border-tertiary group-last/timeline-item:hidden',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TimelineContent({ className, ...props }: TimelineContentProps) {
+  return (
+    <div
+      data-slot="timeline-content"
+      className={cn('min-w-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TimelineTitle({ className, ...props }: TimelineTitleProps) {
+  return (
+    <div
+      data-slot="timeline-title"
+      className={cn('text-sm font-medium leading-5 text-text', className)}
+      {...props}
+    />
+  )
+}
+
+function TimelineDescription({ className, ...props }: TimelineDescriptionProps) {
+  return (
+    <div
+      data-slot="timeline-description"
+      className={cn('mt-1 text-sm leading-6 text-text-tertiary', className)}
+      {...props}
+    />
+  )
+}
+
+function TimelineTime({ className, ...props }: TimelineTimeProps) {
+  return (
+    <time
+      data-slot="timeline-time"
+      className={cn('mt-1 block text-xs leading-5 text-text-quaternary', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Timeline,
+  TimelineItem,
+  TimelineMarker,
+  TimelineConnector,
+  TimelineContent,
+  TimelineTitle,
+  TimelineDescription,
+  TimelineTime,
+  timelineMarkerVariants,
+}

package/cli/registry/chat/chat-input/compound.tsx

@@ -208,6 +208,7 @@ export function ChatInputMoreButton() {
       icon={ctx.addLargeIcon ?? <MoreLine className="h-5 w-5" />}
       onClick={ctx.onMoreButtonClick}
       disabled={ctx.disabled}
+      aria-label="More actions"
     />
   )
 }

package/cli/registry/chat/permission-card.tsx

@@ -103,7 +103,7 @@ export const PermissionCard = forwardRef<HTMLDivElement, PermissionCardProps>(
         <p className="mb-2 ml-6 text-xs leading-xs text-text-tertiary">
           {isLoadingIntent ? (
             <span className="inline-flex items-center gap-1.5">
-              <div className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-text-tertiary border-t-transparent" />
+              <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-text-tertiary border-t-transparent" />
               <span>{displayDescription}</span>
             </span>
           ) : (

package/cli/registry/chat/user-question/compound.tsx

@@ -39,6 +39,7 @@ export function UserQuestionHeader({ className }: UserQuestionHeaderProps) {
             onClick={ctx.handlePrevious}
             disabled={ctx.currentQuestionIndex === 0}
             icon={ctx.arrowUpSIcon}
+            aria-label="Previous question"
           />
           <span className="text-xs leading-xs text-text-tertiary px-1">
             {ctx.currentQuestionIndex + 1} / {ctx.questions.length}
@@ -49,6 +50,7 @@ export function UserQuestionHeader({ className }: UserQuestionHeaderProps) {
             onClick={ctx.handleNext}
             disabled={ctx.currentQuestionIndex === ctx.questions.length - 1}
             icon={ctx.arrowDownSIcon}
+            aria-label="Next question"
           />
         </div>
       )}

package/cli/registry/meta.json

@@ -1,4 +1,17 @@
 {
+  "accordion": {
+    "files": [
+      "basic/accordion.tsx",
+      "basic/icons-inline.tsx"
+    ],
+    "dependencies": [
+      "@radix-ui/react-accordion"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "alert": {
     "files": [
       "basic/alert.tsx"
@@ -69,6 +82,19 @@
       "react-dom"
     ]
   },
+  "badge": {
+    "files": [
+      "basic/badge.tsx"
+    ],
+    "dependencies": [
+      "@radix-ui/react-slot",
+      "class-variance-authority"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "breadcrumb": {
     "files": [
       "basic/breadcrumb.tsx",
@@ -456,6 +482,22 @@
       "react-dom"
     ]
   },
+  "ellipsis-text": {
+    "files": [
+      "basic/ellipsis-text.tsx",
+      "basic/tooltip.tsx",
+      "basic/theme-from-document.ts"
+    ],
+    "dependencies": [
+      "@radix-ui/react-tooltip",
+      "clsx",
+      "framer-motion"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "empty": {
     "files": [
       "basic/empty.tsx"
@@ -542,6 +584,21 @@
       "react-dom"
     ]
   },
+  "form": {
+    "files": [
+      "basic/form.tsx",
+      "basic/label.tsx"
+    ],
+    "dependencies": [
+      "@radix-ui/react-label",
+      "@radix-ui/react-slot",
+      "react-hook-form"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "generated-images-grid": {
     "files": [
       "chat/generated-images-grid.tsx"
@@ -911,6 +968,18 @@
       "react-dom"
     ]
   },
+  "rating": {
+    "files": [
+      "basic/rating.tsx"
+    ],
+    "dependencies": [
+      "class-variance-authority"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "reasoning-step": {
     "files": [
       "chat/reasoning-step/index.tsx",
@@ -1052,32 +1121,43 @@
       "react-dom"
     ]
   },
-  "sheet": {
+  "shimmering-text": {
     "files": [
-      "basic/sheet.tsx",
-      "basic/drawer.tsx",
-      "basic/icons-inline.tsx",
-      "basic/theme-from-document.ts"
+      "basic/shimmering-text.tsx",
+      "lib/utils.ts"
     ],
     "dependencies": [
-      "@radix-ui/react-dialog",
-      "class-variance-authority",
-      "framer-motion"
+      "clsx",
+      "framer-motion",
+      "tailwind-merge"
     ],
     "peerDependencies": [
       "react",
       "react-dom"
     ]
   },
-  "shimmering-text": {
+  "sidebar": {
     "files": [
-      "basic/shimmering-text.tsx",
-      "lib/utils.ts"
+      "basic/sidebar.tsx",
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx",
+      "basic/input.tsx",
+      "basic/separator.tsx",
+      "basic/drawer.tsx",
+      "basic/theme-from-document.ts",
+      "basic/skeleton.tsx",
+      "basic/tooltip.tsx"
     ],
     "dependencies": [
-      "clsx",
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-separator",
+      "@radix-ui/react-slot",
+      "@radix-ui/react-tooltip",
+      "class-variance-authority",
       "framer-motion",
-      "tailwind-merge"
+      "lucide-react",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -1138,6 +1218,18 @@
       "react-dom"
     ]
   },
+  "stepper": {
+    "files": [
+      "basic/stepper.tsx"
+    ],
+    "dependencies": [
+      "class-variance-authority"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "streaming-markdown-block": {
     "files": [
       "chat/streaming-markdown-block.tsx",
@@ -1260,6 +1352,31 @@
       "react-dom"
     ]
   },
+  "timeline": {
+    "files": [
+      "basic/timeline.tsx"
+    ],
+    "dependencies": [
+      "class-variance-authority"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
+  "toast": {
+    "files": [
+      "basic/sonner.tsx",
+      "basic/theme-from-document.ts"
+    ],
+    "dependencies": [
+      "sonner"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "toggle": {
     "files": [
       "basic/toggle.tsx"
@@ -1274,6 +1391,20 @@
       "react-dom"
     ]
   },
+  "toggle-group": {
+    "files": [
+      "basic/toggle.tsx"
+    ],
+    "dependencies": [
+      "@radix-ui/react-toggle",
+      "@radix-ui/react-toggle-group",
+      "class-variance-authority"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "tool-invocation-card": {
     "files": [
       "chat/tool-invocation-card.tsx",
@@ -1331,5 +1462,32 @@
       "react",
       "react-dom"
     ]
+  },
+  "user-question-part": {
+    "files": [
+      "chat/user-question/index.tsx",
+      "chat/user-question/context.tsx",
+      "basic/icons-inline.tsx",
+      "chat/user-question/types.ts",
+      "chat/user-question/compound.tsx",
+      "lib/utils.ts",
+      "basic/icon-button.tsx",
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/option-list.tsx",
+      "basic/scrollbar.tsx",
+      "chat/user-question/useUserQuestionKeyboard.ts"
+    ],
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "framer-motion",
+      "radix-ui",
+      "tailwind-merge"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
   }
 }

package/dist/registry/basic/accordion.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    chevronIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+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/dist/registry/basic/badge.d.ts

@@ -0,0 +1,23 @@
+/**
+ * [WHO]: Badge component for compact labels and statuses.
+ * [FROM]: React, @radix-ui/react-slot, class-variance-authority, registry/lib/utils.
+ * [TO]: sparkdesign package consumers; Showcase; CLI registry copies.
+ * [HERE]: registry/basic/badge.tsx — tokenized status/category badge primitive.
+ *
+ * [PROTOCOL]:
+ * 1. Keep this P3 header in sync when the public contract changes.
+ * 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
+ * 3. Follow design tokens and explicit type exports.
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "outline" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export type BadgeProps = React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+};
+export { Badge, badgeVariants };

package/dist/registry/basic/calendar.d.ts

@@ -2,7 +2,7 @@
  * [WHO]: Calendar and CalendarDayButton date grid primitives.
  * [FROM]: React, react-day-picker, registry/basic/button, registry/lib/utils.
  * [TO]: sparkdesign package consumers; Showcase; CLI registry copies.
- * [HERE]: registry/basic/calendar.tsx — tokenized shadcn-derived calendar primitive.
+ * [HERE]: registry/basic/calendar.tsx — tokenized shadcn-compatible Calendar primitive.
  *
  * [PROTOCOL]:
  * 1. Keep this P3 header in sync when the public contract changes.

package/dist/registry/basic/combobox.d.ts

@@ -18,6 +18,7 @@ export interface ComboboxOption {
 }
 export interface ComboboxProps {
     options: ComboboxOption[];
+    size?: 'default' | 'compact';
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
@@ -33,5 +34,5 @@ export interface ComboboxProps {
     name?: string;
     'aria-label'?: string;
 }
-declare function Combobox({ options, value, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, className, contentClassName, triggerClassName, align, id, name, 'aria-label': ariaLabel, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+declare function Combobox({ options, value, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyText, size, disabled, className, contentClassName, triggerClassName, align, id, name, 'aria-label': ariaLabel, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
 export { Combobox };

package/dist/registry/basic/date-picker.d.ts

@@ -1,8 +1,8 @@
 /**
- * [WHO]: DatePicker — Popover + Calendar composition matching shadcn parity.
+ * [WHO]: DatePicker composes a Spark trigger with the shared Calendar in a Popover.
  * [FROM]: React, date-fns, registry/basic/button, registry/basic/calendar, registry/basic/popover, registry/lib/utils.
  * [TO]: sparkdesign package consumers; output of CLI `add date-picker` when registered.
- * [HERE]: registry/basic/date-picker.tsx — Spark Design source; tokenized shadcn-compatible date picker.
+ * [HERE]: registry/basic/date-picker.tsx — Spark Design date picker source.
  *
  * [PROTOCOL]:
  * 1. Render a Button trigger that surfaces the selected date using project typography/tokens.