@smwb/ui-solid 0.2.2 → 0.4.0

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

@@ -0,0 +1,200 @@
+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 { DataPickerHeader } from "../datePicker/dataPickerHeader";
+import { DataPickerDays } from "../datePicker/dataPickerDays";
+import { DatePickerList } from "../datePicker/datePickerList";
+import { getMonths, getYears, isValidDate, setMonth, setYear } from "../datePicker/dateUtils";
+import { OpenView } from "../datePicker/openView";
+import { TimePickerColumns } from "../timePicker/timePickerColumns";
+import { DEFAULT_TIME_FORMAT, isValidTimeDate, mergeDate, mergeTime } from "../timePicker/timeUtils";
+import { DateTimePickerInput } from "./dateTimePickerInput";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const FADE_MS = 150;
+function DateTimePicker(props) {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onChange",
+    "showDaysOutsideMonth",
+    "disablePast",
+    "disableFuture",
+    "weekStartsOn",
+    "placement",
+    "disabled",
+    "disableCalendar",
+    "calendarAriaLabel",
+    "minDate",
+    "maxDate",
+    "isDateDisabled",
+    "locale",
+    "format",
+    "timeFormat",
+    "calendarIcon",
+    "onBlur",
+    "ref"
+  ]);
+  const value = () => local.value === void 0 ? void 0 : new Date(local.value);
+  const initialValue = value();
+  const [viewValue, setViewValue] = createSignal(
+    isValidDate(initialValue) || isValidTimeDate(initialValue) ? initialValue : /* @__PURE__ */ new Date()
+  );
+  const [openView, setOpenView] = createSignal(OpenView.days);
+  const [isOpen, setIsOpen] = createSignal(false);
+  let anchorEl;
+  let popupEl;
+  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) || isValidTimeDate(v) ? v : /* @__PURE__ */ new Date());
+  });
+  const weekStartsOn = () => local.weekStartsOn ?? 1;
+  const onViewValueChange = (next) => {
+    setViewValue(next);
+  };
+  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 emitChange = (next) => {
+    setViewValue(next);
+    local.onChange?.(void 0, next, props);
+  };
+  const onDateChange = (_event, date) => {
+    if (!date) return;
+    const v = value();
+    const timeSource = isValidTimeDate(v) ? v : viewValue();
+    emitChange(mergeDate(date, timeSource));
+  };
+  const onTimeChange = (timeDate) => {
+    const v = value();
+    const dateSource = isValidDate(v) ? v : viewValue();
+    emitChange(mergeTime(dateSource, timeDate));
+  };
+  const onToggle = () => {
+    if (!local.disabled) setIsOpen((prev) => !prev);
+  };
+  const onClickAway = (event) => {
+    const target = event.target;
+    if (popupEl?.contains(target) || anchorEl?.contains(target)) return;
+    setIsOpen(false);
+  };
+  const resolvedTimeFormat = () => {
+    if (local.timeFormat) return local.timeFormat;
+    if (local.format?.includes("HH:mm:ss")) return "HH:mm:ss";
+    return DEFAULT_TIME_FORMAT;
+  };
+  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={onDateChange}
+          disablePast={local.disablePast}
+          disableFuture={local.disableFuture}
+          weekStartsOn={weekStartsOn()}
+          minDate={local.minDate}
+          maxDate={local.maxDate}
+          isDateDisabled={local.isDateDisabled}
+          locale={local.locale}
+        />;
+    }
+  };
+  return <>
+      <DateTimePickerInput
+    ref={mergeRefs(local.ref, floating.setReference, (el) => anchorEl = el)}
+    value={local.value}
+    onChange={local.onChange}
+    onBlur={local.onBlur}
+    onToggle={onToggle}
+    disabled={local.disabled}
+    disableCalendar={local.disableCalendar}
+    format={local.format}
+    calendarIcon={local.calendarIcon}
+    {...rest}
+  />
+      <Show when={mounted()}>
+        <Portal mount={isServer ? void 0 : document.body}>
+          <ClickAwayListener onClickAway={onClickAway}>
+            <div
+    ref={mergeRefs(floating.setFloating, (el) => popupEl = el)}
+    class="smwb-date-picker smwb-date-time-picker"
+    style={{
+      ...floating.floatingStyles(),
+      transition: `opacity ${FADE_MS}ms ease-in-out`,
+      opacity: shown() ? 1 : 0
+    }}
+    data-testid="date-time-picker"
+    role="dialog"
+    aria-modal="false"
+    aria-label={local.calendarAriaLabel ?? "Choose date and time"}
+  >
+              <div class="smwb-date-picker__inner smwb-date-time-picker__inner">
+                <DataPickerHeader
+    viewValue={viewValue()}
+    locale={local.locale}
+    openView={openView()}
+    onChange={onViewValueChange}
+    onMonthLabelClick={onMonthLabelClick}
+    onYearLabelClick={onYearLabelClick}
+  />
+                <div class="smwb-date-time-picker__content">
+                  <div class="smwb-date-picker__body smwb-date-time-picker__body">{view()}</div>
+                  <TimePickerColumns value={viewValue()} format={resolvedTimeFormat()} onChange={onTimeChange} />
+                </div>
+              </div>
+            </div>
+          </ClickAwayListener>
+        </Portal>
+      </Show>
+    </>;
+}
+var dateTimePicker_default = DateTimePicker;
+export {
+  DateTimePicker,
+  dateTimePicker_default as default
+};
+//# sourceMappingURL=dateTimePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/inputs/dateTimePicker/dateTimePicker.tsx"],"sourcesContent":["import { 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 type { TextFieldProps } from \"../textField\";\nimport { DataPickerHeader } from \"../datePicker/dataPickerHeader\";\nimport { DataPickerDays } from \"../datePicker/dataPickerDays\";\nimport { DatePickerList } from \"../datePicker/datePickerList\";\nimport { type WeekStart, getMonths, getYears, isValidDate, setMonth, setYear } from \"../datePicker/dateUtils\";\nimport { OpenView } from \"../datePicker/openView\";\nimport { TimePickerColumns } from \"../timePicker/timePickerColumns\";\nimport { DEFAULT_TIME_FORMAT, isValidTimeDate, mergeDate, mergeTime } from \"../timePicker/timeUtils\";\nimport { DateTimePickerInput } from \"./dateTimePickerInput\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface DateTimePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  showDaysOutsideMonth?: boolean | undefined;\n  disablePast?: boolean | undefined;\n  disableFuture?: boolean | undefined;\n  minDate?: Date | undefined;\n  maxDate?: Date | undefined;\n  isDateDisabled?: ((day: Date) => boolean) | undefined;\n  weekStartsOn?: WeekStart | undefined;\n  locale?: string | undefined;\n  /** Input format with tokens dd, MM, yyyy, HH, mm, ss, e.g. \"dd/MM/yyyy HH:mm\". */\n  format?: string | undefined;\n  /** Time portion format when using the clock columns. Defaults to \"HH:mm\". */\n  timeFormat?: string | undefined;\n  placement?: Placement | undefined;\n  disableCalendar?: boolean | undefined;\n  label?: string | undefined;\n  calendarAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  calendarIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: DateTimePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: DateTimePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function DateTimePicker(props: DateTimePickerProps): 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    \"timeFormat\",\n    \"calendarIcon\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n\n  const initialValue = value();\n  const [viewValue, setViewValue] = createSignal<Date>(\n    isValidDate(initialValue) || isValidTimeDate(initialValue) ? initialValue : new Date()\n  );\n  const [openView, setOpenView] = createSignal<OpenView>(OpenView.days);\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let popupEl: 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) || isValidTimeDate(v) ? v : new Date());\n  });\n\n  const weekStartsOn = (): WeekStart => local.weekStartsOn ?? 1;\n\n  const onViewValueChange = (next: Date): void => {\n    setViewValue(next);\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 emitChange = (next: Date): void => {\n    setViewValue(next);\n    local.onChange?.(undefined, next, props);\n  };\n\n  const onDateChange = (_event?: Event, date?: Date): void => {\n    if (!date) return;\n    const v = value();\n    const timeSource = isValidTimeDate(v) ? v : viewValue();\n    emitChange(mergeDate(date, timeSource));\n  };\n\n  const onTimeChange = (timeDate: Date): void => {\n    const v = value();\n    const dateSource = isValidDate(v) ? v : viewValue();\n    emitChange(mergeTime(dateSource, timeDate));\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 (popupEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const resolvedTimeFormat = (): string => {\n    if (local.timeFormat) return local.timeFormat;\n    if (local.format?.includes(\"HH:mm:ss\")) return \"HH:mm:ss\";\n    return DEFAULT_TIME_FORMAT;\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={onDateChange}\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          />\n        );\n    }\n  };\n\n  return (\n    <>\n      <DateTimePickerInput\n        ref={mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement))}\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      <Show when={mounted()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>\n          <ClickAwayListener onClickAway={onClickAway}>\n            <div\n              ref={mergeRefs(floating.setFloating, (el) => (popupEl = el as HTMLElement))}\n              class=\"smwb-date-picker smwb-date-time-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-time-picker\"\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.calendarAriaLabel ?? \"Choose date and time\"}\n            >\n              <div class=\"smwb-date-picker__inner smwb-date-time-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-time-picker__content\">\n                  <div class=\"smwb-date-picker__body smwb-date-time-picker__body\">{view()}</div>\n                  <TimePickerColumns value={viewValue()} format={resolvedTimeFormat()} onChange={onTimeChange} />\n                </div>\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default DateTimePicker;\n"],"mappings":"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","names":[],"file":"dateTimePicker.jsx"}

package/dist/headless/source/components/inputs/dateTimePicker/dateTimePickerInput.jsx

@@ -0,0 +1,57 @@
+import { Show, splitProps } from "solid-js";
+import { TextField } from "../textField";
+import { DatePickerIconButton } from "../datePicker/datePickerIconButton";
+import { createDateTimeInput } from "./useDateTimeInput";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function stopPropagation(event) {
+  event.stopPropagation();
+}
+function DateTimePickerInput(props) {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onChange",
+    "onBlur",
+    "onToggle",
+    "disabled",
+    "disableCalendar",
+    "calendarIcon",
+    "format",
+    "ref"
+  ]);
+  const masked = createDateTimeInput({
+    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-time-picker-icon-button"
+    >
+            <Show when={local.calendarIcon} fallback={<Icon name="event" fill={1} weight={500} size={24} />}>
+              {local.calendarIcon}
+            </Show>
+          </DatePickerIconButton>
+        </Show>}
+    disabled={Boolean(local.disabled)}
+    {...rest}
+  />;
+}
+var dateTimePickerInput_default = DateTimePickerInput;
+export {
+  DateTimePickerInput,
+  dateTimePickerInput_default as default
+};
+//# sourceMappingURL=dateTimePickerInput.js.map

package/dist/headless/source/components/inputs/dateTimePicker/dateTimePickerInput.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/inputs/dateTimePicker/dateTimePickerInput.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport { TextField } from \"../textField\";\nimport { DatePickerIconButton } from \"../datePicker/datePickerIconButton\";\nimport { createDateTimeInput } from \"./useDateTimeInput\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { DateTimePickerProps } from \"./dateTimePicker\";\n\nexport interface DateTimePickerInputProps extends Omit<DateTimePickerProps, \"placement\" | \"onToggle\"> {\n  onToggle: () => void;\n  ref?: Ref<HTMLInputElement>;\n}\n\nfunction stopPropagation(event: Event): void {\n  event.stopPropagation();\n}\n\nexport function DateTimePickerInput(props: DateTimePickerInputProps): 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 = createDateTimeInput({\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-time-picker-icon-button\"\n          >\n            <Show when={local.calendarIcon} fallback={<Icon name=\"event\" 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 DateTimePickerInput;\n"],"mappings":"AAAA,SAAmB,MAAM,kBAAkB;AAC3C,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAQpC,SAAS,gBAAgB,OAAoB;AAC3C,QAAM,gBAAgB;AACxB;AAEO,SAAS,oBAAoB,OAA8C;AAChF,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,oBAAoB;AAAA,IACjC,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,QAAQ,MAAM,GAAG,QAAQ,KAAK,MAAM,IAAI,IAAI;AAAA,eAC9F,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,8BAAQ;","names":[],"file":"dateTimePickerInput.jsx"}

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

@@ -0,0 +1,20 @@
+import { DateTimePicker, default as default2 } from "./dateTimePicker";
+import { DateTimePickerInput } from "./dateTimePickerInput";
+import { createDateTimeInput, getCurrentDateTimeFormat, getDisplayDateTime } from "./useDateTimeInput";
+import {
+  formatDateTimeByPattern,
+  isDateTimePatternMatch,
+  parseDateTimeByPattern
+} from "./dateTimeFormat";
+export {
+  DateTimePicker,
+  DateTimePickerInput,
+  createDateTimeInput,
+  default2 as default,
+  formatDateTimeByPattern,
+  getCurrentDateTimeFormat,
+  getDisplayDateTime,
+  isDateTimePatternMatch,
+  parseDateTimeByPattern
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/inputs/dateTimePicker/index.ts"],
+  "sourcesContent": ["export { DateTimePicker, default } from \"./dateTimePicker\";\nexport type { DateTimePickerProps } from \"./dateTimePicker\";\nexport { DateTimePickerInput } from \"./dateTimePickerInput\";\nexport type { DateTimePickerInputProps } from \"./dateTimePickerInput\";\nexport { createDateTimeInput, getCurrentDateTimeFormat, getDisplayDateTime } from \"./useDateTimeInput\";\nexport type { CreateDateTimeInputProps, DateTimeInputState } from \"./useDateTimeInput\";\nexport {\n  formatDateTimeByPattern,\n  isDateTimePatternMatch,\n  parseDateTimeByPattern,\n} from \"./dateTimeFormat\";\n"],
+  "mappings": "AAAA,SAAS,gBAAgB,WAAAA,gBAAe;AAExC,SAAS,2BAA2B;AAEpC,SAAS,qBAAqB,0BAA0B,0BAA0B;AAElF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "names": ["default"]
+}

package/dist/headless/source/components/inputs/dateTimePicker/useDateTimeInput.js

@@ -0,0 +1,85 @@
+import { createEffect, createSignal } from "solid-js";
+import { getCurrentFormatDate, maskedDateFormatter } from "../datePicker/dateUtils";
+import { formatDateTimeByPattern, isDateTimePatternMatch, parseDateTimeByPattern } from "./dateTimeFormat";
+import { createMaskedInput } from "../../../primitives/createMaskedInput";
+const MASK_TOKEN_REGEXP = /[a-zA-Z]/g;
+function getDisplayDateTime(date, format) {
+  if (!date || Object.prototype.toString.call(date) !== "[object Date]" || isNaN(date)) {
+    return "";
+  }
+  if (format) {
+    return formatDateTimeByPattern(date, format);
+  }
+  return new Intl.DateTimeFormat(void 0, {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  }).format(date);
+}
+function getCurrentDateTimeFormat(format) {
+  if (format) {
+    return format;
+  }
+  return `${getCurrentFormatDate()} HH:mm`;
+}
+function getDateTimeMaskFormat(format) {
+  return getCurrentDateTimeFormat(format).replace(MASK_TOKEN_REGEXP, "_");
+}
+function getDateTimeByFormat(value, format) {
+  const parsed = parseDateTimeByPattern(value, format);
+  if (!parsed) {
+    return new Date(Number.NaN);
+  }
+  return parsed;
+}
+function createDateTimeInput(props) {
+  const currentFormat = () => getCurrentDateTimeFormat(props.format);
+  const [displayedValue, setDisplayedValue] = createSignal(getDisplayDateTime(props.value, props.format));
+  const formatter = () => maskedDateFormatter(getDateTimeMaskFormat(props.format));
+  let prevValue;
+  createEffect(() => {
+    const v = props.value;
+    if (v !== prevValue) {
+      prevValue = v;
+      setDisplayedValue(getDisplayDateTime(v, props.format));
+    }
+  });
+  const onChange = (value) => {
+    setDisplayedValue(value);
+    if (!props.onChange) return;
+    if (isDateTimePatternMatch(value, currentFormat())) {
+      props.onChange(void 0, getDateTimeByFormat(value, currentFormat()));
+    } else if (value === "") {
+      props.onChange(void 0);
+    }
+  };
+  const masked = createMaskedInput({ value: displayedValue, onChange, format: (v) => formatter()(v) });
+  const onBlur = () => {
+    if (!props.onBlur) return;
+    const prev = prevValue;
+    if (prev instanceof Date && isDateTimePatternMatch(getDisplayDateTime(prev, props.format), currentFormat())) {
+      props.onBlur(void 0, prev);
+    } else if (typeof prev === "string" && isDateTimePatternMatch(prev, currentFormat())) {
+      props.onBlur(void 0, getDateTimeByFormat(prev, currentFormat()));
+    } else if (prev === void 0 || prev === "") {
+      props.onBlur(void 0);
+    }
+    setDisplayedValue(getDisplayDateTime(props.value, props.format));
+  };
+  return {
+    value: displayedValue,
+    onInput: masked.onInput,
+    onBlur,
+    ref: masked.ref,
+    placeholder: () => currentFormat().toLowerCase()
+  };
+}
+export {
+  createDateTimeInput,
+  getCurrentDateTimeFormat,
+  getDisplayDateTime
+};
+//# sourceMappingURL=useDateTimeInput.js.map

package/dist/headless/source/components/inputs/dateTimePicker/useDateTimeInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/inputs/dateTimePicker/useDateTimeInput.ts"],
+  "sourcesContent": ["import { type Accessor, createEffect, createSignal } from \"solid-js\";\nimport { getCurrentFormatDate, maskedDateFormatter } from \"../datePicker/dateUtils\";\nimport { formatDateTimeByPattern, isDateTimePatternMatch, parseDateTimeByPattern } from \"./dateTimeFormat\";\nimport { createMaskedInput } from \"../../../primitives/createMaskedInput\";\n\nexport interface CreateDateTimeInputProps {\n  value?: Date | string | undefined;\n  onChange?: ((event?: Event, value?: Date) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date) => void) | undefined;\n  format?: string | undefined;\n}\n\nexport interface DateTimeInputState {\n  value: Accessor<string>;\n  onInput: (event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => void;\n  onBlur: () => void;\n  ref: (el: HTMLInputElement) => void;\n  placeholder: Accessor<string>;\n}\n\nconst MASK_TOKEN_REGEXP = /[a-zA-Z]/g;\n\nexport function getDisplayDateTime(date: unknown, format?: string): string {\n  if (!date || Object.prototype.toString.call(date) !== \"[object Date]\" || isNaN(date as number)) {\n    return \"\";\n  }\n\n  if (format) {\n    return formatDateTimeByPattern(date as Date, format);\n  }\n\n  return new Intl.DateTimeFormat(undefined, {\n    day: \"2-digit\",\n    month: \"2-digit\",\n    year: \"numeric\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n    hour12: false,\n  }).format(date as Date);\n}\n\nexport function getCurrentDateTimeFormat(format?: string): string {\n  if (format) {\n    return format;\n  }\n\n  return `${getCurrentFormatDate()} HH:mm`;\n}\n\nfunction getDateTimeMaskFormat(format?: string): string {\n  return getCurrentDateTimeFormat(format).replace(MASK_TOKEN_REGEXP, \"_\");\n}\n\nfunction getDateTimeByFormat(value: string, format: string): Date {\n  const parsed = parseDateTimeByPattern(value, format);\n\n  if (!parsed) {\n    return new Date(Number.NaN);\n  }\n\n  return parsed;\n}\n\n/** Solid port of useDateTimeInput \u2014 masked text input bound to a Date value. */\nexport function createDateTimeInput(props: CreateDateTimeInputProps): DateTimeInputState {\n  const currentFormat = (): string => getCurrentDateTimeFormat(props.format);\n  const [displayedValue, setDisplayedValue] = createSignal(getDisplayDateTime(props.value, props.format));\n  const formatter = (): ((value: string) => string) => maskedDateFormatter(getDateTimeMaskFormat(props.format));\n\n  let prevValue: Date | string | undefined;\n\n  createEffect(() => {\n    const v = props.value;\n    if (v !== prevValue) {\n      prevValue = v;\n      setDisplayedValue(getDisplayDateTime(v, props.format));\n    }\n  });\n\n  const onChange = (value: string): void => {\n    setDisplayedValue(value);\n    if (!props.onChange) return;\n    if (isDateTimePatternMatch(value, currentFormat())) {\n      props.onChange(undefined, getDateTimeByFormat(value, currentFormat()));\n    } else if (value === \"\") {\n      props.onChange(undefined);\n    }\n  };\n\n  const masked = createMaskedInput({ value: displayedValue, onChange, format: (v) => formatter()(v) });\n\n  const onBlur = (): void => {\n    if (!props.onBlur) return;\n    const prev = prevValue;\n    if (prev instanceof Date && isDateTimePatternMatch(getDisplayDateTime(prev, props.format), currentFormat())) {\n      props.onBlur(undefined, prev);\n    } else if (typeof prev === \"string\" && isDateTimePatternMatch(prev, currentFormat())) {\n      props.onBlur(undefined, getDateTimeByFormat(prev, currentFormat()));\n    } else if (prev === undefined || prev === \"\") {\n      props.onBlur(undefined);\n    }\n    setDisplayedValue(getDisplayDateTime(props.value, props.format));\n  };\n\n  return {\n    value: displayedValue,\n    onInput: masked.onInput,\n    onBlur,\n    ref: masked.ref,\n    placeholder: () => currentFormat().toLowerCase(),\n  };\n}\n"],
+  "mappings": "AAAA,SAAwB,cAAc,oBAAoB;AAC1D,SAAS,sBAAsB,2BAA2B;AAC1D,SAAS,yBAAyB,wBAAwB,8BAA8B;AACxF,SAAS,yBAAyB;AAiBlC,MAAM,oBAAoB;AAEnB,SAAS,mBAAmB,MAAe,QAAyB;AACzE,MAAI,CAAC,QAAQ,OAAO,UAAU,SAAS,KAAK,IAAI,MAAM,mBAAmB,MAAM,IAAc,GAAG;AAC9F,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ;AACV,WAAO,wBAAwB,MAAc,MAAM;AAAA,EACrD;AAEA,SAAO,IAAI,KAAK,eAAe,QAAW;AAAA,IACxC,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,CAAC,EAAE,OAAO,IAAY;AACxB;AAEO,SAAS,yBAAyB,QAAyB;AAChE,MAAI,QAAQ;AACV,WAAO;AAAA,EACT;AAEA,SAAO,GAAG,qBAAqB,CAAC;AAClC;AAEA,SAAS,sBAAsB,QAAyB;AACtD,SAAO,yBAAyB,MAAM,EAAE,QAAQ,mBAAmB,GAAG;AACxE;AAEA,SAAS,oBAAoB,OAAe,QAAsB;AAChE,QAAM,SAAS,uBAAuB,OAAO,MAAM;AAEnD,MAAI,CAAC,QAAQ;AACX,WAAO,IAAI,KAAK,OAAO,GAAG;AAAA,EAC5B;AAEA,SAAO;AACT;AAGO,SAAS,oBAAoB,OAAqD;AACvF,QAAM,gBAAgB,MAAc,yBAAyB,MAAM,MAAM;AACzE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAa,mBAAmB,MAAM,OAAO,MAAM,MAAM,CAAC;AACtG,QAAM,YAAY,MAAmC,oBAAoB,sBAAsB,MAAM,MAAM,CAAC;AAE5G,MAAI;AAEJ,eAAa,MAAM;AACjB,UAAM,IAAI,MAAM;AAChB,QAAI,MAAM,WAAW;AACnB,kBAAY;AACZ,wBAAkB,mBAAmB,GAAG,MAAM,MAAM,CAAC;AAAA,IACvD;AAAA,EACF,CAAC;AAED,QAAM,WAAW,CAAC,UAAwB;AACxC,sBAAkB,KAAK;AACvB,QAAI,CAAC,MAAM,SAAU;AACrB,QAAI,uBAAuB,OAAO,cAAc,CAAC,GAAG;AAClD,YAAM,SAAS,QAAW,oBAAoB,OAAO,cAAc,CAAC,CAAC;AAAA,IACvE,WAAW,UAAU,IAAI;AACvB,YAAM,SAAS,MAAS;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,SAAS,kBAAkB,EAAE,OAAO,gBAAgB,UAAU,QAAQ,CAAC,MAAM,UAAU,EAAE,CAAC,EAAE,CAAC;AAEnG,QAAM,SAAS,MAAY;AACzB,QAAI,CAAC,MAAM,OAAQ;AACnB,UAAM,OAAO;AACb,QAAI,gBAAgB,QAAQ,uBAAuB,mBAAmB,MAAM,MAAM,MAAM,GAAG,cAAc,CAAC,GAAG;AAC3G,YAAM,OAAO,QAAW,IAAI;AAAA,IAC9B,WAAW,OAAO,SAAS,YAAY,uBAAuB,MAAM,cAAc,CAAC,GAAG;AACpF,YAAM,OAAO,QAAW,oBAAoB,MAAM,cAAc,CAAC,CAAC;AAAA,IACpE,WAAW,SAAS,UAAa,SAAS,IAAI;AAC5C,YAAM,OAAO,MAAS;AAAA,IACxB;AACA,sBAAkB,mBAAmB,MAAM,OAAO,MAAM,MAAM,CAAC;AAAA,EACjE;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS,OAAO;AAAA,IAChB;AAAA,IACA,KAAK,OAAO;AAAA,IACZ,aAAa,MAAM,cAAc,EAAE,YAAY;AAAA,EACjD;AACF;",
+  "names": []
+}

package/dist/headless/source/components/inputs/fileDrop/countPreview.jsx

@@ -0,0 +1,17 @@
+import cn from "clsx";
+import { FloatingButton } from "../floatingButton";
+import { Icon } from "../../base/icon";
+function CountPreview(props) {
+  return <div class={cn("smwb-file-drop__preview", props.previewClassName)}>
+      <FloatingButton onClick={() => props.handleRemoveAll()} class="smwb-file-drop__preview-button">
+        <Icon name="delete" size={28} />
+      </FloatingButton>
+      <div class="smwb-file-drop__preview-count">{`${props.text ? props.text : "uploaded files:"} ${props.filesLength}`}</div>
+    </div>;
+}
+var countPreview_default = CountPreview;
+export {
+  CountPreview,
+  countPreview_default as default
+};
+//# sourceMappingURL=countPreview.js.map

package/dist/headless/source/components/inputs/fileDrop/countPreview.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/inputs/fileDrop/countPreview.tsx"],"sourcesContent":["import { type JSX } from \"solid-js\";\nimport cn from \"clsx\";\nimport { FloatingButton } from \"../floatingButton\";\nimport { Icon } from \"../../base/icon\";\n\nexport interface CountPreviewProps {\n  previewClassName?: string | undefined;\n  text?: string | undefined;\n  filesLength: number;\n  handleRemoveAll: () => void;\n}\n\nexport function CountPreview(props: CountPreviewProps): JSX.Element {\n  return (\n    <div class={cn(\"smwb-file-drop__preview\", props.previewClassName)}>\n      <FloatingButton onClick={() => props.handleRemoveAll()} class=\"smwb-file-drop__preview-button\">\n        <Icon name=\"delete\" size={28} />\n      </FloatingButton>\n      <div class=\"smwb-file-drop__preview-count\">{`${props.text ? props.text : \"uploaded files:\"} ${props.filesLength}`}</div>\n    </div>\n  );\n}\n\nexport default CountPreview;\n"],"mappings":"AACA,OAAO,QAAQ;AACf,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AASd,SAAS,aAAa,OAAuC;AAClE,SACE,CAAC,IAAI,OAAO,GAAG,2BAA2B,MAAM,gBAAgB,GAAG;AAAA,MACjE,CAAC,eAAe,SAAS,MAAM,MAAM,gBAAgB,GAAG,MAAM,iCAAiC;AAAA,QAC7F,CAAC,KAAK,KAAK,SAAS,MAAM,IAAI,EAAE;AAAA,MAClC,EAFC,eAEgB;AAAA,MACjB,CAAC,IAAI,MAAM,iCAAiC,GAAG,MAAM,OAAO,MAAM,OAAO,iBAAiB,IAAI,MAAM,WAAW,GAAG,EAAjH,IAAuH;AAAA,IAC1H,EALC;AAOL;AAEA,IAAO,uBAAQ;","names":[],"file":"countPreview.jsx"}

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

@@ -0,0 +1,72 @@
+import { Show, createSignal, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { PreviewWrapper } from "./previewWrapper";
+import { createDropzone } from "../../../primitives/createDropzone";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function FileDrop(props) {
+  const merged = mergeProps({ previewCols: 3, galleryItemSize: 100, label: "" }, props);
+  const [local, dropzoneOptions] = splitProps(merged, [
+    "preview",
+    "previewCols",
+    "galleryItemSize",
+    "onDrop",
+    "label",
+    "class",
+    "previewClassName",
+    "disabled",
+    "error",
+    "ref"
+  ]);
+  const [files, setFiles] = createSignal([]);
+  const dropzone = createDropzone({
+    ...dropzoneOptions,
+    disabled: local.disabled,
+    onDrop: (accepted) => {
+      setFiles((prev) => [...prev, ...accepted]);
+      local.onDrop(accepted);
+    }
+  });
+  const handleRemoveAll = () => {
+    setFiles([]);
+  };
+  return <div
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-file-drop", { "smwb-disabled": local.disabled, "smwb-error": !!local.error }, local.class)}
+    data-testid="file-drop"
+  >
+      <Show
+    when={files().length > 0}
+    fallback={<div
+      class="smwb-file-drop__input"
+      role="button"
+      tabindex={local.disabled ? -1 : 0}
+      aria-disabled={local.disabled || void 0}
+      aria-label={local.label || "Upload files"}
+      {...dropzone.getRootProps()}
+    >
+            <div class="smwb-file-drop__input-text">{local.label}</div>
+            <input ref={dropzone.inputRef} {...dropzone.getInputProps()} />
+          </div>}
+  >
+        <PreviewWrapper
+    preview={local.preview}
+    files={files()}
+    handleRemoveAll={handleRemoveAll}
+    previewCols={local.previewCols}
+    galleryItemSize={local.galleryItemSize}
+    previewClassName={local.previewClassName}
+  />
+      </Show>
+      <Show when={local.error}>
+        <span class="smwb-file-drop__error" role="alert">
+          {local.error}
+        </span>
+      </Show>
+    </div>;
+}
+var fileDrop_default = FileDrop;
+export {
+  FileDrop,
+  fileDrop_default as default
+};
+//# sourceMappingURL=fileDrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/inputs/fileDrop/fileDrop.tsx"],"sourcesContent":["import { type JSX, Show, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { PreviewWrapper } from \"./previewWrapper\";\nimport { createDropzone, type DropzoneOptions } from \"../../../primitives/createDropzone\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface FileUploadProps extends DropzoneOptions {\n  preview?: boolean;\n  previewCols?: number;\n  galleryItemSize?: number;\n  onDrop: (files: File[]) => void;\n  label?: string;\n  class?: string;\n  previewClassName?: string;\n  disabled?: boolean;\n  /** Validation message rendered below the drop zone. */\n  error?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function FileDrop(props: FileUploadProps): JSX.Element {\n  const merged = mergeProps({ previewCols: 3, galleryItemSize: 100, label: \"\" }, props);\n  const [local, dropzoneOptions] = splitProps(merged, [\n    \"preview\",\n    \"previewCols\",\n    \"galleryItemSize\",\n    \"onDrop\",\n    \"label\",\n    \"class\",\n    \"previewClassName\",\n    \"disabled\",\n    \"error\",\n    \"ref\",\n  ]);\n\n  const [files, setFiles] = createSignal<File[]>([]);\n\n  const dropzone = createDropzone({\n    ...dropzoneOptions,\n    disabled: local.disabled,\n    onDrop: (accepted) => {\n      setFiles((prev) => [...prev, ...accepted]);\n      local.onDrop(accepted);\n    },\n  });\n\n  const handleRemoveAll = (): void => {\n    setFiles([]);\n  };\n\n  return (\n    <div\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-file-drop\", { \"smwb-disabled\": local.disabled, \"smwb-error\": !!local.error }, local.class)}\n      data-testid=\"file-drop\"\n    >\n      <Show\n        when={files().length > 0}\n        fallback={\n          <div\n            class=\"smwb-file-drop__input\"\n            role=\"button\"\n            tabindex={local.disabled ? -1 : 0}\n            aria-disabled={local.disabled || undefined}\n            aria-label={local.label || \"Upload files\"}\n            {...dropzone.getRootProps()}\n          >\n            <div class=\"smwb-file-drop__input-text\">{local.label}</div>\n            <input ref={dropzone.inputRef} {...dropzone.getInputProps()} />\n          </div>\n        }\n      >\n        <PreviewWrapper\n          preview={local.preview}\n          files={files()}\n          handleRemoveAll={handleRemoveAll}\n          previewCols={local.previewCols}\n          galleryItemSize={local.galleryItemSize}\n          previewClassName={local.previewClassName}\n        />\n      </Show>\n      <Show when={local.error}>\n        <span class=\"smwb-file-drop__error\" role=\"alert\">\n          {local.error}\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default FileDrop;\n"],"mappings":"AAAA,SAAmB,MAAM,cAAc,YAAY,kBAAkB;AACrE,OAAO,QAAQ;AACf,SAAS,sBAAsB;AAC/B,SAAS,sBAA4C;AACrD,SAAS,iBAA2B;AAgB7B,SAAS,SAAS,OAAqC;AAC5D,QAAM,SAAS,WAAW,EAAE,aAAa,GAAG,iBAAiB,KAAK,OAAO,GAAG,GAAG,KAAK;AACpF,QAAM,CAAC,OAAO,eAAe,IAAI,WAAW,QAAQ;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAqB,CAAC,CAAC;AAEjD,QAAM,WAAW,eAAe;AAAA,IAC9B,GAAG;AAAA,IACH,UAAU,MAAM;AAAA,IAChB,QAAQ,CAAC,aAAa;AACpB,eAAS,CAAC,SAAS,CAAC,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzC,YAAM,OAAO,QAAQ;AAAA,IACvB;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB,MAAY;AAClC,aAAS,CAAC,CAAC;AAAA,EACb;AAEA,SACE,CAAC;AAAA,IACC,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,kBAAkB,EAAE,iBAAiB,MAAM,UAAU,cAAc,CAAC,CAAC,MAAM,MAAM,GAAG,MAAM,KAAK;AAAA,IACzG,YAAY;AAAA,GACb;AAAA,MACC,CAAC;AAAA,IACC,MAAM,MAAM,EAAE,SAAS;AAAA,IACvB,UACE,CAAC;AAAA,MACC,MAAM;AAAA,MACN,KAAK;AAAA,MACL,UAAU,MAAM,WAAW,KAAK;AAAA,MAChC,eAAe,MAAM,YAAY;AAAA,MACjC,YAAY,MAAM,SAAS;AAAA,UACvB,SAAS,aAAa;AAAA,KAC3B;AAAA,YACC,CAAC,IAAI,MAAM,8BAA8B,MAAM,MAAM,EAApD,IAA0D;AAAA,YAC3D,CAAC,MAAM,KAAK,SAAS,cAAc,SAAS,cAAc,GAAG,EAAE;AAAA,UACjE,EAVC;AAAA,GAYJ;AAAA,QACC,CAAC;AAAA,IACC,SAAS,MAAM;AAAA,IACf,OAAO,MAAM;AAAA,IACb,iBAAiB;AAAA,IACjB,aAAa,MAAM;AAAA,IACnB,iBAAiB,MAAM;AAAA,IACvB,kBAAkB,MAAM;AAAA,EAC1B,EAAE;AAAA,MACJ,EAxBC,KAwBM;AAAA,MACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,QACvB,CAAC,KAAK,MAAM,wBAAwB,KAAK,QAAQ;AAAA,WAC9C,MAAM,MAAM;AAAA,QACf,EAFC,KAEM;AAAA,MACT,EAJC,KAIM;AAAA,IACT,EAnCC;AAqCL;AAEA,IAAO,mBAAQ;","names":[],"file":"fileDrop.jsx"}

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

@@ -0,0 +1,14 @@
+import { FileDrop, default as default2 } from "./fileDrop";
+import { PreviewWrapper } from "./previewWrapper";
+import { Preview } from "./preview";
+import { CountPreview } from "./countPreview";
+import { isImageFile } from "./utils";
+export {
+  CountPreview,
+  FileDrop,
+  Preview,
+  PreviewWrapper,
+  default2 as default,
+  isImageFile
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/inputs/fileDrop/index.ts"],
+  "sourcesContent": ["export { FileDrop, default } from \"./fileDrop\";\nexport type { FileUploadProps } from \"./fileDrop\";\nexport { PreviewWrapper } from \"./previewWrapper\";\nexport type { PreviewWrapperProps } from \"./previewWrapper\";\nexport { Preview } from \"./preview\";\nexport type { PreviewProps } from \"./preview\";\nexport { CountPreview } from \"./countPreview\";\nexport type { CountPreviewProps } from \"./countPreview\";\nexport { isImageFile } from \"./utils\";\n"],
+  "mappings": "AAAA,SAAS,UAAU,WAAAA,gBAAe;AAElC,SAAS,sBAAsB;AAE/B,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;",
+  "names": ["default"]
+}

package/dist/headless/source/components/inputs/fileDrop/preview.jsx

@@ -0,0 +1,41 @@
+import { For, Show, mergeProps } from "solid-js";
+import cn from "clsx";
+import { FloatingButton } from "../floatingButton";
+import { Icon } from "../../base/icon";
+import { ImagesList, ImagesListItem } from "../../dataDisplay/imagesList";
+import { isImageFile } from "./utils";
+function Preview(rawProps) {
+  const props = mergeProps({ previewCols: 3, galleryItemSize: 100 }, rawProps);
+  return <div class={cn("smwb-file-drop__preview", props.previewClassName)}>
+      <FloatingButton onClick={() => props.handleRemoveAll()} class="smwb-file-drop__preview-button">
+        <Icon name="delete" size={28} />
+      </FloatingButton>
+      <ImagesList class="smwb-file-drop__preview-gallery" cols={props.previewCols} rowsHeight={props.galleryItemSize}>
+        <For each={props.files}>
+          {(file) => {
+    const src = isImageFile(file) ? URL.createObjectURL(file) : null;
+    return <Show
+      when={src}
+      fallback={<div class="smwb-file-drop__preview-gallery-file" style={{ width: `${props.galleryItemSize - 4}px` }}>
+                    {file.name}
+                  </div>}
+    >
+                <ImagesListItem
+      class="smwb-file-drop__preview-gallery-image"
+      src={src}
+      rows={1}
+      cols={1}
+      itemBarContent={file.name}
+    />
+              </Show>;
+  }}
+        </For>
+      </ImagesList>
+    </div>;
+}
+var preview_default = Preview;
+export {
+  Preview,
+  preview_default as default
+};
+//# sourceMappingURL=preview.js.map

package/dist/headless/source/components/inputs/fileDrop/preview.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/inputs/fileDrop/preview.tsx"],"sourcesContent":["import { type JSX, For, Show, mergeProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { FloatingButton } from \"../floatingButton\";\nimport { Icon } from \"../../base/icon\";\nimport { ImagesList, ImagesListItem } from \"../../dataDisplay/imagesList\";\nimport { isImageFile } from \"./utils\";\n\nexport interface PreviewProps {\n  previewCols?: number | undefined;\n  galleryItemSize?: number | undefined;\n  previewClassName?: string | undefined;\n  files: File[];\n  handleRemoveAll: () => void;\n}\n\nexport function Preview(rawProps: PreviewProps): JSX.Element {\n  const props = mergeProps({ previewCols: 3, galleryItemSize: 100 }, rawProps);\n  return (\n    <div class={cn(\"smwb-file-drop__preview\", props.previewClassName)}>\n      <FloatingButton onClick={() => props.handleRemoveAll()} class=\"smwb-file-drop__preview-button\">\n        <Icon name=\"delete\" size={28} />\n      </FloatingButton>\n      <ImagesList class=\"smwb-file-drop__preview-gallery\" cols={props.previewCols} rowsHeight={props.galleryItemSize}>\n        <For each={props.files}>\n          {(file) => {\n            const src = isImageFile(file) ? URL.createObjectURL(file) : null;\n            return (\n              <Show\n                when={src}\n                fallback={\n                  <div class=\"smwb-file-drop__preview-gallery-file\" style={{ width: `${props.galleryItemSize - 4}px` }}>\n                    {file.name}\n                  </div>\n                }\n              >\n                <ImagesListItem\n                  class=\"smwb-file-drop__preview-gallery-image\"\n                  src={src as string}\n                  rows={1}\n                  cols={1}\n                  itemBarContent={file.name}\n                />\n              </Show>\n            );\n          }}\n        </For>\n      </ImagesList>\n    </div>\n  );\n}\n\nexport default Preview;\n"],"mappings":"AAAA,SAAmB,KAAK,MAAM,kBAAkB;AAChD,OAAO,QAAQ;AACf,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,YAAY,sBAAsB;AAC3C,SAAS,mBAAmB;AAUrB,SAAS,QAAQ,UAAqC;AAC3D,QAAM,QAAQ,WAAW,EAAE,aAAa,GAAG,iBAAiB,IAAI,GAAG,QAAQ;AAC3E,SACE,CAAC,IAAI,OAAO,GAAG,2BAA2B,MAAM,gBAAgB,GAAG;AAAA,MACjE,CAAC,eAAe,SAAS,MAAM,MAAM,gBAAgB,GAAG,MAAM,iCAAiC;AAAA,QAC7F,CAAC,KAAK,KAAK,SAAS,MAAM,IAAI,EAAE;AAAA,MAClC,EAFC,eAEgB;AAAA,MACjB,CAAC,WAAW,MAAM,kCAAkC,MAAM,MAAM,aAAa,YAAY,MAAM,iBAAiB;AAAA,QAC9G,CAAC,IAAI,MAAM,MAAM,OAAO;AAAA,WACrB,CAAC,SAAS;AACT,UAAM,MAAM,YAAY,IAAI,IAAI,IAAI,gBAAgB,IAAI,IAAI;AAC5D,WACE,CAAC;AAAA,MACC,MAAM;AAAA,MACN,UACE,CAAC,IAAI,MAAM,uCAAuC,OAAO,EAAE,OAAO,GAAG,MAAM,kBAAkB,CAAC,KAAK,GAAG;AAAA,qBACnG,KAAK,KAAK;AAAA,kBACb,EAFC;AAAA,KAIJ;AAAA,gBACC,CAAC;AAAA,MACC,MAAM;AAAA,MACN,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,MACN,gBAAgB,KAAK;AAAA,IACvB,EAAE;AAAA,cACJ,EAfC;AAAA,EAiBL,EAAE;AAAA,QACJ,EAtBC,IAsBK;AAAA,MACR,EAxBC,WAwBY;AAAA,IACf,EA7BC;AA+BL;AAEA,IAAO,kBAAQ;","names":[],"file":"preview.jsx"}

package/dist/headless/source/components/inputs/fileDrop/previewWrapper.jsx

@@ -0,0 +1,27 @@
+import { Show } from "solid-js";
+import { Preview } from "./preview";
+import { CountPreview } from "./countPreview";
+function PreviewWrapper(props) {
+  return <Show
+    when={props.preview}
+    fallback={<CountPreview
+      filesLength={props.files.length}
+      handleRemoveAll={props.handleRemoveAll}
+      previewClassName={props.previewClassName}
+    />}
+  >
+      <Preview
+    files={props.files}
+    handleRemoveAll={props.handleRemoveAll}
+    previewCols={props.previewCols}
+    galleryItemSize={props.galleryItemSize}
+    previewClassName={props.previewClassName}
+  />
+    </Show>;
+}
+var previewWrapper_default = PreviewWrapper;
+export {
+  PreviewWrapper,
+  previewWrapper_default as default
+};
+//# sourceMappingURL=previewWrapper.js.map