sparkdesign 0.4.7 → 0.4.8

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

@@ -1,12 +1,13 @@
 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> {
     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,8 +4,8 @@ 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;

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/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" | "blue" | "lavender" | "orange" | "pink" | "purple" | "teal" | "yellow" | "error" | "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 };

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

@@ -3,7 +3,7 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { type VariantProps } from 'class-variance-authority';
 declare const toggleVariants: (props?: ({
-    variant?: "outline" | "default" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     rounded?: "square" | "pill" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/scale/computed.css

@@ -100,4 +100,15 @@
   --motion-ease-standard: var(--config-motion-ease-standard);
   --motion-ease-emphasized: var(--config-motion-ease-emphasized);
   --motion-ease-out: var(--config-motion-ease-out);
+
+  /* ============================================
+     Motion Multiplier (从配置映射)
+     ============================================ */
+  --motion-multiplier: var(--config-motion-multiplier);
+
+  /* ============================================
+     Border Width (从配置映射)
+     ============================================ */
+  --border-width: var(--config-border-width);
+  --border-width-thick: var(--config-border-width-thick);
 }

package/dist/scale/config.css

@@ -102,6 +102,17 @@
   --config-motion-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
   --config-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
 
+  /* ============================================
+     Motion Multiplier (preset 可覆盖，<1 更快，>1 更慢)
+     ============================================ */
+  --config-motion-multiplier: 1;
+
+  /* ============================================
+     Border Width 配置
+     ============================================ */
+  --config-border-width: 1px;
+  --config-border-width-thick: 2px;
+
   /* ============================================
      Font Family 配置
      ============================================ */

package/dist/scale/presets/compact.css

@@ -38,4 +38,11 @@
   --font-size-7xl: 56px;
   --font-size-8xl: 64px;
   --font-size-9xl: 88px;
+
+  /* Motion (略快) */
+  --motion-multiplier: 0.9;
+
+  /* Border */
+  --border-width: 1px;
+  --border-width-thick: 1px;
 }

package/dist/scale/presets/dense.css

@@ -72,4 +72,11 @@
   --font-size-7xl: 44px;
   --font-size-8xl: 56px;
   --font-size-9xl: 72px;
+
+  /* Motion (快速) */
+  --motion-multiplier: 0.8;
+
+  /* Border (极细) */
+  --border-width: 1px;
+  --border-width-thick: 1px;
 }

package/dist/scale/presets/sharp.css

@@ -49,4 +49,11 @@
   --font-size-7xl: 56px;
   --font-size-8xl: 64px;
   --font-size-9xl: 88px;
+
+  /* Motion (机械精准，最快) */
+  --motion-multiplier: 0.75;
+
+  /* Border (几何硬边) */
+  --border-width: 1px;
+  --border-width-thick: 2px;
 }

package/dist/scale/presets/soft.css

@@ -35,4 +35,11 @@
   --font-size-xl--line-height: 28px;
   --font-size-2xl: 22px;
   --font-size-2xl--line-height: 30px;
+
+  /* Motion (更舒缓) */
+  --motion-multiplier: 1.3;
+
+  /* Border (无边框面，靠阴影区分层级) */
+  --border-width: 0px;
+  --border-width-thick: 1px;
 }