@intlayer/design-system 8.4.3 → 8.4.5

package/dist/esm/components/Input/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  InputHTMLAttributes,\n  ReactNode,\n} from 'react';\n\nexport const checkboxVariants = cva(\n  [\n    'appearance-none',\n    'relative cursor-pointer border-2',\n    'focus:outline-0',\n    'checked:border-current checked:bg-current checked:hover:bg-current/80',\n    'ring-current/20 ring-offset-current',\n    'hover:bg-current/20',\n    'disabled:opacity-50',\n\n    // Ring + animation\n    'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n    // centered custom checkmark with text-opposite color\n    \"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']\",\n    'checked:before:flex checked:before:items-center checked:before:justify-center',\n    'checked:before:text-text-opposite/80',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n    \"after:absolute after:-inset-2 after:content-['']\",\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: '',\n      },\n      size: {\n        xs: 'size-3 rounded-sm',\n        sm: 'size-4 rounded-md',\n        md: 'size-5 rounded-lg',\n        lg: 'size-6 rounded-xl',\n      },\n      color: {\n        primary: 'accent-primary',\n        secondary: 'accent-secondary',\n        destructive: 'accent-destructive',\n        neutral: 'accent-neutral',\n        light: 'accent-light',\n        text: 'accent-text',\n        dark: 'accent-dark',\n        error: 'accent-error',\n        success: 'accent-success',\n        custom: 'accent-custom',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n      validationStyleEnabled: 'disabled',\n      size: 'md',\n    },\n  }\n);\n\nexport enum CheckboxSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport enum CheckboxColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  TEXT = 'text',\n  DARK = 'dark',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  name: string;\n  validationStyleEnabled?: boolean;\n  label?: ReactNode;\n} & Omit<\n    VariantProps<typeof checkboxVariants>,\n    'validationStyleEnabled' | 'size' | 'color'\n  > & {\n    size?: CheckboxSize | `${CheckboxSize}`;\n    color?: CheckboxColor | `${CheckboxColor}`;\n    labelClassName?: string;\n  };\n\nconst Input: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  name,\n  variant,\n  className,\n  labelClassName,\n  ...props\n}) => (\n  <input\n    type=\"checkbox\"\n    className={cn(\n      checkboxVariants({\n        variant,\n        size,\n        color,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    {...props}\n  />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n  const { label, name, id } = props;\n\n  return label ? (\n    <label\n      htmlFor={id ?? name}\n      className={cn(\n        'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n        props.size === 'xs' && 'text-xs',\n        props.labelClassName\n      )}\n    >\n      <Input id={id ?? name} {...props} />\n      {label}\n    </label>\n  ) : (\n    <Input id={id ?? name} {...props} />\n  );\n};\n"],"mappings":"yIASA,MAAa,EAAmB,EAC9B,CACE,kBACA,mCACA,kBACA,wEACA,sCACA,sBACA,sBAGA,mFAGA,8EACA,gFACA,uCAGA,kFAEA,mDACD,CAAC,KAAK,IAAI,CACX,CACE,SAAU,CACR,QAAS,CACP,QAAS,GACV,CACD,KAAM,CACJ,GAAI,oBACJ,GAAI,oBACJ,GAAI,oBACJ,GAAI,oBACL,CACD,MAAO,CACL,QAAS,iBACT,UAAW,mBACX,YAAa,qBACb,QAAS,iBACT,MAAO,eACP,KAAM,cACN,KAAM,cACN,MAAO,eACP,QAAS,iBACT,OAAQ,gBACT,CACD,uBAAwB,CACtB,SAAU,GACV,QAAS,4CACV,CACF,CACD,gBAAiB,CACf,QAAS,UACT,MAAO,UACP,uBAAwB,WACxB,KAAM,KACP,CACF,CACF,CAED,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,WACD,CAEW,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,UAAA,YACA,EAAA,YAAA,cACA,EAAA,QAAA,UACA,EAAA,MAAA,QACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,QAAA,UACA,EAAA,OAAA,eACD,CAkBD,MAAM,GAA4B,CAChC,yBAAyB,GACzB,QACA,OACA,QACA,OACA,UACA,YACA,iBACA,GAAG,KAEH,EAAC,QAAD,CACE,KAAK,WACL,UAAW,EACT,EAAiB,CACf,UACA,OACA,QACA,uBAAwB,EAAyB,UAAY,WAC9D,CAAC,CACF,EACD,CACD,GAAI,EACJ,CAAA,CAGS,EAA+B,GAAU,CACpD,GAAM,CAAE,QAAO,OAAM,MAAO,EAE5B,OAAO,EACL,EAAC,QAAD,CACE,QAAS,GAAM,EACf,UAAW,EACT,sEACA,EAAM,OAAS,MAAQ,UACvB,EAAM,eACP,UANH,CAQE,EAAC,EAAD,CAAO,GAAI,GAAM,EAAM,GAAI,EAAS,CAAA,CACnC,EACK,GAER,EAAC,EAAD,CAAO,GAAI,GAAM,EAAM,GAAI,EAAS,CAAA"}
+{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  InputHTMLAttributes,\n  ReactNode,\n} from 'react';\n\nexport const checkboxVariants = cva(\n  [\n    'appearance-none',\n    'relative cursor-pointer border-2',\n    'focus:outline-0',\n    'checked:border-current checked:bg-current checked:hover:bg-current/80',\n    'ring-current/20 ring-offset-current',\n    'hover:bg-current/20',\n    'disabled:opacity-50',\n\n    // Ring + animation\n    'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n    // centered custom checkmark with text-opposite color\n    \"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']\",\n    'checked:before:flex checked:before:items-center checked:before:justify-center',\n    'checked:before:text-text-opposite/80',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n    \"after:absolute after:-inset-2 after:content-['']\",\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: '',\n      },\n      size: {\n        xs: 'size-3 rounded-sm',\n        sm: 'size-4 rounded-md',\n        md: 'size-5 rounded-lg',\n        lg: 'size-6 rounded-xl',\n      },\n      color: {\n        primary: 'accent-primary',\n        secondary: 'accent-secondary',\n        destructive: 'accent-destructive',\n        neutral: 'accent-neutral',\n        light: 'accent-light',\n        text: 'accent-text',\n        dark: 'accent-dark',\n        error: 'accent-error',\n        success: 'accent-success',\n        custom: 'accent-custom',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n      validationStyleEnabled: 'disabled',\n      size: 'md',\n    },\n  }\n);\n\nexport enum CheckboxSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport enum CheckboxColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  TEXT = 'text',\n  DARK = 'dark',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  name: string;\n  validationStyleEnabled?: boolean;\n  label?: ReactNode;\n} & Omit<\n    VariantProps<typeof checkboxVariants>,\n    'validationStyleEnabled' | 'size' | 'color'\n  > & {\n    size?: CheckboxSize | `${CheckboxSize}`;\n    color?: CheckboxColor | `${CheckboxColor}`;\n    labelClassName?: string;\n  };\n\nconst Input: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  name,\n  variant,\n  className,\n  labelClassName,\n  ...props\n}) => (\n  <input\n    type=\"checkbox\"\n    className={cn(\n      checkboxVariants({\n        variant,\n        size,\n        color,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    {...props}\n  />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n  const { label, name, id } = props;\n\n  return label ? (\n    <label\n      htmlFor={id ?? name}\n      className={cn(\n        'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n        props.size === 'xs' && 'text-xs',\n        props.labelClassName\n      )}\n    >\n      <Input id={id ?? name} {...props} />\n      {label}\n    </label>\n  ) : (\n    <Input id={id ?? name} {...props} />\n  );\n};\n"],"mappings":";;;;;AASA,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CAGA;CAEA;CACD,CAAC,KAAK,IAAI,EACX;CACE,UAAU;EACR,SAAS,EACP,SAAS,IACV;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,SAAS;GACT,WAAW;GACX,aAAa;GACb,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,QAAQ;GACT;EACD,wBAAwB;GACtB,UAAU;GACV,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,wBAAwB;EACxB,MAAM;EACP;CACF,CACF;AAED,IAAY,eAAL;AACL;AACA;AACA;AACA;;KACD;AAED,IAAY,gBAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;AAkBD,MAAM,SAA4B,EAChC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,WACA,gBACA,GAAG,YAEH,oBAAC,SAAD;CACE,MAAK;CACL,WAAW,GACT,iBAAiB;EACf;EACA;EACA;EACA,wBAAwB,yBAAyB,YAAY;EAC9D,CAAC,EACF,UACD;CACD,GAAI;CACJ;AAGJ,MAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,OAAO,MAAM,OAAO;AAE5B,QAAO,QACL,qBAAC,SAAD;EACE,SAAS,MAAM;EACf,WAAW,GACT,uEACA,MAAM,SAAS,QAAQ,WACvB,MAAM,eACP;YANH,CAQE,oBAAC,OAAD;GAAO,IAAI,MAAM;GAAM,GAAI;GAAS,GACnC,MACK;MAER,oBAAC,OAAD;EAAO,IAAI,MAAM;EAAM,GAAI;EAAS"}

package/dist/esm/components/Input/Input.mjs

@@ -1,2 +1,66 @@
-import{cva as e}from"class-variance-authority";import{jsx as t}from"react/jsx-runtime";const n=(...e)=>e.filter(Boolean).join(` `),r=e([`w-full select-text resize-none text-base shadow-none outline-none`,`transition-all duration-300 md:text-sm`,`ring-0`,`disabled:opacity-50`,`rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl`].join(` `),{variants:{variant:{default:[`text-text`,`bg-neutral-50 dark:bg-neutral-950`,`ring-text/20`,`disabled:ring-0`,`hover:ring-3`,`focus-within:ring-4`,`focus-visible:outline-none focus-visible:ring-4`,`[box-shadow:none] focus:[box-shadow:none]`,`aria-invalid:border-error`].join(` `),invisible:`border-none text-inherit outline-none ring-0`},size:{sm:`px-2 py-2 text-sm md:py-1.5 md:text-xs`,md:`px-2 py-3 md:py-2`,lg:`p-4`},validationStyleEnabled:{disabled:``,enabled:`valid:border-success invalid:border-error`}},defaultVariants:{variant:`default`,size:`md`,validationStyleEnabled:`disabled`}});let i=function(e){return e.DEFAULT=`default`,e.INVISIBLE=`invisible`,e}({}),a=function(e){return e.MD=`md`,e.LG=`lg`,e}({});const o=({validationStyleEnabled:e=!1,variant:i,size:a,className:o,...s})=>t(`input`,{className:n(r({variant:i,size:a,validationStyleEnabled:e?`enabled`:`disabled`}),o),suppressHydrationWarning:!0,...s});export{o as Input,a as InputSize,i as InputVariant,r as inputVariants};
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Input/Input.tsx
+const cn = (...classes) => classes.filter(Boolean).join(" ");
+const inputVariants = cva([
+	"w-full select-text resize-none text-base shadow-none outline-none",
+	"transition-all duration-300 md:text-sm",
+	"ring-0",
+	"disabled:opacity-50",
+	"rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl"
+].join(" "), {
+	variants: {
+		variant: {
+			default: [
+				"text-text",
+				"bg-neutral-50 dark:bg-neutral-950",
+				"ring-text/20",
+				"disabled:ring-0",
+				"hover:ring-3",
+				"focus-within:ring-4",
+				"focus-visible:outline-none focus-visible:ring-4",
+				"[box-shadow:none] focus:[box-shadow:none]",
+				"aria-invalid:border-error"
+			].join(" "),
+			invisible: "border-none text-inherit outline-none ring-0"
+		},
+		size: {
+			sm: "px-2 py-2 text-sm md:py-1.5 md:text-xs",
+			md: "px-2 py-3 md:py-2",
+			lg: "p-4"
+		},
+		validationStyleEnabled: {
+			disabled: "",
+			enabled: "valid:border-success invalid:border-error"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md",
+		validationStyleEnabled: "disabled"
+	}
+});
+let InputVariant = /* @__PURE__ */ function(InputVariant) {
+	InputVariant["DEFAULT"] = "default";
+	InputVariant["INVISIBLE"] = "invisible";
+	return InputVariant;
+}({});
+let InputSize = /* @__PURE__ */ function(InputSize) {
+	InputSize["MD"] = "md";
+	InputSize["LG"] = "lg";
+	return InputSize;
+}({});
+const Input = ({ validationStyleEnabled = false, variant, size, className, ...props }) => /* @__PURE__ */ jsx("input", {
+	className: cn(inputVariants({
+		variant,
+		size,
+		validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled"
+	}), className),
+	suppressHydrationWarning: true,
+	...props
+});
+
+//#endregion
+export { Input, InputSize, InputVariant, inputVariants };
 //# sourceMappingURL=Input.mjs.map

package/dist/esm/components/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":[],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react';\n\n// Optional: your own cn helper to merge class names\nconst cn = (...classes: (string | undefined | false | null)[]) =>\n  classes.filter(Boolean).join(' ');\n\nexport const inputVariants = cva(\n  [\n    // base styles\n    'w-full select-text resize-none text-base shadow-none outline-none',\n    'transition-all duration-300 md:text-sm',\n    'ring-0',\n    'disabled:opacity-50',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: [\n          'text-text',\n          'bg-neutral-50 dark:bg-neutral-950',\n          'ring-text/20',\n\n          // Focus ring\n          'disabled:ring-0',\n          'hover:ring-3',\n          'focus-within:ring-4',\n          'focus-visible:outline-none focus-visible:ring-4',\n\n          // Remove any weird box-shadow\n          '[box-shadow:none] focus:[box-shadow:none]',\n\n          // aria-invalid border color\n          'aria-invalid:border-error',\n        ].join(' '),\n        invisible: 'border-none text-inherit outline-none ring-0',\n      },\n      size: {\n        sm: 'px-2 py-2 text-sm md:py-1.5 md:text-xs',\n        md: 'px-2 py-3 md:py-2',\n        lg: 'p-4',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      validationStyleEnabled: 'disabled',\n    },\n  }\n);\n\nexport enum InputVariant {\n  DEFAULT = 'default',\n  INVISIBLE = 'invisible',\n}\n\nexport enum InputSize {\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport type InputProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={cn(\n      inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    suppressHydrationWarning\n    {...props}\n  />\n);\n"],"mappings":"uFAIA,MAAM,GAAM,GAAG,IACb,EAAQ,OAAO,QAAQ,CAAC,KAAK,IAAI,CAEtB,EAAgB,EAC3B,CAEE,oEACA,yCACA,SACA,sBAGA,kFACD,CAAC,KAAK,IAAI,CACX,CACE,SAAU,CACR,QAAS,CACP,QAAS,CACP,YACA,oCACA,eAGA,kBACA,eACA,sBACA,kDAGA,4CAGA,4BACD,CAAC,KAAK,IAAI,CACX,UAAW,+CACZ,CACD,KAAM,CACJ,GAAI,yCACJ,GAAI,oBACJ,GAAI,MACL,CACD,uBAAwB,CACtB,SAAU,GACV,QAAS,4CACV,CACF,CACD,gBAAiB,CACf,QAAS,UACT,KAAM,KACN,uBAAwB,WACzB,CACF,CACF,CAED,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,UAAA,kBACD,CAEW,EAAL,SAAA,EAAA,OACL,GAAA,GAAA,KACA,EAAA,GAAA,WACD,CASD,MAAa,GAAyB,CACpC,yBAAyB,GACzB,UACA,OACA,YACA,GAAG,KAEH,EAAC,QAAD,CACE,UAAW,EACT,EAAc,CACZ,UACA,OACA,uBAAwB,EAAyB,UAAY,WAC9D,CAAC,CACF,EACD,CACD,yBAAA,GACA,GAAI,EACJ,CAAA"}
+{"version":3,"file":"Input.mjs","names":[],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react';\n\n// Optional: your own cn helper to merge class names\nconst cn = (...classes: (string | undefined | false | null)[]) =>\n  classes.filter(Boolean).join(' ');\n\nexport const inputVariants = cva(\n  [\n    // base styles\n    'w-full select-text resize-none text-base shadow-none outline-none',\n    'transition-all duration-300 md:text-sm',\n    'ring-0',\n    'disabled:opacity-50',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: [\n          'text-text',\n          'bg-neutral-50 dark:bg-neutral-950',\n          'ring-text/20',\n\n          // Focus ring\n          'disabled:ring-0',\n          'hover:ring-3',\n          'focus-within:ring-4',\n          'focus-visible:outline-none focus-visible:ring-4',\n\n          // Remove any weird box-shadow\n          '[box-shadow:none] focus:[box-shadow:none]',\n\n          // aria-invalid border color\n          'aria-invalid:border-error',\n        ].join(' '),\n        invisible: 'border-none text-inherit outline-none ring-0',\n      },\n      size: {\n        sm: 'px-2 py-2 text-sm md:py-1.5 md:text-xs',\n        md: 'px-2 py-3 md:py-2',\n        lg: 'p-4',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      validationStyleEnabled: 'disabled',\n    },\n  }\n);\n\nexport enum InputVariant {\n  DEFAULT = 'default',\n  INVISIBLE = 'invisible',\n}\n\nexport enum InputSize {\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport type InputProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={cn(\n      inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    suppressHydrationWarning\n    {...props}\n  />\n);\n"],"mappings":";;;;AAIA,MAAM,MAAM,GAAG,YACb,QAAQ,OAAO,QAAQ,CAAC,KAAK,IAAI;AAEnC,MAAa,gBAAgB,IAC3B;CAEE;CACA;CACA;CACA;CAGA;CACD,CAAC,KAAK,IAAI,EACX;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IACA;IAGA;IACA;IACA;IACA;IAGA;IAGA;IACD,CAAC,KAAK,IAAI;GACX,WAAW;GACZ;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,wBAAwB;GACtB,UAAU;GACV,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,wBAAwB;EACzB;CACF,CACF;AAED,IAAY,eAAL;AACL;AACA;;KACD;AAED,IAAY,YAAL;AACL;AACA;;KACD;AASD,MAAa,SAAyB,EACpC,yBAAyB,OACzB,SACA,MACA,WACA,GAAG,YAEH,oBAAC,SAAD;CACE,WAAW,GACT,cAAc;EACZ;EACA;EACA,wBAAwB,yBAAyB,YAAY;EAC9D,CAAC,EACF,UACD;CACD;CACA,GAAI;CACJ"}

package/dist/esm/components/Input/InputPassword.mjs

@@ -1,2 +1,39 @@
-"use client";import{Input as e}from"./Input.mjs";import{useState as t}from"react";import{EyeIcon as n,EyeOffIcon as r}from"lucide-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=o=>{let[s,c]=t(!1),l=e=>{e.preventDefault(),e.stopPropagation(),c(e=>!e)},u=s?n:r;return a(`div`,{className:`relative`,children:[i(e,{...o,"aria-label":`password`,type:s?`text`:`password`}),i(`button`,{"data-testid":`eye-icon`,type:`button`,className:`absolute right-2 h-full flex-row items-center`,onClick:l,"aria-label":s?`Hide password`:`Show password`,children:i(u,{className:`mr-2 inline-block cursor-pointer text-neutral`,size:20})})]})};export{o as InputPassword};
+'use client';
+
+import { Input } from "./Input.mjs";
+import { useState } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Input/InputPassword.tsx
+const InputPassword = (props) => {
+	const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);
+	const handlePasswordReveal = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setIsPasswordRevealed((isPasswordRevealed) => !isPasswordRevealed);
+	};
+	const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(Input, {
+			...props,
+			"aria-label": "password",
+			type: isPasswordRevealed ? "text" : "password"
+		}), /* @__PURE__ */ jsx("button", {
+			"data-testid": "eye-icon",
+			type: "button",
+			className: "absolute right-2 h-full flex-row items-center",
+			onClick: handlePasswordReveal,
+			"aria-label": isPasswordRevealed ? "Hide password" : "Show password",
+			children: /* @__PURE__ */ jsx(EyeIconComponent, {
+				className: "mr-2 inline-block cursor-pointer text-neutral",
+				size: 20
+			})
+		})]
+	});
+};
+
+//#endregion
+export { InputPassword };
 //# sourceMappingURL=InputPassword.mjs.map

package/dist/esm/components/Input/InputPassword.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputPassword.mjs","names":[],"sources":["../../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FC, type MouseEventHandler, useState } from 'react';\nimport { Input, type InputProps } from './Input';\n\ntype InputPasswordProps = Omit<InputProps, 'type'>;\n\nexport const InputPassword: FC<InputPasswordProps> = (props) => {\n  const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n\n  const handlePasswordReveal: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsPasswordRevealed((isPasswordRevealed) => !isPasswordRevealed);\n  };\n\n  const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;\n\n  return (\n    <div className=\"relative\">\n      <Input\n        {...props}\n        aria-label=\"password\"\n        type={isPasswordRevealed ? 'text' : 'password'}\n      />\n\n      <button\n        data-testid=\"eye-icon\"\n        type=\"button\"\n        className=\"absolute right-2 h-full flex-row items-center\"\n        onClick={handlePasswordReveal}\n        aria-label={isPasswordRevealed ? 'Hide password' : 'Show password'}\n      >\n        <EyeIconComponent\n          className=\"mr-2 inline-block cursor-pointer text-neutral\"\n          size={20}\n        />\n      </button>\n    </div>\n  );\n};\n"],"mappings":"2LAQA,MAAa,EAAyC,GAAU,CAC9D,GAAM,CAAC,EAAoB,GAAyB,EAAS,GAAM,CAE7D,EAA8D,GAAM,CACxE,EAAE,gBAAgB,CAClB,EAAE,iBAAiB,CACnB,EAAuB,GAAuB,CAAC,EAAmB,EAG9D,EAAmB,EAAqB,EAAU,EAExD,OACE,EAAC,MAAD,CAAK,UAAU,oBAAf,CACE,EAAC,EAAD,CACE,GAAI,EACJ,aAAW,WACX,KAAM,EAAqB,OAAS,WACpC,CAAA,CAEF,EAAC,SAAD,CACE,cAAY,WACZ,KAAK,SACL,UAAU,gDACV,QAAS,EACT,aAAY,EAAqB,gBAAkB,yBAEnD,EAAC,EAAD,CACE,UAAU,gDACV,KAAM,GACN,CAAA,CACK,CAAA,CACL"}
+{"version":3,"file":"InputPassword.mjs","names":[],"sources":["../../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FC, type MouseEventHandler, useState } from 'react';\nimport { Input, type InputProps } from './Input';\n\ntype InputPasswordProps = Omit<InputProps, 'type'>;\n\nexport const InputPassword: FC<InputPasswordProps> = (props) => {\n  const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n\n  const handlePasswordReveal: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsPasswordRevealed((isPasswordRevealed) => !isPasswordRevealed);\n  };\n\n  const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;\n\n  return (\n    <div className=\"relative\">\n      <Input\n        {...props}\n        aria-label=\"password\"\n        type={isPasswordRevealed ? 'text' : 'password'}\n      />\n\n      <button\n        data-testid=\"eye-icon\"\n        type=\"button\"\n        className=\"absolute right-2 h-full flex-row items-center\"\n        onClick={handlePasswordReveal}\n        aria-label={isPasswordRevealed ? 'Hide password' : 'Show password'}\n      >\n        <EyeIconComponent\n          className=\"mr-2 inline-block cursor-pointer text-neutral\"\n          size={20}\n        />\n      </button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAQA,MAAa,iBAAyC,UAAU;CAC9D,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,MAAM;CAEnE,MAAM,wBAA8D,MAAM;AACxE,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,yBAAuB,uBAAuB,CAAC,mBAAmB;;CAGpE,MAAM,mBAAmB,qBAAqB,UAAU;AAExD,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,GAAI;GACJ,cAAW;GACX,MAAM,qBAAqB,SAAS;GACpC,GAEF,oBAAC,UAAD;GACE,eAAY;GACZ,MAAK;GACL,WAAU;GACV,SAAS;GACT,cAAY,qBAAqB,kBAAkB;aAEnD,oBAAC,kBAAD;IACE,WAAU;IACV,MAAM;IACN;GACK,EACL"}