sparkdesign 0.4.8 → 0.4.9

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/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"
@@ -1084,6 +1141,35 @@
       "react-dom"
     ]
   },
+  "sidebar": {
+    "files": [
+      "basic/sidebar.tsx",
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx",
+      "basic/input.tsx",
+      "basic/separator.tsx",
+      "basic/sheet.tsx",
+      "basic/drawer.tsx",
+      "basic/theme-from-document.ts",
+      "basic/skeleton.tsx",
+      "basic/tooltip.tsx"
+    ],
+    "dependencies": [
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-separator",
+      "@radix-ui/react-slot",
+      "@radix-ui/react-tooltip",
+      "class-variance-authority",
+      "framer-motion",
+      "lucide-react",
+      "radix-ui"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "sidebar-menu": {
     "files": [
       "basic/sidebar-menu.tsx",
@@ -1125,6 +1211,19 @@
       "react-dom"
     ]
   },
+  "sonner": {
+    "files": [
+      "basic/sonner.tsx",
+      "basic/theme-from-document.ts"
+    ],
+    "dependencies": [
+      "sonner"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "spinner": {
     "files": [
       "basic/spinner.tsx",
@@ -1260,6 +1359,19 @@
       "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 +1386,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 +1457,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/ellipsis-text.d.ts

@@ -0,0 +1,45 @@
+/**
+ * [WHO]: EllipsisText — overflow-aware text with optional tooltip disclosure.
+ * [FROM]: react, clsx, registry/basic/tooltip.
+ * [TO]: sparkdesign package consumers; CLI `add ellipsis-text`; Showcase demos.
+ * [HERE]: registry/basic/ellipsis-text.tsx — canonical source for copied and packaged EllipsisText.
+ *
+ * [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 { type ReactNode, type CSSProperties } from 'react';
+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';
+}
+export declare const EllipsisText: import("react").ForwardRefExoticComponent<EllipsisTextProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+declare function useFormField(): {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

package/dist/registry/basic/icon-button.d.ts

@@ -5,9 +5,22 @@ declare const iconButtonVariants: (props?: ({
     rounded?: "square" | "pill" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-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 declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export { iconButtonVariants };

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

@@ -11,7 +11,7 @@ declare function Item({ className, variant, size, asChild, ...props }: React.Com
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare const itemMediaVariants: (props?: ({
-    variant?: "default" | "icon" | "image" | null | undefined;
+    variant?: "default" | "image" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): import("react/jsx-runtime").JSX.Element;
 declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Separator } from "./separator";
+import { Tooltip } from "./tooltip";
+type SidebarContextValue = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextValue;
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarTrigger({ className, onClick, children, ...props }: Omit<React.ComponentProps<typeof Button>, "children" | "variant" | "size"> & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | Omit<React.ComponentProps<typeof Tooltip>, "children">;
+} & VariantProps<typeof sidebarMenuButtonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, width, ...props }: React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+    width?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar, };

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

@@ -13,7 +13,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const tagVariants: (props?: ({
     appearance?: "outline" | "filled" | null | undefined;
-    color?: "link" | "primary" | "blue" | "lavender" | "orange" | "pink" | "purple" | "teal" | "yellow" | "error" | "warning" | "success" | "info" | "mauve" | "slate" | "sage" | null | undefined;
+    color?: "link" | "primary" | "error" | "blue" | "lavender" | "orange" | "pink" | "purple" | "teal" | "yellow" | "warning" | "success" | "info" | "mauve" | "slate" | "sage" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, VariantProps<typeof tagVariants> {
     closable?: boolean;