@smwb/ui-react 2.0.0

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

@@ -0,0 +1,37 @@
+import { jsx as o } from "react/jsx-runtime";
+import f from "react";
+import { DatePickerIconButton as k } from "../datePicker/datePickerIconButton.js";
+import { useTimeInput as g } from "./useTimeInput.js";
+import { Icon as I } from "../../base/icon/icon.js";
+import { TextField as P } from "../textField/textField.js";
+function b(e) {
+  e.stopPropagation();
+}
+const D = f.forwardRef(function(n, i) {
+  const { value: r, onChange: a, onBlur: c, onToggle: m, disabled: t, disableClock: d, clockIcon: l, format: s, ...p } = n, u = g({ value: r, onChange: a, onBlur: c, format: s });
+  return /* @__PURE__ */ o(
+    P,
+    {
+      ref: i,
+      ...u,
+      type: "tel",
+      endAdornment: !d && /* @__PURE__ */ o(
+        k,
+        {
+          edge: "end",
+          onClick: m,
+          onMouseDown: b,
+          disabled: !!t,
+          "data-testid": "time-picker-icon-button",
+          children: l || /* @__PURE__ */ o(I, { name: "schedule", fill: 1, weight: 500, size: 24 })
+        }
+      ),
+      disabled: !!t,
+      ...p
+    }
+  );
+});
+export {
+  D 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 React from \"react\";\nimport { TextField } from \"../textField\";\nimport { DatePickerIconButton } from \"../datePicker/datePickerIconButton\";\nimport { useTimeInput } from \"./useTimeInput\";\nimport { TimePickerProps } from \"./timePicker\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface TimePickerInputProps extends Omit<\n  TimePickerProps,\n  \"placement\" | \"disablePast\" | \"disableFuture\" | \"weekStartsOn\" | \"locale\" | \"showDaysOutsideMonth\"\n> {\n  onToggle: () => void;\n}\n\nfunction stopPropagation(event: React.SyntheticEvent) {\n  event.stopPropagation();\n}\n\nexport const TimePickerInput = React.forwardRef(function TimePickerInput(\n  props: TimePickerInputProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const { value, onChange, onBlur, onToggle, disabled, disableClock, clockIcon, format, ...rest } = props;\n  const maskedProps = useTimeInput({ value, onChange, onBlur, format });\n\n  return (\n    <TextField\n      ref={ref}\n      {...maskedProps}\n      type=\"tel\"\n      endAdornment={\n        !disableClock && (\n          <DatePickerIconButton\n            edge=\"end\"\n            onClick={onToggle}\n            onMouseDown={stopPropagation}\n            disabled={Boolean(disabled)}\n            data-testid=\"time-picker-icon-button\"\n          >\n            {clockIcon || <Icon name=\"schedule\" fill={1} weight={500} size={24} />}\n          </DatePickerIconButton>\n        )\n      }\n      disabled={Boolean(disabled)}\n      {...rest}\n    />\n  );\n});\n"],"names":["stopPropagation","event","TimePickerInput","React","props","ref","value","onChange","onBlur","onToggle","disabled","disableClock","clockIcon","format","rest","maskedProps","useTimeInput","jsx","TextField","DatePickerIconButton","Icon"],"mappings":";;;;;;AAcA,SAASA,EAAgBC,GAA6B;AACpD,EAAAA,EAAM,gBAAA;AACR;AAEO,MAAMC,IAAkBC,EAAM,WAAW,SAC9CC,GACAC,GACA;AACA,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,GAAU,UAAAC,GAAU,cAAAC,GAAc,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,IAASV,GAC5FW,IAAcC,EAAa,EAAE,OAAAV,GAAO,UAAAC,GAAU,QAAAC,GAAQ,QAAAK,GAAQ;AAEpE,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACC,GAAGU;AAAA,MACJ,MAAK;AAAA,MACL,cACE,CAACJ,KACC,gBAAAM;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAASV;AAAA,UACT,aAAaT;AAAA,UACb,UAAU,EAAQU;AAAA,UAClB,eAAY;AAAA,UAEX,UAAAE,KAAa,gBAAAK,EAACG,GAAA,EAAK,MAAK,YAAW,MAAM,GAAG,QAAQ,KAAK,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAI1E,UAAU,EAAQV;AAAA,MACjB,GAAGI;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

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

@@ -0,0 +1,11 @@
+interface Item {
+    label: string;
+    value: number;
+}
+export interface TimePickerListProps {
+    value: number;
+    items: Item[];
+    onChange: (value: number) => void;
+}
+export declare function TimePickerList({ value: valueProp, items, onChange }: TimePickerListProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,43 @@
+import { jsx as f } from "react/jsx-runtime";
+import s from "react";
+import d from "clsx";
+import { useSafeLayoutEffect as p } from "../../../hooks/useSafeLayoutEffect.js";
+function w({ value: m, items: l, onChange: r }) {
+  const c = s.useRef(null), i = s.useRef(null);
+  p(() => {
+    if (c.current && i.current) {
+      const e = (c.current.offsetHeight - i.current.offsetHeight) / 2;
+      c.current.scrollTop = i.current.offsetTop - e;
+    }
+  });
+  const o = s.useCallback(
+    (e) => () => {
+      r == null || r(e);
+    },
+    [r]
+  ), n = s.useCallback(
+    (e) => (t) => {
+      m === e && (i.current = t);
+    },
+    [m]
+  );
+  return /* @__PURE__ */ f("div", { className: "smwb-time-picker__overflow", ref: c, "data-testid": "time-picker-list", children: /* @__PURE__ */ f("ul", { className: "smwb-time-picker__list", children: l.map(({ label: e, value: t }) => {
+    const u = m === t;
+    return /* @__PURE__ */ f(
+      "li",
+      {
+        ref: n(t),
+        className: d("smwb-time-picker__item", {
+          "smwb-time-picker__item--selected": u
+        }),
+        onClick: o(t),
+        children: e
+      },
+      t
+    );
+  }) }) });
+}
+export {
+  w 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 React from \"react\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\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({ value: valueProp, items, onChange }: TimePickerListProps) {\n  const overflowRef = React.useRef<HTMLDivElement>(null);\n  const selectedItemRef = React.useRef<HTMLLIElement>(null);\n\n  useSafeLayoutEffect(() => {\n    if (overflowRef.current && selectedItemRef.current) {\n      const middle = (overflowRef.current.offsetHeight - selectedItemRef.current.offsetHeight) / 2;\n\n      overflowRef.current.scrollTop = selectedItemRef.current.offsetTop - middle;\n    }\n  });\n\n  const onItemClick = React.useCallback(\n    (value: number) => () => {\n      onChange?.(value);\n    },\n    [onChange]\n  );\n\n  const setRef = React.useCallback(\n    (value: number) => (element: HTMLLIElement) => {\n      if (valueProp === value) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore Мутабельный объект\n        selectedItemRef.current = element;\n      }\n    },\n    [valueProp]\n  );\n\n  return (\n    <div className=\"smwb-time-picker__overflow\" ref={overflowRef} data-testid=\"time-picker-list\">\n      <ul className=\"smwb-time-picker__list\">\n        {items.map(({ label, value }) => {\n          const isSelected = valueProp === value;\n\n          return (\n            <li\n              key={value}\n              ref={setRef(value)}\n              className={cn(\"smwb-time-picker__item\", {\n                \"smwb-time-picker__item--selected\": isSelected,\n              })}\n              onClick={onItemClick(value)}\n            >\n              {label}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n"],"names":["TimePickerList","valueProp","items","onChange","overflowRef","React","selectedItemRef","useSafeLayoutEffect","middle","onItemClick","value","setRef","element","jsx","label","isSelected","cn"],"mappings":";;;;AAeO,SAASA,EAAe,EAAE,OAAOC,GAAW,OAAAC,GAAO,UAAAC,KAAiC;AACzF,QAAMC,IAAcC,EAAM,OAAuB,IAAI,GAC/CC,IAAkBD,EAAM,OAAsB,IAAI;AAExD,EAAAE,EAAoB,MAAM;AACxB,QAAIH,EAAY,WAAWE,EAAgB,SAAS;AAClD,YAAME,KAAUJ,EAAY,QAAQ,eAAeE,EAAgB,QAAQ,gBAAgB;AAE3F,MAAAF,EAAY,QAAQ,YAAYE,EAAgB,QAAQ,YAAYE;AAAA,IACtE;AAAA,EACF,CAAC;AAED,QAAMC,IAAcJ,EAAM;AAAA,IACxB,CAACK,MAAkB,MAAM;AACvB,MAAAP,KAAA,QAAAA,EAAWO;AAAA,IACb;AAAA,IACA,CAACP,CAAQ;AAAA,EAAA,GAGLQ,IAASN,EAAM;AAAA,IACnB,CAACK,MAAkB,CAACE,MAA2B;AAC7C,MAAIX,MAAcS,MAGhBJ,EAAgB,UAAUM;AAAA,IAE9B;AAAA,IACA,CAACX,CAAS;AAAA,EAAA;AAGZ,2BACG,OAAA,EAAI,WAAU,8BAA6B,KAAKG,GAAa,eAAY,oBACxE,UAAA,gBAAAS,EAAC,MAAA,EAAG,WAAU,0BACX,UAAAX,EAAM,IAAI,CAAC,EAAE,OAAAY,GAAO,OAAAJ,QAAY;AAC/B,UAAMK,IAAad,MAAcS;AAEjC,WACE,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,KAAKF,EAAOD,CAAK;AAAA,QACjB,WAAWM,EAAG,0BAA0B;AAAA,UACtC,oCAAoCD;AAAA,QAAA,CACrC;AAAA,QACD,SAASN,EAAYC,CAAK;AAAA,QAEzB,UAAAI;AAAA,MAAA;AAAA,MAPIJ;AAAA,IAAA;AAAA,EAUX,CAAC,GACH,GACF;AAEJ;"}

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,93 @@
+import { formatTimeByPattern as l, isTimePatternMatch as m, parseTimeByPattern as T } from "./timeFormat.js";
+const c = /\d/gi, h = /[a-zA-Z]/g, g = "HH:mm";
+function d() {
+  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, n, r) {
+  const i = new Date(t);
+  return i.setHours(e, n, r, 0), i;
+}
+function C(t, e) {
+  return p(t) ? l(t, e != null ? e : g) : "";
+}
+function f(t) {
+  return t != null ? t : g;
+}
+function D(t) {
+  return f(t).replace(h, "_");
+}
+function F(t) {
+  return (e) => {
+    let n = 0;
+    return e.split("").map((r, i) => {
+      if (c.lastIndex = 0, n > t.length - 1)
+        return "";
+      const u = t[n], s = t[n + 1], a = c.test(r) ? r : "", o = u === "_" ? a : u + a;
+      return n += o.length, i === e.length - 1 && s && s !== "_" ? o ? o + s : "" : o;
+    }).join("");
+  };
+}
+function E(t, e) {
+  return m(t, e);
+}
+function H(t, e) {
+  const n = T(t, e);
+  return n || 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,
+  f as getCurrentTimeFormat,
+  C as getDisplayTime,
+  d 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() {\n  return Array.from({ length: 24 }, (_, value) => ({\n    value,\n    label: String(value).padStart(2, \"0\"),\n  }));\n}\n\nexport function getMinutesList() {\n  return Array.from({ length: 60 }, (_, value) => ({\n    value,\n    label: String(value).padStart(2, \"0\"),\n  }));\n}\n\nexport function getSecondsList() {\n  return Array.from({ length: 60 }, (_, value) => ({\n    value,\n    label: String(value).padStart(2, \"0\"),\n  }));\n}\n\nexport function setTime(date: Date, hours: number, minutes: number, seconds: number) {\n  const next = new Date(date);\n\n  next.setHours(hours, minutes, seconds, 0);\n\n  return next;\n}\n\nexport function getDisplayTime(date: unknown, format?: string) {\n  if (!isValidTimeDate(date)) {\n    return \"\";\n  }\n\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) {\n  return getCurrentTimeFormat(format).replace(MASK_TOKEN_REGEXP, \"_\");\n}\n\nexport function maskedTimeFormatter(mask: string) {\n  return (value: string) => {\n    let outputCharIndex = 0;\n\n    return value\n      .split(\"\")\n      .map((char, inputCharIndex) => {\n        MASK_DIGIT_REGEXP.lastIndex = 0;\n\n        if (outputCharIndex > mask.length - 1) {\n          return \"\";\n        }\n\n        const maskChar = mask[outputCharIndex];\n        const nextMaskChar = mask[outputCharIndex + 1];\n\n        const acceptedChar = MASK_DIGIT_REGEXP.test(char) ? char : \"\";\n        const formattedChar = maskChar === \"_\" ? acceptedChar : maskChar + acceptedChar;\n\n        outputCharIndex += formattedChar.length;\n\n        const isLastCharacter = inputCharIndex === value.length - 1;\n\n        if (isLastCharacter && nextMaskChar && nextMaskChar !== \"_\") {\n          return formattedChar ? formattedChar + nextMaskChar : \"\";\n        }\n\n        return formattedChar;\n      })\n      .join(\"\");\n  };\n}\n\nexport function isTimeMatch(value: string, format: string) {\n  return isTimePatternMatch(value, format);\n}\n\nexport function getTimeByFormat(value: string, format: string) {\n  const parsed = parseTimeByPattern(value, format);\n\n  if (!parsed) {\n    return new Date(Number.NaN);\n  }\n\n  return parsed;\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) {\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) {\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","parsed","parseTimeByPattern","mergeTime","baseDate","timeDate","mergeDate","timeSource"],"mappings":";AAEA,MAAMA,IAAoB,QACpBC,IAAoB,aAEbC,IAAsB;AAE5B,SAASC,IAAe;AAC7B,SAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,CAACC,GAAGC,OAAW;AAAA,IAC/C,OAAAA;AAAA,IACA,OAAO,OAAOA,CAAK,EAAE,SAAS,GAAG,GAAG;AAAA,EAAA,EACpC;AACJ;AAEO,SAASC,IAAiB;AAC/B,SAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,CAACF,GAAGC,OAAW;AAAA,IAC/C,OAAAA;AAAA,IACA,OAAO,OAAOA,CAAK,EAAE,SAAS,GAAG,GAAG;AAAA,EAAA,EACpC;AACJ;AAEO,SAASE,IAAiB;AAC/B,SAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,CAACH,GAAGC,OAAW;AAAA,IAC/C,OAAAA;AAAA,IACA,OAAO,OAAOA,CAAK,EAAE,SAAS,GAAG,GAAG;AAAA,EAAA,EACpC;AACJ;AAEO,SAASG,EAAQC,GAAYC,GAAeC,GAAiBC,GAAiB;AACnF,QAAMC,IAAO,IAAI,KAAKJ,CAAI;AAE1B,SAAAI,EAAK,SAASH,GAAOC,GAASC,GAAS,CAAC,GAEjCC;AACT;AAEO,SAASC,EAAeL,GAAeM,GAAiB;AAC7D,SAAKC,EAAgBP,CAAI,IAIlBQ,EAAoBR,GAAMM,KAAA,OAAAA,IAAUb,CAAmB,IAHrD;AAIX;AAEO,SAASgB,EAAqBH,GAAyB;AAC5D,SAAOA,KAAA,OAAAA,IAAUb;AACnB;AAEO,SAASiB,EAAkBJ,GAAiB;AACjD,SAAOG,EAAqBH,CAAM,EAAE,QAAQd,GAAmB,GAAG;AACpE;AAEO,SAASmB,EAAoBC,GAAc;AAChD,SAAO,CAAChB,MAAkB;AACxB,QAAIiB,IAAkB;AAEtB,WAAOjB,EACJ,MAAM,EAAE,EACR,IAAI,CAACkB,GAAMC,MAAmB;AAG7B,UAFAxB,EAAkB,YAAY,GAE1BsB,IAAkBD,EAAK,SAAS;AAClC,eAAO;AAGT,YAAMI,IAAWJ,EAAKC,CAAe,GAC/BI,IAAeL,EAAKC,IAAkB,CAAC,GAEvCK,IAAe3B,EAAkB,KAAKuB,CAAI,IAAIA,IAAO,IACrDK,IAAgBH,MAAa,MAAME,IAAeF,IAAWE;AAMnE,aAJAL,KAAmBM,EAAc,QAETJ,MAAmBnB,EAAM,SAAS,KAEnCqB,KAAgBA,MAAiB,MAC/CE,IAAgBA,IAAgBF,IAAe,KAGjDE;AAAA,IACT,CAAC,EACA,KAAK,EAAE;AAAA,EACZ;AACF;AAEO,SAASC,EAAYxB,GAAeU,GAAgB;AACzD,SAAOe,EAAmBzB,GAAOU,CAAM;AACzC;AAEO,SAASgB,EAAgB1B,GAAeU,GAAgB;AAC7D,QAAMiB,IAASC,EAAmB5B,GAAOU,CAAM;AAE/C,SAAKiB,KACI,IAAI,KAAK,OAAO,GAAG;AAI9B;AAEO,SAAShB,EAAgBX,GAA+B;AAC7D,SAAO,OAAO,UAAU,SAAS,KAAKA,CAAK,MAAM,mBAAmB,CAAC,MAAMA,CAAe;AAC5F;AAEO,SAAS6B,EAAUC,GAAgBC,GAAgB;AACxD,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,EAAU5B,GAAY6B,GAAkB;AACtD,SAAO,IAAI;AAAA,IACT7B,EAAK,YAAA;AAAA,IACLA,EAAK,SAAA;AAAA,IACLA,EAAK,QAAA;AAAA,IACL6B,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,13 @@
+import React from "react";
+import { TimePickerProps } from "./timePicker";
+export type UseTimeInputProps = Pick<TimePickerProps, "value" | "onChange" | "onBlur"> & {
+    format?: string;
+};
+interface UseTimeInputReturn {
+    value: string;
+    onChange: React.ChangeEventHandler;
+    onBlur: React.ChangeEventHandler;
+    placeholder: string;
+}
+export declare function useTimeInput({ value: valueProp, onChange: onChangeProp, onBlur: onBlurProp, format, }: UseTimeInputProps): UseTimeInputReturn;
+export {};

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

@@ -0,0 +1,37 @@
+import k, { useMemo as d, useState as C, useRef as V, useCallback as h } from "react";
+import { useRifm as D } from "rifm";
+import { getCurrentTimeFormat as T, getDisplayTime as c, getTimeMaskFormat as M, maskedTimeFormatter as R, isTimeMatch as u, getTimeByFormat as f } from "./timeUtils.js";
+const p = T();
+function E({
+  value: i,
+  onChange: r,
+  onBlur: n,
+  format: t
+}) {
+  const s = d(() => T(t), [t]), [F, m] = C(c(i, t)), a = d(() => M(t), [t]), g = d(() => R(a), [a]), o = V(void 0);
+  k.useEffect(() => {
+    const e = i !== o.current;
+    o.current = i, e && m(c(i, t));
+  }, [i, t]);
+  const l = (e) => {
+    m(e), r && (u(e, s) ? r(void 0, f(e, s)) : e === "" && r(void 0));
+  }, y = h(() => {
+    if (!n)
+      return;
+    const e = o.current;
+    e instanceof Date && u(c(e, t), s) ? n(void 0, e) : typeof e == "string" && u(e, s) ? n(void 0, f(e, s)) : (e === void 0 || e === "") && n(void 0), m(c(i, t));
+  }, [n, i, t, s]);
+  return {
+    ...D({
+      value: F,
+      onChange: l,
+      format: g
+    }),
+    onBlur: y,
+    placeholder: (t != null ? t : p).toLowerCase()
+  };
+}
+export {
+  E as useTimeInput
+};
+//# 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 React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { useRifm } from \"rifm\";\nimport {\n  getTimeByFormat,\n  getDisplayTime,\n  getTimeMaskFormat,\n  getCurrentTimeFormat,\n  maskedTimeFormatter,\n  isTimeMatch,\n} from \"./timeUtils\";\nimport { TimePickerProps } from \"./timePicker\";\n\nexport type UseTimeInputProps = Pick<TimePickerProps, \"value\" | \"onChange\" | \"onBlur\"> & {\n  format?: string;\n};\n\ninterface UseTimeInputReturn {\n  value: string;\n  onChange: React.ChangeEventHandler;\n  onBlur: React.ChangeEventHandler;\n  placeholder: string;\n}\n\nconst defaultFormatTime = getCurrentTimeFormat();\n\nexport function useTimeInput({\n  value: valueProp,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  format,\n}: UseTimeInputProps): UseTimeInputReturn {\n  const currentFormatTime = useMemo(() => getCurrentTimeFormat(format), [format]);\n  const [displayedValue, setDisplayedValue] = useState(getDisplayTime(valueProp, format));\n  const maskFormat = useMemo(() => getTimeMaskFormat(format), [format]);\n  const formatter = useMemo(() => maskedTimeFormatter(maskFormat), [maskFormat]);\n  const prevValue = useRef<UseTimeInputProps[\"value\"]>(undefined);\n\n  React.useEffect(() => {\n    const isValueChanged = valueProp !== prevValue.current;\n    prevValue.current = valueProp;\n\n    if (!isValueChanged) {\n      return;\n    }\n\n    setDisplayedValue(getDisplayTime(valueProp, format));\n  }, [valueProp, format]);\n\n  const onChange = (value: string) => {\n    setDisplayedValue(value);\n\n    if (!onChangeProp) {\n      return;\n    }\n\n    if (isTimeMatch(value, currentFormatTime)) {\n      onChangeProp(undefined, getTimeByFormat(value, currentFormatTime));\n    } else if (value === \"\") {\n      onChangeProp(undefined);\n    }\n  };\n\n  const onBlur = useCallback(() => {\n    if (!onBlurProp) {\n      return;\n    }\n\n    const prev = prevValue.current;\n\n    if (prev instanceof Date && isTimeMatch(getDisplayTime(prev, format), currentFormatTime)) {\n      onBlurProp(undefined, prev);\n    } else if (typeof prev === \"string\" && isTimeMatch(prev, currentFormatTime)) {\n      onBlurProp(undefined, getTimeByFormat(prev, currentFormatTime));\n    } else if (prev === undefined || prev === \"\") {\n      onBlurProp(undefined);\n    }\n\n    setDisplayedValue(getDisplayTime(valueProp, format));\n  }, [onBlurProp, valueProp, format, currentFormatTime]);\n\n  const rifmProps = useRifm({\n    value: displayedValue,\n    onChange,\n    format: formatter,\n  });\n\n  return {\n    ...rifmProps,\n    onBlur,\n    placeholder: (format ?? defaultFormatTime).toLowerCase(),\n  };\n}\n"],"names":["defaultFormatTime","getCurrentTimeFormat","useTimeInput","valueProp","onChangeProp","onBlurProp","format","currentFormatTime","useMemo","displayedValue","setDisplayedValue","useState","getDisplayTime","maskFormat","getTimeMaskFormat","formatter","maskedTimeFormatter","prevValue","useRef","React","isValueChanged","onChange","value","isTimeMatch","getTimeByFormat","onBlur","useCallback","prev","useRifm"],"mappings":";;;AAuBA,MAAMA,IAAoBC,EAAA;AAEnB,SAASC,EAAa;AAAA,EAC3B,OAAOC;AAAA,EACP,UAAUC;AAAA,EACV,QAAQC;AAAA,EACR,QAAAC;AACF,GAA0C;AACxC,QAAMC,IAAoBC,EAAQ,MAAMP,EAAqBK,CAAM,GAAG,CAACA,CAAM,CAAC,GACxE,CAACG,GAAgBC,CAAiB,IAAIC,EAASC,EAAeT,GAAWG,CAAM,CAAC,GAChFO,IAAaL,EAAQ,MAAMM,EAAkBR,CAAM,GAAG,CAACA,CAAM,CAAC,GAC9DS,IAAYP,EAAQ,MAAMQ,EAAoBH,CAAU,GAAG,CAACA,CAAU,CAAC,GACvEI,IAAYC,EAAmC,MAAS;AAE9D,EAAAC,EAAM,UAAU,MAAM;AACpB,UAAMC,IAAiBjB,MAAcc,EAAU;AAG/C,IAFAA,EAAU,UAAUd,GAEfiB,KAILV,EAAkBE,EAAeT,GAAWG,CAAM,CAAC;AAAA,EACrD,GAAG,CAACH,GAAWG,CAAM,CAAC;AAEtB,QAAMe,IAAW,CAACC,MAAkB;AAGlC,IAFAZ,EAAkBY,CAAK,GAElBlB,MAIDmB,EAAYD,GAAOf,CAAiB,IACtCH,EAAa,QAAWoB,EAAgBF,GAAOf,CAAiB,CAAC,IACxDe,MAAU,MACnBlB,EAAa,MAAS;AAAA,EAE1B,GAEMqB,IAASC,EAAY,MAAM;AAC/B,QAAI,CAACrB;AACH;AAGF,UAAMsB,IAAOV,EAAU;AAEvB,IAAIU,aAAgB,QAAQJ,EAAYX,EAAee,GAAMrB,CAAM,GAAGC,CAAiB,IACrFF,EAAW,QAAWsB,CAAI,IACjB,OAAOA,KAAS,YAAYJ,EAAYI,GAAMpB,CAAiB,IACxEF,EAAW,QAAWmB,EAAgBG,GAAMpB,CAAiB,CAAC,KACrDoB,MAAS,UAAaA,MAAS,OACxCtB,EAAW,MAAS,GAGtBK,EAAkBE,EAAeT,GAAWG,CAAM,CAAC;AAAA,EACrD,GAAG,CAACD,GAAYF,GAAWG,GAAQC,CAAiB,CAAC;AAQrD,SAAO;AAAA,IACL,GAPgBqB,EAAQ;AAAA,MACxB,OAAOnB;AAAA,MACP,UAAAY;AAAA,MACA,QAAQN;AAAA,IAAA,CACT;AAAA,IAIC,QAAAU;AAAA,IACA,cAAcnB,KAAA,OAAAA,IAAUN,GAAmB,YAAA;AAAA,EAAY;AAE3D;"}

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

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

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

@@ -0,0 +1,20 @@
+import React, { InputHTMLAttributes } from "react";
+import type { SelectionControlColor, SelectionControlSize } from "../checkbox/checkbox";
+export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> {
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    checked?: boolean;
+    className?: string;
+    id?: string;
+    label?: string;
+    labelPlacement?: "top" | "left" | "right";
+    size?: SelectionControlSize;
+    color?: SelectionControlColor;
+    /** Unified handler: `(event, checked, data)`. */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, data: ToggleProps) => void;
+    helperText?: React.ReactNode;
+    error?: boolean;
+}
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+export default Toggle;

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

@@ -0,0 +1,70 @@
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/toggle/toggle.entry.css';/* empty css                                                       */
+import k from "react";
+import b from "clsx";
+import { useId as v } from "../../../hooks/useId.js";
+import { TextFieldWrapper as y } from "../textField/textFieldWrapper.js";
+const P = k.forwardRef(function(e, h) {
+  const {
+    disabled: l,
+    readOnly: r,
+    required: t,
+    checked: o,
+    className: w,
+    id: _,
+    label: m,
+    labelPlacement: c,
+    size: f = "medium",
+    color: u = "primary",
+    helperText: p,
+    error: i,
+    ...x
+  } = e, n = v(_), N = (s) => {
+    var d;
+    if (r) {
+      s.preventDefault();
+      return;
+    }
+    (d = e.onChange) == null || d.call(e, s, s.target.checked, e);
+  };
+  return /* @__PURE__ */ a(y, { helperText: p, disabled: l, error: i, className: "smwb-text-field-checkbox", children: /* @__PURE__ */ g("span", { className: b("smwb-toggle__wrapper", c && `smwb-toggle__wrapper_label-${c}`), children: [
+    m ? /* @__PURE__ */ a("label", { htmlFor: n, className: "smwb-toggle__label", children: m }) : null,
+    /* @__PURE__ */ g(
+      "label",
+      {
+        className: b("smwb-toggle", `smwb-toggle_size-${f}`, `smwb-toggle_color-${u}`, w, {
+          "smwb-disabled": l,
+          "smwb-readonly": r
+        }),
+        children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              type: "checkbox",
+              id: n,
+              className: "smwb-toggle__checkbox",
+              "aria-checked": o,
+              "aria-invalid": i || void 0,
+              "aria-required": t || void 0,
+              role: "switch",
+              checked: o,
+              disabled: l,
+              readOnly: r,
+              required: t,
+              ref: h,
+              ...x,
+              onChange: N
+            }
+          ),
+          /* @__PURE__ */ a("span", { className: "smwb-toggle__track" }),
+          /* @__PURE__ */ a("span", { className: "smwb-toggle__thumb" })
+        ]
+      }
+    )
+  ] }) });
+});
+export {
+  P as Toggle,
+  P as default
+};
+//# 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 React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useId } from \"../../../hooks/useId\";\nimport type { SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  checked?: boolean;\n  className?: string;\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: React.ChangeEvent<HTMLInputElement>, checked: boolean, data: ToggleProps) => void;\n  helperText?: React.ReactNode;\n  error?: boolean;\n}\n\nexport const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(function Toggle(props, ref) {\n  const {\n    disabled,\n    readOnly,\n    required,\n    checked,\n    className,\n    id: idProp,\n    label,\n    labelPlacement,\n    size = \"medium\",\n    color = \"primary\",\n    helperText,\n    error,\n    ...args\n  } = props;\n  const id = useId(idProp);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      e.preventDefault();\n      return;\n    }\n    props.onChange?.(e, e.target.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper helperText={helperText} disabled={disabled} error={error} className=\"smwb-text-field-checkbox\">\n      <span className={cn(\"smwb-toggle__wrapper\", labelPlacement && `smwb-toggle__wrapper_label-${labelPlacement}`)}>\n        {label ? (\n          <label htmlFor={id} className=\"smwb-toggle__label\">\n            {label}\n          </label>\n        ) : null}\n        <label\n          className={cn(\"smwb-toggle\", `smwb-toggle_size-${size}`, `smwb-toggle_color-${color}`, className, {\n            \"smwb-disabled\": disabled,\n            \"smwb-readonly\": readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            className=\"smwb-toggle__checkbox\"\n            aria-checked={checked}\n            aria-invalid={error || undefined}\n            aria-required={required || undefined}\n            role={\"switch\"}\n            checked={checked}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            ref={ref}\n            {...args}\n            onChange={handleChange}\n          />\n          <span className=\"smwb-toggle__track\"></span>\n          <span className=\"smwb-toggle__thumb\"></span>\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n});\n\nexport default Toggle;\n"],"names":["Toggle","React","props","ref","disabled","readOnly","required","checked","className","idProp","label","labelPlacement","size","color","helperText","error","args","id","useId","handleChange","e","_a","TextFieldWrapper","jsxs","cn","jsx"],"mappings":";;;;;;AAwBO,MAAMA,IAASC,EAAM,WAA0C,SAAgBC,GAAOC,GAAK;AAChG,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GACEe,IAAKC,EAAMT,CAAM,GAEjBU,IAAe,CAACC,MAA2C;;AAC/D,QAAIf,GAAU;AACZ,MAAAe,EAAE,eAAA;AACF;AAAA,IACF;AACA,KAAAC,IAAAnB,EAAM,aAAN,QAAAmB,EAAA,KAAAnB,GAAiBkB,GAAGA,EAAE,OAAO,SAASlB;AAAA,EACxC;AAEA,2BACGoB,GAAA,EAAiB,YAAAR,GAAwB,UAAAV,GAAoB,OAAAW,GAAc,WAAU,4BACpF,UAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWC,EAAG,wBAAwBb,KAAkB,8BAA8BA,CAAc,EAAE,GACzG,UAAA;AAAA,IAAAD,sBACE,SAAA,EAAM,SAASO,GAAI,WAAU,sBAC3B,aACH,IACE;AAAA,IACJ,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAG,eAAe,oBAAoBZ,CAAI,IAAI,qBAAqBC,CAAK,IAAIL,GAAW;AAAA,UAChG,iBAAiBJ;AAAA,UACjB,iBAAiBC;AAAA,QAAA,CAClB;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAoB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAAR;AAAA,cACA,WAAU;AAAA,cACV,gBAAcV;AAAA,cACd,gBAAcQ,KAAS;AAAA,cACvB,iBAAeT,KAAY;AAAA,cAC3B,MAAM;AAAA,cACN,SAAAC;AAAA,cACA,UAAAH;AAAA,cACA,UAAAC;AAAA,cACA,UAAAC;AAAA,cACA,KAAAH;AAAA,cACC,GAAGa;AAAA,cACJ,UAAUG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,gBAAAM,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;AAAA,UACrC,gBAAAA,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;"}

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

@@ -0,0 +1,32 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /** Top bar slot (e.g. <AppBar />). Spans full width. */
+    header?: ReactNode;
+    /** Side navigation slot (e.g. <Sidebar />). */
+    sidebar?: ReactNode;
+    /** Footer slot, below the content. */
+    footer?: ReactNode;
+    /** 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?: ReactNode;
+    /** Accessible label for the default toggle button. */
+    collapseToggleAriaLabel?: string;
+    /** Sidebar collapsed width. */
+    sidebarCollapsedWidth?: number | string;
+    /** Keep the header pinned while content scrolls. */
+    stickyHeader?: boolean;
+    className?: string;
+}
+export declare const AppLayout: React.ForwardRefExoticComponent<AppLayoutProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default AppLayout;

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

@@ -0,0 +1,75 @@
+import { jsxs as e, jsx as s } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/appLayout/appLayout.entry.css';/* empty css                                                             */
+import j, { useId as k } from "react";
+import A from "clsx";
+import { Icon as L } from "../../base/icon/icon.js";
+import { useControllableState as R } from "../../../hooks/useControllableState.js";
+const i = (t) => typeof t == "number" ? `${t}px` : t, D = j.forwardRef(function({
+  header: o,
+  sidebar: n,
+  footer: p,
+  sidebarWidth: c = 260,
+  sidebarCollapsed: d,
+  defaultSidebarCollapsed: m = !1,
+  onSidebarCollapsedChange: u,
+  collapsible: b = !1,
+  collapseToggle: l,
+  collapseToggleAriaLabel: y = "Toggle navigation",
+  sidebarCollapsedWidth: _ = 72,
+  stickyHeader: f = !0,
+  className: h,
+  style: w,
+  children: v,
+  ...N
+}, x) {
+  const [a, C] = R({
+    value: d,
+    defaultValue: m,
+    onChange: u
+  }), r = k(), I = {
+    "--smui-app-sidebar-w": i(a ? _ : c)
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: x,
+      "data-testid": "app-layout",
+      className: A(
+        "smwb-app-layout",
+        { "smwb-app-layout_sticky-header": f, "smwb-app-layout_collapsed": a },
+        h
+      ),
+      style: { ...I, ...w },
+      ...N,
+      children: [
+        o ? /* @__PURE__ */ s("div", { className: "smwb-app-layout__header", children: o }) : null,
+        /* @__PURE__ */ e("div", { className: "smwb-app-layout__body", children: [
+          n ? /* @__PURE__ */ e("aside", { id: r, className: "smwb-app-layout__sidebar", children: [
+            b ? /* @__PURE__ */ s("div", { className: "smwb-app-layout__collapse", children: l != null ? l : /* @__PURE__ */ s(
+              "button",
+              {
+                type: "button",
+                className: "smwb-app-layout__collapse-btn",
+                "aria-label": y,
+                "aria-expanded": !a,
+                "aria-controls": r,
+                onClick: () => C(!a),
+                children: /* @__PURE__ */ s(L, { name: a ? "chevron_right" : "chevron_left", size: 20 })
+              }
+            ) }) : null,
+            n
+          ] }) : null,
+          /* @__PURE__ */ e("div", { className: "smwb-app-layout__content", children: [
+            v,
+            p ? /* @__PURE__ */ s("div", { className: "smwb-app-layout__footer", children: p }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+export {
+  D as AppLayout,
+  D as default
+};
+//# sourceMappingURL=appLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"appLayout.js","sources":["../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode, useId } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: ReactNode;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: ReactNode;\n  /** Footer slot, below the content. */\n  footer?: ReactNode;\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?: ReactNode;\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  className?: string;\n}\n\nconst len = (v: number | string) => (typeof v === \"number\" ? `${v}px` : v);\n\nexport const AppLayout = React.forwardRef<HTMLDivElement, PropsWithChildren<AppLayoutProps>>(function AppLayout(\n  {\n    header,\n    sidebar,\n    footer,\n    sidebarWidth = 260,\n    sidebarCollapsed,\n    defaultSidebarCollapsed = false,\n    onSidebarCollapsedChange,\n    collapsible = false,\n    collapseToggle,\n    collapseToggleAriaLabel = \"Toggle navigation\",\n    sidebarCollapsedWidth = 72,\n    stickyHeader = true,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: sidebarCollapsed,\n    defaultValue: defaultSidebarCollapsed,\n    onChange: onSidebarCollapsedChange,\n  });\n\n  const sidebarId = useId();\n\n  const cssVars = {\n    \"--smui-app-sidebar-w\": collapsed ? len(sidebarCollapsedWidth) : len(sidebarWidth),\n  } as CSSProperties;\n\n  return (\n    <div\n      ref={ref}\n      data-testid=\"app-layout\"\n      className={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": stickyHeader, \"smwb-app-layout_collapsed\": collapsed },\n        className\n      )}\n      style={{ ...cssVars, ...style }}\n      {...rest}\n    >\n      {header ? <div className=\"smwb-app-layout__header\">{header}</div> : null}\n      <div className=\"smwb-app-layout__body\">\n        {sidebar ? (\n          <aside id={sidebarId} className=\"smwb-app-layout__sidebar\">\n            {collapsible ? (\n              <div className=\"smwb-app-layout__collapse\">\n                {collapseToggle ?? (\n                  <button\n                    type=\"button\"\n                    className=\"smwb-app-layout__collapse-btn\"\n                    aria-label={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              </div>\n            ) : null}\n            {sidebar}\n          </aside>\n        ) : null}\n        <div className=\"smwb-app-layout__content\">\n          {children}\n          {footer ? <div className=\"smwb-app-layout__footer\">{footer}</div> : null}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default AppLayout;\n"],"names":["len","v","AppLayout","React","header","sidebar","footer","sidebarWidth","sidebarCollapsed","defaultSidebarCollapsed","onSidebarCollapsedChange","collapsible","collapseToggle","collapseToggleAriaLabel","sidebarCollapsedWidth","stickyHeader","className","style","children","rest","ref","collapsed","setCollapsed","useControllableState","sidebarId","useId","cssVars","jsxs","cn","jsx","Icon"],"mappings":";;;;;;AAkCA,MAAMA,IAAM,CAACC,MAAwB,OAAOA,KAAM,WAAW,GAAGA,CAAC,OAAOA,GAE3DC,IAAYC,EAAM,WAA8D,SAC3F;AAAA,EACE,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,kBAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,0BAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,gBAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,uBAAAC,IAAwB;AAAA,EACxB,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAA8B;AAAA,IAC9D,OAAOf;AAAA,IACP,cAAcC;AAAA,IACd,UAAUC;AAAA,EAAA,CACX,GAEKc,IAAYC,EAAA,GAEZC,IAAU;AAAA,IACd,wBAAoC1B,EAAZqB,IAAgBP,IAA6BP,CAAR;AAAA,EAAoB;AAGnF,SACE,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,eAAY;AAAA,MACZ,WAAWQ;AAAA,QACT;AAAA,QACA,EAAE,iCAAiCb,GAAc,6BAA6BM,EAAA;AAAA,QAC9EL;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,GAAGU,GAAS,GAAGT,EAAA;AAAA,MACvB,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAf,IAAS,gBAAAyB,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAO,IAAS;AAAA,QACpE,gBAAAF,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAAtB,IACC,gBAAAsB,EAAC,SAAA,EAAM,IAAIH,GAAW,WAAU,4BAC7B,UAAA;AAAA,YAAAb,IACC,gBAAAkB,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAAjB,KAAA,OAAAA,IACC,gBAAAiB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,cAAYhB;AAAA,gBACZ,iBAAe,CAACQ;AAAA,gBAChB,iBAAeG;AAAA,gBACf,SAAS,MAAMF,EAAa,CAACD,CAAS;AAAA,gBAEtC,4BAACS,GAAA,EAAK,MAAMT,IAAY,kBAAkB,gBAAgB,MAAM,GAAA,CAAI;AAAA,cAAA;AAAA,YAAA,GAG1E,IACE;AAAA,YACHhB;AAAA,UAAA,EAAA,CACH,IACE;AAAA,UACJ,gBAAAsB,EAAC,OAAA,EAAI,WAAU,4BACZ,UAAA;AAAA,YAAAT;AAAA,YACAZ,IAAS,gBAAAuB,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAO,IAAS;AAAA,UAAA,EAAA,CACtE;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -0,0 +1,2 @@
+export { default as AppLayout } from "./appLayout";
+export type { AppLayoutProps } from "./appLayout";

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

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from "react";
+export type DividerColor = "default" | "primary" | "secondary" | "error" | "success" | "warning" | "info";
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    /** Direction of the divider line. */
+    orientation?: "horizontal" | "vertical";
+    /** Inset behaviour of the line relative to its container. */
+    variant?: "fullWidth" | "inset" | "middle";
+    /** Horizontal alignment of the optional text content. */
+    textAlign?: "left" | "center" | "right";
+    /** Line color (semantic token). */
+    color?: DividerColor;
+    /** Line thickness (number = px, or any CSS length). */
+    thickness?: number | string;
+    /** Stretch to fill a flex container along the cross axis. */
+    flexItem?: boolean;
+}
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Divider;

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

@@ -0,0 +1,58 @@
+import { jsx as a } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/divider/divider.entry.css';/* empty css                                                         */
+import { forwardRef as w } from "react";
+import C from "clsx";
+const x = {
+  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)"
+}, g = w(function({
+  className: t,
+  orientation: r = "horizontal",
+  variant: l = "fullWidth",
+  textAlign: m = "center",
+  color: v = "default",
+  thickness: i,
+  flexItem: c,
+  style: n,
+  children: o,
+  ...u
+}, f) {
+  const e = o != null && o !== !1, d = x[v], s = typeof i == "number" ? `${i}px` : i, b = {
+    ...n,
+    ...d ? { borderColor: d } : {},
+    ...s ? r === "vertical" ? { borderLeftWidth: s } : { borderBottomWidth: s } : {}
+  }, p = C(
+    "smwb-divider",
+    `smwb-divider_${r}`,
+    `smwb-divider_${l}`,
+    {
+      "smwb-divider_with-text": e && r === "horizontal",
+      [`smwb-divider_align-${m}`]: e && r === "horizontal",
+      "smwb-divider_flex-item": c
+    },
+    t
+  );
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ...u,
+      ref: f,
+      "data-testid": "divider",
+      role: "separator",
+      "aria-orientation": r,
+      className: p,
+      style: b,
+      children: e && r === "horizontal" ? /* @__PURE__ */ a("span", { className: "smwb-divider__text", children: o }) : null
+    }
+  );
+});
+export {
+  g as Divider,
+  g as default
+};
+//# sourceMappingURL=divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sources":["../../../../src/components/layout/divider/divider.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport type DividerColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface DividerProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\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}\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 const Divider = forwardRef<HTMLDivElement, PropsWithChildren<DividerProps>>(function Divider(\n  {\n    className,\n    orientation = \"horizontal\",\n    variant = \"fullWidth\",\n    textAlign = \"center\",\n    color = \"default\",\n    thickness,\n    flexItem,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const hasText = children !== undefined && children !== null && children !== false;\n  const c = colorVar[color];\n  const t = typeof thickness === \"number\" ? `${thickness}px` : thickness;\n\n  const dividerStyle: CSSProperties = {\n    ...style,\n    ...(c ? { borderColor: c } : {}),\n    ...(t ? (orientation === \"vertical\" ? { borderLeftWidth: t } : { borderBottomWidth: t }) : {}),\n  };\n\n  const dividerClassName = cn(\n    \"smwb-divider\",\n    `smwb-divider_${orientation}`,\n    `smwb-divider_${variant}`,\n    {\n      \"smwb-divider_with-text\": hasText && orientation === \"horizontal\",\n      [`smwb-divider_align-${textAlign}`]: hasText && orientation === \"horizontal\",\n      \"smwb-divider_flex-item\": flexItem,\n    },\n    className\n  );\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-testid=\"divider\"\n      role=\"separator\"\n      aria-orientation={orientation}\n      className={dividerClassName}\n      style={dividerStyle}\n    >\n      {hasText && orientation === \"horizontal\" ? <span className=\"smwb-divider__text\">{children}</span> : null}\n    </div>\n  );\n});\n\nexport default Divider;\n"],"names":["colorVar","Divider","forwardRef","className","orientation","variant","textAlign","color","thickness","flexItem","style","children","props","ref","hasText","c","t","dividerStyle","dividerClassName","cn","jsx"],"mappings":";;;;AAsBA,MAAMA,IAAqD;AAAA,EACzD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR,GAEaC,IAAUC,EAA4D,SACjF;AAAA,EACE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoCH,KAAa,QAAQA,MAAa,IACtEI,IAAIf,EAASO,CAAK,GAClBS,IAAI,OAAOR,KAAc,WAAW,GAAGA,CAAS,OAAOA,GAEvDS,IAA8B;AAAA,IAClC,GAAGP;AAAA,IACH,GAAIK,IAAI,EAAE,aAAaA,EAAA,IAAM,CAAA;AAAA,IAC7B,GAAIC,IAAKZ,MAAgB,aAAa,EAAE,iBAAiBY,MAAM,EAAE,mBAAmBA,MAAO,CAAA;AAAA,EAAC,GAGxFE,IAAmBC;AAAA,IACvB;AAAA,IACA,gBAAgBf,CAAW;AAAA,IAC3B,gBAAgBC,CAAO;AAAA,IACvB;AAAA,MACE,0BAA0BS,KAAWV,MAAgB;AAAA,MACrD,CAAC,sBAAsBE,CAAS,EAAE,GAAGQ,KAAWV,MAAgB;AAAA,MAChE,0BAA0BK;AAAA,IAAA;AAAA,IAE5BN;AAAA,EAAA;AAGF,SACE,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,oBAAkBT;AAAA,MAClB,WAAWc;AAAA,MACX,OAAOD;AAAA,MAEN,UAAAH,KAAWV,MAAgB,eAAe,gBAAAgB,EAAC,UAAK,WAAU,sBAAsB,UAAAT,GAAS,IAAU;AAAA,IAAA;AAAA,EAAA;AAG1G,CAAC;"}

package/dist/components/layout/divider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Divider } from "./divider";
+export type { DividerProps, DividerColor } from "./divider";