@smwb/ui-solid 0.1.0

package/dist/components/inputs/textField/textField.js

@@ -0,0 +1,143 @@
+import { createComponent as y, use as A, spread as w, mergeProps as T, template as q } from "solid-js/web";
+import '../../../assets/styles/less/components/textField/textField.entry.css';/* empty css                                                             */
+import { mergeProps as z, splitProps as B, createSignal as d, createEffect as m, onMount as C } from "solid-js";
+import c from "clsx";
+import { isFilled as P } from "./utils.js";
+import { TextFieldWrapper as $ } from "./textFieldWrapper.js";
+import { mergeRefs as I } from "../../../primitives/mergeRefs.js";
+var S = /* @__PURE__ */ q("<input>");
+function H(a) {
+  const f = z({
+    variant: "outlined",
+    size: "medium",
+    type: "text"
+  }, a), [e, p] = B(f, ["label", "helperText", "variant", "size", "required", "class", "disabled", "value", "defaultValue", "onChange", "onFocus", "onBlur", "error", "name", "type", "readOnly", "placeholder", "fullWidth", "id", "startAdornment", "endAdornment", "inline", "autocomplete", "inputmode", "ref"]), [s, u] = d(!1), [g, b] = d(!1), l = e.value != null;
+  let n;
+  const i = (t) => {
+    const r = P(t);
+    b((o) => o === r ? o : r);
+  }, h = (t) => {
+    if (e.disabled) {
+      t.stopPropagation();
+      return;
+    }
+    const r = e.onFocus;
+    typeof r == "function" ? r(t) : Array.isArray(r) && r[0](r[1], t), u(!0);
+  }, v = (t) => {
+    l || i({
+      value: t.currentTarget.value
+    }), e.onBlur?.(t, a), u(!1);
+  }, _ = (t) => {
+    l || i({
+      value: t.currentTarget.value
+    }), e.onChange?.(t, a);
+  }, x = (t) => {
+    n && t.currentTarget === t.target && (t.preventDefault(), n.focus());
+  };
+  m(() => {
+    e.disabled && s() && u(!1);
+  }), C(() => i(n ? {
+    value: n.value
+  } : null)), m(() => {
+    l && i({
+      value: e.value
+    });
+  });
+  const F = () => c("smwb-text-field__input", (!e.label || e.inline) && "smwb-text-field__input--show-placeholder", e.startAdornment && "smwb-text-field__input--adornment-start", e.endAdornment && "smwb-text-field__input--adornment-end", e.inline && "smwb-text-field__input--inline");
+  return y($, {
+    get label() {
+      return e.label;
+    },
+    get helperText() {
+      return e.helperText;
+    },
+    get variant() {
+      return e.variant;
+    },
+    get disabled() {
+      return e.disabled;
+    },
+    get class() {
+      return c(e.class, e.size !== "medium" && `smwb-text-field_size-${e.size}`);
+    },
+    get error() {
+      return e.error;
+    },
+    get fullWidth() {
+      return e.fullWidth;
+    },
+    get isFilledState() {
+      return g();
+    },
+    get isFocused() {
+      return s();
+    },
+    get for() {
+      return e.id;
+    },
+    get shrink() {
+      return !!e.startAdornment;
+    },
+    onHolderMouseDown: x,
+    get startAdornment() {
+      return e.startAdornment;
+    },
+    get endAdornment() {
+      return e.endAdornment;
+    },
+    get inline() {
+      return e.inline;
+    },
+    get children() {
+      var t = S(), r = I(e.ref, (o) => n = o);
+      return typeof r == "function" && A(r, t), w(t, T(p, {
+        get type() {
+          return e.type;
+        },
+        get name() {
+          return e.name;
+        },
+        get readonly() {
+          return e.readOnly;
+        },
+        get required() {
+          return e.required;
+        },
+        get "aria-invalid"() {
+          return e.error || void 0;
+        },
+        get "aria-required"() {
+          return e.required || void 0;
+        },
+        get placeholder() {
+          return e.placeholder;
+        },
+        get disabled() {
+          return e.disabled;
+        },
+        get value() {
+          return l ? e.value : e.defaultValue ?? "";
+        },
+        get class() {
+          return F();
+        },
+        onInput: _,
+        onFocus: h,
+        onBlur: v,
+        get id() {
+          return e.id;
+        },
+        get autocomplete() {
+          return e.autocomplete;
+        },
+        get inputmode() {
+          return e.inputmode;
+        }
+      }), !1, !1), t;
+    }
+  });
+}
+export {
+  H as TextField
+};
+//# sourceMappingURL=textField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textField.js","sources":["../../../../src/components/inputs/textField/textField.tsx"],"sourcesContent":["import { type JSX, createEffect, createSignal, mergeProps, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { isFilled } from \"./utils\";\nimport { TextFieldWrapper } from \"./textFieldWrapper\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\ntype FocusEvt = FocusEvent & { currentTarget: HTMLInputElement; target: Element };\ntype InputEvt = InputEvent & { currentTarget: HTMLInputElement; target: Element };\n\nexport interface TextFieldProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"onBlur\" | \"size\"> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: \"outlined\" | \"filled\";\n  size?: \"small\" | \"medium\" | \"large\";\n  required?: boolean;\n  disabled?: boolean | undefined;\n  value?: string | number | undefined;\n  placeholder?: string;\n  defaultValue?: string;\n  error?: boolean;\n  name?: string;\n  type?: string;\n  readOnly?: boolean;\n  fullWidth?: boolean;\n  onBlur?: (event: FocusEvt, data: TextFieldProps) => void;\n  onChange?: (event: InputEvt, data: TextFieldProps) => void;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  id?: string;\n  inline?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function TextField(props: TextFieldProps): JSX.Element {\n  const merged = mergeProps({ variant: \"outlined\" as const, size: \"medium\" as const, type: \"text\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"size\",\n    \"required\",\n    \"class\",\n    \"disabled\",\n    \"value\",\n    \"defaultValue\",\n    \"onChange\",\n    \"onFocus\",\n    \"onBlur\",\n    \"error\",\n    \"name\",\n    \"type\",\n    \"readOnly\",\n    \"placeholder\",\n    \"fullWidth\",\n    \"id\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n    \"autocomplete\",\n    \"inputmode\",\n    \"ref\",\n  ]);\n\n  const [isFocused, setIsFocused] = createSignal(false);\n  const [isFilledState, setIsFilledState] = createSignal(false);\n\n  // One-time snapshot of controlled-ness, matching the React useRef behaviour.\n  const isControlled = local.value != null;\n  let inputEl: HTMLInputElement | undefined;\n\n  const checkDirty = (obj: Parameters<typeof isFilled>[0]): void => {\n    const filled = isFilled(obj);\n    setIsFilledState((prev) => (prev === filled ? prev : filled));\n  };\n\n  const onFocus = (event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }): void => {\n    if (local.disabled) {\n      event.stopPropagation();\n      return;\n    }\n    // local.onFocus is Solid's FocusEventHandlerUnion (function or [handler, data]).\n    const handler = local.onFocus as unknown;\n    if (typeof handler === \"function\") {\n      (handler as (e: typeof event) => void)(event);\n    } else if (Array.isArray(handler)) {\n      (handler[0] as (data: unknown, e: typeof event) => void)(handler[1], event);\n    }\n    setIsFocused(true);\n  };\n\n  const onBlur: JSX.EventHandler<HTMLInputElement, FocusEvent> = (event) => {\n    if (!isControlled) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onBlur?.(event as FocusEvt, props);\n    setIsFocused(false);\n  };\n\n  const onInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (event) => {\n    if (!isControlled) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onChange?.(event as InputEvt, props);\n  };\n\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (inputEl && event.currentTarget === event.target) {\n      event.preventDefault();\n      inputEl.focus();\n    }\n  };\n\n  createEffect(() => {\n    if (local.disabled && isFocused()) {\n      setIsFocused(false);\n    }\n  });\n\n  onMount(() => checkDirty(inputEl ? { value: inputEl.value } : null));\n\n  createEffect(() => {\n    if (isControlled) {\n      checkDirty({ value: local.value });\n    }\n  });\n\n  const inputClasses = (): string =>\n    cn(\n      \"smwb-text-field__input\",\n      (!local.label || local.inline) && \"smwb-text-field__input--show-placeholder\",\n      local.startAdornment && \"smwb-text-field__input--adornment-start\",\n      local.endAdornment && \"smwb-text-field__input--adornment-end\",\n      local.inline && \"smwb-text-field__input--inline\"\n    );\n\n  return (\n    <TextFieldWrapper\n      label={local.label}\n      helperText={local.helperText}\n      variant={local.variant}\n      disabled={local.disabled}\n      class={cn(local.class, local.size !== \"medium\" && `smwb-text-field_size-${local.size}`)}\n      error={local.error}\n      fullWidth={local.fullWidth}\n      isFilledState={isFilledState()}\n      isFocused={isFocused()}\n      for={local.id}\n      shrink={Boolean(local.startAdornment)}\n      onHolderMouseDown={onHolderMouseDown}\n      startAdornment={local.startAdornment}\n      endAdornment={local.endAdornment}\n      inline={local.inline}\n    >\n      <input\n        {...rest}\n        type={local.type}\n        name={local.name}\n        readonly={local.readOnly}\n        required={local.required}\n        aria-invalid={local.error || undefined}\n        aria-required={local.required || undefined}\n        placeholder={local.placeholder}\n        disabled={local.disabled}\n        value={isControlled ? local.value : (local.defaultValue ?? \"\")}\n        class={inputClasses()}\n        ref={mergeRefs(local.ref, (el) => (inputEl = el))}\n        onInput={onInput}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        id={local.id}\n        autocomplete={local.autocomplete}\n        inputmode={local.inputmode}\n      />\n    </TextFieldWrapper>\n  );\n}\n\nexport default TextField;\n"],"names":["TextField","props","merged","mergeProps","variant","size","type","local","rest","splitProps","isFocused","setIsFocused","createSignal","isFilledState","setIsFilledState","isControlled","value","inputEl","checkDirty","obj","filled","isFilled","prev","onFocus","event","disabled","stopPropagation","handler","Array","isArray","onBlur","currentTarget","onInput","onChange","onHolderMouseDown","target","preventDefault","focus","createEffect","onMount","inputClasses","cn","label","inline","startAdornment","endAdornment","_$createComponent","TextFieldWrapper","helperText","class","error","fullWidth","id","shrink","Boolean","children","_el$","_tmpl$","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","name","readonly","readOnly","required","undefined","placeholder","defaultValue","autocomplete","inputmode"],"mappings":"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"}

package/dist/components/inputs/textField/textFieldAdornment.d.ts

@@ -0,0 +1,12 @@
+import { type JSX } from "solid-js";
+import type { TextFieldVariant } from "./types";
+export interface TextFieldAdornmentProps {
+    position?: "start" | "end";
+    disablePointerEvents?: boolean;
+    variant?: TextFieldVariant | undefined;
+    inline?: boolean;
+    class?: string;
+    children?: JSX.Element;
+}
+export declare function TextFieldAdornment(props: TextFieldAdornmentProps): JSX.Element;
+export default TextFieldAdornment;

package/dist/components/inputs/textField/textFieldAdornment.js

@@ -0,0 +1,15 @@
+import { insert as i, effect as r, className as l, template as o } from "solid-js/web";
+import { splitProps as s } from "solid-js";
+import a from "clsx";
+var d = /* @__PURE__ */ o("<span>");
+function _(n) {
+  const [t] = s(n, ["position", "variant", "children", "class", "disablePointerEvents", "inline"]);
+  return (() => {
+    var e = d();
+    return i(e, () => t.children), r(() => l(e, a("smwb-text-field__adornment", t.class, t.position === "start" && "smwb-text-field__adornment--start", t.position === "end" && "smwb-text-field__adornment--end", t.disablePointerEvents && "smwb-text-field__adornment--disable-pointer", !t.inline && t.variant === "filled" && "smwb-text-field__adornment--filled", typeof t.children == "string" && "smwb-text-field__adornment--text"))), e;
+  })();
+}
+export {
+  _ as TextFieldAdornment
+};
+//# sourceMappingURL=textFieldAdornment.js.map

package/dist/components/inputs/textField/textFieldAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textFieldAdornment.js","sources":["../../../../src/components/inputs/textField/textFieldAdornment.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport type { TextFieldVariant } from \"./types\";\n\nexport interface TextFieldAdornmentProps {\n  position?: \"start\" | \"end\";\n  disablePointerEvents?: boolean;\n  variant?: TextFieldVariant | undefined;\n  inline?: boolean;\n  class?: string;\n  children?: JSX.Element;\n}\n\nexport function TextFieldAdornment(props: TextFieldAdornmentProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"position\",\n    \"variant\",\n    \"children\",\n    \"class\",\n    \"disablePointerEvents\",\n    \"inline\",\n  ]);\n\n  return (\n    <span\n      class={cn(\n        \"smwb-text-field__adornment\",\n        local.class,\n        local.position === \"start\" && \"smwb-text-field__adornment--start\",\n        local.position === \"end\" && \"smwb-text-field__adornment--end\",\n        local.disablePointerEvents && \"smwb-text-field__adornment--disable-pointer\",\n        !local.inline && local.variant === \"filled\" && \"smwb-text-field__adornment--filled\",\n        typeof local.children === \"string\" && \"smwb-text-field__adornment--text\"\n      )}\n    >\n      {local.children}\n    </span>\n  );\n}\n\nexport default TextFieldAdornment;\n"],"names":["TextFieldAdornment","props","local","splitProps","_el$","_tmpl$","_$insert","children","_$effect","_$className","cn","class","position","disablePointerEvents","inline","variant"],"mappings":";;;;AAaO,SAASA,EAAmBC,GAA6C;AAC9E,QAAM,CAACC,CAAK,IAAIC,EAAWF,GAAO,CAChC,YACA,WACA,YACA,SACA,wBACA,QAAQ,CACT;AAED,UAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAA,MAYKF,EAAMK,QAAQ,GAAAC,EAAA,MAAAC,EAAAL,GAVRM,EACL,8BACAR,EAAMS,OACNT,EAAMU,aAAa,WAAW,qCAC9BV,EAAMU,aAAa,SAAS,mCAC5BV,EAAMW,wBAAwB,+CAC9B,CAACX,EAAMY,UAAUZ,EAAMa,YAAY,YAAY,sCAC/C,OAAOb,EAAMK,YAAa,YAAY,kCACxC,CAAC,CAAA,GAAAH;AAAAA,EAAA,GAAA;AAKP;"}

package/dist/components/inputs/textField/textFieldWrapper.d.ts

@@ -0,0 +1,21 @@
+import { type JSX } from "solid-js";
+import type { TextFieldVariant } from "./types";
+export interface TextFieldWrapperProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    label?: string | undefined;
+    helperText?: JSX.Element;
+    variant?: TextFieldVariant | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    isFilledState?: boolean | undefined;
+    isFocused?: boolean | undefined;
+    for?: string | undefined;
+    shrink?: boolean | undefined;
+    onHolderMouseDown?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;
+    startAdornment?: JSX.Element;
+    endAdornment?: JSX.Element;
+    inline?: boolean | undefined;
+    children?: JSX.Element;
+}
+export declare function TextFieldWrapper(props: TextFieldWrapperProps): JSX.Element;
+export default TextFieldWrapper;

package/dist/components/inputs/textField/textFieldWrapper.js

@@ -0,0 +1,105 @@
+import { spread as g, mergeProps as $, insert as l, createComponent as n, effect as b, className as w, setAttribute as A, memo as m, addEventListener as F, template as s, delegateEvents as T } from "solid-js/web";
+import { splitProps as k, Show as d } from "solid-js";
+import u from "clsx";
+import { TextFieldAdornment as _ } from "./textFieldAdornment.js";
+var C = /* @__PURE__ */ s("<label>"), S = /* @__PURE__ */ s("<span>"), W = /* @__PURE__ */ s("<fieldset><legend>"), D = /* @__PURE__ */ s("<p class=smwb-text-field__helper-line><span class=smwb-text-field__helper-text>"), E = /* @__PURE__ */ s("<div><div class=smwb-text-field__input-holder>"), H = /* @__PURE__ */ s("<span class=smwb-notranslate>&#8203;");
+function L(p) {
+  const [e, x] = k(p, ["label", "helperText", "variant", "disabled", "class", "error", "fullWidth", "isFilledState", "isFocused", "for", "shrink", "children", "onHolderMouseDown", "startAdornment", "endAdornment", "inline"]), c = () => e.helperText ?? " ", v = () => e.variant === "filled", f = () => !!e.label && (!!e.isFilledState || !!e.isFocused || !!e.shrink);
+  return (() => {
+    var a = E(), i = a.firstChild;
+    return g(a, $(x, {
+      get class() {
+        return u(e.class, "smwb-text-field", {
+          "smwb-text-field--filled": !e.inline && v(),
+          "smwb-text-field--inline": e.inline,
+          "smwb-text-field--focused": !e.inline && e.isFocused,
+          "smwb-text-field--error": e.error,
+          "smwb-text-field--disabled": e.disabled,
+          "smwb-text-field--full-width": e.fullWidth
+        });
+      },
+      "data-testid": "text-field"
+    }), !1, !0), l(a, n(d, {
+      get when() {
+        return m(() => !e.inline)() && e.label;
+      },
+      get children() {
+        var t = C();
+        return l(t, () => e.label), b((r) => {
+          var o = u("smwb-text-field__label", {
+            "smwb-text-field__label--shrink": f()
+          }), h = e.for || "";
+          return o !== r.e && w(t, r.e = o), h !== r.t && A(t, "for", r.t = h), r;
+        }, {
+          e: void 0,
+          t: void 0
+        }), t;
+      }
+    }), i), F(i, "mousedown", e.onHolderMouseDown, !0), l(i, n(d, {
+      get when() {
+        return e.startAdornment;
+      },
+      get children() {
+        return n(_, {
+          get variant() {
+            return e.variant;
+          },
+          get inline() {
+            return !!e.inline;
+          },
+          position: "start",
+          get children() {
+            return e.startAdornment;
+          }
+        });
+      }
+    }), null), l(i, () => e.children, null), l(i, n(d, {
+      get when() {
+        return e.endAdornment;
+      },
+      get children() {
+        return n(_, {
+          position: "end",
+          get children() {
+            return e.endAdornment;
+          }
+        });
+      }
+    }), null), l(i, n(d, {
+      get when() {
+        return m(() => !e.inline)() && e.variant === "outlined";
+      },
+      get children() {
+        var t = W(), r = t.firstChild;
+        return l(r, n(d, {
+          get when() {
+            return e.label;
+          },
+          get fallback() {
+            return H();
+          },
+          get children() {
+            var o = S();
+            return l(o, () => e.label), o;
+          }
+        })), b(() => w(t, u("smwb-text-field__notched", {
+          "smwb-text-field__notched--with-label": e.label,
+          "smwb-text-field__notched--active": f()
+        }))), t;
+      }
+    }), null), l(a, n(d, {
+      get when() {
+        return m(() => !e.inline)() && c();
+      },
+      get children() {
+        var t = D(), r = t.firstChild;
+        return l(r, c), t;
+      }
+    }), null), a;
+  })();
+}
+T(["mousedown"]);
+export {
+  L as TextFieldWrapper
+};
+//# sourceMappingURL=textFieldWrapper.js.map

package/dist/components/inputs/textField/textFieldWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textFieldWrapper.js","sources":["../../../../src/components/inputs/textField/textFieldWrapper.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldAdornment } from \"./textFieldAdornment\";\nimport type { TextFieldVariant } from \"./types\";\n\nexport interface TextFieldWrapperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: TextFieldVariant | undefined;\n  disabled?: boolean | undefined;\n  error?: boolean | undefined;\n  fullWidth?: boolean | undefined;\n  isFilledState?: boolean | undefined;\n  isFocused?: boolean | undefined;\n  for?: string | undefined;\n  shrink?: boolean | undefined;\n  onHolderMouseDown?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  inline?: boolean | undefined;\n  children?: JSX.Element;\n}\n\nexport function TextFieldWrapper(props: TextFieldWrapperProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"disabled\",\n    \"class\",\n    \"error\",\n    \"fullWidth\",\n    \"isFilledState\",\n    \"isFocused\",\n    \"for\",\n    \"shrink\",\n    \"children\",\n    \"onHolderMouseDown\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n  ]);\n\n  const helperText = (): JSX.Element => local.helperText ?? \" \";\n  const isFilledVariant = (): boolean => local.variant === \"filled\";\n  const isNotchedActive = (): boolean =>\n    !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);\n\n  return (\n    <div\n      {...rest}\n      class={cn(local.class, \"smwb-text-field\", {\n        \"smwb-text-field--filled\": !local.inline && isFilledVariant(),\n        \"smwb-text-field--inline\": local.inline,\n        \"smwb-text-field--focused\": !local.inline && local.isFocused,\n        \"smwb-text-field--error\": local.error,\n        \"smwb-text-field--disabled\": local.disabled,\n        \"smwb-text-field--full-width\": local.fullWidth,\n      })}\n      data-testid=\"text-field\"\n    >\n      <Show when={!local.inline && local.label}>\n        <label\n          class={cn(\"smwb-text-field__label\", { \"smwb-text-field__label--shrink\": isNotchedActive() })}\n          for={local.for || \"\"}\n        >\n          {local.label}\n        </label>\n      </Show>\n      <div class=\"smwb-text-field__input-holder\" onMouseDown={local.onHolderMouseDown}>\n        <Show when={local.startAdornment}>\n          <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position=\"start\">\n            {local.startAdornment}\n          </TextFieldAdornment>\n        </Show>\n        {local.children}\n        <Show when={local.endAdornment}>\n          <TextFieldAdornment position=\"end\">{local.endAdornment}</TextFieldAdornment>\n        </Show>\n        <Show when={!local.inline && local.variant === \"outlined\"}>\n          <fieldset\n            class={cn(\"smwb-text-field__notched\", {\n              \"smwb-text-field__notched--with-label\": local.label,\n              \"smwb-text-field__notched--active\": isNotchedActive(),\n            })}\n          >\n            <legend>\n              <Show when={local.label} fallback={<span class=\"smwb-notranslate\">&#8203;</span>}>\n                <span>{local.label}</span>\n              </Show>\n            </legend>\n          </fieldset>\n        </Show>\n      </div>\n      <Show when={!local.inline && helperText()}>\n        <p class=\"smwb-text-field__helper-line\">\n          <span class=\"smwb-text-field__helper-text\">{helperText()}</span>\n        </p>\n      </Show>\n    </div>\n  );\n}\n\nexport default TextFieldWrapper;\n"],"names":["TextFieldWrapper","props","local","rest","splitProps","helperText","isFilledVariant","variant","isNotchedActive","label","isFilledState","isFocused","shrink","_el$","_tmpl$5","_el$3","firstChild","_$spread","_$mergeProps","cn","class","inline","error","disabled","fullWidth","_$insert","_$createComponent","Show","when","_$memo","children","_el$2","_tmpl$","_$effect","_p$","_v$","_v$2","for","e","_$className","t","_$setAttribute","undefined","_$addEventListener","onHolderMouseDown","startAdornment","TextFieldAdornment","Boolean","position","endAdornment","_el$4","_tmpl$3","_el$5","fallback","_tmpl$6","_el$6","_tmpl$2","_el$7","_tmpl$4","_el$8","_$delegateEvents"],"mappings":"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"}

package/dist/components/inputs/textField/types.d.ts

@@ -0,0 +1 @@
+export type TextFieldVariant = "outlined" | "filled";

package/dist/components/inputs/textField/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function hasValue(value: unknown): boolean;
+export declare function isFilled(obj?: {
+    value?: unknown;
+    defaultValue?: unknown;
+} | null): boolean;

package/dist/components/inputs/textField/utils.js

@@ -0,0 +1,11 @@
+function l(e) {
+  return e != null && !(Array.isArray(e) && e.length === 0);
+}
+function u(e) {
+  return !!(e && (l(e.value) && e.value !== "" || l(e.defaultValue) && e.defaultValue !== ""));
+}
+export {
+  l as hasValue,
+  u as isFilled
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/inputs/textField/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/inputs/textField/utils.ts"],"sourcesContent":["export function hasValue(value: unknown): boolean {\n  return value != null && !(Array.isArray(value) && value.length === 0);\n}\n\nexport function isFilled(obj?: { value?: unknown; defaultValue?: unknown } | null): boolean {\n  return Boolean(\n    obj && ((hasValue(obj.value) && obj.value !== \"\") || (hasValue(obj.defaultValue) && obj.defaultValue !== \"\"))\n  );\n}\n"],"names":["hasValue","value","isFilled","obj"],"mappings":"AAAO,SAASA,EAASC,GAAyB;AAChD,SAAOA,KAAS,QAAQ,EAAE,MAAM,QAAQA,CAAK,KAAKA,EAAM,WAAW;AACrE;AAEO,SAASC,EAASC,GAAmE;AAC1F,SAAO,GACLA,MAASH,EAASG,EAAI,KAAK,KAAKA,EAAI,UAAU,MAAQH,EAASG,EAAI,YAAY,KAAKA,EAAI,iBAAiB;AAE7G;"}

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

@@ -0,0 +1,9 @@
+export { TimePicker, default } from "./timePicker";
+export type { TimePickerProps } from "./timePicker";
+export { TimePickerInput } from "./timePickerInput";
+export type { TimePickerInputProps } from "./timePickerInput";
+export { TimePickerColumns } from "./timePickerColumns";
+export type { TimePickerColumnsProps } from "./timePickerColumns";
+export { createTimeInput } from "./useTimeInput";
+export type { CreateTimeInputProps, TimeInputState } from "./useTimeInput";
+export { DEFAULT_TIME_FORMAT } from "./timeUtils";

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

@@ -0,0 +1,4 @@
+export declare function patternHasSeconds(pattern: string): boolean;
+export declare function formatTimeByPattern(date: Date, pattern: string): string;
+export declare function parseTimeByPattern(value: string, pattern: string): Date | undefined;
+export declare function isTimePatternMatch(value: string, pattern: string): boolean;

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

@@ -0,0 +1,58 @@
+const c = /HH|mm|ss/g;
+function f(e) {
+  const t = [];
+  let n;
+  for (c.lastIndex = 0; (n = c.exec(e)) !== null; )
+    t.push(n[0]);
+  return t;
+}
+function d(e) {
+  return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function g(e) {
+  let t = "^", n = 0, r;
+  for (c.lastIndex = 0; (r = c.exec(e)) !== null; )
+    t += d(e.slice(n, r.index)), t += "(\\d{2})", n = c.lastIndex;
+  return t += d(e.slice(n)), t += "$", new RegExp(t);
+}
+function x(e, t, n) {
+  return e >= 0 && e <= 23 && t >= 0 && t <= 59 && n >= 0 && n <= 59;
+}
+function h(e) {
+  return f(e).includes("ss");
+}
+function H(e, t) {
+  const n = e.getHours(), r = e.getMinutes(), s = e.getSeconds();
+  return t.replace(c, (i) => i === "HH" ? String(n).padStart(2, "0") : i === "mm" ? String(r).padStart(2, "0") : String(s).padStart(2, "0"));
+}
+function p(e, t) {
+  const n = f(t);
+  if (!n.includes("HH") || !n.includes("mm")) return;
+  const r = g(t).exec(e);
+  if (!r) return;
+  let s, i, u = 0;
+  if (n.forEach((l, m) => {
+    const a = Number(r[m + 1]);
+    if (l === "HH") {
+      s = a;
+      return;
+    }
+    if (l === "mm") {
+      i = a;
+      return;
+    }
+    u = a;
+  }), s === void 0 || i === void 0 || !x(s, i, u)) return;
+  const o = /* @__PURE__ */ new Date();
+  return new Date(o.getFullYear(), o.getMonth(), o.getDate(), s, i, u);
+}
+function E(e, t) {
+  return p(e, t) !== void 0;
+}
+export {
+  H as formatTimeByPattern,
+  E as isTimePatternMatch,
+  p as parseTimeByPattern,
+  h as patternHasSeconds
+};
+//# sourceMappingURL=timeFormat.js.map

package/dist/components/inputs/timePicker/timeFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeFormat.js","sources":["../../../../src/components/inputs/timePicker/timeFormat.ts"],"sourcesContent":["const TIME_TOKEN_REGEXP = /HH|mm|ss/g;\n\ntype TimeToken = \"HH\" | \"mm\" | \"ss\";\n\nfunction extractTokens(pattern: string): TimeToken[] {\n  const tokens: TimeToken[] = [];\n  let match: RegExpExecArray | null;\n  TIME_TOKEN_REGEXP.lastIndex = 0;\n  while ((match = TIME_TOKEN_REGEXP.exec(pattern)) !== null) {\n    tokens.push(match[0] as TimeToken);\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  TIME_TOKEN_REGEXP.lastIndex = 0;\n  while ((match = TIME_TOKEN_REGEXP.exec(pattern)) !== null) {\n    regex += escapeRegExp(pattern.slice(lastIndex, match.index));\n    regex += \"(\\\\d{2})\";\n    lastIndex = TIME_TOKEN_REGEXP.lastIndex;\n  }\n  regex += escapeRegExp(pattern.slice(lastIndex));\n  regex += \"$\";\n  return new RegExp(regex);\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 patternHasSeconds(pattern: string): boolean {\n  return extractTokens(pattern).includes(\"ss\");\n}\n\nexport function formatTimeByPattern(date: Date, pattern: string): string {\n  const hours = date.getHours();\n  const minutes = date.getMinutes();\n  const seconds = date.getSeconds();\n  return pattern.replace(TIME_TOKEN_REGEXP, (token) => {\n    if (token === \"HH\") return String(hours).padStart(2, \"0\");\n    if (token === \"mm\") return String(minutes).padStart(2, \"0\");\n    return String(seconds).padStart(2, \"0\");\n  });\n}\n\nexport function parseTimeByPattern(value: string, pattern: string): Date | undefined {\n  const tokens = extractTokens(pattern);\n  if (!tokens.includes(\"HH\") || !tokens.includes(\"mm\")) return undefined;\n  const match = patternToRegExp(pattern).exec(value);\n  if (!match) return undefined;\n\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    if (token === \"HH\") {\n      hours = part;\n      return;\n    }\n    if (token === \"mm\") {\n      minutes = part;\n      return;\n    }\n    seconds = part;\n  });\n\n  if (hours === undefined || minutes === undefined) return undefined;\n  if (!isValidTime(hours, minutes, seconds)) return undefined;\n\n  const now = new Date();\n  return new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, seconds);\n}\n\nexport function isTimePatternMatch(value: string, pattern: string): boolean {\n  return parseTimeByPattern(value, pattern) !== undefined;\n}\n"],"names":["TIME_TOKEN_REGEXP","extractTokens","pattern","tokens","match","escapeRegExp","value","patternToRegExp","regex","lastIndex","isValidTime","hours","minutes","seconds","patternHasSeconds","formatTimeByPattern","date","token","parseTimeByPattern","index","part","now","isTimePatternMatch"],"mappings":"AAAA,MAAMA,IAAoB;AAI1B,SAASC,EAAcC,GAA8B;AACnD,QAAMC,IAAsB,CAAA;AAC5B,MAAIC;AAEJ,OADAJ,EAAkB,YAAY,IACtBI,IAAQJ,EAAkB,KAAKE,CAAO,OAAO;AACnD,IAAAC,EAAO,KAAKC,EAAM,CAAC,CAAc;AAEnC,SAAOD;AACT;AAEA,SAASE,EAAaC,GAAuB;AAC3C,SAAOA,EAAM,QAAQ,uBAAuB,MAAM;AACpD;AAEA,SAASC,EAAgBL,GAAyB;AAChD,MAAIM,IAAQ,KACRC,IAAY,GACZL;AAEJ,OADAJ,EAAkB,YAAY,IACtBI,IAAQJ,EAAkB,KAAKE,CAAO,OAAO;AACnD,IAAAM,KAASH,EAAaH,EAAQ,MAAMO,GAAWL,EAAM,KAAK,CAAC,GAC3DI,KAAS,YACTC,IAAYT,EAAkB;AAEhC,SAAAQ,KAASH,EAAaH,EAAQ,MAAMO,CAAS,CAAC,GAC9CD,KAAS,KACF,IAAI,OAAOA,CAAK;AACzB;AAEA,SAASE,EAAYC,GAAeC,GAAiBC,GAA0B;AAC7E,SAAOF,KAAS,KAAKA,KAAS,MAAMC,KAAW,KAAKA,KAAW,MAAMC,KAAW,KAAKA,KAAW;AAClG;AAEO,SAASC,EAAkBZ,GAA0B;AAC1D,SAAOD,EAAcC,CAAO,EAAE,SAAS,IAAI;AAC7C;AAEO,SAASa,EAAoBC,GAAYd,GAAyB;AACvE,QAAMS,IAAQK,EAAK,SAAA,GACbJ,IAAUI,EAAK,WAAA,GACfH,IAAUG,EAAK,WAAA;AACrB,SAAOd,EAAQ,QAAQF,GAAmB,CAACiB,MACrCA,MAAU,OAAa,OAAON,CAAK,EAAE,SAAS,GAAG,GAAG,IACpDM,MAAU,OAAa,OAAOL,CAAO,EAAE,SAAS,GAAG,GAAG,IACnD,OAAOC,CAAO,EAAE,SAAS,GAAG,GAAG,CACvC;AACH;AAEO,SAASK,EAAmBZ,GAAeJ,GAAmC;AACnF,QAAMC,IAASF,EAAcC,CAAO;AACpC,MAAI,CAACC,EAAO,SAAS,IAAI,KAAK,CAACA,EAAO,SAAS,IAAI,EAAG;AACtD,QAAMC,IAAQG,EAAgBL,CAAO,EAAE,KAAKI,CAAK;AACjD,MAAI,CAACF,EAAO;AAEZ,MAAIO,GACAC,GACAC,IAAU;AAgBd,MAdAV,EAAO,QAAQ,CAACc,GAAOE,MAAU;AAC/B,UAAMC,IAAO,OAAOhB,EAAMe,IAAQ,CAAC,CAAC;AACpC,QAAIF,MAAU,MAAM;AAClB,MAAAN,IAAQS;AACR;AAAA,IACF;AACA,QAAIH,MAAU,MAAM;AAClB,MAAAL,IAAUQ;AACV;AAAA,IACF;AACA,IAAAP,IAAUO;AAAA,EACZ,CAAC,GAEGT,MAAU,UAAaC,MAAY,UACnC,CAACF,EAAYC,GAAOC,GAASC,CAAO,EAAG;AAE3C,QAAMQ,wBAAU,KAAA;AAChB,SAAO,IAAI,KAAKA,EAAI,YAAA,GAAeA,EAAI,YAAYA,EAAI,QAAA,GAAWV,GAAOC,GAASC,CAAO;AAC3F;AAEO,SAASS,EAAmBhB,GAAeJ,GAA0B;AAC1E,SAAOgB,EAAmBZ,GAAOJ,CAAO,MAAM;AAChD;"}

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

@@ -0,0 +1,19 @@
+import { type JSX } from "solid-js";
+import { type Placement } from "../../../utils/floating";
+import { type Ref } from "../../../primitives/mergeRefs";
+import type { TextFieldProps } from "../textField";
+export interface TimePickerProps extends Omit<TextFieldProps, "onBlur" | "onChange" | "value" | "defaultValue" | "ref" | "onToggle"> {
+    /** Time format pattern with tokens HH, mm, ss, e.g. "HH:mm" or "HH:mm:ss". */
+    format?: string | undefined;
+    placement?: Placement | undefined;
+    disableClock?: boolean | undefined;
+    label?: string | undefined;
+    clockAriaLabel?: string | undefined;
+    value?: Date | string | undefined;
+    clockIcon?: JSX.Element;
+    onChange?: ((event?: Event, value?: Date, data?: TimePickerProps) => void) | undefined;
+    onBlur?: ((event?: FocusEvent, value?: Date, data?: TimePickerProps) => void) | undefined;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function TimePicker(props: TimePickerProps): JSX.Element;
+export default TimePicker;

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

@@ -0,0 +1,109 @@
+import { createComponent as a, mergeProps as L, Portal as M, use as O, insert as $, effect as I, style as R, setAttribute as q, template as j } from "solid-js/web";
+import '../../../assets/styles/less/components/timePicker/timePicker.entry.css';/* empty css                                                               */
+import { splitProps as x, createSignal as l, createEffect as y, onCleanup as z, Show as G } from "solid-js";
+import { buildFloatingMiddleware as H, resolvePlacement as J } from "../../../utils/floating.js";
+import { createFloating as K } from "../../../primitives/createFloating.js";
+import { TimePickerInput as N } from "./timePickerInput.js";
+import { TimePickerColumns as Q } from "./timePickerColumns.js";
+import { isValidTimeDate as T } from "./timeUtils.js";
+import { mergeRefs as A } from "../../../primitives/mergeRefs.js";
+import { ClickAwayListener as U } from "../../clickAwayListener/clickAwayListener.js";
+var W = /* @__PURE__ */ j('<div class="smwb-date-picker smwb-time-picker"data-testid=time-picker role=dialog aria-modal=false style="transition:opacity 150ms ease-in-out"><div class=smwb-date-picker__inner>');
+const X = 150;
+function se(f) {
+  const [e, P] = x(f, ["value", "onChange", "placement", "disabled", "disableClock", "clockAriaLabel", "format", "onBlur", "ref"]), s = () => e.value === void 0 ? void 0 : new Date(e.value), [F, d] = l(T(s()) ? s() : /* @__PURE__ */ new Date()), [_, c] = l(!1);
+  let g, p;
+  const v = () => J(e.placement ?? "bottom-start"), m = K({
+    placement: () => v().placement,
+    middleware: () => H(v())
+  });
+  y(() => {
+    if (e.disabled) return;
+    const t = s();
+    d(T(t) ? t : /* @__PURE__ */ new Date());
+  });
+  const b = () => _() && !e.disabled && !e.disableClock, [C, h] = l(b()), [D, k] = l(!1);
+  let u, n;
+  y(() => {
+    b() ? (n !== void 0 && clearTimeout(n), h(!0), u = requestAnimationFrame(() => k(!0))) : (k(!1), C() && (n = setTimeout(() => h(!1), X)));
+  }), z(() => {
+    u !== void 0 && cancelAnimationFrame(u), n !== void 0 && clearTimeout(n);
+  });
+  const S = () => {
+    e.disabled || c((t) => !t);
+  }, E = (t) => {
+    const r = t.target;
+    p?.contains(r) || g?.contains(r) || c(!1);
+  }, V = (t) => {
+    d(t), e.onChange?.(void 0, t, f);
+  };
+  return [a(N, L({
+    ref(t) {
+      var r = A(e.ref, m.setReference, (i) => g = i);
+      typeof r == "function" && r(t);
+    },
+    get value() {
+      return e.value;
+    },
+    get onChange() {
+      return e.onChange;
+    },
+    get onBlur() {
+      return e.onBlur;
+    },
+    onToggle: S,
+    get disabled() {
+      return e.disabled;
+    },
+    get disableClock() {
+      return e.disableClock;
+    },
+    get format() {
+      return e.format;
+    }
+  }, P)), a(G, {
+    get when() {
+      return C();
+    },
+    get children() {
+      return a(M, {
+        get mount() {
+          return document.body;
+        },
+        get children() {
+          return a(U, {
+            onClickAway: E,
+            get children() {
+              var t = W(), r = t.firstChild, i = A(m.setFloating, (o) => p = o);
+              return typeof i == "function" && O(i, t), $(r, a(Q, {
+                get value() {
+                  return F();
+                },
+                get format() {
+                  return e.format;
+                },
+                onChange: V,
+                onComplete: () => {
+                  c(!1);
+                }
+              })), I((o) => {
+                var B = {
+                  ...m.floatingStyles(),
+                  opacity: D() ? 1 : 0
+                }, w = e.clockAriaLabel ?? "Choose time";
+                return o.e = R(t, B, o.e), w !== o.t && q(t, "aria-label", o.t = w), o;
+              }, {
+                e: void 0,
+                t: void 0
+              }), t;
+            }
+          });
+        }
+      });
+    }
+  })];
+}
+export {
+  se as TimePicker
+};
+//# sourceMappingURL=timePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timePicker.js","sources":["../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, 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 { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { TextFieldProps } from \"../textField\";\n\nexport interface TimePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string | undefined;\n  placement?: Placement | undefined;\n  disableClock?: boolean | undefined;\n  label?: string | undefined;\n  clockAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  clockIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: TimePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: TimePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function TimePicker(props: TimePickerProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"placement\",\n    \"disabled\",\n    \"disableClock\",\n    \"clockAriaLabel\",\n    \"format\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n  const [viewValue, setViewValue] = createSignal<Date>(isValidTimeDate(value()) ? (value() as Date) : new Date());\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let clockEl: HTMLElement | undefined;\n\n  const resolved = () => 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(isValidTimeDate(v) ? v : new Date());\n  });\n\n  const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableClock;\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 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 (clockEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const onTimeChange = (next: Date): void => {\n    setViewValue(next);\n    local.onChange?.(undefined, next, props);\n  };\n\n  return (\n    <>\n      <TimePickerInput\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        disableClock={local.disableClock}\n        format={local.format}\n        {...rest}\n      />\n      <Show when={mounted()}>\n        <Portal mount={document.body}>\n          <ClickAwayListener onClickAway={onClickAway}>\n            <div\n              ref={mergeRefs(floating.setFloating, (el) => (clockEl = el as HTMLElement))}\n              class=\"smwb-date-picker smwb-time-picker\"\n              style={{ ...floating.floatingStyles(), transition: `opacity ${FADE_MS}ms ease-in-out`, opacity: shown() ? 1 : 0 }}\n              data-testid=\"time-picker\"\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.clockAriaLabel ?? \"Choose time\"}\n            >\n              <div class=\"smwb-date-picker__inner\">\n                <TimePickerColumns\n                  value={viewValue()}\n                  format={local.format}\n                  onChange={onTimeChange}\n                  onComplete={() => {\n                    setIsOpen(false);\n                  }}\n                />\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default TimePicker;\n"],"names":["FADE_MS","TimePicker","props","local","rest","splitProps","value","undefined","Date","viewValue","setViewValue","createSignal","isValidTimeDate","isOpen","setIsOpen","anchorEl","clockEl","resolved","resolvePlacement","placement","floating","createFloating","middleware","buildFloatingMiddleware","createEffect","disabled","v","shouldOpen","disableClock","mounted","setMounted","shown","setShown","raf","timer","clearTimeout","requestAnimationFrame","setTimeout","onCleanup","cancelAnimationFrame","onToggle","prev","onClickAway","event","target","contains","onTimeChange","next","onChange","_$createComponent","TimePickerInput","_$mergeProps","ref","r$","_ref$","mergeRefs","setReference","el","onBlur","format","Show","when","children","Portal","mount","document","body","ClickAwayListener","_el$","_tmpl$","_el$2","firstChild","_ref$2","setFloating","_$use","_$insert","TimePickerColumns","onComplete","_$effect","_p$","_v$","floatingStyles","opacity","_v$2","clockAriaLabel","e","_$style","t","_$setAttribute"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+export interface TimePickerColumnsProps {
+    value?: Date;
+    format?: string | undefined;
+    onChange: (value: Date) => void;
+    onComplete?: () => void;
+}
+export declare function TimePickerColumns(props: TimePickerColumnsProps): JSX.Element;
+export default TimePickerColumns;