@simplysm/solid 13.0.75 → 13.0.77

package/dist/components/form-control/checkbox/SelectionGroupBase.js

@@ -0,0 +1,53 @@
+import { template as _$template } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div>`);
+import { createMemo, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { Invalid } from "../Invalid.js";
+import { useI18n } from "../../../providers/i18n/I18nProvider.js";
+function SelectionGroupBase(props) {
+  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(() => {
+    var _a;
+    if (local.required && local.isEmpty(local.value)) return resolvedErrorMsg();
+    return (_a = local.validate) == null ? void 0 : _a.call(local, local.value);
+  });
+  return _$createComponent(Invalid, {
+    get message() {
+      return errorMsg();
+    },
+    variant: "dot",
+    get lazyValidation() {
+      return local.lazyValidation;
+    },
+    get children() {
+      return _$createComponent(local.context.Provider, {
+        get value() {
+          return local.contextValue;
+        },
+        get children() {
+          var _el$ = _tmpl$();
+          _$spread(_el$, _$mergeProps(rest, {
+            get ["class"]() {
+              return twMerge("inline-flex", local.class);
+            },
+            get style() {
+              return local.style;
+            }
+          }), false, true);
+          _$insert(_el$, () => local.children);
+          return _el$;
+        }
+      });
+    }
+  });
+}
+export {
+  SelectionGroupBase
+};
+//# sourceMappingURL=SelectionGroupBase.js.map

package/dist/components/form-control/checkbox/SelectionGroupBase.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/checkbox/SelectionGroupBase.tsx"],
+  "mappings": ";;;;;;AAAA,SAGEA,YACAC,kBACK;AACP,SAASC,eAAe;AACxB,SAASC,eAAe;AACxB,SAASC,eAAe;AAUjB,SAASC,mBAAkCC,OAO/C;AACD,QAAMC,OAAOH,QAAQ;AACrB,QAAMI,mBAAmBA,MAAMD,KAAKE,EAAEH,MAAMI,WAAW;AACvD,QAAM,CAACC,OAAOC,IAAI,IAAIX,WAAWK,OAAO,CACtC,WACA,gBACA,eACA,SACA,WACA,YACA,YACA,kBACA,SACA,SACA,UAAU,CACX;AAED,QAAMO,WAAWb,WAAW,MAAM;;AAChC,QAAIW,MAAMG,YAAYH,MAAMI,QAAQJ,MAAMK,KAAK,EAAG,QAAOR,iBAAiB;AAC1E,YAAOG,WAAMM,aAANN,+BAAiBA,MAAMK;EAChC,CAAC;AAED,SAAAE,kBACGf,SAAO;IAAA,IAACgB,UAAO;AAAA,aAAEN,SAAS;IAAC;IAAEO,SAAO;IAAA,IAAOC,iBAAc;AAAA,aAAEV,MAAMU;IAAc;IAAA,IAAAC,WAAA;AAAA,aAAAJ,kBAC7EP,MAAMY,QAAQC,UAAQ;QAAA,IAACR,QAAK;AAAA,iBAAEL,MAAMc;QAAY;QAAA,IAAAH,WAAA;AAAA,cAAAI,OAAAC,OAAA;AAAAC,mBAAAF,MAAAG,aACtCjB,MAAI;YAAA,KAAA,OAAA,IAAA;AAAA,qBAASV,QAAQ,eAAeS,MAAMmB,KAAK;YAAC;YAAA,IAAEC,QAAK;AAAA,qBAAEpB,MAAMoB;YAAK;UAAA,CAAA,GAAA,OAAA,IAAA;AAAAC,mBAAAN,MAAA,MAC1Ef,MAAMW,QAAQ;AAAA,iBAAAI;QAAA;MAAA,CAAA;IAAA;EAAA,CAAA;AAKzB;",
+  "names": ["createMemo", "splitProps", "twMerge", "Invalid", "useI18n", "SelectionGroupBase", "props", "i18n", "resolvedErrorMsg", "t", "errorMsgKey", "local", "rest", "errorMsg", "required", "isEmpty", "value", "validate", "_$createComponent", "message", "variant", "lazyValidation", "children", "context", "Provider", "contextValue", "_el$", "_tmpl$", "_$spread", "_$mergeProps", "class", "style", "_$insert"]
+}

package/dist/components/form-control/color-picker/ColorPicker.d.ts

@@ -1,5 +1,5 @@
 import { type Component, type JSX } from "solid-js";
-import { type ComponentSize } from "../../../styles/tokens.styles";
+import { type ComponentSize } from "../../../styles/control.styles";
 export interface ColorPickerProps {
     /** Color value (#RRGGBB format) */
     value?: string;
@@ -17,8 +17,8 @@ export interface ColorPickerProps {
     required?: boolean;
     /** 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;
     /** Custom style */

package/dist/components/form-control/color-picker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\color-picker\\ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAc,KAAK,GAAG,EAAc,MAAM,UAAU,CAAC;AAK5E,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAkCnE,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,4BAA4B;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAEpD,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,WAAW;IACX,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,CAAC;IAE7D,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,mBAAmB;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CA2DnD,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\color-picker\\ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAc,KAAK,GAAG,EAAc,MAAM,UAAU,CAAC;AAK5E,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAYpE,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,4BAA4B;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAEpD,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,WAAW;IACX,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,CAAC;IAE7D,kDAAkD;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,mBAAmB;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CA6DnD,CAAC"}

package/dist/components/form-control/color-picker/ColorPicker.js

@@ -9,28 +9,16 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
 import { Invalid } from "../Invalid.js";
-import { useI18n } from "../../../providers/i18n/I18nContext.js";
-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 { useI18n } from "../../../providers/i18n/I18nProvider.js";
 const sizeClasses = {
+  default: clsx`size-field`,
   xs: "size-field-xs",
   sm: "size-field-sm",
   lg: "size-field-lg",
   xl: "size-field-xl"
 };
-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%)]");
 const ColorPicker = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "title", "disabled", "size", "inset", "required", "validate", "touchMode", "class", "style"]);
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "title", "disabled", "size", "inset", "required", "validate", "lazyValidation", "class", "style"]);
   const i18n = useI18n();
   const [value, setValue] = createControllableSignal({
     value: () => local.value,
@@ -39,7 +27,7 @@ const ColorPicker = (props) => {
   const handleInput = (e) => {
     setValue(e.currentTarget.value);
   };
-  const getClassName = () => twMerge(baseClass, local.size && sizeClasses[local.size], local.disabled && disabledClass, local.class);
+  const getClassName = () => 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"], 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);
   const errorMsg = createMemo(() => {
     var _a;
     const v = value();
@@ -53,8 +41,8 @@ const ColorPicker = (props) => {
     get message() {
       return errorMsg();
     },
-    get touchMode() {
-      return local.touchMode;
+    get lazyValidation() {
+      return local.lazyValidation;
     },
     get children() {
       var _el$ = _tmpl$();

package/dist/components/form-control/color-picker/ColorPicker.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/color-picker/ColorPicker.tsx"],
-  "mappings": ";;;;;;AAAA,SAAyBA,YAAsBC,kBAAkB;AACjE,OAAOC,UAAU;AACjB,SAASC,eAAe;AACxB,SAASC,gCAAgC;AACzC,SAASC,eAAe;AAExB,SAASC,eAAe;AAGxB,MAAMC,YAAYL;EAChB;EACA;EACA;EACA;;EAEA;EACA;EACA;EACA;EACA;AACF;AAGA,MAAMM,cAA6C;EACjDC,IAAI;EACJC,IAAI;EACJC,IAAI;EACJC,IAAI;AACN;AAIA,MAAMC,gBAAgBX,KACpB,kBACA,YACA,6EACA,4GACF;AA6CO,MAAMY,cAA4CC,WAAU;AACjE,QAAM,CAACC,OAAOC,IAAI,IAAIhB,WAAWc,OAAO,CACtC,SACA,iBACA,SACA,YACA,QACA,SACA,YACA,YACA,aACA,SACA,OAAO,CACR;AAED,QAAMG,OAAOZ,QAAQ;AAErB,QAAM,CAACa,OAAOC,QAAQ,IAAIhB,yBAAyB;IACjDe,OAAOA,MAAMH,MAAMG;IACnBE,UAAUA,MAAML,MAAMM;EACxB,CAAC;AAED,QAAMC,cAAoEC,OAAM;AAC9EJ,aAASI,EAAEC,cAAcN,KAAK;EAChC;AAEA,QAAMO,eAAeA,MACnBvB,QACEI,WACAS,MAAMW,QAAQnB,YAAYQ,MAAMW,IAAI,GACpCX,MAAMY,YAAYf,eAClBG,MAAMa,KACR;AAEF,QAAMC,WAAW9B,WAAW,MAAM;;AAChC,UAAM+B,IAAIZ,MAAM;AAChB,QAAIH,MAAMgB,aAAaD,MAAME,UAAaF,MAAM,IAAK,QAAOb,KAAKgB,EAAE,qBAAqB;AACxF,YAAOlB,WAAMmB,aAANnB,+BAAiBe;EAC1B,CAAC;AAED,SAAAK,kBACG/B,SAAO;IAAA,IACNgC,UAAO;AAAA,aAAErB,MAAMsB,QAAQ,QAAQ;IAAQ;IAAA,IACvCC,UAAO;AAAA,aAAET,SAAS;IAAC;IAAA,IACnBU,YAAS;AAAA,aAAExB,MAAMwB;IAAS;IAAA,IAAAC,WAAA;AAAA,UAAAC,OAAAC,OAAA;AAAAC,eAAAF,MAAAG,aAGpB5B,MAAI;QAAA,qBAAA;QAAA,QAEH;QAAO,KAAA,OAAA,IAAA;AAAA,iBACLS,aAAa;QAAC;QAAA,IACrBoB,QAAK;AAAA,iBAAE9B,MAAM8B;QAAK;QAAA,IAClB3B,QAAK;AAAA,iBAAEA,MAAM,KAAK;QAAS;QAAA,IAC3B4B,QAAK;AAAA,iBAAE/B,MAAM+B;QAAK;QAAA,IAClBnB,WAAQ;AAAA,iBAAEZ,MAAMY;QAAQ;QAAA,WACfL;MAAW,CAAA,GAAA,OAAA,KAAA;AAAA,aAAAmB;IAAA;EAAA,CAAA;AAI5B;",
-  "names": ["createMemo", "splitProps", "clsx", "twMerge", "createControllableSignal", "Invalid", "useI18n", "baseClass", "sizeClasses", "xs", "sm", "lg", "xl", "disabledClass", "ColorPicker", "props", "local", "rest", "i18n", "value", "setValue", "onChange", "onValueChange", "handleInput", "e", "currentTarget", "getClassName", "size", "disabled", "class", "errorMsg", "v", "required", "undefined", "t", "validate", "_$createComponent", "variant", "inset", "message", "touchMode", "children", "_el$", "_tmpl$", "_$spread", "_$mergeProps", "style", "title"]
+  "mappings": ";;;;;;AAAA,SAAyBA,YAAsBC,kBAAkB;AACjE,OAAOC,UAAU;AACjB,SAASC,eAAe;AACxB,SAASC,gCAAgC;AACzC,SAASC,eAAe;AAExB,SAASC,eAAe;AAGxB,MAAMC,cAA6C;EACjDC,SAASN;EACTO,IAAI;EACJC,IAAI;EACJC,IAAI;EACJC,IAAI;AACN;AA6CO,MAAMC,cAA4CC,WAAU;AACjE,QAAM,CAACC,OAAOC,IAAI,IAAIf,WAAWa,OAAO,CACtC,SACA,iBACA,SACA,YACA,QACA,SACA,YACA,YACA,kBACA,SACA,OAAO,CACR;AAED,QAAMG,OAAOX,QAAQ;AAErB,QAAM,CAACY,OAAOC,QAAQ,IAAIf,yBAAyB;IACjDc,OAAOA,MAAMH,MAAMG;IACnBE,UAAUA,MAAML,MAAMM;EACxB,CAAC;AAED,QAAMC,cAAoEC,OAAM;AAC9EJ,aAASI,EAAEC,cAAcN,KAAK;EAChC;AAEA,QAAMO,eAAeA,MACnBtB,QAEE,2QACAI,YAAYQ,MAAMW,QAAQ,SAAS,GAEnCX,MAAMY,YAAY,gNAClBZ,MAAMa,KACR;AAEF,QAAMC,WAAW7B,WAAW,MAAM;;AAChC,UAAM8B,IAAIZ,MAAM;AAChB,QAAIH,MAAMgB,aAAaD,MAAME,UAAaF,MAAM,IAAK,QAAOb,KAAKgB,EAAE,qBAAqB;AACxF,YAAOlB,WAAMmB,aAANnB,+BAAiBe;EAC1B,CAAC;AAED,SAAAK,kBACG9B,SAAO;IAAA,IACN+B,UAAO;AAAA,aAAErB,MAAMsB,QAAQ,QAAQ;IAAQ;IAAA,IACvCC,UAAO;AAAA,aAAET,SAAS;IAAC;IAAA,IACnBU,iBAAc;AAAA,aAAExB,MAAMwB;IAAc;IAAA,IAAAC,WAAA;AAAA,UAAAC,OAAAC,OAAA;AAAAC,eAAAF,MAAAG,aAG9B5B,MAAI;QAAA,qBAAA;QAAA,QAEH;QAAO,KAAA,OAAA,IAAA;AAAA,iBACLS,aAAa;QAAC;QAAA,IACrBoB,QAAK;AAAA,iBAAE9B,MAAM8B;QAAK;QAAA,IAClB3B,QAAK;AAAA,iBAAEA,MAAM,KAAK;QAAS;QAAA,IAC3B4B,QAAK;AAAA,iBAAE/B,MAAM+B;QAAK;QAAA,IAClBnB,WAAQ;AAAA,iBAAEZ,MAAMY;QAAQ;QAAA,WACfL;MAAW,CAAA,GAAA,OAAA,KAAA;AAAA,aAAAmB;IAAA;EAAA,CAAA;AAI5B;",
+  "names": ["createMemo", "splitProps", "clsx", "twMerge", "createControllableSignal", "Invalid", "useI18n", "sizeClasses", "default", "xs", "sm", "lg", "xl", "ColorPicker", "props", "local", "rest", "i18n", "value", "setValue", "onChange", "onValueChange", "handleInput", "e", "currentTarget", "getClassName", "size", "disabled", "class", "errorMsg", "v", "required", "undefined", "t", "validate", "_$createComponent", "variant", "inset", "message", "lazyValidation", "children", "_el$", "_tmpl$", "_$spread", "_$mergeProps", "style", "title"]
 }

package/dist/components/form-control/combobox/Combobox.d.ts

@@ -1,12 +1,22 @@
-import { type JSX } from "solid-js";
-import { ComboboxItem } from "./ComboboxItem";
-import { type ComponentSize } from "../../../styles/tokens.styles";
-/**
- * Item template sub-component
- */
-declare const ComboboxItemTemplate: <TArgs extends unknown[]>(props: {
-    children: (...args: TArgs) => JSX.Element;
-}) => null;
+import { type JSX, type ParentComponent } from "solid-js";
+import { type ComponentSize } from "../../../styles/control.styles";
+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 declare const ComboboxContext: import("solid-js").Context<ComboboxContextValue<unknown> | undefined>;
+export interface ComboboxItemProps<TValue = unknown> extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "onClick"> {
+    /** Item value */
+    value: TValue;
+    /** Disabled */
+    disabled?: boolean;
+}
 export interface ComboboxProps<TValue = unknown> {
     /** Currently selected value */
     value?: TValue;
@@ -17,7 +27,7 @@ export interface ComboboxProps<TValue = unknown> {
     /** Debounce delay (default: 300ms) */
     debounceMs?: number;
     /** Allow custom values */
-    allowCustomValue?: boolean;
+    allowsCustomValue?: boolean;
     /** Custom value parsing function */
     parseCustomValue?: (text: string) => TValue;
     /** Function to render selected value (required) */
@@ -28,8 +38,8 @@ export interface ComboboxProps<TValue = unknown> {
     required?: boolean;
     /** Custom validation function */
     validate?: (value: TValue | undefined) => string | undefined;
-    /** touchMode: show errors only after blur */
-    touchMode?: boolean;
+    /** lazyValidation: show errors only after blur */
+    lazyValidation?: boolean;
     /** Placeholder text */
     placeholder?: string;
     /** Trigger size */
@@ -43,41 +53,10 @@ export interface ComboboxProps<TValue = unknown> {
     /** Children (Combobox.Item or Combobox.ItemTemplate) */
     children?: JSX.Element;
 }
-interface ComboboxComponent {
-    <TValue = unknown>(props: ComboboxProps<TValue>): JSX.Element;
-    Item: typeof ComboboxItem;
-    ItemTemplate: typeof ComboboxItemTemplate;
-}
-/**
- * Combobox component
- *
- * An autocomplete component supporting async search and item selection.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <Combobox
- *   loadItems={async (query) => {
- *     const response = await fetch(`/api/search?q=${query}`);
- *     return response.json();
- *   }}
- *   renderValue={(item) => item.name}
- *   value={selected()}
- *   onValueChange={setSelected}
- * >
- *   <Combobox.ItemTemplate>
- *     {(item) => <>{item.name}</>}
- *   </Combobox.ItemTemplate>
- * </Combobox>
- *
- * // Children approach
- * <Combobox loadItems={loadItems} renderValue={(v) => v.name}>
- *   <For each={items()}>
- *     {(item) => <Combobox.Item value={item}>{item.name}</Combobox.Item>}
- *   </For>
- * </Combobox>
- * ```
- */
-export declare const Combobox: ComboboxComponent;
-export {};
+export declare const Combobox: (<TValue>(props: ComboboxProps<TValue>) => JSX.Element) & {
+    Item: ParentComponent<ComboboxItemProps<unknown>>;
+    ItemTemplate: <TArgs extends unknown[]>(props: {
+        children: (...args: TArgs) => JSX.Element;
+    }) => null;
+};
 //# sourceMappingURL=Combobox.d.ts.map

package/dist/components/form-control/combobox/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\combobox\\Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,GAAG,EAA+B,MAAM,UAAU,CAAC;AAQhG,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,KAAK,aAAa,EAAa,MAAM,+BAA+B,CAAC;AAiB9E;;GAEG;AACH,QAAA,MAAM,oBAAoB,GAAI,KAAK,SAAS,OAAO,EAAE,EAAE,OAAO;IAC5D,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,KAAK,GAAG,CAAC,OAAO,CAAC;CAC3C,SAMA,CAAC;AAGF,MAAM,WAAW,aAAa,CAAC,MAAM,GAAG,OAAO;IAC7C,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,4BAA4B;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,oCAAoC;IACpC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAE3D,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAE5C,mDAAmD;IACnD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC;IAE5C,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,CAAC;IAE7D,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,mBAAmB;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,mBAAmB;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAE1B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED,UAAU,iBAAiB;IACzB,CAAC,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IAC9D,IAAI,EAAE,OAAO,YAAY,CAAC;IAC1B,YAAY,EAAE,OAAO,oBAAoB,CAAC;CAC3C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,QAAQ,EAAE,iBA4PtB,CAAC"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\combobox\\Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,GAAG,EAKR,KAAK,eAAe,EACrB,MAAM,UAAU,CAAC;AAWlB,OAAO,EAAE,KAAK,aAAa,EAAO,MAAM,gCAAgC,CAAC;AAezE,MAAM,WAAW,oBAAoB,CAAC,MAAM,GAAG,OAAO;IACpD,iCAAiC;IACjC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAEvC,mBAAmB;IACnB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,qBAAqB;IACrB,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B,6BAA6B;IAC7B,eAAe,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;CAClF;AAED,eAAO,MAAM,eAAe,uEAAwC,CAAC;AA4BrE,MAAM,WAAW,iBAAiB,CAAC,MAAM,GAAG,OAAO,CAAE,SAAQ,IAAI,CAC/D,GAAG,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC3C,OAAO,GAAG,SAAS,CACpB;IACC,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmDD,MAAM,WAAW,aAAa,CAAC,MAAM,GAAG,OAAO;IAC7C,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,4BAA4B;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,oCAAoC;IACpC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAE3D,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAE5C,mDAAmD;IACnD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC;IAE5C,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,CAAC;IAE7D,kDAAkD;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,mBAAmB;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,mBAAmB;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAE1B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAmSD,eAAO,MAAM,QAAQ,IAnQE,MAAM,SAAU,aAAa,CAAC,MAAM,CAAC;;mBA1J9B,KAAK,SAAS,OAAO,EAAE,SAAS;QAC5D,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,KAAK,GAAG,CAAC,OAAO,CAAC;KAC3C;CA8ZC,CAAC"}

package/dist/components/form-control/combobox/Combobox.js

@@ -1,43 +1,88 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { style as _$style } from "solid-js/web";
-import { spread as _$spread } from "solid-js/web";
-import { mergeProps as _$mergeProps } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ _$template(`<input type=text autocomplete=one-time-code>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div class=truncate>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div role=combobox aria-haspopup=listbox><div></div><div>`);
-import { createMemo, createSignal, For, onCleanup, Show, splitProps } from "solid-js";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<button><span>`), _tmpl$2 = /* @__PURE__ */ _$template(`<input type=text autocomplete=one-time-code>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div class=truncate>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div>`), _tmpl$5 = /* @__PURE__ */ _$template(`<div role=combobox aria-haspopup=listbox><div class="flex-1 overflow-hidden whitespace-nowrap"></div><div>`);
+import { createContext, createMemo, createSignal, For, onCleanup, Show, splitProps, useContext } 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.js";
 import { Dropdown } from "../../disclosure/Dropdown.js";
 import { List } from "../../data/list/List.js";
-import { ComboboxContext, useComboboxContext } from "./ComboboxContext.js";
-import { ComboboxItem } from "./ComboboxItem.js";
 import { ripple } from "../../../directives/ripple.js";
 import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
-import { textMuted } from "../../../styles/tokens.styles.js";
+import { text } from "../../../styles/base.styles.js";
+import { pad } from "../../../styles/control.styles.js";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles.js";
 import { Invalid } from "../Invalid.js";
-import { useI18n } from "../../../providers/i18n/I18nContext.js";
+import { useI18n } from "../../../providers/i18n/I18nProvider.js";
+import { listItemBaseClass, listItemSelectedClass, listItemDisabledClass, listItemContentClass } from "../../data/list/ListItem.styles.js";
 void ripple;
-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");
-const noResultsClass = clsx("px-3 py-2", textMuted);
+const ComboboxContext = createContext();
+function useComboboxContext() {
+  const context = useContext(ComboboxContext);
+  if (!context) {
+    throw new Error("useComboboxContext can only be used inside the Combobox component");
+  }
+  return context;
+}
+const noResultsClass = clsx(pad.lg, text.muted);
 const ComboboxItemTemplate = (props) => {
   const ctx = useComboboxContext();
   ctx.setItemTemplate(props.children);
   onCleanup(() => ctx.setItemTemplate(void 0));
   return null;
 };
-const Combobox = (props) => {
-  const [local, rest] = splitProps(props, ["children", "class", "style", "value", "onValueChange", "loadItems", "debounceMs", "allowCustomValue", "parseCustomValue", "renderValue", "disabled", "required", "placeholder", "size", "inset", "validate", "touchMode"]);
+const ComboboxItem = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
+  const context = useComboboxContext();
+  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 (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    _$use(ripple, _el$, () => useRipple());
+    _$spread(_el$, _$mergeProps(rest, {
+      "type": "button",
+      get ["class"]() {
+        return getClassName();
+      },
+      "data-combobox-item": "",
+      "data-list-item": "",
+      "role": "option",
+      get ["aria-selected"]() {
+        return isSelected() || void 0;
+      },
+      get ["aria-disabled"]() {
+        return local.disabled || void 0;
+      },
+      get tabIndex() {
+        return local.disabled ? -1 : 0;
+      },
+      "onClick": handleClick
+    }), false, true);
+    _$className(_el$2, listItemContentClass);
+    _$insert(_el$2, () => local.children);
+    return _el$;
+  })();
+};
+const ComboboxInner = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "style", "value", "onValueChange", "loadItems", "debounceMs", "allowsCustomValue", "parseCustomValue", "renderValue", "disabled", "required", "placeholder", "size", "inset", "validate", "lazyValidation"]);
   const i18n = useI18n();
   const [open, setOpen] = createSignal(false);
   const [query, setQuery] = createSignal("");
@@ -107,10 +152,15 @@ const Combobox = (props) => {
     } 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();
-      selectValue(customValue);
+      if (local.parseCustomValue) {
+        selectValue(local.parseCustomValue(query()));
+      } else {
+        setInternalValue(void 0);
+        setQuery("");
+        setOpen(false);
+      }
     }
   };
   const errorMsg = createMemo(() => {
@@ -129,49 +179,50 @@ const Combobox = (props) => {
     const currentValue = getValue();
     if (open() || currentValue === void 0) {
       return (() => {
-        var _el$ = _tmpl$();
-        _el$.$$input = handleInput;
+        var _el$3 = _tmpl$2();
+        _el$3.$$input = handleInput;
         _$use((el) => {
           if (open()) {
             requestAnimationFrame(() => el.focus());
           }
-        }, _el$);
-        _$className(_el$, inputClass);
+        }, _el$3);
         _$effect((_p$) => {
-          var _v$ = currentValue === void 0 ? local.placeholder : void 0, _v$2 = local.disabled;
-          _v$ !== _p$.e && _$setAttribute(_el$, "placeholder", _p$.e = _v$);
-          _v$2 !== _p$.t && (_el$.disabled = _p$.t = _v$2);
+          var _v$ = clsx("min-w-0 flex-1 bg-transparent outline-none", text.placeholder), _v$2 = currentValue === void 0 ? local.placeholder : void 0, _v$3 = local.disabled;
+          _v$ !== _p$.e && _$className(_el$3, _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$3, "placeholder", _p$.t = _v$2);
+          _v$3 !== _p$.a && (_el$3.disabled = _p$.a = _v$3);
           return _p$;
         }, {
           e: void 0,
-          t: void 0
+          t: void 0,
+          a: void 0
         });
-        _$effect(() => _el$.value = query());
-        return _el$;
+        _$effect(() => _el$3.value = query());
+        return _el$3;
       })();
     }
     return (() => {
-      var _el$2 = _tmpl$2();
-      _$insert(_el$2, () => local.renderValue(currentValue));
-      return _el$2;
+      var _el$4 = _tmpl$3();
+      _$insert(_el$4, () => local.renderValue(currentValue));
+      return _el$4;
     })();
   };
   const renderItems = () => {
     const template = itemTemplate();
     if (busyCount() > 0) {
       return (() => {
-        var _el$3 = _tmpl$3();
-        _$className(_el$3, noResultsClass);
-        _$insert(_el$3, () => i18n.t("combobox.searching"));
-        return _el$3;
+        var _el$5 = _tmpl$4();
+        _$className(_el$5, noResultsClass);
+        _$insert(_el$5, () => i18n.t("combobox.searching"));
+        return _el$5;
       })();
     }
     if (items().length === 0) {
       return (() => {
-        var _el$4 = _tmpl$3();
-        _$className(_el$4, noResultsClass);
-        _$insert(_el$4, () => i18n.t("combobox.noResults"));
-        return _el$4;
+        var _el$6 = _tmpl$4();
+        _$className(_el$6, noResultsClass);
+        _$insert(_el$6, () => i18n.t("combobox.noResults"));
+        return _el$6;
       })();
     }
     if (template) {
@@ -204,21 +255,21 @@ const Combobox = (props) => {
       return errorMsg();
     },
     variant: "border",
-    get touchMode() {
-      return local.touchMode;
+    get lazyValidation() {
+      return local.lazyValidation;
     },
     get children() {
       return _$createComponent(ComboboxContext.Provider, {
         value: contextValue,
         get children() {
-          var _el$5 = _tmpl$3();
-          _$spread(_el$5, _$mergeProps(rest, {
+          var _el$7 = _tmpl$4();
+          _$spread(_el$7, _$mergeProps(rest, {
             "data-combobox": "",
             get ["class"]() {
               return local.inset ? "flex" : "inline-flex";
             }
           }), false, true);
-          _$insert(_el$5, _$createComponent(Dropdown, {
+          _$insert(_el$7, _$createComponent(Dropdown, {
             get disabled() {
               return local.disabled;
             },
@@ -230,13 +281,12 @@ const Combobox = (props) => {
             get children() {
               return [_$createComponent(Dropdown.Trigger, {
                 get children() {
-                  var _el$6 = _tmpl$4(), _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling;
-                  _el$6.$$keydown = handleTriggerKeyDown;
-                  _$use(ripple, _el$6, () => !local.disabled);
-                  _$className(_el$7, selectedValueClass);
-                  _$insert(_el$7, renderDisplayContent);
-                  _$className(_el$8, chevronWrapperClass);
-                  _$insert(_el$8, _$createComponent(Show, {
+                  var _el$8 = _tmpl$5(), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
+                  _el$8.$$keydown = handleTriggerKeyDown;
+                  _$use(ripple, _el$8, () => !local.disabled);
+                  _$insert(_el$9, renderDisplayContent);
+                  _$className(_el$0, chevronWrapperClass);
+                  _$insert(_el$0, _$createComponent(Show, {
                     get when() {
                       return busyCount() > 0;
                     },
@@ -255,13 +305,13 @@ const Combobox = (props) => {
                     }
                   }));
                   _$effect((_p$) => {
-                    var _v$3 = open(), _v$4 = local.disabled || void 0, _v$5 = local.required || void 0, _v$6 = local.disabled ? -1 : 0, _v$7 = getTriggerClassName(), _v$8 = local.style;
-                    _v$3 !== _p$.e && _$setAttribute(_el$6, "aria-expanded", _p$.e = _v$3);
-                    _v$4 !== _p$.t && _$setAttribute(_el$6, "aria-disabled", _p$.t = _v$4);
-                    _v$5 !== _p$.a && _$setAttribute(_el$6, "aria-required", _p$.a = _v$5);
-                    _v$6 !== _p$.o && _$setAttribute(_el$6, "tabindex", _p$.o = _v$6);
-                    _v$7 !== _p$.i && _$className(_el$6, _p$.i = _v$7);
-                    _p$.n = _$style(_el$6, _v$8, _p$.n);
+                    var _v$4 = open(), _v$5 = local.disabled || void 0, _v$6 = local.required || void 0, _v$7 = local.disabled ? -1 : 0, _v$8 = getTriggerClassName(), _v$9 = local.style;
+                    _v$4 !== _p$.e && _$setAttribute(_el$8, "aria-expanded", _p$.e = _v$4);
+                    _v$5 !== _p$.t && _$setAttribute(_el$8, "aria-disabled", _p$.t = _v$5);
+                    _v$6 !== _p$.a && _$setAttribute(_el$8, "aria-required", _p$.a = _v$6);
+                    _v$7 !== _p$.o && _$setAttribute(_el$8, "tabindex", _p$.o = _v$7);
+                    _v$8 !== _p$.i && _$className(_el$8, _p$.i = _v$8);
+                    _p$.n = _$style(_el$8, _v$9, _p$.n);
                     return _p$;
                   }, {
                     e: void 0,
@@ -271,7 +321,7 @@ const Combobox = (props) => {
                     i: void 0,
                     n: void 0
                   });
-                  return _el$6;
+                  return _el$8;
                 }
               }), _$createComponent(Dropdown.Content, {
                 get children() {
@@ -286,16 +336,19 @@ const Combobox = (props) => {
               })];
             }
           }));
-          return _el$5;
+          return _el$7;
         }
       });
     }
   });
 };
-Combobox.Item = ComboboxItem;
-Combobox.ItemTemplate = ComboboxItemTemplate;
+const Combobox = Object.assign(ComboboxInner, {
+  Item: ComboboxItem,
+  ItemTemplate: ComboboxItemTemplate
+});
 _$delegateEvents(["input", "keydown"]);
 export {
-  Combobox
+  Combobox,
+  ComboboxContext
 };
 //# sourceMappingURL=Combobox.js.map