@smwb/ui-solid 0.2.2 → 0.4.0

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

@@ -0,0 +1,137 @@
+import { createEffect, createSignal, mergeProps, onMount, splitProps } from "solid-js";
+import cn from "clsx";
+import { isFilled } from "./utils";
+import { TextFieldWrapper } from "./textFieldWrapper";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function TextField(props) {
+  const merged = mergeProps({ variant: "outlined", size: "medium", type: "text" }, props);
+  const [local, rest] = splitProps(merged, [
+    "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"
+  ]);
+  const [isFocused, setIsFocused] = createSignal(false);
+  const [isFilledState, setIsFilledState] = createSignal(false);
+  const isControlled = local.value != null;
+  let inputEl;
+  const checkDirty = (obj) => {
+    const filled = isFilled(obj);
+    setIsFilledState((prev) => prev === filled ? prev : filled);
+  };
+  const onFocus = (event) => {
+    if (local.disabled) {
+      event.stopPropagation();
+      return;
+    }
+    const handler = local.onFocus;
+    if (typeof handler === "function") {
+      handler(event);
+    } else if (Array.isArray(handler)) {
+      handler[0](handler[1], event);
+    }
+    setIsFocused(true);
+  };
+  const onBlur = (event) => {
+    if (!isControlled) {
+      checkDirty({ value: event.currentTarget.value });
+    }
+    local.onBlur?.(event, props);
+    setIsFocused(false);
+  };
+  const onInput = (event) => {
+    if (!isControlled) {
+      checkDirty({ value: event.currentTarget.value });
+    }
+    local.onChange?.(event, props);
+  };
+  const onHolderMouseDown = (event) => {
+    if (inputEl && event.currentTarget === event.target) {
+      event.preventDefault();
+      inputEl.focus();
+    }
+  };
+  createEffect(() => {
+    if (local.disabled && isFocused()) {
+      setIsFocused(false);
+    }
+  });
+  onMount(() => checkDirty(inputEl ? { value: inputEl.value } : null));
+  createEffect(() => {
+    if (isControlled) {
+      checkDirty({ value: local.value });
+    }
+  });
+  const inputClasses = () => cn(
+    "smwb-text-field__input",
+    (!local.label || local.inline) && "smwb-text-field__input--show-placeholder",
+    local.startAdornment && "smwb-text-field__input--adornment-start",
+    local.endAdornment && "smwb-text-field__input--adornment-end",
+    local.inline && "smwb-text-field__input--inline"
+  );
+  return <TextFieldWrapper
+    label={local.label}
+    helperText={local.helperText}
+    variant={local.variant}
+    disabled={local.disabled}
+    class={cn(local.class, local.size !== "medium" && `smwb-text-field_size-${local.size}`)}
+    error={local.error}
+    fullWidth={local.fullWidth}
+    isFilledState={isFilledState()}
+    isFocused={isFocused()}
+    for={local.id}
+    shrink={Boolean(local.startAdornment)}
+    onHolderMouseDown={onHolderMouseDown}
+    startAdornment={local.startAdornment}
+    endAdornment={local.endAdornment}
+    inline={local.inline}
+  >
+      <input
+    {...rest}
+    type={local.type}
+    name={local.name}
+    readonly={local.readOnly}
+    required={local.required}
+    aria-invalid={local.error || void 0}
+    aria-required={local.required || void 0}
+    placeholder={local.placeholder}
+    disabled={local.disabled}
+    value={isControlled ? local.value : local.defaultValue ?? ""}
+    class={inputClasses()}
+    ref={mergeRefs(local.ref, (el) => inputEl = el)}
+    onInput={onInput}
+    onFocus={onFocus}
+    onBlur={onBlur}
+    id={local.id}
+    autocomplete={local.autocomplete}
+    inputmode={local.inputmode}
+  />
+    </TextFieldWrapper>;
+}
+var textField_default = TextField;
+export {
+  TextField,
+  textField_default as default
+};
+//# sourceMappingURL=textField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"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"],"mappings":"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","names":[],"file":"textField.jsx"}

package/dist/headless/source/components/inputs/textField/textFieldAdornment.jsx

@@ -0,0 +1,31 @@
+import { splitProps } from "solid-js";
+import cn from "clsx";
+function TextFieldAdornment(props) {
+  const [local] = splitProps(props, [
+    "position",
+    "variant",
+    "children",
+    "class",
+    "disablePointerEvents",
+    "inline"
+  ]);
+  return <span
+    class={cn(
+      "smwb-text-field__adornment",
+      local.class,
+      local.position === "start" && "smwb-text-field__adornment--start",
+      local.position === "end" && "smwb-text-field__adornment--end",
+      local.disablePointerEvents && "smwb-text-field__adornment--disable-pointer",
+      !local.inline && local.variant === "filled" && "smwb-text-field__adornment--filled",
+      typeof local.children === "string" && "smwb-text-field__adornment--text"
+    )}
+  >
+      {local.children}
+    </span>;
+}
+var textFieldAdornment_default = TextFieldAdornment;
+export {
+  TextFieldAdornment,
+  textFieldAdornment_default as default
+};
+//# sourceMappingURL=textFieldAdornment.js.map

package/dist/headless/source/components/inputs/textField/textFieldAdornment.jsx.map

@@ -0,0 +1 @@
+{"version":3,"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"],"mappings":"AAAA,SAAmB,kBAAkB;AACrC,OAAO,QAAQ;AAYR,SAAS,mBAAmB,OAA6C;AAC9E,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,CAAC;AAAA,IACC,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,MAAM,aAAa,WAAW;AAAA,MAC9B,MAAM,aAAa,SAAS;AAAA,MAC5B,MAAM,wBAAwB;AAAA,MAC9B,CAAC,MAAM,UAAU,MAAM,YAAY,YAAY;AAAA,MAC/C,OAAO,MAAM,aAAa,YAAY;AAAA,IACxC;AAAA,GACD;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EAZC;AAcL;AAEA,IAAO,6BAAQ;","names":[],"file":"textFieldAdornment.jsx"}

package/dist/headless/source/components/inputs/textField/textFieldWrapper.jsx

@@ -0,0 +1,83 @@
+import { Show, splitProps } from "solid-js";
+import cn from "clsx";
+import { TextFieldAdornment } from "./textFieldAdornment";
+function TextFieldWrapper(props) {
+  const [local, rest] = splitProps(props, [
+    "label",
+    "helperText",
+    "variant",
+    "disabled",
+    "class",
+    "error",
+    "fullWidth",
+    "isFilledState",
+    "isFocused",
+    "for",
+    "shrink",
+    "children",
+    "onHolderMouseDown",
+    "startAdornment",
+    "endAdornment",
+    "inline"
+  ]);
+  const helperText = () => local.helperText ?? "\xA0";
+  const isFilledVariant = () => local.variant === "filled";
+  const isNotchedActive = () => !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);
+  return <div
+    {...rest}
+    class={cn(local.class, "smwb-text-field", {
+      "smwb-text-field--filled": !local.inline && isFilledVariant(),
+      "smwb-text-field--inline": local.inline,
+      "smwb-text-field--focused": !local.inline && local.isFocused,
+      "smwb-text-field--error": local.error,
+      "smwb-text-field--disabled": local.disabled,
+      "smwb-text-field--full-width": local.fullWidth
+    })}
+    data-testid="text-field"
+  >
+      <Show when={!local.inline && local.label}>
+        <label
+    class={cn("smwb-text-field__label", { "smwb-text-field__label--shrink": isNotchedActive() })}
+    for={local.for || ""}
+  >
+          {local.label}
+        </label>
+      </Show>
+      <div class="smwb-text-field__input-holder" onMouseDown={local.onHolderMouseDown}>
+        <Show when={local.startAdornment}>
+          <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position="start">
+            {local.startAdornment}
+          </TextFieldAdornment>
+        </Show>
+        {local.children}
+        <Show when={local.endAdornment}>
+          <TextFieldAdornment position="end">{local.endAdornment}</TextFieldAdornment>
+        </Show>
+        <Show when={!local.inline && local.variant === "outlined"}>
+          <fieldset
+    class={cn("smwb-text-field__notched", {
+      "smwb-text-field__notched--with-label": local.label,
+      "smwb-text-field__notched--active": isNotchedActive()
+    })}
+  >
+            <legend>
+              <Show when={local.label} fallback={<span class="smwb-notranslate">&#8203;</span>}>
+                <span>{local.label}</span>
+              </Show>
+            </legend>
+          </fieldset>
+        </Show>
+      </div>
+      <Show when={!local.inline && helperText()}>
+        <p class="smwb-text-field__helper-line">
+          <span class="smwb-text-field__helper-text">{helperText()}</span>
+        </p>
+      </Show>
+    </div>;
+}
+var textFieldWrapper_default = TextFieldWrapper;
+export {
+  TextFieldWrapper,
+  textFieldWrapper_default as default
+};
+//# sourceMappingURL=textFieldWrapper.js.map

package/dist/headless/source/components/inputs/textField/textFieldWrapper.jsx.map

@@ -0,0 +1 @@
+{"version":3,"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"],"mappings":"AAAA,SAAmB,MAAM,kBAAkB;AAC3C,OAAO,QAAQ;AACf,SAAS,0BAA0B;AAqB5B,SAAS,iBAAiB,OAA2C;AAC1E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,MAAmB,MAAM,cAAc;AAC1D,QAAM,kBAAkB,MAAe,MAAM,YAAY;AACzD,QAAM,kBAAkB,MACtB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,MAAM,iBAAiB,CAAC,CAAC,MAAM,aAAa,CAAC,CAAC,MAAM;AAE1E,SACE,CAAC;AAAA,QACK;AAAA,IACJ,OAAO,GAAG,MAAM,OAAO,mBAAmB;AAAA,MACxC,2BAA2B,CAAC,MAAM,UAAU,gBAAgB;AAAA,MAC5D,2BAA2B,MAAM;AAAA,MACjC,4BAA4B,CAAC,MAAM,UAAU,MAAM;AAAA,MACnD,0BAA0B,MAAM;AAAA,MAChC,6BAA6B,MAAM;AAAA,MACnC,+BAA+B,MAAM;AAAA,IACvC,CAAC;AAAA,IACD,YAAY;AAAA,GACb;AAAA,MACC,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU,MAAM,OAAO;AAAA,QACxC,CAAC;AAAA,IACC,OAAO,GAAG,0BAA0B,EAAE,kCAAkC,gBAAgB,EAAE,CAAC;AAAA,IAC3F,KAAK,MAAM,OAAO;AAAA,GACnB;AAAA,WACE,MAAM,MAAM;AAAA,QACf,EALC,MAKO;AAAA,MACV,EAPC,KAOM;AAAA,MACP,CAAC,IAAI,MAAM,gCAAgC,aAAa,MAAM,mBAAmB;AAAA,QAC/E,CAAC,KAAK,MAAM,MAAM,gBAAgB;AAAA,UAChC,CAAC,mBAAmB,SAAS,MAAM,SAAS,QAAQ,QAAQ,MAAM,MAAM,GAAG,SAAS,QAAQ;AAAA,aACzF,MAAM,eAAe;AAAA,UACxB,EAFC,mBAEoB;AAAA,QACvB,EAJC,KAIM;AAAA,SACN,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,MAAM,cAAc;AAAA,UAC9B,CAAC,mBAAmB,SAAS,OAAO,MAAM,aAAa,EAAtD,mBAA2E;AAAA,QAC9E,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU,MAAM,YAAY,YAAY;AAAA,UACzD,CAAC;AAAA,IACC,OAAO,GAAG,4BAA4B;AAAA,MACpC,wCAAwC,MAAM;AAAA,MAC9C,oCAAoC,gBAAgB;AAAA,IACtD,CAAC;AAAA,GACF;AAAA,YACC,CAAC,OAAO;AAAA,cACN,CAAC,KAAK,MAAM,MAAM,OAAO,UAAU,CAAC,KAAK,MAAM,mBAAmB,OAAO,EAArC,OAA8C;AAAA,gBAChF,CAAC,MAAM,MAAM,MAAM,EAAlB,KAAyB;AAAA,cAC5B,EAFC,KAEM;AAAA,YACT,EAJC,OAIQ;AAAA,UACX,EAXC,SAWU;AAAA,QACb,EAbC,KAaM;AAAA,MACT,EAxBC,IAwBK;AAAA,MACN,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU,WAAW,GAAG;AAAA,QACzC,CAAC,EAAE,MAAM,+BAA+B;AAAA,UACtC,CAAC,KAAK,MAAM,gCAAgC,WAAW,EAAE,EAAxD,KAA+D;AAAA,QAClE,EAFC,EAEG;AAAA,MACN,EAJC,KAIM;AAAA,IACT,EAlDC;AAoDL;AAEA,IAAO,2BAAQ;","names":[],"file":"textFieldWrapper.jsx"}

package/dist/headless/source/components/inputs/textField/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/headless/source/components/inputs/textField/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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"],
+  "mappings": "AAAO,SAAS,SAAS,OAAyB;AAChD,SAAO,SAAS,QAAQ,EAAE,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW;AACrE;AAEO,SAAS,SAAS,KAAmE;AAC1F,SAAO;AAAA,IACL,QAAS,SAAS,IAAI,KAAK,KAAK,IAAI,UAAU,MAAQ,SAAS,IAAI,YAAY,KAAK,IAAI,iBAAiB;AAAA,EAC3G;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,14 @@
+import { TimePicker, default as default2 } from "./timePicker";
+import { TimePickerInput } from "./timePickerInput";
+import { TimePickerColumns } from "./timePickerColumns";
+import { createTimeInput } from "./useTimeInput";
+import { DEFAULT_TIME_FORMAT } from "./timeUtils";
+export {
+  DEFAULT_TIME_FORMAT,
+  TimePicker,
+  TimePickerColumns,
+  TimePickerInput,
+  createTimeInput,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/inputs/timePicker/index.ts"],
+  "sourcesContent": ["export { TimePicker, default } from \"./timePicker\";\nexport type { TimePickerProps } from \"./timePicker\";\nexport { TimePickerInput } from \"./timePickerInput\";\nexport type { TimePickerInputProps } from \"./timePickerInput\";\nexport { TimePickerColumns } from \"./timePickerColumns\";\nexport type { TimePickerColumnsProps } from \"./timePickerColumns\";\nexport { createTimeInput } from \"./useTimeInput\";\nexport type { CreateTimeInputProps, TimeInputState } from \"./useTimeInput\";\nexport { DEFAULT_TIME_FORMAT } from \"./timeUtils\";\n"],
+  "mappings": "AAAA,SAAS,YAAY,WAAAA,gBAAe;AAEpC,SAAS,uBAAuB;AAEhC,SAAS,yBAAyB;AAElC,SAAS,uBAAuB;AAEhC,SAAS,2BAA2B;",
+  "names": ["default"]
+}

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

@@ -0,0 +1,78 @@
+const TIME_TOKEN_REGEXP = /HH|mm|ss/g;
+function extractTokens(pattern) {
+  const tokens = [];
+  let match;
+  TIME_TOKEN_REGEXP.lastIndex = 0;
+  while ((match = TIME_TOKEN_REGEXP.exec(pattern)) !== null) {
+    tokens.push(match[0]);
+  }
+  return tokens;
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function patternToRegExp(pattern) {
+  let regex = "^";
+  let lastIndex = 0;
+  let match;
+  TIME_TOKEN_REGEXP.lastIndex = 0;
+  while ((match = TIME_TOKEN_REGEXP.exec(pattern)) !== null) {
+    regex += escapeRegExp(pattern.slice(lastIndex, match.index));
+    regex += "(\\d{2})";
+    lastIndex = TIME_TOKEN_REGEXP.lastIndex;
+  }
+  regex += escapeRegExp(pattern.slice(lastIndex));
+  regex += "$";
+  return new RegExp(regex);
+}
+function isValidTime(hours, minutes, seconds) {
+  return hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59 && seconds >= 0 && seconds <= 59;
+}
+function patternHasSeconds(pattern) {
+  return extractTokens(pattern).includes("ss");
+}
+function formatTimeByPattern(date, pattern) {
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+  return pattern.replace(TIME_TOKEN_REGEXP, (token) => {
+    if (token === "HH") return String(hours).padStart(2, "0");
+    if (token === "mm") return String(minutes).padStart(2, "0");
+    return String(seconds).padStart(2, "0");
+  });
+}
+function parseTimeByPattern(value, pattern) {
+  const tokens = extractTokens(pattern);
+  if (!tokens.includes("HH") || !tokens.includes("mm")) return void 0;
+  const match = patternToRegExp(pattern).exec(value);
+  if (!match) return void 0;
+  let hours;
+  let minutes;
+  let seconds = 0;
+  tokens.forEach((token, index) => {
+    const part = Number(match[index + 1]);
+    if (token === "HH") {
+      hours = part;
+      return;
+    }
+    if (token === "mm") {
+      minutes = part;
+      return;
+    }
+    seconds = part;
+  });
+  if (hours === void 0 || minutes === void 0) return void 0;
+  if (!isValidTime(hours, minutes, seconds)) return void 0;
+  const now = /* @__PURE__ */ new Date();
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, seconds);
+}
+function isTimePatternMatch(value, pattern) {
+  return parseTimeByPattern(value, pattern) !== void 0;
+}
+export {
+  formatTimeByPattern,
+  isTimePatternMatch,
+  parseTimeByPattern,
+  patternHasSeconds
+};
+//# sourceMappingURL=timeFormat.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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"],
+  "mappings": "AAAA,MAAM,oBAAoB;AAI1B,SAAS,cAAc,SAA8B;AACnD,QAAM,SAAsB,CAAC;AAC7B,MAAI;AACJ,oBAAkB,YAAY;AAC9B,UAAQ,QAAQ,kBAAkB,KAAK,OAAO,OAAO,MAAM;AACzD,WAAO,KAAK,MAAM,CAAC,CAAc;AAAA,EACnC;AACA,SAAO;AACT;AAEA,SAAS,aAAa,OAAuB;AAC3C,SAAO,MAAM,QAAQ,uBAAuB,MAAM;AACpD;AAEA,SAAS,gBAAgB,SAAyB;AAChD,MAAI,QAAQ;AACZ,MAAI,YAAY;AAChB,MAAI;AACJ,oBAAkB,YAAY;AAC9B,UAAQ,QAAQ,kBAAkB,KAAK,OAAO,OAAO,MAAM;AACzD,aAAS,aAAa,QAAQ,MAAM,WAAW,MAAM,KAAK,CAAC;AAC3D,aAAS;AACT,gBAAY,kBAAkB;AAAA,EAChC;AACA,WAAS,aAAa,QAAQ,MAAM,SAAS,CAAC;AAC9C,WAAS;AACT,SAAO,IAAI,OAAO,KAAK;AACzB;AAEA,SAAS,YAAY,OAAe,SAAiB,SAA0B;AAC7E,SAAO,SAAS,KAAK,SAAS,MAAM,WAAW,KAAK,WAAW,MAAM,WAAW,KAAK,WAAW;AAClG;AAEO,SAAS,kBAAkB,SAA0B;AAC1D,SAAO,cAAc,OAAO,EAAE,SAAS,IAAI;AAC7C;AAEO,SAAS,oBAAoB,MAAY,SAAyB;AACvE,QAAM,QAAQ,KAAK,SAAS;AAC5B,QAAM,UAAU,KAAK,WAAW;AAChC,QAAM,UAAU,KAAK,WAAW;AAChC,SAAO,QAAQ,QAAQ,mBAAmB,CAAC,UAAU;AACnD,QAAI,UAAU,KAAM,QAAO,OAAO,KAAK,EAAE,SAAS,GAAG,GAAG;AACxD,QAAI,UAAU,KAAM,QAAO,OAAO,OAAO,EAAE,SAAS,GAAG,GAAG;AAC1D,WAAO,OAAO,OAAO,EAAE,SAAS,GAAG,GAAG;AAAA,EACxC,CAAC;AACH;AAEO,SAAS,mBAAmB,OAAe,SAAmC;AACnF,QAAM,SAAS,cAAc,OAAO;AACpC,MAAI,CAAC,OAAO,SAAS,IAAI,KAAK,CAAC,OAAO,SAAS,IAAI,EAAG,QAAO;AAC7D,QAAM,QAAQ,gBAAgB,OAAO,EAAE,KAAK,KAAK;AACjD,MAAI,CAAC,MAAO,QAAO;AAEnB,MAAI;AACJ,MAAI;AACJ,MAAI,UAAU;AAEd,SAAO,QAAQ,CAAC,OAAO,UAAU;AAC/B,UAAM,OAAO,OAAO,MAAM,QAAQ,CAAC,CAAC;AACpC,QAAI,UAAU,MAAM;AAClB,cAAQ;AACR;AAAA,IACF;AACA,QAAI,UAAU,MAAM;AAClB,gBAAU;AACV;AAAA,IACF;AACA,cAAU;AAAA,EACZ,CAAC;AAED,MAAI,UAAU,UAAa,YAAY,OAAW,QAAO;AACzD,MAAI,CAAC,YAAY,OAAO,SAAS,OAAO,EAAG,QAAO;AAElD,QAAM,MAAM,oBAAI,KAAK;AACrB,SAAO,IAAI,KAAK,IAAI,YAAY,GAAG,IAAI,SAAS,GAAG,IAAI,QAAQ,GAAG,OAAO,SAAS,OAAO;AAC3F;AAEO,SAAS,mBAAmB,OAAe,SAA0B;AAC1E,SAAO,mBAAmB,OAAO,OAAO,MAAM;AAChD;",
+  "names": []
+}

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

@@ -0,0 +1,114 @@
+import { Show, createEffect, createSignal, onCleanup, splitProps } from "solid-js";
+import { Portal, isServer } from "solid-js/web";
+import { buildFloatingMiddleware, resolvePlacement } from "../../../utils/floating";
+import { createFloating } from "../../../primitives/createFloating";
+import { ClickAwayListener } from "../../clickAwayListener";
+import { TimePickerInput } from "./timePickerInput";
+import { TimePickerColumns } from "./timePickerColumns";
+import { isValidTimeDate } from "./timeUtils";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const FADE_MS = 150;
+function TimePicker(props) {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onChange",
+    "placement",
+    "disabled",
+    "disableClock",
+    "clockAriaLabel",
+    "format",
+    "onBlur",
+    "ref"
+  ]);
+  const value = () => local.value === void 0 ? void 0 : new Date(local.value);
+  const [viewValue, setViewValue] = createSignal(isValidTimeDate(value()) ? value() : /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = createSignal(false);
+  let anchorEl;
+  let clockEl;
+  const resolved = () => resolvePlacement(local.placement ?? "bottom-start");
+  const floating = createFloating({
+    placement: () => resolved().placement,
+    middleware: () => buildFloatingMiddleware(resolved())
+  });
+  createEffect(() => {
+    if (local.disabled) return;
+    const v = value();
+    setViewValue(isValidTimeDate(v) ? v : /* @__PURE__ */ new Date());
+  });
+  const shouldOpen = () => isOpen() && !local.disabled && !local.disableClock;
+  const [mounted, setMounted] = createSignal(shouldOpen());
+  const [shown, setShown] = createSignal(false);
+  let raf;
+  let timer;
+  createEffect(() => {
+    if (shouldOpen()) {
+      if (timer !== void 0) clearTimeout(timer);
+      setMounted(true);
+      raf = requestAnimationFrame(() => setShown(true));
+    } else {
+      setShown(false);
+      if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);
+    }
+  });
+  onCleanup(() => {
+    if (raf !== void 0) cancelAnimationFrame(raf);
+    if (timer !== void 0) clearTimeout(timer);
+  });
+  const onToggle = () => {
+    if (!local.disabled) setIsOpen((prev) => !prev);
+  };
+  const onClickAway = (event) => {
+    const target = event.target;
+    if (clockEl?.contains(target) || anchorEl?.contains(target)) return;
+    setIsOpen(false);
+  };
+  const onTimeChange = (next) => {
+    setViewValue(next);
+    local.onChange?.(void 0, next, props);
+  };
+  return <>
+      <TimePickerInput
+    ref={mergeRefs(local.ref, floating.setReference, (el) => anchorEl = el)}
+    value={local.value}
+    onChange={local.onChange}
+    onBlur={local.onBlur}
+    onToggle={onToggle}
+    disabled={local.disabled}
+    disableClock={local.disableClock}
+    format={local.format}
+    {...rest}
+  />
+      <Show when={mounted()}>
+        <Portal mount={isServer ? void 0 : document.body}>
+          <ClickAwayListener onClickAway={onClickAway}>
+            <div
+    ref={mergeRefs(floating.setFloating, (el) => clockEl = el)}
+    class="smwb-date-picker smwb-time-picker"
+    style={{ ...floating.floatingStyles(), transition: `opacity ${FADE_MS}ms ease-in-out`, opacity: shown() ? 1 : 0 }}
+    data-testid="time-picker"
+    role="dialog"
+    aria-modal="false"
+    aria-label={local.clockAriaLabel ?? "Choose time"}
+  >
+              <div class="smwb-date-picker__inner">
+                <TimePickerColumns
+    value={viewValue()}
+    format={local.format}
+    onChange={onTimeChange}
+    onComplete={() => {
+      setIsOpen(false);
+    }}
+  />
+              </div>
+            </div>
+          </ClickAwayListener>
+        </Portal>
+      </Show>
+    </>;
+}
+var timePicker_default = TimePicker;
+export {
+  TimePicker,
+  timePicker_default as default
+};
+//# sourceMappingURL=timePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { 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={(isServer ? undefined : document.body) as Node}>\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"],"mappings":"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","names":[],"file":"timePicker.jsx"}

package/dist/headless/source/components/inputs/timePicker/timePickerColumns.jsx

@@ -0,0 +1,42 @@
+import { Show } from "solid-js";
+import { TimePickerList } from "./timePickerList";
+import { patternHasSeconds } from "./timeFormat";
+import { DEFAULT_TIME_FORMAT, getHoursList, getMinutesList, getSecondsList, isValidTimeDate, setTime } from "./timeUtils";
+function TimePickerColumns(props) {
+  const current = () => isValidTimeDate(props.value) ? props.value : /* @__PURE__ */ new Date();
+  const timeFormat = () => props.format ?? DEFAULT_TIME_FORMAT;
+  const showSeconds = () => patternHasSeconds(timeFormat());
+  const hours = getHoursList();
+  const minutes = getMinutesList();
+  const seconds = getSecondsList();
+  const onHourChange = (hour) => {
+    props.onChange(setTime(current(), hour, current().getMinutes(), current().getSeconds()));
+  };
+  const onMinuteChange = (minute) => {
+    props.onChange(setTime(current(), current().getHours(), minute, current().getSeconds()));
+    if (!showSeconds()) props.onComplete?.();
+  };
+  const onSecondChange = (second) => {
+    props.onChange(setTime(current(), current().getHours(), current().getMinutes(), second));
+    props.onComplete?.();
+  };
+  return <div class="smwb-time-picker__columns" data-testid="time-picker-columns">
+      <div class="smwb-time-picker__column">
+        <TimePickerList value={current().getHours()} items={hours} onChange={onHourChange} />
+      </div>
+      <div class="smwb-time-picker__column">
+        <TimePickerList value={current().getMinutes()} items={minutes} onChange={onMinuteChange} />
+      </div>
+      <Show when={showSeconds()}>
+        <div class="smwb-time-picker__column">
+          <TimePickerList value={current().getSeconds()} items={seconds} onChange={onSecondChange} />
+        </div>
+      </Show>
+    </div>;
+}
+var timePickerColumns_default = TimePickerColumns;
+export {
+  TimePickerColumns,
+  timePickerColumns_default as default
+};
+//# sourceMappingURL=timePickerColumns.js.map

package/dist/headless/source/components/inputs/timePicker/timePickerColumns.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/inputs/timePicker/timePickerColumns.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { TimePickerList } from \"./timePickerList\";\nimport { patternHasSeconds } from \"./timeFormat\";\nimport { DEFAULT_TIME_FORMAT, getHoursList, getMinutesList, getSecondsList, isValidTimeDate, setTime } from \"./timeUtils\";\n\nexport interface TimePickerColumnsProps {\n  value?: Date;\n  format?: string | undefined;\n  onChange: (value: Date) => void;\n  onComplete?: () => void;\n}\n\nexport function TimePickerColumns(props: TimePickerColumnsProps): JSX.Element {\n  const current = (): Date => (isValidTimeDate(props.value) ? props.value : new Date());\n  const timeFormat = (): string => props.format ?? DEFAULT_TIME_FORMAT;\n  const showSeconds = (): boolean => patternHasSeconds(timeFormat());\n  const hours = getHoursList();\n  const minutes = getMinutesList();\n  const seconds = getSecondsList();\n\n  const onHourChange = (hour: number): void => {\n    props.onChange(setTime(current(), hour, current().getMinutes(), current().getSeconds()));\n  };\n  const onMinuteChange = (minute: number): void => {\n    props.onChange(setTime(current(), current().getHours(), minute, current().getSeconds()));\n    if (!showSeconds()) props.onComplete?.();\n  };\n  const onSecondChange = (second: number): void => {\n    props.onChange(setTime(current(), current().getHours(), current().getMinutes(), second));\n    props.onComplete?.();\n  };\n\n  return (\n    <div class=\"smwb-time-picker__columns\" data-testid=\"time-picker-columns\">\n      <div class=\"smwb-time-picker__column\">\n        <TimePickerList value={current().getHours()} items={hours} onChange={onHourChange} />\n      </div>\n      <div class=\"smwb-time-picker__column\">\n        <TimePickerList value={current().getMinutes()} items={minutes} onChange={onMinuteChange} />\n      </div>\n      <Show when={showSeconds()}>\n        <div class=\"smwb-time-picker__column\">\n          <TimePickerList value={current().getSeconds()} items={seconds} onChange={onSecondChange} />\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport default TimePickerColumns;\n"],"mappings":"AAAA,SAAmB,YAAY;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,qBAAqB,cAAc,gBAAgB,gBAAgB,iBAAiB,eAAe;AASrG,SAAS,kBAAkB,OAA4C;AAC5E,QAAM,UAAU,MAAa,gBAAgB,MAAM,KAAK,IAAI,MAAM,QAAQ,oBAAI,KAAK;AACnF,QAAM,aAAa,MAAc,MAAM,UAAU;AACjD,QAAM,cAAc,MAAe,kBAAkB,WAAW,CAAC;AACjE,QAAM,QAAQ,aAAa;AAC3B,QAAM,UAAU,eAAe;AAC/B,QAAM,UAAU,eAAe;AAE/B,QAAM,eAAe,CAAC,SAAuB;AAC3C,UAAM,SAAS,QAAQ,QAAQ,GAAG,MAAM,QAAQ,EAAE,WAAW,GAAG,QAAQ,EAAE,WAAW,CAAC,CAAC;AAAA,EACzF;AACA,QAAM,iBAAiB,CAAC,WAAyB;AAC/C,UAAM,SAAS,QAAQ,QAAQ,GAAG,QAAQ,EAAE,SAAS,GAAG,QAAQ,QAAQ,EAAE,WAAW,CAAC,CAAC;AACvF,QAAI,CAAC,YAAY,EAAG,OAAM,aAAa;AAAA,EACzC;AACA,QAAM,iBAAiB,CAAC,WAAyB;AAC/C,UAAM,SAAS,QAAQ,QAAQ,GAAG,QAAQ,EAAE,SAAS,GAAG,QAAQ,EAAE,WAAW,GAAG,MAAM,CAAC;AACvF,UAAM,aAAa;AAAA,EACrB;AAEA,SACE,CAAC,IAAI,MAAM,4BAA4B,YAAY,sBAAsB;AAAA,MACvE,CAAC,IAAI,MAAM,2BAA2B;AAAA,QACpC,CAAC,eAAe,OAAO,QAAQ,EAAE,SAAS,GAAG,OAAO,OAAO,UAAU,cAAc,EAAE;AAAA,MACvF,EAFC,IAEK;AAAA,MACN,CAAC,IAAI,MAAM,2BAA2B;AAAA,QACpC,CAAC,eAAe,OAAO,QAAQ,EAAE,WAAW,GAAG,OAAO,SAAS,UAAU,gBAAgB,EAAE;AAAA,MAC7F,EAFC,IAEK;AAAA,MACN,CAAC,KAAK,MAAM,YAAY,GAAG;AAAA,QACzB,CAAC,IAAI,MAAM,2BAA2B;AAAA,UACpC,CAAC,eAAe,OAAO,QAAQ,EAAE,WAAW,GAAG,OAAO,SAAS,UAAU,gBAAgB,EAAE;AAAA,QAC7F,EAFC,IAEK;AAAA,MACR,EAJC,KAIM;AAAA,IACT,EAZC;AAcL;AAEA,IAAO,4BAAQ;","names":[],"file":"timePickerColumns.jsx"}