@simplysm/solid 13.0.74 → 13.0.76

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;
+  touchMode?: 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",
+    "touchMode",
+    "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" touchMode={local.touchMode}>
+      <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;
+  touchMode?: 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",
+    "touchMode",
+    "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" touchMode={local.touchMode}>
+      <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;
@@ -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,
     );
 

package/src/components/form-control/combobox/Combobox.tsx

@@ -1,30 +1,67 @@
-import { createMemo, createSignal, For, type JSX, onCleanup, Show, splitProps } from "solid-js";
+import {
+  createContext,
+  createMemo,
+  createSignal,
+  For,
+  type JSX,
+  onCleanup,
+  Show,
+  splitProps,
+  useContext,
+  type ParentComponent,
+} from "solid-js";
 import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
 import { IconChevronDown, IconLoader2 } from "@tabler/icons-solidjs";
 import { DebounceQueue } from "@simplysm/core-common";
 import { Icon } from "../../display/Icon";
 import { Dropdown } from "../../disclosure/Dropdown";
 import { List } from "../../data/list/List";
-import { ComboboxContext, type ComboboxContextValue, useComboboxContext } from "./ComboboxContext";
-import { ComboboxItem } from "./ComboboxItem";
 import { ripple } from "../../../directives/ripple";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { type ComponentSize, textMuted } from "../../../styles/tokens.styles";
+import { text } from "../../../styles/base.styles";
+import { type ComponentSize, pad } from "../../../styles/control.styles";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
 import { Invalid } from "../Invalid";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
+import {
+  listItemBaseClass,
+  listItemSelectedClass,
+  listItemDisabledClass,
+  listItemContentClass,
+} from "../../data/list/ListItem.styles";
 
 void ripple;
 
-// Combobox-specific styles
-const selectedValueClass = clsx("flex-1", "whitespace-nowrap", "overflow-hidden");
-const inputClass = clsx(
-  "min-w-0 flex-1",
-  "bg-transparent outline-none",
-  "placeholder:text-base-400 dark:placeholder:text-base-500",
-);
+//#region ========== Context ==========
 
-const noResultsClass = clsx("px-3 py-2", textMuted);
+export interface ComboboxContextValue<TValue = unknown> {
+  /** Check if value is selected */
+  isSelected: (value: TValue) => boolean;
+
+  /** Select value */
+  selectValue: (value: TValue) => void;
+
+  /** Close dropdown */
+  closeDropdown: () => void;
+
+  /** Register item template */
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
+}
+
+export const ComboboxContext = createContext<ComboboxContextValue>();
+
+function useComboboxContext<TValue = unknown>(): ComboboxContextValue<TValue> {
+  const context = useContext(ComboboxContext);
+  if (!context) {
+    throw new Error("useComboboxContext can only be used inside the Combobox component");
+  }
+  return context as ComboboxContextValue<TValue>;
+}
+
+//#endregion
+
+const noResultsClass = clsx(pad.lg, text.muted);
 
 /**
  * Item template sub-component
@@ -33,12 +70,72 @@ const ComboboxItemTemplate = <TArgs extends unknown[]>(props: {
   children: (...args: TArgs) => JSX.Element;
 }) => {
   const ctx = useComboboxContext();
-  // eslint-disable-next-line solid/reactivity -- Store render function in signal, called from JSX tracked scope
   ctx.setItemTemplate(props.children as (...args: unknown[]) => JSX.Element);
   onCleanup(() => ctx.setItemTemplate(undefined));
   return null;
 };
 
+//#region ========== ComboboxItem ==========
+
+export interface ComboboxItemProps<TValue = unknown> extends Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "value" | "onClick"
+> {
+  /** Item value */
+  value: TValue;
+
+  /** Disabled */
+  disabled?: boolean;
+}
+
+/**
+ * Selectable item in Combobox dropdown
+ */
+const ComboboxItem: ParentComponent<ComboboxItemProps> = <T,>(
+  props: ComboboxItemProps<T> & { children?: JSX.Element },
+) => {
+  const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
+
+  const context = useComboboxContext<T>();
+
+  const isSelected = () => context.isSelected(local.value);
+  const useRipple = () => !local.disabled;
+
+  const handleClick = () => {
+    if (local.disabled) return;
+    context.selectValue(local.value);
+    context.closeDropdown();
+  };
+
+  const getClassName = () =>
+    twMerge(
+      listItemBaseClass,
+      isSelected() && listItemSelectedClass,
+      local.disabled && listItemDisabledClass,
+      local.class,
+    );
+
+  return (
+    <button
+      {...rest}
+      type="button"
+      use:ripple={useRipple()}
+      class={getClassName()}
+      data-combobox-item
+      data-list-item
+      role="option"
+      aria-selected={isSelected() || undefined}
+      aria-disabled={local.disabled || undefined}
+      tabIndex={local.disabled ? -1 : 0}
+      onClick={handleClick}
+    >
+      <span class={listItemContentClass}>{local.children}</span>
+    </button>
+  );
+};
+
+//#endregion
+
 // Props definition
 export interface ComboboxProps<TValue = unknown> {
   /** Currently selected value */
@@ -54,7 +151,7 @@ export interface ComboboxProps<TValue = unknown> {
   debounceMs?: number;
 
   /** Allow custom values */
-  allowCustomValue?: boolean;
+  allowsCustomValue?: boolean;
 
   /** Custom value parsing function */
   parseCustomValue?: (text: string) => TValue;
@@ -93,12 +190,6 @@ export interface ComboboxProps<TValue = unknown> {
   children?: JSX.Element;
 }
 
-interface ComboboxComponent {
-  <TValue = unknown>(props: ComboboxProps<TValue>): JSX.Element;
-  Item: typeof ComboboxItem;
-  ItemTemplate: typeof ComboboxItemTemplate;
-}
-
 /**
  * Combobox component
  *
@@ -129,7 +220,7 @@ interface ComboboxComponent {
  * </Combobox>
  * ```
  */
-export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
+const ComboboxInner = <T,>(props: ComboboxProps<T>) => {
   const [local, rest] = splitProps(props as ComboboxProps<T> & { children?: JSX.Element }, [
     "children",
     "class",
@@ -138,7 +229,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     "onValueChange",
     "loadItems",
     "debounceMs",
-    "allowCustomValue",
+    "allowsCustomValue",
     "parseCustomValue",
     "renderValue",
     "disabled",
@@ -165,7 +256,6 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   } as Parameters<typeof createControllableSignal<T | undefined>>[0]);
 
   // Debounce queue (created once on mount, debounceMs only used as initial value)
-  // eslint-disable-next-line solid/reactivity -- Debounce queue created once with debounceMs from mount time
   const debounceQueue = new DebounceQueue(local.debounceMs ?? 300);
 
   onCleanup(() => {
@@ -180,7 +270,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
 
   // Select value
   const selectValue = (value: T) => {
-    setInternalValue(value);
+    setInternalValue(value as any);
     setQuery("");
     setOpen(false);
   };
@@ -251,7 +341,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     } else if (e.key === "Escape" && open()) {
       e.preventDefault();
       setOpen(false);
-    } else if (e.key === "Enter" && local.allowCustomValue && query().trim() !== "") {
+    } else if (e.key === "Enter" && local.allowsCustomValue && query().trim() !== "") {
       e.preventDefault();
       const customValue = local.parseCustomValue ? local.parseCustomValue(query()) : (query() as T);
       selectValue(customValue);
@@ -293,7 +383,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
             }
           }}
           type="text"
-          class={inputClass}
+          class={clsx("min-w-0 flex-1 bg-transparent outline-none", text.placeholder)}
           value={query()}
           placeholder={currentValue === undefined ? local.placeholder : undefined}
           disabled={local.disabled}
@@ -359,7 +449,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
                 style={local.style}
                 onKeyDown={handleTriggerKeyDown}
               >
-                <div class={selectedValueClass}>{renderDisplayContent()}</div>
+                <div class="flex-1 overflow-hidden whitespace-nowrap">{renderDisplayContent()}</div>
                 <div class={chevronWrapperClass}>
                   <Show
                     when={busyCount() > 0}
@@ -383,5 +473,9 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   );
 };
 
-Combobox.Item = ComboboxItem;
-Combobox.ItemTemplate = ComboboxItemTemplate;
+//#region Export
+export const Combobox = Object.assign(ComboboxInner, {
+  Item: ComboboxItem,
+  ItemTemplate: ComboboxItemTemplate,
+});
+//#endregion

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

@@ -4,14 +4,14 @@ import { twMerge } from "tailwind-merge";
 import { DateOnly } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { type FieldSize } from "../field/Field.styles";
+import { text } from "../../../styles/base.styles";
+import { gap } from "../../../styles/control.styles";
 import { DatePicker } from "../field/DatePicker";
 import { Select } from "../select/Select";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 export type DateRangePeriodType = "day" | "month" | "range";
 
-const baseClass = clsx("inline-flex items-center", "gap-1");
-
 export interface DateRangePickerProps {
   /** Period type */
   periodType?: DateRangePeriodType;
@@ -154,7 +154,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
   };
 
   // Wrapper CSS class
-  const getWrapperClass = () => twMerge(baseClass, local.class);
+  const getWrapperClass = () => twMerge(clsx("inline-flex items-center", gap.default), local.class);
 
   return (
     <div {...rest} data-date-range-picker class={getWrapperClass()} style={local.style}>
@@ -204,7 +204,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
           disabled={local.disabled}
           size={local.size}
         />
-        <span class="text-base-400">~</span>
+        <span class={text.muted}>~</span>
         <DatePicker
           unit="date"
           value={to()}