@simplysm/solid 13.0.75 → 13.0.77

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

@@ -2,12 +2,8 @@ import { type JSX, type ParentComponent, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ripple } from "../../directives/ripple";
-import {
-  themeTokens,
-  type SemanticTheme,
-  type ComponentSize,
-  disabledOpacity,
-} from "../../styles/tokens.styles";
+import { type ComponentSize, state, pad } from "../../styles/control.styles";
+import { themeTokens, type SemanticTheme } from "../../styles/theme.styles";
 
 // Directive usage declaration (for TypeScript)
 void ripple;
@@ -16,37 +12,23 @@ type ButtonTheme = SemanticTheme;
 type ButtonVariant = "solid" | "outline" | "ghost";
 type ButtonSize = ComponentSize;
 
-const baseClass = clsx(
-  "inline-flex items-center",
-  "px-2 py-1",
-  "font-bold",
-  "justify-center",
-  "text-center",
-  "cursor-pointer",
-  "transition",
-  "rounded",
-  "focus:outline-none",
-  "focus-visible:ring-2",
-  "border border-transparent",
-  "min-w-8",
-);
-
 const themeClasses = Object.fromEntries(
   Object.entries(themeTokens).map(([theme, t]) => [
     theme,
     {
       solid: clsx(t.solid, t.solidHover /*, "shadow-md hover:shadow-lg"*/),
       outline: clsx("bg-transparent", t.hoverBg, t.text, t.border),
-      ghost: clsx("bg-transparent", `hover:bg-base-100 dark:hover:bg-base-800/30`, t.text),
+      ghost: clsx("bg-transparent", t.hoverBg, t.text),
     },
   ]),
 ) as Record<ButtonTheme, Record<ButtonVariant, string>>;
 
 const sizeClasses: Record<ButtonSize, string> = {
-  xs: clsx("min-w-4 px-0.5 py-0"),
-  sm: clsx("min-w-6 px-1 py-0.5"),
-  lg: clsx("min-w-9 px-3 py-1.5"),
-  xl: clsx("min-w-10 px-4 py-2 text-lg"),
+  default: clsx("min-w-8", pad.default),
+  xs: clsx("min-w-4", pad.xs),
+  sm: clsx("min-w-6", pad.sm),
+  lg: clsx("min-w-9", pad.lg),
+  xl: clsx("min-w-10", pad.xl, "text-lg"),
 };
 
 export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -73,11 +55,11 @@ export const Button: ParentComponent<ButtonProps> = (props) => {
     const variant = local.variant ?? "outline";
 
     return twMerge(
-      baseClass,
+      "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],
-      local.size && sizeClasses[local.size],
+      sizeClasses[local.size ?? "default"],
       local.inset && "rounded-none border-none",
-      local.disabled && disabledOpacity,
+      local.disabled && state.disabled,
       local.class,
     );
   };

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/Invalid.tsx

@@ -1,4 +1,4 @@
-import { children, createEffect, createSignal, onCleanup, type ParentComponent } from "solid-js";
+import { children, createEffect, createMemo, createSignal, onCleanup, type ParentComponent } from "solid-js";
 import clsx from "clsx";
 import "@simplysm/core-browser";
 
@@ -8,7 +8,7 @@ export interface InvalidProps {
   /** Visual indicator variant */
   variant?: "border" | "dot";
   /** When true, visual display only appears after target loses focus */
-  touchMode?: boolean;
+  lazyValidation?: boolean;
 }
 
 export const Invalid: ParentComponent<InvalidProps> = (props) => {
@@ -27,7 +27,11 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
 
   const resolved = children(() => props.children);
 
-  // Reactively update setCustomValidity when message changes (always, regardless of touchMode)
+  const targetEl = createMemo(() =>
+    resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement),
+  );
+
+  // Reactively update setCustomValidity when message changes (always, regardless of lazyValidation)
   createEffect(() => {
     const msg = props.message ?? "";
     hiddenInputEl.setCustomValidity(msg);
@@ -35,19 +39,19 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
 
   // Set target to relative + insert hidden input inside target
   createEffect(() => {
-    const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
-    if (!targetEl) return;
+    const el = targetEl();
+    if (!el) return;
 
-    const computedPosition = getComputedStyle(targetEl).position;
+    const computedPosition = getComputedStyle(el).position;
     if (computedPosition === "static") {
-      targetEl.style.position = "relative";
+      el.style.position = "relative";
     }
 
-    targetEl.appendChild(hiddenInputEl);
+    el.appendChild(hiddenInputEl);
 
     onCleanup(() => {
-      if (hiddenInputEl.parentElement === targetEl) {
-        targetEl.removeChild(hiddenInputEl);
+      if (hiddenInputEl.parentElement === el) {
+        el.removeChild(hiddenInputEl);
       }
     });
   });
@@ -56,28 +60,28 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
   createEffect(() => {
     const variant = props.variant ?? "dot";
     const message = props.message ?? "";
-    const touchMode = props.touchMode ?? false;
+    const lazyValidation = props.lazyValidation ?? false;
     const isTouched = touched();
 
-    const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
+    const el = targetEl();
 
-    if (!targetEl) return;
+    if (!el) return;
 
-    const shouldShow = message !== "" && (!touchMode || isTouched);
+    const shouldShow = message !== "" && (!lazyValidation || isTouched);
 
     if (variant === "border") {
       if (shouldShow) {
-        targetEl.classList.add("border-danger-500");
+        el.classList.add("border-danger-500");
       } else {
-        targetEl.classList.remove("border-danger-500");
+        el.classList.remove("border-danger-500");
       }
 
       onCleanup(() => {
-        targetEl.classList.remove("border-danger-500");
+        el.classList.remove("border-danger-500");
       });
     } else {
       // variant === "dot"
-      const existingDot = targetEl.querySelector("[data-invalid-dot]");
+      const existingDot = el.querySelector("[data-invalid-dot]");
       if (existingDot) {
         existingDot.remove();
       }
@@ -90,11 +94,11 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
           "size-1.5 rounded-full",
           "pointer-events-none bg-danger-500",
         );
-        targetEl.appendChild(dot);
+        el.appendChild(dot);
       }
 
       onCleanup(() => {
-        const dot = targetEl.querySelector("[data-invalid-dot]");
+        const dot = el.querySelector("[data-invalid-dot]");
         if (dot) {
           dot.remove();
         }
@@ -102,32 +106,32 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
     }
   });
 
-  // touchMode: register focusout event on target to track touched state
+  // lazyValidation: register focusout event on target to track touched state
   createEffect(() => {
-    if (!(props.touchMode ?? false)) return;
+    if (!(props.lazyValidation ?? false)) return;
 
-    const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
+    const el = targetEl();
 
-    if (!targetEl) return;
+    if (!el) return;
 
     const handleFocusOut = () => {
       setTouched(true);
     };
 
-    targetEl.addEventListener("focusout", handleFocusOut);
+    el.addEventListener("focusout", handleFocusOut);
 
     onCleanup(() => {
-      targetEl.removeEventListener("focusout", handleFocusOut);
+      el.removeEventListener("focusout", handleFocusOut);
     });
   });
 
   // Redirect hidden input focus to focusable child of target
   hiddenInputEl.addEventListener("focus", () => {
-    const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
+    const el = targetEl();
 
-    if (targetEl) {
+    if (el) {
       const focusable =
-        targetEl.findFirstFocusableChild() ?? (targetEl.tabIndex >= 0 ? targetEl : undefined);
+        el.findFirstFocusableChild() ?? (el.tabIndex >= 0 ? el : undefined);
       if (focusable && focusable !== hiddenInputEl) {
         focusable.focus();
       }

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;
@@ -30,89 +13,20 @@ export interface CheckboxProps {
   inline?: boolean;
   required?: boolean;
   validate?: (value: boolean) => string | undefined;
-  touchMode?: boolean;
+  lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   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,
+    }}
+  />
+);