@smwb/ui-solid 0.1.0

package/dist/components/inputs/timePicker/timePickerColumns.js

@@ -0,0 +1,49 @@
+import { insert as o, createComponent as i, template as a } from "solid-js/web";
+import { Show as S } from "solid-js";
+import { TimePickerList as s } from "./timePickerList.js";
+import { patternHasSeconds as w } from "./timeFormat.js";
+import { getHoursList as k, getMinutesList as M, getSecondsList as T, setTime as r, isValidTimeDate as H, DEFAULT_TIME_FORMAT as $ } from "./timeUtils.js";
+var b = /* @__PURE__ */ a("<div class=smwb-time-picker__column>"), L = /* @__PURE__ */ a("<div class=smwb-time-picker__columns data-testid=time-picker-columns><div class=smwb-time-picker__column></div><div class=smwb-time-picker__column>");
+function E(n) {
+  const e = () => H(n.value) ? n.value : /* @__PURE__ */ new Date(), l = () => n.format ?? $, m = () => w(l()), g = k(), d = M(), _ = T(), h = (t) => {
+    n.onChange(r(e(), t, e().getMinutes(), e().getSeconds()));
+  }, C = (t) => {
+    n.onChange(r(e(), e().getHours(), t, e().getSeconds())), m() || n.onComplete?.();
+  }, v = (t) => {
+    n.onChange(r(e(), e().getHours(), e().getMinutes(), t)), n.onComplete?.();
+  };
+  return (() => {
+    var t = L(), c = t.firstChild, f = c.nextSibling;
+    return o(c, i(s, {
+      get value() {
+        return e().getHours();
+      },
+      items: g,
+      onChange: h
+    })), o(f, i(s, {
+      get value() {
+        return e().getMinutes();
+      },
+      items: d,
+      onChange: C
+    })), o(t, i(S, {
+      get when() {
+        return m();
+      },
+      get children() {
+        var u = b();
+        return o(u, i(s, {
+          get value() {
+            return e().getSeconds();
+          },
+          items: _,
+          onChange: v
+        })), u;
+      }
+    }), null), t;
+  })();
+}
+export {
+  E as TimePickerColumns
+};
+//# sourceMappingURL=timePickerColumns.js.map

package/dist/components/inputs/timePicker/timePickerColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timePickerColumns.js","sources":["../../../../src/components/inputs/timePicker/timePickerColumns.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { TimePickerList } from \"./timePickerList\";\nimport { patternHasSeconds } from \"./timeFormat\";\nimport { DEFAULT_TIME_FORMAT, getHoursList, getMinutesList, getSecondsList, isValidTimeDate, setTime } from \"./timeUtils\";\n\nexport interface TimePickerColumnsProps {\n  value?: Date;\n  format?: string | undefined;\n  onChange: (value: Date) => void;\n  onComplete?: () => void;\n}\n\nexport function TimePickerColumns(props: TimePickerColumnsProps): JSX.Element {\n  const current = (): Date => (isValidTimeDate(props.value) ? props.value : new Date());\n  const timeFormat = (): string => props.format ?? DEFAULT_TIME_FORMAT;\n  const showSeconds = (): boolean => patternHasSeconds(timeFormat());\n  const hours = getHoursList();\n  const minutes = getMinutesList();\n  const seconds = getSecondsList();\n\n  const onHourChange = (hour: number): void => {\n    props.onChange(setTime(current(), hour, current().getMinutes(), current().getSeconds()));\n  };\n  const onMinuteChange = (minute: number): void => {\n    props.onChange(setTime(current(), current().getHours(), minute, current().getSeconds()));\n    if (!showSeconds()) props.onComplete?.();\n  };\n  const onSecondChange = (second: number): void => {\n    props.onChange(setTime(current(), current().getHours(), current().getMinutes(), second));\n    props.onComplete?.();\n  };\n\n  return (\n    <div class=\"smwb-time-picker__columns\" data-testid=\"time-picker-columns\">\n      <div class=\"smwb-time-picker__column\">\n        <TimePickerList value={current().getHours()} items={hours} onChange={onHourChange} />\n      </div>\n      <div class=\"smwb-time-picker__column\">\n        <TimePickerList value={current().getMinutes()} items={minutes} onChange={onMinuteChange} />\n      </div>\n      <Show when={showSeconds()}>\n        <div class=\"smwb-time-picker__column\">\n          <TimePickerList value={current().getSeconds()} items={seconds} onChange={onSecondChange} />\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport default TimePickerColumns;\n"],"names":["TimePickerColumns","props","current","isValidTimeDate","value","Date","timeFormat","format","DEFAULT_TIME_FORMAT","showSeconds","patternHasSeconds","hours","getHoursList","minutes","getMinutesList","seconds","getSecondsList","onHourChange","hour","onChange","setTime","getMinutes","getSeconds","onMinuteChange","minute","getHours","onComplete","onSecondChange","second","_el$","_tmpl$2","_el$2","firstChild","_el$3","nextSibling","_$insert","_$createComponent","TimePickerList","items","Show","when","children","_el$4","_tmpl$"],"mappings":";;;;;;AAYO,SAASA,EAAkBC,GAA4C;AAC5E,QAAMC,IAAUA,MAAaC,EAAgBF,EAAMG,KAAK,IAAIH,EAAMG,QAAQ,oBAAIC,KAAAA,GACxEC,IAAaA,MAAcL,EAAMM,UAAUC,GAC3CC,IAAcA,MAAeC,EAAkBJ,GAAY,GAC3DK,IAAQC,EAAAA,GACRC,IAAUC,EAAAA,GACVC,IAAUC,EAAAA,GAEVC,IAAeA,CAACC,MAAuB;AAC3CjB,IAAAA,EAAMkB,SAASC,EAAQlB,EAAAA,GAAWgB,GAAMhB,EAAAA,EAAUmB,WAAAA,GAAcnB,IAAUoB,WAAAA,CAAY,CAAC;AAAA,EACzF,GACMC,IAAiBA,CAACC,MAAyB;AAC/CvB,IAAAA,EAAMkB,SAASC,EAAQlB,EAAAA,GAAWA,EAAAA,EAAUuB,SAAAA,GAAYD,GAAQtB,IAAUoB,WAAAA,CAAY,CAAC,GAClFb,EAAAA,KAAeR,EAAMyB,aAAAA;AAAAA,EAC5B,GACMC,IAAiBA,CAACC,MAAyB;AAC/C3B,IAAAA,EAAMkB,SAASC,EAAQlB,EAAAA,GAAWA,EAAAA,EAAUuB,SAAAA,GAAYvB,EAAAA,EAAUmB,WAAAA,GAAcO,CAAM,CAAC,GACvF3B,EAAMyB,aAAAA;AAAAA,EACR;AAEA,UAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG;AAAAC,WAAAA,EAAAJ,GAAAK,EAGOC,GAAc;AAAA,MAAA,IAACjC,QAAK;AAAA,eAAEF,EAAAA,EAAUuB,SAAAA;AAAAA,MAAU;AAAA,MAAEa,OAAO3B;AAAAA,MAAOQ,UAAUF;AAAAA,IAAAA,CAAY,CAAA,GAAAkB,EAAAF,GAAAG,EAGhFC,GAAc;AAAA,MAAA,IAACjC,QAAK;AAAA,eAAEF,EAAAA,EAAUmB,WAAAA;AAAAA,MAAY;AAAA,MAAEiB,OAAOzB;AAAAA,MAASM,UAAUI;AAAAA,IAAAA,CAAc,CAAA,GAAAY,EAAAN,GAAAO,EAExFG,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE/B,EAAAA;AAAAA,MAAa;AAAA,MAAA,IAAAgC,WAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAR,eAAAA,EAAAO,GAAAN,EAEpBC,GAAc;AAAA,UAAA,IAACjC,QAAK;AAAA,mBAAEF,EAAAA,EAAUoB,WAAAA;AAAAA,UAAY;AAAA,UAAEgB,OAAOvB;AAAAA,UAASI,UAAUQ;AAAAA,QAAAA,CAAc,CAAA,GAAAe;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAb;AAAAA,EAAA,GAAA;AAKjG;"}

package/dist/components/inputs/timePicker/timePickerInput.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+import type { TimePickerProps } from "./timePicker";
+export interface TimePickerInputProps extends Omit<TimePickerProps, "placement" | "onToggle"> {
+    onToggle: () => void;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function TimePickerInput(props: TimePickerInputProps): JSX.Element;
+export default TimePickerInput;

package/dist/components/inputs/timePicker/timePickerInput.js

@@ -0,0 +1,80 @@
+import { createComponent as o, mergeProps as u } from "solid-js/web";
+import { splitProps as c, Show as l } from "solid-js";
+import { DatePickerIconButton as g } from "../datePicker/datePickerIconButton.js";
+import { createTimeInput as d } from "./useTimeInput.js";
+import { mergeRefs as m } from "../../../primitives/mergeRefs.js";
+import { TextField as p } from "../textField/textField.js";
+import { Icon as f } from "../../base/icon/icon.js";
+function s(t) {
+  t.stopPropagation();
+}
+function P(t) {
+  const [e, a] = c(t, ["value", "onChange", "onBlur", "onToggle", "disabled", "disableClock", "clockIcon", "format", "ref"]), r = d({
+    value: e.value,
+    onChange: e.onChange,
+    onBlur: e.onBlur,
+    format: e.format
+  });
+  return o(p, u({
+    ref(i) {
+      var n = m(e.ref, r.ref);
+      typeof n == "function" && n(i);
+    },
+    get value() {
+      return r.value();
+    },
+    get onChange() {
+      return r.onInput;
+    },
+    get onBlur() {
+      return r.onBlur;
+    },
+    get placeholder() {
+      return r.placeholder();
+    },
+    type: "tel",
+    get endAdornment() {
+      return o(l, {
+        get when() {
+          return !e.disableClock;
+        },
+        get children() {
+          return o(g, {
+            edge: "end",
+            onClick: () => e.onToggle(),
+            onMouseDown: s,
+            get disabled() {
+              return !!e.disabled;
+            },
+            "data-testid": "time-picker-icon-button",
+            get children() {
+              return o(l, {
+                get when() {
+                  return e.clockIcon;
+                },
+                get fallback() {
+                  return o(f, {
+                    name: "schedule",
+                    fill: 1,
+                    weight: 500,
+                    size: 24
+                  });
+                },
+                get children() {
+                  return e.clockIcon;
+                }
+              });
+            }
+          });
+        }
+      });
+    },
+    get disabled() {
+      return !!e.disabled;
+    }
+  }, a));
+}
+export {
+  P as TimePickerInput
+};
+//# sourceMappingURL=timePickerInput.js.map

package/dist/components/inputs/timePicker/timePickerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timePickerInput.js","sources":["../../../../src/components/inputs/timePicker/timePickerInput.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport { TextField } from \"../textField\";\nimport { DatePickerIconButton } from \"../datePicker/datePickerIconButton\";\nimport { createTimeInput } from \"./useTimeInput\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { TimePickerProps } from \"./timePicker\";\n\nexport interface TimePickerInputProps extends Omit<TimePickerProps, \"placement\" | \"onToggle\"> {\n  onToggle: () => void;\n  ref?: Ref<HTMLInputElement>;\n}\n\nfunction stopPropagation(event: Event): void {\n  event.stopPropagation();\n}\n\nexport function TimePickerInput(props: TimePickerInputProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"onBlur\",\n    \"onToggle\",\n    \"disabled\",\n    \"disableClock\",\n    \"clockIcon\",\n    \"format\",\n    \"ref\",\n  ]);\n\n  const masked = createTimeInput({\n    value: local.value,\n    onChange: local.onChange,\n    onBlur: local.onBlur,\n    format: local.format,\n  });\n\n  return (\n    <TextField\n      ref={mergeRefs(local.ref, masked.ref)}\n      value={masked.value()}\n      onChange={masked.onInput}\n      onBlur={masked.onBlur}\n      placeholder={masked.placeholder()}\n      type=\"tel\"\n      endAdornment={\n        <Show when={!local.disableClock}>\n          <DatePickerIconButton\n            edge=\"end\"\n            onClick={() => local.onToggle()}\n            onMouseDown={stopPropagation}\n            disabled={Boolean(local.disabled)}\n            data-testid=\"time-picker-icon-button\"\n          >\n            <Show when={local.clockIcon} fallback={<Icon name=\"schedule\" fill={1} weight={500} size={24} />}>\n              {local.clockIcon}\n            </Show>\n          </DatePickerIconButton>\n        </Show>\n      }\n      disabled={Boolean(local.disabled)}\n      {...rest}\n    />\n  );\n}\n\nexport default TimePickerInput;\n"],"names":["stopPropagation","event","TimePickerInput","props","local","rest","splitProps","masked","createTimeInput","value","onChange","onBlur","format","_$createComponent","TextField","_$mergeProps","ref","r$","_ref$","mergeRefs","onInput","placeholder","type","endAdornment","Show","when","disableClock","children","DatePickerIconButton","edge","onClick","onToggle","onMouseDown","disabled","Boolean","clockIcon","fallback","Icon","name","fill","weight","size"],"mappings":";;;;;;;AAaA,SAASA,EAAgBC,GAAoB;AAC3CA,EAAAA,EAAMD,gBAAAA;AACR;AAEO,SAASE,EAAgBC,GAA0C;AACxE,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CACtC,SACA,YACA,UACA,YACA,YACA,gBACA,aACA,UACA,KAAK,CACN,GAEKI,IAASC,EAAgB;AAAA,IAC7BC,OAAOL,EAAMK;AAAAA,IACbC,UAAUN,EAAMM;AAAAA,IAChBC,QAAQP,EAAMO;AAAAA,IACdC,QAAQR,EAAMQ;AAAAA,EAAAA,CACf;AAED,SAAAC,EACGC,GAASC,EAAA;AAAA,IAAAC,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAUf,EAAMY,KAAKT,EAAOS,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IACrCR,QAAK;AAAA,aAAEF,EAAOE,MAAAA;AAAAA,IAAO;AAAA,IAAA,IACrBC,WAAQ;AAAA,aAAEH,EAAOa;AAAAA,IAAO;AAAA,IAAA,IACxBT,SAAM;AAAA,aAAEJ,EAAOI;AAAAA,IAAM;AAAA,IAAA,IACrBU,cAAW;AAAA,aAAEd,EAAOc,YAAAA;AAAAA,IAAa;AAAA,IACjCC,MAAI;AAAA,IAAA,IACJC,eAAY;AAAA,aAAAV,EACTW,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAE,CAACrB,EAAMsB;AAAAA,QAAY;AAAA,QAAA,IAAAC,WAAA;AAAA,iBAAAd,EAC5Be,GAAoB;AAAA,YACnBC,MAAI;AAAA,YACJC,SAASA,MAAM1B,EAAM2B,SAAAA;AAAAA,YACrBC,aAAahC;AAAAA,YAAe,IAC5BiC,WAAQ;AAAA,qBAAEC,EAAQ9B,EAAM6B;AAAAA,YAAS;AAAA,YAAA,eAAA;AAAA,YAAA,IAAAN,WAAA;AAAA,qBAAAd,EAGhCW,GAAI;AAAA,gBAAA,IAACC,OAAI;AAAA,yBAAErB,EAAM+B;AAAAA,gBAAS;AAAA,gBAAA,IAAEC,WAAQ;AAAA,yBAAAvB,EAAGwB,GAAI;AAAA,oBAACC,MAAI;AAAA,oBAAYC,MAAM;AAAA,oBAAGC,QAAQ;AAAA,oBAAKC,MAAM;AAAA,kBAAA,CAAE;AAAA,gBAAA;AAAA,gBAAA,IAAAd,WAAA;AAAA,yBACxFvB,EAAM+B;AAAAA,gBAAS;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,IAAA,IAKxBF,WAAQ;AAAA,aAAEC,EAAQ9B,EAAM6B;AAAAA,IAAS;AAAA,EAAA,GAC7B5B,CAAI,CAAA;AAGd;"}

package/dist/components/inputs/timePicker/timePickerList.d.ts

@@ -0,0 +1,12 @@
+import { type JSX } from "solid-js";
+interface Item {
+    label: string;
+    value: number;
+}
+export interface TimePickerListProps {
+    value: number;
+    items: Item[];
+    onChange: (value: number) => void;
+}
+export declare function TimePickerList(props: TimePickerListProps): JSX.Element;
+export default TimePickerList;

package/dist/components/inputs/timePicker/timePickerList.js

@@ -0,0 +1,33 @@
+import { use as o, insert as m, createComponent as a, effect as f, className as n, template as s, delegateEvents as _ } from "solid-js/web";
+import { createEffect as u, on as d, For as v } from "solid-js";
+import p from "clsx";
+var k = /* @__PURE__ */ s("<div class=smwb-time-picker__overflow data-testid=time-picker-list><ul class=smwb-time-picker__list>"), w = /* @__PURE__ */ s("<li>");
+function g(l) {
+  let t;
+  return u(d(() => l.value, () => {
+    if (!t) return;
+    const e = t.querySelector(".smwb-time-picker__item--selected");
+    if (e) {
+      const c = (t.offsetHeight - e.offsetHeight) / 2;
+      t.scrollTop = e.offsetTop - c;
+    }
+  })), (() => {
+    var e = k(), c = e.firstChild;
+    return o((i) => t = i, e), m(c, a(v, {
+      get each() {
+        return l.items;
+      },
+      children: (i) => (() => {
+        var r = w();
+        return r.$$click = () => l.onChange(i.value), m(r, () => i.label), f(() => n(r, p("smwb-time-picker__item", {
+          "smwb-time-picker__item--selected": l.value === i.value
+        }))), r;
+      })()
+    })), e;
+  })();
+}
+_(["click"]);
+export {
+  g as TimePickerList
+};
+//# sourceMappingURL=timePickerList.js.map

package/dist/components/inputs/timePicker/timePickerList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timePickerList.js","sources":["../../../../src/components/inputs/timePicker/timePickerList.tsx"],"sourcesContent":["import { type JSX, For, createEffect, on } from \"solid-js\";\nimport cn from \"clsx\";\n\ninterface Item {\n  label: string;\n  value: number;\n}\n\nexport interface TimePickerListProps {\n  value: number;\n  items: Item[];\n  onChange: (value: number) => void;\n}\n\nexport function TimePickerList(props: TimePickerListProps): JSX.Element {\n  let overflowEl: HTMLDivElement | undefined;\n\n  createEffect(\n    on(\n      () => props.value,\n      () => {\n        if (!overflowEl) return;\n        const selected = overflowEl.querySelector<HTMLElement>(\".smwb-time-picker__item--selected\");\n        if (selected) {\n          const middle = (overflowEl.offsetHeight - selected.offsetHeight) / 2;\n          overflowEl.scrollTop = selected.offsetTop - middle;\n        }\n      }\n    )\n  );\n\n  return (\n    <div class=\"smwb-time-picker__overflow\" ref={(el) => (overflowEl = el)} data-testid=\"time-picker-list\">\n      <ul class=\"smwb-time-picker__list\">\n        <For each={props.items}>\n          {(item) => (\n            <li\n              class={cn(\"smwb-time-picker__item\", { \"smwb-time-picker__item--selected\": props.value === item.value })}\n              onClick={() => props.onChange(item.value)}\n            >\n              {item.label}\n            </li>\n          )}\n        </For>\n      </ul>\n    </div>\n  );\n}\n\nexport default TimePickerList;\n"],"names":["TimePickerList","props","overflowEl","createEffect","on","value","selected","querySelector","middle","offsetHeight","scrollTop","offsetTop","_el$","_tmpl$","_el$2","firstChild","_$use","el","_$insert","_$createComponent","For","each","items","children","item","_el$3","_tmpl$2","$$click","onChange","label","_$effect","_$className","cn","_$delegateEvents"],"mappings":";;;;AAcO,SAASA,EAAeC,GAAyC;AACtE,MAAIC;AAEJC,SAAAA,EACEC,EACE,MAAMH,EAAMI,OACZ,MAAM;AACJ,QAAI,CAACH,EAAY;AACjB,UAAMI,IAAWJ,EAAWK,cAA2B,mCAAmC;AAC1F,QAAID,GAAU;AACZ,YAAME,KAAUN,EAAWO,eAAeH,EAASG,gBAAgB;AACnEP,MAAAA,EAAWQ,YAAYJ,EAASK,YAAYH;AAAAA,IAC9C;AAAA,EACF,CACF,CACF,IAEA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG;AAAAC,WAAAA,EACgDC,CAAAA,MAAQf,IAAae,GAAGL,CAAA,GAAAM,EAAAJ,GAAAK,EAEjEC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEpB,EAAMqB;AAAAA,MAAK;AAAA,MAAAC,UAClBC,QAAI,MAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAD,eAAAA,EAAAE,UAGO,MAAM1B,EAAM2B,SAASJ,EAAKnB,KAAK,GAACa,EAAAO,GAAA,MAExCD,EAAKK,KAAK,GAAAC,EAAA,MAAAC,EAAAN,GAHJO,EAAG,0BAA0B;AAAA,UAAE,oCAAoC/B,EAAMI,UAAUmB,EAAKnB;AAAAA,QAAAA,CAAO,CAAC,CAAA,GAAAoB;AAAAA,MAAA,GAAA;AAAA,IAAA,CAK1G,CAAA,GAAAb;AAAAA,EAAA,GAAA;AAKX;AAE8BqB,EAAA,CAAA,OAAA,CAAA;"}

package/dist/components/inputs/timePicker/timeUtils.d.ts

@@ -0,0 +1,23 @@
+export declare const DEFAULT_TIME_FORMAT = "HH:mm";
+export declare function getHoursList(): {
+    value: number;
+    label: string;
+}[];
+export declare function getMinutesList(): {
+    value: number;
+    label: string;
+}[];
+export declare function getSecondsList(): {
+    value: number;
+    label: string;
+}[];
+export declare function setTime(date: Date, hours: number, minutes: number, seconds: number): Date;
+export declare function getDisplayTime(date: unknown, format?: string): string;
+export declare function getCurrentTimeFormat(format?: string): string;
+export declare function getTimeMaskFormat(format?: string): string;
+export declare function maskedTimeFormatter(mask: string): (value: string) => string;
+export declare function isTimeMatch(value: string, format: string): boolean;
+export declare function getTimeByFormat(value: string, format: string): Date;
+export declare function isValidTimeDate(value: unknown): value is Date;
+export declare function mergeTime(baseDate: Date, timeDate: Date): Date;
+export declare function mergeDate(date: Date, timeSource: Date): Date;

package/dist/components/inputs/timePicker/timeUtils.js

@@ -0,0 +1,82 @@
+import { formatTimeByPattern as m, isTimePatternMatch as f, parseTimeByPattern as l } from "./timeFormat.js";
+const c = /\d/gi, T = /[a-zA-Z]/g, g = "HH:mm";
+function _() {
+  return Array.from({ length: 24 }, (t, e) => ({ value: e, label: String(e).padStart(2, "0") }));
+}
+function S() {
+  return Array.from({ length: 60 }, (t, e) => ({ value: e, label: String(e).padStart(2, "0") }));
+}
+function y() {
+  return Array.from({ length: 60 }, (t, e) => ({ value: e, label: String(e).padStart(2, "0") }));
+}
+function A(t, e, r, n) {
+  const o = new Date(t);
+  return o.setHours(e, r, n, 0), o;
+}
+function C(t, e) {
+  return p(t) ? m(t, e ?? g) : "";
+}
+function h(t) {
+  return t ?? g;
+}
+function D(t) {
+  return h(t).replace(T, "_");
+}
+function F(t) {
+  return (e) => {
+    let r = 0;
+    return e.split("").map((n, o) => {
+      if (c.lastIndex = 0, r > t.length - 1) return "";
+      const s = t[r], a = t[r + 1], u = c.test(n) ? n : "", i = s === "_" ? u : s + u;
+      return r += i.length, o === e.length - 1 && a && a !== "_" ? i ? i + a : "" : i;
+    }).join("");
+  };
+}
+function E(t, e) {
+  return f(t, e);
+}
+function H(t, e) {
+  return l(t, e) ?? new Date(Number.NaN);
+}
+function p(t) {
+  return Object.prototype.toString.call(t) === "[object Date]" && !isNaN(t);
+}
+function L(t, e) {
+  return new Date(
+    t.getFullYear(),
+    t.getMonth(),
+    t.getDate(),
+    e.getHours(),
+    e.getMinutes(),
+    e.getSeconds(),
+    0
+  );
+}
+function N(t, e) {
+  return new Date(
+    t.getFullYear(),
+    t.getMonth(),
+    t.getDate(),
+    e.getHours(),
+    e.getMinutes(),
+    e.getSeconds(),
+    0
+  );
+}
+export {
+  g as DEFAULT_TIME_FORMAT,
+  h as getCurrentTimeFormat,
+  C as getDisplayTime,
+  _ as getHoursList,
+  S as getMinutesList,
+  y as getSecondsList,
+  H as getTimeByFormat,
+  D as getTimeMaskFormat,
+  E as isTimeMatch,
+  p as isValidTimeDate,
+  F as maskedTimeFormatter,
+  N as mergeDate,
+  L as mergeTime,
+  A as setTime
+};
+//# sourceMappingURL=timeUtils.js.map

package/dist/components/inputs/timePicker/timeUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeUtils.js","sources":["../../../../src/components/inputs/timePicker/timeUtils.ts"],"sourcesContent":["import { formatTimeByPattern, isTimePatternMatch, parseTimeByPattern } from \"./timeFormat\";\n\nconst MASK_DIGIT_REGEXP = /\\d/gi;\nconst MASK_TOKEN_REGEXP = /[a-zA-Z]/g;\n\nexport const DEFAULT_TIME_FORMAT = \"HH:mm\";\n\nexport function getHoursList(): { value: number; label: string }[] {\n  return Array.from({ length: 24 }, (_, value) => ({ value, label: String(value).padStart(2, \"0\") }));\n}\n\nexport function getMinutesList(): { value: number; label: string }[] {\n  return Array.from({ length: 60 }, (_, value) => ({ value, label: String(value).padStart(2, \"0\") }));\n}\n\nexport function getSecondsList(): { value: number; label: string }[] {\n  return Array.from({ length: 60 }, (_, value) => ({ value, label: String(value).padStart(2, \"0\") }));\n}\n\nexport function setTime(date: Date, hours: number, minutes: number, seconds: number): Date {\n  const next = new Date(date);\n  next.setHours(hours, minutes, seconds, 0);\n  return next;\n}\n\nexport function getDisplayTime(date: unknown, format?: string): string {\n  if (!isValidTimeDate(date)) return \"\";\n  return formatTimeByPattern(date, format ?? DEFAULT_TIME_FORMAT);\n}\n\nexport function getCurrentTimeFormat(format?: string): string {\n  return format ?? DEFAULT_TIME_FORMAT;\n}\n\nexport function getTimeMaskFormat(format?: string): string {\n  return getCurrentTimeFormat(format).replace(MASK_TOKEN_REGEXP, \"_\");\n}\n\nexport function maskedTimeFormatter(mask: string): (value: string) => string {\n  return (value: string) => {\n    let outputCharIndex = 0;\n    return value\n      .split(\"\")\n      .map((char, inputCharIndex) => {\n        MASK_DIGIT_REGEXP.lastIndex = 0;\n        if (outputCharIndex > mask.length - 1) return \"\";\n\n        const maskChar = mask[outputCharIndex] as string;\n        const nextMaskChar = mask[outputCharIndex + 1];\n        const acceptedChar = MASK_DIGIT_REGEXP.test(char) ? char : \"\";\n        const formattedChar = maskChar === \"_\" ? acceptedChar : maskChar + acceptedChar;\n        outputCharIndex += formattedChar.length;\n\n        const isLastCharacter = inputCharIndex === value.length - 1;\n        if (isLastCharacter && nextMaskChar && nextMaskChar !== \"_\") {\n          return formattedChar ? formattedChar + nextMaskChar : \"\";\n        }\n        return formattedChar;\n      })\n      .join(\"\");\n  };\n}\n\nexport function isTimeMatch(value: string, format: string): boolean {\n  return isTimePatternMatch(value, format);\n}\n\nexport function getTimeByFormat(value: string, format: string): Date {\n  const parsed = parseTimeByPattern(value, format);\n  return parsed ?? new Date(Number.NaN);\n}\n\nexport function isValidTimeDate(value: unknown): value is Date {\n  return Object.prototype.toString.call(value) === \"[object Date]\" && !isNaN(value as number);\n}\n\nexport function mergeTime(baseDate: Date, timeDate: Date): Date {\n  return new Date(\n    baseDate.getFullYear(),\n    baseDate.getMonth(),\n    baseDate.getDate(),\n    timeDate.getHours(),\n    timeDate.getMinutes(),\n    timeDate.getSeconds(),\n    0\n  );\n}\n\nexport function mergeDate(date: Date, timeSource: Date): Date {\n  return new Date(\n    date.getFullYear(),\n    date.getMonth(),\n    date.getDate(),\n    timeSource.getHours(),\n    timeSource.getMinutes(),\n    timeSource.getSeconds(),\n    0\n  );\n}\n"],"names":["MASK_DIGIT_REGEXP","MASK_TOKEN_REGEXP","DEFAULT_TIME_FORMAT","getHoursList","_","value","getMinutesList","getSecondsList","setTime","date","hours","minutes","seconds","next","getDisplayTime","format","isValidTimeDate","formatTimeByPattern","getCurrentTimeFormat","getTimeMaskFormat","maskedTimeFormatter","mask","outputCharIndex","char","inputCharIndex","maskChar","nextMaskChar","acceptedChar","formattedChar","isTimeMatch","isTimePatternMatch","getTimeByFormat","parseTimeByPattern","mergeTime","baseDate","timeDate","mergeDate","timeSource"],"mappings":";AAEA,MAAMA,IAAoB,QACpBC,IAAoB,aAEbC,IAAsB;AAE5B,SAASC,IAAmD;AACjE,SAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,CAACC,GAAGC,OAAW,EAAE,OAAAA,GAAO,OAAO,OAAOA,CAAK,EAAE,SAAS,GAAG,GAAG,IAAI;AACpG;AAEO,SAASC,IAAqD;AACnE,SAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,CAACF,GAAGC,OAAW,EAAE,OAAAA,GAAO,OAAO,OAAOA,CAAK,EAAE,SAAS,GAAG,GAAG,IAAI;AACpG;AAEO,SAASE,IAAqD;AACnE,SAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,CAACH,GAAGC,OAAW,EAAE,OAAAA,GAAO,OAAO,OAAOA,CAAK,EAAE,SAAS,GAAG,GAAG,IAAI;AACpG;AAEO,SAASG,EAAQC,GAAYC,GAAeC,GAAiBC,GAAuB;AACzF,QAAMC,IAAO,IAAI,KAAKJ,CAAI;AAC1B,SAAAI,EAAK,SAASH,GAAOC,GAASC,GAAS,CAAC,GACjCC;AACT;AAEO,SAASC,EAAeL,GAAeM,GAAyB;AACrE,SAAKC,EAAgBP,CAAI,IAClBQ,EAAoBR,GAAMM,KAAUb,CAAmB,IAD3B;AAErC;AAEO,SAASgB,EAAqBH,GAAyB;AAC5D,SAAOA,KAAUb;AACnB;AAEO,SAASiB,EAAkBJ,GAAyB;AACzD,SAAOG,EAAqBH,CAAM,EAAE,QAAQd,GAAmB,GAAG;AACpE;AAEO,SAASmB,EAAoBC,GAAyC;AAC3E,SAAO,CAAChB,MAAkB;AACxB,QAAIiB,IAAkB;AACtB,WAAOjB,EACJ,MAAM,EAAE,EACR,IAAI,CAACkB,GAAMC,MAAmB;AAE7B,UADAxB,EAAkB,YAAY,GAC1BsB,IAAkBD,EAAK,SAAS,EAAG,QAAO;AAE9C,YAAMI,IAAWJ,EAAKC,CAAe,GAC/BI,IAAeL,EAAKC,IAAkB,CAAC,GACvCK,IAAe3B,EAAkB,KAAKuB,CAAI,IAAIA,IAAO,IACrDK,IAAgBH,MAAa,MAAME,IAAeF,IAAWE;AAInE,aAHAL,KAAmBM,EAAc,QAETJ,MAAmBnB,EAAM,SAAS,KACnCqB,KAAgBA,MAAiB,MAC/CE,IAAgBA,IAAgBF,IAAe,KAEjDE;AAAA,IACT,CAAC,EACA,KAAK,EAAE;AAAA,EACZ;AACF;AAEO,SAASC,EAAYxB,GAAeU,GAAyB;AAClE,SAAOe,EAAmBzB,GAAOU,CAAM;AACzC;AAEO,SAASgB,EAAgB1B,GAAeU,GAAsB;AAEnE,SADeiB,EAAmB3B,GAAOU,CAAM,KAC9B,IAAI,KAAK,OAAO,GAAG;AACtC;AAEO,SAASC,EAAgBX,GAA+B;AAC7D,SAAO,OAAO,UAAU,SAAS,KAAKA,CAAK,MAAM,mBAAmB,CAAC,MAAMA,CAAe;AAC5F;AAEO,SAAS4B,EAAUC,GAAgBC,GAAsB;AAC9D,SAAO,IAAI;AAAA,IACTD,EAAS,YAAA;AAAA,IACTA,EAAS,SAAA;AAAA,IACTA,EAAS,QAAA;AAAA,IACTC,EAAS,SAAA;AAAA,IACTA,EAAS,WAAA;AAAA,IACTA,EAAS,WAAA;AAAA,IACT;AAAA,EAAA;AAEJ;AAEO,SAASC,EAAU3B,GAAY4B,GAAwB;AAC5D,SAAO,IAAI;AAAA,IACT5B,EAAK,YAAA;AAAA,IACLA,EAAK,SAAA;AAAA,IACLA,EAAK,QAAA;AAAA,IACL4B,EAAW,SAAA;AAAA,IACXA,EAAW,WAAA;AAAA,IACXA,EAAW,WAAA;AAAA,IACX;AAAA,EAAA;AAEJ;"}

package/dist/components/inputs/timePicker/useTimeInput.d.ts

@@ -0,0 +1,19 @@
+import { type Accessor } from "solid-js";
+export interface CreateTimeInputProps {
+    value?: Date | string | undefined;
+    onChange?: ((event?: Event, value?: Date) => void) | undefined;
+    onBlur?: ((event?: FocusEvent, value?: Date) => void) | undefined;
+    format?: string | undefined;
+}
+export interface TimeInputState {
+    value: Accessor<string>;
+    onInput: (event: InputEvent & {
+        currentTarget: HTMLInputElement;
+        target: Element;
+    }) => void;
+    onBlur: () => void;
+    ref: (el: HTMLInputElement) => void;
+    placeholder: Accessor<string>;
+}
+/** Solid port of useTimeInput — masked text input bound to a Date value. */
+export declare function createTimeInput(props: CreateTimeInputProps): TimeInputState;

package/dist/components/inputs/timePicker/useTimeInput.js

@@ -0,0 +1,29 @@
+import { createSignal as d, createEffect as g } from "solid-js";
+import { getDisplayTime as n, DEFAULT_TIME_FORMAT as v, isTimeMatch as r, getTimeByFormat as l, maskedTimeFormatter as T, getTimeMaskFormat as h, getCurrentTimeFormat as s } from "./timeUtils.js";
+import { createMaskedInput as C } from "../../../primitives/createMaskedInput.js";
+function M(t) {
+  const a = () => s(t.format), [m, o] = d(n(t.value, t.format)), u = () => T(h(t.format));
+  let i;
+  g(() => {
+    const e = t.value;
+    e !== i && (i = e, o(n(e, t.format)));
+  });
+  const f = C({ value: m, onChange: (e) => {
+    o(e), t.onChange && (r(e, a()) ? t.onChange(void 0, l(e, a())) : e === "" && t.onChange(void 0));
+  }, format: (e) => u()(e) }), c = () => {
+    if (!t.onBlur) return;
+    const e = i;
+    e instanceof Date && r(n(e, t.format), a()) ? t.onBlur(void 0, e) : typeof e == "string" && r(e, a()) ? t.onBlur(void 0, l(e, a())) : (e === void 0 || e === "") && t.onBlur(void 0), o(n(t.value, t.format));
+  };
+  return {
+    value: m,
+    onInput: f.onInput,
+    onBlur: c,
+    ref: f.ref,
+    placeholder: () => (t.format ?? v).toLowerCase()
+  };
+}
+export {
+  M as createTimeInput
+};
+//# sourceMappingURL=useTimeInput.js.map

package/dist/components/inputs/timePicker/useTimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeInput.js","sources":["../../../../src/components/inputs/timePicker/useTimeInput.ts"],"sourcesContent":["import { type Accessor, createEffect, createSignal } from \"solid-js\";\nimport {\n  DEFAULT_TIME_FORMAT,\n  getCurrentTimeFormat,\n  getDisplayTime,\n  getTimeByFormat,\n  getTimeMaskFormat,\n  isTimeMatch,\n  maskedTimeFormatter,\n} from \"./timeUtils\";\nimport { createMaskedInput } from \"../../../primitives/createMaskedInput\";\n\nexport interface CreateTimeInputProps {\n  value?: Date | string | undefined;\n  onChange?: ((event?: Event, value?: Date) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date) => void) | undefined;\n  format?: string | undefined;\n}\n\nexport interface TimeInputState {\n  value: Accessor<string>;\n  onInput: (event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => void;\n  onBlur: () => void;\n  ref: (el: HTMLInputElement) => void;\n  placeholder: Accessor<string>;\n}\n\n/** Solid port of useTimeInput — masked text input bound to a Date value. */\nexport function createTimeInput(props: CreateTimeInputProps): TimeInputState {\n  const currentFormatTime = (): string => getCurrentTimeFormat(props.format);\n  const [displayedValue, setDisplayedValue] = createSignal(getDisplayTime(props.value, props.format));\n  const formatter = (): ((value: string) => string) => maskedTimeFormatter(getTimeMaskFormat(props.format));\n\n  let prevValue: Date | string | undefined;\n\n  createEffect(() => {\n    const v = props.value;\n    if (v !== prevValue) {\n      prevValue = v;\n      setDisplayedValue(getDisplayTime(v, props.format));\n    }\n  });\n\n  const onChange = (value: string): void => {\n    setDisplayedValue(value);\n    if (!props.onChange) return;\n    if (isTimeMatch(value, currentFormatTime())) {\n      props.onChange(undefined, getTimeByFormat(value, currentFormatTime()));\n    } else if (value === \"\") {\n      props.onChange(undefined);\n    }\n  };\n\n  const masked = createMaskedInput({ value: displayedValue, onChange, format: (v) => formatter()(v) });\n\n  const onBlur = (): void => {\n    if (!props.onBlur) return;\n    const prev = prevValue;\n    if (prev instanceof Date && isTimeMatch(getDisplayTime(prev, props.format), currentFormatTime())) {\n      props.onBlur(undefined, prev);\n    } else if (typeof prev === \"string\" && isTimeMatch(prev, currentFormatTime())) {\n      props.onBlur(undefined, getTimeByFormat(prev, currentFormatTime()));\n    } else if (prev === undefined || prev === \"\") {\n      props.onBlur(undefined);\n    }\n    setDisplayedValue(getDisplayTime(props.value, props.format));\n  };\n\n  return {\n    value: displayedValue,\n    onInput: masked.onInput,\n    onBlur,\n    ref: masked.ref,\n    placeholder: () => (props.format ?? DEFAULT_TIME_FORMAT).toLowerCase(),\n  };\n}\n"],"names":["createTimeInput","props","currentFormatTime","getCurrentTimeFormat","displayedValue","setDisplayedValue","createSignal","getDisplayTime","formatter","maskedTimeFormatter","getTimeMaskFormat","prevValue","createEffect","v","masked","createMaskedInput","value","isTimeMatch","getTimeByFormat","onBlur","prev","DEFAULT_TIME_FORMAT"],"mappings":";;;AA4BO,SAASA,EAAgBC,GAA6C;AAC3E,QAAMC,IAAoB,MAAcC,EAAqBF,EAAM,MAAM,GACnE,CAACG,GAAgBC,CAAiB,IAAIC,EAAaC,EAAeN,EAAM,OAAOA,EAAM,MAAM,CAAC,GAC5FO,IAAY,MAAmCC,EAAoBC,EAAkBT,EAAM,MAAM,CAAC;AAExG,MAAIU;AAEJ,EAAAC,EAAa,MAAM;AACjB,UAAMC,IAAIZ,EAAM;AAChB,IAAIY,MAAMF,MACRA,IAAYE,GACZR,EAAkBE,EAAeM,GAAGZ,EAAM,MAAM,CAAC;AAAA,EAErD,CAAC;AAYD,QAAMa,IAASC,EAAkB,EAAE,OAAOX,GAAgB,UAVzC,CAACY,MAAwB;AAExC,IADAX,EAAkBW,CAAK,GAClBf,EAAM,aACPgB,EAAYD,GAAOd,EAAA,CAAmB,IACxCD,EAAM,SAAS,QAAWiB,EAAgBF,GAAOd,EAAA,CAAmB,CAAC,IAC5Dc,MAAU,MACnBf,EAAM,SAAS,MAAS;AAAA,EAE5B,GAEoE,QAAQ,CAACY,MAAML,IAAYK,CAAC,GAAG,GAE7FM,IAAS,MAAY;AACzB,QAAI,CAAClB,EAAM,OAAQ;AACnB,UAAMmB,IAAOT;AACb,IAAIS,aAAgB,QAAQH,EAAYV,EAAea,GAAMnB,EAAM,MAAM,GAAGC,EAAA,CAAmB,IAC7FD,EAAM,OAAO,QAAWmB,CAAI,IACnB,OAAOA,KAAS,YAAYH,EAAYG,GAAMlB,EAAA,CAAmB,IAC1ED,EAAM,OAAO,QAAWiB,EAAgBE,GAAMlB,EAAA,CAAmB,CAAC,KACzDkB,MAAS,UAAaA,MAAS,OACxCnB,EAAM,OAAO,MAAS,GAExBI,EAAkBE,EAAeN,EAAM,OAAOA,EAAM,MAAM,CAAC;AAAA,EAC7D;AAEA,SAAO;AAAA,IACL,OAAOG;AAAA,IACP,SAASU,EAAO;AAAA,IAChB,QAAAK;AAAA,IACA,KAAKL,EAAO;AAAA,IACZ,aAAa,OAAOb,EAAM,UAAUoB,GAAqB,YAAA;AAAA,EAAY;AAEzE;"}

package/dist/components/inputs/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { Toggle, default } from "./toggle";
+export type { ToggleProps } from "./toggle";

package/dist/components/inputs/toggle/toggle.d.ts

@@ -0,0 +1,21 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+import type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from "../checkbox/checkbox";
+export interface ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> {
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    checked?: boolean;
+    id?: string;
+    label?: string;
+    labelPlacement?: "top" | "left" | "right";
+    size?: SelectionControlSize;
+    color?: SelectionControlColor;
+    /** Unified handler: `(event, checked, data)`. */
+    onChange?: (event: SelectionChangeEvent, checked: boolean, data: ToggleProps) => void;
+    helperText?: JSX.Element;
+    error?: boolean;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function Toggle(props: ToggleProps): JSX.Element;
+export default Toggle;

package/dist/components/inputs/toggle/toggle.js

@@ -0,0 +1,83 @@
+import { createComponent as c, insert as g, setAttribute as m, use as w, spread as v, mergeProps as k, effect as x, className as b, template as u } from "solid-js/web";
+import '../../../assets/styles/less/components/toggle/toggle.entry.css';/* empty css                                                       */
+import { mergeProps as y, splitProps as $, Show as C } from "solid-js";
+import p from "clsx";
+import { TextFieldWrapper as P } from "../textField/textFieldWrapper.js";
+import { createId as T } from "../../../primitives/createId.js";
+import { mergeRefs as q } from "../../../primitives/mergeRefs.js";
+var z = /* @__PURE__ */ u("<label class=smwb-toggle__label>"), O = /* @__PURE__ */ u("<span><label><input type=checkbox class=smwb-toggle__checkbox role=switch><span class=smwb-toggle__track></span><span class=smwb-toggle__thumb>");
+function W(o) {
+  const h = y({
+    size: "medium",
+    color: "primary"
+  }, o), [e, f] = $(h, ["disabled", "readOnly", "required", "checked", "class", "id", "label", "labelPlacement", "size", "color", "helperText", "error", "onChange", "ref"]), s = T(e.id), _ = (t) => {
+    if (e.readOnly) {
+      t.preventDefault();
+      return;
+    }
+    e.onChange?.(t, t.currentTarget.checked, o);
+  };
+  return c(P, {
+    get helperText() {
+      return e.helperText;
+    },
+    get disabled() {
+      return e.disabled;
+    },
+    get error() {
+      return e.error;
+    },
+    class: "smwb-text-field-checkbox",
+    get children() {
+      var t = O(), l = t.firstChild, a = l.firstChild;
+      g(t, c(C, {
+        get when() {
+          return e.label;
+        },
+        get children() {
+          var r = z();
+          return m(r, "for", s), g(r, () => e.label), r;
+        }
+      }), l);
+      var i = q(e.ref);
+      return typeof i == "function" && w(i, a), m(a, "id", s), v(a, k({
+        get "aria-checked"() {
+          return e.checked;
+        },
+        get "aria-invalid"() {
+          return e.error || void 0;
+        },
+        get "aria-required"() {
+          return e.required || void 0;
+        },
+        get checked() {
+          return e.checked;
+        },
+        get disabled() {
+          return e.disabled;
+        },
+        get readonly() {
+          return e.readOnly;
+        },
+        get required() {
+          return e.required;
+        }
+      }, f, {
+        onChange: _
+      }), !1, !1), x((r) => {
+        var n = p("smwb-toggle__wrapper", e.labelPlacement && `smwb-toggle__wrapper_label-${e.labelPlacement}`), d = p("smwb-toggle", `smwb-toggle_size-${e.size}`, `smwb-toggle_color-${e.color}`, e.class, {
+          "smwb-disabled": e.disabled,
+          "smwb-readonly": e.readOnly
+        });
+        return n !== r.e && b(t, r.e = n), d !== r.t && b(l, r.t = d), r;
+      }, {
+        e: void 0,
+        t: void 0
+      }), t;
+    }
+  });
+}
+export {
+  W as Toggle
+};
+//# sourceMappingURL=toggle.js.map

package/dist/components/inputs/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sources":["../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  checked?: boolean;\n  id?: string;\n  label?: string;\n  labelPlacement?: \"top\" | \"left\" | \"right\";\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: ToggleProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Toggle(props: ToggleProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"disabled\",\n    \"readOnly\",\n    \"required\",\n    \"checked\",\n    \"class\",\n    \"id\",\n    \"label\",\n    \"labelPlacement\",\n    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"onChange\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    if (local.readOnly) {\n      event.preventDefault();\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={local.helperText}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <span class={cn(\"smwb-toggle__wrapper\", local.labelPlacement && `smwb-toggle__wrapper_label-${local.labelPlacement}`)}>\n        <Show when={local.label}>\n          <label for={id} class=\"smwb-toggle__label\">\n            {local.label}\n          </label>\n        </Show>\n        <label\n          class={cn(\"smwb-toggle\", `smwb-toggle_size-${local.size}`, `smwb-toggle_color-${local.color}`, local.class, {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            class=\"smwb-toggle__checkbox\"\n            aria-checked={local.checked}\n            aria-invalid={local.error || undefined}\n            aria-required={local.required || undefined}\n            role=\"switch\"\n            checked={local.checked}\n            disabled={local.disabled}\n            readonly={local.readOnly}\n            required={local.required}\n            ref={mergeRefs(local.ref)}\n            {...args}\n            onChange={handleChange}\n          />\n          <span class=\"smwb-toggle__track\" />\n          <span class=\"smwb-toggle__thumb\" />\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Toggle;\n"],"names":["Toggle","props","merged","mergeProps","size","color","local","args","splitProps","id","createId","handleChange","event","readOnly","preventDefault","onChange","currentTarget","checked","_$createComponent","TextFieldWrapper","helperText","disabled","error","children","_el$","_tmpl$2","_el$3","firstChild","_el$4","_$insert","Show","when","label","_el$2","_tmpl$","_$setAttribute","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","undefined","required","readonly","_$effect","_p$","_v$","cn","labelPlacement","_v$2","class","e","_$className","t"],"mappings":";;;;;;;;AAyBO,SAASA,EAAOC,GAAiC;AACtD,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAkCC,OAAO;AAAA,EAAA,GAAsCJ,CAAK,GAChH,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,YACA,YACA,YACA,WACA,SACA,MACA,SACA,kBACA,QACA,SACA,cACA,SACA,YACA,KAAK,CACN,GACKO,IAAKC,EAASJ,EAAMG,EAAE,GAEtBE,IAA2DC,CAAAA,MAAU;AACzE,QAAIN,EAAMO,UAAU;AAClBD,MAAAA,EAAME,eAAAA;AACN;AAAA,IACF;AACAR,IAAAA,EAAMS,WAAWH,GAAOA,EAAMI,cAAcC,SAAShB,CAAK;AAAA,EAC5D;AAEA,SAAAiB,EACGC,GAAgB;AAAA,IAAA,IACfC,aAAU;AAAA,aAAEd,EAAMc;AAAAA,IAAU;AAAA,IAAA,IAC5BC,WAAQ;AAAA,aAAEf,EAAMe;AAAAA,IAAQ;AAAA,IAAA,IACxBC,QAAK;AAAA,aAAEhB,EAAMgB;AAAAA,IAAK;AAAA,IAAA,OAAA;AAAA,IAAA,IAAAC,WAAA;AAAA,UAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC;AAAAE,MAAAA,EAAAL,GAAAN,EAIfY,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEzB,EAAM0B;AAAAA,QAAK;AAAA,QAAA,IAAAT,WAAA;AAAA,cAAAU,IAAAC,EAAAA;AAAAC,iBAAAA,EAAAF,GAAA,OACTxB,CAAE,GAAAoB,EAAAI,GAAA,MACX3B,EAAM0B,KAAK,GAAAC;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAAP,CAAA;AAAA,UAAAU,IAqBPC,EAAU/B,EAAMgC,GAAG;AAAC,oBAAAF,KAAA,cAAAG,EAAAH,GAAAR,CAAA,GAAAO,EAAAP,GAAA,MAVrBnB,CAAE,GAAA+B,EAAAZ,GAAAa,EAAA;AAAA,QAAA,IAAA,iBAAA;AAAA,iBAEQnC,EAAMW;AAAAA,QAAO;AAAA,QAAA,IAAA,iBAAA;AAAA,iBACbX,EAAMgB,SAASoB;AAAAA,QAAS;AAAA,QAAA,IAAA,kBAAA;AAAA,iBACvBpC,EAAMqC,YAAYD;AAAAA,QAAS;AAAA,QAAA,IAE1CzB,UAAO;AAAA,iBAAEX,EAAMW;AAAAA,QAAO;AAAA,QAAA,IACtBI,WAAQ;AAAA,iBAAEf,EAAMe;AAAAA,QAAQ;AAAA,QAAA,IACxBuB,WAAQ;AAAA,iBAAEtC,EAAMO;AAAAA,QAAQ;AAAA,QAAA,IACxB8B,WAAQ;AAAA,iBAAErC,EAAMqC;AAAAA,QAAQ;AAAA,MAAA,GAEpBpC,GAAI;AAAA,QAAA,UACEI;AAAAA,MAAAA,CAAY,GAAA,IAAA,EAAA,GAAAkC,EAAAC,CAAAA,MAAA;AAAA,YAAAC,IA1BfC,EAAG,wBAAwB1C,EAAM2C,kBAAkB,8BAA8B3C,EAAM2C,cAAc,EAAE,GAACC,IAO1GF,EAAG,eAAe,oBAAoB1C,EAAMF,IAAI,IAAI,qBAAqBE,EAAMD,KAAK,IAAIC,EAAM6C,OAAO;AAAA,UAC1G,iBAAiB7C,EAAMe;AAAAA,UACvB,iBAAiBf,EAAMO;AAAAA,QAAAA,CACxB;AAACkC,eAAAA,MAAAD,EAAAM,KAAAC,EAAA7B,GAAAsB,EAAAM,IAAAL,CAAA,GAAAG,MAAAJ,EAAAQ,KAAAD,EAAA3B,GAAAoB,EAAAQ,IAAAJ,CAAA,GAAAJ;AAAAA,MAAA,GAAA;AAAA,QAAAM,GAAAV;AAAAA,QAAAY,GAAAZ;AAAAA,MAAAA,CAAA,GAAAlB;AAAAA,IAAA;AAAA,EAAA,CAAA;AAwBZ;"}

package/dist/components/layout/appLayout/appLayout.d.ts

@@ -0,0 +1,31 @@
+import { type JSX, type ParentProps } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /** Top bar slot (e.g. <AppBar />). Spans full width. */
+    header?: JSX.Element;
+    /** Side navigation slot (e.g. <Sidebar />). */
+    sidebar?: JSX.Element;
+    /** Footer slot, below the content. */
+    footer?: JSX.Element;
+    /** Sidebar width (px or any CSS length). */
+    sidebarWidth?: number | string;
+    /** Controlled collapsed state of the sidebar rail. */
+    sidebarCollapsed?: boolean;
+    /** Initial collapsed state (uncontrolled). */
+    defaultSidebarCollapsed?: boolean;
+    /** Called whenever the collapsed state changes. */
+    onSidebarCollapsedChange?: (collapsed: boolean) => void;
+    /** Renders a built-in toggle button to collapse/expand the sidebar. */
+    collapsible?: boolean;
+    /** Custom toggle node replacing the default icon button. */
+    collapseToggle?: JSX.Element;
+    /** Accessible label for the default toggle button. */
+    collapseToggleAriaLabel?: string;
+    /** Sidebar collapsed width. */
+    sidebarCollapsedWidth?: number | string;
+    /** Keep the header pinned while content scrolls. */
+    stickyHeader?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element;
+export default AppLayout;