@smwb/ui-solid 0.3.0 → 0.4.1

package/dist/source/components/inputs/datePicker/dataPickerInput.jsx

@@ -0,0 +1,57 @@
+import { Show, splitProps } from "solid-js";
+import { TextField } from "../textField";
+import { DatePickerIconButton } from "./datePickerIconButton";
+import { createDateInput } from "./useDateInput";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function stopPropagation(event) {
+  event.stopPropagation();
+}
+function DataPickerInput(props) {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onChange",
+    "onBlur",
+    "onToggle",
+    "disabled",
+    "disableCalendar",
+    "calendarIcon",
+    "format",
+    "ref"
+  ]);
+  const masked = createDateInput({
+    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.disableCalendar}>
+          <DatePickerIconButton
+      edge="end"
+      onClick={() => local.onToggle()}
+      onMouseDown={stopPropagation}
+      disabled={Boolean(local.disabled)}
+      data-testid="date-picker-icon-button"
+    >
+            <Show when={local.calendarIcon} fallback={<Icon name="calendar_today" fill={1} weight={500} size={24} />}>
+              {local.calendarIcon}
+            </Show>
+          </DatePickerIconButton>
+        </Show>}
+    disabled={Boolean(local.disabled)}
+    {...rest}
+  />;
+}
+var dataPickerInput_default = DataPickerInput;
+export {
+  DataPickerInput,
+  dataPickerInput_default as default
+};
+//# sourceMappingURL=dataPickerInput.jsx.map

package/dist/source/components/inputs/datePicker/dataPickerInput.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/datePicker/dataPickerInput.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport { TextField } from \"../textField\";\nimport { DatePickerIconButton } from \"./datePickerIconButton\";\nimport { createDateInput } from \"./useDateInput\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { DatePickerProps } from \"./datePicker\";\n\nexport interface DataPickerInputProps extends Omit<DatePickerProps, \"placement\" | \"onToggle\"> {\n  onToggle: () => void;\n  ref?: Ref<HTMLInputElement>;\n}\n\nfunction stopPropagation(event: Event): void {\n  event.stopPropagation();\n}\n\nexport function DataPickerInput(props: DataPickerInputProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"onBlur\",\n    \"onToggle\",\n    \"disabled\",\n    \"disableCalendar\",\n    \"calendarIcon\",\n    \"format\",\n    \"ref\",\n  ]);\n\n  const masked = createDateInput({\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.disableCalendar}>\n          <DatePickerIconButton\n            edge=\"end\"\n            onClick={() => local.onToggle()}\n            onMouseDown={stopPropagation}\n            disabled={Boolean(local.disabled)}\n            data-testid=\"date-picker-icon-button\"\n          >\n            <Show when={local.calendarIcon} fallback={<Icon name=\"calendar_today\" fill={1} weight={500} size={24} />}>\n              {local.calendarIcon}\n            </Show>\n          </DatePickerIconButton>\n        </Show>\n      }\n      disabled={Boolean(local.disabled)}\n      {...rest}\n    />\n  );\n}\n\nexport default DataPickerInput;\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,iBAAiB;AAAA,UAClC,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,cAAc,UAAU,CAAC,KAAK,KAAK,iBAAiB,MAAM,GAAG,QAAQ,KAAK,MAAM,IAAI,IAAI;AAAA,eACvG,MAAM,aAAa;AAAA,YACtB,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":"dataPickerInput.jsx"}

package/dist/source/components/inputs/datePicker/dateFormat.js

@@ -0,0 +1,89 @@
+const DATE_TOKEN_REGEXP = /yyyy|MM|dd/g;
+function extractTokens(pattern) {
+  const tokens = [];
+  let match;
+  DATE_TOKEN_REGEXP.lastIndex = 0;
+  while ((match = DATE_TOKEN_REGEXP.exec(pattern)) !== null) {
+    tokens.push(match[0]);
+  }
+  return tokens;
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function patternToRegExp(pattern) {
+  let regex = "^";
+  let lastIndex = 0;
+  let match;
+  DATE_TOKEN_REGEXP.lastIndex = 0;
+  while ((match = DATE_TOKEN_REGEXP.exec(pattern)) !== null) {
+    regex += escapeRegExp(pattern.slice(lastIndex, match.index));
+    regex += match[0] === "yyyy" ? "(\\d{4})" : "(\\d{2})";
+    lastIndex = DATE_TOKEN_REGEXP.lastIndex;
+  }
+  regex += escapeRegExp(pattern.slice(lastIndex));
+  regex += "$";
+  return new RegExp(regex);
+}
+function isValidCalendarDate(year, month, day) {
+  if (month < 1 || month > 12 || day < 1) {
+    return false;
+  }
+  const date = new Date(year, month - 1, day);
+  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+}
+function formatDateByPattern(date, pattern) {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return pattern.replace(DATE_TOKEN_REGEXP, (token) => {
+    if (token === "yyyy") {
+      return String(year).padStart(4, "0");
+    }
+    if (token === "MM") {
+      return String(month).padStart(2, "0");
+    }
+    return String(day).padStart(2, "0");
+  });
+}
+function parseDateByPattern(value, pattern) {
+  const tokens = extractTokens(pattern);
+  if (tokens.length !== 3 || !tokens.includes("yyyy") || !tokens.includes("MM") || !tokens.includes("dd")) {
+    return void 0;
+  }
+  const match = patternToRegExp(pattern).exec(value);
+  if (!match) {
+    return void 0;
+  }
+  let year;
+  let month;
+  let day;
+  tokens.forEach((token, index) => {
+    const part = Number(match[index + 1]);
+    if (token === "yyyy") {
+      year = part;
+      return;
+    }
+    if (token === "MM") {
+      month = part;
+      return;
+    }
+    day = part;
+  });
+  if (year === void 0 || month === void 0 || day === void 0) {
+    return void 0;
+  }
+  if (!isValidCalendarDate(year, month, day)) {
+    return void 0;
+  }
+  return new Date(year, month - 1, day);
+}
+function isDatePatternMatch(value, pattern) {
+  return parseDateByPattern(value, pattern) !== void 0;
+}
+export {
+  formatDateByPattern,
+  isDatePatternMatch,
+  parseDateByPattern
+};
+//# sourceMappingURL=dateFormat.js.map

package/dist/source/components/inputs/datePicker/dateFormat.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/inputs/datePicker/dateFormat.ts"],
+  "sourcesContent": ["const DATE_TOKEN_REGEXP = /yyyy|MM|dd/g;\n\ntype DateToken = \"yyyy\" | \"MM\" | \"dd\";\n\nfunction extractTokens(pattern: string): DateToken[] {\n  const tokens: DateToken[] = [];\n  let match: RegExpExecArray | null;\n\n  DATE_TOKEN_REGEXP.lastIndex = 0;\n  while ((match = DATE_TOKEN_REGEXP.exec(pattern)) !== null) {\n    tokens.push(match[0] as DateToken);\n  }\n\n  return tokens;\n}\n\nfunction escapeRegExp(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n\nfunction patternToRegExp(pattern: string): RegExp {\n  let regex = \"^\";\n  let lastIndex = 0;\n  let match: RegExpExecArray | null;\n\n  DATE_TOKEN_REGEXP.lastIndex = 0;\n  while ((match = DATE_TOKEN_REGEXP.exec(pattern)) !== null) {\n    regex += escapeRegExp(pattern.slice(lastIndex, match.index));\n    regex += match[0] === \"yyyy\" ? \"(\\\\d{4})\" : \"(\\\\d{2})\";\n    lastIndex = DATE_TOKEN_REGEXP.lastIndex;\n  }\n\n  regex += escapeRegExp(pattern.slice(lastIndex));\n  regex += \"$\";\n\n  return new RegExp(regex);\n}\n\nfunction isValidCalendarDate(year: number, month: number, day: number): boolean {\n  if (month < 1 || month > 12 || day < 1) {\n    return false;\n  }\n\n  const date = new Date(year, month - 1, day);\n\n  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;\n}\n\nexport function formatDateByPattern(date: Date, pattern: string): string {\n  const year = date.getFullYear();\n  const month = date.getMonth() + 1;\n  const day = date.getDate();\n\n  return pattern.replace(DATE_TOKEN_REGEXP, (token) => {\n    if (token === \"yyyy\") {\n      return String(year).padStart(4, \"0\");\n    }\n\n    if (token === \"MM\") {\n      return String(month).padStart(2, \"0\");\n    }\n\n    return String(day).padStart(2, \"0\");\n  });\n}\n\nexport function parseDateByPattern(value: string, pattern: string): Date | undefined {\n  const tokens = extractTokens(pattern);\n\n  if (tokens.length !== 3 || !tokens.includes(\"yyyy\") || !tokens.includes(\"MM\") || !tokens.includes(\"dd\")) {\n    return undefined;\n  }\n\n  const match = patternToRegExp(pattern).exec(value);\n\n  if (!match) {\n    return undefined;\n  }\n\n  let year: number | undefined;\n  let month: number | undefined;\n  let day: number | undefined;\n\n  tokens.forEach((token, index) => {\n    const part = Number(match[index + 1]);\n\n    if (token === \"yyyy\") {\n      year = part;\n      return;\n    }\n\n    if (token === \"MM\") {\n      month = part;\n      return;\n    }\n\n    day = part;\n  });\n\n  if (year === undefined || month === undefined || day === undefined) {\n    return undefined;\n  }\n\n  if (!isValidCalendarDate(year, month, day)) {\n    return undefined;\n  }\n\n  return new Date(year, month - 1, day);\n}\n\nexport function isDatePatternMatch(value: string, pattern: string): boolean {\n  return parseDateByPattern(value, pattern) !== undefined;\n}\n"],
+  "mappings": "AAAA,MAAM,oBAAoB;AAI1B,SAAS,cAAc,SAA8B;AACnD,QAAM,SAAsB,CAAC;AAC7B,MAAI;AAEJ,oBAAkB,YAAY;AAC9B,UAAQ,QAAQ,kBAAkB,KAAK,OAAO,OAAO,MAAM;AACzD,WAAO,KAAK,MAAM,CAAC,CAAc;AAAA,EACnC;AAEA,SAAO;AACT;AAEA,SAAS,aAAa,OAAuB;AAC3C,SAAO,MAAM,QAAQ,uBAAuB,MAAM;AACpD;AAEA,SAAS,gBAAgB,SAAyB;AAChD,MAAI,QAAQ;AACZ,MAAI,YAAY;AAChB,MAAI;AAEJ,oBAAkB,YAAY;AAC9B,UAAQ,QAAQ,kBAAkB,KAAK,OAAO,OAAO,MAAM;AACzD,aAAS,aAAa,QAAQ,MAAM,WAAW,MAAM,KAAK,CAAC;AAC3D,aAAS,MAAM,CAAC,MAAM,SAAS,aAAa;AAC5C,gBAAY,kBAAkB;AAAA,EAChC;AAEA,WAAS,aAAa,QAAQ,MAAM,SAAS,CAAC;AAC9C,WAAS;AAET,SAAO,IAAI,OAAO,KAAK;AACzB;AAEA,SAAS,oBAAoB,MAAc,OAAe,KAAsB;AAC9E,MAAI,QAAQ,KAAK,QAAQ,MAAM,MAAM,GAAG;AACtC,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,IAAI,KAAK,MAAM,QAAQ,GAAG,GAAG;AAE1C,SAAO,KAAK,YAAY,MAAM,QAAQ,KAAK,SAAS,MAAM,QAAQ,KAAK,KAAK,QAAQ,MAAM;AAC5F;AAEO,SAAS,oBAAoB,MAAY,SAAyB;AACvE,QAAM,OAAO,KAAK,YAAY;AAC9B,QAAM,QAAQ,KAAK,SAAS,IAAI;AAChC,QAAM,MAAM,KAAK,QAAQ;AAEzB,SAAO,QAAQ,QAAQ,mBAAmB,CAAC,UAAU;AACnD,QAAI,UAAU,QAAQ;AACpB,aAAO,OAAO,IAAI,EAAE,SAAS,GAAG,GAAG;AAAA,IACrC;AAEA,QAAI,UAAU,MAAM;AAClB,aAAO,OAAO,KAAK,EAAE,SAAS,GAAG,GAAG;AAAA,IACtC;AAEA,WAAO,OAAO,GAAG,EAAE,SAAS,GAAG,GAAG;AAAA,EACpC,CAAC;AACH;AAEO,SAAS,mBAAmB,OAAe,SAAmC;AACnF,QAAM,SAAS,cAAc,OAAO;AAEpC,MAAI,OAAO,WAAW,KAAK,CAAC,OAAO,SAAS,MAAM,KAAK,CAAC,OAAO,SAAS,IAAI,KAAK,CAAC,OAAO,SAAS,IAAI,GAAG;AACvG,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,gBAAgB,OAAO,EAAE,KAAK,KAAK;AAEjD,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,SAAO,QAAQ,CAAC,OAAO,UAAU;AAC/B,UAAM,OAAO,OAAO,MAAM,QAAQ,CAAC,CAAC;AAEpC,QAAI,UAAU,QAAQ;AACpB,aAAO;AACP;AAAA,IACF;AAEA,QAAI,UAAU,MAAM;AAClB,cAAQ;AACR;AAAA,IACF;AAEA,UAAM;AAAA,EACR,CAAC;AAED,MAAI,SAAS,UAAa,UAAU,UAAa,QAAQ,QAAW;AAClE,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,oBAAoB,MAAM,OAAO,GAAG,GAAG;AAC1C,WAAO;AAAA,EACT;AAEA,SAAO,IAAI,KAAK,MAAM,QAAQ,GAAG,GAAG;AACtC;AAEO,SAAS,mBAAmB,OAAe,SAA0B;AAC1E,SAAO,mBAAmB,OAAO,OAAO,MAAM;AAChD;",
+  "names": []
+}

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

@@ -0,0 +1,242 @@
+import "@smwb/ui-styles/less/components/datePicker/dataPicker.entry.less";
+import { Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js";
+import { Portal, isServer } from "solid-js/web";
+import { buildFloatingMiddleware, resolvePlacement } from "../../../utils/floating";
+import { createFloating } from "../../../primitives/createFloating";
+import { ClickAwayListener } from "../../clickAwayListener";
+import { TextField } from "../textField";
+import { DataPickerHeader } from "./dataPickerHeader";
+import { DataPickerDays } from "./dataPickerDays";
+import { DatePickerList } from "./datePickerList";
+import { DataPickerInput } from "./dataPickerInput";
+import { DatePickerIconButton } from "./datePickerIconButton";
+import { OpenView } from "./openView";
+import {
+  getDisplayDate,
+  getMonths,
+  getYears,
+  isValidDate,
+  setMonth,
+  setYear
+} from "./dateUtils";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+import { OpenView as OpenView2 } from "./openView";
+const FADE_MS = 150;
+function DatePicker(props) {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onChange",
+    "showDaysOutsideMonth",
+    "disablePast",
+    "disableFuture",
+    "weekStartsOn",
+    "placement",
+    "disabled",
+    "disableCalendar",
+    "calendarAriaLabel",
+    "minDate",
+    "maxDate",
+    "isDateDisabled",
+    "locale",
+    "format",
+    "range",
+    "rangeValue",
+    "onRangeChange",
+    "calendarIcon",
+    "onBlur",
+    "ref"
+  ]);
+  const value = () => local.value === void 0 ? void 0 : new Date(local.value);
+  const isRangeControlled = () => local.rangeValue !== void 0;
+  const [rangeState, setRangeState] = createSignal([void 0, void 0]);
+  const currentRange = () => isRangeControlled() && local.rangeValue ? local.rangeValue : rangeState();
+  const initialValue = value();
+  const [viewValue, setViewValue] = createSignal(isValidDate(initialValue) ? initialValue : /* @__PURE__ */ new Date());
+  const [openView, setOpenView] = createSignal(OpenView.days);
+  const [isOpen, setIsOpen] = createSignal(false);
+  let anchorEl;
+  let calendarEl;
+  const resolved = () => resolvePlacement(local.placement ?? "bottom-start");
+  const floating = createFloating({
+    placement: () => resolved().placement,
+    middleware: () => buildFloatingMiddleware(resolved())
+  });
+  createEffect(() => {
+    if (local.disabled) return;
+    const v = value();
+    setViewValue(isValidDate(v) ? v : /* @__PURE__ */ new Date());
+  });
+  const weekStartsOn = () => local.weekStartsOn ?? 1;
+  const onViewValueChange = (v) => {
+    setViewValue(v);
+  };
+  const onMonthLabelClick = () => {
+    setOpenView(openView() === OpenView.months ? OpenView.days : OpenView.months);
+  };
+  const onYearLabelClick = () => {
+    setOpenView(openView() === OpenView.years ? OpenView.days : OpenView.years);
+  };
+  const onMonthChange = (month) => {
+    setViewValue(setMonth(viewValue(), month));
+    setOpenView(OpenView.days);
+  };
+  const onYearChange = (year) => {
+    setViewValue(setYear(viewValue(), year));
+    setOpenView(OpenView.days);
+  };
+  const onChange = (event, date) => {
+    if (local.range) {
+      if (!date) return;
+      const [start, end] = currentRange();
+      let next;
+      if (!start || start && end) {
+        next = [date, void 0];
+      } else {
+        next = isValidDate(start) && date.getTime() < start.getTime() ? [date, start] : [start, date];
+      }
+      if (!isRangeControlled()) setRangeState(next);
+      local.onRangeChange?.(next);
+      if (next[0] && next[1]) setIsOpen(false);
+      return;
+    }
+    local.onChange?.(event, date, props);
+    setIsOpen(false);
+  };
+  const onToggle = () => {
+    if (!local.disabled) setIsOpen((prev) => !prev);
+  };
+  const onClickAway = (event) => {
+    const target = event.target;
+    if (calendarEl?.contains(target) || anchorEl?.contains(target)) return;
+    setIsOpen(false);
+  };
+  const months = createMemo(() => getMonths(local.locale));
+  const years = getYears((/* @__PURE__ */ new Date()).getFullYear(), 100);
+  const shouldOpen = () => isOpen() && !local.disabled && !local.disableCalendar;
+  const [mounted, setMounted] = createSignal(shouldOpen());
+  const [shown, setShown] = createSignal(false);
+  let raf;
+  let timer;
+  createEffect(() => {
+    if (shouldOpen()) {
+      if (timer !== void 0) clearTimeout(timer);
+      setMounted(true);
+      raf = requestAnimationFrame(() => setShown(true));
+    } else {
+      setShown(false);
+      if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);
+    }
+  });
+  onCleanup(() => {
+    if (raf !== void 0) cancelAnimationFrame(raf);
+    if (timer !== void 0) clearTimeout(timer);
+  });
+  const view = () => {
+    switch (openView()) {
+      case OpenView.months:
+        return <DatePickerList value={viewValue().getMonth()} items={months()} onChange={onMonthChange} />;
+      case OpenView.years:
+        return <DatePickerList value={viewValue().getFullYear()} items={years} onChange={onYearChange} />;
+      default:
+        return <DataPickerDays
+          viewValue={viewValue()}
+          value={value()}
+          showDaysOutsideMonth={local.showDaysOutsideMonth}
+          onChange={onChange}
+          disablePast={local.disablePast}
+          disableFuture={local.disableFuture}
+          weekStartsOn={weekStartsOn()}
+          minDate={local.minDate}
+          maxDate={local.maxDate}
+          isDateDisabled={local.isDateDisabled}
+          locale={local.locale}
+          range={local.range}
+          rangeStart={currentRange()[0]}
+          rangeEnd={currentRange()[1]}
+        />;
+    }
+  };
+  const rangeDisplay = () => local.range && (currentRange()[0] || currentRange()[1]) ? `${getDisplayDate(currentRange()[0], local.format)} \u2013 ${getDisplayDate(currentRange()[1], local.format)}` : "";
+  const anchorRef = mergeRefs(local.ref, floating.setReference, (el) => anchorEl = el);
+  return <>
+      <Show
+    when={local.range}
+    fallback={<DataPickerInput
+      ref={anchorRef}
+      value={local.value}
+      onChange={local.onChange}
+      onBlur={local.onBlur}
+      onToggle={onToggle}
+      disabled={local.disabled}
+      disableCalendar={local.disableCalendar}
+      format={local.format}
+      calendarIcon={local.calendarIcon}
+      {...rest}
+    />}
+  >
+        <TextField
+    ref={anchorRef}
+    value={rangeDisplay()}
+    readOnly
+    onChange={() => void 0}
+    disabled={Boolean(local.disabled)}
+    {...local.format ? { placeholder: `${local.format} \u2013 ${local.format}` } : {}}
+    endAdornment={<Show when={!local.disableCalendar}>
+              <DatePickerIconButton
+      edge="end"
+      onClick={onToggle}
+      disabled={Boolean(local.disabled)}
+      data-testid="date-picker-icon-button"
+    >
+                <Show
+      when={local.calendarIcon}
+      fallback={<Icon name="calendar_today" fill={1} weight={500} size={24} />}
+    >
+                  {local.calendarIcon}
+                </Show>
+              </DatePickerIconButton>
+            </Show>}
+    {...rest}
+  />
+      </Show>
+      <Show when={mounted()}>
+        <Portal mount={isServer ? void 0 : document.body}>
+          <ClickAwayListener onClickAway={onClickAway}>
+            <div
+    ref={mergeRefs(floating.setFloating, (el) => calendarEl = el)}
+    class="smwb-date-picker"
+    style={{
+      ...floating.floatingStyles(),
+      transition: `opacity ${FADE_MS}ms ease-in-out`,
+      opacity: shown() ? 1 : 0
+    }}
+    data-testid="date-picker"
+    role="dialog"
+    aria-modal="false"
+    aria-label={local.calendarAriaLabel ?? "Choose date"}
+  >
+              <div class="smwb-date-picker__inner">
+                <DataPickerHeader
+    viewValue={viewValue()}
+    locale={local.locale}
+    openView={openView()}
+    onChange={onViewValueChange}
+    onMonthLabelClick={onMonthLabelClick}
+    onYearLabelClick={onYearLabelClick}
+  />
+                <div class="smwb-date-picker__body">{view()}</div>
+              </div>
+            </div>
+          </ClickAwayListener>
+        </Portal>
+      </Show>
+    </>;
+}
+var datePicker_default = DatePicker;
+export {
+  DatePicker,
+  OpenView2 as OpenView,
+  datePicker_default as default
+};
+//# sourceMappingURL=datePicker.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePicker.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/datePicker/dataPicker.entry.less\";\nimport { type JSX, Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TextField, type TextFieldProps } from \"../textField\";\nimport { DataPickerHeader } from \"./dataPickerHeader\";\nimport { DataPickerDays } from \"./dataPickerDays\";\nimport { DatePickerList } from \"./datePickerList\";\nimport { DataPickerInput } from \"./dataPickerInput\";\nimport { DatePickerIconButton } from \"./datePickerIconButton\";\nimport { OpenView } from \"./openView\";\nimport {\n  type WeekStart,\n  getDisplayDate,\n  getMonths,\n  getYears,\n  isValidDate,\n  setMonth,\n  setYear,\n} from \"./dateUtils\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport { OpenView } from \"./openView\";\n\nexport interface DatePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  showDaysOutsideMonth?: boolean | undefined;\n  disablePast?: boolean | undefined;\n  disableFuture?: boolean | undefined;\n  /** Earliest selectable date (inclusive). */\n  minDate?: Date | undefined;\n  /** Latest selectable date (inclusive). */\n  maxDate?: Date | undefined;\n  /** Predicate to disable arbitrary days. */\n  isDateDisabled?: ((day: Date) => boolean) | undefined;\n  weekStartsOn?: WeekStart | undefined;\n  /** BCP-47 locale for calendar labels (day/month/year names). */\n  locale?: string | undefined;\n  /** Input format pattern with tokens dd, MM, yyyy, e.g. \"dd/MM/yyyy\". */\n  format?: string | undefined;\n  /** Enables date-range selection. */\n  range?: boolean | undefined;\n  /** Controlled range value `[start, end]`. */\n  rangeValue?: [Date | undefined, Date | undefined] | undefined;\n  /** Called when the range changes. */\n  onRangeChange?: ((range: [Date | undefined, Date | undefined]) => void) | undefined;\n  placement?: Placement | undefined;\n  disableCalendar?: boolean | undefined;\n  label?: string | undefined;\n  /** Accessible label for the calendar popup dialog. */\n  calendarAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  calendarIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: DatePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: DatePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function DatePicker(props: DatePickerProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"showDaysOutsideMonth\",\n    \"disablePast\",\n    \"disableFuture\",\n    \"weekStartsOn\",\n    \"placement\",\n    \"disabled\",\n    \"disableCalendar\",\n    \"calendarAriaLabel\",\n    \"minDate\",\n    \"maxDate\",\n    \"isDateDisabled\",\n    \"locale\",\n    \"format\",\n    \"range\",\n    \"rangeValue\",\n    \"onRangeChange\",\n    \"calendarIcon\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n  const isRangeControlled = (): boolean => local.rangeValue !== undefined;\n  const [rangeState, setRangeState] = createSignal<[Date | undefined, Date | undefined]>([undefined, undefined]);\n  const currentRange = (): [Date | undefined, Date | undefined] =>\n    isRangeControlled() && local.rangeValue ? local.rangeValue : rangeState();\n\n  const initialValue = value();\n  const [viewValue, setViewValue] = createSignal<Date>(isValidDate(initialValue) ? initialValue : new Date());\n  const [openView, setOpenView] = createSignal<OpenView>(OpenView.days);\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let calendarEl: HTMLElement | undefined;\n\n  const resolved = (): ReturnType<typeof resolvePlacement> => resolvePlacement(local.placement ?? \"bottom-start\");\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => buildFloatingMiddleware(resolved()),\n  });\n\n  createEffect(() => {\n    if (local.disabled) return;\n    const v = value();\n    setViewValue(isValidDate(v) ? v : new Date());\n  });\n\n  const weekStartsOn = (): WeekStart => local.weekStartsOn ?? 1;\n\n  const onViewValueChange = (v: Date): void => {\n    setViewValue(v);\n  };\n\n  const onMonthLabelClick = (): void => {\n    setOpenView(openView() === OpenView.months ? OpenView.days : OpenView.months);\n  };\n\n  const onYearLabelClick = (): void => {\n    setOpenView(openView() === OpenView.years ? OpenView.days : OpenView.years);\n  };\n\n  const onMonthChange = (month: number): void => {\n    setViewValue(setMonth(viewValue(), month));\n    setOpenView(OpenView.days);\n  };\n\n  const onYearChange = (year: number): void => {\n    setViewValue(setYear(viewValue(), year));\n    setOpenView(OpenView.days);\n  };\n\n  const onChange = (event?: Event, date?: Date): void => {\n    if (local.range) {\n      if (!date) return;\n      const [start, end] = currentRange();\n      let next: [Date | undefined, Date | undefined];\n      if (!start || (start && end)) {\n        next = [date, undefined];\n      } else {\n        next = isValidDate(start) && date.getTime() < start.getTime() ? [date, start] : [start, date];\n      }\n      if (!isRangeControlled()) setRangeState(next);\n      local.onRangeChange?.(next);\n      if (next[0] && next[1]) setIsOpen(false);\n      return;\n    }\n    local.onChange?.(event, date, props);\n    setIsOpen(false);\n  };\n\n  const onToggle = (): void => {\n    if (!local.disabled) setIsOpen((prev) => !prev);\n  };\n\n  const onClickAway = (event: MouseEvent | TouchEvent): void => {\n    const target = event.target as HTMLElement;\n    if (calendarEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const months = createMemo(() => getMonths(local.locale));\n  const years = getYears(new Date().getFullYear(), 100);\n\n  const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableCalendar;\n  const [mounted, setMounted] = createSignal(shouldOpen());\n  const [shown, setShown] = createSignal(false);\n  let raf: number | undefined;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  createEffect(() => {\n    if (shouldOpen()) {\n      if (timer !== undefined) clearTimeout(timer);\n      setMounted(true);\n      raf = requestAnimationFrame(() => setShown(true));\n    } else {\n      setShown(false);\n      if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);\n    }\n  });\n  onCleanup(() => {\n    if (raf !== undefined) cancelAnimationFrame(raf);\n    if (timer !== undefined) clearTimeout(timer);\n  });\n\n  const view = (): JSX.Element => {\n    switch (openView()) {\n      case OpenView.months:\n        return <DatePickerList value={viewValue().getMonth()} items={months()} onChange={onMonthChange} />;\n      case OpenView.years:\n        return <DatePickerList value={viewValue().getFullYear()} items={years} onChange={onYearChange} />;\n      default:\n        return (\n          <DataPickerDays\n            viewValue={viewValue()}\n            value={value()}\n            showDaysOutsideMonth={local.showDaysOutsideMonth}\n            onChange={onChange}\n            disablePast={local.disablePast}\n            disableFuture={local.disableFuture}\n            weekStartsOn={weekStartsOn()}\n            minDate={local.minDate}\n            maxDate={local.maxDate}\n            isDateDisabled={local.isDateDisabled}\n            locale={local.locale}\n            range={local.range}\n            rangeStart={currentRange()[0]}\n            rangeEnd={currentRange()[1]}\n          />\n        );\n    }\n  };\n\n  const rangeDisplay = (): string =>\n    local.range && (currentRange()[0] || currentRange()[1])\n      ? `${getDisplayDate(currentRange()[0], local.format)} – ${getDisplayDate(currentRange()[1], local.format)}`\n      : \"\";\n\n  const anchorRef = mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement));\n\n  return (\n    <>\n      <Show\n        when={local.range}\n        fallback={\n          <DataPickerInput\n            ref={anchorRef}\n            value={local.value}\n            onChange={local.onChange}\n            onBlur={local.onBlur}\n            onToggle={onToggle}\n            disabled={local.disabled}\n            disableCalendar={local.disableCalendar}\n            format={local.format}\n            calendarIcon={local.calendarIcon}\n            {...rest}\n          />\n        }\n      >\n        <TextField\n          ref={anchorRef}\n          value={rangeDisplay()}\n          readOnly\n          onChange={() => undefined}\n          disabled={Boolean(local.disabled)}\n          {...(local.format ? { placeholder: `${local.format} – ${local.format}` } : {})}\n          endAdornment={\n            <Show when={!local.disableCalendar}>\n              <DatePickerIconButton\n                edge=\"end\"\n                onClick={onToggle}\n                disabled={Boolean(local.disabled)}\n                data-testid=\"date-picker-icon-button\"\n              >\n                <Show\n                  when={local.calendarIcon}\n                  fallback={<Icon name=\"calendar_today\" fill={1} weight={500} size={24} />}\n                >\n                  {local.calendarIcon}\n                </Show>\n              </DatePickerIconButton>\n            </Show>\n          }\n          {...rest}\n        />\n      </Show>\n      <Show when={mounted()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>\n          <ClickAwayListener onClickAway={onClickAway}>\n            <div\n              ref={mergeRefs(floating.setFloating, (el) => (calendarEl = el as HTMLElement))}\n              class=\"smwb-date-picker\"\n              style={{\n                ...floating.floatingStyles(),\n                transition: `opacity ${FADE_MS}ms ease-in-out`,\n                opacity: shown() ? 1 : 0,\n              }}\n              data-testid=\"date-picker\"\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.calendarAriaLabel ?? \"Choose date\"}\n            >\n              <div class=\"smwb-date-picker__inner\">\n                <DataPickerHeader\n                  viewValue={viewValue()}\n                  locale={local.locale}\n                  openView={openView()}\n                  onChange={onViewValueChange}\n                  onMonthLabelClick={onMonthLabelClick}\n                  onYearLabelClick={onYearLabelClick}\n                />\n                <div class=\"smwb-date-picker__body\">{view()}</div>\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default DatePicker;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,MAAM,cAAc,YAAY,cAAc,WAAW,kBAAkB;AAC9F,SAAS,QAAQ,gBAAgB;AACjC,SAAS,yBAAyC,wBAAwB;AAC1E,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,iBAAsC;AAC/C,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAEpC,SAAS,YAAAA,iBAAgB;AAoCzB,MAAM,UAAU;AAET,SAAS,WAAW,OAAqC;AAC9D,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,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,QAAQ,MAAyB,MAAM,UAAU,SAAY,SAAY,IAAI,KAAK,MAAM,KAAK;AACnG,QAAM,oBAAoB,MAAe,MAAM,eAAe;AAC9D,QAAM,CAAC,YAAY,aAAa,IAAI,aAAmD,CAAC,QAAW,MAAS,CAAC;AAC7G,QAAM,eAAe,MACnB,kBAAkB,KAAK,MAAM,aAAa,MAAM,aAAa,WAAW;AAE1E,QAAM,eAAe,MAAM;AAC3B,QAAM,CAAC,WAAW,YAAY,IAAI,aAAmB,YAAY,YAAY,IAAI,eAAe,oBAAI,KAAK,CAAC;AAC1G,QAAM,CAAC,UAAU,WAAW,IAAI,aAAuB,SAAS,IAAI;AACpE,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,KAAK;AAE9C,MAAI;AACJ,MAAI;AAEJ,QAAM,WAAW,MAA2C,iBAAiB,MAAM,aAAa,cAAc;AAC9G,QAAM,WAAW,eAAe;AAAA,IAC9B,WAAW,MAAM,SAAS,EAAE;AAAA,IAC5B,YAAY,MAAM,wBAAwB,SAAS,CAAC;AAAA,EACtD,CAAC;AAED,eAAa,MAAM;AACjB,QAAI,MAAM,SAAU;AACpB,UAAM,IAAI,MAAM;AAChB,iBAAa,YAAY,CAAC,IAAI,IAAI,oBAAI,KAAK,CAAC;AAAA,EAC9C,CAAC;AAED,QAAM,eAAe,MAAiB,MAAM,gBAAgB;AAE5D,QAAM,oBAAoB,CAAC,MAAkB;AAC3C,iBAAa,CAAC;AAAA,EAChB;AAEA,QAAM,oBAAoB,MAAY;AACpC,gBAAY,SAAS,MAAM,SAAS,SAAS,SAAS,OAAO,SAAS,MAAM;AAAA,EAC9E;AAEA,QAAM,mBAAmB,MAAY;AACnC,gBAAY,SAAS,MAAM,SAAS,QAAQ,SAAS,OAAO,SAAS,KAAK;AAAA,EAC5E;AAEA,QAAM,gBAAgB,CAAC,UAAwB;AAC7C,iBAAa,SAAS,UAAU,GAAG,KAAK,CAAC;AACzC,gBAAY,SAAS,IAAI;AAAA,EAC3B;AAEA,QAAM,eAAe,CAAC,SAAuB;AAC3C,iBAAa,QAAQ,UAAU,GAAG,IAAI,CAAC;AACvC,gBAAY,SAAS,IAAI;AAAA,EAC3B;AAEA,QAAM,WAAW,CAAC,OAAe,SAAsB;AACrD,QAAI,MAAM,OAAO;AACf,UAAI,CAAC,KAAM;AACX,YAAM,CAAC,OAAO,GAAG,IAAI,aAAa;AAClC,UAAI;AACJ,UAAI,CAAC,SAAU,SAAS,KAAM;AAC5B,eAAO,CAAC,MAAM,MAAS;AAAA,MACzB,OAAO;AACL,eAAO,YAAY,KAAK,KAAK,KAAK,QAAQ,IAAI,MAAM,QAAQ,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,OAAO,IAAI;AAAA,MAC9F;AACA,UAAI,CAAC,kBAAkB,EAAG,eAAc,IAAI;AAC5C,YAAM,gBAAgB,IAAI;AAC1B,UAAI,KAAK,CAAC,KAAK,KAAK,CAAC,EAAG,WAAU,KAAK;AACvC;AAAA,IACF;AACA,UAAM,WAAW,OAAO,MAAM,KAAK;AACnC,cAAU,KAAK;AAAA,EACjB;AAEA,QAAM,WAAW,MAAY;AAC3B,QAAI,CAAC,MAAM,SAAU,WAAU,CAAC,SAAS,CAAC,IAAI;AAAA,EAChD;AAEA,QAAM,cAAc,CAAC,UAAyC;AAC5D,UAAM,SAAS,MAAM;AACrB,QAAI,YAAY,SAAS,MAAM,KAAK,UAAU,SAAS,MAAM,EAAG;AAChE,cAAU,KAAK;AAAA,EACjB;AAEA,QAAM,SAAS,WAAW,MAAM,UAAU,MAAM,MAAM,CAAC;AACvD,QAAM,QAAQ,UAAS,oBAAI,KAAK,GAAE,YAAY,GAAG,GAAG;AAEpD,QAAM,aAAa,MAAe,OAAO,KAAK,CAAC,MAAM,YAAY,CAAC,MAAM;AACxE,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,WAAW,CAAC;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAa,KAAK;AAC5C,MAAI;AACJ,MAAI;AAEJ,eAAa,MAAM;AACjB,QAAI,WAAW,GAAG;AAChB,UAAI,UAAU,OAAW,cAAa,KAAK;AAC3C,iBAAW,IAAI;AACf,YAAM,sBAAsB,MAAM,SAAS,IAAI,CAAC;AAAA,IAClD,OAAO;AACL,eAAS,KAAK;AACd,UAAI,QAAQ,EAAG,SAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,OAAO;AAAA,IACpE;AAAA,EACF,CAAC;AACD,YAAU,MAAM;AACd,QAAI,QAAQ,OAAW,sBAAqB,GAAG;AAC/C,QAAI,UAAU,OAAW,cAAa,KAAK;AAAA,EAC7C,CAAC;AAED,QAAM,OAAO,MAAmB;AAC9B,YAAQ,SAAS,GAAG;AAAA,MAClB,KAAK,SAAS;AACZ,eAAO,CAAC,eAAe,OAAO,UAAU,EAAE,SAAS,GAAG,OAAO,OAAO,GAAG,UAAU,eAAe;AAAA,MAClG,KAAK,SAAS;AACZ,eAAO,CAAC,eAAe,OAAO,UAAU,EAAE,YAAY,GAAG,OAAO,OAAO,UAAU,cAAc;AAAA,MACjG;AACE,eACE,CAAC;AAAA,UACC,WAAW,UAAU;AAAA,UACrB,OAAO,MAAM;AAAA,UACb,sBAAsB,MAAM;AAAA,UAC5B,UAAU;AAAA,UACV,aAAa,MAAM;AAAA,UACnB,eAAe,MAAM;AAAA,UACrB,cAAc,aAAa;AAAA,UAC3B,SAAS,MAAM;AAAA,UACf,SAAS,MAAM;AAAA,UACf,gBAAgB,MAAM;AAAA,UACtB,QAAQ,MAAM;AAAA,UACd,OAAO,MAAM;AAAA,UACb,YAAY,aAAa,EAAE,CAAC;AAAA,UAC5B,UAAU,aAAa,EAAE,CAAC;AAAA,QAC5B;AAAA,IAEN;AAAA,EACF;AAEA,QAAM,eAAe,MACnB,MAAM,UAAU,aAAa,EAAE,CAAC,KAAK,aAAa,EAAE,CAAC,KACjD,GAAG,eAAe,aAAa,EAAE,CAAC,GAAG,MAAM,MAAM,CAAC,WAAM,eAAe,aAAa,EAAE,CAAC,GAAG,MAAM,MAAM,CAAC,KACvG;AAEN,QAAM,YAAY,UAAU,MAAM,KAAK,SAAS,cAAc,CAAC,OAAQ,WAAW,EAAkB;AAEpG,SACE,EAAE;AAAA,MACA,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UACE,CAAC;AAAA,MACC,KAAK;AAAA,MACL,OAAO,MAAM;AAAA,MACb,UAAU,MAAM;AAAA,MAChB,QAAQ,MAAM;AAAA,MACd,UAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,iBAAiB,MAAM;AAAA,MACvB,QAAQ,MAAM;AAAA,MACd,cAAc,MAAM;AAAA,UAChB;AAAA,IACN;AAAA,GAEH;AAAA,QACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,aAAa;AAAA,IACpB;AAAA,IACA,UAAU,MAAM;AAAA,IAChB,UAAU,QAAQ,MAAM,QAAQ;AAAA,QAC3B,MAAM,SAAS,EAAE,aAAa,GAAG,MAAM,MAAM,WAAM,MAAM,MAAM,GAAG,IAAI,CAAC;AAAA,IAC5E,cACE,CAAC,KAAK,MAAM,CAAC,MAAM,iBAAiB;AAAA,cAClC,CAAC;AAAA,MACC,KAAK;AAAA,MACL,SAAS;AAAA,MACT,UAAU,QAAQ,MAAM,QAAQ;AAAA,MAChC,YAAY;AAAA,KACb;AAAA,gBACC,CAAC;AAAA,MACC,MAAM,MAAM;AAAA,MACZ,UAAU,CAAC,KAAK,KAAK,iBAAiB,MAAM,GAAG,QAAQ,KAAK,MAAM,IAAI;AAAA,KACvE;AAAA,mBACE,MAAM,aAAa;AAAA,gBACtB,EALC,KAKM;AAAA,cACT,EAZC,qBAYsB;AAAA,YACzB,EAdC;AAAA,QAgBC;AAAA,EACN,EAAE;AAAA,MACJ,EA3CC,KA2CM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,QACrB,CAAC,OAAO,OAAQ,WAAW,SAAY,SAAS,MAAe;AAAA,UAC7D,CAAC,kBAAkB,aAAa,aAAa;AAAA,YAC3C,CAAC;AAAA,IACC,KAAK,UAAU,SAAS,aAAa,CAAC,OAAQ,aAAa,EAAkB;AAAA,IAC7E,MAAM;AAAA,IACN,OAAO;AAAA,MACL,GAAG,SAAS,eAAe;AAAA,MAC3B,YAAY,WAAW,OAAO;AAAA,MAC9B,SAAS,MAAM,IAAI,IAAI;AAAA,IACzB;AAAA,IACA,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,WAAW;AAAA,IACX,YAAY,MAAM,qBAAqB;AAAA,GACxC;AAAA,cACC,CAAC,IAAI,MAAM,0BAA0B;AAAA,gBACnC,CAAC;AAAA,IACC,WAAW,UAAU;AAAA,IACrB,QAAQ,MAAM;AAAA,IACd,UAAU,SAAS;AAAA,IACnB,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,EACpB,EAAE;AAAA,gBACF,CAAC,IAAI,MAAM,0BAA0B,KAAK,EAAE,EAA3C,IAAiD;AAAA,cACpD,EAVC,IAUK;AAAA,YACR,EAxBC,IAwBK;AAAA,UACR,EA1BC,kBA0BmB;AAAA,QACtB,EA5BC,OA4BQ;AAAA,MACX,EA9BC,KA8BM;AAAA,IACT;AAEJ;AAEA,IAAO,qBAAQ;","names":["OpenView"],"file":"datePicker.jsx"}

package/dist/source/components/inputs/datePicker/datePickerActionLabel.jsx

@@ -0,0 +1,48 @@
+import { splitProps } from "solid-js";
+import cn from "clsx";
+import { DatePickerIconButton } from "./datePickerIconButton";
+import { Icon } from "../../base/icon";
+function DatePickerActionLabel(props) {
+  const [local] = splitProps(props, [
+    "label",
+    "onLeftIconClick",
+    "onRightIconClick",
+    "onLabelClick",
+    "disabled",
+    "active",
+    "hiddenSwitches",
+    "dataToggleId"
+  ]);
+  const switchClasses = () => cn("smwb-date-picker__switch", {
+    "smwb-date-picker__switch--hidden": local.hiddenSwitches
+  });
+  return <div class="smwb-date-picker__action">
+      <div class={switchClasses()}>
+        <DatePickerIconButton size="small" onClick={local.disabled ? void 0 : local.onLeftIconClick}>
+          <Icon name="keyboard_arrow_left" weight={500} size={24} />
+        </DatePickerIconButton>
+      </div>
+      <div
+    class={cn("smwb-date-picker__action-label", {
+      "smwb-date-picker__action-label--disabled": local.disabled,
+      "smwb-date-picker__action-label--active": local.active
+    })}
+    data-testid={local.dataToggleId}
+    onClick={local.disabled ? void 0 : local.onLabelClick}
+  >
+        <span class="smwb-date-picker__action-text">{local.label}</span>
+        <Icon name="arrow_drop_down" weight={500} size={20} />
+      </div>
+      <div class={switchClasses()}>
+        <DatePickerIconButton size="small" onClick={local.disabled ? void 0 : local.onRightIconClick}>
+          <Icon name="keyboard_arrow_right" weight={500} size={24} />
+        </DatePickerIconButton>
+      </div>
+    </div>;
+}
+var datePickerActionLabel_default = DatePickerActionLabel;
+export {
+  DatePickerActionLabel,
+  datePickerActionLabel_default as default
+};
+//# sourceMappingURL=datePickerActionLabel.jsx.map

package/dist/source/components/inputs/datePicker/datePickerActionLabel.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerActionLabel.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { DatePickerIconButton } from \"./datePickerIconButton\";\nimport { Icon } from \"../../base/icon\";\n\nexport interface ActionLabelProps {\n  label: string;\n  onLeftIconClick?: (() => void) | undefined;\n  onRightIconClick?: (() => void) | undefined;\n  onLabelClick?: (() => void) | undefined;\n  disabled?: boolean | undefined;\n  active?: boolean | undefined;\n  hiddenSwitches?: boolean | undefined;\n  dataToggleId?: string | undefined;\n}\n\nexport function DatePickerActionLabel(props: ActionLabelProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"label\",\n    \"onLeftIconClick\",\n    \"onRightIconClick\",\n    \"onLabelClick\",\n    \"disabled\",\n    \"active\",\n    \"hiddenSwitches\",\n    \"dataToggleId\",\n  ]);\n\n  const switchClasses = (): string =>\n    cn(\"smwb-date-picker__switch\", {\n      \"smwb-date-picker__switch--hidden\": local.hiddenSwitches,\n    });\n\n  return (\n    <div class=\"smwb-date-picker__action\">\n      <div class={switchClasses()}>\n        <DatePickerIconButton size=\"small\" onClick={local.disabled ? undefined : local.onLeftIconClick}>\n          <Icon name=\"keyboard_arrow_left\" weight={500} size={24} />\n        </DatePickerIconButton>\n      </div>\n      <div\n        class={cn(\"smwb-date-picker__action-label\", {\n          \"smwb-date-picker__action-label--disabled\": local.disabled,\n          \"smwb-date-picker__action-label--active\": local.active,\n        })}\n        data-testid={local.dataToggleId}\n        onClick={local.disabled ? undefined : local.onLabelClick}\n      >\n        <span class=\"smwb-date-picker__action-text\">{local.label}</span>\n        <Icon name=\"arrow_drop_down\" weight={500} size={20} />\n      </div>\n      <div class={switchClasses()}>\n        <DatePickerIconButton size=\"small\" onClick={local.disabled ? undefined : local.onRightIconClick}>\n          <Icon name=\"keyboard_arrow_right\" weight={500} size={24} />\n        </DatePickerIconButton>\n      </div>\n    </div>\n  );\n}\n\nexport default DatePickerActionLabel;\n"],"mappings":"AAAA,SAAmB,kBAAkB;AACrC,OAAO,QAAQ;AACf,SAAS,4BAA4B;AACrC,SAAS,YAAY;AAad,SAAS,sBAAsB,OAAsC;AAC1E,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,MACpB,GAAG,4BAA4B;AAAA,IAC7B,oCAAoC,MAAM;AAAA,EAC5C,CAAC;AAEH,SACE,CAAC,IAAI,MAAM,2BAA2B;AAAA,MACpC,CAAC,IAAI,OAAO,cAAc,GAAG;AAAA,QAC3B,CAAC,qBAAqB,KAAK,QAAQ,SAAS,MAAM,WAAW,SAAY,MAAM,iBAAiB;AAAA,UAC9F,CAAC,KAAK,KAAK,sBAAsB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,QAC5D,EAFC,qBAEsB;AAAA,MACzB,EAJC,IAIK;AAAA,MACN,CAAC;AAAA,IACC,OAAO,GAAG,kCAAkC;AAAA,MAC1C,4CAA4C,MAAM;AAAA,MAClD,0CAA0C,MAAM;AAAA,IAClD,CAAC;AAAA,IACD,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM,WAAW,SAAY,MAAM;AAAA,GAC7C;AAAA,QACC,CAAC,KAAK,MAAM,iCAAiC,MAAM,MAAM,EAAxD,KAA+D;AAAA,QAChE,CAAC,KAAK,KAAK,kBAAkB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,MACxD,EAVC,IAUK;AAAA,MACN,CAAC,IAAI,OAAO,cAAc,GAAG;AAAA,QAC3B,CAAC,qBAAqB,KAAK,QAAQ,SAAS,MAAM,WAAW,SAAY,MAAM,kBAAkB;AAAA,UAC/F,CAAC,KAAK,KAAK,uBAAuB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,QAC7D,EAFC,qBAEsB;AAAA,MACzB,EAJC,IAIK;AAAA,IACR,EAtBC;AAwBL;AAEA,IAAO,gCAAQ;","names":[],"file":"datePickerActionLabel.jsx"}

package/dist/source/components/inputs/datePicker/datePickerDay.jsx

@@ -0,0 +1,52 @@
+import { Show, splitProps } from "solid-js";
+import cn from "clsx";
+import { Ripple } from "../../base/ripple";
+function DatePickerDay(props) {
+  const [local, rest] = splitProps(props, [
+    "class",
+    "children",
+    "onChange",
+    "active",
+    "current",
+    "hidden",
+    "outside",
+    "disabled",
+    "inRange",
+    "day"
+  ]);
+  let rippleActions;
+  const onPointerDown = (event) => {
+    if (!local.disabled) rippleActions?.onRipple(event);
+  };
+  const onClick = () => {
+    if (!local.disabled) local.onChange?.(void 0, local.day);
+  };
+  const classes = () => cn("smwb-date-picker__day", local.class, {
+    "smwb-date-picker__day--active": !local.disabled && local.active,
+    "smwb-date-picker__day--current": local.current && !local.active,
+    "smwb-date-picker__day--outside": !local.disabled && local.outside,
+    "smwb-date-picker__day--disabled": local.disabled,
+    "smwb-date-picker__day--in-range": !local.disabled && local.inRange
+  });
+  return <Show when={!local.hidden} fallback={<span class="smwb-date-picker__day-hidden" />}>
+      <button
+    {...rest}
+    class={classes()}
+    type="button"
+    onPointerDown={onPointerDown}
+    onClick={onClick}
+    disabled={local.disabled}
+  >
+        {local.children}
+        <Show when={!local.disabled}>
+          <Ripple actionRef={(actions) => rippleActions = actions} center />
+        </Show>
+      </button>
+    </Show>;
+}
+var datePickerDay_default = DatePickerDay;
+export {
+  DatePickerDay,
+  datePickerDay_default as default
+};
+//# sourceMappingURL=datePickerDay.jsx.map

package/dist/source/components/inputs/datePicker/datePickerDay.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerDay.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\n\nexport interface DatePickerDayProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  active?: boolean | undefined;\n  current?: boolean | undefined;\n  hidden?: boolean | undefined;\n  outside?: boolean | undefined;\n  disabled?: boolean | undefined;\n  inRange?: boolean | undefined;\n  day: Date;\n  onChange?: ((event?: Event, date?: Date) => void) | undefined;\n}\n\nexport function DatePickerDay(props: ParentProps<DatePickerDayProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"children\",\n    \"onChange\",\n    \"active\",\n    \"current\",\n    \"hidden\",\n    \"outside\",\n    \"disabled\",\n    \"inRange\",\n    \"day\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  const onClick = (): void => {\n    if (!local.disabled) local.onChange?.(undefined, local.day);\n  };\n\n  const classes = (): string =>\n    cn(\"smwb-date-picker__day\", local.class, {\n      \"smwb-date-picker__day--active\": !local.disabled && local.active,\n      \"smwb-date-picker__day--current\": local.current && !local.active,\n      \"smwb-date-picker__day--outside\": !local.disabled && local.outside,\n      \"smwb-date-picker__day--disabled\": local.disabled,\n      \"smwb-date-picker__day--in-range\": !local.disabled && local.inRange,\n    });\n\n  return (\n    <Show when={!local.hidden} fallback={<span class=\"smwb-date-picker__day-hidden\" />}>\n      <button\n        {...rest}\n        class={classes()}\n        type=\"button\"\n        onPointerDown={onPointerDown}\n        onClick={onClick}\n        disabled={local.disabled}\n      >\n        {local.children}\n        <Show when={!local.disabled}>\n          <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n        </Show>\n      </button>\n    </Show>\n  );\n}\n\nexport default DatePickerDay;\n"],"mappings":"AAAA,SAAqC,MAAM,kBAAkB;AAC7D,OAAO,QAAQ;AACf,SAAS,cAAqC;AAavC,SAAS,cAAc,OAAqD;AACjF,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,IACA;AAAA,EACF,CAAC;AAED,MAAI;AAEJ,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,QAAM,UAAU,MAAY;AAC1B,QAAI,CAAC,MAAM,SAAU,OAAM,WAAW,QAAW,MAAM,GAAG;AAAA,EAC5D;AAEA,QAAM,UAAU,MACd,GAAG,yBAAyB,MAAM,OAAO;AAAA,IACvC,iCAAiC,CAAC,MAAM,YAAY,MAAM;AAAA,IAC1D,kCAAkC,MAAM,WAAW,CAAC,MAAM;AAAA,IAC1D,kCAAkC,CAAC,MAAM,YAAY,MAAM;AAAA,IAC3D,mCAAmC,MAAM;AAAA,IACzC,mCAAmC,CAAC,MAAM,YAAY,MAAM;AAAA,EAC9D,CAAC;AAEH,SACE,CAAC,KAAK,MAAM,CAAC,MAAM,QAAQ,UAAU,CAAC,KAAK,MAAM,+BAA+B,IAAI;AAAA,MAClF,CAAC;AAAA,QACK;AAAA,IACJ,OAAO,QAAQ;AAAA,IACf,KAAK;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,IACT,UAAU,MAAM;AAAA,GACjB;AAAA,SACE,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,UAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,QACtE,EAFC,KAEM;AAAA,MACT,EAZC,OAYQ;AAAA,IACX,EAdC;AAgBL;AAEA,IAAO,wBAAQ;","names":[],"file":"datePickerDay.jsx"}

package/dist/source/components/inputs/datePicker/datePickerIconButton.jsx

@@ -0,0 +1,36 @@
+import { Show, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Ripple } from "../../base/ripple";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function DatePickerIconButton(props) {
+  const merged = mergeProps({ size: "medium" }, props);
+  const [local, rest] = splitProps(merged, ["class", "children", "disabled", "size", "edge", "ref"]);
+  let rippleActions;
+  const onPointerDown = (event) => {
+    if (!local.disabled) rippleActions?.onRipple(event);
+  };
+  return <button
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    onPointerDown={onPointerDown}
+    type="button"
+    class={cn("smwb-date-picker__icon-button", local.class, {
+      "smwb-date-picker__icon-button--small": local.size === "small",
+      "smwb-date-picker__icon-button--edge-start": local.edge === "start",
+      "smwb-date-picker__icon-button--edge-end": local.edge === "end",
+      "smwb-date-picker__icon-button--disabled": local.disabled
+    })}
+    disabled={local.disabled}
+  >
+      {local.children}
+      <Show when={!local.disabled}>
+        <Ripple actionRef={(actions) => rippleActions = actions} center />
+      </Show>
+    </button>;
+}
+var datePickerIconButton_default = DatePickerIconButton;
+export {
+  DatePickerIconButton,
+  datePickerIconButton_default as default
+};
+//# sourceMappingURL=datePickerIconButton.jsx.map

package/dist/source/components/inputs/datePicker/datePickerIconButton.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerIconButton.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type DataPickerIconButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {\n  size?: \"medium\" | \"small\";\n  edge?: \"start\" | \"end\";\n  ref?: Ref<HTMLButtonElement>;\n};\n\nexport function DatePickerIconButton(props: ParentProps<DataPickerIconButtonProps>): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"children\", \"disabled\", \"size\", \"edge\", \"ref\"]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  return (\n    <button\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      onPointerDown={onPointerDown}\n      type=\"button\"\n      class={cn(\"smwb-date-picker__icon-button\", local.class, {\n        \"smwb-date-picker__icon-button--small\": local.size === \"small\",\n        \"smwb-date-picker__icon-button--edge-start\": local.edge === \"start\",\n        \"smwb-date-picker__icon-button--edge-end\": local.edge === \"end\",\n        \"smwb-date-picker__icon-button--disabled\": local.disabled,\n      })}\n      disabled={local.disabled}\n    >\n      {local.children}\n      <Show when={!local.disabled}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n      </Show>\n    </button>\n  );\n}\n\nexport default DatePickerIconButton;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AAQ7B,SAAS,qBAAqB,OAA4D;AAC/F,QAAM,SAAS,WAAW,EAAE,MAAM,SAAkB,GAAG,KAAK;AAC5D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,YAAY,YAAY,QAAQ,QAAQ,KAAK,CAAC;AACjG,MAAI;AAEJ,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,eAAe;AAAA,IACf,KAAK;AAAA,IACL,OAAO,GAAG,iCAAiC,MAAM,OAAO;AAAA,MACtD,wCAAwC,MAAM,SAAS;AAAA,MACvD,6CAA6C,MAAM,SAAS;AAAA,MAC5D,2CAA2C,MAAM,SAAS;AAAA,MAC1D,2CAA2C,MAAM;AAAA,IACnD,CAAC;AAAA,IACD,UAAU,MAAM;AAAA,GACjB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,QAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,MACtE,EAFC,KAEM;AAAA,IACT,EAjBC;AAmBL;AAEA,IAAO,+BAAQ;","names":[],"file":"datePickerIconButton.jsx"}