@smwb/ui-solid 0.3.0 → 0.4.0

package/dist/source/components/inputs/timePicker/timePickerInput.jsx

@@ -0,0 +1,57 @@
+import { Show, splitProps } from "solid-js";
+import { TextField } from "../textField";
+import { DatePickerIconButton } from "../datePicker/datePickerIconButton";
+import { createTimeInput } from "./useTimeInput";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function stopPropagation(event) {
+  event.stopPropagation();
+}
+function TimePickerInput(props) {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onChange",
+    "onBlur",
+    "onToggle",
+    "disabled",
+    "disableClock",
+    "clockIcon",
+    "format",
+    "ref"
+  ]);
+  const masked = createTimeInput({
+    value: local.value,
+    onChange: local.onChange,
+    onBlur: local.onBlur,
+    format: local.format
+  });
+  return <TextField
+    ref={mergeRefs(local.ref, masked.ref)}
+    value={masked.value()}
+    onChange={masked.onInput}
+    onBlur={masked.onBlur}
+    placeholder={masked.placeholder()}
+    type="tel"
+    endAdornment={<Show when={!local.disableClock}>
+          <DatePickerIconButton
+      edge="end"
+      onClick={() => local.onToggle()}
+      onMouseDown={stopPropagation}
+      disabled={Boolean(local.disabled)}
+      data-testid="time-picker-icon-button"
+    >
+            <Show when={local.clockIcon} fallback={<Icon name="schedule" fill={1} weight={500} size={24} />}>
+              {local.clockIcon}
+            </Show>
+          </DatePickerIconButton>
+        </Show>}
+    disabled={Boolean(local.disabled)}
+    {...rest}
+  />;
+}
+var timePickerInput_default = TimePickerInput;
+export {
+  TimePickerInput,
+  timePickerInput_default as default
+};
+//# sourceMappingURL=timePickerInput.js.map

package/dist/source/components/inputs/timePicker/timePickerInput.jsx.map

@@ -0,0 +1 @@
+{"version":3,"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"],"mappings":"AAAA,SAAmB,MAAM,kBAAkB;AAC3C,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAQpC,SAAS,gBAAgB,OAAoB;AAC3C,QAAM,gBAAgB;AACxB;AAEO,SAAS,gBAAgB,OAA0C;AACxE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,SAAS,gBAAgB;AAAA,IAC7B,OAAO,MAAM;AAAA,IACb,UAAU,MAAM;AAAA,IAChB,QAAQ,MAAM;AAAA,IACd,QAAQ,MAAM;AAAA,EAChB,CAAC;AAED,SACE,CAAC;AAAA,IACC,KAAK,UAAU,MAAM,KAAK,OAAO,GAAG;AAAA,IACpC,OAAO,OAAO,MAAM;AAAA,IACpB,UAAU,OAAO;AAAA,IACjB,QAAQ,OAAO;AAAA,IACf,aAAa,OAAO,YAAY;AAAA,IAChC,KAAK;AAAA,IACL,cACE,CAAC,KAAK,MAAM,CAAC,MAAM,cAAc;AAAA,UAC/B,CAAC;AAAA,MACC,KAAK;AAAA,MACL,SAAS,MAAM,MAAM,SAAS;AAAA,MAC9B,aAAa;AAAA,MACb,UAAU,QAAQ,MAAM,QAAQ;AAAA,MAChC,YAAY;AAAA,KACb;AAAA,YACC,CAAC,KAAK,MAAM,MAAM,WAAW,UAAU,CAAC,KAAK,KAAK,WAAW,MAAM,GAAG,QAAQ,KAAK,MAAM,IAAI,IAAI;AAAA,eAC9F,MAAM,UAAU;AAAA,YACnB,EAFC,KAEM;AAAA,UACT,EAVC,qBAUsB;AAAA,QACzB,EAZC;AAAA,IAcH,UAAU,QAAQ,MAAM,QAAQ;AAAA,QAC5B;AAAA,EACN;AAEJ;AAEA,IAAO,0BAAQ;","names":[],"file":"timePickerInput.jsx"}

package/dist/source/components/inputs/timePicker/timePickerList.jsx

@@ -0,0 +1,36 @@
+import { For, createEffect, on } from "solid-js";
+import cn from "clsx";
+function TimePickerList(props) {
+  let overflowEl;
+  createEffect(
+    on(
+      () => props.value,
+      () => {
+        if (!overflowEl) return;
+        const selected = overflowEl.querySelector(".smwb-time-picker__item--selected");
+        if (selected) {
+          const middle = (overflowEl.offsetHeight - selected.offsetHeight) / 2;
+          overflowEl.scrollTop = selected.offsetTop - middle;
+        }
+      }
+    )
+  );
+  return <div class="smwb-time-picker__overflow" ref={(el) => overflowEl = el} data-testid="time-picker-list">
+      <ul class="smwb-time-picker__list">
+        <For each={props.items}>
+          {(item) => <li
+    class={cn("smwb-time-picker__item", { "smwb-time-picker__item--selected": props.value === item.value })}
+    onClick={() => props.onChange(item.value)}
+  >
+              {item.label}
+            </li>}
+        </For>
+      </ul>
+    </div>;
+}
+var timePickerList_default = TimePickerList;
+export {
+  TimePickerList,
+  timePickerList_default as default
+};
+//# sourceMappingURL=timePickerList.js.map

package/dist/source/components/inputs/timePicker/timePickerList.jsx.map

@@ -0,0 +1 @@
+{"version":3,"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"],"mappings":"AAAA,SAAmB,KAAK,cAAc,UAAU;AAChD,OAAO,QAAQ;AAaR,SAAS,eAAe,OAAyC;AACtE,MAAI;AAEJ;AAAA,IACE;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,MAAM;AACJ,YAAI,CAAC,WAAY;AACjB,cAAM,WAAW,WAAW,cAA2B,mCAAmC;AAC1F,YAAI,UAAU;AACZ,gBAAM,UAAU,WAAW,eAAe,SAAS,gBAAgB;AACnE,qBAAW,YAAY,SAAS,YAAY;AAAA,QAC9C;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE,CAAC,IAAI,MAAM,6BAA6B,KAAK,CAAC,OAAQ,aAAa,IAAK,YAAY,mBAAmB;AAAA,MACrG,CAAC,GAAG,MAAM,yBAAyB;AAAA,QACjC,CAAC,IAAI,MAAM,MAAM,OAAO;AAAA,WACrB,CAAC,SACA,CAAC;AAAA,IACC,OAAO,GAAG,0BAA0B,EAAE,oCAAoC,MAAM,UAAU,KAAK,MAAM,CAAC;AAAA,IACtG,SAAS,MAAM,MAAM,SAAS,KAAK,KAAK;AAAA,GACzC;AAAA,eACE,KAAK,MAAM;AAAA,YACd,EALC,IAMD;AAAA,QACJ,EATC,IASK;AAAA,MACR,EAXC,GAWI;AAAA,IACP,EAbC;AAeL;AAEA,IAAO,yBAAQ;","names":[],"file":"timePickerList.jsx"}

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

@@ -0,0 +1,96 @@
+import { formatTimeByPattern, isTimePatternMatch, parseTimeByPattern } from "./timeFormat";
+const MASK_DIGIT_REGEXP = /\d/gi;
+const MASK_TOKEN_REGEXP = /[a-zA-Z]/g;
+const DEFAULT_TIME_FORMAT = "HH:mm";
+function getHoursList() {
+  return Array.from({ length: 24 }, (_, value) => ({ value, label: String(value).padStart(2, "0") }));
+}
+function getMinutesList() {
+  return Array.from({ length: 60 }, (_, value) => ({ value, label: String(value).padStart(2, "0") }));
+}
+function getSecondsList() {
+  return Array.from({ length: 60 }, (_, value) => ({ value, label: String(value).padStart(2, "0") }));
+}
+function setTime(date, hours, minutes, seconds) {
+  const next = new Date(date);
+  next.setHours(hours, minutes, seconds, 0);
+  return next;
+}
+function getDisplayTime(date, format) {
+  if (!isValidTimeDate(date)) return "";
+  return formatTimeByPattern(date, format ?? DEFAULT_TIME_FORMAT);
+}
+function getCurrentTimeFormat(format) {
+  return format ?? DEFAULT_TIME_FORMAT;
+}
+function getTimeMaskFormat(format) {
+  return getCurrentTimeFormat(format).replace(MASK_TOKEN_REGEXP, "_");
+}
+function maskedTimeFormatter(mask) {
+  return (value) => {
+    let outputCharIndex = 0;
+    return value.split("").map((char, inputCharIndex) => {
+      MASK_DIGIT_REGEXP.lastIndex = 0;
+      if (outputCharIndex > mask.length - 1) return "";
+      const maskChar = mask[outputCharIndex];
+      const nextMaskChar = mask[outputCharIndex + 1];
+      const acceptedChar = MASK_DIGIT_REGEXP.test(char) ? char : "";
+      const formattedChar = maskChar === "_" ? acceptedChar : maskChar + acceptedChar;
+      outputCharIndex += formattedChar.length;
+      const isLastCharacter = inputCharIndex === value.length - 1;
+      if (isLastCharacter && nextMaskChar && nextMaskChar !== "_") {
+        return formattedChar ? formattedChar + nextMaskChar : "";
+      }
+      return formattedChar;
+    }).join("");
+  };
+}
+function isTimeMatch(value, format) {
+  return isTimePatternMatch(value, format);
+}
+function getTimeByFormat(value, format) {
+  const parsed = parseTimeByPattern(value, format);
+  return parsed ?? new Date(Number.NaN);
+}
+function isValidTimeDate(value) {
+  return Object.prototype.toString.call(value) === "[object Date]" && !isNaN(value);
+}
+function mergeTime(baseDate, timeDate) {
+  return new Date(
+    baseDate.getFullYear(),
+    baseDate.getMonth(),
+    baseDate.getDate(),
+    timeDate.getHours(),
+    timeDate.getMinutes(),
+    timeDate.getSeconds(),
+    0
+  );
+}
+function mergeDate(date, timeSource) {
+  return new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+    timeSource.getHours(),
+    timeSource.getMinutes(),
+    timeSource.getSeconds(),
+    0
+  );
+}
+export {
+  DEFAULT_TIME_FORMAT,
+  getCurrentTimeFormat,
+  getDisplayTime,
+  getHoursList,
+  getMinutesList,
+  getSecondsList,
+  getTimeByFormat,
+  getTimeMaskFormat,
+  isTimeMatch,
+  isValidTimeDate,
+  maskedTimeFormatter,
+  mergeDate,
+  mergeTime,
+  setTime
+};
+//# sourceMappingURL=timeUtils.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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"],
+  "mappings": "AAAA,SAAS,qBAAqB,oBAAoB,0BAA0B;AAE5E,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAEnB,MAAM,sBAAsB;AAE5B,SAAS,eAAmD;AACjE,SAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,WAAW,EAAE,OAAO,OAAO,OAAO,KAAK,EAAE,SAAS,GAAG,GAAG,EAAE,EAAE;AACpG;AAEO,SAAS,iBAAqD;AACnE,SAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,WAAW,EAAE,OAAO,OAAO,OAAO,KAAK,EAAE,SAAS,GAAG,GAAG,EAAE,EAAE;AACpG;AAEO,SAAS,iBAAqD;AACnE,SAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,WAAW,EAAE,OAAO,OAAO,OAAO,KAAK,EAAE,SAAS,GAAG,GAAG,EAAE,EAAE;AACpG;AAEO,SAAS,QAAQ,MAAY,OAAe,SAAiB,SAAuB;AACzF,QAAM,OAAO,IAAI,KAAK,IAAI;AAC1B,OAAK,SAAS,OAAO,SAAS,SAAS,CAAC;AACxC,SAAO;AACT;AAEO,SAAS,eAAe,MAAe,QAAyB;AACrE,MAAI,CAAC,gBAAgB,IAAI,EAAG,QAAO;AACnC,SAAO,oBAAoB,MAAM,UAAU,mBAAmB;AAChE;AAEO,SAAS,qBAAqB,QAAyB;AAC5D,SAAO,UAAU;AACnB;AAEO,SAAS,kBAAkB,QAAyB;AACzD,SAAO,qBAAqB,MAAM,EAAE,QAAQ,mBAAmB,GAAG;AACpE;AAEO,SAAS,oBAAoB,MAAyC;AAC3E,SAAO,CAAC,UAAkB;AACxB,QAAI,kBAAkB;AACtB,WAAO,MACJ,MAAM,EAAE,EACR,IAAI,CAAC,MAAM,mBAAmB;AAC7B,wBAAkB,YAAY;AAC9B,UAAI,kBAAkB,KAAK,SAAS,EAAG,QAAO;AAE9C,YAAM,WAAW,KAAK,eAAe;AACrC,YAAM,eAAe,KAAK,kBAAkB,CAAC;AAC7C,YAAM,eAAe,kBAAkB,KAAK,IAAI,IAAI,OAAO;AAC3D,YAAM,gBAAgB,aAAa,MAAM,eAAe,WAAW;AACnE,yBAAmB,cAAc;AAEjC,YAAM,kBAAkB,mBAAmB,MAAM,SAAS;AAC1D,UAAI,mBAAmB,gBAAgB,iBAAiB,KAAK;AAC3D,eAAO,gBAAgB,gBAAgB,eAAe;AAAA,MACxD;AACA,aAAO;AAAA,IACT,CAAC,EACA,KAAK,EAAE;AAAA,EACZ;AACF;AAEO,SAAS,YAAY,OAAe,QAAyB;AAClE,SAAO,mBAAmB,OAAO,MAAM;AACzC;AAEO,SAAS,gBAAgB,OAAe,QAAsB;AACnE,QAAM,SAAS,mBAAmB,OAAO,MAAM;AAC/C,SAAO,UAAU,IAAI,KAAK,OAAO,GAAG;AACtC;AAEO,SAAS,gBAAgB,OAA+B;AAC7D,SAAO,OAAO,UAAU,SAAS,KAAK,KAAK,MAAM,mBAAmB,CAAC,MAAM,KAAe;AAC5F;AAEO,SAAS,UAAU,UAAgB,UAAsB;AAC9D,SAAO,IAAI;AAAA,IACT,SAAS,YAAY;AAAA,IACrB,SAAS,SAAS;AAAA,IAClB,SAAS,QAAQ;AAAA,IACjB,SAAS,SAAS;AAAA,IAClB,SAAS,WAAW;AAAA,IACpB,SAAS,WAAW;AAAA,IACpB;AAAA,EACF;AACF;AAEO,SAAS,UAAU,MAAY,YAAwB;AAC5D,SAAO,IAAI;AAAA,IACT,KAAK,YAAY;AAAA,IACjB,KAAK,SAAS;AAAA,IACd,KAAK,QAAQ;AAAA,IACb,WAAW,SAAS;AAAA,IACpB,WAAW,WAAW;AAAA,IACtB,WAAW,WAAW;AAAA,IACtB;AAAA,EACF;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,57 @@
+import { createEffect, createSignal } from "solid-js";
+import {
+  DEFAULT_TIME_FORMAT,
+  getCurrentTimeFormat,
+  getDisplayTime,
+  getTimeByFormat,
+  getTimeMaskFormat,
+  isTimeMatch,
+  maskedTimeFormatter
+} from "./timeUtils";
+import { createMaskedInput } from "../../../primitives/createMaskedInput";
+function createTimeInput(props) {
+  const currentFormatTime = () => getCurrentTimeFormat(props.format);
+  const [displayedValue, setDisplayedValue] = createSignal(getDisplayTime(props.value, props.format));
+  const formatter = () => maskedTimeFormatter(getTimeMaskFormat(props.format));
+  let prevValue;
+  createEffect(() => {
+    const v = props.value;
+    if (v !== prevValue) {
+      prevValue = v;
+      setDisplayedValue(getDisplayTime(v, props.format));
+    }
+  });
+  const onChange = (value) => {
+    setDisplayedValue(value);
+    if (!props.onChange) return;
+    if (isTimeMatch(value, currentFormatTime())) {
+      props.onChange(void 0, getTimeByFormat(value, currentFormatTime()));
+    } else if (value === "") {
+      props.onChange(void 0);
+    }
+  };
+  const masked = createMaskedInput({ value: displayedValue, onChange, format: (v) => formatter()(v) });
+  const onBlur = () => {
+    if (!props.onBlur) return;
+    const prev = prevValue;
+    if (prev instanceof Date && isTimeMatch(getDisplayTime(prev, props.format), currentFormatTime())) {
+      props.onBlur(void 0, prev);
+    } else if (typeof prev === "string" && isTimeMatch(prev, currentFormatTime())) {
+      props.onBlur(void 0, getTimeByFormat(prev, currentFormatTime()));
+    } else if (prev === void 0 || prev === "") {
+      props.onBlur(void 0);
+    }
+    setDisplayedValue(getDisplayTime(props.value, props.format));
+  };
+  return {
+    value: displayedValue,
+    onInput: masked.onInput,
+    onBlur,
+    ref: masked.ref,
+    placeholder: () => (props.format ?? DEFAULT_TIME_FORMAT).toLowerCase()
+  };
+}
+export {
+  createTimeInput
+};
+//# sourceMappingURL=useTimeInput.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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 \u2014 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"],
+  "mappings": "AAAA,SAAwB,cAAc,oBAAoB;AAC1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAkB3B,SAAS,gBAAgB,OAA6C;AAC3E,QAAM,oBAAoB,MAAc,qBAAqB,MAAM,MAAM;AACzE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAa,eAAe,MAAM,OAAO,MAAM,MAAM,CAAC;AAClG,QAAM,YAAY,MAAmC,oBAAoB,kBAAkB,MAAM,MAAM,CAAC;AAExG,MAAI;AAEJ,eAAa,MAAM;AACjB,UAAM,IAAI,MAAM;AAChB,QAAI,MAAM,WAAW;AACnB,kBAAY;AACZ,wBAAkB,eAAe,GAAG,MAAM,MAAM,CAAC;AAAA,IACnD;AAAA,EACF,CAAC;AAED,QAAM,WAAW,CAAC,UAAwB;AACxC,sBAAkB,KAAK;AACvB,QAAI,CAAC,MAAM,SAAU;AACrB,QAAI,YAAY,OAAO,kBAAkB,CAAC,GAAG;AAC3C,YAAM,SAAS,QAAW,gBAAgB,OAAO,kBAAkB,CAAC,CAAC;AAAA,IACvE,WAAW,UAAU,IAAI;AACvB,YAAM,SAAS,MAAS;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,SAAS,kBAAkB,EAAE,OAAO,gBAAgB,UAAU,QAAQ,CAAC,MAAM,UAAU,EAAE,CAAC,EAAE,CAAC;AAEnG,QAAM,SAAS,MAAY;AACzB,QAAI,CAAC,MAAM,OAAQ;AACnB,UAAM,OAAO;AACb,QAAI,gBAAgB,QAAQ,YAAY,eAAe,MAAM,MAAM,MAAM,GAAG,kBAAkB,CAAC,GAAG;AAChG,YAAM,OAAO,QAAW,IAAI;AAAA,IAC9B,WAAW,OAAO,SAAS,YAAY,YAAY,MAAM,kBAAkB,CAAC,GAAG;AAC7E,YAAM,OAAO,QAAW,gBAAgB,MAAM,kBAAkB,CAAC,CAAC;AAAA,IACpE,WAAW,SAAS,UAAa,SAAS,IAAI;AAC5C,YAAM,OAAO,MAAS;AAAA,IACxB;AACA,sBAAkB,eAAe,MAAM,OAAO,MAAM,MAAM,CAAC;AAAA,EAC7D;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS,OAAO;AAAA,IAChB;AAAA,IACA,KAAK,OAAO;AAAA,IACZ,aAAa,OAAO,MAAM,UAAU,qBAAqB,YAAY;AAAA,EACvE;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,6 @@
+import { Toggle, default as default2 } from "./toggle";
+export {
+  Toggle,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/inputs/toggle/index.ts"],
+  "sourcesContent": ["export { Toggle, default } from \"./toggle\";\nexport type { ToggleProps } from \"./toggle\";\n"],
+  "mappings": "AAAA,SAAS,QAAQ,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/source/components/inputs/toggle/toggle.jsx

@@ -0,0 +1,78 @@
+import "/sourcecraft/workspace/packages/styles/less/components/toggle/toggle.entry.less";
+import { Show, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { TextFieldWrapper } from "../textField/textFieldWrapper";
+import { createId } from "../../../primitives/createId";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function Toggle(props) {
+  const merged = mergeProps({ size: "medium", color: "primary" }, props);
+  const [local, args] = splitProps(merged, [
+    "disabled",
+    "readOnly",
+    "required",
+    "checked",
+    "class",
+    "id",
+    "label",
+    "labelPlacement",
+    "size",
+    "color",
+    "helperText",
+    "error",
+    "onChange",
+    "ref"
+  ]);
+  const id = createId(local.id);
+  const handleChange = (event) => {
+    if (local.readOnly) {
+      event.preventDefault();
+      return;
+    }
+    local.onChange?.(event, event.currentTarget.checked, props);
+  };
+  return <TextFieldWrapper
+    helperText={local.helperText}
+    disabled={local.disabled}
+    error={local.error}
+    class="smwb-text-field-checkbox"
+  >
+      <span class={cn("smwb-toggle__wrapper", local.labelPlacement && `smwb-toggle__wrapper_label-${local.labelPlacement}`)}>
+        <Show when={local.label}>
+          <label for={id} class="smwb-toggle__label">
+            {local.label}
+          </label>
+        </Show>
+        <label
+    class={cn("smwb-toggle", `smwb-toggle_size-${local.size}`, `smwb-toggle_color-${local.color}`, local.class, {
+      "smwb-disabled": local.disabled,
+      "smwb-readonly": local.readOnly
+    })}
+  >
+          <input
+    type="checkbox"
+    id={id}
+    class="smwb-toggle__checkbox"
+    aria-checked={local.checked}
+    aria-invalid={local.error || void 0}
+    aria-required={local.required || void 0}
+    role="switch"
+    checked={local.checked}
+    disabled={local.disabled}
+    readonly={local.readOnly}
+    required={local.required}
+    ref={mergeRefs(local.ref)}
+    {...args}
+    onChange={handleChange}
+  />
+          <span class="smwb-toggle__track" />
+          <span class="smwb-toggle__thumb" />
+        </label>
+      </span>
+    </TextFieldWrapper>;
+}
+var toggle_default = Toggle;
+export {
+  Toggle,
+  toggle_default as default
+};
+//# sourceMappingURL=toggle.js.map

package/dist/source/components/inputs/toggle/toggle.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import \"/sourcecraft/workspace/packages/styles/less/components/toggle/toggle.entry.less\";\nimport { 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"],"mappings":"AAAA,OAAO;AACP,SAAmB,MAAM,YAAY,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AAoB7B,SAAS,OAAO,OAAiC;AACtD,QAAM,SAAS,WAAW,EAAE,MAAM,UAAkC,OAAO,UAAmC,GAAG,KAAK;AACtH,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,KAAK,SAAS,MAAM,EAAE;AAE5B,QAAM,eAA0D,CAAC,UAAU;AACzE,QAAI,MAAM,UAAU;AAClB,YAAM,eAAe;AACrB;AAAA,IACF;AACA,UAAM,WAAW,OAAO,MAAM,cAAc,SAAS,KAAK;AAAA,EAC5D;AAEA,SACE,CAAC;AAAA,IACC,YAAY,MAAM;AAAA,IAClB,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,MAAM;AAAA,GACP;AAAA,MACC,CAAC,KAAK,OAAO,GAAG,wBAAwB,MAAM,kBAAkB,8BAA8B,MAAM,cAAc,EAAE,GAAG;AAAA,QACrH,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,MAAM,KAAK,IAAI,MAAM,qBAAqB;AAAA,aACxC,MAAM,MAAM;AAAA,UACf,EAFC,MAEO;AAAA,QACV,EAJC,KAIM;AAAA,QACP,CAAC;AAAA,IACC,OAAO,GAAG,eAAe,oBAAoB,MAAM,IAAI,IAAI,qBAAqB,MAAM,KAAK,IAAI,MAAM,OAAO;AAAA,MAC1G,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,IACzB,CAAC;AAAA,GACF;AAAA,UACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,cAAc,MAAM;AAAA,IACpB,cAAc,MAAM,SAAS;AAAA,IAC7B,eAAe,MAAM,YAAY;AAAA,IACjC,KAAK;AAAA,IACL,SAAS,MAAM;AAAA,IACf,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,KAAK,UAAU,MAAM,GAAG;AAAA,QACpB;AAAA,IACJ,UAAU;AAAA,EACZ,EAAE;AAAA,UACF,CAAC,KAAK,MAAM,qBAAqB,EAAE;AAAA,UACnC,CAAC,KAAK,MAAM,qBAAqB,EAAE;AAAA,QACrC,EAxBC,MAwBO;AAAA,MACV,EA/BC,KA+BM;AAAA,IACT,EAtCC;AAwCL;AAEA,IAAO,iBAAQ;","names":[],"file":"toggle.jsx"}

package/dist/source/components/layout/appLayout/appLayout.jsx

@@ -0,0 +1,102 @@
+import "/sourcecraft/workspace/packages/styles/less/components/appLayout/appLayout.entry.less";
+import { Show, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { createControllableState } from "../../../primitives/createControllableState";
+import { createId } from "../../../primitives/createId";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const len = (v) => typeof v === "number" ? `${v}px` : v;
+function AppLayout(props) {
+  const merged = mergeProps(
+    {
+      sidebarWidth: 260,
+      defaultSidebarCollapsed: false,
+      collapsible: false,
+      collapseToggleAriaLabel: "Toggle navigation",
+      sidebarCollapsedWidth: 72,
+      stickyHeader: true
+    },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "header",
+    "sidebar",
+    "footer",
+    "sidebarWidth",
+    "sidebarCollapsed",
+    "defaultSidebarCollapsed",
+    "onSidebarCollapsedChange",
+    "collapsible",
+    "collapseToggle",
+    "collapseToggleAriaLabel",
+    "sidebarCollapsedWidth",
+    "stickyHeader",
+    "class",
+    "style",
+    "children",
+    "ref"
+  ]);
+  const [collapsed, setCollapsed] = createControllableState({
+    value: () => local.sidebarCollapsed,
+    defaultValue: local.defaultSidebarCollapsed,
+    onChange: (next) => local.onSidebarCollapsedChange?.(next)
+  });
+  const sidebarId = createId();
+  const style = () => ({
+    "--smui-app-sidebar-w": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),
+    ...typeof local.style === "object" && local.style ? local.style : {}
+  });
+  return <div
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid="app-layout"
+    class={cn(
+      "smwb-app-layout",
+      { "smwb-app-layout_sticky-header": local.stickyHeader, "smwb-app-layout_collapsed": collapsed() },
+      local.class
+    )}
+    style={style()}
+  >
+      <Show when={local.header}>
+        <div class="smwb-app-layout__header">{local.header}</div>
+      </Show>
+      <div class="smwb-app-layout__body">
+        <Show when={local.sidebar}>
+          <aside id={sidebarId} class="smwb-app-layout__sidebar">
+            <Show when={local.collapsible}>
+              <div class="smwb-app-layout__collapse">
+                <Show
+    when={local.collapseToggle}
+    fallback={<button
+      type="button"
+      class="smwb-app-layout__collapse-btn"
+      aria-label={local.collapseToggleAriaLabel}
+      aria-expanded={!collapsed()}
+      aria-controls={sidebarId}
+      onClick={() => setCollapsed(!collapsed())}
+    >
+                      <Icon name={collapsed() ? "chevron_right" : "chevron_left"} size={20} />
+                    </button>}
+  >
+                  {local.collapseToggle}
+                </Show>
+              </div>
+            </Show>
+            {local.sidebar}
+          </aside>
+        </Show>
+        <div class="smwb-app-layout__content">
+          {local.children}
+          <Show when={local.footer}>
+            <div class="smwb-app-layout__footer">{local.footer}</div>
+          </Show>
+        </div>
+      </div>
+    </div>;
+}
+var appLayout_default = AppLayout;
+export {
+  AppLayout,
+  appLayout_default as default
+};
+//# sourceMappingURL=appLayout.js.map

package/dist/source/components/layout/appLayout/appLayout.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import \"/sourcecraft/workspace/packages/styles/less/components/appLayout/appLayout.entry.less\";\nimport { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  const style = (): JSX.CSSProperties => ({\n    \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-layout\"\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={local.header}>\n        <div class=\"smwb-app-layout__header\">{local.header}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={local.sidebar}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={local.collapseToggle}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {local.collapseToggle}\n                </Show>\n              </div>\n            </Show>\n            {local.sidebar}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={local.footer}>\n            <div class=\"smwb-app-layout__footer\">{local.footer}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"mappings":"AAAA,OAAO;AACP,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,+BAA+B;AACxC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AA8BpC,MAAM,MAAM,CAAC,MAAgC,OAAO,MAAM,WAAW,GAAG,CAAC,OAAO;AAEzE,SAAS,UAAU,OAAiD;AACzE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,cAAc;AAAA,MACd,yBAAyB;AAAA,MACzB,aAAa;AAAA,MACb,yBAAyB;AAAA,MACzB,uBAAuB;AAAA,MACvB,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,WAAW,YAAY,IAAI,wBAAiC;AAAA,IACjE,OAAO,MAAM,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,IACpB,UAAU,CAAC,SAAS,MAAM,2BAA2B,IAAI;AAAA,EAC3D,CAAC;AAED,QAAM,YAAY,SAAS;AAE3B,QAAM,QAAQ,OAA0B;AAAA,IACtC,wBAAwB,UAAU,IAAI,IAAI,MAAM,qBAAqB,IAAI,IAAI,MAAM,YAAY;AAAA,IAC/F,GAAI,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAAA,EACtE;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,EAAE,iCAAiC,MAAM,cAAc,6BAA6B,UAAU,EAAE;AAAA,MAChG,MAAM;AAAA,IACR;AAAA,IACA,OAAO,MAAM;AAAA,GACd;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,QAAQ;AAAA,QACxB,CAAC,IAAI,MAAM,2BAA2B,MAAM,OAAO,EAAlD,IAAwD;AAAA,MAC3D,EAFC,KAEM;AAAA,MACP,CAAC,IAAI,MAAM,wBAAwB;AAAA,QACjC,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,UACzB,CAAC,MAAM,IAAI,WAAW,MAAM,2BAA2B;AAAA,YACrD,CAAC,KAAK,MAAM,MAAM,aAAa;AAAA,cAC7B,CAAC,IAAI,MAAM,4BAA4B;AAAA,gBACrC,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UACE,CAAC;AAAA,MACC,KAAK;AAAA,MACL,MAAM;AAAA,MACN,YAAY,MAAM;AAAA,MAClB,eAAe,CAAC,UAAU;AAAA,MAC1B,eAAe;AAAA,MACf,SAAS,MAAM,aAAa,CAAC,UAAU,CAAC;AAAA,KACzC;AAAA,sBACC,CAAC,KAAK,MAAM,UAAU,IAAI,kBAAkB,gBAAgB,MAAM,IAAI,EAAE;AAAA,oBAC1E,EATC;AAAA,GAWJ;AAAA,mBACE,MAAM,eAAe;AAAA,gBACxB,EAhBC,KAgBM;AAAA,cACT,EAlBC,IAkBK;AAAA,YACR,EApBC,KAoBM;AAAA,aACN,MAAM,QAAQ;AAAA,UACjB,EAvBC,MAuBO;AAAA,QACV,EAzBC,KAyBM;AAAA,QACP,CAAC,IAAI,MAAM,2BAA2B;AAAA,WACnC,MAAM,SAAS;AAAA,UAChB,CAAC,KAAK,MAAM,MAAM,QAAQ;AAAA,YACxB,CAAC,IAAI,MAAM,2BAA2B,MAAM,OAAO,EAAlD,IAAwD;AAAA,UAC3D,EAFC,KAEM;AAAA,QACT,EALC,IAKK;AAAA,MACR,EAjCC,IAiCK;AAAA,IACR,EAhDC;AAkDL;AAEA,IAAO,oBAAQ;","names":[],"file":"appLayout.jsx"}

package/dist/source/components/layout/appLayout/index.js

@@ -0,0 +1,6 @@
+import { AppLayout, default as default2 } from "./appLayout";
+export {
+  AppLayout,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/layout/appLayout/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/appLayout/index.ts"],
+  "sourcesContent": ["export { AppLayout, default } from \"./appLayout\";\nexport type { AppLayoutProps } from \"./appLayout\";\n"],
+  "mappings": "AAAA,SAAS,WAAW,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/source/components/layout/divider/divider.jsx

@@ -0,0 +1,69 @@
+import "/sourcecraft/workspace/packages/styles/less/components/divider/divider.entry.less";
+import { Show, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const colorVar = {
+  default: void 0,
+  primary: "var(--smui-primaryColor)",
+  secondary: "var(--smui-secondaryColor)",
+  error: "var(--smui-errorColor)",
+  success: "var(--smui-successColor)",
+  warning: "var(--smui-warningColor)",
+  info: "var(--smui-infoColor)"
+};
+function Divider(props) {
+  const merged = mergeProps(
+    {
+      orientation: "horizontal",
+      variant: "fullWidth",
+      textAlign: "center",
+      color: "default"
+    },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "orientation",
+    "variant",
+    "textAlign",
+    "color",
+    "thickness",
+    "flexItem",
+    "style",
+    "children",
+    "ref"
+  ]);
+  const hasText = () => local.children !== void 0 && local.children !== null && local.children !== false;
+  const dividerStyle = () => {
+    const c = colorVar[local.color];
+    const t = typeof local.thickness === "number" ? `${local.thickness}px` : local.thickness;
+    return {
+      ...typeof local.style === "object" && local.style ? local.style : {},
+      ...c ? { "border-color": c } : {},
+      ...t ? local.orientation === "vertical" ? { "border-left-width": t } : { "border-bottom-width": t } : {}
+    };
+  };
+  return <div
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid="divider"
+    role="separator"
+    aria-orientation={local.orientation}
+    class={cn("smwb-divider", `smwb-divider_${local.orientation}`, `smwb-divider_${local.variant}`, {
+      "smwb-divider_with-text": hasText() && local.orientation === "horizontal",
+      [`smwb-divider_align-${local.textAlign}`]: hasText() && local.orientation === "horizontal",
+      "smwb-divider_flex-item": local.flexItem
+    }, local.class)}
+    style={dividerStyle()}
+  >
+      <Show when={hasText() && local.orientation === "horizontal"}>
+        <span class="smwb-divider__text">{local.children}</span>
+      </Show>
+    </div>;
+}
+var divider_default = Divider;
+export {
+  Divider,
+  divider_default as default
+};
+//# sourceMappingURL=divider.js.map

package/dist/source/components/layout/divider/divider.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/layout/divider/divider.tsx"],"sourcesContent":["import \"/sourcecraft/workspace/packages/styles/less/components/divider/divider.entry.less\";\nimport { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type DividerColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface DividerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Direction of the divider line. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Inset behaviour of the line relative to its container. */\n  variant?: \"fullWidth\" | \"inset\" | \"middle\";\n  /** Horizontal alignment of the optional text content. */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /** Line color (semantic token). */\n  color?: DividerColor;\n  /** Line thickness (number = px, or any CSS length). */\n  thickness?: number | string;\n  /** Stretch to fill a flex container along the cross axis. */\n  flexItem?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst colorVar: Record<DividerColor, string | undefined> = {\n  default: undefined,\n  primary: \"var(--smui-primaryColor)\",\n  secondary: \"var(--smui-secondaryColor)\",\n  error: \"var(--smui-errorColor)\",\n  success: \"var(--smui-successColor)\",\n  warning: \"var(--smui-warningColor)\",\n  info: \"var(--smui-infoColor)\",\n};\n\nexport function Divider(props: ParentProps<DividerProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      orientation: \"horizontal\" as const,\n      variant: \"fullWidth\" as const,\n      textAlign: \"center\" as const,\n      color: \"default\" as DividerColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"variant\",\n    \"textAlign\",\n    \"color\",\n    \"thickness\",\n    \"flexItem\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const hasText = (): boolean =>\n    local.children !== undefined && local.children !== null && (local.children as unknown) !== false;\n\n  const dividerStyle = (): JSX.CSSProperties => {\n    const c = colorVar[local.color];\n    const t = typeof local.thickness === \"number\" ? `${local.thickness}px` : local.thickness;\n    return {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      ...(c ? { \"border-color\": c } : {}),\n      ...(t ? (local.orientation === \"vertical\" ? { \"border-left-width\": t } : { \"border-bottom-width\": t }) : {}),\n    };\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"divider\"\n      role=\"separator\"\n      aria-orientation={local.orientation}\n      class={cn(\"smwb-divider\", `smwb-divider_${local.orientation}`, `smwb-divider_${local.variant}`, {\n        \"smwb-divider_with-text\": hasText() && local.orientation === \"horizontal\",\n        [`smwb-divider_align-${local.textAlign}`]: hasText() && local.orientation === \"horizontal\",\n        \"smwb-divider_flex-item\": local.flexItem,\n      }, local.class)}\n      style={dividerStyle()}\n    >\n      <Show when={hasText() && local.orientation === \"horizontal\"}>\n        <span class=\"smwb-divider__text\">{local.children}</span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Divider;\n"],"mappings":"AAAA,OAAO;AACP,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAoBpC,MAAM,WAAqD;AAAA,EACzD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,QAAQ,OAA+C;AACrE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,IACT;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,UAAU,MACd,MAAM,aAAa,UAAa,MAAM,aAAa,QAAS,MAAM,aAAyB;AAE7F,QAAM,eAAe,MAAyB;AAC5C,UAAM,IAAI,SAAS,MAAM,KAAK;AAC9B,UAAM,IAAI,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,SAAS,OAAO,MAAM;AAC/E,WAAO;AAAA,MACL,GAAI,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAAA,MACpE,GAAI,IAAI,EAAE,gBAAgB,EAAE,IAAI,CAAC;AAAA,MACjC,GAAI,IAAK,MAAM,gBAAgB,aAAa,EAAE,qBAAqB,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAK,CAAC;AAAA,IAC5G;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,kBAAkB,MAAM;AAAA,IACxB,OAAO,GAAG,gBAAgB,gBAAgB,MAAM,WAAW,IAAI,gBAAgB,MAAM,OAAO,IAAI;AAAA,MAC9F,0BAA0B,QAAQ,KAAK,MAAM,gBAAgB;AAAA,MAC7D,CAAC,sBAAsB,MAAM,SAAS,EAAE,GAAG,QAAQ,KAAK,MAAM,gBAAgB;AAAA,MAC9E,0BAA0B,MAAM;AAAA,IAClC,GAAG,MAAM,KAAK;AAAA,IACd,OAAO,aAAa;AAAA,GACrB;AAAA,MACC,CAAC,KAAK,MAAM,QAAQ,KAAK,MAAM,gBAAgB,cAAc;AAAA,QAC3D,CAAC,KAAK,MAAM,sBAAsB,MAAM,SAAS,EAAhD,KAAuD;AAAA,MAC1D,EAFC,KAEM;AAAA,IACT,EAhBC;AAkBL;AAEA,IAAO,kBAAQ;","names":[],"file":"divider.jsx"}

package/dist/source/components/layout/divider/index.js

@@ -0,0 +1,6 @@
+import { Divider, default as default2 } from "./divider";
+export {
+  Divider,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/layout/divider/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/divider/index.ts"],
+  "sourcesContent": ["export { Divider, default } from \"./divider\";\nexport type { DividerProps, DividerColor } from \"./divider\";\n"],
+  "mappings": "AAAA,SAAS,SAAS,WAAAA,gBAAe;",
+  "names": ["default"]
+}