@vritti/quantum-ui 0.1.11 → 0.1.12

package/dist/PasswordField.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
 import { c as cn } from './utils.js';
 import { T as TextField } from './TextField.js';
 import { c as createLucideIcon } from './createLucideIcon.js';
@@ -74,65 +74,71 @@ const getPasswordStrength = (password) => {
   if (/[0-9]/.test(password)) strength += 1;
   if (/[^A-Za-z0-9]/.test(password)) strength += 1;
   if (strength < 2) return { label: "Weak", color: "text-destructive", bgColor: "bg-destructive", width: "25%" };
-  if (strength < 4) return { label: "Fair", color: "text-yellow-500", bgColor: "bg-yellow-500", width: "60%" };
+  if (strength < 4) return { label: "Fair", color: "text-warning", bgColor: "bg-warning", width: "60%" };
   return { label: "Strong", color: "text-success", bgColor: "bg-success", width: "100%" };
 };
-const PasswordField = ({
-  showStrengthIndicator = false,
-  showMatchIndicator = false,
-  matchPassword,
-  toggleAriaLabel,
-  value = "",
-  message,
-  error,
-  ...props
-}) => {
-  const [showPassword, setShowPassword] = useState(false);
-  const togglePasswordVisibility = () => {
-    setShowPassword(!showPassword);
-  };
-  const passwordStrength = getPasswordStrength(String(value));
-  const passwordsMatch = matchPassword !== void 0 && value !== "" && value === matchPassword;
-  const enhancedMessage = showStrengthIndicator && value && !error ? /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-[10px]", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Strength:" }),
-      /* @__PURE__ */ jsx("span", { className: passwordStrength.color, children: passwordStrength.label })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "w-full bg-muted rounded-full h-1", children: /* @__PURE__ */ jsx(
-      "div",
+const PasswordField = React__default.forwardRef(
+  ({
+    showStrengthIndicator = false,
+    showMatchIndicator = false,
+    matchPassword,
+    toggleAriaLabel,
+    value = "",
+    description,
+    error,
+    ...props
+  }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const togglePasswordVisibility = () => {
+      setShowPassword(!showPassword);
+    };
+    const passwordStrength = getPasswordStrength(String(value));
+    const passwordsMatch = matchPassword !== void 0 && value !== "" && value === matchPassword;
+    const enhancedDescription = /* @__PURE__ */ jsxs(Fragment, { children: [
+      showStrengthIndicator && value && !error && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-[10px]", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Strength:" }),
+          /* @__PURE__ */ jsx("span", { className: passwordStrength.color, children: passwordStrength.label })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "w-full bg-muted rounded-full h-1", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("h-1 rounded-full transition-all duration-300", passwordStrength.bgColor),
+            style: { width: passwordStrength.width }
+          }
+        ) })
+      ] }),
+      showMatchIndicator && passwordsMatch && !error && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(CircleCheckBig, { className: "h-3 w-3 text-success" }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-success", children: "Passwords match" })
+      ] }),
+      description
+    ] });
+    const eyeIcon = /* @__PURE__ */ jsx(
+      "button",
       {
-        className: cn("h-1 rounded-full transition-all duration-300", passwordStrength.bgColor),
-        style: { width: passwordStrength.width }
+        type: "button",
+        onClick: togglePasswordVisibility,
+        "aria-label": toggleAriaLabel || (showPassword ? "Hide password" : "Show password"),
+        className: "cursor-pointer",
+        children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5 text-muted-foreground" })
       }
-    ) }),
-    message && /* @__PURE__ */ jsx("div", { children: message })
-  ] }) : showMatchIndicator && passwordsMatch && !error ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-    /* @__PURE__ */ jsx(CircleCheckBig, { className: "h-3 w-3 text-success" }),
-    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-success", children: "Passwords match" }),
-    message && /* @__PURE__ */ jsx("div", { children: message })
-  ] }) : message;
-  const eyeIcon = /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: togglePasswordVisibility,
-      "aria-label": toggleAriaLabel || (showPassword ? "Hide password" : "Show password"),
-      className: "cursor-pointer",
-      children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5 text-muted-foreground" })
-    }
-  );
-  return /* @__PURE__ */ jsx(
-    TextField,
-    {
-      ...props,
-      type: showPassword ? "text" : "password",
-      value,
-      message: enhancedMessage,
-      error,
-      endAdornment: eyeIcon
-    }
-  );
-};
+    );
+    return /* @__PURE__ */ jsx(
+      TextField,
+      {
+        ref,
+        ...props,
+        type: showPassword ? "text" : "password",
+        value,
+        description: enhancedDescription,
+        error,
+        endAdornment: eyeIcon
+      }
+    );
+  }
+);
+PasswordField.displayName = "PasswordField";
 
 export { PasswordField as P };
 //# sourceMappingURL=PasswordField.js.map

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","sources":["../node_modules/lucide-react/dist/esm/icons/circle-check-big.js","../node_modules/lucide-react/dist/esm/icons/eye-off.js","../node_modules/lucide-react/dist/esm/icons/eye.js","../lib/components/PasswordField/PasswordField.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.544.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"M21.801 10A10 10 0 1 1 17 3.335\", key: \"yps3ct\" }],\n  [\"path\", { d: \"m9 11 3 3L22 4\", key: \"1pflzl\" }]\n];\nconst CircleCheckBig = createLucideIcon(\"circle-check-big\", __iconNode);\n\nexport { __iconNode, CircleCheckBig as default };\n//# sourceMappingURL=circle-check-big.js.map\n","/**\n * @license lucide-react v0.544.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\n    \"path\",\n    {\n      d: \"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\",\n      key: \"ct8e1f\"\n    }\n  ],\n  [\"path\", { d: \"M14.084 14.158a3 3 0 0 1-4.242-4.242\", key: \"151rxh\" }],\n  [\n    \"path\",\n    {\n      d: \"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\",\n      key: \"13bj9a\"\n    }\n  ],\n  [\"path\", { d: \"m2 2 20 20\", key: \"1ooewy\" }]\n];\nconst EyeOff = createLucideIcon(\"eye-off\", __iconNode);\n\nexport { __iconNode, EyeOff as default };\n//# sourceMappingURL=eye-off.js.map\n","/**\n * @license lucide-react v0.544.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\n    \"path\",\n    {\n      d: \"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\",\n      key: \"1nclc0\"\n    }\n  ],\n  [\"circle\", { cx: \"12\", cy: \"12\", r: \"3\", key: \"1v7zrd\" }]\n];\nconst Eye = createLucideIcon(\"eye\", __iconNode);\n\nexport { __iconNode, Eye as default };\n//# sourceMappingURL=eye.js.map\n","import { CheckCircle, Eye, EyeOff } from 'lucide-react';\nimport React, { useState } from 'react';\nimport { cn } from '../../../shadcn/utils';\nimport { TextField, TextFieldProps } from '../TextField/TextField';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endAdornment'> {\n  /**\n   * Whether to show password strength indicator\n   */\n  showStrengthIndicator?: boolean;\n\n  /**\n   * Whether to show password match indicator\n   */\n  showMatchIndicator?: boolean;\n\n  /**\n   * Password to match against (for confirm password fields)\n   */\n  matchPassword?: string;\n\n  /**\n   * Custom aria-label for the visibility toggle button\n   */\n  toggleAriaLabel?: string;\n}\n\n// Helper function to calculate password strength\nconst getPasswordStrength = (password: string) => {\n  let strength = 0;\n  if (password.length >= 8) strength += 1;\n  if (/[A-Z]/.test(password)) strength += 1;\n  if (/[a-z]/.test(password)) strength += 1;\n  if (/[0-9]/.test(password)) strength += 1;\n  if (/[^A-Za-z0-9]/.test(password)) strength += 1;\n\n  if (strength < 2) return { label: 'Weak', color: 'text-destructive', bgColor: 'bg-destructive', width: '25%' };\n  if (strength < 4) return { label: 'Fair', color: 'text-yellow-500', bgColor: 'bg-yellow-500', width: '60%' };\n  return { label: 'Strong', color: 'text-success', bgColor: 'bg-success', width: '100%' };\n};\n\n// PasswordField component - specialized TextField for password inputs\nexport const PasswordField: React.FC<PasswordFieldProps> = ({\n  showStrengthIndicator = false,\n  showMatchIndicator = false,\n  matchPassword,\n  toggleAriaLabel,\n  value = '',\n  message,\n  error,\n  ...props\n}) => {\n  const [showPassword, setShowPassword] = useState(false);\n\n  const togglePasswordVisibility = () => {\n    setShowPassword(!showPassword);\n  };\n\n  const passwordStrength = getPasswordStrength(String(value));\n  const passwordsMatch = matchPassword !== undefined && value !== '' && value === matchPassword;\n\n  // Combine strength indicator with existing message\n  const enhancedMessage =\n    showStrengthIndicator && value && !error ? (\n      <div className='space-y-1'>\n        <div className='flex justify-between items-center text-[10px]'>\n          <span className='text-muted-foreground'>Strength:</span>\n          <span className={passwordStrength.color}>{passwordStrength.label}</span>\n        </div>\n        <div className='w-full bg-muted rounded-full h-1'>\n          <div\n            className={cn('h-1 rounded-full transition-all duration-300', passwordStrength.bgColor)}\n            style={{ width: passwordStrength.width }}\n          />\n        </div>\n        {message && <div>{message}</div>}\n      </div>\n    ) : showMatchIndicator && passwordsMatch && !error ? (\n      <div className='flex items-center gap-1'>\n        <CheckCircle className='h-3 w-3 text-success' />\n        <span className='text-[10px] text-success'>Passwords match</span>\n        {message && <div>{message}</div>}\n      </div>\n    ) : (\n      message\n    );\n\n  const eyeIcon = (\n    <button\n      type='button'\n      onClick={togglePasswordVisibility}\n      aria-label={toggleAriaLabel || (showPassword ? 'Hide password' : 'Show password')}\n      className='cursor-pointer'\n    >\n      {showPassword ? (\n        <EyeOff className='h-3.5 w-3.5 text-muted-foreground' />\n      ) : (\n        <Eye className='h-3.5 w-3.5 text-muted-foreground' />\n      )}\n    </button>\n  );\n\n  return (\n    <TextField\n      {...props}\n      type={showPassword ? 'text' : 'password'}\n      value={value}\n      message={enhancedMessage}\n      error={error}\n      endAdornment={eyeIcon}\n    />\n  );\n};\n"],"names":["__iconNode","CheckCircle"],"mappings":"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","x_google_ignoreList":[0,1,2]}
+{"version":3,"file":"PasswordField.js","sources":["../node_modules/lucide-react/dist/esm/icons/circle-check-big.js","../node_modules/lucide-react/dist/esm/icons/eye-off.js","../node_modules/lucide-react/dist/esm/icons/eye.js","../lib/components/PasswordField/PasswordField.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.544.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"M21.801 10A10 10 0 1 1 17 3.335\", key: \"yps3ct\" }],\n  [\"path\", { d: \"m9 11 3 3L22 4\", key: \"1pflzl\" }]\n];\nconst CircleCheckBig = createLucideIcon(\"circle-check-big\", __iconNode);\n\nexport { __iconNode, CircleCheckBig as default };\n//# sourceMappingURL=circle-check-big.js.map\n","/**\n * @license lucide-react v0.544.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\n    \"path\",\n    {\n      d: \"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\",\n      key: \"ct8e1f\"\n    }\n  ],\n  [\"path\", { d: \"M14.084 14.158a3 3 0 0 1-4.242-4.242\", key: \"151rxh\" }],\n  [\n    \"path\",\n    {\n      d: \"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\",\n      key: \"13bj9a\"\n    }\n  ],\n  [\"path\", { d: \"m2 2 20 20\", key: \"1ooewy\" }]\n];\nconst EyeOff = createLucideIcon(\"eye-off\", __iconNode);\n\nexport { __iconNode, EyeOff as default };\n//# sourceMappingURL=eye-off.js.map\n","/**\n * @license lucide-react v0.544.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\n    \"path\",\n    {\n      d: \"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\",\n      key: \"1nclc0\"\n    }\n  ],\n  [\"circle\", { cx: \"12\", cy: \"12\", r: \"3\", key: \"1v7zrd\" }]\n];\nconst Eye = createLucideIcon(\"eye\", __iconNode);\n\nexport { __iconNode, Eye as default };\n//# sourceMappingURL=eye.js.map\n","import { CheckCircle, Eye, EyeOff } from 'lucide-react';\nimport React, { useState } from 'react';\nimport { cn } from '../../../shadcn/utils';\nimport { TextField, TextFieldProps } from '../TextField/TextField';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endAdornment'> {\n  /**\n   * Whether to show password strength indicator\n   */\n  showStrengthIndicator?: boolean;\n\n  /**\n   * Whether to show password match indicator\n   */\n  showMatchIndicator?: boolean;\n\n  /**\n   * Password to match against (for confirm password fields)\n   */\n  matchPassword?: string;\n\n  /**\n   * Custom aria-label for the visibility toggle button\n   */\n  toggleAriaLabel?: string;\n}\n\n// PasswordField automatically forwards ref from TextField\ntype PasswordFieldComponentType = React.ForwardRefExoticComponent<\n  PasswordFieldProps & React.RefAttributes<HTMLInputElement>\n>;\n\n// Helper function to calculate password strength\nconst getPasswordStrength = (password: string) => {\n  let strength = 0;\n  if (password.length >= 8) strength += 1;\n  if (/[A-Z]/.test(password)) strength += 1;\n  if (/[a-z]/.test(password)) strength += 1;\n  if (/[0-9]/.test(password)) strength += 1;\n  if (/[^A-Za-z0-9]/.test(password)) strength += 1;\n\n  if (strength < 2) return { label: 'Weak', color: 'text-destructive', bgColor: 'bg-destructive', width: '25%' };\n  if (strength < 4) return { label: 'Fair', color: 'text-warning', bgColor: 'bg-warning', width: '60%' };\n  return { label: 'Strong', color: 'text-success', bgColor: 'bg-success', width: '100%' };\n};\n\n// PasswordField component - specialized TextField for password inputs\nexport const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      showStrengthIndicator = false,\n      showMatchIndicator = false,\n      matchPassword,\n      toggleAriaLabel,\n      value = '',\n      description,\n      error,\n      ...props\n    },\n    ref\n  ) => {\n    const [showPassword, setShowPassword] = useState(false);\n\n    const togglePasswordVisibility = () => {\n      setShowPassword(!showPassword);\n    };\n\n    const passwordStrength = getPasswordStrength(String(value));\n    const passwordsMatch = matchPassword !== undefined && value !== '' && value === matchPassword;\n\n    // Build enhanced description by stacking indicators and description separately\n    const enhancedDescription = (\n      <>\n        {/* Password strength indicator */}\n        {showStrengthIndicator && value && !error && (\n          <div className='space-y-1'>\n            <div className='flex justify-between items-center text-[10px]'>\n              <span className='text-muted-foreground'>Strength:</span>\n              <span className={passwordStrength.color}>{passwordStrength.label}</span>\n            </div>\n            <div className='w-full bg-muted rounded-full h-1'>\n              <div\n                className={cn('h-1 rounded-full transition-all duration-300', passwordStrength.bgColor)}\n                style={{ width: passwordStrength.width }}\n              />\n            </div>\n          </div>\n        )}\n\n        {/* Password match indicator */}\n        {showMatchIndicator && passwordsMatch && !error && (\n          <div className='flex items-center gap-1'>\n            <CheckCircle className='h-3 w-3 text-success' />\n            <span className='text-[10px] text-success'>Passwords match</span>\n          </div>\n        )}\n\n        {/* Original description (e.g., from zod schema) */}\n        {description}\n      </>\n    );\n\n    const eyeIcon = (\n      <button\n        type='button'\n        onClick={togglePasswordVisibility}\n        aria-label={toggleAriaLabel || (showPassword ? 'Hide password' : 'Show password')}\n        className='cursor-pointer'\n      >\n        {showPassword ? (\n          <EyeOff className='h-3.5 w-3.5 text-muted-foreground' />\n        ) : (\n          <Eye className='h-3.5 w-3.5 text-muted-foreground' />\n        )}\n      </button>\n    );\n\n    return (\n      <TextField\n        ref={ref}\n        {...props}\n        type={showPassword ? 'text' : 'password'}\n        value={value}\n        description={enhancedDescription}\n        error={error}\n        endAdornment={eyeIcon}\n      />\n    );\n  }\n);\n\nPasswordField.displayName = 'PasswordField';\n"],"names":["__iconNode","React","CheckCircle"],"mappings":"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","x_google_ignoreList":[0,1,2]}

package/dist/PhoneField.d.ts

@@ -5,15 +5,15 @@ import { Value as PhoneValue } from 'react-phone-number-input';
 
 export { isValidPhoneNumber }
 
-export declare const PhoneField: default_2.FC<PhoneFieldProps>;
+export declare const PhoneField: default_2.ForwardRefExoticComponent<PhoneFieldProps & default_2.RefAttributes<HTMLInputElement>>;
 
 export declare interface PhoneFieldProps {
     value?: PhoneValue;
     onChange: (value: PhoneValue | undefined) => void;
     defaultCountry?: Country;
     label?: string;
-    message?: string;
-    error?: boolean;
+    description?: default_2.ReactNode;
+    error?: string;
     disabled?: boolean;
     className?: string;
     placeholder?: string;

package/dist/PhoneField.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useCallback, useMemo } from 'react';
 import { c as cn } from './utils.js';
-import { L as Label } from './Label.js';
+import { F as Field, a as FieldLabel, h as FieldContent, b as FieldDescription, c as FieldError } from './field.js';
 
 // This file is a workaround for a bug in web browsers' "native"
 // ES6 importing system which is uncapable of importing "*.json" files.
@@ -10348,64 +10348,61 @@ function isValidPhoneNumber() {
 	return call(isValidPhoneNumber$1, arguments)
 }
 
-const PhoneField = ({
-  value,
-  onChange,
-  defaultCountry = "IN",
-  label,
-  message,
-  error,
-  disabled,
-  className,
-  placeholder
-}) => {
-  const fieldId = React__default.useId();
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-slot": "field", children: [
-    label && /* @__PURE__ */ jsx(Label, { "data-slot": "label", children: label }),
-    /* @__PURE__ */ jsx(
-      PhoneInputBase,
-      {
-        international: true,
-        defaultCountry,
-        value,
-        onChange,
-        disabled,
-        placeholder,
-        "aria-describedby": message ? `${fieldId}-message` : void 0,
-        "aria-invalid": error,
-        "data-slot": "input",
-        className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent dark:bg-input/30 px-3 py-1 text-sm shadow-xs transition-[color,box-shadow]",
-          "placeholder:text-muted-foreground",
-          "focus-within:outline-none focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          error && "border-destructive focus-within:ring-destructive/20 dark:focus-within:ring-destructive/40",
-          className
+const PhoneField = React__default.forwardRef(
+  ({
+    value,
+    onChange,
+    defaultCountry = "IN",
+    label,
+    description,
+    error,
+    disabled,
+    className,
+    placeholder
+  }, ref) => {
+    const fieldId = React__default.useId();
+    const hasError = !!error;
+    return /* @__PURE__ */ jsxs(Field, { "data-disabled": disabled, children: [
+      label && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+      /* @__PURE__ */ jsxs(FieldContent, { children: [
+        /* @__PURE__ */ jsx(
+          PhoneInputBase,
+          {
+            international: true,
+            defaultCountry,
+            value,
+            onChange,
+            disabled,
+            placeholder,
+            "aria-describedby": description || error ? `${fieldId}-description ${fieldId}-error` : void 0,
+            "aria-invalid": hasError,
+            className: cn(
+              "flex h-9 w-full rounded-md border border-input bg-transparent dark:bg-input/30 px-3 py-1 text-sm shadow-xs transition-[color,box-shadow]",
+              "placeholder:text-muted-foreground",
+              "focus-within:outline-none focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              hasError && "border-destructive focus-within:ring-destructive/20 dark:focus-within:ring-destructive/40",
+              className
+            ),
+            numberInputProps: {
+              className: cn(
+                "flex-1 bg-transparent outline-none",
+                "placeholder:text-muted-foreground",
+                "disabled:cursor-not-allowed"
+              )
+            },
+            countrySelectProps: {
+              className: cn("mr-2 bg-transparent border-none outline-none", "focus:ring-0", "disabled:cursor-not-allowed")
+            }
+          }
         ),
-        numberInputProps: {
-          className: cn(
-            "flex-1 bg-transparent outline-none",
-            "placeholder:text-muted-foreground",
-            "disabled:cursor-not-allowed"
-          )
-        },
-        countrySelectProps: {
-          className: cn("mr-2 bg-transparent border-none outline-none", "focus:ring-0", "disabled:cursor-not-allowed")
-        }
-      }
-    ),
-    message && /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: `${fieldId}-message`,
-        className: cn("text-xs", error ? "text-destructive" : "text-muted-foreground"),
-        role: error ? "alert" : void 0,
-        "data-slot": "message",
-        children: message
-      }
-    )
-  ] });
-};
+        description && /* @__PURE__ */ jsx(FieldDescription, { id: `${fieldId}-description`, children: description }),
+        error && /* @__PURE__ */ jsx(FieldError, { id: `${fieldId}-error`, children: error })
+      ] })
+    ] });
+  }
+);
+PhoneField.displayName = "PhoneField";
 
 export { PhoneField as P, isValidPhoneNumber as i };
 //# sourceMappingURL=PhoneField.js.map