@simplysm/solid 13.0.74 → 13.0.76

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

@@ -1,20 +1,13 @@
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import {
-  borderDefault,
-  type ComponentSize,
-  paddingLg,
-  paddingSm,
-  paddingXl,
-  paddingXs,
-} from "../../styles/tokens.styles";
-import { insetBase, insetFocusOutlineSelf } from "../../styles/patterns.styles";
+import { border } from "../../styles/base.styles";
+import { type ComponentSize, gap, pad } from "../../styles/control.styles";
 
 export const triggerBaseClass = clsx(
   "inline-flex items-center gap-2",
   "w-40",
   "border",
-  borderDefault,
+  border.default,
   "rounded",
   "bg-transparent",
   "hover:bg-base-100 dark:hover:bg-base-700",
@@ -27,13 +20,20 @@ export const triggerDisabledClass = clsx(
   "cursor-default bg-base-200 text-base-400 dark:bg-base-800 dark:text-base-500",
 );
 
-export const triggerInsetClass = clsx(insetBase, "bg-transparent", insetFocusOutlineSelf);
+export const triggerInsetClass = clsx(
+  "w-full rounded-none border-none",
+  "bg-transparent",
+  "focus:[outline-style:solid]",
+  "focus:outline-1 focus:-outline-offset-1",
+  "focus:outline-primary-400 dark:focus:outline-primary-400",
+);
 
 export const triggerSizeClasses: Record<ComponentSize, string> = {
-  xs: clsx("gap-0.5", paddingXs),
-  sm: clsx("gap-1.5", paddingSm),
-  lg: clsx("gap-3", paddingLg),
-  xl: clsx("gap-3.5", paddingXl),
+  default: clsx(gap.default, pad.default),
+  xs: clsx(gap.xs, pad.xs),
+  sm: clsx(gap.sm, pad.sm),
+  lg: clsx(gap.lg, pad.lg),
+  xl: clsx(gap.xl, pad.xl),
 };
 
 export const chevronWrapperClass = clsx("opacity-30", "hover:opacity-100");
@@ -47,8 +47,7 @@ export function getTriggerClass(options: {
 }): string {
   return twMerge(
     triggerBaseClass,
-    "px-2 py-1",
-    options.size && triggerSizeClasses[options.size],
+    triggerSizeClasses[options.size ?? "default"],
     options.disabled && triggerDisabledClass,
     options.inset && triggerInsetClass,
     options.class,

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

@@ -3,20 +3,24 @@ import { twMerge } from "tailwind-merge";
 import { IconSun, IconMoon, IconDeviceDesktop } from "@tabler/icons-solidjs";
 import { useTheme, type ThemeMode } from "../../providers/ThemeContext";
 import { Icon } from "../display/Icon";
-import { ripple } from "../../directives/ripple";
-import { iconButtonBase } from "../../styles/patterns.styles";
-import { useI18n } from "../../providers/i18n/I18nContext";
+import { Button } from "./Button";
+import { useI18n } from "../../providers/i18n/I18nProvider";
+import { type ComponentSize } from "../../styles/control.styles";
 
-void ripple;
-
-const sizeClasses: Record<"sm" | "lg", string> = {
+const sizeClasses: Record<ComponentSize, string> = {
+  default: "p-1.5",
+  xs: "p-0.5",
   sm: "p-1",
   lg: "p-2",
+  xl: "p-2.5",
 };
 
-const iconSizes: Record<"sm" | "lg", string> = {
+const iconSizes: Record<ComponentSize, string> = {
+  default: "1.25em",
+  xs: "0.75em",
   sm: "1em",
   lg: "1.5em",
+  xl: "2em",
 };
 
 const modeLabelKeys: Record<ThemeMode, string> = {
@@ -30,7 +34,7 @@ export interface ThemeToggleProps extends Omit<
   "children"
 > {
   /** Button size */
-  size?: "sm" | "lg";
+  size?: ComponentSize;
 }
 
 /**
@@ -59,17 +63,16 @@ export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
 
   const modeLabel = () => i18n.t(modeLabelKeys[mode()]);
 
-  const getClassName = () =>
-    twMerge(iconButtonBase, "p-1.5", local.size && sizeClasses[local.size], local.class);
+  const getClassName = () => twMerge(sizeClasses[local.size ?? "default"], local.class);
 
-  const iconSize = () => (local.size ? iconSizes[local.size] : "1.25em");
+  const iconSize = () => iconSizes[local.size ?? "default"];
 
   return (
-    <button
+    <Button
       {...rest}
+      variant="ghost"
+      size="xs"
       data-theme-toggle
-      use:ripple
-      type="button"
       class={getClassName()}
       onClick={cycleMode}
       title={modeLabel()}
@@ -86,6 +89,6 @@ export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
           <Icon icon={IconMoon} size={iconSize()} />
         </Match>
       </Switch>
-    </button>
+    </Button>
   );
 };

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

@@ -1,14 +1,6 @@
 import clsx from "clsx";
-import {
-  borderDefault,
-  type ComponentSize,
-  disabledOpacity,
-  paddingLg,
-  paddingSm,
-  paddingXl,
-  paddingXs,
-} from "../../../styles/tokens.styles";
-import { insetBase, insetFocusOutlineSelf } from "../../../styles/patterns.styles";
+import { border } from "../../../styles/base.styles";
+import { type ComponentSize, state, gap, pad } from "../../../styles/control.styles";
 
 export type CheckboxSize = ComponentSize;
 
@@ -17,8 +9,6 @@ export const checkboxBaseClass = clsx(
   "inline-flex items-center gap-2",
   "whitespace-nowrap",
   "cursor-pointer",
-  "px-2 py-1",
-  "h-field",
   "border border-transparent",
   "rounded",
   "focus:outline-none",
@@ -30,8 +20,8 @@ export const indicatorBaseClass = clsx(
   "flex shrink-0 items-center justify-center",
   "size-4",
   "border",
-  borderDefault,
-  // bgSurface,
+  border.default,
+  // bg.surface,
   "bg-primary-50 dark:bg-primary-950/30",
   "transition-colors",
 );
@@ -41,29 +31,33 @@ export const checkedClass = clsx("border-primary-500 bg-primary-500", "text-whit
 
 // Size-specific styles
 export const checkboxSizeClasses: Record<CheckboxSize, string> = {
-  xs: clsx("h-field-xs", paddingXs),
-  sm: clsx("h-field-sm", paddingSm),
-  lg: clsx("h-field-lg", paddingLg),
-  xl: clsx("h-field-xl", paddingXl),
+  default: clsx("h-field", pad.default),
+  xs: clsx("h-field-xs", pad.xs),
+  sm: clsx("h-field-sm", pad.sm),
+  lg: clsx("h-field-lg", pad.lg),
+  xl: clsx("h-field-xl", pad.xl),
 };
 
 // Inset styles
 export const checkboxInsetClass = clsx(
+  "w-full rounded-none border-none",
   "h-field-inset justify-center bg-transparent",
-  insetBase,
-  insetFocusOutlineSelf,
+  "focus:[outline-style:solid]",
+  "focus:outline-1 focus:-outline-offset-1",
+  "focus:outline-primary-400 dark:focus:outline-primary-400",
 );
 
 // Inset size-specific heights (excluding 2px border)
 export const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string> = {
-  xs: "h-field-inset-xs",
-  sm: "h-field-inset-sm",
-  lg: "h-field-inset-lg",
-  xl: "h-field-inset-xl",
+  default: clsx`h-field-inset`,
+  xs: clsx`h-field-inset-xs`,
+  sm: clsx`h-field-inset-sm`,
+  lg: clsx`h-field-inset-lg`,
+  xl: clsx`h-field-inset-xl`,
 };
 
 // Inline styles
-export const checkboxInlineClass = clsx("!h-auto", "!p-0", "gap-1");
+export const checkboxInlineClass = clsx("!h-auto", "!p-0", gap.default);
 
 // Disabled styles
-export const checkboxDisabledClass = disabledOpacity;
+export const checkboxDisabledClass = clsx(state.disabled);

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

@@ -1,25 +1,8 @@
-import { type JSX, type ParentComponent, Show, splitProps, createMemo } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { type JSX, type ParentComponent } from "solid-js";
 import { IconCheck } from "@tabler/icons-solidjs";
-import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { ripple } from "../../../directives/ripple";
+import type { CheckboxSize } from "./Checkbox.styles";
 import { Icon } from "../../display/Icon";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-import {
-  type CheckboxSize,
-  checkboxBaseClass,
-  indicatorBaseClass,
-  checkedClass,
-  checkboxSizeClasses,
-  checkboxInsetClass,
-  checkboxInsetSizeHeightClasses,
-  checkboxInlineClass,
-  checkboxDisabledClass,
-} from "./Checkbox.styles";
-import { Invalid } from "../Invalid";
-
-// Directive usage declaration (for TypeScript)
-void ripple;
+import { SelectableBase } from "./SelectableBase";
 
 export interface CheckboxProps {
   value?: boolean;
@@ -36,83 +19,14 @@ export interface CheckboxProps {
   children?: JSX.Element;
 }
 
-export const Checkbox: ParentComponent<CheckboxProps> = (props) => {
-  const [local, rest] = splitProps(props, [
-    "value",
-    "onValueChange",
-    "disabled",
-    "size",
-    "inset",
-    "inline",
-    "required",
-    "validate",
-    "touchMode",
-    "class",
-    "style",
-    "children",
-  ]);
-
-  const i18n = useI18n();
-
-  const [value, setValue] = createControllableSignal({
-    value: () => local.value ?? false,
-    onChange: () => local.onValueChange,
-  });
-
-  const handleClick = () => {
-    if (local.disabled) return;
-    setValue((v) => !v);
-  };
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === " ") {
-      e.preventDefault();
-      handleClick();
-    }
-  };
-
-  const getWrapperClass = () =>
-    twMerge(
-      checkboxBaseClass,
-      local.size && checkboxSizeClasses[local.size],
-      local.inset && checkboxInsetClass,
-      local.inset && local.size && checkboxInsetSizeHeightClasses[local.size],
-      local.inline && checkboxInlineClass,
-      local.disabled && checkboxDisabledClass,
-      local.class,
-    );
-
-  const getIndicatorClass = () =>
-    twMerge(indicatorBaseClass, "rounded-sm", value() && checkedClass);
-
-  const errorMsg = createMemo(() => {
-    const v = local.value ?? false;
-    if (local.required && !v) return i18n.t("validation.requiredSelection");
-    return local.validate?.(v);
-  });
-
-  return (
-    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
-      <div
-        {...rest}
-        use:ripple={!local.disabled}
-        role="checkbox"
-        aria-checked={value()}
-        tabIndex={local.disabled ? -1 : 0}
-        class={getWrapperClass()}
-        style={local.style}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-      >
-        <div class={getIndicatorClass()}>
-          <Show when={value()}>
-            <Icon icon={IconCheck} size="1em" />
-          </Show>
-        </div>
-        <Show when={local.children}>
-          <span>{local.children}</span>
-        </Show>
-      </div>
-    </Invalid>
-  );
-};
+export const Checkbox: ParentComponent<CheckboxProps> = (props) => (
+  <SelectableBase
+    {...props}
+    config={{
+      role: "checkbox",
+      indicatorShape: "rounded-sm",
+      indicatorContent: <Icon icon={IconCheck} size="1em" />,
+      onToggle: (v) => !v,
+    }}
+  />
+);

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

@@ -1,7 +1,19 @@
-import { type JSX } from "solid-js";
+import { type JSX, createContext, useContext } from "solid-js";
 import { Checkbox } from "./Checkbox";
-import { createSelectionGroup } from "../../../hooks/createSelectionGroup";
 import type { CheckboxSize } from "./Checkbox.styles";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { SelectionGroupBase } from "./SelectionGroupBase";
+
+interface CheckboxGroupContext<TValue = unknown> {
+  value: () => readonly TValue[];
+  toggle: (item: TValue) => void;
+  disabled: () => boolean;
+  size: () => CheckboxSize | undefined;
+  inline: () => boolean;
+  inset: () => boolean;
+}
+
+const CheckboxGroupCtx = createContext<CheckboxGroupContext<any>>();
 
 interface CheckboxGroupProps<TValue> {
   value?: TValue[];
@@ -18,6 +30,74 @@ interface CheckboxGroupProps<TValue> {
   children?: JSX.Element;
 }
 
+function CheckboxGroupInner<TValue = unknown>(props: CheckboxGroupProps<TValue>): JSX.Element {
+  const [value, setValue] = createControllableSignal({
+    value: () => props.value ?? ([] as TValue[]),
+    onChange: () => props.onValueChange,
+  });
+
+  const toggle = (item: TValue) => {
+    setValue((prev) => {
+      if (prev.includes(item)) return prev.filter((v) => v !== item);
+      return [...prev, item];
+    });
+  };
+
+  const contextValue: CheckboxGroupContext<TValue> = {
+    value,
+    toggle,
+    disabled: () => props.disabled ?? false,
+    size: () => props.size,
+    inline: () => props.inline ?? false,
+    inset: () => props.inset ?? false,
+  };
+
+  return (
+    <SelectionGroupBase
+      context={CheckboxGroupCtx}
+      contextValue={contextValue}
+      errorMsgKey="validation.selectItem"
+      value={props.value ?? []}
+      isEmpty={(v) => (v as unknown[]).length === 0}
+      validate={props.validate as ((value: any) => string | undefined) | undefined}
+      required={props.required}
+      touchMode={props.touchMode}
+      class={props.class}
+      style={props.style}
+    >
+      {props.children}
+    </SelectionGroupBase>
+  );
+}
+
+function CheckboxGroupItem<TValue = unknown>(props: {
+  value: TValue;
+  disabled?: boolean;
+  children?: JSX.Element;
+}): JSX.Element {
+  const ctx = useContext(CheckboxGroupCtx) as CheckboxGroupContext<TValue> | undefined;
+  if (!ctx) throw new Error("CheckboxGroup.Item can only be used inside CheckboxGroup");
+
+  const isSelected = () => ctx.value().includes(props.value);
+
+  const handleChange = () => {
+    ctx.toggle(props.value);
+  };
+
+  return (
+    <Checkbox
+      value={isSelected()}
+      onValueChange={handleChange}
+      disabled={props.disabled ?? ctx.disabled()}
+      size={ctx.size()}
+      inline={ctx.inline()}
+      inset={ctx.inset()}
+    >
+      {props.children}
+    </Checkbox>
+  );
+}
+
 interface CheckboxGroupComponent {
   <TValue = unknown>(props: CheckboxGroupProps<TValue>): JSX.Element;
   Item: <TValue = unknown>(props: {
@@ -27,11 +107,6 @@ interface CheckboxGroupComponent {
   }) => JSX.Element;
 }
 
-const { Group } = createSelectionGroup({
-  mode: "multiple",
-  contextName: "CheckboxGroup",
-  ItemComponent: Checkbox,
-  emptyErrorMsgKey: "validation.selectItem",
-});
-
-export const CheckboxGroup = Group as unknown as CheckboxGroupComponent;
+export const CheckboxGroup = Object.assign(CheckboxGroupInner, {
+  Item: CheckboxGroupItem,
+}) as CheckboxGroupComponent;

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

@@ -1,26 +1,6 @@
-import { type JSX, type ParentComponent, Show, splitProps, createMemo } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { ripple } from "../../../directives/ripple";
-import clsx from "clsx";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-import {
-  type CheckboxSize,
-  checkboxBaseClass,
-  indicatorBaseClass,
-  checkedClass,
-  checkboxSizeClasses,
-  checkboxInsetClass,
-  checkboxInsetSizeHeightClasses,
-  checkboxInlineClass,
-  checkboxDisabledClass,
-} from "./Checkbox.styles";
-import { Invalid } from "../Invalid";
-
-const radioDotClass = clsx("size-2", "rounded-full", "bg-current");
-
-// Directive usage declaration (for TypeScript)
-void ripple;
+import { type JSX, type ParentComponent } from "solid-js";
+import type { CheckboxSize } from "./Checkbox.styles";
+import { SelectableBase } from "./SelectableBase";
 
 export interface RadioProps {
   value?: boolean;
@@ -37,83 +17,14 @@ export interface RadioProps {
   children?: JSX.Element;
 }
 
-export const Radio: ParentComponent<RadioProps> = (props) => {
-  const [local, rest] = splitProps(props, [
-    "value",
-    "onValueChange",
-    "disabled",
-    "size",
-    "inset",
-    "inline",
-    "required",
-    "validate",
-    "touchMode",
-    "class",
-    "style",
-    "children",
-  ]);
-
-  const i18n = useI18n();
-
-  const [value, setValue] = createControllableSignal({
-    value: () => local.value ?? false,
-    onChange: () => local.onValueChange,
-  });
-
-  const handleClick = () => {
-    if (local.disabled) return;
-    setValue(true);
-  };
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === " ") {
-      e.preventDefault();
-      handleClick();
-    }
-  };
-
-  const getWrapperClass = () =>
-    twMerge(
-      checkboxBaseClass,
-      local.size && checkboxSizeClasses[local.size],
-      local.inset && checkboxInsetClass,
-      local.inset && local.size && checkboxInsetSizeHeightClasses[local.size],
-      local.inline && checkboxInlineClass,
-      local.disabled && checkboxDisabledClass,
-      local.class,
-    );
-
-  const getIndicatorClass = () =>
-    twMerge(indicatorBaseClass, "rounded-full", value() && checkedClass);
-
-  const errorMsg = createMemo(() => {
-    const v = local.value ?? false;
-    if (local.required && !v) return i18n.t("validation.requiredSelection");
-    return local.validate?.(v);
-  });
-
-  return (
-    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
-      <div
-        {...rest}
-        use:ripple={!local.disabled}
-        role="radio"
-        aria-checked={value()}
-        tabIndex={local.disabled ? -1 : 0}
-        class={getWrapperClass()}
-        style={local.style}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-      >
-        <div class={getIndicatorClass()}>
-          <Show when={value()}>
-            <div class={radioDotClass} />
-          </Show>
-        </div>
-        <Show when={local.children}>
-          <span>{local.children}</span>
-        </Show>
-      </div>
-    </Invalid>
-  );
-};
+export const Radio: ParentComponent<RadioProps> = (props) => (
+  <SelectableBase
+    {...props}
+    config={{
+      role: "radio",
+      indicatorShape: "rounded-full",
+      indicatorContent: <div class="size-2 rounded-full bg-current" />,
+      onToggle: () => true,
+    }}
+  />
+);

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

@@ -1,7 +1,19 @@
-import { type JSX } from "solid-js";
+import { type JSX, createContext, useContext } from "solid-js";
 import { Radio } from "./Radio";
-import { createSelectionGroup } from "../../../hooks/createSelectionGroup";
 import type { CheckboxSize } from "./Checkbox.styles";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { SelectionGroupBase } from "./SelectionGroupBase";
+
+interface RadioGroupContext {
+  value: () => unknown | undefined;
+  select: (item: unknown) => void;
+  disabled: () => boolean;
+  size: () => CheckboxSize | undefined;
+  inline: () => boolean;
+  inset: () => boolean;
+}
+
+const RadioGroupCtx = createContext<RadioGroupContext>();
 
 interface RadioGroupProps<TValue> {
   value?: TValue;
@@ -18,6 +30,71 @@ interface RadioGroupProps<TValue> {
   children?: JSX.Element;
 }
 
+function RadioGroupInner<TValue = unknown>(props: RadioGroupProps<TValue>): JSX.Element {
+  const [value, setValue] = createControllableSignal<unknown>({
+    value: () => props.value as unknown,
+    onChange: () => props.onValueChange as ((v: unknown) => void) | undefined,
+  });
+
+  const select = (item: unknown) => {
+    setValue(item);
+  };
+
+  const contextValue: RadioGroupContext = {
+    value,
+    select,
+    disabled: () => props.disabled ?? false,
+    size: () => props.size,
+    inline: () => props.inline ?? false,
+    inset: () => props.inset ?? false,
+  };
+
+  return (
+    <SelectionGroupBase
+      context={RadioGroupCtx}
+      contextValue={contextValue}
+      errorMsgKey="validation.selectItem"
+      value={props.value}
+      isEmpty={(v) => v === undefined || v === null}
+      validate={props.validate as ((value: any) => string | undefined) | undefined}
+      required={props.required}
+      touchMode={props.touchMode}
+      class={props.class}
+      style={props.style}
+    >
+      {props.children}
+    </SelectionGroupBase>
+  );
+}
+
+function RadioGroupItem<TValue = unknown>(props: {
+  value: TValue;
+  disabled?: boolean;
+  children?: JSX.Element;
+}): JSX.Element {
+  const ctx = useContext(RadioGroupCtx);
+  if (!ctx) throw new Error("RadioGroup.Item can only be used inside RadioGroup");
+
+  const isSelected = () => ctx.value() === props.value;
+
+  const handleChange = () => {
+    ctx.select(props.value);
+  };
+
+  return (
+    <Radio
+      value={isSelected()}
+      onValueChange={handleChange}
+      disabled={props.disabled ?? ctx.disabled()}
+      size={ctx.size()}
+      inline={ctx.inline()}
+      inset={ctx.inset()}
+    >
+      {props.children}
+    </Radio>
+  );
+}
+
 interface RadioGroupComponent {
   <TValue = unknown>(props: RadioGroupProps<TValue>): JSX.Element;
   Item: <TValue = unknown>(props: {
@@ -27,11 +104,6 @@ interface RadioGroupComponent {
   }) => JSX.Element;
 }
 
-const { Group } = createSelectionGroup({
-  mode: "single",
-  contextName: "RadioGroup",
-  ItemComponent: Radio,
-  emptyErrorMsgKey: "validation.selectItem",
-});
-
-export const RadioGroup = Group as unknown as RadioGroupComponent;
+export const RadioGroup = Object.assign(RadioGroupInner, {
+  Item: RadioGroupItem,
+}) as RadioGroupComponent;