@wix/editor-react-components 1.2344.0 → 1.2346.0

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

@@ -5,13 +5,15 @@ 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/constants3.js";
+import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, f as $860f7da480e22816$export$b8473d3665f3a75a, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, h as $3985021b0ad6602f$export$37fb8590cf2c088c, i as $514c0188e459b4c0$export$9afb8bc826b033ea, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, u as useValidatedField, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, k as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/useValidatedField.js";
+import { s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE } from "../chunks/constants3.js";
 import { useService } from "@wix/services-manager-react";
 import { T as TranslationsDefinition } from "../chunks/index5.js";
-import { a as $fd2148440a13ec26$export$fc1a364ae1f3ff10, b as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, c as $860f7da480e22816$export$b8473d3665f3a75a, d as $d3e0e05bdfcf66bd$export$c24727297075ec6a, e as $3985021b0ad6602f$export$37fb8590cf2c088c, f as $514c0188e459b4c0$export$9afb8bc826b033ea, g as $ee014567cb39d3f0$export$ff05c3ac10437e03, h as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/Input.js";
-import { b as $3e6197669829fe11$export$40bfa8c7b0832715, c as $d1116acdf220c2da$export$4c014de7c8940b4c, d as $3274bf1495747a7b$export$5add1d006293d136, e as $bbaa08b3cd72f041$export$9d1611c77c2fe928, f as $23f2114a1b82827e$export$e58f029f0fbfdb29, g as $01b77f81d0f07f68$export$75b6ee27786ba447, h as $a049562f99e7db0e$export$f9c6924e160136d1, a 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 { c as $3e6197669829fe11$export$40bfa8c7b0832715, d as $d1116acdf220c2da$export$4c014de7c8940b4c, e as $3274bf1495747a7b$export$5add1d006293d136, f as $bbaa08b3cd72f041$export$9d1611c77c2fe928, g as $23f2114a1b82827e$export$e58f029f0fbfdb29, h as $01b77f81d0f07f68$export$75b6ee27786ba447, i as $a049562f99e7db0e$export$f9c6924e160136d1, a as $01b77f81d0f07f68$export$b04be29aa201d4f5, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Group.js";
+import { a as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, b as $f39a9eba43920ace$export$86427a43e3e48ebb, c as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../chunks/filterDOMProps.js";
 import { S as SdkStateDefinition } from "../chunks/index6.js";
+import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.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;
@@ -474,8 +476,12 @@ const hideNumberSpinner = "hideNumberSpinner__nYhia";
 const hasPrefix = "hasPrefix__RXMKp";
 const validationIndication = "validationIndication__GE20D";
 const label = "label__mbGIM";
+const labelRow = "labelRow__tN4T-";
+const tooltipButton = "tooltipButton__7D4vU";
+const infoIcon = "infoIcon__Ksarp";
+const tooltip = "tooltip__JnxIe";
 const hasLabel = "hasLabel__AGhlP";
-const requiredIndication = "requiredIndication__H3yrQ";
+const requiredIndicator = "requiredIndicator__RyrLe";
 const style = {
   root,
   inputWrapper,
@@ -485,8 +491,12 @@ const style = {
   hasPrefix,
   validationIndication,
   label,
+  labelRow,
+  tooltipButton,
+  infoIcon,
+  tooltip,
   hasLabel,
-  requiredIndication
+  requiredIndicator
 };
 const TranslationKeys = {
   NAMESPACE: "Text_Input",
@@ -569,7 +579,7 @@ const useSdkState = (componentId, key, defaultValue) => {
 const noop = () => {
 };
 const TextInput = (props, ref) => {
-  var _a, _b;
+  var _a;
   const {
     name,
     id,
@@ -577,6 +587,7 @@ const TextInput = (props, ref) => {
     dataTestId,
     inputType = "text",
     label: label2,
+    tooltip: tooltip2,
     placeholder,
     readOnly,
     required,
@@ -594,7 +605,7 @@ const TextInput = (props, ref) => {
     autoFocus,
     prefix: prefix2,
     phoneFormat = "",
-    errorMessageType = "tooltip",
+    errorMessageType = "inline",
     validateValue = noop,
     onBlur = noop,
     onFocus = noop,
@@ -615,7 +626,11 @@ const TextInput = (props, ref) => {
   const { translate } = useService(
     TranslationsDefinition
   );
-  const [sdkValue, setSdkValue] = useSdkState(props.wix.wixPath, "value", "");
+  const [sdkValue, setSdkValue] = useSdkState(
+    props.wix.wixPath,
+    "value",
+    props.defaultValue ?? ""
+  );
   const [sdkValidityIndication, setSdkValidityIndication] = useSdkState(
     props.wix.wixPath,
     "shouldShowValidityIndication",
@@ -661,11 +676,11 @@ const TextInput = (props, ref) => {
         (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
       },
       setCustomValidity: (message) => {
-        var _a2, _b2;
+        var _a2, _b;
         if (message.type === "message") {
           (_a2 = inputRef.current) == null ? void 0 : _a2.setCustomValidity(message.message);
         } else {
-          (_b2 = inputRef.current) == null ? void 0 : _b2.setCustomValidity(
+          (_b = inputRef.current) == null ? void 0 : _b.setCustomValidity(
             translateHtmlValidationMessage(message, {
               translations: props.translations,
               phoneFormat: props.phoneFormat
@@ -741,6 +756,31 @@ const TextInput = (props, ref) => {
     onChangeFn(((_a2 = inputRef.current) == null ? void 0 : _a2.value) ?? "");
     onHydrationComplete({ type: "onHydrationComplete" });
   }, []);
+  const useValidationContract = isExperimentOpen(
+    "specs.thunderbolt.textInputBreakingChange"
+  );
+  const nativeValidationMessage = ((_a = inputRef.current) == null ? void 0 : _a.validationMessage) ?? "";
+  const valueMissing = required && !value;
+  const intrinsic = valueMissing ? { valid: false, validationMessage: VALUE_MISSING_MESSAGE } : {
+    valid: !nativeValidationMessage,
+    validationMessage: nativeValidationMessage
+  };
+  const validityGate = props.showValidityIndication !== void 0 ? props.showValidityIndication : shouldShowValidityIndication;
+  const {
+    validity,
+    showValidityIndication: showIndication,
+    handleBlur: validateOnBlur
+  } = useValidatedField({
+    value,
+    intrinsic,
+    fieldValidity: useValidationContract ? props.fieldValidity : void 0,
+    showValidityIndication: validityGate,
+    onValidate: useValidationContract ? props.onValidate : void 0,
+    onValidityChange: useValidationContract ? props.onValidityChange : void 0
+  });
+  const showErrorIndication = useValidationContract ? showIndication : shouldShowValidityIndication;
+  const isInvalid = useValidationContract ? showIndication && !validity.valid : !!nativeValidationMessage && shouldShowValidityIndication;
+  const errorMessageToShow = useValidationContract ? validity.validationMessage : nativeValidationMessage;
   const _onBlur = (event) => {
     onBlur(event);
     if (valueChanged.current) {
@@ -752,6 +792,7 @@ const TextInput = (props, ref) => {
     valueChanged.current = false;
     setValidityIndication(true);
     setSdkValidityIndication(true);
+    validateOnBlur();
   };
   const _onClick = (event) => {
     if (!isDisabled) {
@@ -775,8 +816,7 @@ const TextInput = (props, ref) => {
   };
   const containerClasses = clsx(style.root, selectors.root, className, {
     [style.hasLabel]: !!label2,
-    [style.requiredIndication]: required,
-    [style.validationIndication]: !!shouldShowValidityIndication
+    [style.validationIndication]: showErrorIndication
   });
   const getMaxLength = () => {
     let updatedMaxLength = maxLength === null ? void 0 : maxLength;
@@ -790,7 +830,6 @@ const TextInput = (props, ref) => {
     ariaAttributes: { "aria-label": ariaLabel, ...restAriaAttributes }
   } = getAccessibilityAttributes({ ariaAttributes });
   const hasFocus = () => !!inputRef.current && inputRef.current === document.activeElement;
-  const hasInvalidErrorMessage = !!((_a = inputRef.current) == null ? void 0 : _a.validationMessage) && shouldShowValidityIndication;
   const inputClasses = clsx(style.input, HAS_CUSTOM_FOCUS_CLASSNAME, {
     [style.hideNumberSpinner]: numberSpinnerHidden,
     [style.hasPrefix]: !!prefix2
@@ -813,7 +852,9 @@ const TextInput = (props, ref) => {
     name,
     type: inputType,
     placeholder,
-    pattern,
+    // An empty pattern must NOT set the attribute — `pattern=""` matches only the
+    // empty string, so it would reject every non-empty value.
+    pattern: pattern || void 0,
     maxLength: getMaxLength(),
     minLength: getMinLength(),
     autoComplete: autoComplete ? autocompleteToken || "on" : autoComplete_ || "off",
@@ -825,7 +866,7 @@ const TextInput = (props, ref) => {
     onFocus,
     onKeyDown: onKeyPress,
     onBlur: _onBlur,
-    "aria-invalid": hasInvalidErrorMessage,
+    "aria-invalid": isInvalid,
     ...ariaLabel && { "aria-label": ariaLabel },
     ...!required && { "aria-required": false },
     ...restAriaAttributes
@@ -844,7 +885,33 @@ const TextInput = (props, ref) => {
       onMouseLeave: _onMouseLeave,
       lang: language,
       children: /* @__PURE__ */ jsxs($bcdf0525bf22703d$export$2c73285ae9390cec, { ...textFieldProps, children: [
-        label2 && /* @__PURE__ */ jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: labelClasses, htmlFor: `input_${id}`, children: label2 }),
+        (label2 || tooltip2) && /* @__PURE__ */ jsxs("div", { className: style.labelRow, children: [
+          label2 && /* @__PURE__ */ jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: labelClasses, htmlFor: `input_${id}`, children: [
+            label2,
+            required && /* @__PURE__ */ jsx(
+              RequiredIndicator,
+              {
+                className: clsx(
+                  style.requiredIndicator,
+                  selectors.requiredIndicator
+                ),
+                "data-testid": TestIds.requiredIndicator
+              }
+            )
+          ] }),
+          tooltip2 && /* @__PURE__ */ jsxs($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, children: [
+            /* @__PURE__ */ jsx(
+              $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+              {
+                className: style.tooltipButton,
+                "data-testid": TestIds.tooltipButton,
+                "aria-label": tooltip2,
+                children: /* @__PURE__ */ jsx(InfoCircleSmall_default, { "aria-hidden": true, className: style.infoIcon })
+              }
+            ),
+            /* @__PURE__ */ jsx($4e3b923658d69c60$export$28c660c63b792dea, { className: style.tooltip, offset: 6, children: tooltip2 })
+          ] })
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: style.inputWrapper, children: [
           prefix2 && /* @__PURE__ */ jsx("div", { className: style.prefix, "data-testid": "prefix", children: prefix2 }),
           /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { ...inputProps })
@@ -853,8 +920,8 @@ const TextInput = (props, ref) => {
           InlineErrorMessage,
           {
             errorMessageType,
-            errorMessage: (_b = inputRef.current) == null ? void 0 : _b.validationMessage,
-            shouldShowValidityIndication,
+            errorMessage: errorMessageToShow,
+            shouldShowValidityIndication: showErrorIndication,
             translations,
             componentViewMode: (getPreviewMode == null ? void 0 : getPreviewMode()) ? "preview" : "editor"
           }

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

@@ -1,6 +1,18 @@
 export declare const selectors: {
     readonly root: "textInput";
+    readonly requiredIndicator: "textInput__required-indicator";
 };
+export declare const TestIds: {
+    readonly requiredIndicator: "text-input-required-indicator";
+    readonly tooltipButton: "text-input-tooltip-button";
+};
+/**
+ * Intrinsic `required` failure message (pre-resolved; i18n is a shared TODO,
+ * matching the other validation-contract inputs). `required` is surfaced as
+ * `aria-required` (not the native `required` attribute), so the browser never
+ * reports `valueMissing` — the empty-required check is computed in JS instead.
+ */
+export declare const VALUE_MISSING_MESSAGE = "This field is required";
 export declare const DesignStates: {
     readonly root: {
         readonly hover: {
@@ -41,6 +53,7 @@ export declare const DisplayNames: {
     };
     data: {
         value: string;
+        defaultValue: string;
         isDisabled: string;
         name: string;
         minLength: string;

package/dist/site/components/TextInput/css.css

@@ -168,24 +168,67 @@
 .root__zQlRz .label__mbGIM {
   display: none;
 }
+.root__zQlRz .labelRow__tN4T- {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: var(--labelMarginBottom);
+}
+.root__zQlRz .tooltipButton__7D4vU {
+  flex: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--labelTextColor);
+  cursor: pointer;
+  opacity: 0.65;
+}
+.root__zQlRz .tooltipButton__7D4vU[data-hovered], .root__zQlRz .tooltipButton__7D4vU[data-focus-visible] {
+  opacity: 1;
+}
+.root__zQlRz .infoIcon__Ksarp {
+  width: 16px;
+  height: 16px;
+}
+.root__zQlRz .tooltip__JnxIe {
+  max-width: 220px;
+  padding: 6px 10px;
+  color: #ffffff;
+  background: #2b2b2b;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  font: var(--labelFont);
+}
 .root__zQlRz.hasLabel__AGhlP .label__mbGIM {
   word-break: break-word;
   display: inline-block;
   line-height: 1;
-  margin-bottom: var(--labelMarginBottom);
   padding-inline-start: var(--labelPaddingInlineStart);
   padding-inline-end: var(--labelPaddingInlineEnd);
   text-align: var(--labelAlign, inherit);
   color: var(--labelTextColor);
   font: var(--labelFont);
 }
-.root__zQlRz.hasLabel__AGhlP.requiredIndication__H3yrQ .label__mbGIM::after {
-  display: inline;
-  content: " *";
+.root__zQlRz.hasLabel__AGhlP .label__mbGIM .requiredIndicator__RyrLe {
   color: var(--requiredTextColor);
 }
 .root__zQlRz.validationIndication__GE20D .input__fyTfx:invalid {
   background-color: var(--errorBackground, #ffffff);
   border-color: var(--errorBorderColor, #e3e3e3);
   border-width: var(--errorBorderWidth, 1px);
+}
+.requiredIndicator__j5mIH {
+  display: inline-block;
+  width: 0.6em;
+  height: 0.6em;
+  margin-inline-start: 0.2em;
+  vertical-align: super;
+  color: inherit;
 }

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

@@ -3,6 +3,7 @@ import { D as DesignStates, a as DisplayNames, s as selectors } from "../chunks/
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, b as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { m as manifestValidation } from "../chunks/manifest2.js";
 const manifest = {
   id: "b8f7e3d2-4a5c-4e8f-9b2d-1c3e5f7a9b4d",
   type: "wixEditorElements.TextInput",
@@ -371,6 +372,10 @@ const manifest = {
         displayName: DisplayNames.data.value,
         dataType: DATA.DATA_TYPE.text
       },
+      defaultValue: {
+        displayName: DisplayNames.data.defaultValue,
+        dataType: DATA.DATA_TYPE.text
+      },
       isDisabled: {
         displayName: DisplayNames.data.isDisabled,
         dataType: DATA.DATA_TYPE.booleanValue,
@@ -501,6 +506,7 @@ const manifest = {
       errorMessageType: {
         displayName: DisplayNames.data.errorMessageType,
         dataType: DATA.DATA_TYPE.textEnum,
+        defaultValue: "inline",
         [DATA.DATA_TYPE.textEnum]: {
           options: [
             { value: "inline", displayName: DisplayNames.options.inline },
@@ -533,7 +539,8 @@ const manifest = {
       },
       ...manifestChangeable(),
       ...manifestInputable(),
-      ...manifestFocusable()
+      ...manifestFocusable(),
+      ...manifestValidation({ valueDataType: DATA.DATA_TYPE.text })
     },
     interactions: {
       triggers: [

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

@@ -1,5 +1,6 @@
 import { A11y, Direction } from '@wix/editor-react-types';
 import { SdkFunctionChangeableProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+import { FieldValidationProps } from '../../../utils/validation/types';
 import { TranslationKeys } from './constants';
 /** A viewer-facing translatable string key. */
 export type TranslationKey = keyof typeof TranslationKeys;
@@ -7,7 +8,7 @@ export type TranslationKey = keyof typeof TranslationKeys;
 export type TimePickerGranularity = 'hour' | 'minute' | 'second';
 /** `auto` defers to the locale; `12`/`24` force the hour cycle. */
 export type TimePickerHourCycle = 'auto' | '12' | '24';
-export type TimePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & {
+export type TimePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & FieldValidationProps<string> & {
     /** Fires with the selected ISO time string (`HH:MM[:SS]`), or `''` when cleared. */
     onChange?: (value: string) => void;
     /** DOM `id` on the root `.timePicker` wrapper. */
@@ -25,6 +26,11 @@ export type TimePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & Sdk
      * means no time is selected.
      */
     value: string;
+    /**
+     * Uncontrolled initial selected time (ISO string, e.g. '14:30'). Used
+     * only when `value` is not provided (component owns its state).
+     */
+    defaultValue?: string;
     /** Optional text label rendered above the field. */
     label: string;
     /** Site-facing helper text rendered under the field. */

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

@@ -1,18 +1,18 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Button.js";
-import { $ as $58246871e4652552$export$c9698ec7f05a07e1, a as $40825cdb76e74f70$export$7edc06cf1783b30f, b as $40825cdb76e74f70$export$336ab7fa954c4b5f, c as $40825cdb76e74f70$export$5eaee2322dd727eb, d as $4e3b923658d69c60$export$8c610744efcf8a1d, e as $4e3b923658d69c60$export$28c660c63b792dea } from "../chunks/Tooltip.js";
-import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, a as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../chunks/Input.js";
-import { $ as $2eb8e6d23f3d0cb0$export$a54013f0d02a8f82 } from "../chunks/I18nProvider.js";
+import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, a as $01b77f81d0f07f68$export$b04be29aa201d4f5, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Group.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 { u as useValidatedField, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, b as $514c0188e459b4c0$export$5f1af8db9871e1d6, c as $ee014567cb39d3f0$export$f551688fc98f2e09 } from "../chunks/useValidatedField.js";
+import { $ as $2eb8e6d23f3d0cb0$export$a54013f0d02a8f82 } from "../chunks/filterDOMProps.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 defaultValues, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
+import { E as EMPTY_VALUE, T as TestIds, s as selectors, a as TRANSLATIONS_NAMESPACE, d as defaultValues, V as VALUE_MISSING_MESSAGE, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
+import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const getTranslation = (translate, key, translationKeys, defaultTranslations) => {
@@ -29,6 +29,7 @@ const tooltip = "tooltip__FTZhM";
 const group = "group__6HZy7";
 const field = "field__mnQwh";
 const description = "description__ePprf";
+const errorMessage = "errorMessage__zxbOJ";
 const segment = "segment__OtazP";
 const clearButton = "clearButton__Bto7s";
 const clearIcon = "clearIcon__x11eI";
@@ -42,6 +43,7 @@ const styles = {
   group,
   field,
   description,
+  errorMessage,
   segment,
   clearButton,
   clearIcon
@@ -85,7 +87,10 @@ const useTimePickerValue = (params) => {
   return {
     timeValue,
     handleChange,
-    hasValue: Boolean(valueStr)
+    // Key off the live parsed value, not the raw prop — a standalone picker
+    // updates `timeValue` internally while `props.value` may stay stale, so a
+    // prop-based check would keep the clear control / required error out of sync.
+    hasValue: Boolean(timeValue)
   };
 };
 const useTimeConstraints = (params) => {
@@ -133,6 +138,10 @@ function TimePicker(props) {
     onChange = noop,
     onFocus = noop,
     onBlur = noop,
+    fieldValidity,
+    showValidityIndication,
+    onValidate,
+    onValidityChange,
     wix
   } = props;
   const label2 = readString(props.label);
@@ -140,11 +149,31 @@ function TimePicker(props) {
   const tooltip2 = readString(props.tooltip);
   const isDisabled = readBool(props.isDisabled, false);
   const isRequired = readBool(props.required, defaultValues.required);
+  const isControlled = props.value !== void 0;
+  const sourceValue = isControlled ? props.value : props.defaultValue;
   const { timeValue, handleChange, hasValue } = useTimePickerValue({
-    value: props.value,
+    value: sourceValue,
     onChange,
     granularity
   });
+  const intrinsic = isRequired && !hasValue ? { valid: false, validationMessage: VALUE_MISSING_MESSAGE } : { valid: true, validationMessage: "" };
+  const {
+    validity,
+    showValidityIndication: showIndication,
+    handleBlur: validateOnBlur
+  } = useValidatedField({
+    value: readString(props.value),
+    intrinsic,
+    fieldValidity,
+    showValidityIndication,
+    onValidate,
+    onValidityChange
+  });
+  const isInvalid = showIndication && !validity.valid;
+  const handleBlur = (event) => {
+    onBlur(event);
+    validateOnBlur();
+  };
   const { minValue, maxValue } = useTimeConstraints({
     minTime: props.minTime,
     maxTime: props.maxTime
@@ -200,12 +229,22 @@ function TimePicker(props) {
               isDisabled,
               isReadOnly: readOnly,
               isRequired,
+              isInvalid,
               "aria-label": ariaLabel,
               onFocus,
-              onBlur,
+              onBlur: handleBlur,
               children: [
                 label2 || tooltip2 ? /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
-                  label2 ? /* @__PURE__ */ jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: clsx(styles.label, selectors.label), children: label2 }) : null,
+                  label2 ? /* @__PURE__ */ jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: clsx(styles.label, selectors.label), children: [
+                    label2,
+                    isRequired && /* @__PURE__ */ jsx(
+                      RequiredIndicator,
+                      {
+                        className: selectors.requiredIndicator,
+                        "data-testid": TestIds.requiredIndicator
+                      }
+                    )
+                  ] }) : null,
                   tooltip2 ? /* @__PURE__ */ jsxs($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, children: [
                     /* @__PURE__ */ jsx(
                       $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
@@ -228,7 +267,18 @@ function TimePicker(props) {
                   ] }) : null
                 ] }) : null,
                 /* @__PURE__ */ jsx(TimePickerField, { clearButton: clearButton2 }),
-                description2 ? /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: styles.description, children: description2 }) : null
+                description2 ? /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: styles.description, children: description2 }) : null,
+                isInvalid && validity.validationMessage ? /* @__PURE__ */ jsx(
+                  $ee014567cb39d3f0$export$f551688fc98f2e09,
+                  {
+                    className: clsx(
+                      styles.errorMessage,
+                      selectors.errorMessage
+                    ),
+                    "data-testid": TestIds.errorMessage,
+                    children: validity.validationMessage
+                  }
+                ) : null
               ]
             }
           ) })

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

@@ -3,6 +3,7 @@ export declare const DisplayNames: {
         elementDisplayName: string;
         data: {
             value: string;
+            defaultValue: string;
             granularity: {
                 displayName: string;
                 options: {
@@ -105,9 +106,15 @@ export declare const TestIds: {
     readonly field: "timepicker-field";
     readonly clearButton: "timepicker-clear-button";
     readonly tooltipButton: "timepicker-tooltip-button";
+    readonly errorMessage: "timepicker-error-message";
+    readonly requiredIndicator: "timepicker-required-indicator";
 };
 export declare const selectors: {
     readonly root: "timePicker";
     readonly label: "timePicker__label";
+    readonly requiredIndicator: "timePicker__required-indicator";
     readonly group: "timePicker__group";
+    readonly errorMessage: "timePicker__error-message";
 };
+/** Intrinsic `required` failure message (pre-resolved; i18n is a shared TODO). */
+export declare const VALUE_MISSING_MESSAGE = "This field is required";

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

@@ -144,6 +144,11 @@
   font-size: 12px;
   opacity: 0.7;
 }
+.errorMessage__zxbOJ {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--errorColor, var(--wst-error-color, #e21c21));
+}
 .segment__OtazP {
   padding: 0 2px;
   border-radius: 3px;
@@ -191,4 +196,12 @@
 }
 .presetWrapper__J1yzj {
   display: contents;
+}
+.requiredIndicator__j5mIH {
+  display: inline-block;
+  width: 0.6em;
+  height: 0.6em;
+  margin-inline-start: 0.2em;
+  vertical-align: super;
+  color: inherit;
 }

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

@@ -1,7 +1,7 @@
 import { TimeValue } from 'react-aria-components';
 import { TimePickerGranularity, TimePickerProps } from '../TimePicker.types';
 export declare const useTimePickerValue: (params: {
-    value: TimePickerProps["value"];
+    value: TimePickerProps["value"] | undefined;
     onChange: NonNullable<TimePickerProps["onChange"]>;
     granularity: TimePickerGranularity;
 }) => {

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

@@ -3,6 +3,7 @@ import { c as DisplayNames, d as defaultValues, e as DesignStates, s as selector
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { m as manifestValidation } from "../chunks/manifest2.js";
 const cssProperties = {
   font: {},
   color: {},
@@ -101,6 +102,10 @@ const manifest = {
         dataType: DATA.DATA_TYPE.localTime,
         displayName: DisplayNames.root.data.value
       },
+      defaultValue: {
+        dataType: DATA.DATA_TYPE.localTime,
+        displayName: DisplayNames.root.data.defaultValue
+      },
       granularity: {
         dataType: DATA.DATA_TYPE.textEnum,
         displayName: DisplayNames.root.data.granularity.displayName,
@@ -201,7 +206,9 @@ const manifest = {
         dataType: DATA.DATA_TYPE.direction
       },
       ...manifestChangeable(),
-      ...manifestFocusable()
+      ...manifestFocusable(),
+      // The bound value is an ISO time string, so `onValidate` carries text.
+      ...manifestValidation({ valueDataType: DATA.DATA_TYPE.text })
     },
     displayFilters: {
       data: {