@simplysm/solid 13.0.78 → 13.0.81

package/src/components/features/shared-data/SharedDataSelectButton.tsx

@@ -2,26 +2,19 @@ import { type Component, type JSX, splitProps } from "solid-js";
 import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataProvider";
 import {
   DataSelectButton,
-  type DataSelectButtonProps,
   type SelectDialogBaseProps,
   type DialogPropsField,
 } from "../data-select-button/DataSelectButton";
 import { type DialogShowOptions } from "../../disclosure/Dialog";
 import { type ComponentSize } from "../../../styles/control.styles";
 
-/** SharedDataSelectButton Props */
-export type SharedDataSelectButtonProps<
+/** Common props shared between single and multiple modes */
+interface SharedDataSelectButtonCommonProps<
   TItem,
   TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
-> = {
+> {
   /** Shared data accessor */
   data: SharedDataAccessor<TItem>;
-  /** Currently selected key(s) (single or multiple) */
-  value?: DataSelectButtonProps<TItem>["value"];
-  /** Value change callback */
-  onValueChange?: DataSelectButtonProps<TItem>["onValueChange"];
-  /** Multiple selection mode */
-  multiple?: boolean;
   /** Required input */
   required?: boolean;
   /** Disabled */
@@ -36,7 +29,41 @@ export type SharedDataSelectButtonProps<
   dialogOptions?: DialogShowOptions;
   /** Item rendering function */
   children: (item: TItem) => JSX.Element;
-} & DialogPropsField<TDialogProps>;
+}
+
+/** Single select props */
+interface SharedDataSelectButtonSingleProps<
+  TItem,
+  TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
+> extends SharedDataSelectButtonCommonProps<TItem, TDialogProps> {
+  /** Single select mode */
+  multiple?: false;
+  /** Currently selected key */
+  value?: string | number;
+  /** Value change callback */
+  onValueChange?: (value: string | number | undefined) => void;
+}
+
+/** Multiple select props */
+interface SharedDataSelectButtonMultipleProps<
+  TItem,
+  TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
+> extends SharedDataSelectButtonCommonProps<TItem, TDialogProps> {
+  /** Multiple select mode */
+  multiple: true;
+  /** Currently selected keys */
+  value?: (string | number)[];
+  /** Value change callback */
+  onValueChange?: (value: (string | number)[]) => void;
+}
+
+/** SharedDataSelectButton Props */
+export type SharedDataSelectButtonProps<
+  TItem,
+  TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
+> =
+  | (SharedDataSelectButtonSingleProps<TItem, TDialogProps> & DialogPropsField<TDialogProps>)
+  | (SharedDataSelectButtonMultipleProps<TItem, TDialogProps> & DialogPropsField<TDialogProps>);
 
 export function SharedDataSelectButton<
   TItem,

package/src/components/features/shared-data/SharedDataSelectList.tsx

@@ -207,7 +207,7 @@ const SharedDataSelectListInner = (<TItem,>(
       <div
         {...rest}
         data-shared-data-select-list
-        class={twMerge(clsx("flex-col", gap.default), local.class)}
+        class={twMerge(clsx("flex-col", gap.md), local.class)}
         style={local.style}
       >
         {/* Header */}

package/src/components/feedback/Progress.tsx

@@ -8,7 +8,7 @@ import { type SemanticTheme, themeTokens } from "../../styles/theme.styles";
 export type ProgressTheme = SemanticTheme;
 
 export interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  /** Progress value (range 0-1, 0 = 0%, 1 = 100%) */
+  /** Progress value (range 0-100, 0 = 0%, 100 = 100%) */
   value: number;
   theme?: ProgressTheme;
   size?: ComponentSize;
@@ -16,7 +16,7 @@ export interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
 }
 
 const sizeClasses: Record<ComponentSize, string> = {
-  default: pad.default,
+  md: pad.md,
   xs: pad.xs,
   sm: pad.sm,
   lg: pad.lg,
@@ -31,7 +31,7 @@ export const Progress: ParentComponent<ProgressProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "theme", "size", "value", "inset"]);
 
   const getClassName = () => {
-    const size = local.size ?? "default";
+    const size = local.size ?? "md";
     return twMerge(
       clsx("relative block w-full overflow-hidden rounded", bg.subtle, "border", border.default),
       sizeClasses[size],
@@ -45,7 +45,7 @@ export const Progress: ParentComponent<ProgressProps> = (props) => {
     return clsx("absolute left-0 top-0 h-full", "z-[1]", "transition-all", barThemeClasses[theme]);
   };
 
-  const getPercentText = () => (Math.max(0, Math.min(1, local.value)) * 100).toFixed(2) + "%";
+  const getPercentText = () => Math.max(0, Math.min(100, local.value)).toFixed(2) + "%";
 
   return (
     <div data-progress class={getClassName()} {...rest}>

package/src/components/form-control/Button.tsx

@@ -24,7 +24,7 @@ const themeClasses = Object.fromEntries(
 ) as Record<ButtonTheme, Record<ButtonVariant, string>>;
 
 const sizeClasses: Record<ButtonSize, string> = {
-  default: clsx("min-w-8", pad.default),
+  md: clsx("min-w-8", pad.md),
   xs: clsx("min-w-4", pad.xs),
   sm: clsx("min-w-6", pad.sm),
   lg: clsx("min-w-9", pad.lg),
@@ -57,7 +57,7 @@ export const Button: ParentComponent<ButtonProps> = (props) => {
     return twMerge(
       "inline-flex items-center font-bold justify-center text-center cursor-pointer transition rounded focus:outline-none focus-visible:ring-2 border border-transparent",
       themeClasses[theme][variant],
-      sizeClasses[local.size ?? "default"],
+      sizeClasses[local.size ?? "md"],
       local.inset && "rounded-none border-none",
       local.disabled && state.disabled,
       local.class,

package/src/components/form-control/DropdownTrigger.styles.ts

@@ -29,7 +29,7 @@ export const triggerInsetClass = clsx(
 );
 
 export const triggerSizeClasses: Record<ComponentSize, string> = {
-  default: clsx(gap.default, pad.default),
+  md: clsx(gap.md, pad.md),
   xs: clsx(gap.xs, pad.xs),
   sm: clsx(gap.sm, pad.sm),
   lg: clsx(gap.lg, pad.lg),
@@ -47,7 +47,7 @@ export function getTriggerClass(options: {
 }): string {
   return twMerge(
     triggerBaseClass,
-    triggerSizeClasses[options.size ?? "default"],
+    triggerSizeClasses[options.size ?? "md"],
     options.disabled && triggerDisabledClass,
     options.inset && triggerInsetClass,
     options.class,

package/src/components/form-control/ThemeToggle.tsx

@@ -8,7 +8,7 @@ import { useI18n } from "../../providers/i18n/I18nProvider";
 import { type ComponentSize } from "../../styles/control.styles";
 
 const sizeClasses: Record<ComponentSize, string> = {
-  default: "p-1.5",
+  md: "p-1.5",
   xs: "p-0.5",
   sm: "p-1",
   lg: "p-2",
@@ -16,7 +16,7 @@ const sizeClasses: Record<ComponentSize, string> = {
 };
 
 const iconSizes: Record<ComponentSize, string> = {
-  default: "1.25em",
+  md: "1.25em",
   xs: "0.75em",
   sm: "1em",
   lg: "1.5em",
@@ -63,9 +63,9 @@ export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
 
   const modeLabel = () => i18n.t(modeLabelKeys[mode()]);
 
-  const getClassName = () => twMerge(sizeClasses[local.size ?? "default"], local.class);
+  const getClassName = () => twMerge(sizeClasses[local.size ?? "md"], local.class);
 
-  const iconSize = () => iconSizes[local.size ?? "default"];
+  const iconSize = () => iconSizes[local.size ?? "md"];
 
   return (
     <Button

package/src/components/form-control/checkbox/Checkbox.styles.ts

@@ -31,7 +31,7 @@ export const checkedClass = clsx("border-primary-500 bg-primary-500", "text-whit
 
 // Size-specific styles
 export const checkboxSizeClasses: Record<CheckboxSize, string> = {
-  default: clsx("h-field", pad.default),
+  md: clsx("h-field", pad.md),
   xs: clsx("h-field-xs", pad.xs),
   sm: clsx("h-field-sm", pad.sm),
   lg: clsx("h-field-lg", pad.lg),
@@ -49,7 +49,7 @@ export const checkboxInsetClass = clsx(
 
 // Inset size-specific heights (excluding 2px border)
 export const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string> = {
-  default: clsx`h-field-inset`,
+  md: clsx`h-field-inset`,
   xs: clsx`h-field-inset-xs`,
   sm: clsx`h-field-inset-sm`,
   lg: clsx`h-field-inset-lg`,
@@ -57,7 +57,7 @@ export const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string> = {
 };
 
 // Inline styles
-export const checkboxInlineClass = clsx("!h-auto", "!p-0", gap.default);
+export const checkboxInlineClass = clsx("!h-auto", "!p-0", gap.md);
 
 // Disabled styles
 export const checkboxDisabledClass = clsx(state.disabled);

package/src/components/form-control/checkbox/Checkbox.tsx

@@ -5,14 +5,14 @@ import { Icon } from "../../display/Icon";
 import { SelectableBase } from "./SelectableBase";
 
 export interface CheckboxProps {
-  value?: boolean;
-  onValueChange?: (value: boolean) => void;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
   disabled?: boolean;
   size?: CheckboxSize;
   inset?: boolean;
   inline?: boolean;
   required?: boolean;
-  validate?: (value: boolean) => string | undefined;
+  validate?: (checked: boolean) => string | undefined;
   lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;

package/src/components/form-control/checkbox/CheckboxGroup.tsx

@@ -86,8 +86,8 @@ function CheckboxGroupItem<TValue = unknown>(props: {
 
   return (
     <Checkbox
-      value={isSelected()}
-      onValueChange={handleChange}
+      checked={isSelected()}
+      onCheckedChange={handleChange}
       disabled={props.disabled ?? ctx.disabled()}
       size={ctx.size()}
       inline={ctx.inline()}

package/src/components/form-control/checkbox/Radio.tsx

@@ -3,14 +3,14 @@ import type { CheckboxSize } from "./Checkbox.styles";
 import { SelectableBase } from "./SelectableBase";
 
 export interface RadioProps {
-  value?: boolean;
-  onValueChange?: (value: boolean) => void;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
   disabled?: boolean;
   size?: CheckboxSize;
   inset?: boolean;
   inline?: boolean;
   required?: boolean;
-  validate?: (value: boolean) => string | undefined;
+  validate?: (checked: boolean) => string | undefined;
   lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;

package/src/components/form-control/checkbox/RadioGroup.tsx

@@ -83,8 +83,8 @@ function RadioGroupItem<TValue = unknown>(props: {
 
   return (
     <Radio
-      value={isSelected()}
-      onValueChange={handleChange}
+      checked={isSelected()}
+      onCheckedChange={handleChange}
       disabled={props.disabled ?? ctx.disabled()}
       size={ctx.size()}
       inline={ctx.inline()}

package/src/components/form-control/checkbox/SelectableBase.tsx

@@ -19,14 +19,14 @@ import { Invalid } from "../Invalid";
 void ripple;
 
 export interface SelectableBaseProps {
-  value?: boolean;
-  onValueChange?: (value: boolean) => void;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
   disabled?: boolean;
   size?: CheckboxSize;
   inset?: boolean;
   inline?: boolean;
   required?: boolean;
-  validate?: (value: boolean) => string | undefined;
+  validate?: (checked: boolean) => string | undefined;
   lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
@@ -42,8 +42,8 @@ export interface SelectableBaseConfig {
 
 export const SelectableBase: ParentComponent<SelectableBaseProps & { config: SelectableBaseConfig }> = (props) => {
   const [local, rest] = splitProps(props, [
-    "value",
-    "onValueChange",
+    "checked",
+    "onCheckedChange",
     "disabled",
     "size",
     "inset",
@@ -59,14 +59,14 @@ export const SelectableBase: ParentComponent<SelectableBaseProps & { config: Sel
 
   const i18n = useI18n();
 
-  const [value, setValue] = createControllableSignal({
-    value: () => local.value ?? false,
-    onChange: () => local.onValueChange,
+  const [checked, setChecked] = createControllableSignal({
+    value: () => local.checked ?? false,
+    onChange: () => local.onCheckedChange,
   });
 
   const handleClick = () => {
     if (local.disabled) return;
-    setValue((v) => local.config.onToggle(v));
+    setChecked((v) => local.config.onToggle(v));
   };
 
   const handleKeyDown = (e: KeyboardEvent) => {
@@ -79,19 +79,19 @@ export const SelectableBase: ParentComponent<SelectableBaseProps & { config: Sel
   const getWrapperClass = () =>
     twMerge(
       checkboxBaseClass,
-      checkboxSizeClasses[local.size ?? "default"],
+      checkboxSizeClasses[local.size ?? "md"],
       local.inset && checkboxInsetClass,
-      local.inset && checkboxInsetSizeHeightClasses[local.size ?? "default"],
+      local.inset && checkboxInsetSizeHeightClasses[local.size ?? "md"],
       local.inline && checkboxInlineClass,
       local.disabled && checkboxDisabledClass,
       local.class,
     );
 
   const getIndicatorClass = () =>
-    twMerge(indicatorBaseClass, local.config.indicatorShape, value() && checkedClass);
+    twMerge(indicatorBaseClass, local.config.indicatorShape, checked() && checkedClass);
 
   const errorMsg = createMemo(() => {
-    const v = local.value ?? false;
+    const v = local.checked ?? false;
     if (local.required && !v) return i18n.t("validation.requiredSelection");
     return local.validate?.(v);
   });
@@ -102,7 +102,7 @@ export const SelectableBase: ParentComponent<SelectableBaseProps & { config: Sel
         {...rest}
         use:ripple={!local.disabled}
         role={local.config.role}
-        aria-checked={value()}
+        aria-checked={checked()}
         tabIndex={local.disabled ? -1 : 0}
         class={getWrapperClass()}
         style={local.style}
@@ -110,7 +110,7 @@ export const SelectableBase: ParentComponent<SelectableBaseProps & { config: Sel
         onKeyDown={handleKeyDown}
       >
         <div class={getIndicatorClass()}>
-          <Show when={value()}>
+          <Show when={checked()}>
             {local.config.indicatorContent}
           </Show>
         </div>

package/src/components/form-control/color-picker/ColorPicker.tsx

@@ -8,7 +8,7 @@ import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 // Size-specific styles
 const sizeClasses: Record<ComponentSize, string> = {
-  default: clsx`size-field`,
+  md: clsx`size-field`,
   xs: "size-field-xs",
   sm: "size-field-sm",
   lg: "size-field-lg",
@@ -88,7 +88,7 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
     twMerge(
        
       "size-field rounded border border-black/10 dark:border-white/10 cursor-pointer [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-none [&::-moz-color-swatch]:border-none [&::-moz-color-swatch]:rounded-none",
-      sizeClasses[local.size ?? "default"],
+      sizeClasses[local.size ?? "md"],
        
       local.disabled && "cursor-default relative before:absolute before:bottom-0 before:left-0 before:right-0 before:top-0 before:bg-[linear-gradient(45deg,transparent_40%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.4)_60%,transparent_60%)]",
       local.class,

package/src/components/form-control/date-range-picker/DateRangePicker.tsx

@@ -154,7 +154,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
   };
 
   // Wrapper CSS class
-  const getWrapperClass = () => twMerge(clsx("inline-flex items-center", gap.default), local.class);
+  const getWrapperClass = () => twMerge(clsx("inline-flex items-center", gap.md), local.class);
 
   return (
     <div {...rest} data-date-range-picker class={getWrapperClass()} style={local.style}>

package/src/components/form-control/editor/EditorToolbar.tsx

@@ -177,7 +177,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
   };
 
   return (
-    <div class={twMerge(clsx("flex flex-wrap items-center", gap.sm, "border-b", border.default, pad.default), props.class)}>
+    <div class={twMerge(clsx("flex flex-wrap items-center", gap.sm, "border-b", border.default, pad.md), props.class)}>
       {renderToolbarItems(toolbarItemsBefore)}
 
       {/* Color pickers */}

package/src/components/form-control/editor/RichTextEditor.tsx

@@ -50,7 +50,7 @@ export interface RichTextEditorProps {
 
 // Editor content size-based style
 const editorContentSizeClasses: Record<FieldSize, string> = {
-  default: clsx(pad.xl, "min-h-32"),
+  md: clsx(pad.xl, "min-h-32"),
   xs: clsx(pad.xs, "min-h-12"),
   sm: clsx(pad.sm, "min-h-24"),
   lg: clsx(pad.lg, "min-h-48"),
@@ -154,7 +154,7 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
     );
 
   const getContentClass = () =>
-    twMerge("outline-none prose prose-sm max-w-none dark:prose-invert", editorContentSizeClasses[local.size ?? "default"]);
+    twMerge("outline-none prose prose-sm max-w-none dark:prose-invert", editorContentSizeClasses[local.size ?? "md"]);
 
   return (
     <div {...rest} data-rich-text-editor class={getWrapperClass()} style={local.style}>

package/src/components/form-control/field/Field.styles.ts

@@ -24,7 +24,7 @@ export const fieldBaseClass = clsx(
 
 // Size-specific styles
 export const fieldSizeClasses: Record<FieldSize, string> = {
-  default: clsx("h-field", pad.default),
+  md: clsx("h-field", pad.md),
   xs: clsx("h-field-xs", pad.xs),
   sm: clsx("h-field-sm", pad.sm),
   lg: clsx("h-field-lg", pad.lg),
@@ -42,7 +42,7 @@ export const fieldInsetClass = clsx(
 
 // Inset heights (excluding 2px border)
 export const fieldInsetSizeHeightClasses: Record<FieldSize, string> = {
-  default: clsx`h-field-inset`,
+  md: clsx`h-field-inset`,
   xs: clsx`h-field-inset-xs`,
   sm: clsx`h-field-inset-sm`,
   lg: clsx`h-field-inset-lg`,
@@ -57,7 +57,7 @@ export const textAreaBaseClass = clsx("inline-block w-48", fieldSurface);
 
 // Textarea size-specific styles (h-field-* removed)
 export const textAreaSizeClasses: Record<FieldSize, string> = {
-  default: pad.default,
+  md: pad.md,
   xs: pad.xs,
   sm: pad.sm,
   lg: pad.lg,
@@ -75,7 +75,7 @@ export const fieldInputClass = clsx(
 
 // Prefix icon gap classes (replaces nested ternary)
 export const fieldGapClasses: Record<FieldSize, string> = {
-  default: gap.default,
+  md: gap.md,
   xs: gap.xs,
   sm: gap.sm,
   lg: gap.lg,
@@ -93,10 +93,10 @@ export function getFieldWrapperClass(options: {
   return twMerge(
     fieldBaseClass,
     options.extra,
-    fieldSizeClasses[options.size ?? "default"],
+    fieldSizeClasses[options.size ?? "md"],
     options.disabled && fieldDisabledClass,
     options.inset && fieldInsetClass,
-    options.inset && fieldInsetSizeHeightClasses[options.size ?? "default"],
+    options.inset && fieldInsetSizeHeightClasses[options.size ?? "md"],
     options.includeCustomClass,
   );
 }
@@ -110,7 +110,7 @@ export function getTextareaWrapperClass(options: {
 }): string {
   return twMerge(
     textAreaBaseClass,
-    textAreaSizeClasses[options.size ?? "default"],
+    textAreaSizeClasses[options.size ?? "md"],
     options.disabled && fieldDisabledClass,
     options.inset && fieldInsetClass,
     options.includeCustomClass,

package/src/components/form-control/field/NumberInput.tsx

@@ -280,7 +280,7 @@ const NumberInputInner = (props: NumberInputProps): JSX.Element => {
       disabled: local.disabled,
       inset: local.inset,
       includeCustomClass: includeCustomClass && local.class,
-      extra: prefixEl() && fieldGapClasses[local.size ?? "default"],
+      extra: prefixEl() && fieldGapClasses[local.size ?? "md"],
     });
 
   const isEditable = () => !local.disabled && !local.readOnly;

package/src/components/form-control/field/TextInput.tsx

@@ -224,7 +224,7 @@ const TextInputInner = (props: TextInputProps) => {
       disabled: local.disabled,
       inset: local.inset,
       includeCustomClass: includeCustomClass && local.class,
-      extra: prefixEl() && fieldGapClasses[local.size ?? "default"],
+      extra: prefixEl() && fieldGapClasses[local.size ?? "md"],
     });
 
   // Whether editable

package/src/components/form-control/field/Textarea.tsx

@@ -165,7 +165,7 @@ export const Textarea: Component<TextareaProps> = (props) => {
     );
 
   const getTextareaClass = () =>
-    twMerge(textareaBaseClass, textAreaSizeClasses[local.size ?? "default"], local.inset && "p-0");
+    twMerge(textareaBaseClass, textAreaSizeClasses[local.size ?? "md"], local.inset && "p-0");
 
   // Whether editable
   const isEditable = () => !local.disabled && !local.readOnly;

package/src/components/form-control/numpad/Numpad.tsx

@@ -21,9 +21,9 @@ export interface NumpadProps {
   /** Disable direct text field input */
   inputDisabled?: boolean;
   /** Show Enter button */
-  useEnterButton?: boolean;
+  withEnterButton?: boolean;
   /** Show minus button */
-  useMinusButton?: boolean;
+  withMinusButton?: boolean;
   /** Enter button click callback */
   onEnterButtonClick?: () => void;
   /** Size */
@@ -132,7 +132,7 @@ export const Numpad: Component<NumpadProps> = (props) => {
   return (
     <div data-numpad class={twMerge(clsx("grid grid-cols-3", gap.sm, "w-auto"), props.class)} style={props.style}>
       {/* Row 1: NumberInput + optional ENT */}
-      <div class={clsx("flex", props.useEnterButton ? "col-span-2" : "col-span-3")}>
+      <div class={clsx("flex", props.withEnterButton ? "col-span-2" : "col-span-3")}>
         <NumberInput
           value={value()}
           onValueChange={handleFieldValueChange}
@@ -143,7 +143,7 @@ export const Numpad: Component<NumpadProps> = (props) => {
           useGrouping={false}
         />
       </div>
-      <Show when={props.useEnterButton}>
+      <Show when={props.withEnterButton}>
         <Button
           theme="primary"
           variant="solid"
@@ -157,7 +157,7 @@ export const Numpad: Component<NumpadProps> = (props) => {
       </Show>
 
       {/* Row 2: optional Minus + C + BS */}
-      <Show when={props.useMinusButton}>
+      <Show when={props.withMinusButton}>
         <Button size={buttonSize()} inset onClick={handleMinus}>
           -
         </Button>
@@ -166,7 +166,7 @@ export const Numpad: Component<NumpadProps> = (props) => {
         size={buttonSize()}
         inset
         onClick={handleClear}
-        class={clsx(props.useMinusButton ? "col-span-1" : "col-span-2", "text-danger-500")}
+        class={clsx(props.withMinusButton ? "col-span-1" : "col-span-2", "text-danger-500")}
       >
         <Icon icon={IconEraser} />
       </Button>

package/src/components/form-control/select/Select.tsx

@@ -649,7 +649,7 @@ const SelectInnerComponent = <TValue,>(props: SelectProps<TValue>) => {
             </Show>
             {/* Select all/deselect buttons */}
             <Show when={showSelectAllBar()}>
-              <div class={clsx("flex gap-2 border-b", border.subtle, pad.default, "text-xs")}>
+              <div class={clsx("flex gap-2 border-b", border.subtle, pad.md, "text-xs")}>
                 <button
                   type="button"
                   data-select-all

package/src/components/form-control/state-preset/StatePreset.tsx

@@ -34,7 +34,7 @@ export interface StatePresetProps<TValue> {
 // ── Style constants ──
 
 const chipSizeClasses: Record<StatePresetSize, string> = {
-  default: pad.default,
+  md: pad.md,
   xs: clsx(pad.xs, "text-sm"),
   sm: pad.sm,
   lg: pad.lg,
@@ -42,7 +42,7 @@ const chipSizeClasses: Record<StatePresetSize, string> = {
 };
 
 const iconBtnSizeClasses: Record<StatePresetSize, string> = {
-  default: "p-0.5",
+  md: "p-0.5",
   xs: "p-0",
   sm: "p-0.5",
   lg: "p-1",
@@ -50,7 +50,7 @@ const iconBtnSizeClasses: Record<StatePresetSize, string> = {
 };
 
 const starBtnSizeClasses: Record<StatePresetSize, string> = {
-  default: "p-1",
+  md: "p-1",
   xs: "p-0",
   sm: "p-0.5",
   lg: "p-1.5",
@@ -58,7 +58,7 @@ const starBtnSizeClasses: Record<StatePresetSize, string> = {
 };
 
 const inputSizeClasses: Record<StatePresetSize, string> = {
-  default: clsx(pad.default, "w-24"),
+  md: clsx(pad.md, "w-24"),
   xs: clsx("w-16", pad.xs, "text-sm"),
   sm: clsx(pad.sm, "w-20"),
   lg: clsx(pad.lg, "w-32"),
@@ -194,22 +194,22 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
   const containerClass = () => twMerge(clsx("inline-flex items-center", gap.lg, "flex-wrap"), local.class);
 
   const resolvedChipClass = () => twMerge(
-    clsx("inline-flex items-center", gap.default, "rounded-full", bg.subtle, text.default, "cursor-default"),
-    chipSizeClasses[local.size ?? "default"],
+    clsx("inline-flex items-center", gap.md, "rounded-full", bg.subtle, text.default, "cursor-default"),
+    chipSizeClasses[local.size ?? "md"],
   );
 
   const resolvedIconBtnClass = () =>
-    twMerge("rounded-full", iconBtnSizeClasses[local.size ?? "default"]);
+    twMerge("rounded-full", iconBtnSizeClasses[local.size ?? "md"]);
 
   const resolvedStarBtnClass = () =>
     twMerge(
       clsx("inline-flex cursor-pointer items-center justify-center rounded-full text-warning-500 transition-colors focus:outline-none", themeTokens.warning.hoverBg),
-      starBtnSizeClasses[local.size ?? "default"],
+      starBtnSizeClasses[local.size ?? "md"],
     );
 
   const resolvedInputClass = () => twMerge(
     clsx("rounded-full", bg.subtle, text.default, "border border-transparent focus:outline-none focus:ring-1 focus:ring-primary-400", text.placeholder),
-    inputSizeClasses[local.size ?? "default"],
+    inputSizeClasses[local.size ?? "md"],
   );
 
   return (