@wix/editor-react-components 1.2289.0 → 1.2290.0

package/dist/site/components/TextInput/component.js

@@ -1,17 +1,185 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { Component, createElement, createContext, Suspense, useContext, useState, useRef, useCallback } from "react";
+import React__default, { createContext, useState, useRef, useCallback, Component, createElement, Suspense, useContext } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { b as getAccessibilityAttributes, H as HAS_CUSTOM_FOCUS_CLASSNAME } from "../chunks/a11y.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { s as selectors } from "../chunks/constants2.js";
+import { s as selectors } from "../chunks/constants3.js";
 import { useService } from "@wix/services-manager-react";
 import { T as TranslationsDefinition } from "../chunks/index5.js";
 import { $ as $fd2148440a13ec26$export$fc1a364ae1f3ff10, a as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, b as $860f7da480e22816$export$b8473d3665f3a75a, c as $d3e0e05bdfcf66bd$export$c24727297075ec6a, d as $3985021b0ad6602f$export$37fb8590cf2c088c, e as $514c0188e459b4c0$export$9afb8bc826b033ea, f as $ee014567cb39d3f0$export$ff05c3ac10437e03, g as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/Input.js";
-import { $ as $3e6197669829fe11$export$40bfa8c7b0832715, a as $d1116acdf220c2da$export$4c014de7c8940b4c, b as $3274bf1495747a7b$export$5add1d006293d136, c as $bbaa08b3cd72f041$export$9d1611c77c2fe928, d as $23f2114a1b82827e$export$e58f029f0fbfdb29, e as $01b77f81d0f07f68$export$75b6ee27786ba447, f as $a049562f99e7db0e$export$f9c6924e160136d1, g as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
+import { a as $3e6197669829fe11$export$40bfa8c7b0832715, b as $3274bf1495747a7b$export$5add1d006293d136, c as $bbaa08b3cd72f041$export$9d1611c77c2fe928, d as $23f2114a1b82827e$export$e58f029f0fbfdb29, e as $01b77f81d0f07f68$export$75b6ee27786ba447, f as $a049562f99e7db0e$export$f9c6924e160136d1, g as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
 import { $ as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, a as $f39a9eba43920ace$export$86427a43e3e48ebb, b as $64fa3d84918910a7$export$29f1550f4b0d4415, c as $64fa3d84918910a7$export$fabf2dc03a41866e, d as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, e as $64fa3d84918910a7$export$ef03459518577ad4, f as $64fa3d84918910a7$export$4d86445c2cf5e3, g as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, h as $64fa3d84918910a7$export$2881499e37b75b9a } from "../chunks/filterDOMProps.js";
+import { $ as $d1116acdf220c2da$export$4c014de7c8940b4c } from "../chunks/useFocusable.js";
 import { S as SdkStateDefinition } from "../chunks/index6.js";
+const $8e6cc465cc68f603$export$698f465ec27e93df = /* @__PURE__ */ createContext(null);
+function $054f71d2330da2e3$export$712718f7aec83d5(props, ref) {
+  let { inputElementType = "input", isDisabled = false, isRequired = false, isReadOnly = false, type = "text", validationBehavior = "aria" } = props;
+  let [value, setValue] = $3e6197669829fe11$export$40bfa8c7b0832715(props.value, props.defaultValue || "", props.onChange);
+  let { focusableProps } = $d1116acdf220c2da$export$4c014de7c8940b4c(props, ref);
+  let validationState = $fd2148440a13ec26$export$fc1a364ae1f3ff10({
+    ...props,
+    value
+  });
+  let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
+  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $191c9b6d48a0a4e2$export$294aa081a6c6f55d({
+    ...props,
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  });
+  let domProps = $8e9d2fae0ecb9001$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  const inputOnlyProps = {
+    type,
+    pattern: props.pattern
+  };
+  let [initialValue] = useState(value);
+  $3274bf1495747a7b$export$5add1d006293d136(ref, props.defaultValue ?? initialValue, setValue);
+  $860f7da480e22816$export$b8473d3665f3a75a(props, validationState, ref);
+  return {
+    labelProps,
+    inputProps: $bbaa08b3cd72f041$export$9d1611c77c2fe928(domProps, inputElementType === "input" ? inputOnlyProps : void 0, {
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired && validationBehavior === "native",
+      "aria-required": isRequired && validationBehavior === "aria" || void 0,
+      "aria-invalid": isInvalid || void 0,
+      "aria-errormessage": props["aria-errormessage"],
+      "aria-activedescendant": props["aria-activedescendant"],
+      "aria-autocomplete": props["aria-autocomplete"],
+      "aria-haspopup": props["aria-haspopup"],
+      "aria-controls": props["aria-controls"],
+      value,
+      onChange: (e) => setValue($23f2114a1b82827e$export$e58f029f0fbfdb29(e).value),
+      autoComplete: props.autoComplete,
+      autoCapitalize: props.autoCapitalize,
+      maxLength: props.maxLength,
+      minLength: props.minLength,
+      name: props.name,
+      form: props.form,
+      placeholder: props.placeholder,
+      inputMode: props.inputMode,
+      autoCorrect: props.autoCorrect,
+      spellCheck: props.spellCheck,
+      [parseInt(React__default.version, 10) >= 17 ? "enterKeyHint" : "enterkeyhint"]: props.enterKeyHint,
+      // Clipboard events
+      onCopy: props.onCopy,
+      onCut: props.onCut,
+      onPaste: props.onPaste,
+      // Composition events
+      onCompositionEnd: props.onCompositionEnd,
+      onCompositionStart: props.onCompositionStart,
+      onCompositionUpdate: props.onCompositionUpdate,
+      // Selection events
+      onSelect: props.onSelect,
+      // Input events
+      onBeforeInput: props.onBeforeInput,
+      onInput: props.onInput,
+      ...focusableProps,
+      ...fieldProps
+    }),
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+const $216918bed6669f72$export$2dc6166a7e65358c = /* @__PURE__ */ createContext({});
+const $bcdf0525bf22703d$export$2129e27b3ef0d483 = /* @__PURE__ */ createContext(null);
+const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb(function TextField(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $bcdf0525bf22703d$export$2129e27b3ef0d483);
+  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
+  var _props_validationBehavior, _ref;
+  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
+  let inputRef = useRef(null);
+  [props, inputRef] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, inputRef, $8e6cc465cc68f603$export$698f465ec27e93df);
+  let [labelRef, label2] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
+  let [inputElementType, setInputElementType] = useState("input");
+  let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $054f71d2330da2e3$export$712718f7aec83d5({
+    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
+    inputElementType,
+    label: label2,
+    validationBehavior
+  }, inputRef);
+  let inputOrTextAreaRef = useCallback((el) => {
+    inputRef.current = el;
+    if (el) setInputElementType(el instanceof HTMLTextAreaElement ? "textarea" : "input");
+  }, [
+    inputRef
+  ]);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: {
+      isDisabled: props.isDisabled || false,
+      isInvalid: validation.isInvalid,
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false
+    },
+    defaultClassName: "react-aria-TextField"
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    global: true
+  });
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...DOMProps,
+    ...renderProps,
+    ref,
+    slot: props.slot || void 0,
+    "data-disabled": props.isDisabled || void 0,
+    "data-invalid": validation.isInvalid || void 0,
+    "data-readonly": props.isReadOnly || void 0,
+    "data-required": props.isRequired || void 0
+  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $01b77f81d0f07f68$export$75b6ee27786ba447,
+        {
+          ...labelProps,
+          ref: labelRef
+        }
+      ],
+      [
+        $3985021b0ad6602f$export$37fb8590cf2c088c,
+        {
+          ...inputProps,
+          ref: inputOrTextAreaRef
+        }
+      ],
+      [
+        $216918bed6669f72$export$2dc6166a7e65358c,
+        {
+          ...inputProps,
+          ref: inputOrTextAreaRef
+        }
+      ],
+      [
+        $a049562f99e7db0e$export$f9c6924e160136d1,
+        {
+          role: "presentation",
+          isInvalid: validation.isInvalid,
+          isDisabled: props.isDisabled || false
+        }
+      ],
+      [
+        $514c0188e459b4c0$export$9afb8bc826b033ea,
+        {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }
+      ],
+      [
+        $ee014567cb39d3f0$export$ff05c3ac10437e03,
+        validation
+      ]
+    ]
+  }, renderProps.children));
+});
 const ABORT_SIGNAL_TIMEOUT = 5e3;
 function createTimeoutSignal(timeout) {
   if (typeof AbortSignal.timeout === "function") {
@@ -395,173 +563,6 @@ const getPhoneFormatLengthValidationError = (phoneFormat, phoneFormatLengthValid
   "{digits}",
   `${phoneFormat ? phoneFormat.replace(/-/g, "").length : 0}`
 );
-const $8e6cc465cc68f603$export$698f465ec27e93df = /* @__PURE__ */ createContext(null);
-function $054f71d2330da2e3$export$712718f7aec83d5(props, ref) {
-  let { inputElementType = "input", isDisabled = false, isRequired = false, isReadOnly = false, type = "text", validationBehavior = "aria" } = props;
-  let [value, setValue] = $3e6197669829fe11$export$40bfa8c7b0832715(props.value, props.defaultValue || "", props.onChange);
-  let { focusableProps } = $d1116acdf220c2da$export$4c014de7c8940b4c(props, ref);
-  let validationState = $fd2148440a13ec26$export$fc1a364ae1f3ff10({
-    ...props,
-    value
-  });
-  let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
-  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $191c9b6d48a0a4e2$export$294aa081a6c6f55d({
-    ...props,
-    isInvalid,
-    errorMessage: props.errorMessage || validationErrors
-  });
-  let domProps = $8e9d2fae0ecb9001$export$457c3d6518dd4c6f(props, {
-    labelable: true
-  });
-  const inputOnlyProps = {
-    type,
-    pattern: props.pattern
-  };
-  let [initialValue] = useState(value);
-  $3274bf1495747a7b$export$5add1d006293d136(ref, props.defaultValue ?? initialValue, setValue);
-  $860f7da480e22816$export$b8473d3665f3a75a(props, validationState, ref);
-  return {
-    labelProps,
-    inputProps: $bbaa08b3cd72f041$export$9d1611c77c2fe928(domProps, inputElementType === "input" ? inputOnlyProps : void 0, {
-      disabled: isDisabled,
-      readOnly: isReadOnly,
-      required: isRequired && validationBehavior === "native",
-      "aria-required": isRequired && validationBehavior === "aria" || void 0,
-      "aria-invalid": isInvalid || void 0,
-      "aria-errormessage": props["aria-errormessage"],
-      "aria-activedescendant": props["aria-activedescendant"],
-      "aria-autocomplete": props["aria-autocomplete"],
-      "aria-haspopup": props["aria-haspopup"],
-      "aria-controls": props["aria-controls"],
-      value,
-      onChange: (e) => setValue($23f2114a1b82827e$export$e58f029f0fbfdb29(e).value),
-      autoComplete: props.autoComplete,
-      autoCapitalize: props.autoCapitalize,
-      maxLength: props.maxLength,
-      minLength: props.minLength,
-      name: props.name,
-      form: props.form,
-      placeholder: props.placeholder,
-      inputMode: props.inputMode,
-      autoCorrect: props.autoCorrect,
-      spellCheck: props.spellCheck,
-      [parseInt(React__default.version, 10) >= 17 ? "enterKeyHint" : "enterkeyhint"]: props.enterKeyHint,
-      // Clipboard events
-      onCopy: props.onCopy,
-      onCut: props.onCut,
-      onPaste: props.onPaste,
-      // Composition events
-      onCompositionEnd: props.onCompositionEnd,
-      onCompositionStart: props.onCompositionStart,
-      onCompositionUpdate: props.onCompositionUpdate,
-      // Selection events
-      onSelect: props.onSelect,
-      // Input events
-      onBeforeInput: props.onBeforeInput,
-      onInput: props.onInput,
-      ...focusableProps,
-      ...fieldProps
-    }),
-    descriptionProps,
-    errorMessageProps,
-    isInvalid,
-    validationErrors,
-    validationDetails
-  };
-}
-const $216918bed6669f72$export$2dc6166a7e65358c = /* @__PURE__ */ createContext({});
-const $bcdf0525bf22703d$export$2129e27b3ef0d483 = /* @__PURE__ */ createContext(null);
-const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb(function TextField(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $bcdf0525bf22703d$export$2129e27b3ef0d483);
-  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
-  var _props_validationBehavior, _ref;
-  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
-  let inputRef = useRef(null);
-  [props, inputRef] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, inputRef, $8e6cc465cc68f603$export$698f465ec27e93df);
-  let [labelRef, label2] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
-  let [inputElementType, setInputElementType] = useState("input");
-  let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $054f71d2330da2e3$export$712718f7aec83d5({
-    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
-    inputElementType,
-    label: label2,
-    validationBehavior
-  }, inputRef);
-  let inputOrTextAreaRef = useCallback((el) => {
-    inputRef.current = el;
-    if (el) setInputElementType(el instanceof HTMLTextAreaElement ? "textarea" : "input");
-  }, [
-    inputRef
-  ]);
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    values: {
-      isDisabled: props.isDisabled || false,
-      isInvalid: validation.isInvalid,
-      isReadOnly: props.isReadOnly || false,
-      isRequired: props.isRequired || false
-    },
-    defaultClassName: "react-aria-TextField"
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    global: true
-  });
-  delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement("div", {
-    ...DOMProps,
-    ...renderProps,
-    ref,
-    slot: props.slot || void 0,
-    "data-disabled": props.isDisabled || void 0,
-    "data-invalid": validation.isInvalid || void 0,
-    "data-readonly": props.isReadOnly || void 0,
-    "data-required": props.isRequired || void 0
-  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $01b77f81d0f07f68$export$75b6ee27786ba447,
-        {
-          ...labelProps,
-          ref: labelRef
-        }
-      ],
-      [
-        $3985021b0ad6602f$export$37fb8590cf2c088c,
-        {
-          ...inputProps,
-          ref: inputOrTextAreaRef
-        }
-      ],
-      [
-        $216918bed6669f72$export$2dc6166a7e65358c,
-        {
-          ...inputProps,
-          ref: inputOrTextAreaRef
-        }
-      ],
-      [
-        $a049562f99e7db0e$export$f9c6924e160136d1,
-        {
-          role: "presentation",
-          isInvalid: validation.isInvalid,
-          isDisabled: props.isDisabled || false
-        }
-      ],
-      [
-        $514c0188e459b4c0$export$9afb8bc826b033ea,
-        {
-          slots: {
-            description: descriptionProps,
-            errorMessage: errorMessageProps
-          }
-        }
-      ],
-      [
-        $ee014567cb39d3f0$export$ff05c3ac10437e03,
-        validation
-      ]
-    ]
-  }, renderProps.children));
-});
 const useSdkState = (componentId, key, defaultValue) => {
   const $sig = useService(SdkStateDefinition).for(componentId).getSignal(key, defaultValue);
   return [$sig.get(), (value) => $sig.set(value)];

package/dist/site/components/TextInput/manifest.js

@@ -1,5 +1,5 @@
 import { I as INTERACTIONS, D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
-import { D as DisplayNames, s as selectors } from "../chunks/constants2.js";
+import { D as DisplayNames, s as selectors } from "../chunks/constants3.js";
 import { g as getSelector } from "../chunks/manifest.js";
 const manifest = {
   id: "b8f7e3d2-4a5c-4e8f-9b2d-1c3e5f7a9b4d",

package/dist/site/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TimePickerProps } from './TimePicker.types';
+export default function TimePicker(props: TimePickerProps): React.JSX.Element;

package/dist/site/components/TimePicker/TimePicker.types.d.ts

@@ -0,0 +1,29 @@
+import { A11y, Direction } from '@wix/editor-react-types';
+import { SdkFunctionChangeableProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+import { TranslationKeys } from './constants';
+/** A viewer-facing translatable string key. */
+export type TranslationKey = keyof typeof TranslationKeys;
+/** Smallest editable time unit (React Aria `granularity`). */
+export type TimePickerGranularity = 'hour' | 'minute' | 'second';
+export type TimePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & {
+    /** Fires with the selected ISO time string (`HH:MM[:SS]`), or `''` when cleared. */
+    onChange?: (value: string) => void;
+    /** DOM `id` on the root `.timePicker` wrapper. */
+    id: string;
+    /** Appended to the root `.timePicker`. Use this for CSS-variable and per-element overrides. */
+    className: string;
+    /**
+     * The selected time as an ISO 24h `HH:MM[:SS]` string. The empty string
+     * means no time is selected.
+     */
+    value: string;
+    /** Writing direction applied to the root. */
+    direction?: Direction;
+    /** Accessibility attributes. `ariaLabel` labels the time picker for assistive tech. */
+    a11y?: A11y;
+    /** Platform-provided props. */
+    wix?: {
+        /** Spread on the preset wrapper. */
+        presetsWrapperProps?: Record<string, unknown>;
+    };
+};

package/dist/site/components/TimePicker/component.d.ts

@@ -0,0 +1,2 @@
+import { default as TimePicker } from './TimePicker';
+export default TimePicker;

package/dist/site/components/TimePicker/component.js

@@ -0,0 +1,146 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as clsx } from "../chunks/clsx.js";
+import { $ as $58246871e4652552$export$c9698ec7f05a07e1, a as $40825cdb76e74f70$export$7edc06cf1783b30f, b as $40825cdb76e74f70$export$336ab7fa954c4b5f, c as $40825cdb76e74f70$export$5eaee2322dd727eb } from "../chunks/DateField.js";
+import { $ as $2eb8e6d23f3d0cb0$export$a54013f0d02a8f82 } from "../chunks/I18nProvider.js";
+import { useService } from "@wix/services-manager-react";
+import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { T as TranslationsDefinition } from "../chunks/index5.js";
+import { a as getDataAttributes } from "../chunks/dataUtils.js";
+import { d as directionStyles } from "../chunks/direction.module.js";
+import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { E as EMPTY_VALUE, T as TestIds, s as selectors, a as TRANSLATIONS_NAMESPACE, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
+import { useState } from "react";
+import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../chunks/Group.js";
+const getTranslation = (translate, key, translationKeys, defaultTranslations) => {
+  const translationKey = translationKeys[key];
+  const translated = translate(translationKey);
+  return translated && translated !== translationKey ? translated : defaultTranslations[key];
+};
+const timePicker = "timePicker__j78My";
+const root = "root__dzkbY";
+const group = "group__6HZy7";
+const field = "field__mnQwh";
+const segment = "segment__OtazP";
+const styles = {
+  timePicker,
+  root,
+  group,
+  field,
+  segment
+};
+const readString = (prop) => typeof prop === "string" ? prop : EMPTY_VALUE;
+const toTimeValue = (iso) => {
+  if (!iso) {
+    return null;
+  }
+  try {
+    return $58246871e4652552$export$c9698ec7f05a07e1(iso);
+  } catch {
+    return null;
+  }
+};
+const pad = (n) => String(n).padStart(2, "0");
+const toIso = (time, granularity) => {
+  if (!time) {
+    return EMPTY_VALUE;
+  }
+  const hoursAndMinutes = `${pad(time.hour)}:${pad(time.minute)}`;
+  return granularity === "second" ? `${hoursAndMinutes}:${pad(time.second)}` : hoursAndMinutes;
+};
+const useTimePickerValue = (params) => {
+  const { value, onChange } = params;
+  const valueStr = readString(value);
+  const [timeValue, setTimeValue] = useState(
+    () => toTimeValue(valueStr)
+  );
+  const [prevValueStr, setPrevValueStr] = useState(valueStr);
+  if (prevValueStr !== valueStr) {
+    setPrevValueStr(valueStr);
+    setTimeValue(toTimeValue(valueStr));
+  }
+  const handleChange = (next) => {
+    setTimeValue(next);
+    onChange(toIso(next, "minute"));
+  };
+  return {
+    timeValue,
+    handleChange,
+    hasValue: Boolean(valueStr)
+  };
+};
+const renderSegments = (segment2) => /* @__PURE__ */ jsx($40825cdb76e74f70$export$336ab7fa954c4b5f, { segment: segment2, className: styles.segment });
+const TimePickerField = ({
+  clearButton
+}) => /* @__PURE__ */ jsxs(
+  $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
+  {
+    className: clsx(styles.group, selectors.group),
+    "data-testid": TestIds.group,
+    children: [
+      /* @__PURE__ */ jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: styles.field, "data-testid": TestIds.field, children: renderSegments }),
+      clearButton
+    ]
+  }
+);
+const noop = () => {
+};
+function TimePicker(props) {
+  const environmentService = useService(EnvironmentDefinition);
+  const { translate } = useService(TranslationsDefinition);
+  const translateByKey = translate(TRANSLATIONS_NAMESPACE);
+  const t = (key) => getTranslation(translateByKey, key, TranslationKeys, DefaultTranslations);
+  const {
+    id,
+    className = "",
+    direction,
+    a11y,
+    onChange = noop,
+    onFocus = noop,
+    onBlur = noop,
+    wix
+  } = props;
+  const { timeValue, handleChange } = useTimePickerValue({
+    value: props.value,
+    onChange
+  });
+  const locale = environmentService.language || "en-US";
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || t("ariaLabel");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: presetWrapperStyles.presetWrapper,
+      ...(wix == null ? void 0 : wix.presetsWrapperProps) || {},
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          id,
+          ...getDataAttributes(props),
+          className: clsx(
+            className,
+            styles.root,
+            selectors.root,
+            !direction && directionStyles.fallbackDirection
+          ),
+          dir: direction || void 0,
+          lang: environmentService.language,
+          "data-testid": TestIds.root,
+          children: /* @__PURE__ */ jsx($2eb8e6d23f3d0cb0$export$a54013f0d02a8f82, { locale, children: /* @__PURE__ */ jsx(
+            $40825cdb76e74f70$export$5eaee2322dd727eb,
+            {
+              className: styles.timePicker,
+              value: timeValue,
+              onChange: handleChange,
+              "aria-label": ariaLabel,
+              onFocus,
+              onBlur,
+              children: /* @__PURE__ */ jsx(TimePickerField, { clearButton: null })
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+export {
+  TimePicker as default
+};

package/dist/site/components/TimePicker/component.preview.d.ts

@@ -0,0 +1,2 @@
+import { default as TimePicker } from './TimePicker';
+export default TimePicker;

package/dist/site/components/TimePicker/components/TimePickerField.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+export declare const TimePickerField: ({ clearButton, }: {
+    clearButton: React.ReactNode;
+}) => React.JSX.Element;

package/dist/site/components/TimePicker/constants.d.ts

@@ -0,0 +1,32 @@
+export declare const DisplayNames: {
+    root: {
+        elementDisplayName: string;
+        data: {
+            value: string;
+        };
+        elements: {
+            timeInput: string;
+        };
+        cssCustomProperties: {};
+    };
+};
+/** The value that represents "no time selected". */
+export declare const EMPTY_VALUE = "";
+export declare const TRANSLATIONS_NAMESPACE = "timePicker";
+/** Viewer-facing string keys (translated via the Translations service). */
+export declare const TranslationKeys: {
+    readonly ariaLabel: "timePicker_aria_label";
+};
+/** English fallbacks used when a translation is missing. */
+export declare const DefaultTranslations: {
+    readonly ariaLabel: "Time picker";
+};
+export declare const TestIds: {
+    readonly root: "timepicker-root";
+    readonly group: "timepicker-group";
+    readonly field: "timepicker-field";
+};
+export declare const selectors: {
+    readonly root: "timePicker";
+    readonly group: "timePicker__group";
+};

package/dist/site/components/TimePicker/css.css

@@ -0,0 +1,64 @@
+.timePicker__j78My {
+  --field-background-color: var(--wst-primary-background-color, #ffffff);
+  --borderColor: var(--wst-system-line-1-color, #dfe5eb);
+  --borderWidth: 1px;
+  --borderStartStartRadius: 6px;
+  --borderStartEndRadius: 6px;
+  --borderEndStartRadius: 6px;
+  --borderEndEndRadius: 6px;
+}
+.root__dzkbY {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 120px;
+  max-width: 100%;
+  font: var(--font, normal normal normal 16px/1.5em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif);
+  color: var(--color, #2b2b2b);
+  text-align: start;
+}
+.timePicker__j78My {
+  display: flex;
+  flex-direction: column;
+}
+.group__6HZy7 {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  font: inherit;
+  color: inherit;
+  background: var(--field-background-color);
+  border-style: solid;
+  border-width: var(--borderWidth);
+  border-color: var(--borderColor);
+  border-start-start-radius: var(--borderStartStartRadius);
+  border-start-end-radius: var(--borderStartEndRadius);
+  border-end-start-radius: var(--borderEndStartRadius);
+  border-end-end-radius: var(--borderEndEndRadius);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.field__mnQwh {
+  display: inline-flex;
+  flex: 1;
+  min-width: 0;
+  gap: 1px;
+  font: inherit;
+  color: inherit;
+  white-space: nowrap;
+}
+.segment__OtazP {
+  padding: 0 2px;
+  border-radius: 3px;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  outline: none;
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}
+.presetWrapper__J1yzj {
+  display: contents;
+}

package/dist/site/components/TimePicker/hooks/useTimePickerValue.d.ts

@@ -0,0 +1,10 @@
+import { TimeValue } from 'react-aria-components';
+import { TimePickerProps } from '../TimePicker.types';
+export declare const useTimePickerValue: (params: {
+    value: TimePickerProps["value"];
+    onChange: NonNullable<TimePickerProps["onChange"]>;
+}) => {
+    timeValue: TimeValue | null;
+    handleChange: (next: TimeValue | null) => void;
+    hasValue: boolean;
+};

package/dist/site/components/TimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as TimePicker } from './component';