@simplysm/solid 13.0.75 → 13.0.77

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[];
@@ -12,26 +24,80 @@ interface CheckboxGroupProps<TValue> {
   inset?: boolean;
   required?: boolean;
   validate?: (value: TValue[]) => string | undefined;
-  touchMode?: boolean;
+  lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   children?: JSX.Element;
 }
 
-interface CheckboxGroupComponent {
-  <TValue = unknown>(props: CheckboxGroupProps<TValue>): JSX.Element;
-  Item: <TValue = unknown>(props: {
-    value: TValue;
-    disabled?: boolean;
-    children?: JSX.Element;
-  }) => 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}
+      lazyValidation={props.lazyValidation}
+      class={props.class}
+      style={props.style}
+    >
+      {props.children}
+    </SelectionGroupBase>
+  );
 }
 
-const { Group } = createSelectionGroup({
-  mode: "multiple",
-  contextName: "CheckboxGroup",
-  ItemComponent: Checkbox,
-  emptyErrorMsgKey: "validation.selectItem",
-});
+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);
+  };
 
-export const CheckboxGroup = Group as unknown as CheckboxGroupComponent;
+  return (
+    <Checkbox
+      value={isSelected()}
+      onValueChange={handleChange}
+      disabled={props.disabled ?? ctx.disabled()}
+      size={ctx.size()}
+      inline={ctx.inline()}
+      inset={ctx.inset()}
+    >
+      {props.children}
+    </Checkbox>
+  );
+}
+
+export const CheckboxGroup = Object.assign(CheckboxGroupInner, {
+  Item: CheckboxGroupItem,
+});

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;
@@ -31,89 +11,20 @@ export interface RadioProps {
   inline?: boolean;
   required?: boolean;
   validate?: (value: boolean) => string | undefined;
-  touchMode?: boolean;
+  lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   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;
@@ -12,26 +24,77 @@ interface RadioGroupProps<TValue> {
   inset?: boolean;
   required?: boolean;
   validate?: (value: TValue | undefined) => string | undefined;
-  touchMode?: boolean;
+  lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   children?: JSX.Element;
 }
 
-interface RadioGroupComponent {
-  <TValue = unknown>(props: RadioGroupProps<TValue>): JSX.Element;
-  Item: <TValue = unknown>(props: {
-    value: TValue;
-    disabled?: boolean;
-    children?: JSX.Element;
-  }) => 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}
+      lazyValidation={props.lazyValidation}
+      class={props.class}
+      style={props.style}
+    >
+      {props.children}
+    </SelectionGroupBase>
+  );
 }
 
-const { Group } = createSelectionGroup({
-  mode: "single",
-  contextName: "RadioGroup",
-  ItemComponent: Radio,
-  emptyErrorMsgKey: "validation.selectItem",
-});
+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);
+  };
 
-export const RadioGroup = Group as unknown as RadioGroupComponent;
+  return (
+    <Radio
+      value={isSelected()}
+      onValueChange={handleChange}
+      disabled={props.disabled ?? ctx.disabled()}
+      size={ctx.size()}
+      inline={ctx.inline()}
+      inset={ctx.inset()}
+    >
+      {props.children}
+    </Radio>
+  );
+}
+
+export const RadioGroup = Object.assign(RadioGroupInner, {
+  Item: RadioGroupItem,
+});

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

@@ -0,0 +1,123 @@
+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 { useI18n } from "../../../providers/i18n/I18nProvider";
+import {
+  type CheckboxSize,
+  checkboxBaseClass,
+  indicatorBaseClass,
+  checkedClass,
+  checkboxSizeClasses,
+  checkboxInsetClass,
+  checkboxInsetSizeHeightClasses,
+  checkboxInlineClass,
+  checkboxDisabledClass,
+} from "./Checkbox.styles";
+import { Invalid } from "../Invalid";
+
+void ripple;
+
+export interface SelectableBaseProps {
+  value?: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  inset?: boolean;
+  inline?: boolean;
+  required?: boolean;
+  validate?: (value: boolean) => string | undefined;
+  lazyValidation?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+
+export interface SelectableBaseConfig {
+  role: "checkbox" | "radio";
+  indicatorShape: string;
+  indicatorContent: JSX.Element;
+  onToggle: (current: boolean) => boolean;
+}
+
+export const SelectableBase: ParentComponent<SelectableBaseProps & { config: SelectableBaseConfig }> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "disabled",
+    "size",
+    "inset",
+    "inline",
+    "required",
+    "validate",
+    "lazyValidation",
+    "class",
+    "style",
+    "children",
+    "config",
+  ]);
+
+  const i18n = useI18n();
+
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value ?? false,
+    onChange: () => local.onValueChange,
+  });
+
+  const handleClick = () => {
+    if (local.disabled) return;
+    setValue((v) => local.config.onToggle(v));
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === " ") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  const getWrapperClass = () =>
+    twMerge(
+      checkboxBaseClass,
+      checkboxSizeClasses[local.size ?? "default"],
+      local.inset && checkboxInsetClass,
+      local.inset && checkboxInsetSizeHeightClasses[local.size ?? "default"],
+      local.inline && checkboxInlineClass,
+      local.disabled && checkboxDisabledClass,
+      local.class,
+    );
+
+  const getIndicatorClass = () =>
+    twMerge(indicatorBaseClass, local.config.indicatorShape, 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" lazyValidation={local.lazyValidation}>
+      <div
+        {...rest}
+        use:ripple={!local.disabled}
+        role={local.config.role}
+        aria-checked={value()}
+        tabIndex={local.disabled ? -1 : 0}
+        class={getWrapperClass()}
+        style={local.style}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      >
+        <div class={getIndicatorClass()}>
+          <Show when={value()}>
+            {local.config.indicatorContent}
+          </Show>
+        </div>
+        <Show when={local.children}>
+          <span>{local.children}</span>
+        </Show>
+      </div>
+    </Invalid>
+  );
+};

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

@@ -0,0 +1,57 @@
+import {
+  type Context,
+  type JSX,
+  createMemo,
+  splitProps,
+} from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { Invalid } from "../Invalid";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
+
+export interface SelectionGroupBaseProps {
+  required?: boolean;
+  lazyValidation?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+
+export function SelectionGroupBase<TContextValue>(props: SelectionGroupBaseProps & {
+  context: Context<TContextValue | undefined>;
+  contextValue: TContextValue;
+  errorMsgKey: string;
+  value: unknown;
+  isEmpty: (value: unknown) => boolean;
+  validate?: ((value: any) => string | undefined) | undefined;
+}) {
+  const i18n = useI18n();
+  const resolvedErrorMsg = () => i18n.t(props.errorMsgKey);
+  const [local, rest] = splitProps(props, [
+    "context",
+    "contextValue",
+    "errorMsgKey",
+    "value",
+    "isEmpty",
+    "validate",
+    "required",
+    "lazyValidation",
+    "class",
+    "style",
+    "children",
+  ]);
+
+  const errorMsg = createMemo(() => {
+    if (local.required && local.isEmpty(local.value)) return resolvedErrorMsg();
+    return local.validate?.(local.value);
+  });
+
+  return (
+    <Invalid message={errorMsg()} variant="dot" lazyValidation={local.lazyValidation}>
+      <local.context.Provider value={local.contextValue}>
+        <div {...rest} class={twMerge("inline-flex", local.class)} style={local.style}>
+          {local.children}
+        </div>
+      </local.context.Provider>
+    </Invalid>
+  );
+}

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

@@ -3,40 +3,18 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { Invalid } from "../Invalid";
-import { type ComponentSize } from "../../../styles/tokens.styles";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-
-// Base style
-const baseClass = clsx(
-  "size-field",
-  "rounded",
-  "border border-black/10 dark:border-white/10",
-  "cursor-pointer",
-  // Remove color input default styles
-  "[&::-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",
-);
+import { type ComponentSize } from "../../../styles/control.styles";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 // Size-specific styles
 const sizeClasses: Record<ComponentSize, string> = {
+  default: clsx`size-field`,
   xs: "size-field-xs",
   sm: "size-field-sm",
   lg: "size-field-lg",
   xl: "size-field-xl",
 };
 
-// Disabled style - shown as diagonal stripes
-// eslint-disable-next-line tailwindcss/enforces-shorthand
-const disabledClass = clsx(
-  "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%)]",
-);
-
 export interface ColorPickerProps {
   /** Color value (#RRGGBB format) */
   value?: string;
@@ -62,8 +40,8 @@ export interface ColorPickerProps {
   /** Custom validation function */
   validate?: (value: string | undefined) => string | undefined;
 
-  /** touchMode: show errors only after blur */
-  touchMode?: boolean;
+  /** lazyValidation: show errors only after blur */
+  lazyValidation?: boolean;
 
   /** Custom class */
   class?: string;
@@ -90,7 +68,7 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
     "inset",
     "required",
     "validate",
-    "touchMode",
+    "lazyValidation",
     "class",
     "style",
   ]);
@@ -108,9 +86,11 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
 
   const getClassName = () =>
     twMerge(
-      baseClass,
-      local.size && sizeClasses[local.size],
-      local.disabled && disabledClass,
+       
+      "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"],
+       
+      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,
     );
 
@@ -124,7 +104,7 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
     <Invalid
       variant={local.inset ? "dot" : "border"}
       message={errorMsg()}
-      touchMode={local.touchMode}
+      lazyValidation={local.lazyValidation}
     >
       <input
         {...rest}