@smwb/ui-solid 0.1.0

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

@@ -0,0 +1,19 @@
+export { DatePicker, default } from "./datePicker";
+export type { DatePickerProps } from "./datePicker";
+export { OpenView } from "./openView";
+export { DataPickerDays } from "./dataPickerDays";
+export type { DataPickerDaysProps } from "./dataPickerDays";
+export { DataPickerHeader } from "./dataPickerHeader";
+export type { DataPickerHeaderProps } from "./dataPickerHeader";
+export { DataPickerInput } from "./dataPickerInput";
+export type { DataPickerInputProps } from "./dataPickerInput";
+export { DatePickerActionLabel } from "./datePickerActionLabel";
+export type { ActionLabelProps } from "./datePickerActionLabel";
+export { DatePickerDay } from "./datePickerDay";
+export type { DatePickerDayProps } from "./datePickerDay";
+export { DatePickerIconButton } from "./datePickerIconButton";
+export type { DataPickerIconButtonProps } from "./datePickerIconButton";
+export { DatePickerList } from "./datePickerList";
+export type { DatePickerListProps } from "./datePickerList";
+export { createDateInput } from "./useDateInput";
+export type { CreateDateInputProps, DateInputState } from "./useDateInput";

package/dist/components/inputs/datePicker/openView.d.ts

@@ -0,0 +1,5 @@
+export declare enum OpenView {
+    days = "days",
+    months = "months",
+    years = "years"
+}

package/dist/components/inputs/datePicker/openView.js

@@ -0,0 +1,5 @@
+var s = /* @__PURE__ */ ((r) => (r.days = "days", r.months = "months", r.years = "years", r))(s || {});
+export {
+  s as OpenView
+};
+//# sourceMappingURL=openView.js.map

package/dist/components/inputs/datePicker/openView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"openView.js","sources":["../../../../src/components/inputs/datePicker/openView.ts"],"sourcesContent":["export enum OpenView {\n  days = \"days\",\n  months = \"months\",\n  years = \"years\",\n}\n"],"names":["OpenView"],"mappings":"AAAO,IAAKA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAHEA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/components/inputs/datePicker/useDateInput.d.ts

@@ -0,0 +1,19 @@
+import { type Accessor } from "solid-js";
+export interface CreateDateInputProps {
+    value?: Date | string | undefined;
+    onChange?: ((event?: Event, value?: Date) => void) | undefined;
+    onBlur?: ((event?: FocusEvent, value?: Date) => void) | undefined;
+    format?: string | undefined;
+}
+export interface DateInputState {
+    value: Accessor<string>;
+    onInput: (event: InputEvent & {
+        currentTarget: HTMLInputElement;
+        target: Element;
+    }) => void;
+    onBlur: () => void;
+    ref: (el: HTMLInputElement) => void;
+    placeholder: Accessor<string>;
+}
+/** Solid port of useDateInput — masked text input bound to a Date value. */
+export declare function createDateInput(props: CreateDateInputProps): DateInputState;

package/dist/components/inputs/datePicker/useDateInput.js

@@ -0,0 +1,29 @@
+import { createSignal as d, createEffect as g } from "solid-js";
+import { getDisplayDate as n, isDateMatch as f, getDateByFormat as l, getCurrentFormatDate as v, maskedDateFormatter as D, getMaskFormat as s } from "./dateUtils.js";
+import { createMaskedInput as h } from "../../../primitives/createMaskedInput.js";
+function k(t) {
+  const a = () => v(t.format), [i, o] = d(n(t.value, t.format)), u = () => D(s(t.format));
+  let r;
+  g(() => {
+    const e = t.value;
+    e !== r && (r = e, o(n(e, t.format)));
+  });
+  const m = h({ value: i, onChange: (e) => {
+    o(e), t.onChange && (f(e, a()) ? t.onChange(void 0, l(e, a())) : e === "" && t.onChange(void 0));
+  }, format: (e) => u()(e) }), c = () => {
+    if (!t.onBlur) return;
+    const e = r;
+    e instanceof Date && f(n(e, t.format), a()) ? t.onBlur(void 0, e) : typeof e == "string" && f(e, a()) ? t.onBlur(void 0, l(e, a())) : (e === void 0 || e === "") && t.onBlur(void 0), o(n(t.value, t.format));
+  };
+  return {
+    value: i,
+    onInput: m.onInput,
+    onBlur: c,
+    ref: m.ref,
+    placeholder: () => a().toLowerCase()
+  };
+}
+export {
+  k as createDateInput
+};
+//# sourceMappingURL=useDateInput.js.map

package/dist/components/inputs/datePicker/useDateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDateInput.js","sources":["../../../../src/components/inputs/datePicker/useDateInput.ts"],"sourcesContent":["import { type Accessor, createEffect, createSignal } from \"solid-js\";\nimport {\n  getCurrentFormatDate,\n  getDateByFormat,\n  getDisplayDate,\n  getMaskFormat,\n  isDateMatch,\n  maskedDateFormatter,\n} from \"./dateUtils\";\nimport { createMaskedInput } from \"../../../primitives/createMaskedInput\";\n\nexport interface CreateDateInputProps {\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 DateInputState {\n  value: Accessor<string>;\n  onInput: (event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => void;\n  onBlur: () => void;\n  ref: (el: HTMLInputElement) => void;\n  placeholder: Accessor<string>;\n}\n\n/** Solid port of useDateInput — masked text input bound to a Date value. */\nexport function createDateInput(props: CreateDateInputProps): DateInputState {\n  const currentFormatDate = (): string => getCurrentFormatDate(props.format);\n  const [displayedValue, setDisplayedValue] = createSignal(getDisplayDate(props.value, props.format));\n  const formatter = (): ((value: string) => string) => maskedDateFormatter(getMaskFormat(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(getDisplayDate(v, props.format));\n    }\n  });\n\n  const onChange = (value: string): void => {\n    setDisplayedValue(value);\n    if (!props.onChange) return;\n    if (isDateMatch(value, currentFormatDate())) {\n      props.onChange(undefined, getDateByFormat(value, currentFormatDate()));\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 && isDateMatch(getDisplayDate(prev, props.format), currentFormatDate())) {\n      props.onBlur(undefined, prev);\n    } else if (typeof prev === \"string\" && isDateMatch(prev, currentFormatDate())) {\n      props.onBlur(undefined, getDateByFormat(prev, currentFormatDate()));\n    } else if (prev === undefined || prev === \"\") {\n      props.onBlur(undefined);\n    }\n    setDisplayedValue(getDisplayDate(props.value, props.format));\n  };\n\n  return {\n    value: displayedValue,\n    onInput: masked.onInput,\n    onBlur,\n    ref: masked.ref,\n    placeholder: () => currentFormatDate().toLowerCase(),\n  };\n}\n"],"names":["createDateInput","props","currentFormatDate","getCurrentFormatDate","displayedValue","setDisplayedValue","createSignal","getDisplayDate","formatter","maskedDateFormatter","getMaskFormat","prevValue","createEffect","v","masked","createMaskedInput","value","isDateMatch","getDateByFormat","onBlur","prev"],"mappings":";;;AA2BO,SAASA,EAAgBC,GAA6C;AAC3E,QAAMC,IAAoB,MAAcC,EAAqBF,EAAM,MAAM,GACnE,CAACG,GAAgBC,CAAiB,IAAIC,EAAaC,EAAeN,EAAM,OAAOA,EAAM,MAAM,CAAC,GAC5FO,IAAY,MAAmCC,EAAoBC,EAAcT,EAAM,MAAM,CAAC;AAEpG,MAAIU;AAEJ,EAAAC,EAAa,MAAM;AACjB,UAAMC,IAAIZ,EAAM;AAChB,IAAIY,MAAMF,MACRA,IAAYE,GACZR,EAAkBE,EAAeM,GAAGZ,EAAM,MAAM,CAAC;AAAA,EAErD,CAAC;AAYD,QAAMa,IAASC,EAAkB,EAAE,OAAOX,GAAgB,UAVzC,CAACY,MAAwB;AAExC,IADAX,EAAkBW,CAAK,GAClBf,EAAM,aACPgB,EAAYD,GAAOd,EAAA,CAAmB,IACxCD,EAAM,SAAS,QAAWiB,EAAgBF,GAAOd,EAAA,CAAmB,CAAC,IAC5Dc,MAAU,MACnBf,EAAM,SAAS,MAAS;AAAA,EAE5B,GAEoE,QAAQ,CAACY,MAAML,IAAYK,CAAC,GAAG,GAE7FM,IAAS,MAAY;AACzB,QAAI,CAAClB,EAAM,OAAQ;AACnB,UAAMmB,IAAOT;AACb,IAAIS,aAAgB,QAAQH,EAAYV,EAAea,GAAMnB,EAAM,MAAM,GAAGC,EAAA,CAAmB,IAC7FD,EAAM,OAAO,QAAWmB,CAAI,IACnB,OAAOA,KAAS,YAAYH,EAAYG,GAAMlB,EAAA,CAAmB,IAC1ED,EAAM,OAAO,QAAWiB,EAAgBE,GAAMlB,EAAA,CAAmB,CAAC,KACzDkB,MAAS,UAAaA,MAAS,OACxCnB,EAAM,OAAO,MAAS,GAExBI,EAAkBE,EAAeN,EAAM,OAAOA,EAAM,MAAM,CAAC;AAAA,EAC7D;AAEA,SAAO;AAAA,IACL,OAAOG;AAAA,IACP,SAASU,EAAO;AAAA,IAChB,QAAAK;AAAA,IACA,KAAKL,EAAO;AAAA,IACZ,aAAa,MAAMZ,EAAA,EAAoB,YAAA;AAAA,EAAY;AAEvD;"}

package/dist/components/inputs/dateTimePicker/dateTimeFormat.d.ts

@@ -0,0 +1,3 @@
+export declare function formatDateTimeByPattern(date: Date, pattern: string): string;
+export declare function parseDateTimeByPattern(value: string, pattern: string): Date | undefined;
+export declare function isDateTimePatternMatch(value: string, pattern: string): boolean;

package/dist/components/inputs/dateTimePicker/dateTimeFormat.js

@@ -0,0 +1,73 @@
+const l = /yyyy|MM|dd|HH|mm|ss/g;
+function m(t) {
+  const e = [];
+  let r;
+  for (l.lastIndex = 0; (r = l.exec(t)) !== null; )
+    e.push(r[0]);
+  return e;
+}
+function y(t) {
+  return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function p(t) {
+  let e = "^", r = 0, n;
+  for (l.lastIndex = 0; (n = l.exec(t)) !== null; )
+    e += y(t.slice(r, n.index)), e += n[0] === "yyyy" ? "(\\d{4})" : "(\\d{2})", r = l.lastIndex;
+  return e += y(t.slice(r)), e += "$", new RegExp(e);
+}
+function x(t, e, r) {
+  if (e < 1 || e > 12 || r < 1)
+    return !1;
+  const n = new Date(t, e - 1, r);
+  return n.getFullYear() === t && n.getMonth() === e - 1 && n.getDate() === r;
+}
+function M(t, e, r) {
+  return t >= 0 && t <= 23 && e >= 0 && e <= 59 && r >= 0 && r <= 59;
+}
+function h(t, e) {
+  const r = t.getFullYear(), n = t.getMonth() + 1, u = t.getDate(), s = t.getHours(), a = t.getMinutes(), c = t.getSeconds();
+  return e.replace(l, (i) => i === "yyyy" ? String(r).padStart(4, "0") : i === "MM" ? String(n).padStart(2, "0") : i === "dd" ? String(u).padStart(2, "0") : i === "HH" ? String(s).padStart(2, "0") : i === "mm" ? String(a).padStart(2, "0") : String(c).padStart(2, "0"));
+}
+function S(t, e) {
+  const r = m(e);
+  if (!r.includes("yyyy") || !r.includes("MM") || !r.includes("dd") || !r.includes("HH") || !r.includes("mm"))
+    return;
+  const n = p(e).exec(t);
+  if (!n)
+    return;
+  let u, s, a, c, i, f = 0;
+  if (r.forEach((o, g) => {
+    const d = Number(n[g + 1]);
+    if (o === "yyyy") {
+      u = d;
+      return;
+    }
+    if (o === "MM") {
+      s = d;
+      return;
+    }
+    if (o === "dd") {
+      a = d;
+      return;
+    }
+    if (o === "HH") {
+      c = d;
+      return;
+    }
+    if (o === "mm") {
+      i = d;
+      return;
+    }
+    f = d;
+  }), !(u === void 0 || s === void 0 || a === void 0 || c === void 0 || i === void 0) && !(!x(u, s, a) || !M(c, i, f)))
+    return new Date(u, s - 1, a, c, i, f);
+}
+function v(t, e) {
+  return S(t, e) !== void 0;
+}
+export {
+  h as formatDateTimeByPattern,
+  v as isDateTimePatternMatch,
+  S as parseDateTimeByPattern
+};
+//# sourceMappingURL=dateTimeFormat.js.map

package/dist/components/inputs/dateTimePicker/dateTimeFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateTimeFormat.js","sources":["../../../../src/components/inputs/dateTimePicker/dateTimeFormat.ts"],"sourcesContent":["const DATETIME_TOKEN_REGEXP = /yyyy|MM|dd|HH|mm|ss/g;\n\ntype DateTimeToken = \"yyyy\" | \"MM\" | \"dd\" | \"HH\" | \"mm\" | \"ss\";\n\nfunction extractTokens(pattern: string): DateTimeToken[] {\n  const tokens: DateTimeToken[] = [];\n  let match: RegExpExecArray | null;\n\n  DATETIME_TOKEN_REGEXP.lastIndex = 0;\n  while ((match = DATETIME_TOKEN_REGEXP.exec(pattern)) !== null) {\n    tokens.push(match[0] as DateTimeToken);\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  DATETIME_TOKEN_REGEXP.lastIndex = 0;\n  while ((match = DATETIME_TOKEN_REGEXP.exec(pattern)) !== null) {\n    regex += escapeRegExp(pattern.slice(lastIndex, match.index));\n    regex += match[0] === \"yyyy\" ? \"(\\\\d{4})\" : \"(\\\\d{2})\";\n    lastIndex = DATETIME_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\nfunction isValidTime(hours: number, minutes: number, seconds: number): boolean {\n  return hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59 && seconds >= 0 && seconds <= 59;\n}\n\nexport function formatDateTimeByPattern(date: Date, pattern: string): string {\n  const year = date.getFullYear();\n  const month = date.getMonth() + 1;\n  const day = date.getDate();\n  const hours = date.getHours();\n  const minutes = date.getMinutes();\n  const seconds = date.getSeconds();\n\n  return pattern.replace(DATETIME_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    if (token === \"dd\") {\n      return String(day).padStart(2, \"0\");\n    }\n\n    if (token === \"HH\") {\n      return String(hours).padStart(2, \"0\");\n    }\n\n    if (token === \"mm\") {\n      return String(minutes).padStart(2, \"0\");\n    }\n\n    return String(seconds).padStart(2, \"0\");\n  });\n}\n\nexport function parseDateTimeByPattern(value: string, pattern: string): Date | undefined {\n  const tokens = extractTokens(pattern);\n\n  if (\n    !tokens.includes(\"yyyy\") ||\n    !tokens.includes(\"MM\") ||\n    !tokens.includes(\"dd\") ||\n    !tokens.includes(\"HH\") ||\n    !tokens.includes(\"mm\")\n  ) {\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  let hours: number | undefined;\n  let minutes: number | undefined;\n  let seconds = 0;\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    if (token === \"dd\") {\n      day = part;\n      return;\n    }\n\n    if (token === \"HH\") {\n      hours = part;\n      return;\n    }\n\n    if (token === \"mm\") {\n      minutes = part;\n      return;\n    }\n\n    seconds = part;\n  });\n\n  if (year === undefined || month === undefined || day === undefined || hours === undefined || minutes === undefined) {\n    return undefined;\n  }\n\n  if (!isValidCalendarDate(year, month, day) || !isValidTime(hours, minutes, seconds)) {\n    return undefined;\n  }\n\n  return new Date(year, month - 1, day, hours, minutes, seconds);\n}\n\nexport function isDateTimePatternMatch(value: string, pattern: string): boolean {\n  return parseDateTimeByPattern(value, pattern) !== undefined;\n}\n"],"names":["DATETIME_TOKEN_REGEXP","extractTokens","pattern","tokens","match","escapeRegExp","value","patternToRegExp","regex","lastIndex","isValidCalendarDate","year","month","day","date","isValidTime","hours","minutes","seconds","formatDateTimeByPattern","token","parseDateTimeByPattern","index","part","isDateTimePatternMatch"],"mappings":"AAAA,MAAMA,IAAwB;AAI9B,SAASC,EAAcC,GAAkC;AACvD,QAAMC,IAA0B,CAAA;AAChC,MAAIC;AAGJ,OADAJ,EAAsB,YAAY,IAC1BI,IAAQJ,EAAsB,KAAKE,CAAO,OAAO;AACvD,IAAAC,EAAO,KAAKC,EAAM,CAAC,CAAkB;AAGvC,SAAOD;AACT;AAEA,SAASE,EAAaC,GAAuB;AAC3C,SAAOA,EAAM,QAAQ,uBAAuB,MAAM;AACpD;AAEA,SAASC,EAAgBL,GAAyB;AAChD,MAAIM,IAAQ,KACRC,IAAY,GACZL;AAGJ,OADAJ,EAAsB,YAAY,IAC1BI,IAAQJ,EAAsB,KAAKE,CAAO,OAAO;AACvD,IAAAM,KAASH,EAAaH,EAAQ,MAAMO,GAAWL,EAAM,KAAK,CAAC,GAC3DI,KAASJ,EAAM,CAAC,MAAM,SAAS,aAAa,YAC5CK,IAAYT,EAAsB;AAGpC,SAAAQ,KAASH,EAAaH,EAAQ,MAAMO,CAAS,CAAC,GAC9CD,KAAS,KAEF,IAAI,OAAOA,CAAK;AACzB;AAEA,SAASE,EAAoBC,GAAcC,GAAeC,GAAsB;AAC9E,MAAID,IAAQ,KAAKA,IAAQ,MAAMC,IAAM;AACnC,WAAO;AAGT,QAAMC,IAAO,IAAI,KAAKH,GAAMC,IAAQ,GAAGC,CAAG;AAE1C,SAAOC,EAAK,kBAAkBH,KAAQG,EAAK,eAAeF,IAAQ,KAAKE,EAAK,QAAA,MAAcD;AAC5F;AAEA,SAASE,EAAYC,GAAeC,GAAiBC,GAA0B;AAC7E,SAAOF,KAAS,KAAKA,KAAS,MAAMC,KAAW,KAAKA,KAAW,MAAMC,KAAW,KAAKA,KAAW;AAClG;AAEO,SAASC,EAAwBL,GAAYZ,GAAyB;AAC3E,QAAMS,IAAOG,EAAK,YAAA,GACZF,IAAQE,EAAK,SAAA,IAAa,GAC1BD,IAAMC,EAAK,QAAA,GACXE,IAAQF,EAAK,SAAA,GACbG,IAAUH,EAAK,WAAA,GACfI,IAAUJ,EAAK,WAAA;AAErB,SAAOZ,EAAQ,QAAQF,GAAuB,CAACoB,MACzCA,MAAU,SACL,OAAOT,CAAI,EAAE,SAAS,GAAG,GAAG,IAGjCS,MAAU,OACL,OAAOR,CAAK,EAAE,SAAS,GAAG,GAAG,IAGlCQ,MAAU,OACL,OAAOP,CAAG,EAAE,SAAS,GAAG,GAAG,IAGhCO,MAAU,OACL,OAAOJ,CAAK,EAAE,SAAS,GAAG,GAAG,IAGlCI,MAAU,OACL,OAAOH,CAAO,EAAE,SAAS,GAAG,GAAG,IAGjC,OAAOC,CAAO,EAAE,SAAS,GAAG,GAAG,CACvC;AACH;AAEO,SAASG,EAAuBf,GAAeJ,GAAmC;AACvF,QAAMC,IAASF,EAAcC,CAAO;AAEpC,MACE,CAACC,EAAO,SAAS,MAAM,KACvB,CAACA,EAAO,SAAS,IAAI,KACrB,CAACA,EAAO,SAAS,IAAI,KACrB,CAACA,EAAO,SAAS,IAAI,KACrB,CAACA,EAAO,SAAS,IAAI;AAErB;AAGF,QAAMC,IAAQG,EAAgBL,CAAO,EAAE,KAAKI,CAAK;AAEjD,MAAI,CAACF;AACH;AAGF,MAAIO,GACAC,GACAC,GACAG,GACAC,GACAC,IAAU;AAiCd,MA/BAf,EAAO,QAAQ,CAACiB,GAAOE,MAAU;AAC/B,UAAMC,IAAO,OAAOnB,EAAMkB,IAAQ,CAAC,CAAC;AAEpC,QAAIF,MAAU,QAAQ;AACpB,MAAAT,IAAOY;AACP;AAAA,IACF;AAEA,QAAIH,MAAU,MAAM;AAClB,MAAAR,IAAQW;AACR;AAAA,IACF;AAEA,QAAIH,MAAU,MAAM;AAClB,MAAAP,IAAMU;AACN;AAAA,IACF;AAEA,QAAIH,MAAU,MAAM;AAClB,MAAAJ,IAAQO;AACR;AAAA,IACF;AAEA,QAAIH,MAAU,MAAM;AAClB,MAAAH,IAAUM;AACV;AAAA,IACF;AAEA,IAAAL,IAAUK;AAAA,EACZ,CAAC,GAEG,EAAAZ,MAAS,UAAaC,MAAU,UAAaC,MAAQ,UAAaG,MAAU,UAAaC,MAAY,WAIrG,GAACP,EAAoBC,GAAMC,GAAOC,CAAG,KAAK,CAACE,EAAYC,GAAOC,GAASC,CAAO;AAIlF,WAAO,IAAI,KAAKP,GAAMC,IAAQ,GAAGC,GAAKG,GAAOC,GAASC,CAAO;AAC/D;AAEO,SAASM,EAAuBlB,GAAeJ,GAA0B;AAC9E,SAAOmB,EAAuBf,GAAOJ,CAAO,MAAM;AACpD;"}

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

@@ -0,0 +1,30 @@
+import { type JSX } from "solid-js";
+import { type Placement } from "../../../utils/floating";
+import type { TextFieldProps } from "../textField";
+import { type WeekStart } from "../datePicker/dateUtils";
+import { type Ref } from "../../../primitives/mergeRefs";
+export interface DateTimePickerProps extends Omit<TextFieldProps, "onBlur" | "onChange" | "value" | "defaultValue" | "ref" | "onToggle"> {
+    showDaysOutsideMonth?: boolean | undefined;
+    disablePast?: boolean | undefined;
+    disableFuture?: boolean | undefined;
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+    isDateDisabled?: ((day: Date) => boolean) | undefined;
+    weekStartsOn?: WeekStart | undefined;
+    locale?: string | undefined;
+    /** Input format with tokens dd, MM, yyyy, HH, mm, ss, e.g. "dd/MM/yyyy HH:mm". */
+    format?: string | undefined;
+    /** Time portion format when using the clock columns. Defaults to "HH:mm". */
+    timeFormat?: string | undefined;
+    placement?: Placement | undefined;
+    disableCalendar?: boolean | undefined;
+    label?: string | undefined;
+    calendarAriaLabel?: string | undefined;
+    value?: Date | string | undefined;
+    calendarIcon?: JSX.Element;
+    onChange?: ((event?: Event, value?: Date, data?: DateTimePickerProps) => void) | undefined;
+    onBlur?: ((event?: FocusEvent, value?: Date, data?: DateTimePickerProps) => void) | undefined;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function DateTimePicker(props: DateTimePickerProps): JSX.Element;
+export default DateTimePicker;

package/dist/components/inputs/dateTimePicker/dateTimePicker.js

@@ -0,0 +1,198 @@
+import { createComponent as i, mergeProps as ee, Portal as te, use as ae, insert as b, effect as re, style as ne, setAttribute as oe, template as ie } from "solid-js/web";
+import { splitProps as se, createSignal as u, createEffect as L, createMemo as le, onCleanup as me, Show as ce } from "solid-js";
+import { buildFloatingMiddleware as ue, resolvePlacement as de } from "../../../utils/floating.js";
+import { createFloating as ge } from "../../../primitives/createFloating.js";
+import { DataPickerHeader as fe } from "../datePicker/dataPickerHeader.js";
+import { DataPickerDays as he } from "../datePicker/dataPickerDays.js";
+import { DatePickerList as E } from "../datePicker/datePickerList.js";
+import { isValidDate as w, getMonths as pe, getYears as ve, setYear as be, setMonth as we } from "../datePicker/dateUtils.js";
+import { OpenView as r } from "../datePicker/openView.js";
+import { TimePickerColumns as De } from "../timePicker/timePickerColumns.js";
+import { isValidTimeDate as D, mergeTime as Ce, DEFAULT_TIME_FORMAT as ye, mergeDate as ke } from "../timePicker/timeUtils.js";
+import { DateTimePickerInput as _e } from "./dateTimePickerInput.js";
+import { mergeRefs as I } from "../../../primitives/mergeRefs.js";
+import { ClickAwayListener as Fe } from "../../clickAwayListener/clickAwayListener.js";
+var Me = /* @__PURE__ */ ie('<div class="smwb-date-picker smwb-date-time-picker"data-testid=date-time-picker role=dialog aria-modal=false style="transition:opacity 150ms ease-in-out"><div class="smwb-date-picker__inner smwb-date-time-picker__inner"><div class=smwb-date-time-picker__content><div class="smwb-date-picker__body smwb-date-time-picker__body">');
+const Te = 150;
+function qe(C) {
+  const [e, Y] = se(C, ["value", "onChange", "showDaysOutsideMonth", "disablePast", "disableFuture", "weekStartsOn", "placement", "disabled", "disableCalendar", "calendarAriaLabel", "minDate", "maxDate", "isDateDisabled", "locale", "format", "timeFormat", "calendarIcon", "onBlur", "ref"]), l = () => e.value === void 0 ? void 0 : new Date(e.value), f = l(), [o, m] = u(w(f) || D(f) ? f : /* @__PURE__ */ new Date()), [d, g] = u(r.days), [H, y] = u(!1);
+  let k, _;
+  const F = () => de(e.placement ?? "bottom-start"), h = ge({
+    placement: () => F().placement,
+    middleware: () => ue(F())
+  });
+  L(() => {
+    if (e.disabled) return;
+    const t = l();
+    m(w(t) || D(t) ? t : /* @__PURE__ */ new Date());
+  });
+  const $ = () => e.weekStartsOn ?? 1, x = (t) => {
+    m(t);
+  }, B = () => {
+    g(d() === r.months ? r.days : r.months);
+  }, R = () => {
+    g(d() === r.years ? r.days : r.years);
+  }, q = (t) => {
+    m(we(o(), t)), g(r.days);
+  }, U = (t) => {
+    m(be(o(), t)), g(r.days);
+  }, M = (t) => {
+    m(t), e.onChange?.(void 0, t, C);
+  }, j = (t, a) => {
+    if (!a) return;
+    const n = l(), v = D(n) ? n : o();
+    M(ke(a, v));
+  }, z = (t) => {
+    const a = l(), n = w(a) ? a : o();
+    M(Ce(n, t));
+  }, G = () => {
+    e.disabled || y((t) => !t);
+  }, J = (t) => {
+    const a = t.target;
+    _?.contains(a) || k?.contains(a) || y(!1);
+  }, K = () => e.timeFormat ? e.timeFormat : e.format?.includes("HH:mm:ss") ? "HH:mm:ss" : ye, N = le(() => pe(e.locale)), Q = ve((/* @__PURE__ */ new Date()).getFullYear(), 100), T = () => H() && !e.disabled && !e.disableCalendar, [V, O] = u(T()), [W, P] = u(!1);
+  let p, c;
+  L(() => {
+    T() ? (c !== void 0 && clearTimeout(c), O(!0), p = requestAnimationFrame(() => P(!0))) : (P(!1), V() && (c = setTimeout(() => O(!1), Te)));
+  }), me(() => {
+    p !== void 0 && cancelAnimationFrame(p), c !== void 0 && clearTimeout(c);
+  });
+  const X = () => {
+    switch (d()) {
+      case r.months:
+        return i(E, {
+          get value() {
+            return o().getMonth();
+          },
+          get items() {
+            return N();
+          },
+          onChange: q
+        });
+      case r.years:
+        return i(E, {
+          get value() {
+            return o().getFullYear();
+          },
+          items: Q,
+          onChange: U
+        });
+      default:
+        return i(he, {
+          get viewValue() {
+            return o();
+          },
+          get value() {
+            return l();
+          },
+          get showDaysOutsideMonth() {
+            return e.showDaysOutsideMonth;
+          },
+          onChange: j,
+          get disablePast() {
+            return e.disablePast;
+          },
+          get disableFuture() {
+            return e.disableFuture;
+          },
+          get weekStartsOn() {
+            return $();
+          },
+          get minDate() {
+            return e.minDate;
+          },
+          get maxDate() {
+            return e.maxDate;
+          },
+          get isDateDisabled() {
+            return e.isDateDisabled;
+          },
+          get locale() {
+            return e.locale;
+          }
+        });
+    }
+  };
+  return [i(_e, ee({
+    ref(t) {
+      var a = I(e.ref, h.setReference, (n) => k = n);
+      typeof a == "function" && a(t);
+    },
+    get value() {
+      return e.value;
+    },
+    get onChange() {
+      return e.onChange;
+    },
+    get onBlur() {
+      return e.onBlur;
+    },
+    onToggle: G,
+    get disabled() {
+      return e.disabled;
+    },
+    get disableCalendar() {
+      return e.disableCalendar;
+    },
+    get format() {
+      return e.format;
+    },
+    get calendarIcon() {
+      return e.calendarIcon;
+    }
+  }, Y)), i(ce, {
+    get when() {
+      return V();
+    },
+    get children() {
+      return i(te, {
+        get mount() {
+          return document.body;
+        },
+        get children() {
+          return i(Fe, {
+            onClickAway: J,
+            get children() {
+              var t = Me(), a = t.firstChild, n = a.firstChild, v = n.firstChild, S = I(h.setFloating, (s) => _ = s);
+              return typeof S == "function" && ae(S, t), b(a, i(fe, {
+                get viewValue() {
+                  return o();
+                },
+                get locale() {
+                  return e.locale;
+                },
+                get openView() {
+                  return d();
+                },
+                onChange: x,
+                onMonthLabelClick: B,
+                onYearLabelClick: R
+              }), n), b(v, X), b(n, i(De, {
+                get value() {
+                  return o();
+                },
+                get format() {
+                  return K();
+                },
+                onChange: z
+              }), null), re((s) => {
+                var Z = {
+                  ...h.floatingStyles(),
+                  opacity: W() ? 1 : 0
+                }, A = e.calendarAriaLabel ?? "Choose date and time";
+                return s.e = ne(t, Z, s.e), A !== s.t && oe(t, "aria-label", s.t = A), s;
+              }, {
+                e: void 0,
+                t: void 0
+              }), t;
+            }
+          });
+        }
+      });
+    }
+  })];
+}
+export {
+  qe as DateTimePicker
+};
+//# sourceMappingURL=dateTimePicker.js.map

package/dist/components/inputs/dateTimePicker/dateTimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateTimePicker.js","sources":["../../../../src/components/inputs/dateTimePicker/dateTimePicker.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal } 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={document.body}>\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"],"names":["FADE_MS","DateTimePicker","props","local","rest","splitProps","value","undefined","Date","initialValue","viewValue","setViewValue","createSignal","isValidDate","isValidTimeDate","openView","setOpenView","OpenView","days","isOpen","setIsOpen","anchorEl","popupEl","resolved","resolvePlacement","placement","floating","createFloating","middleware","buildFloatingMiddleware","createEffect","disabled","v","weekStartsOn","onViewValueChange","next","onMonthLabelClick","months","onYearLabelClick","years","onMonthChange","month","setMonth","onYearChange","year","setYear","emitChange","onChange","onDateChange","_event","date","timeSource","mergeDate","onTimeChange","timeDate","dateSource","mergeTime","onToggle","prev","onClickAway","event","target","contains","resolvedTimeFormat","timeFormat","format","includes","DEFAULT_TIME_FORMAT","createMemo","getMonths","locale","getYears","getFullYear","shouldOpen","disableCalendar","mounted","setMounted","shown","setShown","raf","timer","clearTimeout","requestAnimationFrame","setTimeout","onCleanup","cancelAnimationFrame","view","_$createComponent","DatePickerList","getMonth","items","DataPickerDays","showDaysOutsideMonth","disablePast","disableFuture","minDate","maxDate","isDateDisabled","DateTimePickerInput","_$mergeProps","ref","r$","_ref$","mergeRefs","setReference","el","onBlur","calendarIcon","Show","when","children","Portal","mount","document","body","ClickAwayListener","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","_ref$2","setFloating","_$use","_$insert","DataPickerHeader","TimePickerColumns","_$effect","_p$","_v$","floatingStyles","opacity","_v$2","calendarAriaLabel","e","_$style","t","_$setAttribute"],"mappings":"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"}

package/dist/components/inputs/dateTimePicker/dateTimePickerInput.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+import type { DateTimePickerProps } from "./dateTimePicker";
+export interface DateTimePickerInputProps extends Omit<DateTimePickerProps, "placement" | "onToggle"> {
+    onToggle: () => void;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function DateTimePickerInput(props: DateTimePickerInputProps): JSX.Element;
+export default DateTimePickerInput;

package/dist/components/inputs/dateTimePicker/dateTimePickerInput.js

@@ -0,0 +1,80 @@
+import { createComponent as n, mergeProps as u } from "solid-js/web";
+import { splitProps as d, Show as a } from "solid-js";
+import { DatePickerIconButton as c } from "../datePicker/datePickerIconButton.js";
+import { createDateTimeInput as g } from "./useDateTimeInput.js";
+import { mergeRefs as m } from "../../../primitives/mergeRefs.js";
+import { TextField as p } from "../textField/textField.js";
+import { Icon as f } from "../../base/icon/icon.js";
+function s(t) {
+  t.stopPropagation();
+}
+function P(t) {
+  const [e, l] = d(t, ["value", "onChange", "onBlur", "onToggle", "disabled", "disableCalendar", "calendarIcon", "format", "ref"]), r = g({
+    value: e.value,
+    onChange: e.onChange,
+    onBlur: e.onBlur,
+    format: e.format
+  });
+  return n(p, u({
+    ref(i) {
+      var o = m(e.ref, r.ref);
+      typeof o == "function" && o(i);
+    },
+    get value() {
+      return r.value();
+    },
+    get onChange() {
+      return r.onInput;
+    },
+    get onBlur() {
+      return r.onBlur;
+    },
+    get placeholder() {
+      return r.placeholder();
+    },
+    type: "tel",
+    get endAdornment() {
+      return n(a, {
+        get when() {
+          return !e.disableCalendar;
+        },
+        get children() {
+          return n(c, {
+            edge: "end",
+            onClick: () => e.onToggle(),
+            onMouseDown: s,
+            get disabled() {
+              return !!e.disabled;
+            },
+            "data-testid": "date-time-picker-icon-button",
+            get children() {
+              return n(a, {
+                get when() {
+                  return e.calendarIcon;
+                },
+                get fallback() {
+                  return n(f, {
+                    name: "event",
+                    fill: 1,
+                    weight: 500,
+                    size: 24
+                  });
+                },
+                get children() {
+                  return e.calendarIcon;
+                }
+              });
+            }
+          });
+        }
+      });
+    },
+    get disabled() {
+      return !!e.disabled;
+    }
+  }, l));
+}
+export {
+  P as DateTimePickerInput
+};
+//# sourceMappingURL=dateTimePickerInput.js.map

package/dist/components/inputs/dateTimePicker/dateTimePickerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateTimePickerInput.js","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"],"names":["stopPropagation","event","DateTimePickerInput","props","local","rest","splitProps","masked","createDateTimeInput","value","onChange","onBlur","format","_$createComponent","TextField","_$mergeProps","ref","r$","_ref$","mergeRefs","onInput","placeholder","type","endAdornment","Show","when","disableCalendar","children","DatePickerIconButton","edge","onClick","onToggle","onMouseDown","disabled","Boolean","calendarIcon","fallback","Icon","name","fill","weight","size"],"mappings":";;;;;;;AAaA,SAASA,EAAgBC,GAAoB;AAC3CA,EAAAA,EAAMD,gBAAAA;AACR;AAEO,SAASE,EAAoBC,GAA8C;AAChF,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CACtC,SACA,YACA,UACA,YACA,YACA,mBACA,gBACA,UACA,KAAK,CACN,GAEKI,IAASC,EAAoB;AAAA,IACjCC,OAAOL,EAAMK;AAAAA,IACbC,UAAUN,EAAMM;AAAAA,IAChBC,QAAQP,EAAMO;AAAAA,IACdC,QAAQR,EAAMQ;AAAAA,EAAAA,CACf;AAED,SAAAC,EACGC,GAASC,EAAA;AAAA,IAAAC,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAUf,EAAMY,KAAKT,EAAOS,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IACrCR,QAAK;AAAA,aAAEF,EAAOE,MAAAA;AAAAA,IAAO;AAAA,IAAA,IACrBC,WAAQ;AAAA,aAAEH,EAAOa;AAAAA,IAAO;AAAA,IAAA,IACxBT,SAAM;AAAA,aAAEJ,EAAOI;AAAAA,IAAM;AAAA,IAAA,IACrBU,cAAW;AAAA,aAAEd,EAAOc,YAAAA;AAAAA,IAAa;AAAA,IACjCC,MAAI;AAAA,IAAA,IACJC,eAAY;AAAA,aAAAV,EACTW,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAE,CAACrB,EAAMsB;AAAAA,QAAe;AAAA,QAAA,IAAAC,WAAA;AAAA,iBAAAd,EAC/Be,GAAoB;AAAA,YACnBC,MAAI;AAAA,YACJC,SAASA,MAAM1B,EAAM2B,SAAAA;AAAAA,YACrBC,aAAahC;AAAAA,YAAe,IAC5BiC,WAAQ;AAAA,qBAAEC,EAAQ9B,EAAM6B;AAAAA,YAAS;AAAA,YAAA,eAAA;AAAA,YAAA,IAAAN,WAAA;AAAA,qBAAAd,EAGhCW,GAAI;AAAA,gBAAA,IAACC,OAAI;AAAA,yBAAErB,EAAM+B;AAAAA,gBAAY;AAAA,gBAAA,IAAEC,WAAQ;AAAA,yBAAAvB,EAAGwB,GAAI;AAAA,oBAACC,MAAI;AAAA,oBAASC,MAAM;AAAA,oBAAGC,QAAQ;AAAA,oBAAKC,MAAM;AAAA,kBAAA,CAAE;AAAA,gBAAA;AAAA,gBAAA,IAAAd,WAAA;AAAA,yBACxFvB,EAAM+B;AAAAA,gBAAY;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,IAAA,IAK3BF,WAAQ;AAAA,aAAEC,EAAQ9B,EAAM6B;AAAAA,IAAS;AAAA,EAAA,GAC7B5B,CAAI,CAAA;AAGd;"}

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

@@ -0,0 +1,7 @@
+export { DateTimePicker, default } from "./dateTimePicker";
+export type { DateTimePickerProps } from "./dateTimePicker";
+export { DateTimePickerInput } from "./dateTimePickerInput";
+export type { DateTimePickerInputProps } from "./dateTimePickerInput";
+export { createDateTimeInput, getCurrentDateTimeFormat, getDisplayDateTime } from "./useDateTimeInput";
+export type { CreateDateTimeInputProps, DateTimeInputState } from "./useDateTimeInput";
+export { formatDateTimeByPattern, isDateTimePatternMatch, parseDateTimeByPattern, } from "./dateTimeFormat";

package/dist/components/inputs/dateTimePicker/useDateTimeInput.d.ts

@@ -0,0 +1,21 @@
+import { type Accessor } from "solid-js";
+export interface CreateDateTimeInputProps {
+    value?: Date | string | undefined;
+    onChange?: ((event?: Event, value?: Date) => void) | undefined;
+    onBlur?: ((event?: FocusEvent, value?: Date) => void) | undefined;
+    format?: string | undefined;
+}
+export interface DateTimeInputState {
+    value: Accessor<string>;
+    onInput: (event: InputEvent & {
+        currentTarget: HTMLInputElement;
+        target: Element;
+    }) => void;
+    onBlur: () => void;
+    ref: (el: HTMLInputElement) => void;
+    placeholder: Accessor<string>;
+}
+export declare function getDisplayDateTime(date: unknown, format?: string): string;
+export declare function getCurrentDateTimeFormat(format?: string): string;
+/** Solid port of useDateTimeInput — masked text input bound to a Date value. */
+export declare function createDateTimeInput(props: CreateDateTimeInputProps): DateTimeInputState;