@vritti/quantum-ui 0.1.4 → 0.1.5

package/dist/TextField.d.ts

@@ -4,9 +4,10 @@ export declare const TextField: default_2.FC<TextFieldProps>;
 
 declare interface TextFieldProps extends default_2.ComponentProps<'input'> {
     label?: string;
-    message?: string;
+    message?: default_2.ReactNode;
     required?: boolean;
     error?: boolean;
+    endAdornment?: default_2.ReactNode;
 }
 
 export { }

package/dist/TextField.js

@@ -95,6 +95,7 @@ const TextField = ({
   error = false,
   className,
   id,
+  endAdornment,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-slot": "field", children: [
@@ -102,21 +103,28 @@ const TextField = ({
       label,
       required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", "aria-hidden": "true", children: "*" })
     ] }),
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        className,
-        "aria-describedby": message,
-        "aria-required": required,
-        "aria-invalid": error,
-        required,
-        "data-slot": "input",
-        ...props
-      }
-    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          className: cn(
+            className,
+            endAdornment && "pr-10"
+          ),
+          "aria-describedby": message ? `${id || "field"}-message` : void 0,
+          "aria-required": required,
+          "aria-invalid": error,
+          required,
+          "data-slot": "input",
+          ...props
+        }
+      ),
+      endAdornment && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3", children: endAdornment })
+    ] }),
     message && /* @__PURE__ */ jsx(
-      "p",
+      "div",
       {
+        id: `${id || "field"}-message`,
         className: cn("text-xs", error ? "text-destructive" : "text-muted-foreground"),
         role: error ? "alert" : void 0,
         "data-slot": "message",

package/dist/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../shadcn/shadcnInput/Input.tsx","../node_modules/@radix-ui/react-primitive/dist/index.mjs","../node_modules/@radix-ui/react-label/dist/index.mjs","../shadcn/shadcnLabel/Label.tsx","../lib/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../utils';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <input\n      type={type}\n      data-slot='input'\n      className={cn(\n        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n","// src/primitive.tsx\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { createSlot } from \"@radix-ui/react-slot\";\nimport { jsx } from \"react/jsx-runtime\";\nvar NODES = [\n  \"a\",\n  \"button\",\n  \"div\",\n  \"form\",\n  \"h2\",\n  \"h3\",\n  \"img\",\n  \"input\",\n  \"label\",\n  \"li\",\n  \"nav\",\n  \"ol\",\n  \"p\",\n  \"select\",\n  \"span\",\n  \"svg\",\n  \"ul\"\n];\nvar Primitive = NODES.reduce((primitive, node) => {\n  const Slot = createSlot(`Primitive.${node}`);\n  const Node = React.forwardRef((props, forwardedRef) => {\n    const { asChild, ...primitiveProps } = props;\n    const Comp = asChild ? Slot : node;\n    if (typeof window !== \"undefined\") {\n      window[Symbol.for(\"radix-ui\")] = true;\n    }\n    return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });\n  });\n  Node.displayName = `Primitive.${node}`;\n  return { ...primitive, [node]: Node };\n}, {});\nfunction dispatchDiscreteCustomEvent(target, event) {\n  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));\n}\nvar Root = Primitive;\nexport {\n  Primitive,\n  Root,\n  dispatchDiscreteCustomEvent\n};\n//# sourceMappingURL=index.mjs.map\n","\"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","import React from 'react';\nimport { Input } from '../../../shadcn/shadcnInput';\nimport { Label } from '../../../shadcn/shadcnLabel';\nimport { cn } from '../../../shadcn/utils';\n\nexport interface TextFieldProps extends React.ComponentProps<'input'> {\n  /**\n   * Label for the field\n   */\n  label?: string;\n\n  /**\n   * Helper or error message to display below the field\n   */\n  message?: string;\n\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n\n  /**\n   * Whether the message represents an error state\n   */\n  error?: boolean;\n}\n\n// TextField molecule - Input + Label composition\nexport const TextField: React.FC<TextFieldProps> = ({\n  label,\n  message,\n  required = false,\n  error = false,\n  className,\n  id,\n  ...props\n}) => {\n  return (\n    <div className='space-y-2' data-slot='field'>\n      {label && (\n        <Label data-slot='label'>\n          {label}\n          {required && (\n            <span className='text-destructive ml-1' aria-hidden='true'>\n              *\n            </span>\n          )}\n        </Label>\n      )}\n\n      <Input\n        className={className}\n        aria-describedby={message}\n        aria-required={required}\n        aria-invalid={error}\n        required={required}\n        data-slot='input'\n        {...props}\n      />\n\n      {message && (\n        <p\n          className={cn('text-xs', error ? 'text-destructive' : 'text-muted-foreground')}\n          role={error ? 'alert' : undefined}\n          data-slot='message'\n        >\n          {message}\n        </p>\n      )}\n    </div>\n  );\n};\n"],"names":["Label","LabelPrimitive.Root"],"mappings":";;;;;;AAIA,SAAS,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,OAAM,EAAkC;AAC3E,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,WAAA,EAAU,OAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,icAAA;AAAA,QACA,+EAAA;AAAA,QACA,wGAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;AClBA;AAKA,IAAI,KAAK,GAAG;AACZ,EAAE,GAAG;AACL,EAAE,QAAQ;AACV,EAAE,KAAK;AACP,EAAE,MAAM;AACR,EAAE,IAAI;AACN,EAAE,IAAI;AACN,EAAE,KAAK;AACP,EAAE,OAAO;AACT,EAAE,OAAO;AACT,EAAE,IAAI;AACN,EAAE,KAAK;AACP,EAAE,IAAI;AACN,EAAE,GAAG;AACL,EAAE,QAAQ;AACV,EAAE,MAAM;AACR,EAAE,KAAK;AACP,EAAE;AACF,CAAC;AACD,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,IAAI,KAAK;AAClD,EAAE,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;AAC9C,EAAE,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,YAAY,KAAK;AACzD,IAAI,MAAM,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK;AAChD,IAAI,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI;AACtC,IAAI,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AACvC,MAAM,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,GAAG,IAAI;AAC3C,IAAI;AACJ,IAAI,uBAAuB,GAAG,CAAC,IAAI,EAAE,EAAE,GAAG,cAAc,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC;AAC9E,EAAE,CAAC,CAAC;AACJ,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AACxC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAC,IAAI,GAAG,IAAI,EAAE;AACvC,CAAC,EAAE,EAAE,CAAC;;AC9BN,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;;ACYO,MAAM,YAAsC,CAAC;AAAA,EAClD,KAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,KAAA,GAAQ,KAAA;AAAA,EACR,SAAA;AAAA,EACA,EAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,WAAA,EAAY,aAAU,OAAA,EAClC,QAAA,EAAA;AAAA,IAAA,KAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAM,WAAA,EAAU,OAAA,EACd,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,4BACC,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,uBAAA,EAAwB,aAAA,EAAY,QAAO,QAAA,EAAA,GAAA,EAE3D;AAAA,KAAA,EAEJ,CAAA;AAAA,oBAGF,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACA,kBAAA,EAAkB,OAAA;AAAA,QAClB,eAAA,EAAe,QAAA;AAAA,QACf,cAAA,EAAc,KAAA;AAAA,QACd,QAAA;AAAA,QACA,WAAA,EAAU,OAAA;AAAA,QACT,GAAG;AAAA;AAAA,KACN;AAAA,IAEC,OAAA,oBACC,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,KAAA,GAAQ,qBAAqB,uBAAuB,CAAA;AAAA,QAC7E,IAAA,EAAM,QAAQ,OAAA,GAAU,MAAA;AAAA,QACxB,WAAA,EAAU,SAAA;AAAA,QAET,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ;;;;","x_google_ignoreList":[1,2]}
+{"version":3,"file":"TextField.js","sources":["../shadcn/shadcnInput/Input.tsx","../node_modules/@radix-ui/react-primitive/dist/index.mjs","../node_modules/@radix-ui/react-label/dist/index.mjs","../shadcn/shadcnLabel/Label.tsx","../lib/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../utils';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <input\n      type={type}\n      data-slot='input'\n      className={cn(\n        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n","// src/primitive.tsx\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { createSlot } from \"@radix-ui/react-slot\";\nimport { jsx } from \"react/jsx-runtime\";\nvar NODES = [\n  \"a\",\n  \"button\",\n  \"div\",\n  \"form\",\n  \"h2\",\n  \"h3\",\n  \"img\",\n  \"input\",\n  \"label\",\n  \"li\",\n  \"nav\",\n  \"ol\",\n  \"p\",\n  \"select\",\n  \"span\",\n  \"svg\",\n  \"ul\"\n];\nvar Primitive = NODES.reduce((primitive, node) => {\n  const Slot = createSlot(`Primitive.${node}`);\n  const Node = React.forwardRef((props, forwardedRef) => {\n    const { asChild, ...primitiveProps } = props;\n    const Comp = asChild ? Slot : node;\n    if (typeof window !== \"undefined\") {\n      window[Symbol.for(\"radix-ui\")] = true;\n    }\n    return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });\n  });\n  Node.displayName = `Primitive.${node}`;\n  return { ...primitive, [node]: Node };\n}, {});\nfunction dispatchDiscreteCustomEvent(target, event) {\n  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));\n}\nvar Root = Primitive;\nexport {\n  Primitive,\n  Root,\n  dispatchDiscreteCustomEvent\n};\n//# sourceMappingURL=index.mjs.map\n","\"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","import React from 'react';\nimport { Input } from '../../../shadcn/shadcnInput';\nimport { Label } from '../../../shadcn/shadcnLabel';\nimport { cn } from '../../../shadcn/utils';\n\nexport interface TextFieldProps extends React.ComponentProps<'input'> {\n  /**\n   * Label for the field\n   */\n  label?: string;\n\n  /**\n   * Helper or error message to display below the field\n   */\n  message?: React.ReactNode;\n\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n\n  /**\n   * Whether the message represents an error state\n   */\n  error?: boolean;\n\n  /**\n   * Element to display at the end of the input (e.g., icon button)\n   */\n  endAdornment?: React.ReactNode;\n}\n\n// TextField molecule - Input + Label composition\nexport const TextField: React.FC<TextFieldProps> = ({\n  label,\n  message,\n  required = false,\n  error = false,\n  className,\n  id,\n  endAdornment,\n  ...props\n}) => {\n  return (\n    <div className='space-y-2' data-slot='field'>\n      {label && (\n        <Label data-slot='label'>\n          {label}\n          {required && (\n            <span className='text-destructive ml-1' aria-hidden='true'>\n              *\n            </span>\n          )}\n        </Label>\n      )}\n\n      <div className=\"relative\">\n        <Input\n          className={cn(\n            className,\n            endAdornment && 'pr-10'\n          )}\n          aria-describedby={message ? `${id || 'field'}-message` : undefined}\n          aria-required={required}\n          aria-invalid={error}\n          required={required}\n          data-slot='input'\n          {...props}\n        />\n        {endAdornment && (\n          <div className=\"absolute inset-y-0 right-0 flex items-center pr-3\">\n            {endAdornment}\n          </div>\n        )}\n      </div>\n\n      {message && (\n        <div\n          id={`${id || 'field'}-message`}\n          className={cn('text-xs', error ? 'text-destructive' : 'text-muted-foreground')}\n          role={error ? 'alert' : undefined}\n          data-slot='message'\n        >\n          {message}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["Label","LabelPrimitive.Root"],"mappings":"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","x_google_ignoreList":[1,2]}

package/dist/ThemeToggle.js

@@ -182,5 +182,5 @@ const ThemeToggle = ({ className, size = "md" }) => {
   );
 };
 
-export { ThemeToggle as T };
+export { ThemeToggle as T, createLucideIcon as c };
 //# sourceMappingURL=ThemeToggle.js.map

package/dist/ThemeToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.js","sources":["../node_modules/lucide-react/dist/esm/shared/src/utils.js","../node_modules/lucide-react/dist/esm/defaultAttributes.js","../node_modules/lucide-react/dist/esm/Icon.js","../node_modules/lucide-react/dist/esm/createLucideIcon.js","../node_modules/lucide-react/dist/esm/icons/moon.js","../node_modules/lucide-react/dist/esm/icons/sun.js","../lib/components/ThemeToggle/ThemeToggle.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\nconst toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, \"$1-$2\").toLowerCase();\nconst toCamelCase = (string) => string.replace(\n  /^([A-Z])|[\\s-_]+(\\w)/g,\n  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()\n);\nconst toPascalCase = (string) => {\n  const camelCase = toCamelCase(string);\n  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);\n};\nconst mergeClasses = (...classes) => classes.filter((className, index, array) => {\n  return Boolean(className) && className.trim() !== \"\" && array.indexOf(className) === index;\n}).join(\" \").trim();\nconst hasA11yProp = (props) => {\n  for (const prop in props) {\n    if (prop.startsWith(\"aria-\") || prop === \"role\" || prop === \"title\") {\n      return true;\n    }\n  }\n};\n\nexport { hasA11yProp, mergeClasses, toCamelCase, toKebabCase, toPascalCase };\n//# sourceMappingURL=utils.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\nvar defaultAttributes = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  width: 24,\n  height: 24,\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  strokeWidth: 2,\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n};\n\nexport { defaultAttributes as default };\n//# sourceMappingURL=defaultAttributes.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 { forwardRef, createElement } from 'react';\nimport defaultAttributes from './defaultAttributes.js';\nimport { mergeClasses, hasA11yProp } from './shared/src/utils.js';\n\nconst Icon = forwardRef(\n  ({\n    color = \"currentColor\",\n    size = 24,\n    strokeWidth = 2,\n    absoluteStrokeWidth,\n    className = \"\",\n    children,\n    iconNode,\n    ...rest\n  }, ref) => createElement(\n    \"svg\",\n    {\n      ref,\n      ...defaultAttributes,\n      width: size,\n      height: size,\n      stroke: color,\n      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,\n      className: mergeClasses(\"lucide\", className),\n      ...!children && !hasA11yProp(rest) && { \"aria-hidden\": \"true\" },\n      ...rest\n    },\n    [\n      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),\n      ...Array.isArray(children) ? children : [children]\n    ]\n  )\n);\n\nexport { Icon as default };\n//# sourceMappingURL=Icon.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 { forwardRef, createElement } from 'react';\nimport { mergeClasses, toKebabCase, toPascalCase } from './shared/src/utils.js';\nimport Icon from './Icon.js';\n\nconst createLucideIcon = (iconName, iconNode) => {\n  const Component = forwardRef(\n    ({ className, ...props }, ref) => createElement(Icon, {\n      ref,\n      iconNode,\n      className: mergeClasses(\n        `lucide-${toKebabCase(toPascalCase(iconName))}`,\n        `lucide-${iconName}`,\n        className\n      ),\n      ...props\n    })\n  );\n  Component.displayName = toPascalCase(iconName);\n  return Component;\n};\n\nexport { createLucideIcon as default };\n//# sourceMappingURL=createLucideIcon.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: \"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\",\n      key: \"kfwtm\"\n    }\n  ]\n];\nconst Moon = createLucideIcon(\"moon\", __iconNode);\n\nexport { __iconNode, Moon as default };\n//# sourceMappingURL=moon.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  [\"circle\", { cx: \"12\", cy: \"12\", r: \"4\", key: \"4exip2\" }],\n  [\"path\", { d: \"M12 2v2\", key: \"tus03m\" }],\n  [\"path\", { d: \"M12 20v2\", key: \"1lh1kg\" }],\n  [\"path\", { d: \"m4.93 4.93 1.41 1.41\", key: \"149t6j\" }],\n  [\"path\", { d: \"m17.66 17.66 1.41 1.41\", key: \"ptbguv\" }],\n  [\"path\", { d: \"M2 12h2\", key: \"1t8f8n\" }],\n  [\"path\", { d: \"M20 12h2\", key: \"1q8mjw\" }],\n  [\"path\", { d: \"m6.34 17.66-1.41 1.41\", key: \"1m8zz5\" }],\n  [\"path\", { d: \"m19.07 4.93-1.41 1.41\", key: \"1shlcs\" }]\n];\nconst Sun = createLucideIcon(\"sun\", __iconNode);\n\nexport { __iconNode, Sun as default };\n//# sourceMappingURL=sun.js.map\n","import React, { useLayoutEffect, useState } from 'react';\nimport { Moon, Sun } from 'lucide-react';\nimport { Button } from '../Button/Button';\n\nexport interface ThemeToggleProps {\n  /**\n   * Custom className for the toggle button\n   */\n  className?: string;\n\n  /**\n   * Size of the toggle button\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const ThemeToggle: React.FC<ThemeToggleProps> = ({ className, size = 'md' }) => {\n  const [isDarkMode, setIsDarkMode] = useState(false);\n\n  useLayoutEffect(() => {\n    // Check for saved theme preference or system preference\n    const savedTheme = localStorage.getItem('theme');\n    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n    const shouldUseDark = savedTheme === 'dark' || (!savedTheme && systemPrefersDark);\n\n    setIsDarkMode(shouldUseDark);\n    document.documentElement.classList.toggle('dark', shouldUseDark);\n  }, []);\n\n  const toggleTheme = () => {\n    const newDarkMode = !isDarkMode;\n    setIsDarkMode(newDarkMode);\n\n    // Update DOM and localStorage\n    document.documentElement.classList.toggle('dark', newDarkMode);\n    localStorage.setItem('theme', newDarkMode ? 'dark' : 'light');\n  };\n\n  return (\n    <Button\n      variant='ghost'\n      size={size === 'md' ? 'default' : size}\n      onClick={toggleTheme}\n      className={className}\n      aria-label={`Switch to ${isDarkMode ? 'light' : 'dark'} theme`}\n    >\n      <Sun className='h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90' />\n      <Moon className='absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0' />\n    </Button>\n  );\n};"],"names":["__iconNode"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5]}
+{"version":3,"file":"ThemeToggle.js","sources":["../node_modules/lucide-react/dist/esm/shared/src/utils.js","../node_modules/lucide-react/dist/esm/defaultAttributes.js","../node_modules/lucide-react/dist/esm/Icon.js","../node_modules/lucide-react/dist/esm/createLucideIcon.js","../node_modules/lucide-react/dist/esm/icons/moon.js","../node_modules/lucide-react/dist/esm/icons/sun.js","../lib/components/ThemeToggle/ThemeToggle.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\nconst toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, \"$1-$2\").toLowerCase();\nconst toCamelCase = (string) => string.replace(\n  /^([A-Z])|[\\s-_]+(\\w)/g,\n  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()\n);\nconst toPascalCase = (string) => {\n  const camelCase = toCamelCase(string);\n  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);\n};\nconst mergeClasses = (...classes) => classes.filter((className, index, array) => {\n  return Boolean(className) && className.trim() !== \"\" && array.indexOf(className) === index;\n}).join(\" \").trim();\nconst hasA11yProp = (props) => {\n  for (const prop in props) {\n    if (prop.startsWith(\"aria-\") || prop === \"role\" || prop === \"title\") {\n      return true;\n    }\n  }\n};\n\nexport { hasA11yProp, mergeClasses, toCamelCase, toKebabCase, toPascalCase };\n//# sourceMappingURL=utils.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\nvar defaultAttributes = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  width: 24,\n  height: 24,\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  strokeWidth: 2,\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\"\n};\n\nexport { defaultAttributes as default };\n//# sourceMappingURL=defaultAttributes.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 { forwardRef, createElement } from 'react';\nimport defaultAttributes from './defaultAttributes.js';\nimport { mergeClasses, hasA11yProp } from './shared/src/utils.js';\n\nconst Icon = forwardRef(\n  ({\n    color = \"currentColor\",\n    size = 24,\n    strokeWidth = 2,\n    absoluteStrokeWidth,\n    className = \"\",\n    children,\n    iconNode,\n    ...rest\n  }, ref) => createElement(\n    \"svg\",\n    {\n      ref,\n      ...defaultAttributes,\n      width: size,\n      height: size,\n      stroke: color,\n      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,\n      className: mergeClasses(\"lucide\", className),\n      ...!children && !hasA11yProp(rest) && { \"aria-hidden\": \"true\" },\n      ...rest\n    },\n    [\n      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),\n      ...Array.isArray(children) ? children : [children]\n    ]\n  )\n);\n\nexport { Icon as default };\n//# sourceMappingURL=Icon.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 { forwardRef, createElement } from 'react';\nimport { mergeClasses, toKebabCase, toPascalCase } from './shared/src/utils.js';\nimport Icon from './Icon.js';\n\nconst createLucideIcon = (iconName, iconNode) => {\n  const Component = forwardRef(\n    ({ className, ...props }, ref) => createElement(Icon, {\n      ref,\n      iconNode,\n      className: mergeClasses(\n        `lucide-${toKebabCase(toPascalCase(iconName))}`,\n        `lucide-${iconName}`,\n        className\n      ),\n      ...props\n    })\n  );\n  Component.displayName = toPascalCase(iconName);\n  return Component;\n};\n\nexport { createLucideIcon as default };\n//# sourceMappingURL=createLucideIcon.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: \"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\",\n      key: \"kfwtm\"\n    }\n  ]\n];\nconst Moon = createLucideIcon(\"moon\", __iconNode);\n\nexport { __iconNode, Moon as default };\n//# sourceMappingURL=moon.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  [\"circle\", { cx: \"12\", cy: \"12\", r: \"4\", key: \"4exip2\" }],\n  [\"path\", { d: \"M12 2v2\", key: \"tus03m\" }],\n  [\"path\", { d: \"M12 20v2\", key: \"1lh1kg\" }],\n  [\"path\", { d: \"m4.93 4.93 1.41 1.41\", key: \"149t6j\" }],\n  [\"path\", { d: \"m17.66 17.66 1.41 1.41\", key: \"ptbguv\" }],\n  [\"path\", { d: \"M2 12h2\", key: \"1t8f8n\" }],\n  [\"path\", { d: \"M20 12h2\", key: \"1q8mjw\" }],\n  [\"path\", { d: \"m6.34 17.66-1.41 1.41\", key: \"1m8zz5\" }],\n  [\"path\", { d: \"m19.07 4.93-1.41 1.41\", key: \"1shlcs\" }]\n];\nconst Sun = createLucideIcon(\"sun\", __iconNode);\n\nexport { __iconNode, Sun as default };\n//# sourceMappingURL=sun.js.map\n","import React, { useLayoutEffect, useState } from 'react';\nimport { Moon, Sun } from 'lucide-react';\nimport { Button } from '../Button/Button';\n\nexport interface ThemeToggleProps {\n  /**\n   * Custom className for the toggle button\n   */\n  className?: string;\n\n  /**\n   * Size of the toggle button\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const ThemeToggle: React.FC<ThemeToggleProps> = ({ className, size = 'md' }) => {\n  const [isDarkMode, setIsDarkMode] = useState(false);\n\n  useLayoutEffect(() => {\n    // Check for saved theme preference or system preference\n    const savedTheme = localStorage.getItem('theme');\n    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n    const shouldUseDark = savedTheme === 'dark' || (!savedTheme && systemPrefersDark);\n\n    setIsDarkMode(shouldUseDark);\n    document.documentElement.classList.toggle('dark', shouldUseDark);\n  }, []);\n\n  const toggleTheme = () => {\n    const newDarkMode = !isDarkMode;\n    setIsDarkMode(newDarkMode);\n\n    // Update DOM and localStorage\n    document.documentElement.classList.toggle('dark', newDarkMode);\n    localStorage.setItem('theme', newDarkMode ? 'dark' : 'light');\n  };\n\n  return (\n    <Button\n      variant='ghost'\n      size={size === 'md' ? 'default' : size}\n      onClick={toggleTheme}\n      className={className}\n      aria-label={`Switch to ${isDarkMode ? 'light' : 'dark'} theme`}\n    >\n      <Sun className='h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90' />\n      <Moon className='absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0' />\n    </Button>\n  );\n};"],"names":["__iconNode"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5]}

package/dist/index.d.ts

@@ -91,13 +91,21 @@ export declare function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
 
+export declare const PasswordField: default_2.FC<PasswordFieldProps>;
+
+export declare interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endAdornment'> {
+    showStrengthIndicator?: boolean;
+    toggleAriaLabel?: string;
+}
+
 export declare const TextField: default_2.FC<TextFieldProps>;
 
 declare interface TextFieldProps extends default_2.ComponentProps<'input'> {
     label?: string;
-    message?: string;
+    message?: default_2.ReactNode;
     required?: boolean;
     error?: boolean;
+    endAdornment?: default_2.ReactNode;
 }
 
 export declare const ThemeToggle: default_2.FC<ThemeToggleProps>;

package/dist/index.js

@@ -1,7 +1,109 @@
-export { c as cn } from './utils.js';
+import { c as cn } from './utils.js';
 export { B as Button, b as buttonVariants } from './Button.js';
 export { C as Card, a as CardContent, b as CardDescription, c as CardFooter, d as CardHeader, e as CardTitle } from './Card.js';
-export { T as TextField } from './TextField.js';
+import { T as TextField } from './TextField.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { c as createLucideIcon } from './ThemeToggle.js';
 export { T as ThemeToggle } from './ThemeToggle.js';
 export { T as Typography } from './Typography.js';
+
+/**
+ * @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",
+    {
+      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",
+      key: "ct8e1f"
+    }
+  ],
+  ["path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242", key: "151rxh" }],
+  [
+    "path",
+    {
+      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",
+      key: "13bj9a"
+    }
+  ],
+  ["path", { d: "m2 2 20 20", key: "1ooewy" }]
+];
+const EyeOff = createLucideIcon("eye-off", __iconNode$1);
+
+/**
+ * @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 = [
+  [
+    "path",
+    {
+      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",
+      key: "1nclc0"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+];
+const Eye = createLucideIcon("eye", __iconNode);
+
+const getPasswordStrength = (password) => {
+  let strength = 0;
+  if (password.length >= 8) strength += 1;
+  if (/[A-Z]/.test(password)) strength += 1;
+  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 < 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%" };
+};
+const PasswordField = ({
+  showStrengthIndicator = false,
+  toggleAriaLabel,
+  value = "",
+  message,
+  error,
+  ...props
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+  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:" }),
+      /* @__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 }
+      }
+    ) }),
+    message && /* @__PURE__ */ jsx("div", { children: message })
+  ] }) : message;
+  const eyeIcon = showPassword ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {});
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ...props,
+      type: showPassword ? "text" : "password",
+      value,
+      message: enhancedMessage,
+      error,
+      endAdornment: eyeIcon
+    }
+  );
+};
+
+export { PasswordField, TextField, cn };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.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 = showPassword ? <EyeOff /> : <Eye />;\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]}

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.js",

package/readme.md

@@ -1,472 +0,0 @@
-# Quantum UI
-
-A production-ready React component library built with TypeScript, Material-UI, and semantic design tokens. Quantum UI provides intent-based components with advanced theming, SSR-safe implementation, and zero-flickering user experience across all major React frameworks.
-
-## Features
-
-✨ **Intent-Based Components** - Business-focused APIs (`intent="primary"` vs `color="blue"`)  
-🎨 **Dual Font System** - Space Grotesk (display) + Quicksand/Inter (body text)  
-🌓 **Zero-Flickering SSR** - Advanced theme script prevents hydration flashes  
-📱 **Mobile-First Responsive** - Sophisticated breakpoint system (mobile/tablet/desktop)  
-⚡ **Performance Optimized** - Tree-shakeable imports (~0.5-1KB per component)  
-🚀 **Framework Agnostic** - Next.js, Remix, Vite, CRA support out of the box  
-🎭 **Advanced Animations** - Confidence energy fields with reduced motion support  
-🔮 **Glassmorphism Effects** - Backdrop blur and sophisticated visual effects  
-📍 **Comprehensive Storybook** - Interactive component documentation  
-🔧 **Full TypeScript** - Complete type safety with intelligent autocomplete
-
-## Installation
-
-```bash
-npm install quantum-ui
-# or
-yarn add quantum-ui
-# or
-pnpm add quantum-ui
-```
-
-## Quick Start
-
-### Basic Setup (Vite/CRA)
-
-```tsx
-import React from 'react';
-import { ThemeScript, ThemeProvider, Button, Typography, Paper } from 'quantum-ui';
-
-function App() {
-  return (
-    <>
-      {/* Add ThemeScript to prevent flickering */}
-      <ThemeScript defaultColorScheme='light' />
-
-      <ThemeProvider defaultColorScheme='light'>
-        <Paper variant='elevated'>
-          <Typography variant='h1'>Welcome to Quantum UI</Typography>
-          <Typography variant='body1' intent='secondary'>
-            A modern component library for business applications
-          </Typography>
-          <Button intent='primary'>Get Started</Button>
-        </Paper>
-      </ThemeProvider>
-    </>
-  );
-}
-```
-
-### Performance-Optimized Imports
-
-```tsx
-// ✅ Tree-shakeable direct imports (recommended for optimal performance)
-import { Button } from 'quantum-ui/Button';
-import { TextField } from 'quantum-ui/TextField';
-import { Paper } from 'quantum-ui/Paper';
-import { Typography } from 'quantum-ui/Typography';
-
-// ✅ Theme utilities (barrel import acceptable - small bundle impact)
-import { ThemeProvider, ThemeScript, useTheme } from 'quantum-ui';
-```
-
-## Framework Integration
-
-### Next.js Setup
-
-#### App Router (app/layout.tsx)
-
-```tsx
-import { ThemeScript } from 'quantum-ui';
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang='en'>
-      <head>
-        <ThemeScript defaultColorScheme='light' />
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}
-```
-
-#### Pages Router (\_document.tsx)
-
-```tsx
-import { Html, Head, Main, NextScript } from 'next/document';
-import { ThemeScript } from 'quantum-ui';
-
-export default function Document() {
-  return (
-    <Html>
-      <Head />
-      <body>
-        <ThemeScript defaultColorScheme='light' />
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-}
-```
-
-#### App Component (\_app.tsx or layout.tsx)
-
-```tsx
-import { ThemeProvider } from 'quantum-ui';
-
-export default function App({ Component, pageProps }) {
-  return (
-    <ThemeProvider defaultColorScheme='light'>
-      <Component {...pageProps} />
-    </ThemeProvider>
-  );
-}
-```
-
-### Vite Setup
-
-#### index.html
-
-```html
-<!DOCTYPE html>
-<html lang="en" data-theme="light">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Your App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module">
-      // Add theme script before app loads
-      import { getThemeScript } from 'quantum-ui';
-      const script = document.createElement('script');
-      script.innerHTML = getThemeScript({ defaultColorScheme: 'light' });
-      document.head.appendChild(script);
-    </script>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
-```
-
-#### main.tsx
-
-```tsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { ThemeProvider } from 'quantum-ui';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <ThemeProvider defaultColorScheme='light'>
-      <App />
-    </ThemeProvider>
-  </React.StrictMode>
-);
-```
-
-### Webpack/CRA Setup
-
-#### public/index.html
-
-```html
-<!DOCTYPE html>
-<html lang="en" data-theme="light">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Your App</title>
-    <script>
-      // Add theme script manually (copy from getThemeScript() output)
-      (function () {
-        document.documentElement.classList.add('no-transition');
-        try {
-          const savedScheme = localStorage.getItem('quantum-color-scheme');
-          const validSchemes = ['light', 'dark'];
-          const themeToApply = savedScheme && validSchemes.includes(savedScheme) ? savedScheme : 'light';
-          document.documentElement.setAttribute('data-theme', themeToApply);
-        } catch (e) {
-          document.documentElement.setAttribute('data-theme', 'light');
-        }
-
-        function enableTransitions() {
-          document.documentElement.classList.remove('no-transition');
-          document.documentElement.classList.add('loaded');
-        }
-
-        if (document.readyState === 'loading') {
-          window.addEventListener('DOMContentLoaded', function () {
-            setTimeout(enableTransitions, 100);
-          });
-        } else {
-          setTimeout(enableTransitions, 100);
-        }
-      })();
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
-```
-
-#### src/App.tsx
-
-```tsx
-import React from 'react';
-import { ThemeProvider } from 'quantum-ui';
-import YourComponents from './components';
-
-function App() {
-  return (
-    <ThemeProvider defaultColorScheme='light'>
-      <YourComponents />
-    </ThemeProvider>
-  );
-}
-
-export default App;
-```
-
-### Remix Setup
-
-#### app/root.tsx
-
-```tsx
-import { ThemeScript, ThemeProvider } from 'quantum-ui';
-
-export default function App() {
-  return (
-    <html lang='en'>
-      <head>
-        <Meta />
-        <Links />
-        <ThemeScript defaultColorScheme='light' />
-      </head>
-      <body>
-        <ThemeProvider defaultColorScheme='light'>
-          <Outlet />
-        </ThemeProvider>
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
-      </body>
-    </html>
-  );
-}
-```
-
-## Components
-
-### Core Components (Production Ready)
-
-- **Button** - Intent-based variants (`primary`, `secondary`, `destructive`, `ghost`) with advanced animations
-- **Typography** - Complete text system with semantic intents and responsive scaling
-- **TextField** - State-driven inputs (`normal`, `error`, `success`, `warning`) with glassmorphism styling
-- **Paper** - Surface containers with variants (`standard`, `glass`, `elevated`, `subtle`)
-
-### Theme System
-
-- **ThemeProvider** - Global theme and color scheme management
-- **ThemeScript** - Prevents theme flickering (add before React loads)
-- **useTheme** - Hook for accessing theme context and toggling modes
-- **useIsClient** - Utility hook for client-only components
-
-## Theming API
-
-### ThemeScript Configuration
-
-```tsx
-<ThemeScript
-  defaultColorScheme='dark' // Default: "light"
-  storageKey='my-theme-key' // Default: "quantum-color-scheme"
-  attribute='data-color-mode' // Default: "data-theme"
-  preventFlickering={false} // Default: true
-/>
-```
-
-### ThemeProvider Configuration
-
-```tsx
-<ThemeProvider
-  defaultColorScheme='dark' // Must match ThemeScript
-  storageKey='my-theme-key' // Must match ThemeScript
-  attribute='data-color-mode' // Must match ThemeScript
->
-  <App />
-</ThemeProvider>
-```
-
-### useTheme Hook
-
-```tsx
-function ThemeToggle() {
-  const {
-    colorScheme, // Current theme: "light" | "dark"
-    toggleColorScheme, // Toggle between themes
-    setTheme, // Set specific theme
-    isHydrated, // Whether React has hydrated
-  } = useTheme();
-
-  return <button onClick={toggleColorScheme}>Current: {colorScheme}</button>;
-}
-```
-
-## Component APIs
-
-### Button
-
-```tsx
-import { Button } from 'quantum-ui/Button';
-import type { ButtonProps } from 'quantum-ui/Button';
-
-interface ButtonProps {
-  intent?: 'primary' | 'secondary' | 'destructive' | 'ghost';
-  size?: 'small' | 'medium' | 'large';
-  fullWidth?: boolean;
-  disabled?: boolean;
-}
-```
-
-### Typography
-
-```tsx
-import { Typography } from 'quantum-ui/Typography';
-import type { TypographyProps } from 'quantum-ui/Typography';
-
-interface TypographyProps {
-  intent?: 'primary' | 'secondary' | 'disabled';
-  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'button' | 'caption' | 'overline';
-}
-```
-
-### TextField
-
-```tsx
-import { TextField } from 'quantum-ui/TextField';
-import type { TextFieldProps } from 'quantum-ui/TextField';
-
-interface TextFieldProps {
-  state?: 'normal' | 'error' | 'success' | 'warning';
-  label?: string;
-  message?: string;
-  fullWidth?: boolean;
-}
-```
-
-### Paper
-
-```tsx
-import { Paper } from 'quantum-ui/Paper';
-import type { PaperProps } from 'quantum-ui/Paper';
-
-interface PaperProps {
-  variant?: 'standard' | 'glass' | 'elevated' | 'subtle';
-}
-```
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Start development server
-npm run dev
-
-# Run Storybook
-npm run storybook
-
-# Build library
-npm run build
-
-# Run linting
-npm run lint
-```
-
-## Performance Best Practices
-
-### Import Strategy
-
-```tsx
-// ✅ BEST: Direct component imports (optimal tree-shaking)
-import { Button } from 'quantum-ui/Button';
-import { TextField } from 'quantum-ui/TextField';
-
-// ✅ GOOD: Theme utilities barrel import (small bundle impact)
-import { ThemeProvider, useTheme } from 'quantum-ui';
-
-// ❌ AVOID: Component barrel imports (larger bundles)
-import { Button, TextField } from 'quantum-ui';
-```
-
-### Bundle Size Optimization
-
-- **Individual components**: ~0.5-1KB gzipped each
-- **Theme system**: ~8KB gzipped (includes MUI theme)
-- **Full library**: Import only what you use for optimal performance
-
-## SSR Considerations
-
-### Zero Flickering Setup
-
-1. **Add ThemeScript** before React loads (prevents flickering)
-2. **Configure ThemeProvider** with matching settings
-3. **Use consistent defaults** across script and provider
-
-### Hydration Safety
-
-- ThemeProvider ensures no hydration mismatches
-- `isHydrated` flag available for client-only features
-- `useIsClient` hook for conditional rendering
-
-## Design System
-
-Quantum UI is built on a sophisticated design token system:
-
-- **Colors**: Semantic color system with light/dark mode support
-- **Typography**: Responsive font scaling with dual font approach
-- **Spacing**: Consistent spacing scale across all breakpoints
-- **Shadows**: Elevated and glass morphism effects
-- **Animations**: Smooth transitions with reduced motion support
-
-## Architecture Highlights
-
-### Design Philosophy
-
-- **Intent over Style** - Components use semantic intents rather than style props
-- **Theme-First Architecture** - Everything uses CSS variables, zero hardcoded values
-- **Progressive Enhancement** - Mobile-first with desktop refinements
-- **Performance by Design** - React.memo, constant lookups, zero runtime CSS-in-JS
-
-### Advanced Features
-
-- **Blue Brand Theming** - Universal blue (#0066CC) with subtle input backgrounds
-- **Sophisticated Shadows** - Theme-aware with different opacity for light/dark modes
-- **Animation System** - Confidence animations with accessibility considerations
-- **SSR Excellence** - Zero hydration mismatches across all supported frameworks
-
-### Bundle Optimization
-
-```bash
-# Individual component sizes (gzipped)
-Button:     ~0.7KB
-TextField:  ~0.9KB
-Paper:      ~0.5KB
-Typography: ~0.6KB
-Theme System: ~8KB (includes MUI theme)
-```
-
-## Browser Support
-
-- Chrome 90+ (Backdrop filter support)
-- Firefox 88+ (CSS custom properties)
-- Safari 14+ (Modern CSS features)
-- Edge 90+ (Chromium-based)
-
-## License
-
-MIT License - see LICENSE file for details.
-
----
-
-**Status**: All components are production-ready and fully implemented. The codebase represents a mature, sophisticated design system with excellent architecture and performance characteristics.