@vritti/quantum-ui 0.1.7 → 0.1.9

package/README.md

@@ -0,0 +1,150 @@
+# @vritti/quantum-ui
+
+A modern, TypeScript-first React component library built on Radix UI primitives and styled with Tailwind CSS v4. Fully typed, accessible, and tree-shakeable.
+
+[![npm version](https://img.shields.io/npm/v/@vritti/quantum-ui.svg)](https://www.npmjs.com/package/@vritti/quantum-ui)
+[![License](https://img.shields.io/npm/l/@vritti/quantum-ui.svg)](https://github.com/vritti-hub/quantum-ui/blob/main/LICENSE)
+
+## Features
+
+- 🎨 **Tailwind CSS v4** - Modern utility-first styling
+- ♿ **Accessible** - Built on Radix UI primitives
+- 📦 **Tree-shakeable** - Import only what you need
+- 🔷 **TypeScript** - Fully typed with excellent IntelliSense support
+- 🎭 **Themeable** - Dark mode support with ThemeToggle component
+- 📚 **Documented** - Comprehensive Storybook documentation
+
+## Documentation
+
+📖 [View full documentation and interactive examples on Storybook](https://vritti-hub.github.io/quantum-ui)
+
+## Installation
+
+```bash
+npm install @vritti/quantum-ui
+```
+
+```bash
+yarn add @vritti/quantum-ui
+```
+
+```bash
+pnpm add @vritti/quantum-ui
+```
+
+### Peer Dependencies
+
+Make sure you have the following peer dependencies installed:
+
+```bash
+npm install react react-dom
+```
+
+This library supports React 18.x and 19.x.
+
+## Usage
+
+Import components individually for optimal tree-shaking:
+
+```tsx
+import { Button } from '@vritti/quantum-ui/Button';
+import { Card } from '@vritti/quantum-ui/Card';
+import { TextField } from '@vritti/quantum-ui/TextField';
+
+function App() {
+  return (
+    <Card>
+      <TextField label="Email" placeholder="Enter your email" />
+      <Button variant="primary">Submit</Button>
+    </Card>
+  );
+}
+```
+
+Or import from the main entry point:
+
+```tsx
+import { Button, Card, TextField } from '@vritti/quantum-ui';
+```
+
+## Available Components
+
+- **Button** - Versatile button component with multiple variants
+- **Card** - Container component for grouping content
+- **TextField** - Text input with label and validation support
+- **PasswordField** - Secure password input with show/hide toggle
+- **Checkbox** - Accessible checkbox component
+- **Typography** - Text styling component
+- **ThemeToggle** - Dark/light mode toggle
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+ or 20+
+- npm, yarn, or pnpm
+
+### Setup
+
+1. Clone the repository:
+```bash
+git clone https://github.com/vritti-hub/quantum-ui.git
+cd quantum-ui
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Start Storybook for development:
+```bash
+npm run storybook
+```
+
+4. Build the library:
+```bash
+npm run build
+```
+
+### Scripts
+
+- `npm run dev` - Start Vite dev server
+- `npm run build` - Build the library for production
+- `npm run storybook` - Start Storybook development server
+- `npm run build-storybook` - Build Storybook for production
+- `npm run lint` - Lint the codebase
+
+## Contributing
+
+We welcome contributions! Please follow these steps:
+
+1. Fork the repository
+2. Create a new branch (`git checkout -b feature/amazing-feature`)
+3. Make your changes
+4. Commit your changes (`git commit -m 'Add some amazing feature'`)
+5. Push to the branch (`git push origin feature/amazing-feature`)
+6. Open a Pull Request
+
+### Contribution Guidelines
+
+- Follow the existing code style
+- Write meaningful commit messages
+- Add tests for new features
+- Update documentation as needed
+- Ensure all tests pass before submitting PR
+
+## Issues and Support
+
+Found a bug or have a feature request? Please [open an issue](https://github.com/vritti-hub/quantum-ui/issues).
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Links
+
+- [Documentation (Storybook)](https://vritti-hub.github.io/quantum-ui)
+- [GitHub Repository](https://github.com/vritti-hub/quantum-ui)
+- [npm Package](https://www.npmjs.com/package/@vritti/quantum-ui)
+- [Report Issues](https://github.com/vritti-hub/quantum-ui/issues)

package/dist/Label.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { P as Primitive } from './index2.js';
+import { c as cn } from './utils.js';
+
+var NAME = "Label";
+var Label$1 = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Primitive.label,
+    {
+      ...props,
+      ref: forwardedRef,
+      onMouseDown: (event) => {
+        const target = event.target;
+        if (target.closest("button, input, select, textarea")) return;
+        props.onMouseDown?.(event);
+        if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+      }
+    }
+  );
+});
+Label$1.displayName = NAME;
+var Root = Label$1;
+
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Label as L };
+//# sourceMappingURL=Label.js.map

package/dist/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["../node_modules/@radix-ui/react-label/dist/index.mjs","../shadcn/shadcnLabel/Label.tsx"],"sourcesContent":["\"use client\";\n\n// src/label.tsx\nimport * as React from \"react\";\nimport { Primitive } from \"@radix-ui/react-primitive\";\nimport { jsx } from \"react/jsx-runtime\";\nvar NAME = \"Label\";\nvar Label = React.forwardRef((props, forwardedRef) => {\n  return /* @__PURE__ */ jsx(\n    Primitive.label,\n    {\n      ...props,\n      ref: forwardedRef,\n      onMouseDown: (event) => {\n        const target = event.target;\n        if (target.closest(\"button, input, select, textarea\")) return;\n        props.onMouseDown?.(event);\n        if (!event.defaultPrevented && event.detail > 1) event.preventDefault();\n      }\n    }\n  );\n});\nLabel.displayName = NAME;\nvar Root = Label;\nexport {\n  Label,\n  Root\n};\n//# sourceMappingURL=index.mjs.map\n","import * as LabelPrimitive from '@radix-ui/react-label';\nimport * as React from 'react';\n\nimport { cn } from '../utils';\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot='label'\n      className={cn(\n        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"],"names":["Label","LabelPrimitive.Root"],"mappings":";;;;;AAMA,IAAI,IAAI,GAAG,OAAO;AAClB,IAAIA,OAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,YAAY,KAAK;AACtD,EAAE,uBAAuB,GAAG;AAC5B,IAAI,SAAS,CAAC,KAAK;AACnB,IAAI;AACJ,MAAM,GAAG,KAAK;AACd,MAAM,GAAG,EAAE,YAAY;AACvB,MAAM,WAAW,EAAE,CAAC,KAAK,KAAK;AAC9B,QAAQ,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM;AACnC,QAAQ,IAAI,MAAM,CAAC,OAAO,CAAC,iCAAiC,CAAC,EAAE;AAC/D,QAAQ,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC;AAClC,QAAQ,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,EAAE;AAC/E,MAAM;AACN;AACA,GAAG;AACH,CAAC,CAAC;AACFA,OAAK,CAAC,WAAW,GAAG,IAAI;AACxB,IAAI,IAAI,GAAGA,OAAK;;AClBhB,SAAS,KAAA,CAAM,EAAE,SAAA,EAAW,GAAG,OAAM,EAAqD;AACxF,EAAA,uBACE,GAAA;AAAA,IAACC,IAAe;AAAA,IAAf;AAAA,MACC,WAAA,EAAU,OAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,qNAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;","x_google_ignoreList":[0]}

package/dist/OTPField.d.ts

@@ -0,0 +1,17 @@
+import { default as default_2 } from 'react';
+
+export declare const OTPField: default_2.FC<OTPFieldProps>;
+
+export declare interface OTPFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+    length?: number;
+    label?: string;
+    message?: string;
+    error?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+}
+
+export { }

package/dist/PasswordField.d.ts

@@ -4,6 +4,8 @@ export declare const PasswordField: default_2.FC<PasswordFieldProps>;
 
 declare interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endAdornment'> {
     showStrengthIndicator?: boolean;
+    showMatchIndicator?: boolean;
+    matchPassword?: string;
     toggleAriaLabel?: string;
 }
 

package/dist/PasswordField.js

@@ -12,6 +12,20 @@ import { c as createLucideIcon } from './createLucideIcon.js';
  */
 
 
+const __iconNode$2 = [
+  ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
+  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
+];
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$2);
+
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
 const __iconNode$1 = [
   [
     "path",
@@ -59,12 +73,14 @@ const getPasswordStrength = (password) => {
   if (/[a-z]/.test(password)) strength += 1;
   if (/[0-9]/.test(password)) strength += 1;
   if (/[^A-Za-z0-9]/.test(password)) strength += 1;
-  if (strength < 2) return { label: "Weak", color: "text-red-500", bgColor: "bg-red-500", width: "20%" };
+  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%" };
-  return { label: "Strong", color: "text-green-500", bgColor: "bg-green-500", width: "100%" };
+  return { label: "Strong", color: "text-success", bgColor: "bg-success", width: "100%" };
 };
 const PasswordField = ({
   showStrengthIndicator = false,
+  showMatchIndicator = false,
+  matchPassword,
   toggleAriaLabel,
   value = "",
   message,
@@ -76,9 +92,10 @@ const PasswordField = ({
     setShowPassword(!showPassword);
   };
   const passwordStrength = getPasswordStrength(String(value));
-  const enhancedMessage = showStrengthIndicator && value && !error ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-xs", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Password strength:" }),
+  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(
@@ -89,6 +106,10 @@ const PasswordField = ({
       }
     ) }),
     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",

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","sources":["../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  [\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 { 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   * 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-red-500', bgColor: 'bg-red-500', width: '20%' };\n  if (strength < 4) return { label: 'Fair', color: 'text-yellow-500', bgColor: 'bg-yellow-500', width: '60%' };\n  return { label: 'Strong', color: 'text-green-500', bgColor: 'bg-green-500', width: '100%' };\n};\n\n// PasswordField component - specialized TextField for password inputs\nexport const PasswordField: React.FC<PasswordFieldProps> = ({\n  showStrengthIndicator = false,\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\n  // Combine strength indicator with existing message\n  const enhancedMessage =\n    showStrengthIndicator && value && !error ? (\n      <div className='space-y-2'>\n        <div className='flex justify-between items-center text-xs'>\n          <span className='text-muted-foreground'>Password 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    ) : (\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"],"mappings":"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","x_google_ignoreList":[0,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]}

package/dist/PhoneField.d.ts

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