@smwb/ui-solid 0.2.2 → 0.4.0

package/dist/headless/source/components/inputs/checkbox/checkbox.jsx

@@ -0,0 +1,86 @@
+import { Show, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { TextFieldWrapper } from "../textField/textFieldWrapper";
+import { createId } from "../../../primitives/createId";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function Checkbox(props) {
+  const merged = mergeProps({ size: "medium", color: "primary" }, props);
+  const [local, args] = splitProps(merged, [
+    "label",
+    "disabled",
+    "readOnly",
+    "required",
+    "name",
+    "id",
+    "indeterminate",
+    "class",
+    "size",
+    "color",
+    "onChange",
+    "helperText",
+    "error",
+    "ref"
+  ]);
+  const id = createId(local.id);
+  const handleChange = (event) => {
+    if (local.readOnly) {
+      event.preventDefault();
+      return;
+    }
+    local.onChange?.(event, event.currentTarget.checked, props);
+  };
+  return <TextFieldWrapper
+    helperText={local.helperText}
+    disabled={local.disabled}
+    error={local.error}
+    class="smwb-text-field-checkbox"
+  >
+      <label
+    for={id}
+    class={cn(
+      "smwb-checkbox__wrapper",
+      `smwb-checkbox_size-${local.size}`,
+      `smwb-checkbox_color-${local.color}`,
+      local.class,
+      {
+        "smwb-disabled": local.disabled,
+        "smwb-readonly": local.readOnly,
+        "smwb-indeterminate": local.indeterminate
+      }
+    )}
+  >
+        <input
+    type="checkbox"
+    id={id}
+    name={local.name}
+    class="smwb-checkbox__input"
+    disabled={local.disabled}
+    readonly={local.readOnly}
+    required={local.required}
+    aria-invalid={local.error || void 0}
+    aria-required={local.required || void 0}
+    ref={mergeRefs(local.ref)}
+    {...args}
+    onChange={handleChange}
+  />
+        <span class={cn("smwb-checkbox__btn", { "smwb-indeterminate": local.indeterminate })}>
+          <Show
+    when={local.indeterminate}
+    fallback={<Icon name="check" size={17} class="smwb-checkbox__icon" weight={700} />}
+  >
+            <Icon name="remove" size={18} class="smwb-checkbox__icon" weight={700} />
+          </Show>
+        </span>
+        <Show when={local.label}>
+          <span class="smwb-checkbox__label">{local.label}</span>
+        </Show>
+      </label>
+    </TextFieldWrapper>;
+}
+var checkbox_default = Checkbox;
+export {
+  Checkbox,
+  checkbox_default as default
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/headless/source/components/inputs/checkbox/checkbox.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SelectionControlSize = \"small\" | \"medium\" | \"large\";\nexport type SelectionControlColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport type SelectionChangeEvent = Event & { currentTarget: HTMLInputElement; target: Element };\n\nexport interface CheckboxProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  indeterminate?: boolean;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: CheckboxProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Checkbox(props: CheckboxProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"label\",\n    \"disabled\",\n    \"readOnly\",\n    \"required\",\n    \"name\",\n    \"id\",\n    \"indeterminate\",\n    \"class\",\n    \"size\",\n    \"color\",\n    \"onChange\",\n    \"helperText\",\n    \"error\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    if (local.readOnly) {\n      event.preventDefault();\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={local.helperText}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <label\n        for={id}\n        class={cn(\n          \"smwb-checkbox__wrapper\",\n          `smwb-checkbox_size-${local.size}`,\n          `smwb-checkbox_color-${local.color}`,\n          local.class,\n          {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n            \"smwb-indeterminate\": local.indeterminate,\n          }\n        )}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          name={local.name}\n          class=\"smwb-checkbox__input\"\n          disabled={local.disabled}\n          readonly={local.readOnly}\n          required={local.required}\n          aria-invalid={local.error || undefined}\n          aria-required={local.required || undefined}\n          ref={mergeRefs(local.ref)}\n          {...args}\n          onChange={handleChange}\n        />\n        <span class={cn(\"smwb-checkbox__btn\", { \"smwb-indeterminate\": local.indeterminate })}>\n          <Show\n            when={local.indeterminate}\n            fallback={<Icon name=\"check\" size={17} class=\"smwb-checkbox__icon\" weight={700} />}\n          >\n            <Icon name=\"remove\" size={18} class=\"smwb-checkbox__icon\" weight={700} />\n          </Show>\n        </span>\n        <Show when={local.label}>\n          <span class=\"smwb-checkbox__label\">{local.label}</span>\n        </Show>\n      </label>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Checkbox;\n"],"mappings":"AAAA,SAAmB,MAAM,YAAY,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AAwB7B,SAAS,SAAS,OAAmC;AAC1D,QAAM,SAAS,WAAW,EAAE,MAAM,UAAkC,OAAO,UAAmC,GAAG,KAAK;AACtH,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,KAAK,SAAS,MAAM,EAAE;AAE5B,QAAM,eAA0D,CAAC,UAAU;AACzE,QAAI,MAAM,UAAU;AAClB,YAAM,eAAe;AACrB;AAAA,IACF;AACA,UAAM,WAAW,OAAO,MAAM,cAAc,SAAS,KAAK;AAAA,EAC5D;AAEA,SACE,CAAC;AAAA,IACC,YAAY,MAAM;AAAA,IAClB,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,MAAM;AAAA,GACP;AAAA,MACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,sBAAsB,MAAM,IAAI;AAAA,MAChC,uBAAuB,MAAM,KAAK;AAAA,MAClC,MAAM;AAAA,MACN;AAAA,QACE,iBAAiB,MAAM;AAAA,QACvB,iBAAiB,MAAM;AAAA,QACvB,sBAAsB,MAAM;AAAA,MAC9B;AAAA,IACF;AAAA,GACD;AAAA,QACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM,MAAM;AAAA,IACZ,MAAM;AAAA,IACN,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,cAAc,MAAM,SAAS;AAAA,IAC7B,eAAe,MAAM,YAAY;AAAA,IACjC,KAAK,UAAU,MAAM,GAAG;AAAA,QACpB;AAAA,IACJ,UAAU;AAAA,EACZ,EAAE;AAAA,QACF,CAAC,KAAK,OAAO,GAAG,sBAAsB,EAAE,sBAAsB,MAAM,cAAc,CAAC,GAAG;AAAA,UACpF,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UAAU,CAAC,KAAK,KAAK,QAAQ,MAAM,IAAI,MAAM,sBAAsB,QAAQ,KAAK;AAAA,GACjF;AAAA,YACC,CAAC,KAAK,KAAK,SAAS,MAAM,IAAI,MAAM,sBAAsB,QAAQ,KAAK,EAAE;AAAA,UAC3E,EALC,KAKM;AAAA,QACT,EAPC,KAOM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,KAAK,MAAM,wBAAwB,MAAM,MAAM,EAA/C,KAAsD;AAAA,QACzD,EAFC,KAEM;AAAA,MACT,EAvCC,MAuCO;AAAA,IACV,EA9CC;AAgDL;AAEA,IAAO,mBAAQ;","names":[],"file":"checkbox.jsx"}

package/dist/headless/source/components/inputs/checkbox/index.js

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

package/dist/headless/source/components/inputs/checkbox/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/inputs/checkbox/index.ts"],
+  "sourcesContent": ["export { Checkbox, default } from \"./checkbox\";\nexport type {\n  CheckboxProps,\n  SelectionControlSize,\n  SelectionControlColor,\n  SelectionChangeEvent,\n} from \"./checkbox\";\n"],
+  "mappings": "AAAA,SAAS,UAAU,WAAAA,gBAAe;",
+  "names": ["default"]
+}

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

@@ -0,0 +1,87 @@
+import { For, createMemo } from "solid-js";
+import {
+  endOfDay,
+  getDayNames,
+  getWeeks,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isSameMonth,
+  isValidDate,
+  startOfDay
+} from "./dateUtils";
+import { DatePickerDay } from "./datePickerDay";
+function DataPickerDays(props) {
+  const now = /* @__PURE__ */ new Date();
+  const weekStartsOn = () => props.weekStartsOn ?? 0;
+  const dayNames = createMemo(() => getDayNames(now, weekStartsOn(), props.locale));
+  const weeks = createMemo(() => getWeeks(props.viewValue, weekStartsOn()));
+  const isActive = (day) => {
+    if (props.range) {
+      return isValidDate(props.rangeStart) && isSameDay(day, props.rangeStart) || isValidDate(props.rangeEnd) && isSameDay(day, props.rangeEnd);
+    }
+    if (!isValidDate(props.value)) {
+      return false;
+    }
+    return isSameDay(day, props.value);
+  };
+  const isInRange = (day) => {
+    if (!props.range || !isValidDate(props.rangeStart) || !isValidDate(props.rangeEnd)) {
+      return false;
+    }
+    return isAfter(startOfDay(day), startOfDay(props.rangeStart)) && isBefore(endOfDay(day), endOfDay(props.rangeEnd));
+  };
+  const isDisabledDay = (day) => {
+    let disabled = false;
+    if (props.disablePast) {
+      disabled = isBefore(endOfDay(day), now);
+    }
+    if (props.disableFuture) {
+      disabled = disabled || isAfter(startOfDay(day), now);
+    }
+    if (props.minDate && isBefore(endOfDay(day), startOfDay(props.minDate))) {
+      disabled = true;
+    }
+    if (props.maxDate && isAfter(startOfDay(day), endOfDay(props.maxDate))) {
+      disabled = true;
+    }
+    if (props.isDateDisabled?.(day)) {
+      disabled = true;
+    }
+    return disabled;
+  };
+  return <div class="smwb-date-picker__days">
+      <div class="smwb-date-picker__week-days">
+        <For each={dayNames()}>{(day) => <span class="smwb-date-picker__week-day">{day}</span>}</For>
+      </div>
+      <div class="smwb-date-picker__month">
+        <For each={weeks()}>
+          {(week) => <div class="smwb-date-picker__week">
+              <For each={week}>
+                {(day) => {
+    const isOutside = () => !isSameMonth(day, props.viewValue);
+    return <DatePickerDay
+      day={day}
+      current={isSameDay(day, now)}
+      active={isActive(day)}
+      inRange={isInRange(day)}
+      hidden={!props.showDaysOutsideMonth && isOutside()}
+      outside={isOutside()}
+      onChange={props.onChange}
+      disabled={isDisabledDay(day)}
+    >
+                      {day.getDate()}
+                    </DatePickerDay>;
+  }}
+              </For>
+            </div>}
+        </For>
+      </div>
+    </div>;
+}
+var dataPickerDays_default = DataPickerDays;
+export {
+  DataPickerDays,
+  dataPickerDays_default as default
+};
+//# sourceMappingURL=dataPickerDays.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/inputs/datePicker/dataPickerDays.tsx"],"sourcesContent":["import { type JSX, For, createMemo } from \"solid-js\";\nimport {\n  type WeekStart,\n  endOfDay,\n  getDayNames,\n  getWeeks,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isValidDate,\n  startOfDay,\n} from \"./dateUtils\";\nimport { DatePickerDay } from \"./datePickerDay\";\n\nexport interface DataPickerDaysProps {\n  viewValue: Date;\n  value?: Date | undefined;\n  showDaysOutsideMonth?: boolean | undefined;\n  onChange?: ((event?: Event, date?: Date) => void) | undefined;\n  disablePast?: boolean | undefined;\n  disableFuture?: boolean | undefined;\n  weekStartsOn?: WeekStart | undefined;\n  minDate?: Date | undefined;\n  maxDate?: Date | undefined;\n  isDateDisabled?: ((day: Date) => boolean) | undefined;\n  locale?: string | undefined;\n  /** Range selection mode. */\n  range?: boolean | undefined;\n  rangeStart?: Date | undefined;\n  rangeEnd?: Date | undefined;\n}\n\nexport function DataPickerDays(props: DataPickerDaysProps): JSX.Element {\n  const now = new Date();\n  const weekStartsOn = (): WeekStart => props.weekStartsOn ?? 0;\n\n  const dayNames = createMemo(() => getDayNames(now, weekStartsOn(), props.locale));\n  const weeks = createMemo(() => getWeeks(props.viewValue, weekStartsOn()));\n\n  const isActive = (day: Date): boolean => {\n    if (props.range) {\n      return (\n        (isValidDate(props.rangeStart) && isSameDay(day, props.rangeStart)) ||\n        (isValidDate(props.rangeEnd) && isSameDay(day, props.rangeEnd))\n      );\n    }\n\n    if (!isValidDate(props.value)) {\n      return false;\n    }\n\n    return isSameDay(day, props.value);\n  };\n\n  const isInRange = (day: Date): boolean => {\n    if (!props.range || !isValidDate(props.rangeStart) || !isValidDate(props.rangeEnd)) {\n      return false;\n    }\n    return isAfter(startOfDay(day), startOfDay(props.rangeStart)) && isBefore(endOfDay(day), endOfDay(props.rangeEnd));\n  };\n\n  const isDisabledDay = (day: Date): boolean => {\n    let disabled = false;\n\n    if (props.disablePast) {\n      disabled = isBefore(endOfDay(day), now);\n    }\n\n    if (props.disableFuture) {\n      disabled = disabled || isAfter(startOfDay(day), now);\n    }\n\n    if (props.minDate && isBefore(endOfDay(day), startOfDay(props.minDate))) {\n      disabled = true;\n    }\n\n    if (props.maxDate && isAfter(startOfDay(day), endOfDay(props.maxDate))) {\n      disabled = true;\n    }\n\n    if (props.isDateDisabled?.(day)) {\n      disabled = true;\n    }\n\n    return disabled;\n  };\n\n  return (\n    <div class=\"smwb-date-picker__days\">\n      <div class=\"smwb-date-picker__week-days\">\n        <For each={dayNames()}>{(day) => <span class=\"smwb-date-picker__week-day\">{day}</span>}</For>\n      </div>\n      <div class=\"smwb-date-picker__month\">\n        <For each={weeks()}>\n          {(week) => (\n            <div class=\"smwb-date-picker__week\">\n              <For each={week}>\n                {(day) => {\n                  const isOutside = (): boolean => !isSameMonth(day, props.viewValue);\n                  return (\n                    <DatePickerDay\n                      day={day}\n                      current={isSameDay(day, now)}\n                      active={isActive(day)}\n                      inRange={isInRange(day)}\n                      hidden={!props.showDaysOutsideMonth && isOutside()}\n                      outside={isOutside()}\n                      onChange={props.onChange}\n                      disabled={isDisabledDay(day)}\n                    >\n                      {day.getDate()}\n                    </DatePickerDay>\n                  );\n                }}\n              </For>\n            </div>\n          )}\n        </For>\n      </div>\n    </div>\n  );\n}\n\nexport default DataPickerDays;\n"],"mappings":"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","names":[],"file":"dataPickerDays.jsx"}

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

@@ -0,0 +1,40 @@
+import { OpenView } from "./openView";
+import { DatePickerActionLabel } from "./datePickerActionLabel";
+import { addMonths, addYears, getMonthLabel, getYearLabel } from "./dateUtils";
+function DataPickerHeader(props) {
+  const onMonthIconClick = (value) => () => {
+    props.onChange?.(addMonths(props.viewValue, value));
+  };
+  const onYearIconClick = (value) => () => {
+    props.onChange?.(addYears(props.viewValue, value));
+  };
+  const hiddenSwitches = () => props.openView === OpenView.months || props.openView === OpenView.years;
+  return <div class="smwb-date-picker__header">
+      <DatePickerActionLabel
+    label={getMonthLabel(props.viewValue, props.locale)}
+    onLeftIconClick={onMonthIconClick(-1)}
+    onRightIconClick={onMonthIconClick(1)}
+    onLabelClick={props.onMonthLabelClick}
+    disabled={props.openView === OpenView.years}
+    active={props.openView === OpenView.months}
+    hiddenSwitches={hiddenSwitches()}
+    dataToggleId="date-picker-months-toggle"
+  />
+      <DatePickerActionLabel
+    label={getYearLabel(props.viewValue, props.locale)}
+    onLeftIconClick={onYearIconClick(-1)}
+    onRightIconClick={onYearIconClick(1)}
+    onLabelClick={props.onYearLabelClick}
+    disabled={props.openView === OpenView.months}
+    active={props.openView === OpenView.years}
+    hiddenSwitches={hiddenSwitches()}
+    dataToggleId="date-picker-years-toggle"
+  />
+    </div>;
+}
+var dataPickerHeader_default = DataPickerHeader;
+export {
+  DataPickerHeader,
+  dataPickerHeader_default as default
+};
+//# sourceMappingURL=dataPickerHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/inputs/datePicker/dataPickerHeader.tsx"],"sourcesContent":["import { type JSX } from \"solid-js\";\nimport { OpenView } from \"./openView\";\nimport { DatePickerActionLabel } from \"./datePickerActionLabel\";\nimport { addMonths, addYears, getMonthLabel, getYearLabel } from \"./dateUtils\";\n\nexport interface DataPickerHeaderProps {\n  viewValue: Date;\n  openView?: OpenView | undefined;\n  onChange?: ((value: Date) => void) | undefined;\n  onMonthLabelClick?: (() => void) | undefined;\n  onYearLabelClick?: (() => void) | undefined;\n  locale?: string | undefined;\n}\n\nexport function DataPickerHeader(props: DataPickerHeaderProps): JSX.Element {\n  const onMonthIconClick = (value: number) => (): void => {\n    props.onChange?.(addMonths(props.viewValue, value));\n  };\n\n  const onYearIconClick = (value: number) => (): void => {\n    props.onChange?.(addYears(props.viewValue, value));\n  };\n\n  const hiddenSwitches = (): boolean => props.openView === OpenView.months || props.openView === OpenView.years;\n\n  return (\n    <div class=\"smwb-date-picker__header\">\n      <DatePickerActionLabel\n        label={getMonthLabel(props.viewValue, props.locale)}\n        onLeftIconClick={onMonthIconClick(-1)}\n        onRightIconClick={onMonthIconClick(1)}\n        onLabelClick={props.onMonthLabelClick}\n        disabled={props.openView === OpenView.years}\n        active={props.openView === OpenView.months}\n        hiddenSwitches={hiddenSwitches()}\n        dataToggleId=\"date-picker-months-toggle\"\n      />\n      <DatePickerActionLabel\n        label={getYearLabel(props.viewValue, props.locale)}\n        onLeftIconClick={onYearIconClick(-1)}\n        onRightIconClick={onYearIconClick(1)}\n        onLabelClick={props.onYearLabelClick}\n        disabled={props.openView === OpenView.months}\n        active={props.openView === OpenView.years}\n        hiddenSwitches={hiddenSwitches()}\n        dataToggleId=\"date-picker-years-toggle\"\n      />\n    </div>\n  );\n}\n\nexport default DataPickerHeader;\n"],"mappings":"AACA,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AACtC,SAAS,WAAW,UAAU,eAAe,oBAAoB;AAW1D,SAAS,iBAAiB,OAA2C;AAC1E,QAAM,mBAAmB,CAAC,UAAkB,MAAY;AACtD,UAAM,WAAW,UAAU,MAAM,WAAW,KAAK,CAAC;AAAA,EACpD;AAEA,QAAM,kBAAkB,CAAC,UAAkB,MAAY;AACrD,UAAM,WAAW,SAAS,MAAM,WAAW,KAAK,CAAC;AAAA,EACnD;AAEA,QAAM,iBAAiB,MAAe,MAAM,aAAa,SAAS,UAAU,MAAM,aAAa,SAAS;AAExG,SACE,CAAC,IAAI,MAAM,2BAA2B;AAAA,MACpC,CAAC;AAAA,IACC,OAAO,cAAc,MAAM,WAAW,MAAM,MAAM;AAAA,IAClD,iBAAiB,iBAAiB,EAAE;AAAA,IACpC,kBAAkB,iBAAiB,CAAC;AAAA,IACpC,cAAc,MAAM;AAAA,IACpB,UAAU,MAAM,aAAa,SAAS;AAAA,IACtC,QAAQ,MAAM,aAAa,SAAS;AAAA,IACpC,gBAAgB,eAAe;AAAA,IAC/B,aAAa;AAAA,EACf,EAAE;AAAA,MACF,CAAC;AAAA,IACC,OAAO,aAAa,MAAM,WAAW,MAAM,MAAM;AAAA,IACjD,iBAAiB,gBAAgB,EAAE;AAAA,IACnC,kBAAkB,gBAAgB,CAAC;AAAA,IACnC,cAAc,MAAM;AAAA,IACpB,UAAU,MAAM,aAAa,SAAS;AAAA,IACtC,QAAQ,MAAM,aAAa,SAAS;AAAA,IACpC,gBAAgB,eAAe;AAAA,IAC/B,aAAa;AAAA,EACf,EAAE;AAAA,IACJ,EArBC;AAuBL;AAEA,IAAO,2BAAQ;","names":[],"file":"dataPickerHeader.jsx"}

package/dist/headless/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.js.map

package/dist/headless/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/headless/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/headless/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": []
+}