sparkdesign 0.4.7 → 0.4.9

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

@@ -13,7 +13,7 @@ import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { type VariantProps } from 'class-variance-authority';
 declare const avatarVariants: (props?: ({
-    size?: "sm" | "lg" | "default" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
 }

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/button.d.ts

@@ -1,7 +1,7 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "text" | null | undefined;
+    variant?: "text" | "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "destructive" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     rounded?: "square" | "pill" | null | undefined;
     textOnly?: boolean | null | undefined;
@@ -11,6 +11,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Va
     textButton?: boolean;
     prefixIcon?: ReactNode;
     suffixIcon?: ReactNode;
+    loading?: boolean;
+    asChild?: boolean;
 }
 declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

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

@@ -1,6 +1,6 @@
 /**
  * [WHO]: Card — surface container with Header / Title / Description / Content / Footer parts.
- * [FROM]: React + `@/lib/utils` cn.
+ * [FROM]: React + `@/lib/utils` cn + CVA.
  * [TO]: sparkdesign package consumers; output of CLI `add card` when registered.
  * [HERE]: registry/basic/card.tsx — Spark Design source; keep aligned with the main library.
  *
@@ -10,18 +10,23 @@
  * 3. Follow design tokens and explicit type exports.
  */
 import * as React from 'react';
-declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+import { type VariantProps } from 'class-variance-authority';
+declare const cardVariants: (props?: ({
+    variant?: "outline" | "ghost" | "filled" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export type CardProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardTitleProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardActionProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
-export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, };
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, cardVariants, };

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

@@ -1,12 +1,12 @@
 /**
- * [WHO]: Combobox — accessible input + listbox composition for small option sets.
- * [FROM]: React + registry/basic/input.
+ * [WHO]: Combobox — Popover + Command composition for searchable single-select inputs.
+ * [FROM]: React, registry/basic/button, registry/basic/command, registry/basic/popover, registry/lib/utils.
  * [TO]: sparkdesign package consumers; output of CLI `add combobox` when registered.
- * [HERE]: registry/basic/combobox.tsx — Spark Design source; lightweight shadcn-compatible combobox.
+ * [HERE]: registry/basic/combobox.tsx — Spark Design source; tokenized shadcn-compatible combobox.
  *
  * [PROTOCOL]:
- * 1. Use Command for command-palette scale interactions.
- * 2. Keep option labels textual for screen reader compatibility.
+ * 1. Keep the trigger a Button (tokenized) so product surfaces inherit Spark typography/spacing.
+ * 2. Use Command for filtering so keyboard navigation and empty states remain consistent with the palette primitive.
  * 3. Follow design tokens and explicit type exports.
  */
 import * as React from 'react';
@@ -14,13 +14,24 @@ export interface ComboboxOption {
     value: string;
     label: string;
     disabled?: boolean;
+    keywords?: string[];
 }
-export interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface ComboboxProps {
     options: ComboboxOption[];
     value?: string;
+    defaultValue?: string;
     onValueChange?: (value: string) => void;
-    placeholder?: string;
-    emptyText?: string;
+    placeholder?: React.ReactNode;
+    searchPlaceholder?: string;
+    emptyText?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    contentClassName?: string;
+    align?: 'start' | 'center' | 'end';
+    triggerClassName?: string;
+    id?: string;
+    name?: string;
+    'aria-label'?: string;
 }
-declare function Combobox({ options, value, onValueChange, placeholder, emptyText, className, ...props }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+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;
 export { Combobox };

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

@@ -1,18 +1,27 @@
 /**
- * [WHO]: DatePicker — tokenized date input composed from native input semantics.
- * [FROM]: React + registry/basic/input.
+ * [WHO]: DatePicker — Popover + Calendar composition matching shadcn parity.
+ * [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; lightweight shadcn-compatible date picker.
+ * [HERE]: registry/basic/date-picker.tsx — Spark Design source; tokenized shadcn-compatible date picker.
  *
  * [PROTOCOL]:
- * 1. Keep this dependency-light; use Calendar separately when custom day grids are needed.
- * 2. Preserve native input accessibility and mobile picker behavior.
+ * 1. Render a Button trigger that surfaces the selected date using project typography/tokens.
+ * 2. Use the shared Calendar primitive inside a PopoverContent for the day grid; never fall back to native pickers.
  * 3. Follow design tokens and explicit type exports.
  */
 import * as React from 'react';
-import { type InputProps } from './input';
-export interface DatePickerProps extends Omit<InputProps, 'type'> {
-    type?: 'date' | 'datetime-local' | 'month' | 'time' | 'week';
+export interface DatePickerProps {
+    value?: Date;
+    defaultValue?: Date;
+    onChange?: (date: Date | undefined) => void;
+    placeholder?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    align?: 'start' | 'center' | 'end';
+    formatString?: string;
+    id?: string;
+    name?: string;
+    'aria-label'?: string;
 }
-declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+declare function DatePicker({ value, defaultValue, onChange, placeholder, disabled, className, align, formatString, id, name, 'aria-label': ariaLabel, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
 export { DatePicker };

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

@@ -19,7 +19,7 @@ declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const contentVariants: (props?: ({
-    size?: "sm" | "lg" | "default" | "xl" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof contentVariants> {
     size?: 'sm' | 'default' | 'lg' | 'xl';

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

@@ -1,12 +1,26 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const iconButtonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "iconOnly" | null | undefined;
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "destructive" | "iconOnly" | null | undefined;
     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/input-group.d.ts

@@ -12,16 +12,18 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Button } from "./button";
+import { type InputProps } from "./input";
+import { type TextareaProps } from "./textarea";
 declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): import("react/jsx-runtime").JSX.Element;
 declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
-declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
-declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupInput({ className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

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

@@ -1,6 +1,6 @@
 /**
  * [WHO]: Input — accessible text input with token-driven styling.
- * [FROM]: React + `@/lib/utils` cn.
+ * [FROM]: React + `@/lib/utils` cn + CVA.
  * [TO]: sparkdesign package consumers; output of CLI `add input` when registered.
  * [HERE]: registry/basic/input.tsx — Spark Design source; keep aligned with the main library.
  *
@@ -10,6 +10,11 @@
  * 3. Follow design tokens and explicit type exports.
  */
 import * as React from 'react';
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+import { type VariantProps } from 'class-variance-authority';
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
+}
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-export { Input };
+export { Input, inputVariants };

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

@@ -4,14 +4,14 @@ import { Separator } from "./separator";
 declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
 declare const itemVariants: (props?: ({
-    variant?: "outline" | "default" | "muted" | null | undefined;
-    size?: "sm" | "default" | null | undefined;
+    variant?: "default" | "outline" | "muted" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
     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/resizable.d.ts

@@ -19,61 +19,16 @@ declare const ResizablePanelGroup: React.ForwardRefExoticComponent<ResizablePane
 export type ResizablePanelProps = PanelProps;
 declare const ResizablePanel: React.ForwardRefExoticComponent<{
     className?: string | undefined | undefined;
-    children?: React.ReactNode | Iterable<React.ReactNode>;
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
+    color?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
+    part?: string | undefined | undefined;
     slot?: string | undefined | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
     style?: React.CSSProperties | undefined;
-    tabIndex?: number | undefined | undefined;
-    title?: string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
     role?: React.AriaRole | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-    popoverTarget?: string | undefined | undefined;
-    inert?: boolean | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
-    exportparts?: string | undefined | undefined;
-    part?: string | undefined | undefined;
+    tabIndex?: number | undefined | undefined;
     "aria-activedescendant"?: string | undefined | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
     "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -127,6 +82,7 @@ declare const ResizablePanel: React.ForwardRefExoticComponent<{
     "aria-valuemin"?: number | undefined | undefined;
     "aria-valuenow"?: number | undefined | undefined;
     "aria-valuetext"?: string | undefined | undefined;
+    children?: React.ReactNode | Iterable<React.ReactNode>;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined | undefined;
@@ -298,6 +254,50 @@ declare const ResizablePanel: React.ForwardRefExoticComponent<{
     onTransitionRunCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStart?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStartCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    title?: string | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
 } & {
     className?: string | undefined;
     collapsedSize?: number | string | undefined;

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

@@ -11,11 +11,16 @@
  */
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import { type VariantProps } from 'class-variance-authority';
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
-export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+declare const selectTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SelectTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'size'>, VariantProps<typeof selectTriggerVariants> {
     triggerIcon?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
 }
 declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
@@ -34,4 +39,4 @@ declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.S
     itemIndicatorIcon?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, selectTriggerVariants, };

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/spinner.d.ts

@@ -1,5 +1,9 @@
 import type { HTMLAttributes } from 'react';
-export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
-    className?: string;
+import { type VariantProps } from 'class-variance-authority';
+declare const spinnerVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof spinnerVariants> {
 }
 export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export { spinnerVariants };

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?: "primary" | "link" | "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;

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

@@ -1,6 +1,6 @@
 /**
  * [WHO]: Textarea — multi-line text input with token-driven styling.
- * [FROM]: React + `@/lib/utils` cn.
+ * [FROM]: React + `@/lib/utils` cn + CVA.
  * [TO]: sparkdesign package consumers; output of CLI `add textarea` when registered.
  * [HERE]: registry/basic/textarea.tsx — Spark Design source; keep aligned with the main library.
  *
@@ -10,6 +10,12 @@
  * 3. Follow design tokens and explicit type exports.
  */
 import * as React from 'react';
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+import { type VariantProps } from 'class-variance-authority';
+declare const textareaVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, VariantProps<typeof textareaVariants> {
+    size?: 'sm' | 'md' | 'lg';
+}
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export { Textarea };
+export { Textarea, textareaVariants };