erp-pro-ui 0.1.2 → 0.1.3

package/dist/chunks/otp-input-DSW9Ca_D.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input-DSW9Ca_D.cjs","names":[],"sources":["../../src/components/forms/otp-input/OTPInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type KeyboardEvent,\n  type ClipboardEvent,\n  type ChangeEvent,\n} from \"react\";\n\nexport type OTPInputSize = \"sm\" | \"md\" | \"lg\";\nexport type OTPInputVariant = \"outlined\" | \"filled\" | \"underlined\";\n\nexport interface OTPInputProps {\n  /** Number of OTP digits */\n  length?: number;\n  /** Callback when OTP value changes */\n  onChange?: (value: string) => void;\n  /** Callback when all digits are filled */\n  onComplete?: (value: string) => void;\n  /** The current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Size of the input boxes */\n  size?: OTPInputSize;\n  /** Visual variant */\n  variant?: OTPInputVariant;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Whether there's an error */\n  error?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Placeholder character */\n  placeholder?: string;\n  /** Whether to mask the input (like password) */\n  mask?: boolean;\n  /** Whether to auto-focus the first input */\n  autoFocus?: boolean;\n  /** Input type - number only or alphanumeric */\n  type?: \"number\" | \"text\";\n  /** Custom className for the container */\n  className?: string;\n  /** Custom className for each input box */\n  inputClassName?: string;\n  /** Separator to show between groups of digits */\n  separator?: React.ReactNode;\n  /** Position(s) to show separator (e.g., [3] means after 3rd digit) */\n  separatorPositions?: number[];\n  /** Accessible label */\n  \"aria-label\"?: string;\n}\n\nconst sizeStyles: Record<OTPInputSize, string> = {\n  sm: \"w-9 h-10 text-base\",\n  md: \"w-12 h-14 text-xl\",\n  lg: \"w-14 h-16 text-2xl\",\n};\n\nconst variantStyles: Record<\n  OTPInputVariant,\n  { base: string; focus: string; error: string }\n> = {\n  outlined: {\n    base: \"border border-input bg-background-secondary rounded-lg text-foreground\",\n    focus: \"focus:border-accent focus:ring-2 focus:ring-accent\",\n    error: \"border-destructive\",\n  },\n  filled: {\n    base: \"border border-transparent bg-accent-subtle rounded-lg text-foreground\",\n    focus:\n      \"focus:border-accent focus:bg-background-secondary focus:ring-2 focus:ring-accent\",\n    error: \"bg-danger-subtle border-danger-border\",\n  },\n  underlined: {\n    base: \"border-b-2 border-border-strong bg-transparent rounded-none text-foreground\",\n    focus: \"focus:border-accent\",\n    error: \"border-destructive\",\n  },\n};\n\nconst OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(\n  (\n    {\n      length = 6,\n      onChange,\n      onComplete,\n      value: controlledValue,\n      defaultValue = \"\",\n      size = \"md\",\n      variant = \"outlined\",\n      disabled = false,\n      error = false,\n      errorMessage,\n      placeholder = \"\",\n      mask = false,\n      autoFocus = false,\n      type = \"number\",\n      className = \"\",\n      inputClassName = \"\",\n      separator = <span className=\"text-neutral-400 text-2xl mx-2\">—</span>,\n      separatorPositions = [],\n      \"aria-label\": ariaLabel = \"One-time password\",\n    },\n    ref,\n  ) => {\n    const [values, setValues] = useState<string[]>(() => {\n      const initial = controlledValue ?? defaultValue;\n      return initial\n        .split(\"\")\n        .slice(0, length)\n        .concat(Array(length).fill(\"\"))\n        .slice(0, length);\n    });\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n    // Sync with controlled value\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        const newValues = controlledValue\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n        setValues(newValues);\n      }\n    }, [controlledValue, length]);\n\n    // Auto-focus first input\n    useEffect(() => {\n      if (autoFocus && inputRefs.current[0]) {\n        inputRefs.current[0].focus();\n      }\n    }, [autoFocus]);\n\n    const focusInput = useCallback(\n      (index: number) => {\n        if (index >= 0 && index < length && inputRefs.current[index]) {\n          inputRefs.current[index]?.focus();\n          inputRefs.current[index]?.select();\n        }\n      },\n      [length],\n    );\n\n    const handleChange = useCallback(\n      (index: number, e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const char = inputValue.slice(-1);\n\n        // Validate input based on type\n        if (type === \"number\" && char && !/^\\d$/.test(char)) {\n          return;\n        }\n\n        const newValues = [...values];\n        newValues[index] = char;\n        setValues(newValues);\n\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Move to next input if value entered\n        if (char && index < length - 1) {\n          focusInput(index + 1);\n        }\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && newValues.length === length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [values, onChange, onComplete, length, type, focusInput],\n    );\n\n    const handleKeyDown = useCallback(\n      (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n        switch (e.key) {\n          case \"Backspace\":\n            e.preventDefault();\n            const newValues = [...values];\n            if (values[index]) {\n              // Clear current value\n              newValues[index] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n            } else if (index > 0) {\n              // Move to previous and clear\n              newValues[index - 1] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n              focusInput(index - 1);\n            }\n            break;\n          case \"ArrowLeft\":\n            e.preventDefault();\n            focusInput(index - 1);\n            break;\n          case \"ArrowRight\":\n            e.preventDefault();\n            focusInput(index + 1);\n            break;\n          case \"Delete\":\n            e.preventDefault();\n            const deleteValues = [...values];\n            deleteValues[index] = \"\";\n            setValues(deleteValues);\n            onChange?.(deleteValues.join(\"\"));\n            break;\n        }\n      },\n      [values, onChange, focusInput],\n    );\n\n    const handlePaste = useCallback(\n      (e: ClipboardEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        const pastedData = e.clipboardData.getData(\"text\").slice(0, length);\n\n        // Validate pasted content\n        if (type === \"number\" && !/^\\d*$/.test(pastedData)) {\n          return;\n        }\n\n        const newValues = pastedData\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n\n        setValues(newValues);\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Focus last filled input or last input\n        const lastFilledIndex = newValues.findLastIndex((v) => v !== \"\");\n        focusInput(Math.min(lastFilledIndex + 1, length - 1));\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && pastedData.length >= length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [length, type, onChange, onComplete, focusInput],\n    );\n\n    const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      e.target.select();\n    }, []);\n\n    const renderInputs = () => {\n      const inputs: React.ReactNode[] = [];\n\n      for (let i = 0; i < length; i++) {\n        // Add separator if needed\n        if (separatorPositions.includes(i) && i > 0) {\n          inputs.push(\n            <div key={`separator-${i}`} className=\"flex items-center\">\n              {separator}\n            </div>,\n          );\n        }\n\n        inputs.push(\n          <input\n            key={i}\n            ref={(el) => {\n              inputRefs.current[i] = el;\n              // React 19: Return cleanup function\n              return () => {\n                inputRefs.current[i] = null;\n              };\n            }}\n            type={mask ? \"password\" : \"text\"}\n            inputMode={type === \"number\" ? \"numeric\" : \"text\"}\n            pattern={type === \"number\" ? \"\\\\d*\" : undefined}\n            maxLength={1}\n            value={values[i] || \"\"}\n            placeholder={placeholder}\n            disabled={disabled}\n            onChange={(e) => handleChange(i, e)}\n            onKeyDown={(e) => handleKeyDown(i, e)}\n            onPaste={handlePaste}\n            onFocus={handleFocus}\n            aria-label={`${ariaLabel} digit ${i + 1}`}\n            className={`\n              text-center font-semibold outline-none transition-all\n              placeholder:text-muted-foreground\n              ${sizeStyles[size]}\n              ${variantStyles[variant].base}\n              ${!error ? variantStyles[variant].focus : \"\"}\n              ${error ? variantStyles[variant].error : \"\"}\n              ${disabled ? \"opacity-50 cursor-not-allowed bg-muted\" : \"\"}\n              ${inputClassName}\n            `}\n          />,\n        );\n      }\n\n      return inputs;\n    };\n\n    return (\n      <div ref={ref} className={`flex flex-col gap-2 ${className}`}>\n        <div\n          className=\"flex items-center gap-2\"\n          role=\"group\"\n          aria-label={ariaLabel}\n        >\n          {renderInputs()}\n        </div>\n        {error && errorMessage && (\n          <span className=\"text-sm text-destructive\">{errorMessage}</span>\n        )}\n      </div>\n    );\n  },\n);\n\nOTPInput.displayName = \"OTPInput\";\n\nexport default OTPInput;\nexport { OTPInput };\n"],"mappings":"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"}

package/dist/chunks/{otp-input-Bg4nQG6x.mjs → otp-input-DeAi4nJ_.mjs}

@@ -8,7 +8,7 @@ var sizeStyles = {
 };
 var variantStyles = {
 	outlined: {
-		base: "border border-input bg-background-secondary rounded-lg shadow-input text-foreground",
+		base: "border border-input bg-background-secondary rounded-lg text-foreground",
 		focus: "focus:border-accent focus:ring-2 focus:ring-accent",
 		error: "border-destructive"
 	},
@@ -177,4 +177,4 @@ OTPInput.displayName = "OTPInput";
 //#endregion
 export { OTPInput as t };
 
-//# sourceMappingURL=otp-input-Bg4nQG6x.mjs.map
+//# sourceMappingURL=otp-input-DeAi4nJ_.mjs.map

package/dist/chunks/otp-input-DeAi4nJ_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input-DeAi4nJ_.mjs","names":[],"sources":["../../src/components/forms/otp-input/OTPInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type KeyboardEvent,\n  type ClipboardEvent,\n  type ChangeEvent,\n} from \"react\";\n\nexport type OTPInputSize = \"sm\" | \"md\" | \"lg\";\nexport type OTPInputVariant = \"outlined\" | \"filled\" | \"underlined\";\n\nexport interface OTPInputProps {\n  /** Number of OTP digits */\n  length?: number;\n  /** Callback when OTP value changes */\n  onChange?: (value: string) => void;\n  /** Callback when all digits are filled */\n  onComplete?: (value: string) => void;\n  /** The current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Size of the input boxes */\n  size?: OTPInputSize;\n  /** Visual variant */\n  variant?: OTPInputVariant;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Whether there's an error */\n  error?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Placeholder character */\n  placeholder?: string;\n  /** Whether to mask the input (like password) */\n  mask?: boolean;\n  /** Whether to auto-focus the first input */\n  autoFocus?: boolean;\n  /** Input type - number only or alphanumeric */\n  type?: \"number\" | \"text\";\n  /** Custom className for the container */\n  className?: string;\n  /** Custom className for each input box */\n  inputClassName?: string;\n  /** Separator to show between groups of digits */\n  separator?: React.ReactNode;\n  /** Position(s) to show separator (e.g., [3] means after 3rd digit) */\n  separatorPositions?: number[];\n  /** Accessible label */\n  \"aria-label\"?: string;\n}\n\nconst sizeStyles: Record<OTPInputSize, string> = {\n  sm: \"w-9 h-10 text-base\",\n  md: \"w-12 h-14 text-xl\",\n  lg: \"w-14 h-16 text-2xl\",\n};\n\nconst variantStyles: Record<\n  OTPInputVariant,\n  { base: string; focus: string; error: string }\n> = {\n  outlined: {\n    base: \"border border-input bg-background-secondary rounded-lg text-foreground\",\n    focus: \"focus:border-accent focus:ring-2 focus:ring-accent\",\n    error: \"border-destructive\",\n  },\n  filled: {\n    base: \"border border-transparent bg-accent-subtle rounded-lg text-foreground\",\n    focus:\n      \"focus:border-accent focus:bg-background-secondary focus:ring-2 focus:ring-accent\",\n    error: \"bg-danger-subtle border-danger-border\",\n  },\n  underlined: {\n    base: \"border-b-2 border-border-strong bg-transparent rounded-none text-foreground\",\n    focus: \"focus:border-accent\",\n    error: \"border-destructive\",\n  },\n};\n\nconst OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(\n  (\n    {\n      length = 6,\n      onChange,\n      onComplete,\n      value: controlledValue,\n      defaultValue = \"\",\n      size = \"md\",\n      variant = \"outlined\",\n      disabled = false,\n      error = false,\n      errorMessage,\n      placeholder = \"\",\n      mask = false,\n      autoFocus = false,\n      type = \"number\",\n      className = \"\",\n      inputClassName = \"\",\n      separator = <span className=\"text-neutral-400 text-2xl mx-2\">—</span>,\n      separatorPositions = [],\n      \"aria-label\": ariaLabel = \"One-time password\",\n    },\n    ref,\n  ) => {\n    const [values, setValues] = useState<string[]>(() => {\n      const initial = controlledValue ?? defaultValue;\n      return initial\n        .split(\"\")\n        .slice(0, length)\n        .concat(Array(length).fill(\"\"))\n        .slice(0, length);\n    });\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n    // Sync with controlled value\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        const newValues = controlledValue\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n        setValues(newValues);\n      }\n    }, [controlledValue, length]);\n\n    // Auto-focus first input\n    useEffect(() => {\n      if (autoFocus && inputRefs.current[0]) {\n        inputRefs.current[0].focus();\n      }\n    }, [autoFocus]);\n\n    const focusInput = useCallback(\n      (index: number) => {\n        if (index >= 0 && index < length && inputRefs.current[index]) {\n          inputRefs.current[index]?.focus();\n          inputRefs.current[index]?.select();\n        }\n      },\n      [length],\n    );\n\n    const handleChange = useCallback(\n      (index: number, e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const char = inputValue.slice(-1);\n\n        // Validate input based on type\n        if (type === \"number\" && char && !/^\\d$/.test(char)) {\n          return;\n        }\n\n        const newValues = [...values];\n        newValues[index] = char;\n        setValues(newValues);\n\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Move to next input if value entered\n        if (char && index < length - 1) {\n          focusInput(index + 1);\n        }\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && newValues.length === length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [values, onChange, onComplete, length, type, focusInput],\n    );\n\n    const handleKeyDown = useCallback(\n      (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n        switch (e.key) {\n          case \"Backspace\":\n            e.preventDefault();\n            const newValues = [...values];\n            if (values[index]) {\n              // Clear current value\n              newValues[index] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n            } else if (index > 0) {\n              // Move to previous and clear\n              newValues[index - 1] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n              focusInput(index - 1);\n            }\n            break;\n          case \"ArrowLeft\":\n            e.preventDefault();\n            focusInput(index - 1);\n            break;\n          case \"ArrowRight\":\n            e.preventDefault();\n            focusInput(index + 1);\n            break;\n          case \"Delete\":\n            e.preventDefault();\n            const deleteValues = [...values];\n            deleteValues[index] = \"\";\n            setValues(deleteValues);\n            onChange?.(deleteValues.join(\"\"));\n            break;\n        }\n      },\n      [values, onChange, focusInput],\n    );\n\n    const handlePaste = useCallback(\n      (e: ClipboardEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        const pastedData = e.clipboardData.getData(\"text\").slice(0, length);\n\n        // Validate pasted content\n        if (type === \"number\" && !/^\\d*$/.test(pastedData)) {\n          return;\n        }\n\n        const newValues = pastedData\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n\n        setValues(newValues);\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Focus last filled input or last input\n        const lastFilledIndex = newValues.findLastIndex((v) => v !== \"\");\n        focusInput(Math.min(lastFilledIndex + 1, length - 1));\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && pastedData.length >= length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [length, type, onChange, onComplete, focusInput],\n    );\n\n    const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      e.target.select();\n    }, []);\n\n    const renderInputs = () => {\n      const inputs: React.ReactNode[] = [];\n\n      for (let i = 0; i < length; i++) {\n        // Add separator if needed\n        if (separatorPositions.includes(i) && i > 0) {\n          inputs.push(\n            <div key={`separator-${i}`} className=\"flex items-center\">\n              {separator}\n            </div>,\n          );\n        }\n\n        inputs.push(\n          <input\n            key={i}\n            ref={(el) => {\n              inputRefs.current[i] = el;\n              // React 19: Return cleanup function\n              return () => {\n                inputRefs.current[i] = null;\n              };\n            }}\n            type={mask ? \"password\" : \"text\"}\n            inputMode={type === \"number\" ? \"numeric\" : \"text\"}\n            pattern={type === \"number\" ? \"\\\\d*\" : undefined}\n            maxLength={1}\n            value={values[i] || \"\"}\n            placeholder={placeholder}\n            disabled={disabled}\n            onChange={(e) => handleChange(i, e)}\n            onKeyDown={(e) => handleKeyDown(i, e)}\n            onPaste={handlePaste}\n            onFocus={handleFocus}\n            aria-label={`${ariaLabel} digit ${i + 1}`}\n            className={`\n              text-center font-semibold outline-none transition-all\n              placeholder:text-muted-foreground\n              ${sizeStyles[size]}\n              ${variantStyles[variant].base}\n              ${!error ? variantStyles[variant].focus : \"\"}\n              ${error ? variantStyles[variant].error : \"\"}\n              ${disabled ? \"opacity-50 cursor-not-allowed bg-muted\" : \"\"}\n              ${inputClassName}\n            `}\n          />,\n        );\n      }\n\n      return inputs;\n    };\n\n    return (\n      <div ref={ref} className={`flex flex-col gap-2 ${className}`}>\n        <div\n          className=\"flex items-center gap-2\"\n          role=\"group\"\n          aria-label={ariaLabel}\n        >\n          {renderInputs()}\n        </div>\n        {error && errorMessage && (\n          <span className=\"text-sm text-destructive\">{errorMessage}</span>\n        )}\n      </div>\n    );\n  },\n);\n\nOTPInput.displayName = \"OTPInput\";\n\nexport default OTPInput;\nexport { OTPInput };\n"],"mappings":";;;AAuDA,IAAM,aAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,gBAGF;CACF,UAAU;EACR,MAAM;EACN,OAAO;EACP,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OACE;EACF,OAAO;EACR;CACD,YAAY;EACV,MAAM;EACN,OAAO;EACP,OAAO;EACR;CACF;AAED,IAAM,WAAW,YAEb,EACE,SAAS,GACT,UACA,YACA,OAAO,iBACP,eAAe,IACf,OAAO,MACP,UAAU,YACV,WAAW,OACX,QAAQ,OACR,cACA,cAAc,IACd,OAAO,OACP,YAAY,OACZ,OAAO,UACP,YAAY,IACZ,iBAAiB,IACjB,YAAY,oBAAC,QAAD;CAAM,WAAU;WAAiC;CAAQ,CAAA,EACrE,qBAAqB,EAAE,EACvB,cAAc,YAAY,uBAE5B,QACG;CACH,MAAM,CAAC,QAAQ,aAAa,eAAyB;AAEnD,UADgB,mBAAmB,cAEhC,MAAM,GAAG,CACT,MAAM,GAAG,OAAO,CAChB,OAAO,MAAM,OAAO,CAAC,KAAK,GAAG,CAAC,CAC9B,MAAM,GAAG,OAAO;GACnB;CAEF,MAAM,YAAY,OAAoC,EAAE,CAAC;AAGzD,iBAAgB;AACd,MAAI,oBAAoB,KAAA,EAMtB,WALkB,gBACf,MAAM,GAAG,CACT,MAAM,GAAG,OAAO,CAChB,OAAO,MAAM,OAAO,CAAC,KAAK,GAAG,CAAC,CAC9B,MAAM,GAAG,OAAO,CACC;IAErB,CAAC,iBAAiB,OAAO,CAAC;AAG7B,iBAAgB;AACd,MAAI,aAAa,UAAU,QAAQ,GACjC,WAAU,QAAQ,GAAG,OAAO;IAE7B,CAAC,UAAU,CAAC;CAEf,MAAM,aAAa,aAChB,UAAkB;AACjB,MAAI,SAAS,KAAK,QAAQ,UAAU,UAAU,QAAQ,QAAQ;AAC5D,aAAU,QAAQ,QAAQ,OAAO;AACjC,aAAU,QAAQ,QAAQ,QAAQ;;IAGtC,CAAC,OAAO,CACT;CAED,MAAM,eAAe,aAClB,OAAe,MAAqC;EAEnD,MAAM,OADa,EAAE,OAAO,MACJ,MAAM,GAAG;AAGjC,MAAI,SAAS,YAAY,QAAQ,CAAC,OAAO,KAAK,KAAK,CACjD;EAGF,MAAM,YAAY,CAAC,GAAG,OAAO;AAC7B,YAAU,SAAS;AACnB,YAAU,UAAU;EAEpB,MAAM,WAAW,UAAU,KAAK,GAAG;AACnC,aAAW,SAAS;AAGpB,MAAI,QAAQ,QAAQ,SAAS,EAC3B,YAAW,QAAQ,EAAE;AAIvB,MAAI,UAAU,OAAO,MAAM,MAAM,GAAG,IAAI,UAAU,WAAW,OAC3D,cAAa,SAAS;IAG1B;EAAC;EAAQ;EAAU;EAAY;EAAQ;EAAM;EAAW,CACzD;CAED,MAAM,gBAAgB,aACnB,OAAe,MAAuC;AACrD,UAAQ,EAAE,KAAV;GACE,KAAK;AACH,MAAE,gBAAgB;IAClB,MAAM,YAAY,CAAC,GAAG,OAAO;AAC7B,QAAI,OAAO,QAAQ;AAEjB,eAAU,SAAS;AACnB,eAAU,UAAU;AACpB,gBAAW,UAAU,KAAK,GAAG,CAAC;eACrB,QAAQ,GAAG;AAEpB,eAAU,QAAQ,KAAK;AACvB,eAAU,UAAU;AACpB,gBAAW,UAAU,KAAK,GAAG,CAAC;AAC9B,gBAAW,QAAQ,EAAE;;AAEvB;GACF,KAAK;AACH,MAAE,gBAAgB;AAClB,eAAW,QAAQ,EAAE;AACrB;GACF,KAAK;AACH,MAAE,gBAAgB;AAClB,eAAW,QAAQ,EAAE;AACrB;GACF,KAAK;AACH,MAAE,gBAAgB;IAClB,MAAM,eAAe,CAAC,GAAG,OAAO;AAChC,iBAAa,SAAS;AACtB,cAAU,aAAa;AACvB,eAAW,aAAa,KAAK,GAAG,CAAC;AACjC;;IAGN;EAAC;EAAQ;EAAU;EAAW,CAC/B;CAED,MAAM,cAAc,aACjB,MAAwC;AACvC,IAAE,gBAAgB;EAClB,MAAM,aAAa,EAAE,cAAc,QAAQ,OAAO,CAAC,MAAM,GAAG,OAAO;AAGnE,MAAI,SAAS,YAAY,CAAC,QAAQ,KAAK,WAAW,CAChD;EAGF,MAAM,YAAY,WACf,MAAM,GAAG,CACT,MAAM,GAAG,OAAO,CAChB,OAAO,MAAM,OAAO,CAAC,KAAK,GAAG,CAAC,CAC9B,MAAM,GAAG,OAAO;AAEnB,YAAU,UAAU;EACpB,MAAM,WAAW,UAAU,KAAK,GAAG;AACnC,aAAW,SAAS;EAGpB,MAAM,kBAAkB,UAAU,eAAe,MAAM,MAAM,GAAG;AAChE,aAAW,KAAK,IAAI,kBAAkB,GAAG,SAAS,EAAE,CAAC;AAGrD,MAAI,UAAU,OAAO,MAAM,MAAM,GAAG,IAAI,WAAW,UAAU,OAC3D,cAAa,SAAS;IAG1B;EAAC;EAAQ;EAAM;EAAU;EAAY;EAAW,CACjD;CAED,MAAM,cAAc,aAAa,MAA0C;AACzE,IAAE,OAAO,QAAQ;IAChB,EAAE,CAAC;CAEN,MAAM,qBAAqB;EACzB,MAAM,SAA4B,EAAE;AAEpC,OAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,KAAK;AAE/B,OAAI,mBAAmB,SAAS,EAAE,IAAI,IAAI,EACxC,QAAO,KACL,oBAAC,OAAD;IAA4B,WAAU;cACnC;IACG,EAFI,aAAa,IAEjB,CACP;AAGH,UAAO,KACL,oBAAC,SAAD;IAEE,MAAM,OAAO;AACX,eAAU,QAAQ,KAAK;AAEvB,kBAAa;AACX,gBAAU,QAAQ,KAAK;;;IAG3B,MAAM,OAAO,aAAa;IAC1B,WAAW,SAAS,WAAW,YAAY;IAC3C,SAAS,SAAS,WAAW,SAAS,KAAA;IACtC,WAAW;IACX,OAAO,OAAO,MAAM;IACP;IACH;IACV,WAAW,MAAM,aAAa,GAAG,EAAE;IACnC,YAAY,MAAM,cAAc,GAAG,EAAE;IACrC,SAAS;IACT,SAAS;IACT,cAAY,GAAG,UAAU,SAAS,IAAI;IACtC,WAAW;;;gBAGP,WAAW,MAAM;gBACjB,cAAc,SAAS,KAAK;gBAC5B,CAAC,QAAQ,cAAc,SAAS,QAAQ,GAAG;gBAC3C,QAAQ,cAAc,SAAS,QAAQ,GAAG;gBAC1C,WAAW,2CAA2C,GAAG;gBACzD,eAAe;;IAEnB,EA9BK,EA8BL,CACH;;AAGH,SAAO;;AAGT,QACE,qBAAC,OAAD;EAAU;EAAK,WAAW,uBAAuB;YAAjD,CACE,oBAAC,OAAD;GACE,WAAU;GACV,MAAK;GACL,cAAY;aAEX,cAAc;GACX,CAAA,EACL,SAAS,gBACR,oBAAC,QAAD;GAAM,WAAU;aAA4B;GAAoB,CAAA,CAE9D;;EAGX;AAED,SAAS,cAAc"}

package/dist/chunks/{progress-bar-C9FZDrju.mjs → progress-bar-B9sy7WBT.mjs}

@@ -86,4 +86,4 @@ function ProgressBar({ value, max = 100, label, percentageLabel, showPercentage
 //#endregion
 export { ProgressBar as t };
 
-//# sourceMappingURL=progress-bar-C9FZDrju.mjs.map
+//# sourceMappingURL=progress-bar-B9sy7WBT.mjs.map

package/dist/chunks/{progress-bar-C9FZDrju.mjs.map → progress-bar-B9sy7WBT.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"progress-bar-C9FZDrju.mjs","names":[],"sources":["../../src/components/data-display/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type ProgressBarSize = \"sm\" | \"md\" | \"lg\";\nexport type ProgressBarTone =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nexport interface ProgressBarProps {\n  value: number;\n  max?: number;\n  label?: React.ReactNode;\n  percentageLabel?: React.ReactNode;\n  showPercentage?: boolean;\n  size?: ProgressBarSize;\n  tone?: ProgressBarTone;\n  className?: string;\n  trackClassName?: string;\n  fillClassName?: string;\n  ariaLabel?: string;\n}\n\nconst sizeStyles: Record<\n  ProgressBarSize,\n  {\n    track: string;\n    label: string;\n    percentage: string;\n  }\n> = {\n  sm: {\n    track: \"h-1.5\",\n    label: \"text-xs\",\n    percentage: \"text-xs\",\n  },\n  md: {\n    track: \"h-2.5\",\n    label: \"text-sm\",\n    percentage: \"text-sm\",\n  },\n  lg: {\n    track: \"h-3.5\",\n    label: \"text-base\",\n    percentage: \"text-base\",\n  },\n};\n\nconst toneStyles: Record<\n  ProgressBarTone,\n  {\n    color: string;\n    trackBackground: string;\n  }\n> = {\n  default: {\n    color: \"var(--ds-chart-1)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0%, rgba(30, 41, 59, 0.14) 100%)\",\n  },\n  success: {\n    color: \"var(--ds-chart-3)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(20, 83, 45, 0.12) 0%, rgba(34, 197, 94, 0.18) 100%)\",\n  },\n  warning: {\n    color: \"var(--ds-chart-4)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(120, 53, 15, 0.12) 0%, rgba(245, 158, 11, 0.18) 100%)\",\n  },\n  danger: {\n    color: \"var(--ds-chart-5)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(127, 29, 29, 0.12) 0%, rgba(239, 68, 68, 0.18) 100%)\",\n  },\n  info: {\n    color: \"var(--ds-chart-2)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(30, 64, 175, 0.12) 0%, rgba(59, 130, 246, 0.18) 100%)\",\n  },\n};\n\nfunction clampValue(value: number, max: number): number {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  return Math.min(Math.max(value, 0), max);\n}\n\nexport default function ProgressBar({\n  value,\n  max = 100,\n  label,\n  percentageLabel,\n  showPercentage = true,\n  size = \"md\",\n  tone = \"default\",\n  className = \"\",\n  trackClassName = \"\",\n  fillClassName = \"\",\n  ariaLabel = \"Progress\",\n}: ProgressBarProps) {\n  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n  const clampedValue = clampValue(value, safeMax);\n  const percentage = (clampedValue / safeMax) * 100;\n  const roundedPercentage = Math.round(percentage);\n  const toneStyle = toneStyles[tone];\n  const resolvedPercentageLabel = percentageLabel ?? `${roundedPercentage}%`;\n\n  return (\n    <div className={`w-full space-y-3 ${className}`}>\n      {(label || showPercentage) && (\n        <div className=\"flex items-center justify-between gap-4\">\n          <div\n            className={`font-mono font-semibold tracking-[0.08em] text-foreground ${sizeStyles[size].label}`}\n          >\n            {label}\n          </div>\n          {showPercentage && (\n            <div\n              className={`font-mono font-medium tracking-[0.08em] text-muted-foreground ${sizeStyles[size].percentage}`}\n            >\n              {resolvedPercentageLabel}\n            </div>\n          )}\n        </div>\n      )}\n\n      <div\n        role=\"progressbar\"\n        aria-label={ariaLabel}\n        aria-valuemin={0}\n        aria-valuemax={safeMax}\n        aria-valuenow={Math.round(clampedValue)}\n        aria-valuetext={`${roundedPercentage}%`}\n        className={`relative overflow-hidden rounded-full border border-white/12 bg-background-tertiary/80 shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)] dark:border-white/6 ${sizeStyles[size].track} ${trackClassName}`}\n        style={{ background: toneStyle.trackBackground }}\n      >\n        <div\n          className={`h-full rounded-full transition-[width,filter,box-shadow] duration-500 ease-out ${fillClassName}`}\n          style={{\n            width: `${percentage}%`,\n            background: `linear-gradient(90deg, color-mix(in srgb, ${toneStyle.color} 68%, white 32%) 0%, ${toneStyle.color} 100%)`,\n            boxShadow: `inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px color-mix(in srgb, ${toneStyle.color} 32%, transparent)`,\n            filter: percentage > 0 ? \"saturate(1.05) brightness(1.02)\" : \"none\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAwBA,IAAM,aAOF;CACF,IAAI;EACF,OAAO;EACP,OAAO;EACP,YAAY;EACb;CACD,IAAI;EACF,OAAO;EACP,OAAO;EACP,YAAY;EACb;CACD,IAAI;EACF,OAAO;EACP,OAAO;EACP,YAAY;EACb;CACF;AAED,IAAM,aAMF;CACF,SAAS;EACP,OAAO;EACP,iBACE;EACH;CACD,SAAS;EACP,OAAO;EACP,iBACE;EACH;CACD,SAAS;EACP,OAAO;EACP,iBACE;EACH;CACD,QAAQ;EACN,OAAO;EACP,iBACE;EACH;CACD,MAAM;EACJ,OAAO;EACP,iBACE;EACH;CACF;AAED,SAAS,WAAW,OAAe,KAAqB;AACtD,KAAI,CAAC,OAAO,SAAS,MAAM,CACzB,QAAO;AAGT,QAAO,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,EAAE,IAAI;;AAG1C,SAAwB,YAAY,EAClC,OACA,MAAM,KACN,OACA,iBACA,iBAAiB,MACjB,OAAO,MACP,OAAO,WACP,YAAY,IACZ,iBAAiB,IACjB,gBAAgB,IAChB,YAAY,cACO;CACnB,MAAM,UAAU,OAAO,SAAS,IAAI,IAAI,MAAM,IAAI,MAAM;CACxD,MAAM,eAAe,WAAW,OAAO,QAAQ;CAC/C,MAAM,aAAc,eAAe,UAAW;CAC9C,MAAM,oBAAoB,KAAK,MAAM,WAAW;CAChD,MAAM,YAAY,WAAW;CAC7B,MAAM,0BAA0B,mBAAmB,GAAG,kBAAkB;AAExE,QACE,qBAAC,OAAD;EAAK,WAAW,oBAAoB;YAApC,EACI,SAAS,mBACT,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,OAAD;IACE,WAAW,6DAA6D,WAAW,MAAM;cAExF;IACG,CAAA,EACL,kBACC,oBAAC,OAAD;IACE,WAAW,iEAAiE,WAAW,MAAM;cAE5F;IACG,CAAA,CAEJ;MAGR,oBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,iBAAe;GACf,iBAAe;GACf,iBAAe,KAAK,MAAM,aAAa;GACvC,kBAAgB,GAAG,kBAAkB;GACrC,WAAW,6JAA6J,WAAW,MAAM,MAAM,GAAG;GAClM,OAAO,EAAE,YAAY,UAAU,iBAAiB;aAEhD,oBAAC,OAAD;IACE,WAAW,kFAAkF;IAC7F,OAAO;KACL,OAAO,GAAG,WAAW;KACrB,YAAY,6CAA6C,UAAU,MAAM,uBAAuB,UAAU,MAAM;KAChH,WAAW,oEAAoE,UAAU,MAAM;KAC/F,QAAQ,aAAa,IAAI,oCAAoC;KAC9D;IACD,CAAA;GACE,CAAA,CACF"}
+{"version":3,"file":"progress-bar-B9sy7WBT.mjs","names":[],"sources":["../../src/components/data-display/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type ProgressBarSize = \"sm\" | \"md\" | \"lg\";\nexport type ProgressBarTone =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nexport interface ProgressBarProps {\n  value: number;\n  max?: number;\n  label?: React.ReactNode;\n  percentageLabel?: React.ReactNode;\n  showPercentage?: boolean;\n  size?: ProgressBarSize;\n  tone?: ProgressBarTone;\n  className?: string;\n  trackClassName?: string;\n  fillClassName?: string;\n  ariaLabel?: string;\n}\n\nconst sizeStyles: Record<\n  ProgressBarSize,\n  {\n    track: string;\n    label: string;\n    percentage: string;\n  }\n> = {\n  sm: {\n    track: \"h-1.5\",\n    label: \"text-xs\",\n    percentage: \"text-xs\",\n  },\n  md: {\n    track: \"h-2.5\",\n    label: \"text-sm\",\n    percentage: \"text-sm\",\n  },\n  lg: {\n    track: \"h-3.5\",\n    label: \"text-base\",\n    percentage: \"text-base\",\n  },\n};\n\nconst toneStyles: Record<\n  ProgressBarTone,\n  {\n    color: string;\n    trackBackground: string;\n  }\n> = {\n  default: {\n    color: \"var(--ds-chart-1)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0%, rgba(30, 41, 59, 0.14) 100%)\",\n  },\n  success: {\n    color: \"var(--ds-chart-3)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(20, 83, 45, 0.12) 0%, rgba(34, 197, 94, 0.18) 100%)\",\n  },\n  warning: {\n    color: \"var(--ds-chart-4)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(120, 53, 15, 0.12) 0%, rgba(245, 158, 11, 0.18) 100%)\",\n  },\n  danger: {\n    color: \"var(--ds-chart-5)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(127, 29, 29, 0.12) 0%, rgba(239, 68, 68, 0.18) 100%)\",\n  },\n  info: {\n    color: \"var(--ds-chart-2)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(30, 64, 175, 0.12) 0%, rgba(59, 130, 246, 0.18) 100%)\",\n  },\n};\n\nfunction clampValue(value: number, max: number): number {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  return Math.min(Math.max(value, 0), max);\n}\n\nexport default function ProgressBar({\n  value,\n  max = 100,\n  label,\n  percentageLabel,\n  showPercentage = true,\n  size = \"md\",\n  tone = \"default\",\n  className = \"\",\n  trackClassName = \"\",\n  fillClassName = \"\",\n  ariaLabel = \"Progress\",\n}: ProgressBarProps) {\n  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n  const clampedValue = clampValue(value, safeMax);\n  const percentage = (clampedValue / safeMax) * 100;\n  const roundedPercentage = Math.round(percentage);\n  const toneStyle = toneStyles[tone];\n  const resolvedPercentageLabel = percentageLabel ?? `${roundedPercentage}%`;\n\n  return (\n    <div className={`w-full space-y-3 ${className}`}>\n      {(label || showPercentage) && (\n        <div className=\"flex items-center justify-between gap-4\">\n          <div\n            className={`font-mono font-semibold tracking-[0.08em] text-foreground ${sizeStyles[size].label}`}\n          >\n            {label}\n          </div>\n          {showPercentage && (\n            <div\n              className={`font-mono font-medium tracking-[0.08em] text-muted-foreground ${sizeStyles[size].percentage}`}\n            >\n              {resolvedPercentageLabel}\n            </div>\n          )}\n        </div>\n      )}\n\n      <div\n        role=\"progressbar\"\n        aria-label={ariaLabel}\n        aria-valuemin={0}\n        aria-valuemax={safeMax}\n        aria-valuenow={Math.round(clampedValue)}\n        aria-valuetext={`${roundedPercentage}%`}\n        className={`relative overflow-hidden rounded-full border border-white/12 bg-background-tertiary/80 shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)] dark:border-white/6 ${sizeStyles[size].track} ${trackClassName}`}\n        style={{ background: toneStyle.trackBackground }}\n      >\n        <div\n          className={`h-full rounded-full transition-[width,filter,box-shadow] duration-500 ease-out ${fillClassName}`}\n          style={{\n            width: `${percentage}%`,\n            background: `linear-gradient(90deg, color-mix(in srgb, ${toneStyle.color} 68%, white 32%) 0%, ${toneStyle.color} 100%)`,\n            boxShadow: `inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px color-mix(in srgb, ${toneStyle.color} 32%, transparent)`,\n            filter: percentage > 0 ? \"saturate(1.05) brightness(1.02)\" : \"none\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAwBA,IAAM,aAOF;CACF,IAAI;EACF,OAAO;EACP,OAAO;EACP,YAAY;EACb;CACD,IAAI;EACF,OAAO;EACP,OAAO;EACP,YAAY;EACb;CACD,IAAI;EACF,OAAO;EACP,OAAO;EACP,YAAY;EACb;CACF;AAED,IAAM,aAMF;CACF,SAAS;EACP,OAAO;EACP,iBACE;EACH;CACD,SAAS;EACP,OAAO;EACP,iBACE;EACH;CACD,SAAS;EACP,OAAO;EACP,iBACE;EACH;CACD,QAAQ;EACN,OAAO;EACP,iBACE;EACH;CACD,MAAM;EACJ,OAAO;EACP,iBACE;EACH;CACF;AAED,SAAS,WAAW,OAAe,KAAqB;AACtD,KAAI,CAAC,OAAO,SAAS,MAAM,CACzB,QAAO;AAGT,QAAO,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,EAAE,IAAI;;AAG1C,SAAwB,YAAY,EAClC,OACA,MAAM,KACN,OACA,iBACA,iBAAiB,MACjB,OAAO,MACP,OAAO,WACP,YAAY,IACZ,iBAAiB,IACjB,gBAAgB,IAChB,YAAY,cACO;CACnB,MAAM,UAAU,OAAO,SAAS,IAAI,IAAI,MAAM,IAAI,MAAM;CACxD,MAAM,eAAe,WAAW,OAAO,QAAQ;CAC/C,MAAM,aAAc,eAAe,UAAW;CAC9C,MAAM,oBAAoB,KAAK,MAAM,WAAW;CAChD,MAAM,YAAY,WAAW;CAC7B,MAAM,0BAA0B,mBAAmB,GAAG,kBAAkB;AAExE,QACE,qBAAC,OAAD;EAAK,WAAW,oBAAoB;YAApC,EACI,SAAS,mBACT,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,OAAD;IACE,WAAW,6DAA6D,WAAW,MAAM;cAExF;IACG,CAAA,EACL,kBACC,oBAAC,OAAD;IACE,WAAW,iEAAiE,WAAW,MAAM;cAE5F;IACG,CAAA,CAEJ;MAGR,oBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,iBAAe;GACf,iBAAe;GACf,iBAAe,KAAK,MAAM,aAAa;GACvC,kBAAgB,GAAG,kBAAkB;GACrC,WAAW,6JAA6J,WAAW,MAAM,MAAM,GAAG;GAClM,OAAO,EAAE,YAAY,UAAU,iBAAiB;aAEhD,oBAAC,OAAD;IACE,WAAW,kFAAkF;IAC7F,OAAO;KACL,OAAO,GAAG,WAAW;KACrB,YAAY,6CAA6C,UAAU,MAAM,uBAAuB,UAAU,MAAM;KAChH,WAAW,oEAAoE,UAAU,MAAM;KAC/F,QAAQ,aAAa,IAAI,oCAAoC;KAC9D;IACD,CAAA;GACE,CAAA,CACF"}

package/dist/chunks/{progress-bar-C1OvQ-NI.cjs → progress-bar-BdvQtpm3.cjs}

@@ -93,4 +93,4 @@ Object.defineProperty(exports, "ProgressBar", {
 	}
 });
 
-//# sourceMappingURL=progress-bar-C1OvQ-NI.cjs.map
+//# sourceMappingURL=progress-bar-BdvQtpm3.cjs.map

package/dist/chunks/{progress-bar-C1OvQ-NI.cjs.map → progress-bar-BdvQtpm3.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"progress-bar-C1OvQ-NI.cjs","names":[],"sources":["../../src/components/data-display/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type ProgressBarSize = \"sm\" | \"md\" | \"lg\";\nexport type ProgressBarTone =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nexport interface ProgressBarProps {\n  value: number;\n  max?: number;\n  label?: React.ReactNode;\n  percentageLabel?: React.ReactNode;\n  showPercentage?: boolean;\n  size?: ProgressBarSize;\n  tone?: ProgressBarTone;\n  className?: string;\n  trackClassName?: string;\n  fillClassName?: string;\n  ariaLabel?: string;\n}\n\nconst sizeStyles: Record<\n  ProgressBarSize,\n  {\n    track: string;\n    label: string;\n    percentage: string;\n  }\n> = {\n  sm: {\n    track: \"h-1.5\",\n    label: \"text-xs\",\n    percentage: \"text-xs\",\n  },\n  md: {\n    track: \"h-2.5\",\n    label: \"text-sm\",\n    percentage: \"text-sm\",\n  },\n  lg: {\n    track: \"h-3.5\",\n    label: \"text-base\",\n    percentage: \"text-base\",\n  },\n};\n\nconst toneStyles: Record<\n  ProgressBarTone,\n  {\n    color: string;\n    trackBackground: string;\n  }\n> = {\n  default: {\n    color: \"var(--ds-chart-1)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0%, rgba(30, 41, 59, 0.14) 100%)\",\n  },\n  success: {\n    color: \"var(--ds-chart-3)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(20, 83, 45, 0.12) 0%, rgba(34, 197, 94, 0.18) 100%)\",\n  },\n  warning: {\n    color: \"var(--ds-chart-4)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(120, 53, 15, 0.12) 0%, rgba(245, 158, 11, 0.18) 100%)\",\n  },\n  danger: {\n    color: \"var(--ds-chart-5)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(127, 29, 29, 0.12) 0%, rgba(239, 68, 68, 0.18) 100%)\",\n  },\n  info: {\n    color: \"var(--ds-chart-2)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(30, 64, 175, 0.12) 0%, rgba(59, 130, 246, 0.18) 100%)\",\n  },\n};\n\nfunction clampValue(value: number, max: number): number {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  return Math.min(Math.max(value, 0), max);\n}\n\nexport default function ProgressBar({\n  value,\n  max = 100,\n  label,\n  percentageLabel,\n  showPercentage = true,\n  size = \"md\",\n  tone = \"default\",\n  className = \"\",\n  trackClassName = \"\",\n  fillClassName = \"\",\n  ariaLabel = \"Progress\",\n}: ProgressBarProps) {\n  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n  const clampedValue = clampValue(value, safeMax);\n  const percentage = (clampedValue / safeMax) * 100;\n  const roundedPercentage = Math.round(percentage);\n  const toneStyle = toneStyles[tone];\n  const resolvedPercentageLabel = percentageLabel ?? `${roundedPercentage}%`;\n\n  return (\n    <div className={`w-full space-y-3 ${className}`}>\n      {(label || showPercentage) && (\n        <div className=\"flex items-center justify-between gap-4\">\n          <div\n            className={`font-mono font-semibold tracking-[0.08em] text-foreground ${sizeStyles[size].label}`}\n          >\n            {label}\n          </div>\n          {showPercentage && (\n            <div\n              className={`font-mono font-medium tracking-[0.08em] text-muted-foreground ${sizeStyles[size].percentage}`}\n            >\n              {resolvedPercentageLabel}\n            </div>\n          )}\n        </div>\n      )}\n\n      <div\n        role=\"progressbar\"\n        aria-label={ariaLabel}\n        aria-valuemin={0}\n        aria-valuemax={safeMax}\n        aria-valuenow={Math.round(clampedValue)}\n        aria-valuetext={`${roundedPercentage}%`}\n        className={`relative overflow-hidden rounded-full border border-white/12 bg-background-tertiary/80 shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)] dark:border-white/6 ${sizeStyles[size].track} ${trackClassName}`}\n        style={{ background: toneStyle.trackBackground }}\n      >\n        <div\n          className={`h-full rounded-full transition-[width,filter,box-shadow] duration-500 ease-out ${fillClassName}`}\n          style={{\n            width: `${percentage}%`,\n            background: `linear-gradient(90deg, color-mix(in srgb, ${toneStyle.color} 68%, white 32%) 0%, ${toneStyle.color} 100%)`,\n            boxShadow: `inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px color-mix(in srgb, ${toneStyle.color} 32%, transparent)`,\n            filter: percentage > 0 ? \"saturate(1.05) brightness(1.02)\" : \"none\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAwBA,IAAM,aAOF;CACF,IAAI;EACF,OAAO;EACP,OAAO;EACP,YAAY;EACb;CACD,IAAI;EACF,OAAO;EACP,OAAO;EACP,YAAY;EACb;CACD,IAAI;EACF,OAAO;EACP,OAAO;EACP,YAAY;EACb;CACF;AAED,IAAM,aAMF;CACF,SAAS;EACP,OAAO;EACP,iBACE;EACH;CACD,SAAS;EACP,OAAO;EACP,iBACE;EACH;CACD,SAAS;EACP,OAAO;EACP,iBACE;EACH;CACD,QAAQ;EACN,OAAO;EACP,iBACE;EACH;CACD,MAAM;EACJ,OAAO;EACP,iBACE;EACH;CACF;AAED,SAAS,WAAW,OAAe,KAAqB;AACtD,KAAI,CAAC,OAAO,SAAS,MAAM,CACzB,QAAO;AAGT,QAAO,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,EAAE,IAAI;;AAG1C,SAAwB,YAAY,EAClC,OACA,MAAM,KACN,OACA,iBACA,iBAAiB,MACjB,OAAO,MACP,OAAO,WACP,YAAY,IACZ,iBAAiB,IACjB,gBAAgB,IAChB,YAAY,cACO;CACnB,MAAM,UAAU,OAAO,SAAS,IAAI,IAAI,MAAM,IAAI,MAAM;CACxD,MAAM,eAAe,WAAW,OAAO,QAAQ;CAC/C,MAAM,aAAc,eAAe,UAAW;CAC9C,MAAM,oBAAoB,KAAK,MAAM,WAAW;CAChD,MAAM,YAAY,WAAW;CAC7B,MAAM,0BAA0B,mBAAmB,GAAG,kBAAkB;AAExE,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAW,oBAAoB;YAApC,EACI,SAAS,mBACT,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,WAAW,6DAA6D,WAAW,MAAM;cAExF;IACG,CAAA,EACL,kBACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,WAAW,iEAAiE,WAAW,MAAM;cAE5F;IACG,CAAA,CAEJ;MAGR,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,iBAAe;GACf,iBAAe;GACf,iBAAe,KAAK,MAAM,aAAa;GACvC,kBAAgB,GAAG,kBAAkB;GACrC,WAAW,6JAA6J,WAAW,MAAM,MAAM,GAAG;GAClM,OAAO,EAAE,YAAY,UAAU,iBAAiB;aAEhD,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,WAAW,kFAAkF;IAC7F,OAAO;KACL,OAAO,GAAG,WAAW;KACrB,YAAY,6CAA6C,UAAU,MAAM,uBAAuB,UAAU,MAAM;KAChH,WAAW,oEAAoE,UAAU,MAAM;KAC/F,QAAQ,aAAa,IAAI,oCAAoC;KAC9D;IACD,CAAA;GACE,CAAA,CACF"}
+{"version":3,"file":"progress-bar-BdvQtpm3.cjs","names":[],"sources":["../../src/components/data-display/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type ProgressBarSize = \"sm\" | \"md\" | \"lg\";\nexport type ProgressBarTone =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nexport interface ProgressBarProps {\n  value: number;\n  max?: number;\n  label?: React.ReactNode;\n  percentageLabel?: React.ReactNode;\n  showPercentage?: boolean;\n  size?: ProgressBarSize;\n  tone?: ProgressBarTone;\n  className?: string;\n  trackClassName?: string;\n  fillClassName?: string;\n  ariaLabel?: string;\n}\n\nconst sizeStyles: Record<\n  ProgressBarSize,\n  {\n    track: string;\n    label: string;\n    percentage: string;\n  }\n> = {\n  sm: {\n    track: \"h-1.5\",\n    label: \"text-xs\",\n    percentage: \"text-xs\",\n  },\n  md: {\n    track: \"h-2.5\",\n    label: \"text-sm\",\n    percentage: \"text-sm\",\n  },\n  lg: {\n    track: \"h-3.5\",\n    label: \"text-base\",\n    percentage: \"text-base\",\n  },\n};\n\nconst toneStyles: Record<\n  ProgressBarTone,\n  {\n    color: string;\n    trackBackground: string;\n  }\n> = {\n  default: {\n    color: \"var(--ds-chart-1)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0%, rgba(30, 41, 59, 0.14) 100%)\",\n  },\n  success: {\n    color: \"var(--ds-chart-3)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(20, 83, 45, 0.12) 0%, rgba(34, 197, 94, 0.18) 100%)\",\n  },\n  warning: {\n    color: \"var(--ds-chart-4)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(120, 53, 15, 0.12) 0%, rgba(245, 158, 11, 0.18) 100%)\",\n  },\n  danger: {\n    color: \"var(--ds-chart-5)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(127, 29, 29, 0.12) 0%, rgba(239, 68, 68, 0.18) 100%)\",\n  },\n  info: {\n    color: \"var(--ds-chart-2)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(30, 64, 175, 0.12) 0%, rgba(59, 130, 246, 0.18) 100%)\",\n  },\n};\n\nfunction clampValue(value: number, max: number): number {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  return Math.min(Math.max(value, 0), max);\n}\n\nexport default function ProgressBar({\n  value,\n  max = 100,\n  label,\n  percentageLabel,\n  showPercentage = true,\n  size = \"md\",\n  tone = \"default\",\n  className = \"\",\n  trackClassName = \"\",\n  fillClassName = \"\",\n  ariaLabel = \"Progress\",\n}: ProgressBarProps) {\n  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n  const clampedValue = clampValue(value, safeMax);\n  const percentage = (clampedValue / safeMax) * 100;\n  const roundedPercentage = Math.round(percentage);\n  const toneStyle = toneStyles[tone];\n  const resolvedPercentageLabel = percentageLabel ?? `${roundedPercentage}%`;\n\n  return (\n    <div className={`w-full space-y-3 ${className}`}>\n      {(label || showPercentage) && (\n        <div className=\"flex items-center justify-between gap-4\">\n          <div\n            className={`font-mono font-semibold tracking-[0.08em] text-foreground ${sizeStyles[size].label}`}\n          >\n            {label}\n          </div>\n          {showPercentage && (\n            <div\n              className={`font-mono font-medium tracking-[0.08em] text-muted-foreground ${sizeStyles[size].percentage}`}\n            >\n              {resolvedPercentageLabel}\n            </div>\n          )}\n        </div>\n      )}\n\n      <div\n        role=\"progressbar\"\n        aria-label={ariaLabel}\n        aria-valuemin={0}\n        aria-valuemax={safeMax}\n        aria-valuenow={Math.round(clampedValue)}\n        aria-valuetext={`${roundedPercentage}%`}\n        className={`relative overflow-hidden rounded-full border border-white/12 bg-background-tertiary/80 shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)] dark:border-white/6 ${sizeStyles[size].track} ${trackClassName}`}\n        style={{ background: toneStyle.trackBackground }}\n      >\n        <div\n          className={`h-full rounded-full transition-[width,filter,box-shadow] duration-500 ease-out ${fillClassName}`}\n          style={{\n            width: `${percentage}%`,\n            background: `linear-gradient(90deg, color-mix(in srgb, ${toneStyle.color} 68%, white 32%) 0%, ${toneStyle.color} 100%)`,\n            boxShadow: `inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px color-mix(in srgb, ${toneStyle.color} 32%, transparent)`,\n            filter: percentage > 0 ? \"saturate(1.05) brightness(1.02)\" : \"none\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAwBA,IAAM,aAOF;CACF,IAAI;EACF,OAAO;EACP,OAAO;EACP,YAAY;EACb;CACD,IAAI;EACF,OAAO;EACP,OAAO;EACP,YAAY;EACb;CACD,IAAI;EACF,OAAO;EACP,OAAO;EACP,YAAY;EACb;CACF;AAED,IAAM,aAMF;CACF,SAAS;EACP,OAAO;EACP,iBACE;EACH;CACD,SAAS;EACP,OAAO;EACP,iBACE;EACH;CACD,SAAS;EACP,OAAO;EACP,iBACE;EACH;CACD,QAAQ;EACN,OAAO;EACP,iBACE;EACH;CACD,MAAM;EACJ,OAAO;EACP,iBACE;EACH;CACF;AAED,SAAS,WAAW,OAAe,KAAqB;AACtD,KAAI,CAAC,OAAO,SAAS,MAAM,CACzB,QAAO;AAGT,QAAO,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,EAAE,IAAI;;AAG1C,SAAwB,YAAY,EAClC,OACA,MAAM,KACN,OACA,iBACA,iBAAiB,MACjB,OAAO,MACP,OAAO,WACP,YAAY,IACZ,iBAAiB,IACjB,gBAAgB,IAChB,YAAY,cACO;CACnB,MAAM,UAAU,OAAO,SAAS,IAAI,IAAI,MAAM,IAAI,MAAM;CACxD,MAAM,eAAe,WAAW,OAAO,QAAQ;CAC/C,MAAM,aAAc,eAAe,UAAW;CAC9C,MAAM,oBAAoB,KAAK,MAAM,WAAW;CAChD,MAAM,YAAY,WAAW;CAC7B,MAAM,0BAA0B,mBAAmB,GAAG,kBAAkB;AAExE,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAW,oBAAoB;YAApC,EACI,SAAS,mBACT,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,WAAW,6DAA6D,WAAW,MAAM;cAExF;IACG,CAAA,EACL,kBACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,WAAW,iEAAiE,WAAW,MAAM;cAE5F;IACG,CAAA,CAEJ;MAGR,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,iBAAe;GACf,iBAAe;GACf,iBAAe,KAAK,MAAM,aAAa;GACvC,kBAAgB,GAAG,kBAAkB;GACrC,WAAW,6JAA6J,WAAW,MAAM,MAAM,GAAG;GAClM,OAAO,EAAE,YAAY,UAAU,iBAAiB;aAEhD,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,WAAW,kFAAkF;IAC7F,OAAO;KACL,OAAO,GAAG,WAAW;KACrB,YAAY,6CAA6C,UAAU,MAAM,uBAAuB,UAAU,MAAM;KAChH,WAAW,oEAAoE,UAAU,MAAM;KAC/F,QAAQ,aAAa,IAAI,oCAAoC;KAC9D;IACD,CAAA;GACE,CAAA,CACF"}

package/dist/chunks/select-B8UQ6Uq5.mjs

@@ -0,0 +1,170 @@
+import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { J as CheckIcon, N as ChevronDownIcon } from "./icons-DuumN7z-.mjs";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
+//#region src/components/forms/select/Select.tsx
+var Select = forwardRef(function SelectComponent({ className = "", containerClassName = "", triggerClassName = "", dropdownClassName = "", optionClassName = "", label, error, helperText, options, value, onChange, placeholder = "Select...", disabled, bgClassName = "bg-background-secondary", size = "default", selectionIndicator = "check", ...props }, ref) {
+	const [open, setOpen] = useState(false);
+	const [visible, setVisible] = useState(false);
+	const containerRef = useRef(null);
+	const hiddenSelectRef = useRef(null);
+	const selectedOptionRef = useRef(null);
+	const mouseX = useMotionValue(0);
+	const mouseY = useMotionValue(0);
+	const radius = 100;
+	const isCompact = size === "compact";
+	const selectedOption = options.find((option) => option.value === value);
+	useEffect(() => {
+		if (typeof ref === "function") {
+			ref(hiddenSelectRef.current);
+			return;
+		}
+		if (ref) ref.current = hiddenSelectRef.current;
+	}, [ref]);
+	useEffect(() => {
+		const handleClick = (event) => {
+			if (containerRef.current && !containerRef.current.contains(event.target)) setOpen(false);
+		};
+		if (open) document.addEventListener("mousedown", handleClick);
+		return () => {
+			document.removeEventListener("mousedown", handleClick);
+		};
+	}, [open]);
+	useEffect(() => {
+		if (!open || !selectedOptionRef.current) return;
+		const frameId = window.requestAnimationFrame(() => {
+			selectedOptionRef.current?.scrollIntoView({ block: "nearest" });
+		});
+		return () => {
+			window.cancelAnimationFrame(frameId);
+		};
+	}, [open, value]);
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
+	const handleSelect = (optionValue) => {
+		if (onChange && hiddenSelectRef.current) onChange({
+			target: {
+				value: optionValue,
+				name: props.name
+			},
+			currentTarget: {
+				value: optionValue,
+				name: props.name
+			}
+		});
+		setOpen(false);
+	};
+	const handleKeyDown = (event) => {
+		if (disabled) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			setOpen((current) => !current);
+		}
+		if (event.key === "Escape") setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("w-full", isCompact ? "min-w-0" : "min-w-48", containerClassName),
+		children: [
+			label ? /* @__PURE__ */ jsx("label", {
+				className: "mb-2 block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsxs("select", {
+				ref: hiddenSelectRef,
+				className: "sr-only",
+				value,
+				onChange,
+				disabled,
+				...props,
+				children: [/* @__PURE__ */ jsx("option", {
+					value: "",
+					children: placeholder
+				}), options.map((option) => /* @__PURE__ */ jsx("option", {
+					value: option.value,
+					children: option.label
+				}, option.value))]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: containerRef,
+				className: mergeClassNames("relative w-full", className),
+				children: [/* @__PURE__ */ jsx(motion.div, {
+					style: { backgroundImage: disabled ? "none" : useMotionTemplate`
+                  radial-gradient(
+                    ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+                    var(--ds-color-accent),
+                    transparent 90%
+                  )
+                ` },
+					onMouseMove: !disabled ? handleMouseMove : void 0,
+					onMouseEnter: !disabled ? () => setVisible(true) : void 0,
+					onMouseLeave: !disabled ? () => setVisible(false) : void 0,
+					className: mergeClassNames("group/select rounded-lg p-[2px] transition duration-300 hover:border-accent", disabled ? "border-none bg-muted" : error ? "border-destructive" : "border-border"),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: mergeClassNames("flex w-full cursor-pointer items-center justify-between rounded-md border border-input transition duration-400 ease-in-out", isCompact ? "h-9 px-2.5 py-2 text-sm" : "h-10 px-3 py-2 text-sm", bgClassName, disabled ? "cursor-not-allowed opacity-50" : "text-foreground", error ? "border-destructive text-destructive focus-visible:ring-destructive" : "", triggerClassName),
+						onClick: () => {
+							if (!disabled) setOpen((current) => !current);
+						},
+						onKeyDown: handleKeyDown,
+						role: "button",
+						tabIndex: disabled ? -1 : 0,
+						"aria-haspopup": "listbox",
+						"aria-expanded": open,
+						children: [selectedOption ? /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate text-foreground",
+							children: selectedOption.label
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate text-muted-foreground",
+							children: placeholder
+						}), /* @__PURE__ */ jsx("span", {
+							className: mergeClassNames("ml-2 shrink-0 text-muted-foreground transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
+							children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+								width: 24,
+								height: 24,
+								color: "currentColor",
+								className: isCompact ? "h-4 w-4" : "h-5 w-5"
+							})
+						})]
+					})
+				}), open && !disabled ? /* @__PURE__ */ jsxs("div", {
+					className: mergeClassNames("absolute right-0 left-0 z-20 mt-1 flex flex-col overflow-auto rounded-lg border border-border bg-background-secondary shadow-3 backdrop-blur-xl transition", isCompact ? "max-h-56" : "max-h-60", dropdownClassName),
+					children: [options.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "px-3 py-2 text-muted-foreground",
+						children: "No options"
+					}) : null, options.map((option) => /* @__PURE__ */ jsxs("div", {
+						ref: option.value === value ? selectedOptionRef : null,
+						className: mergeClassNames("mx-1 my-1 flex cursor-pointer items-center rounded-md text-foreground transition", isCompact ? "gap-1.5 px-2.5 py-2 text-sm" : "gap-2 px-3 py-2 text-sm", option.value === value ? "bg-accent-subtle font-semibold text-accent" : "", "hover:bg-accent hover:text-on-accent", optionClassName),
+						onClick: () => handleSelect(option.value),
+						children: [selectionIndicator === "check" ? /* @__PURE__ */ jsx("span", {
+							className: mergeClassNames("flex items-center justify-center", isCompact ? "w-4" : "w-5"),
+							children: option.value === value ? /* @__PURE__ */ jsx(CheckIcon, {
+								className: "text-accent",
+								width: isCompact ? 16 : 18,
+								height: isCompact ? 16 : 18
+							}) : null
+						}) : null, /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: option.label
+						})]
+					}, option.value))]
+				}) : null]
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-sm font-medium text-destructive",
+				children: error
+			}) : null,
+			helperText && !error ? /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-sm text-muted-foreground",
+				children: helperText
+			}) : null
+		]
+	});
+});
+Select.displayName = "Select";
+//#endregion
+export { Select as t };
+
+//# sourceMappingURL=select-B8UQ6Uq5.mjs.map

package/dist/chunks/select-B8UQ6Uq5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-B8UQ6Uq5.mjs","names":[],"sources":["../../src/components/forms/select/Select.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ForwardedRef,\n  type KeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n} from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SelectProps } from \"./types\";\n\nexport const Select = forwardRef(function SelectComponent(\n  {\n    className = \"\",\n    containerClassName = \"\",\n    triggerClassName = \"\",\n    dropdownClassName = \"\",\n    optionClassName = \"\",\n    label,\n    error,\n    helperText,\n    options,\n    value,\n    onChange,\n    placeholder = \"Select...\",\n    disabled,\n    bgClassName = \"bg-background-secondary\",\n    size = \"default\",\n    selectionIndicator = \"check\",\n    ...props\n  }: SelectProps,\n  ref: ForwardedRef<HTMLSelectElement>,\n) {\n  const [open, setOpen] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const hiddenSelectRef = useRef<HTMLSelectElement>(null);\n  const selectedOptionRef = useRef<HTMLDivElement>(null);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n  const isCompact = size === \"compact\";\n  const selectedOption = options.find((option) => option.value === value);\n\n  useEffect(() => {\n    if (typeof ref === \"function\") {\n      ref(hiddenSelectRef.current);\n      return;\n    }\n\n    if (ref) {\n      ref.current = hiddenSelectRef.current;\n    }\n  }, [ref]);\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n\n    if (open) {\n      document.addEventListener(\"mousedown\", handleClick);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClick);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open || !selectedOptionRef.current) {\n      return;\n    }\n\n    const frameId = window.requestAnimationFrame(() => {\n      selectedOptionRef.current?.scrollIntoView({ block: \"nearest\" });\n    });\n\n    return () => {\n      window.cancelAnimationFrame(frameId);\n    };\n  }, [open, value]);\n\n  const handleMouseMove = (event: ReactMouseEvent<HTMLDivElement>) => {\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - left);\n    mouseY.set(event.clientY - top);\n  };\n\n  const handleSelect = (optionValue: string) => {\n    if (onChange && hiddenSelectRef.current) {\n      const syntheticEvent = {\n        target: { value: optionValue, name: props.name },\n        currentTarget: { value: optionValue, name: props.name },\n      } as ChangeEvent<HTMLSelectElement>;\n\n      onChange(syntheticEvent);\n    }\n\n    setOpen(false);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      setOpen((current) => !current);\n    }\n\n    if (event.key === \"Escape\") {\n      setOpen(false);\n    }\n  };\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"w-full\",\n        isCompact ? \"min-w-0\" : \"min-w-48\",\n        containerClassName,\n      )}\n    >\n      {label ? (\n        <label className=\"mb-2 block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n          {label}\n        </label>\n      ) : null}\n\n      <select\n        ref={hiddenSelectRef}\n        className=\"sr-only\"\n        value={value}\n        onChange={onChange}\n        disabled={disabled}\n        {...props}\n      >\n        <option value=\"\">{placeholder}</option>\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n\n      <div\n        ref={containerRef}\n        className={mergeClassNames(\"relative w-full\", className)}\n      >\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/select rounded-lg p-[2px] transition duration-300 hover:border-accent\",\n            disabled\n              ? \"border-none bg-muted\"\n              : error\n                ? \"border-destructive\"\n                : \"border-border\",\n          )}\n        >\n          <div\n            className={mergeClassNames(\n              \"flex w-full cursor-pointer items-center justify-between rounded-md border border-input transition duration-400 ease-in-out\",\n              isCompact ? \"h-9 px-2.5 py-2 text-sm\" : \"h-10 px-3 py-2 text-sm\",\n              bgClassName,\n              disabled ? \"cursor-not-allowed opacity-50\" : \"text-foreground\",\n              error\n                ? \"border-destructive text-destructive focus-visible:ring-destructive\"\n                : \"\",\n              triggerClassName,\n            )}\n            onClick={() => {\n              if (!disabled) {\n                setOpen((current) => !current);\n              }\n            }}\n            onKeyDown={handleKeyDown}\n            role=\"button\"\n            tabIndex={disabled ? -1 : 0}\n            aria-haspopup=\"listbox\"\n            aria-expanded={open}\n          >\n            {selectedOption ? (\n              <span className=\"min-w-0 flex-1 truncate text-foreground\">\n                {selectedOption.label}\n              </span>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate text-muted-foreground\">\n                {placeholder}\n              </span>\n            )}\n\n            <span\n              className={mergeClassNames(\n                \"ml-2 shrink-0 text-muted-foreground transition-transform duration-300\",\n                open ? \"rotate-180\" : \"rotate-0\",\n              )}\n            >\n              <ChevronDownIcon\n                width={24}\n                height={24}\n                color=\"currentColor\"\n                className={isCompact ? \"h-4 w-4\" : \"h-5 w-5\"}\n              />\n            </span>\n          </div>\n        </motion.div>\n\n        {open && !disabled ? (\n          <div\n            className={mergeClassNames(\n              \"absolute right-0 left-0 z-20 mt-1 flex flex-col overflow-auto rounded-lg border border-border bg-background-secondary shadow-3 backdrop-blur-xl transition\",\n              isCompact ? \"max-h-56\" : \"max-h-60\",\n              dropdownClassName,\n            )}\n          >\n            {options.length === 0 ? (\n              <div className=\"px-3 py-2 text-muted-foreground\">No options</div>\n            ) : null}\n\n            {options.map((option) => (\n              <div\n                key={option.value}\n                ref={option.value === value ? selectedOptionRef : null}\n                className={mergeClassNames(\n                  \"mx-1 my-1 flex cursor-pointer items-center rounded-md text-foreground transition\",\n                  isCompact\n                    ? \"gap-1.5 px-2.5 py-2 text-sm\"\n                    : \"gap-2 px-3 py-2 text-sm\",\n                  option.value === value\n                    ? \"bg-accent-subtle font-semibold text-accent\"\n                    : \"\",\n                  \"hover:bg-accent hover:text-on-accent\",\n                  optionClassName,\n                )}\n                onClick={() => handleSelect(option.value)}\n              >\n                {selectionIndicator === \"check\" ? (\n                  <span\n                    className={mergeClassNames(\n                      \"flex items-center justify-center\",\n                      isCompact ? \"w-4\" : \"w-5\",\n                    )}\n                  >\n                    {option.value === value ? (\n                      <CheckIcon\n                        className=\"text-accent\"\n                        width={isCompact ? 16 : 18}\n                        height={isCompact ? 16 : 18}\n                      />\n                    ) : null}\n                  </span>\n                ) : null}\n\n                <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n              </div>\n            ))}\n          </div>\n        ) : null}\n      </div>\n\n      {error ? (\n        <p className=\"mt-1 text-sm font-medium text-destructive\">{error}</p>\n      ) : null}\n      {helperText && !error ? (\n        <p className=\"mt-1 text-sm text-muted-foreground\">{helperText}</p>\n      ) : null}\n    </div>\n  );\n});\n\nSelect.displayName = \"Select\";\n"],"mappings":"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"}

package/dist/chunks/select-CCUSMvfS.cjs

@@ -0,0 +1,176 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-B4SmmY4J.cjs");
+const require_icons = require("./icons-BxIzP2jd.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+//#region src/components/forms/select/Select.tsx
+var Select = (0, react.forwardRef)(function SelectComponent({ className = "", containerClassName = "", triggerClassName = "", dropdownClassName = "", optionClassName = "", label, error, helperText, options, value, onChange, placeholder = "Select...", disabled, bgClassName = "bg-background-secondary", size = "default", selectionIndicator = "check", ...props }, ref) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [visible, setVisible] = (0, react.useState)(false);
+	const containerRef = (0, react.useRef)(null);
+	const hiddenSelectRef = (0, react.useRef)(null);
+	const selectedOptionRef = (0, react.useRef)(null);
+	const mouseX = (0, framer_motion.useMotionValue)(0);
+	const mouseY = (0, framer_motion.useMotionValue)(0);
+	const radius = 100;
+	const isCompact = size === "compact";
+	const selectedOption = options.find((option) => option.value === value);
+	(0, react.useEffect)(() => {
+		if (typeof ref === "function") {
+			ref(hiddenSelectRef.current);
+			return;
+		}
+		if (ref) ref.current = hiddenSelectRef.current;
+	}, [ref]);
+	(0, react.useEffect)(() => {
+		const handleClick = (event) => {
+			if (containerRef.current && !containerRef.current.contains(event.target)) setOpen(false);
+		};
+		if (open) document.addEventListener("mousedown", handleClick);
+		return () => {
+			document.removeEventListener("mousedown", handleClick);
+		};
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open || !selectedOptionRef.current) return;
+		const frameId = window.requestAnimationFrame(() => {
+			selectedOptionRef.current?.scrollIntoView({ block: "nearest" });
+		});
+		return () => {
+			window.cancelAnimationFrame(frameId);
+		};
+	}, [open, value]);
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
+	const handleSelect = (optionValue) => {
+		if (onChange && hiddenSelectRef.current) onChange({
+			target: {
+				value: optionValue,
+				name: props.name
+			},
+			currentTarget: {
+				value: optionValue,
+				name: props.name
+			}
+		});
+		setOpen(false);
+	};
+	const handleKeyDown = (event) => {
+		if (disabled) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			setOpen((current) => !current);
+		}
+		if (event.key === "Escape") setOpen(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("w-full", isCompact ? "min-w-0" : "min-w-48", containerClassName),
+		children: [
+			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				className: "mb-2 block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+				children: label
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+				ref: hiddenSelectRef,
+				className: "sr-only",
+				value,
+				onChange,
+				disabled,
+				...props,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: "",
+					children: placeholder
+				}), options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: option.value,
+					children: option.label
+				}, option.value))]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: containerRef,
+				className: require_utils.mergeClassNames("relative w-full", className),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+					style: { backgroundImage: disabled ? "none" : framer_motion.useMotionTemplate`
+                  radial-gradient(
+                    ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+                    var(--ds-color-accent),
+                    transparent 90%
+                  )
+                ` },
+					onMouseMove: !disabled ? handleMouseMove : void 0,
+					onMouseEnter: !disabled ? () => setVisible(true) : void 0,
+					onMouseLeave: !disabled ? () => setVisible(false) : void 0,
+					className: require_utils.mergeClassNames("group/select rounded-lg p-[2px] transition duration-300 hover:border-accent", disabled ? "border-none bg-muted" : error ? "border-destructive" : "border-border"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: require_utils.mergeClassNames("flex w-full cursor-pointer items-center justify-between rounded-md border border-input transition duration-400 ease-in-out", isCompact ? "h-9 px-2.5 py-2 text-sm" : "h-10 px-3 py-2 text-sm", bgClassName, disabled ? "cursor-not-allowed opacity-50" : "text-foreground", error ? "border-destructive text-destructive focus-visible:ring-destructive" : "", triggerClassName),
+						onClick: () => {
+							if (!disabled) setOpen((current) => !current);
+						},
+						onKeyDown: handleKeyDown,
+						role: "button",
+						tabIndex: disabled ? -1 : 0,
+						"aria-haspopup": "listbox",
+						"aria-expanded": open,
+						children: [selectedOption ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "min-w-0 flex-1 truncate text-foreground",
+							children: selectedOption.label
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "min-w-0 flex-1 truncate text-muted-foreground",
+							children: placeholder
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_utils.mergeClassNames("ml-2 shrink-0 text-muted-foreground transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronDownIcon, {
+								width: 24,
+								height: 24,
+								color: "currentColor",
+								className: isCompact ? "h-4 w-4" : "h-5 w-5"
+							})
+						})]
+					})
+				}), open && !disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_utils.mergeClassNames("absolute right-0 left-0 z-20 mt-1 flex flex-col overflow-auto rounded-lg border border-border bg-background-secondary shadow-3 backdrop-blur-xl transition", isCompact ? "max-h-56" : "max-h-60", dropdownClassName),
+					children: [options.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "px-3 py-2 text-muted-foreground",
+						children: "No options"
+					}) : null, options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						ref: option.value === value ? selectedOptionRef : null,
+						className: require_utils.mergeClassNames("mx-1 my-1 flex cursor-pointer items-center rounded-md text-foreground transition", isCompact ? "gap-1.5 px-2.5 py-2 text-sm" : "gap-2 px-3 py-2 text-sm", option.value === value ? "bg-accent-subtle font-semibold text-accent" : "", "hover:bg-accent hover:text-on-accent", optionClassName),
+						onClick: () => handleSelect(option.value),
+						children: [selectionIndicator === "check" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_utils.mergeClassNames("flex items-center justify-center", isCompact ? "w-4" : "w-5"),
+							children: option.value === value ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CheckIcon, {
+								className: "text-accent",
+								width: isCompact ? 16 : 18,
+								height: isCompact ? 16 : 18
+							}) : null
+						}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: option.label
+						})]
+					}, option.value))]
+				}) : null]
+			}),
+			error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-1 text-sm font-medium text-destructive",
+				children: error
+			}) : null,
+			helperText && !error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-1 text-sm text-muted-foreground",
+				children: helperText
+			}) : null
+		]
+	});
+});
+Select.displayName = "Select";
+//#endregion
+Object.defineProperty(exports, "Select", {
+	enumerable: true,
+	get: function() {
+		return Select;
+	}
+});
+
+//# sourceMappingURL=select-CCUSMvfS.cjs.map

package/dist/chunks/select-CCUSMvfS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-CCUSMvfS.cjs","names":[],"sources":["../../src/components/forms/select/Select.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ForwardedRef,\n  type KeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n} from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SelectProps } from \"./types\";\n\nexport const Select = forwardRef(function SelectComponent(\n  {\n    className = \"\",\n    containerClassName = \"\",\n    triggerClassName = \"\",\n    dropdownClassName = \"\",\n    optionClassName = \"\",\n    label,\n    error,\n    helperText,\n    options,\n    value,\n    onChange,\n    placeholder = \"Select...\",\n    disabled,\n    bgClassName = \"bg-background-secondary\",\n    size = \"default\",\n    selectionIndicator = \"check\",\n    ...props\n  }: SelectProps,\n  ref: ForwardedRef<HTMLSelectElement>,\n) {\n  const [open, setOpen] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const hiddenSelectRef = useRef<HTMLSelectElement>(null);\n  const selectedOptionRef = useRef<HTMLDivElement>(null);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n  const isCompact = size === \"compact\";\n  const selectedOption = options.find((option) => option.value === value);\n\n  useEffect(() => {\n    if (typeof ref === \"function\") {\n      ref(hiddenSelectRef.current);\n      return;\n    }\n\n    if (ref) {\n      ref.current = hiddenSelectRef.current;\n    }\n  }, [ref]);\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n\n    if (open) {\n      document.addEventListener(\"mousedown\", handleClick);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClick);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open || !selectedOptionRef.current) {\n      return;\n    }\n\n    const frameId = window.requestAnimationFrame(() => {\n      selectedOptionRef.current?.scrollIntoView({ block: \"nearest\" });\n    });\n\n    return () => {\n      window.cancelAnimationFrame(frameId);\n    };\n  }, [open, value]);\n\n  const handleMouseMove = (event: ReactMouseEvent<HTMLDivElement>) => {\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - left);\n    mouseY.set(event.clientY - top);\n  };\n\n  const handleSelect = (optionValue: string) => {\n    if (onChange && hiddenSelectRef.current) {\n      const syntheticEvent = {\n        target: { value: optionValue, name: props.name },\n        currentTarget: { value: optionValue, name: props.name },\n      } as ChangeEvent<HTMLSelectElement>;\n\n      onChange(syntheticEvent);\n    }\n\n    setOpen(false);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      setOpen((current) => !current);\n    }\n\n    if (event.key === \"Escape\") {\n      setOpen(false);\n    }\n  };\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"w-full\",\n        isCompact ? \"min-w-0\" : \"min-w-48\",\n        containerClassName,\n      )}\n    >\n      {label ? (\n        <label className=\"mb-2 block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n          {label}\n        </label>\n      ) : null}\n\n      <select\n        ref={hiddenSelectRef}\n        className=\"sr-only\"\n        value={value}\n        onChange={onChange}\n        disabled={disabled}\n        {...props}\n      >\n        <option value=\"\">{placeholder}</option>\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n\n      <div\n        ref={containerRef}\n        className={mergeClassNames(\"relative w-full\", className)}\n      >\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/select rounded-lg p-[2px] transition duration-300 hover:border-accent\",\n            disabled\n              ? \"border-none bg-muted\"\n              : error\n                ? \"border-destructive\"\n                : \"border-border\",\n          )}\n        >\n          <div\n            className={mergeClassNames(\n              \"flex w-full cursor-pointer items-center justify-between rounded-md border border-input transition duration-400 ease-in-out\",\n              isCompact ? \"h-9 px-2.5 py-2 text-sm\" : \"h-10 px-3 py-2 text-sm\",\n              bgClassName,\n              disabled ? \"cursor-not-allowed opacity-50\" : \"text-foreground\",\n              error\n                ? \"border-destructive text-destructive focus-visible:ring-destructive\"\n                : \"\",\n              triggerClassName,\n            )}\n            onClick={() => {\n              if (!disabled) {\n                setOpen((current) => !current);\n              }\n            }}\n            onKeyDown={handleKeyDown}\n            role=\"button\"\n            tabIndex={disabled ? -1 : 0}\n            aria-haspopup=\"listbox\"\n            aria-expanded={open}\n          >\n            {selectedOption ? (\n              <span className=\"min-w-0 flex-1 truncate text-foreground\">\n                {selectedOption.label}\n              </span>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate text-muted-foreground\">\n                {placeholder}\n              </span>\n            )}\n\n            <span\n              className={mergeClassNames(\n                \"ml-2 shrink-0 text-muted-foreground transition-transform duration-300\",\n                open ? \"rotate-180\" : \"rotate-0\",\n              )}\n            >\n              <ChevronDownIcon\n                width={24}\n                height={24}\n                color=\"currentColor\"\n                className={isCompact ? \"h-4 w-4\" : \"h-5 w-5\"}\n              />\n            </span>\n          </div>\n        </motion.div>\n\n        {open && !disabled ? (\n          <div\n            className={mergeClassNames(\n              \"absolute right-0 left-0 z-20 mt-1 flex flex-col overflow-auto rounded-lg border border-border bg-background-secondary shadow-3 backdrop-blur-xl transition\",\n              isCompact ? \"max-h-56\" : \"max-h-60\",\n              dropdownClassName,\n            )}\n          >\n            {options.length === 0 ? (\n              <div className=\"px-3 py-2 text-muted-foreground\">No options</div>\n            ) : null}\n\n            {options.map((option) => (\n              <div\n                key={option.value}\n                ref={option.value === value ? selectedOptionRef : null}\n                className={mergeClassNames(\n                  \"mx-1 my-1 flex cursor-pointer items-center rounded-md text-foreground transition\",\n                  isCompact\n                    ? \"gap-1.5 px-2.5 py-2 text-sm\"\n                    : \"gap-2 px-3 py-2 text-sm\",\n                  option.value === value\n                    ? \"bg-accent-subtle font-semibold text-accent\"\n                    : \"\",\n                  \"hover:bg-accent hover:text-on-accent\",\n                  optionClassName,\n                )}\n                onClick={() => handleSelect(option.value)}\n              >\n                {selectionIndicator === \"check\" ? (\n                  <span\n                    className={mergeClassNames(\n                      \"flex items-center justify-center\",\n                      isCompact ? \"w-4\" : \"w-5\",\n                    )}\n                  >\n                    {option.value === value ? (\n                      <CheckIcon\n                        className=\"text-accent\"\n                        width={isCompact ? 16 : 18}\n                        height={isCompact ? 16 : 18}\n                      />\n                    ) : null}\n                  </span>\n                ) : null}\n\n                <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n              </div>\n            ))}\n          </div>\n        ) : null}\n      </div>\n\n      {error ? (\n        <p className=\"mt-1 text-sm font-medium text-destructive\">{error}</p>\n      ) : null}\n      {helperText && !error ? (\n        <p className=\"mt-1 text-sm text-muted-foreground\">{helperText}</p>\n      ) : null}\n    </div>\n  );\n});\n\nSelect.displayName = \"Select\";\n"],"mappings":"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"}