@multiplatform.one/forms 6.0.0

package/dist/cjs/fields/TextArea/index.cjs

@@ -0,0 +1,266 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var TextArea_exports = {};
+__export(TextArea_exports, {
+  TextArea: () => TextArea
+});
+module.exports = __toCommonJS(TextArea_exports);
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_Skeleton = require("../../Skeleton/index.cjs");
+var import_fieldLayout = require("../../fieldLayout.cjs");
+var import_InputParts = require("../../InputParts/index.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_utils = require("../../shared/utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function TextArea({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  disabled,
+  readOnly,
+  size,
+  id: idProp,
+  value,
+  defaultValue,
+  onChange,
+  onChangeText,
+  onBlur,
+  placeholder,
+  textAreaProps,
+  numberOfLines,
+  maxLength,
+  showCount = false,
+  autoResize = false,
+  minRows = 3,
+  maxRows = 10,
+  countPosition = "bottom-right",
+  textAreaRef: textAreaRefProp,
+  renderOverlay,
+  skeleton,
+  compact
+}) {
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  const theme = (0, import_tamagui.useTheme)();
+  const [charCount, setCharCount] = (0, import_react.useState)(() => (value ?? defaultValue ?? "").length);
+  const internalRef = (0, import_react.useRef)(null);
+  const textAreaRef = textAreaRefProp ? textAreaRefProp : internalRef;
+  const [autoHeight, setAutoHeight] = (0, import_react.useState)(void 0);
+  const resolvedSizeToken = size || knobProps.sizeToken;
+  const minHeightPx = (0, import_utils.getFieldHeight)(resolvedSizeToken, minRows || 3);
+  const maxHeightPx = (0, import_utils.getFieldHeight)(resolvedSizeToken, maxRows);
+  const measureAndResize = (0, import_react.useCallback)(() => {
+    if (!autoResize || !import_tamagui.isWeb) return;
+    const textAreaElement = textAreaRef.current;
+    if (!textAreaElement) return;
+    textAreaElement.style.height = "auto";
+    const clamped = Math.min(Math.max(textAreaElement.scrollHeight, minHeightPx), maxHeightPx);
+    textAreaElement.style.height = `${clamped}px`;
+    setAutoHeight(clamped);
+  }, [autoResize, minHeightPx, maxHeightPx]);
+  (0, import_react.useEffect)(() => {
+    if (autoResize && import_tamagui.isWeb) {
+      requestAnimationFrame(measureAndResize);
+    }
+  }, [autoResize, measureAndResize, value, defaultValue]);
+  const handleContentSizeChange = (0, import_react.useCallback)(e => {
+    if (!autoResize) return;
+    const contentHeight = e.nativeEvent?.contentSize?.height;
+    if (contentHeight != null) {
+      setAutoHeight(Math.min(Math.max(contentHeight, minHeightPx), maxHeightPx));
+    }
+  }, [autoResize, minHeightPx, maxHeightPx]);
+  if (skeleton) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
+      size: size || knobProps.sizeToken,
+      children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "text",
+        width: "30%",
+        height: 14
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: minHeightPx
+      })]
+    });
+  }
+  const renderCount = length => {
+    if (!showCount) return null;
+    const isOverLimit = maxLength != null && length > maxLength;
+    const text = maxLength != null ? `${length}/${maxLength}` : `${length} characters`;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      justifyContent: countPosition.endsWith("right") ? "flex-end" : "flex-start",
+      ...(countPosition.startsWith("top") ? {
+        marginBottom: "$2"
+      } : {
+        marginTop: "$2"
+      }),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+        size: "$2",
+        color: isOverLimit ? import_colorRamps.formCommonColors.error : import_colorRamps.formCommonColors.muted,
+        children: text
+      })
+    });
+  };
+  const cappedRadius = (0, import_utils.clampRadiusForLargeComponent)(knobProps.borderRadius.borderRadius);
+  const resizeStyle = autoResize ? {
+    minHeight: minHeightPx,
+    maxHeight: maxHeightPx,
+    ...(autoHeight != null ? {
+      height: autoHeight
+    } : void 0),
+    overflow: autoHeight != null && autoHeight >= maxHeightPx ? "scroll" : "hidden"
+  } : numberOfLines ? {
+    numberOfLines,
+    minHeight: (0, import_utils.getFieldHeight)(resolvedSizeToken, numberOfLines)
+  } : {
+    numberOfLines: minRows,
+    minHeight: minHeightPx
+  };
+  const isControlled = value !== void 0;
+  const renderTextArea = (textValue, handleChange, handleBlur, hasError) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [showCount && countPosition.startsWith("top") && renderCount(charCount), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      position: "relative",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
+        height: "auto",
+        borderRadius: cappedRadius,
+        ...(disabled ? {
+          opacity: 0.5
+        } : void 0),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.TextArea, {
+          innerRef: textAreaRef,
+          ...knobProps.body,
+          color: knobProps.textAccentColor,
+          backgroundColor: "transparent",
+          borderWidth: 0,
+          borderColor: "transparent",
+          size: knobProps.sizeToken,
+          ...resizeStyle,
+          multiline: true,
+          ...textAreaProps,
+          ...(import_tamagui.isWeb ? {
+            outlineWidth: 0,
+            focusStyle: {
+              outlineWidth: 0
+            },
+            focusVisibleStyle: {
+              outlineWidth: 0
+            }
+          } : void 0),
+          placeholderTextColor: theme.color7?.val ?? "$color7",
+          ...(maxLength != null ? {
+            maxLength
+          } : void 0),
+          ...(placeholder !== void 0 ? {
+            placeholder
+          } : void 0),
+          disabled,
+          readOnly: !!readOnly || !!disabled,
+          ...(disabled ? {
+            cursor: "not-allowed"
+          } : void 0),
+          ...(readOnly ? {
+            "aria-readonly": true
+          } : void 0),
+          "aria-required": required || void 0,
+          "aria-invalid": hasError || void 0,
+          id,
+          ...(isControlled ? {
+            value: textValue
+          } : {
+            defaultValue: textValue
+          }),
+          onChange,
+          onChangeText: text => {
+            if (disabled || readOnly) return;
+            setCharCount(text.length);
+            handleChange?.(text);
+            onChangeText?.(text);
+            measureAndResize();
+          },
+          ...(autoResize && !import_tamagui.isWeb ? {
+            onContentSizeChange: handleContentSizeChange
+          } : void 0),
+          ...(handleBlur ? {
+            onBlur: handleBlur
+          } : void 0)
+        })
+      }), renderOverlay?.()]
+    }), showCount && countPosition.startsWith("bottom") && renderCount(charCount)]
+  });
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      helperText,
+      required,
+      size,
+      knobProps,
+      onBlur,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: size || knobProps.sizeToken,
+        children: renderTextArea(value ?? defaultValue, void 0, void 0, !!error)
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = (0, import_utils.getFieldError)(field, error);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size,
+        knobProps,
+        onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+          size: size || knobProps.sizeToken,
+          children: renderTextArea(field.state.value, text => field.handleChange(text), void 0, !!resolvedError)
+        })
+      });
+    }
+  });
+}

package/dist/cjs/fields/TextArea/index.native.js

@@ -0,0 +1,280 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var TextArea_exports = {};
+__export(TextArea_exports, {
+  TextArea: () => TextArea
+});
+module.exports = __toCommonJS(TextArea_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_Skeleton = require("../../Skeleton/index.native.js");
+var import_fieldLayout = require("../../fieldLayout.native.js");
+var import_InputParts = require("../../InputParts/index.native.js");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_utils = require("../../shared/utils.native.js");
+function TextArea(param) {
+  var {
+    name,
+    form: formProp,
+    validators,
+    label,
+    labelProps,
+    helperText,
+    error,
+    required,
+    disabled,
+    readOnly,
+    size,
+    id: idProp,
+    value,
+    defaultValue,
+    onChange,
+    onChangeText,
+    onBlur,
+    placeholder,
+    textAreaProps,
+    numberOfLines,
+    maxLength,
+    showCount = false,
+    autoResize = false,
+    minRows = 3,
+    maxRows = 10,
+    countPosition = "bottom-right",
+    textAreaRef: textAreaRefProp,
+    renderOverlay,
+    skeleton,
+    compact
+  } = param;
+  var {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  var theme = (0, import_tamagui.useTheme)();
+  var [charCount, setCharCount] = (0, import_react.useState)(function () {
+    var _ref;
+    return ((_ref = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref !== void 0 ? _ref : "").length;
+  });
+  var internalRef = (0, import_react.useRef)(null);
+  var textAreaRef = textAreaRefProp ? textAreaRefProp : internalRef;
+  var [autoHeight, setAutoHeight] = (0, import_react.useState)(void 0);
+  var resolvedSizeToken = size || knobProps.sizeToken;
+  var minHeightPx = (0, import_utils.getFieldHeight)(resolvedSizeToken, minRows || 3);
+  var maxHeightPx = (0, import_utils.getFieldHeight)(resolvedSizeToken, maxRows);
+  var measureAndResize = (0, import_react.useCallback)(function () {
+    if (!autoResize || !import_tamagui.isWeb) return;
+    var textAreaElement = textAreaRef.current;
+    if (!textAreaElement) return;
+    textAreaElement.style.height = "auto";
+    var clamped = Math.min(Math.max(textAreaElement.scrollHeight, minHeightPx), maxHeightPx);
+    textAreaElement.style.height = `${clamped}px`;
+    setAutoHeight(clamped);
+  }, [autoResize, minHeightPx, maxHeightPx]);
+  (0, import_react.useEffect)(function () {
+    if (autoResize && import_tamagui.isWeb) {
+      requestAnimationFrame(measureAndResize);
+    }
+  }, [autoResize, measureAndResize, value, defaultValue]);
+  var handleContentSizeChange = (0, import_react.useCallback)(function (e) {
+    var _e_nativeEvent_contentSize, _e_nativeEvent;
+    if (!autoResize) return;
+    var contentHeight = (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : (_e_nativeEvent_contentSize = _e_nativeEvent.contentSize) === null || _e_nativeEvent_contentSize === void 0 ? void 0 : _e_nativeEvent_contentSize.height;
+    if (contentHeight != null) {
+      setAutoHeight(Math.min(Math.max(contentHeight, minHeightPx), maxHeightPx));
+    }
+  }, [autoResize, minHeightPx, maxHeightPx]);
+  if (skeleton) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
+      size: size || knobProps.sizeToken,
+      children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "text",
+        width: "30%",
+        height: 14
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: minHeightPx
+      })]
+    });
+  }
+  var renderCount = function renderCount2(length) {
+    if (!showCount) return null;
+    var isOverLimit = maxLength != null && length > maxLength;
+    var text = maxLength != null ? `${length}/${maxLength}` : `${length} characters`;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      justifyContent: countPosition.endsWith("right") ? "flex-end" : "flex-start",
+      ...(countPosition.startsWith("top") ? {
+        marginBottom: "$2"
+      } : {
+        marginTop: "$2"
+      }),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+        size: "$2",
+        color: isOverLimit ? import_colorRamps.formCommonColors.error : import_colorRamps.formCommonColors.muted,
+        children: text
+      })
+    });
+  };
+  var cappedRadius = (0, import_utils.clampRadiusForLargeComponent)(knobProps.borderRadius.borderRadius);
+  var resizeStyle = autoResize ? {
+    minHeight: minHeightPx,
+    maxHeight: maxHeightPx,
+    ...(autoHeight != null ? {
+      height: autoHeight
+    } : void 0),
+    overflow: autoHeight != null && autoHeight >= maxHeightPx ? "scroll" : "hidden"
+  } : numberOfLines ? {
+    numberOfLines,
+    minHeight: (0, import_utils.getFieldHeight)(resolvedSizeToken, numberOfLines)
+  } : {
+    numberOfLines: minRows,
+    minHeight: minHeightPx
+  };
+  var isControlled = value !== void 0;
+  var renderTextArea = function renderTextArea2(textValue, handleChange, handleBlur, hasError) {
+    var _ref;
+    var _theme_color7;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [showCount && countPosition.startsWith("top") && renderCount(charCount), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        position: "relative",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
+          height: "auto",
+          borderRadius: cappedRadius,
+          ...(disabled ? {
+            opacity: 0.5
+          } : void 0),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.TextArea, {
+            innerRef: textAreaRef,
+            ...knobProps.body,
+            color: knobProps.textAccentColor,
+            backgroundColor: "transparent",
+            borderWidth: 0,
+            borderColor: "transparent",
+            size: knobProps.sizeToken,
+            ...resizeStyle,
+            multiline: true,
+            ...textAreaProps,
+            ...(import_tamagui.isWeb ? {
+              outlineWidth: 0,
+              focusStyle: {
+                outlineWidth: 0
+              },
+              focusVisibleStyle: {
+                outlineWidth: 0
+              }
+            } : void 0),
+            placeholderTextColor: (_ref = (_theme_color7 = theme.color7) === null || _theme_color7 === void 0 ? void 0 : _theme_color7.val) !== null && _ref !== void 0 ? _ref : "$color7",
+            ...(maxLength != null ? {
+              maxLength
+            } : void 0),
+            ...(placeholder !== void 0 ? {
+              placeholder
+            } : void 0),
+            disabled,
+            readOnly: !!readOnly || !!disabled,
+            ...(disabled ? {
+              cursor: "not-allowed"
+            } : void 0),
+            ...(readOnly ? {
+              "aria-readonly": true
+            } : void 0),
+            "aria-required": required || void 0,
+            "aria-invalid": hasError || void 0,
+            id,
+            ...(isControlled ? {
+              value: textValue
+            } : {
+              defaultValue: textValue
+            }),
+            onChange,
+            onChangeText: function onChangeText1(text) {
+              if (disabled || readOnly) return;
+              setCharCount(text.length);
+              handleChange === null || handleChange === void 0 ? void 0 : handleChange(text);
+              onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
+              measureAndResize();
+            },
+            ...(autoResize && !import_tamagui.isWeb ? {
+              onContentSizeChange: handleContentSizeChange
+            } : void 0),
+            ...(handleBlur ? {
+              onBlur: handleBlur
+            } : void 0)
+          })
+        }), renderOverlay === null || renderOverlay === void 0 ? void 0 : renderOverlay()]
+      }), showCount && countPosition.startsWith("bottom") && renderCount(charCount)]
+    });
+  };
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      helperText,
+      required,
+      size,
+      knobProps,
+      onBlur,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: size || knobProps.sizeToken,
+        children: renderTextArea(value !== null && value !== void 0 ? value : defaultValue, void 0, void 0, !!error)
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: function children(field) {
+      var resolvedError = (0, import_utils.getFieldError)(field, error);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size,
+        knobProps,
+        onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+          size: size || knobProps.sizeToken,
+          children: renderTextArea(field.state.value, function (text) {
+            return field.handleChange(text);
+          }, void 0, !!resolvedError)
+        })
+      });
+    }
+  });
+}
+//# sourceMappingURL=index.native.js.map

package/dist/cjs/fields/TextArea/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","TextArea_exports","__export","TextArea","module","exports","import_jsx_runtime","require","import_react","import_tamagui","import_Skeleton","import_fieldLayout","import_InputParts","import_colorRamps","import_utils","param","name","form","formProp","validators","label","labelProps","helperText","error","required","disabled","readOnly","size","id","idProp","defaultValue","onChange","onChangeText","onBlur","placeholder","textAreaProps","numberOfLines","maxLength","showCount","autoResize","minRows","maxRows","countPosition","textAreaRef","textAreaRefProp","renderOverlay","skeleton","compact","resolvedForm","knobProps","useFormField","resolvedValidators","useResolvedValidators","theme","useTheme","charCount","setCharCount","useState","_ref","length","internalRef","useRef","autoHeight","setAutoHeight","resolvedSizeToken","sizeToken","minHeightPx","getFieldHeight","maxHeightPx","measureAndResize","useCallback","isWeb","textAreaElement","current","style","height","clamped","Math","min","max","scrollHeight","useEffect","requestAnimationFrame","handleContentSizeChange","e","_e_nativeEvent_contentSize","_e_nativeEvent","contentHeight","nativeEvent","contentSize","jsxs","Input","children","jsx","Skeleton","variant","width","renderCount","renderCount2","isOverLimit","text","XStack","justifyContent","endsWith","startsWith","marginBottom","marginTop","Paragraph","color","formCommonColors","muted","cappedRadius","clampRadiusForLargeComponent","borderRadius","resizeStyle","minHeight","maxHeight","overflow","isControlled","renderTextArea","renderTextArea2","textValue","handleChange","handleBlur","hasError","_theme_color7","Fragment","YStack","position","Box","opacity","innerRef","body","textAccentColor","backgroundColor","borderWidth","borderColor","multiline","outlineWidth","focusStyle","focusVisibleStyle","placeholderTextColor","color7","val","cursor","onChangeText1","onContentSizeChange","FieldLayout"],"sources":["../../../../src/fields/TextArea/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/fields/TimePicker/TimePicker.spec.cjs

@@ -0,0 +1,91 @@
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_Form = require("../../Form/index.cjs");
+var import_index = require("./index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+(0, import_vitest.describe)("TimePicker", () => {
+  (0, import_vitest.describe)("without form context", () => {
+    (0, import_vitest.it)("renders with label and placeholder", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.TimePicker, {
+        label: "Start time",
+        name: "time",
+        placeholder: "Pick time"
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Start time")).toBeDefined();
+      const input = result.container.querySelector("input");
+      (0, import_vitest.expect)(input?.getAttribute("placeholder")).toBe("Pick time");
+    });
+    (0, import_vitest.it)("renders required label with asterisk", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.TimePicker, {
+        label: "Required",
+        name: "req",
+        required: true
+      }));
+      const label = result.container.querySelector("label");
+      (0, import_vitest.expect)(label?.textContent).toContain("*");
+    });
+    (0, import_vitest.it)("renders with helper text", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.TimePicker, {
+        label: "Time",
+        name: "t",
+        helperText: "24h format"
+      }));
+      (0, import_vitest.expect)(result.findTextElement("24h format")).toBeDefined();
+    });
+    (0, import_vitest.it)("renders skeleton placeholder", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.TimePicker, {
+        label: "Loading",
+        name: "l",
+        skeleton: true
+      }));
+      (0, import_vitest.expect)(result.container.querySelector("input")).toBeNull();
+    });
+    (0, import_vitest.it)("renders disabled state", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.TimePicker, {
+        label: "Disabled",
+        name: "d",
+        disabled: true
+      }));
+      const input = result.container.querySelector("input");
+      (0, import_vitest.expect)(input?.getAttribute("aria-disabled")).toBe("true");
+    });
+    (0, import_vitest.it)("renders readOnly state with value", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.TimePicker, {
+        label: "ReadOnly",
+        name: "r",
+        readOnly: true,
+        value: "14:30",
+        timeFormat: "24h"
+      }));
+      const input = result.container.querySelector("input");
+      (0, import_vitest.expect)(input?.getAttribute("aria-readonly")).toBe("true");
+    });
+    (0, import_vitest.it)("displays formatted value in 12h format", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.TimePicker, {
+        label: "Time",
+        name: "t",
+        value: "14:30",
+        timeFormat: "12h"
+      }));
+      const input = result.container.querySelector("input");
+      (0, import_vitest.expect)(input?.getAttribute("value")).toContain("2:30");
+    });
+  });
+  (0, import_vitest.describe)("with form context", () => {
+    (0, import_vitest.it)("renders inside form", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+        formOptions: {
+          defaultValues: {
+            time: ""
+          }
+        },
+        submitText: "Submit",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.TimePicker, {
+          name: "time",
+          label: "Meeting time"
+        })
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Meeting time")).toBeDefined();
+    });
+  });
+});