dash-ui-kit 1.0.94 → 2.1.0-dev

package/dist/react/components/input/index.cjs.js

@@ -0,0 +1,242 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+var index = require('../icons/index.cjs.js');
+var useColorScheme = require('../../hooks/useColorScheme.cjs.js');
+
+const input = classVarianceAuthority.cva('w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]', {
+  variants: {
+    theme: {
+      light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',
+      dark: 'text-white placeholder:text-gray-400'
+    },
+    colorScheme: {
+      default: 'focus:ring-blue-500/20',
+      brand: 'focus:ring-dash-brand/20',
+      error: 'focus:ring-red-500/20',
+      success: 'focus:ring-green-500/20',
+      'light-gray': 'focus:ring-[#6B7280]/20'
+    },
+    size: {
+      sm: 'dash-block-sm font-light',
+      md: 'dash-block-md font-light',
+      xl: 'dash-block-xl font-light'
+    },
+    variant: {
+      outlined: 'outline outline-1 outline-offset-[-1px]',
+      filled: 'border-none'
+    },
+    disabled: {
+      false: '',
+      true: 'opacity-60 cursor-not-allowed'
+    }
+  },
+  compoundVariants: [
+  // Outlined variant colors
+  {
+    variant: 'outlined',
+    colorScheme: 'default',
+    class: 'outline-[rgba(17,17,17,0.32)] focus:outline-[rgba(17,17,17,0.6)]'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'brand',
+    class: 'outline-dash-brand/30 focus:outline-dash-brand'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'error',
+    class: 'outline-red-500 focus:outline-red-500'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'success',
+    class: 'outline-green-500 focus:outline-green-500'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'light-gray',
+    class: 'outline-[#6B7280]/50 focus:outline-[#6B7280]'
+  },
+  // Outlined variant with focus ring
+  {
+    variant: 'outlined',
+    class: 'focus:ring-2'
+  },
+  // Outlined variant background
+  {
+    variant: 'outlined',
+    theme: 'light',
+    class: 'bg-white'
+  }, {
+    variant: 'outlined',
+    theme: 'dark',
+    class: 'bg-gray-800'
+  },
+  // Filled variant colors
+  {
+    variant: 'filled',
+    colorScheme: 'default',
+    class: 'bg-[rgba(76,126,255,0.15)] focus:bg-[rgba(76,126,255,0.2)]'
+  }, {
+    variant: 'filled',
+    colorScheme: 'brand',
+    class: 'bg-dash-brand/15 focus:bg-dash-brand/20'
+  }, {
+    variant: 'filled',
+    colorScheme: 'error',
+    class: 'bg-red-500/15 focus:bg-red-500/20'
+  }, {
+    variant: 'filled',
+    colorScheme: 'success',
+    class: 'bg-green-500/15 focus:bg-green-500/20'
+  }, {
+    variant: 'filled',
+    colorScheme: 'light-gray',
+    class: 'bg-[#0C1C33]/5 focus:bg-[#0C1C33]/10'
+  },
+  // Filled variant with focus ring
+  {
+    variant: 'filled',
+    class: 'focus:ring-2'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    colorScheme: 'default',
+    size: 'xl',
+    variant: 'outlined',
+    disabled: false
+  }
+});
+/**
+ * A versatile input component that adapts to light/dark theme,
+ * supports various color schemes, sizes, variants, and states.
+ * For password inputs, includes a toggleable eye icon.
+ * Supports prefix text or elements before input content.
+ *
+ * @example
+ * <Input
+ *   type='password'
+ *   placeholder='Enter password'
+ *   colorScheme='brand'
+ *   size='xl'
+ *   prefix="https://"
+ * />
+ */
+const Input = _a => {
+  var _b;
+  var {
+      className = '',
+      colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
+      size,
+      variant,
+      error = false,
+      success = false,
+      disabled = false,
+      type,
+      prefix,
+      prefixClassName = '',
+      showPasswordToggle = true
+    } = _a,
+    props = tslib.__rest(_a, ["className", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "variant", "error", "success", "disabled", "type", "prefix", "prefixClassName", "showPasswordToggle"]);
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [prefixWidth, setPrefixWidth] = React.useState(0);
+  const prefixRef = React.useRef(null);
+  const effectiveColorScheme = (_b = useColorScheme.useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
+  // Determine color scheme based on state
+  let finalColorScheme = effectiveColorScheme;
+  if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
+  const classes = input({
+    theme,
+    colorScheme: finalColorScheme,
+    size,
+    variant,
+    disabled
+  }) + ' ' + className;
+  const isPassword = type === 'password';
+  const inputType = isPassword && showPassword ? 'text' : type;
+  const hasPrefix = Boolean(prefix);
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+  // Measure actual prefix width
+  React.useEffect(() => {
+    if (prefixRef.current) {
+      const width = prefixRef.current.offsetWidth;
+      // Convert px to rem (assuming 16px base) and add base padding (1rem) + extra space (0.5rem)
+      setPrefixWidth(width / 16 + 1.5);
+    }
+  }, [prefix]);
+  // Render with prefix
+  if (hasPrefix) {
+    return jsxRuntime.jsxs("div", {
+      className: 'relative',
+      children: [jsxRuntime.jsx("div", {
+        ref: prefixRef,
+        className: `absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[0.875rem] opacity-60 pointer-events-none select-none ${prefixClassName}`,
+        children: prefix
+      }), jsxRuntime.jsx("input", Object.assign({
+        className: `${classes}${isPassword && showPasswordToggle ? ' pr-12' : ''}`,
+        style: {
+          paddingLeft: prefixWidth ? `${prefixWidth}rem` : '1rem'
+        },
+        disabled: disabled,
+        type: inputType
+      }, props)), isPassword && showPasswordToggle && jsxRuntime.jsx("button", {
+        type: 'button',
+        className: 'absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none',
+        onClick: togglePasswordVisibility,
+        tabIndex: -1,
+        children: showPassword ? jsxRuntime.jsx(index.EyeClosedIcon, {
+          size: 16,
+          color: '#0C1C33'
+        }) : jsxRuntime.jsx(index.EyeOpenIcon, {
+          size: 16,
+          color: '#0C1C33'
+        })
+      })]
+    });
+  }
+  // Render password input without prefix
+  if (isPassword) {
+    return jsxRuntime.jsxs("div", {
+      className: 'relative',
+      children: [jsxRuntime.jsx("input", Object.assign({
+        className: classes + (showPasswordToggle ? ' pr-12' : ''),
+        disabled: disabled,
+        type: inputType
+      }, props)), showPasswordToggle && jsxRuntime.jsx("button", {
+        type: 'button',
+        className: 'absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none',
+        onClick: togglePasswordVisibility,
+        tabIndex: -1,
+        children: showPassword ? jsxRuntime.jsx(index.EyeClosedIcon, {
+          size: 16,
+          color: '#0C1C33'
+        }) : jsxRuntime.jsx(index.EyeOpenIcon, {
+          size: 16,
+          color: '#0C1C33'
+        })
+      })]
+    });
+  }
+  // Regular input without prefix
+  return jsxRuntime.jsx("input", Object.assign({
+    className: classes,
+    disabled: disabled,
+    type: inputType
+  }, props));
+};
+
+exports.Input = Input;
+exports.default = Input;
+//# sourceMappingURL=index.cjs.js.map

package/dist/react/components/input/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/input/index.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, useState, useRef, useEffect } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { EyeOpenIcon, EyeClosedIcon } from '../icons'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst input = cva(\n  'w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n        dark: 'text-white placeholder:text-gray-400'\n      },\n      colorScheme: {\n        default: 'focus:ring-blue-500/20',\n        brand: 'focus:ring-dash-brand/20',\n        error: 'focus:ring-red-500/20',\n        success: 'focus:ring-green-500/20',\n        'light-gray': 'focus:ring-[#6B7280]/20'\n      },\n      size: {\n        sm: 'dash-block-sm font-light',\n        md: 'dash-block-md font-light',\n        xl: 'dash-block-xl font-light'\n      },\n      variant: {\n        outlined: 'outline outline-1 outline-offset-[-1px]',\n        filled: 'border-none'\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outlined variant colors\n      {\n        variant: 'outlined',\n        colorScheme: 'default',\n        class: 'outline-[rgba(17,17,17,0.32)] focus:outline-[rgba(17,17,17,0.6)]'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'brand',\n        class: 'outline-dash-brand/30 focus:outline-dash-brand'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'error',\n        class: 'outline-red-500 focus:outline-red-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'success',\n        class: 'outline-green-500 focus:outline-green-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'light-gray',\n        class: 'outline-[#6B7280]/50 focus:outline-[#6B7280]'\n      },\n      // Outlined variant with focus ring\n      {\n        variant: 'outlined',\n        class: 'focus:ring-2'\n      },\n      // Outlined variant background\n      {\n        variant: 'outlined',\n        theme: 'light',\n        class: 'bg-white'\n      },\n      {\n        variant: 'outlined',\n        theme: 'dark',\n        class: 'bg-gray-800'\n      },\n      // Filled variant colors\n      {\n        variant: 'filled',\n        colorScheme: 'default',\n        class: 'bg-[rgba(76,126,255,0.15)] focus:bg-[rgba(76,126,255,0.2)]'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'brand',\n        class: 'bg-dash-brand/15 focus:bg-dash-brand/20'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'error',\n        class: 'bg-red-500/15 focus:bg-red-500/20'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'success',\n        class: 'bg-green-500/15 focus:bg-green-500/20'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'light-gray',\n        class: 'bg-[#0C1C33]/5 focus:bg-[#0C1C33]/10'\n      },\n      // Filled variant with focus ring\n      {\n        variant: 'filled',\n        class: 'focus:ring-2'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'xl',\n      variant: 'outlined',\n      disabled: false\n    }\n  }\n)\n\ntype InputVariants = VariantProps<typeof input>\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>, Omit<InputVariants, 'theme' | 'disabled'> {\n  className?: string\n  error?: boolean\n  success?: boolean\n  prefix?: string | React.ReactNode\n  prefixClassName?: string\n  /** Color scheme override for light theme */\n  colorSchemeLight?: 'default' | 'brand' | 'error' | 'success' | 'light-gray'\n  /** Color scheme override for dark theme */\n  colorSchemeDark?: 'default' | 'brand' | 'error' | 'success' | 'light-gray'\n  /**\n   * Controls visibility toggle for password inputs. When false, the eye icon is hidden and no extra right padding is applied.\n   * Defaults to true.\n   */\n  showPasswordToggle?: boolean\n}\n\n/**\n * A versatile input component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * For password inputs, includes a toggleable eye icon.\n * Supports prefix text or elements before input content.\n *\n * @example\n * <Input\n *   type='password'\n *   placeholder='Enter password'\n *   colorScheme='brand'\n *   size='xl'\n *   prefix=\"https://\"\n * />\n */\nexport const Input: React.FC<InputProps> = ({\n  className = '',\n  colorScheme,\n  colorSchemeLight,\n  colorSchemeDark,\n  size,\n  variant,\n  error = false,\n  success = false,\n  disabled = false,\n  type,\n  prefix,\n  prefixClassName = '',\n  showPasswordToggle = true,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const [showPassword, setShowPassword] = useState(false)\n  const [prefixWidth, setPrefixWidth] = useState(0)\n  const prefixRef = useRef<HTMLDivElement>(null)\n\n  const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n\n  // Determine color scheme based on state\n  let finalColorScheme: typeof effectiveColorScheme = effectiveColorScheme\n  if (error) finalColorScheme = 'error'\n  else if (success) finalColorScheme = 'success'\n\n  const classes = input({\n    theme,\n    colorScheme: finalColorScheme,\n    size,\n    variant,\n    disabled\n  }) + ' ' + className\n\n  const isPassword = type === 'password'\n  const inputType = isPassword && showPassword ? 'text' : type\n  const hasPrefix = Boolean(prefix)\n\n  const togglePasswordVisibility = (): void => {\n    setShowPassword(!showPassword)\n  }\n\n  // Measure actual prefix width\n  useEffect(() => {\n    if (prefixRef.current) {\n      const width = prefixRef.current.offsetWidth\n      // Convert px to rem (assuming 16px base) and add base padding (1rem) + extra space (0.5rem)\n      setPrefixWidth(width / 16 + 1.5)\n    }\n  }, [prefix])\n\n  // Render with prefix\n  if (hasPrefix) {\n    return (\n      <div className='relative'>\n        <div \n          ref={prefixRef}\n          className={`absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[0.875rem] opacity-60 pointer-events-none select-none ${prefixClassName}`}\n        >\n          {prefix}\n        </div>\n        <input\n          className={`${classes}${isPassword && showPasswordToggle ? ' pr-12' : ''}`}\n          style={{ paddingLeft: prefixWidth ? `${prefixWidth}rem` : '1rem' }}\n          disabled={disabled}\n          type={inputType}\n          {...props}\n        />\n        {isPassword && showPasswordToggle && (\n          <button\n            type='button'\n            className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n            onClick={togglePasswordVisibility}\n            tabIndex={-1}\n          >\n            {showPassword\n              ? <EyeClosedIcon size={16} color='#0C1C33' />\n              : <EyeOpenIcon size={16} color='#0C1C33' />}\n          </button>\n        )}\n      </div>\n    )\n  }\n\n  // Render password input without prefix\n  if (isPassword) {\n    return (\n      <div className='relative'>\n        <input\n          className={classes + (showPasswordToggle ? ' pr-12' : '')}\n          disabled={disabled}\n          type={inputType}\n          {...props}\n        />\n        {showPasswordToggle && (\n          <button\n            type='button'\n            className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n            onClick={togglePasswordVisibility}\n            tabIndex={-1}\n          >\n            {showPassword\n              ? <EyeClosedIcon size={16} color='#0C1C33' />\n              : <EyeOpenIcon size={16} color='#0C1C33' />}\n          </button>\n        )}\n      </div>\n    )\n  }\n\n  // Regular input without prefix\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      type={inputType}\n      {...props}\n    />\n  )\n}\n\nexport default Input "],"names":["input","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","filled","disabled","false","true","compoundVariants","class","defaultVariants","Input","_a","className","colorSchemeLight","colorSchemeDark","type","prefix","prefixClassName","showPasswordToggle","props","__rest","useTheme","showPassword","setShowPassword","useState","prefixWidth","setPrefixWidth","prefixRef","useRef","effectiveColorScheme","_b","useColorScheme","finalColorScheme","classes","isPassword","inputType","hasPrefix","Boolean","togglePasswordVisibility","useEffect","current","width","offsetWidth","_jsxs","children","_jsx","ref","Object","assign","style","paddingLeft","onClick","tabIndex","EyeClosedIcon","color","EyeOpenIcon"],"mappings":";;;;;;;;;;;;;;AAMA,MAAMA,KAAK,GAAGC,0BAAG,CACf,kGAAkG,EAClG;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,sDAAsD;AAC7DC,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,WAAW,EAAE;AACXC,MAAAA,OAAO,EAAE,wBAAwB;AACjCC,MAAAA,KAAK,EAAE,0BAA0B;AACjCC,MAAAA,KAAK,EAAE,uBAAuB;AAC9BC,MAAAA,OAAO,EAAE,yBAAyB;AAClC,MAAA,YAAY,EAAE;KACf;AACDC,IAAAA,IAAI,EAAE;AACJC,MAAAA,EAAE,EAAE,0BAA0B;AAC9BC,MAAAA,EAAE,EAAE,0BAA0B;AAC9BC,MAAAA,EAAE,EAAE;KACL;AACDC,IAAAA,OAAO,EAAE;AACPC,MAAAA,QAAQ,EAAE,yCAAyC;AACnDC,MAAAA,MAAM,EAAE;KACT;AACDC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,gBAAgB,EAAE;AAChB;AACA,EAAA;AACEN,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,SAAS;AACtBgB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEP,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,OAAO;AACpBgB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEP,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,OAAO;AACpBgB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEP,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,SAAS;AACtBgB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEP,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,YAAY;AACzBgB,IAAAA,KAAK,EAAE;GACR;AACD;AACA,EAAA;AACEP,IAAAA,OAAO,EAAE,UAAU;AACnBO,IAAAA,KAAK,EAAE;GACR;AACD;AACA,EAAA;AACEP,IAAAA,OAAO,EAAE,UAAU;AACnBZ,IAAAA,KAAK,EAAE,OAAO;AACdmB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEP,IAAAA,OAAO,EAAE,UAAU;AACnBZ,IAAAA,KAAK,EAAE,MAAM;AACbmB,IAAAA,KAAK,EAAE;GACR;AACD;AACA,EAAA;AACEP,IAAAA,OAAO,EAAE,QAAQ;AACjBT,IAAAA,WAAW,EAAE,SAAS;AACtBgB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEP,IAAAA,OAAO,EAAE,QAAQ;AACjBT,IAAAA,WAAW,EAAE,OAAO;AACpBgB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEP,IAAAA,OAAO,EAAE,QAAQ;AACjBT,IAAAA,WAAW,EAAE,OAAO;AACpBgB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEP,IAAAA,OAAO,EAAE,QAAQ;AACjBT,IAAAA,WAAW,EAAE,SAAS;AACtBgB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEP,IAAAA,OAAO,EAAE,QAAQ;AACjBT,IAAAA,WAAW,EAAE,YAAY;AACzBgB,IAAAA,KAAK,EAAE;GACR;AACD;AACA,EAAA;AACEP,IAAAA,OAAO,EAAE,QAAQ;AACjBO,IAAAA,KAAK,EAAE;AACR,GAAA,CACF;AACDC,EAAAA,eAAe,EAAE;AACfpB,IAAAA,KAAK,EAAE,OAAO;AACdG,IAAAA,WAAW,EAAE,SAAS;AACtBK,IAAAA,IAAI,EAAE,IAAI;AACVI,IAAAA,OAAO,EAAE,UAAU;AACnBG,IAAAA,QAAQ,EAAE;AACX;AACF,CAAA,CACF;AAqBD;;;;;;;;;;;;;;AAcG;AACUM,MAAAA,KAAK,GAA0BC,EAe3C,IAAI;;EAfuC,IAAA;AAC1CC,MAAAA,SAAS,GAAG,EAAE;MACdpB,WAAW;MACXqB,gBAAgB;MAChBC,eAAe;MACfjB,IAAI;MACJI,OAAO;AACPN,MAAAA,KAAK,GAAG,KAAK;AACbC,MAAAA,OAAO,GAAG,KAAK;AACfQ,MAAAA,QAAQ,GAAG,KAAK;MAChBW,IAAI;MACJC,MAAM;AACNC,MAAAA,eAAe,GAAG,EAAE;AACpBC,MAAAA,kBAAkB,GAAG;AAAI,KAAA,GAAAP,EAE1B;AADIQ,IAAAA,KAAK,GAAAC,YAAA,CAAAT,EAAA,EAdkC,iLAe3C,CADS;EAER,MAAM;AAAEtB,IAAAA;GAAO,GAAGgC,qBAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EACvD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,cAAQ,CAAC,CAAC,CAAC;AACjD,EAAA,MAAMG,SAAS,GAAGC,YAAM,CAAiB,IAAI,CAAC;EAE9C,MAAMC,oBAAoB,GAAG,CAAAC,EAAA,GAAAC,6BAAc,CAACvC,WAAW,EAAEqB,gBAAgB,EAAEC,eAAe,CAAC,MAAA,IAAA,IAAAgB,EAAA,KAAA,MAAA,GAAAA,EAAA,GAAI,SAAS;AAExG;EACA,IAAIE,gBAAgB,GAAgCH,oBAAoB;AACxE,EAAA,IAAIlC,KAAK,EAAEqC,gBAAgB,GAAG,OAAO,CAAA,KAChC,IAAIpC,OAAO,EAAEoC,gBAAgB,GAAG,SAAS;EAE9C,MAAMC,OAAO,GAAG/C,KAAK,CAAC;IACpBG,KAAK;AACLG,IAAAA,WAAW,EAAEwC,gBAAgB;IAC7BnC,IAAI;IACJI,OAAO;AACPG,IAAAA;AACD,GAAA,CAAC,GAAG,GAAG,GAAGQ,SAAS;AAEpB,EAAA,MAAMsB,UAAU,GAAGnB,IAAI,KAAK,UAAU;EACtC,MAAMoB,SAAS,GAAGD,UAAU,IAAIZ,YAAY,GAAG,MAAM,GAAGP,IAAI;AAC5D,EAAA,MAAMqB,SAAS,GAAGC,OAAO,CAACrB,MAAM,CAAC;EAEjC,MAAMsB,wBAAwB,GAAGA,MAAW;IAC1Cf,eAAe,CAAC,CAACD,YAAY,CAAC;GAC/B;AAED;AACAiB,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIZ,SAAS,CAACa,OAAO,EAAE;AACrB,MAAA,MAAMC,KAAK,GAAGd,SAAS,CAACa,OAAO,CAACE,WAAW;AAC3C;AACAhB,MAAAA,cAAc,CAACe,KAAK,GAAG,EAAE,GAAG,GAAG,CAAC;AAClC;AACF,GAAC,EAAE,CAACzB,MAAM,CAAC,CAAC;AAEZ;AACA,EAAA,IAAIoB,SAAS,EAAE;IACb,OACEO,eAAK,CAAA,KAAA,EAAA;AAAA/B,MAAAA,SAAS,EAAC,UAAU;AAAAgC,MAAAA,QAAA,EAAA,CACvBC;AACEC,QAAAA,GAAG,EAAEnB,SAAS;QACdf,SAAS,EAAE,CAA4GK,yGAAAA,EAAAA,eAAe,CAAE,CAAA;AAEvI2B,QAAAA,QAAA,EAAA5B;QACG,EACN6B,cAAA,CAAA,OAAA,EAAAE,MAAA,CAAAC,MAAA,CAAA;QACEpC,SAAS,EAAE,CAAGqB,EAAAA,OAAO,CAAGC,EAAAA,UAAU,IAAIhB,kBAAkB,GAAG,QAAQ,GAAG,EAAE,CAAE,CAAA;AAC1E+B,QAAAA,KAAK,EAAE;AAAEC,UAAAA,WAAW,EAAEzB,WAAW,GAAG,CAAGA,EAAAA,WAAW,KAAK,GAAG;SAAQ;AAClErB,QAAAA,QAAQ,EAAEA,QAAQ;AAClBW,QAAAA,IAAI,EAAEoB;AACF,OAAA,EAAAhB,KAAK,EACT,EACDe,UAAU,IAAIhB,kBAAkB,IAC/B2B,cACE,CAAA,QAAA,EAAA;AAAA9B,QAAAA,IAAI,EAAC,QAAQ;AACbH,QAAAA,SAAS,EAAC,4HAA4H;AACtIuC,QAAAA,OAAO,EAAEb,wBAAwB;QACjCc,QAAQ,EAAE,EAAE;kBAEX9B,YAAY,GACTuB,cAAC,CAAAQ,mBAAa,EAAC;AAAAxD,UAAAA,IAAI,EAAE,EAAE;AAAEyD,UAAAA,KAAK,EAAC;AAAY,SAAA,CAAA,GAC3CT,cAAC,CAAAU,iBAAW,EAAC;AAAA1D,UAAAA,IAAI,EAAE,EAAE;AAAEyD,UAAAA,KAAK,EAAC;SAAY;AAAA,OAAA,CAEhD;AAAA,KAAA,CACG;AAEV;AAEA;AACA,EAAA,IAAIpB,UAAU,EAAE;IACd,OACES,eAAK,CAAA,KAAA,EAAA;AAAA/B,MAAAA,SAAS,EAAC,UAAU;iBACvBiC,cACE,CAAA,OAAA,EAAAE,MAAA,CAAAC,MAAA,CAAA;QAAApC,SAAS,EAAEqB,OAAO,IAAIf,kBAAkB,GAAG,QAAQ,GAAG,EAAE,CAAC;AACzDd,QAAAA,QAAQ,EAAEA,QAAQ;AAClBW,QAAAA,IAAI,EAAEoB;OACF,EAAAhB,KAAK,CACT,CAAA,EACDD,kBAAkB,IACjB2B,cAAA,CAAA,QAAA,EAAA;AACE9B,QAAAA,IAAI,EAAC,QAAQ;AACbH,QAAAA,SAAS,EAAC,4HAA4H;AACtIuC,QAAAA,OAAO,EAAEb,wBAAwB;QACjCc,QAAQ,EAAE,EAAE;AAAAR,QAAAA,QAAA,EAEXtB,YAAY,GACTuB,cAAC,CAAAQ,mBAAa,EAAC;AAAAxD,UAAAA,IAAI,EAAE,EAAE;AAAEyD,UAAAA,KAAK,EAAC;AAAY,SAAA,CAAA,GAC3CT,cAAC,CAAAU,iBAAW,EAAC;AAAA1D,UAAAA,IAAI,EAAE,EAAE;AAAEyD,UAAAA,KAAK,EAAC;SAAY;AAAA,OAAA,CAEhD;AAAA,KAAA,CACG;AAEV;AAEA;AACA,EAAA,OACET,cACE,CAAA,OAAA,EAAAE,MAAA,CAAAC,MAAA,CAAA;AAAApC,IAAAA,SAAS,EAAEqB,OAAO;AAClB7B,IAAAA,QAAQ,EAAEA,QAAQ;AAClBW,IAAAA,IAAI,EAAEoB;KACFhB,KAAK,CAAA,CACT;AAEN;;;;;"}

package/dist/react/components/input/index.d.ts

@@ -14,6 +14,10 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     success?: boolean;
     prefix?: string | React.ReactNode;
     prefixClassName?: string;
+    /** Color scheme override for light theme */
+    colorSchemeLight?: 'default' | 'brand' | 'error' | 'success' | 'light-gray';
+    /** Color scheme override for dark theme */
+    colorSchemeDark?: 'default' | 'brand' | 'error' | 'success' | 'light-gray';
     /**
      * Controls visibility toggle for password inputs. When false, the eye icon is hidden and no extra right padding is applied.
      * Defaults to true.

package/dist/react/components/input/index.esm.js

@@ -0,0 +1,237 @@
+"use client";
+
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { cva } from 'class-variance-authority';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { EyeClosedIcon, EyeOpenIcon } from '../icons/index.esm.js';
+import { useColorScheme } from '../../hooks/useColorScheme.esm.js';
+
+const input = cva('w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]', {
+  variants: {
+    theme: {
+      light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',
+      dark: 'text-white placeholder:text-gray-400'
+    },
+    colorScheme: {
+      default: 'focus:ring-blue-500/20',
+      brand: 'focus:ring-dash-brand/20',
+      error: 'focus:ring-red-500/20',
+      success: 'focus:ring-green-500/20',
+      'light-gray': 'focus:ring-[#6B7280]/20'
+    },
+    size: {
+      sm: 'dash-block-sm font-light',
+      md: 'dash-block-md font-light',
+      xl: 'dash-block-xl font-light'
+    },
+    variant: {
+      outlined: 'outline outline-1 outline-offset-[-1px]',
+      filled: 'border-none'
+    },
+    disabled: {
+      false: '',
+      true: 'opacity-60 cursor-not-allowed'
+    }
+  },
+  compoundVariants: [
+  // Outlined variant colors
+  {
+    variant: 'outlined',
+    colorScheme: 'default',
+    class: 'outline-[rgba(17,17,17,0.32)] focus:outline-[rgba(17,17,17,0.6)]'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'brand',
+    class: 'outline-dash-brand/30 focus:outline-dash-brand'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'error',
+    class: 'outline-red-500 focus:outline-red-500'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'success',
+    class: 'outline-green-500 focus:outline-green-500'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'light-gray',
+    class: 'outline-[#6B7280]/50 focus:outline-[#6B7280]'
+  },
+  // Outlined variant with focus ring
+  {
+    variant: 'outlined',
+    class: 'focus:ring-2'
+  },
+  // Outlined variant background
+  {
+    variant: 'outlined',
+    theme: 'light',
+    class: 'bg-white'
+  }, {
+    variant: 'outlined',
+    theme: 'dark',
+    class: 'bg-gray-800'
+  },
+  // Filled variant colors
+  {
+    variant: 'filled',
+    colorScheme: 'default',
+    class: 'bg-[rgba(76,126,255,0.15)] focus:bg-[rgba(76,126,255,0.2)]'
+  }, {
+    variant: 'filled',
+    colorScheme: 'brand',
+    class: 'bg-dash-brand/15 focus:bg-dash-brand/20'
+  }, {
+    variant: 'filled',
+    colorScheme: 'error',
+    class: 'bg-red-500/15 focus:bg-red-500/20'
+  }, {
+    variant: 'filled',
+    colorScheme: 'success',
+    class: 'bg-green-500/15 focus:bg-green-500/20'
+  }, {
+    variant: 'filled',
+    colorScheme: 'light-gray',
+    class: 'bg-[#0C1C33]/5 focus:bg-[#0C1C33]/10'
+  },
+  // Filled variant with focus ring
+  {
+    variant: 'filled',
+    class: 'focus:ring-2'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    colorScheme: 'default',
+    size: 'xl',
+    variant: 'outlined',
+    disabled: false
+  }
+});
+/**
+ * A versatile input component that adapts to light/dark theme,
+ * supports various color schemes, sizes, variants, and states.
+ * For password inputs, includes a toggleable eye icon.
+ * Supports prefix text or elements before input content.
+ *
+ * @example
+ * <Input
+ *   type='password'
+ *   placeholder='Enter password'
+ *   colorScheme='brand'
+ *   size='xl'
+ *   prefix="https://"
+ * />
+ */
+const Input = _a => {
+  var _b;
+  var {
+      className = '',
+      colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
+      size,
+      variant,
+      error = false,
+      success = false,
+      disabled = false,
+      type,
+      prefix,
+      prefixClassName = '',
+      showPasswordToggle = true
+    } = _a,
+    props = __rest(_a, ["className", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "variant", "error", "success", "disabled", "type", "prefix", "prefixClassName", "showPasswordToggle"]);
+  const {
+    theme
+  } = useTheme();
+  const [showPassword, setShowPassword] = useState(false);
+  const [prefixWidth, setPrefixWidth] = useState(0);
+  const prefixRef = useRef(null);
+  const effectiveColorScheme = (_b = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
+  // Determine color scheme based on state
+  let finalColorScheme = effectiveColorScheme;
+  if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
+  const classes = input({
+    theme,
+    colorScheme: finalColorScheme,
+    size,
+    variant,
+    disabled
+  }) + ' ' + className;
+  const isPassword = type === 'password';
+  const inputType = isPassword && showPassword ? 'text' : type;
+  const hasPrefix = Boolean(prefix);
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+  // Measure actual prefix width
+  useEffect(() => {
+    if (prefixRef.current) {
+      const width = prefixRef.current.offsetWidth;
+      // Convert px to rem (assuming 16px base) and add base padding (1rem) + extra space (0.5rem)
+      setPrefixWidth(width / 16 + 1.5);
+    }
+  }, [prefix]);
+  // Render with prefix
+  if (hasPrefix) {
+    return jsxs("div", {
+      className: 'relative',
+      children: [jsx("div", {
+        ref: prefixRef,
+        className: `absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[0.875rem] opacity-60 pointer-events-none select-none ${prefixClassName}`,
+        children: prefix
+      }), jsx("input", Object.assign({
+        className: `${classes}${isPassword && showPasswordToggle ? ' pr-12' : ''}`,
+        style: {
+          paddingLeft: prefixWidth ? `${prefixWidth}rem` : '1rem'
+        },
+        disabled: disabled,
+        type: inputType
+      }, props)), isPassword && showPasswordToggle && jsx("button", {
+        type: 'button',
+        className: 'absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none',
+        onClick: togglePasswordVisibility,
+        tabIndex: -1,
+        children: showPassword ? jsx(EyeClosedIcon, {
+          size: 16,
+          color: '#0C1C33'
+        }) : jsx(EyeOpenIcon, {
+          size: 16,
+          color: '#0C1C33'
+        })
+      })]
+    });
+  }
+  // Render password input without prefix
+  if (isPassword) {
+    return jsxs("div", {
+      className: 'relative',
+      children: [jsx("input", Object.assign({
+        className: classes + (showPasswordToggle ? ' pr-12' : ''),
+        disabled: disabled,
+        type: inputType
+      }, props)), showPasswordToggle && jsx("button", {
+        type: 'button',
+        className: 'absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none',
+        onClick: togglePasswordVisibility,
+        tabIndex: -1,
+        children: showPassword ? jsx(EyeClosedIcon, {
+          size: 16,
+          color: '#0C1C33'
+        }) : jsx(EyeOpenIcon, {
+          size: 16,
+          color: '#0C1C33'
+        })
+      })]
+    });
+  }
+  // Regular input without prefix
+  return jsx("input", Object.assign({
+    className: classes,
+    disabled: disabled,
+    type: inputType
+  }, props));
+};
+
+export { Input, Input as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/react/components/input/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/input/index.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, useState, useRef, useEffect } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { EyeOpenIcon, EyeClosedIcon } from '../icons'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst input = cva(\n  'w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n        dark: 'text-white placeholder:text-gray-400'\n      },\n      colorScheme: {\n        default: 'focus:ring-blue-500/20',\n        brand: 'focus:ring-dash-brand/20',\n        error: 'focus:ring-red-500/20',\n        success: 'focus:ring-green-500/20',\n        'light-gray': 'focus:ring-[#6B7280]/20'\n      },\n      size: {\n        sm: 'dash-block-sm font-light',\n        md: 'dash-block-md font-light',\n        xl: 'dash-block-xl font-light'\n      },\n      variant: {\n        outlined: 'outline outline-1 outline-offset-[-1px]',\n        filled: 'border-none'\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outlined variant colors\n      {\n        variant: 'outlined',\n        colorScheme: 'default',\n        class: 'outline-[rgba(17,17,17,0.32)] focus:outline-[rgba(17,17,17,0.6)]'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'brand',\n        class: 'outline-dash-brand/30 focus:outline-dash-brand'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'error',\n        class: 'outline-red-500 focus:outline-red-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'success',\n        class: 'outline-green-500 focus:outline-green-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'light-gray',\n        class: 'outline-[#6B7280]/50 focus:outline-[#6B7280]'\n      },\n      // Outlined variant with focus ring\n      {\n        variant: 'outlined',\n        class: 'focus:ring-2'\n      },\n      // Outlined variant background\n      {\n        variant: 'outlined',\n        theme: 'light',\n        class: 'bg-white'\n      },\n      {\n        variant: 'outlined',\n        theme: 'dark',\n        class: 'bg-gray-800'\n      },\n      // Filled variant colors\n      {\n        variant: 'filled',\n        colorScheme: 'default',\n        class: 'bg-[rgba(76,126,255,0.15)] focus:bg-[rgba(76,126,255,0.2)]'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'brand',\n        class: 'bg-dash-brand/15 focus:bg-dash-brand/20'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'error',\n        class: 'bg-red-500/15 focus:bg-red-500/20'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'success',\n        class: 'bg-green-500/15 focus:bg-green-500/20'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'light-gray',\n        class: 'bg-[#0C1C33]/5 focus:bg-[#0C1C33]/10'\n      },\n      // Filled variant with focus ring\n      {\n        variant: 'filled',\n        class: 'focus:ring-2'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'xl',\n      variant: 'outlined',\n      disabled: false\n    }\n  }\n)\n\ntype InputVariants = VariantProps<typeof input>\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>, Omit<InputVariants, 'theme' | 'disabled'> {\n  className?: string\n  error?: boolean\n  success?: boolean\n  prefix?: string | React.ReactNode\n  prefixClassName?: string\n  /** Color scheme override for light theme */\n  colorSchemeLight?: 'default' | 'brand' | 'error' | 'success' | 'light-gray'\n  /** Color scheme override for dark theme */\n  colorSchemeDark?: 'default' | 'brand' | 'error' | 'success' | 'light-gray'\n  /**\n   * Controls visibility toggle for password inputs. When false, the eye icon is hidden and no extra right padding is applied.\n   * Defaults to true.\n   */\n  showPasswordToggle?: boolean\n}\n\n/**\n * A versatile input component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * For password inputs, includes a toggleable eye icon.\n * Supports prefix text or elements before input content.\n *\n * @example\n * <Input\n *   type='password'\n *   placeholder='Enter password'\n *   colorScheme='brand'\n *   size='xl'\n *   prefix=\"https://\"\n * />\n */\nexport const Input: React.FC<InputProps> = ({\n  className = '',\n  colorScheme,\n  colorSchemeLight,\n  colorSchemeDark,\n  size,\n  variant,\n  error = false,\n  success = false,\n  disabled = false,\n  type,\n  prefix,\n  prefixClassName = '',\n  showPasswordToggle = true,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const [showPassword, setShowPassword] = useState(false)\n  const [prefixWidth, setPrefixWidth] = useState(0)\n  const prefixRef = useRef<HTMLDivElement>(null)\n\n  const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n\n  // Determine color scheme based on state\n  let finalColorScheme: typeof effectiveColorScheme = effectiveColorScheme\n  if (error) finalColorScheme = 'error'\n  else if (success) finalColorScheme = 'success'\n\n  const classes = input({\n    theme,\n    colorScheme: finalColorScheme,\n    size,\n    variant,\n    disabled\n  }) + ' ' + className\n\n  const isPassword = type === 'password'\n  const inputType = isPassword && showPassword ? 'text' : type\n  const hasPrefix = Boolean(prefix)\n\n  const togglePasswordVisibility = (): void => {\n    setShowPassword(!showPassword)\n  }\n\n  // Measure actual prefix width\n  useEffect(() => {\n    if (prefixRef.current) {\n      const width = prefixRef.current.offsetWidth\n      // Convert px to rem (assuming 16px base) and add base padding (1rem) + extra space (0.5rem)\n      setPrefixWidth(width / 16 + 1.5)\n    }\n  }, [prefix])\n\n  // Render with prefix\n  if (hasPrefix) {\n    return (\n      <div className='relative'>\n        <div \n          ref={prefixRef}\n          className={`absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[0.875rem] opacity-60 pointer-events-none select-none ${prefixClassName}`}\n        >\n          {prefix}\n        </div>\n        <input\n          className={`${classes}${isPassword && showPasswordToggle ? ' pr-12' : ''}`}\n          style={{ paddingLeft: prefixWidth ? `${prefixWidth}rem` : '1rem' }}\n          disabled={disabled}\n          type={inputType}\n          {...props}\n        />\n        {isPassword && showPasswordToggle && (\n          <button\n            type='button'\n            className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n            onClick={togglePasswordVisibility}\n            tabIndex={-1}\n          >\n            {showPassword\n              ? <EyeClosedIcon size={16} color='#0C1C33' />\n              : <EyeOpenIcon size={16} color='#0C1C33' />}\n          </button>\n        )}\n      </div>\n    )\n  }\n\n  // Render password input without prefix\n  if (isPassword) {\n    return (\n      <div className='relative'>\n        <input\n          className={classes + (showPasswordToggle ? ' pr-12' : '')}\n          disabled={disabled}\n          type={inputType}\n          {...props}\n        />\n        {showPasswordToggle && (\n          <button\n            type='button'\n            className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n            onClick={togglePasswordVisibility}\n            tabIndex={-1}\n          >\n            {showPassword\n              ? <EyeClosedIcon size={16} color='#0C1C33' />\n              : <EyeOpenIcon size={16} color='#0C1C33' />}\n          </button>\n        )}\n      </div>\n    )\n  }\n\n  // Regular input without prefix\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      type={inputType}\n      {...props}\n    />\n  )\n}\n\nexport default Input "],"names":["input","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","filled","disabled","false","true","compoundVariants","class","defaultVariants","Input","_a","className","colorSchemeLight","colorSchemeDark","type","prefix","prefixClassName","showPasswordToggle","props","__rest","useTheme","showPassword","setShowPassword","useState","prefixWidth","setPrefixWidth","prefixRef","useRef","effectiveColorScheme","_b","useColorScheme","finalColorScheme","classes","isPassword","inputType","hasPrefix","Boolean","togglePasswordVisibility","useEffect","current","width","offsetWidth","_jsxs","children","_jsx","ref","Object","assign","style","paddingLeft","onClick","tabIndex","EyeClosedIcon","color","EyeOpenIcon"],"mappings":"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"}

package/dist/react/components/list/index.cjs.js

@@ -0,0 +1,49 @@
+"use client";
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index$1 = require('../text/index.cjs.js');
+var index = require('../icons/index.cjs.js');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+
+const iconComponents = {
+  check: index.CheckIcon
+};
+const List = ({
+  items,
+  iconType = 'check',
+  className = '',
+  size = 'sm'
+}) => {
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const IconComponent = iconComponents[iconType];
+  return jsxRuntime.jsx("ul", {
+    className: `space-y-5 w-full ${className}`,
+    children: items.map((item, index) => jsxRuntime.jsxs("li", {
+      className: 'flex items-start gap-4',
+      children: [jsxRuntime.jsx(IconComponent, {
+        size: 20,
+        className: 'flex-shrink-0',
+        color: theme === 'dark' ? '#4C7EFF' : '#4C7EFF'
+      }), jsxRuntime.jsxs("div", {
+        className: 'flex flex-col gap-1',
+        children: [jsxRuntime.jsx(index$1.Text, {
+          size: size,
+          weight: "medium",
+          children: item.text
+        }), item.description && jsxRuntime.jsx(index$1.Text, {
+          size: 'xs',
+          dim: true,
+          className: 'opacity-75',
+          children: item.description
+        })]
+      })]
+    }, index))
+  });
+};
+
+exports.List = List;
+//# sourceMappingURL=index.cjs.js.map

package/dist/react/components/list/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/list/index.tsx"],"sourcesContent":["import React from 'react'\nimport { Text } from '../text'\nimport { CheckIcon } from '../icons'\nimport { useTheme } from '../../contexts/ThemeContext'\n\ninterface ListItem {\n  text: string\n  description?: string\n}\n\ninterface ListProps {\n  items: ListItem[]\n  iconType?: 'check'\n  className?: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst iconComponents = {\n  check: CheckIcon\n}\n\nexport const List: React.FC<ListProps> = ({\n  items,\n  iconType = 'check',\n  className = '',\n  size = 'sm'\n}) => {\n  const { theme } = useTheme()\n  const IconComponent = iconComponents[iconType]\n\n  return (\n    <ul className={`space-y-5 w-full ${className}`}>\n      {items.map((item, index) => (\n        <li key={index} className='flex items-start gap-4'>\n          <IconComponent \n            size={20} \n            className='flex-shrink-0' \n            color={theme === 'dark' ? '#4C7EFF' : '#4C7EFF'}\n          />\n          <div className='flex flex-col gap-1'>\n            <Text size={size} weight=\"medium\">\n              {item.text}\n            </Text>\n            {item.description && (\n              <Text size='xs' dim className='opacity-75'>\n                {item.description}\n              </Text>\n            )}\n          </div>\n        </li>\n      ))}\n    </ul>\n  )\n}\n\nexport type { ListProps, ListItem } "],"names":["iconComponents","check","CheckIcon","List","items","iconType","className","size","theme","useTheme","IconComponent","_jsx","children","map","item","index","_jsxs","color","Text","weight","text","description","dim"],"mappings":";;;;;;;;;AAiBA,MAAMA,cAAc,GAAG;AACrBC,EAAAA,KAAK,EAAEC;CACR;AAEM,MAAMC,IAAI,GAAwBA,CAAC;EACxCC,KAAK;AACLC,EAAAA,QAAQ,GAAG,OAAO;AAClBC,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA,IAAI,GAAG;AACR,CAAA,KAAI;EACH,MAAM;AAAEC,IAAAA;GAAO,GAAGC,qBAAQ,EAAE;AAC5B,EAAA,MAAMC,aAAa,GAAGV,cAAc,CAACK,QAAQ,CAAC;EAE9C,OACEM;IAAIL,SAAS,EAAE,CAAoBA,iBAAAA,EAAAA,SAAS,CAAE,CAAA;AAC3CM,IAAAA,QAAA,EAAAR,KAAK,CAACS,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KACrBC,eAAgB,CAAA,IAAA,EAAA;AAAAV,MAAAA,SAAS,EAAC,wBAAwB;iBAChDK,cAAC,CAAAD,aAAa;AACZH,QAAAA,IAAI,EAAE,EAAE;AACRD,QAAAA,SAAS,EAAC,eAAe;AACzBW,QAAAA,KAAK,EAAET,KAAK,KAAK,MAAM,GAAG,SAAS,GAAG;AACtC,OAAA,CAAA,EACFQ;AAAKV,QAAAA,SAAS,EAAC,qBAAqB;AAClCM,QAAAA,QAAA,EAAA,CAAAD,cAAA,CAACO,YAAI,EAAC;AAAAX,UAAAA,IAAI,EAAEA,IAAI;AAAEY,UAAAA,MAAM,EAAC,QAAQ;UAAAP,QAAA,EAC9BE,IAAI,CAACM;SAAI,CACL,EACNN,IAAI,CAACO,WAAW,IACfV,cAAA,CAACO,YAAI,EAAC;AAAAX,UAAAA,IAAI,EAAC,IAAI;AAACe,UAAAA,GAAG,EAAC,IAAA;AAAAhB,UAAAA,SAAS,EAAC,YAAY;UACvCM,QAAA,EAAAE,IAAI,CAACO;AAAW,SAAA,CAEpB;AAAA,OAAA,CACG;KAfC,EAAAN,KAAK,CAiBf;AACE,GAAA,CAAA;AAET;;;;"}

package/dist/react/components/list/index.esm.js

@@ -0,0 +1,47 @@
+"use client";
+
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Text } from '../text/index.esm.js';
+import { CheckIcon } from '../icons/index.esm.js';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+
+const iconComponents = {
+  check: CheckIcon
+};
+const List = ({
+  items,
+  iconType = 'check',
+  className = '',
+  size = 'sm'
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const IconComponent = iconComponents[iconType];
+  return jsx("ul", {
+    className: `space-y-5 w-full ${className}`,
+    children: items.map((item, index) => jsxs("li", {
+      className: 'flex items-start gap-4',
+      children: [jsx(IconComponent, {
+        size: 20,
+        className: 'flex-shrink-0',
+        color: theme === 'dark' ? '#4C7EFF' : '#4C7EFF'
+      }), jsxs("div", {
+        className: 'flex flex-col gap-1',
+        children: [jsx(Text, {
+          size: size,
+          weight: "medium",
+          children: item.text
+        }), item.description && jsx(Text, {
+          size: 'xs',
+          dim: true,
+          className: 'opacity-75',
+          children: item.description
+        })]
+      })]
+    }, index))
+  });
+};
+
+export { List };
+//# sourceMappingURL=index.esm.js.map