beacon-ui 3.4.6 → 3.4.8

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.4.8] - 2026-01-08
+
+### Added
+- Slider component for selecting single values or ranges with support for tooltips, step indicators, and customizable labels
+- Slider supports both single value and range modes with configurable min, max, and step values
+- Slider component includes status states (default, hover, active, disabled) and keyboard navigation support
+
+### Changed
+- Input and Select components updated with improved styling consistency and enhanced functionality
+
 ## [3.4.5] - 2026-01-06
 
 ### Added

package/dist/components/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAgC,MAAM,OAAO,CAAC;AAI5G,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,eAAe,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AACxE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAChF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkED,wBAAgB,MAAM,CAAC,EACrB,OAAkB,EAClB,IAAW,EACX,YAAgB,EAChB,SAAS,EACT,OAAO,EACP,aAAqB,EACrB,cAAyB,EACzB,OAAe,EACf,QAAgB,EAChB,KAAK,EAAE,SAAS,EAChB,KAAiB,EACjB,IAAe,EACf,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAsSb"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAgC,MAAM,OAAO,CAAC;AAI5G,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,eAAe,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AACxE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAChF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkED,wBAAgB,MAAM,CAAC,EACrB,OAAkB,EAClB,IAAW,EACX,YAAgB,EAChB,SAAS,EACT,OAAO,EACP,aAAqB,EACrB,cAAyB,EACzB,OAAe,EACf,QAAgB,EAChB,KAAK,EAAE,SAAS,EAChB,KAAiB,EACjB,IAAe,EACf,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAwSb"}

package/dist/components/Button.js

@@ -207,7 +207,9 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
                 stateStyles.backgroundColor = `var(${bgTonalHoverToken})`;
             }
             else if (variant === "outline") {
-                stateStyles.borderColor = `var(${borderHoverToken})`;
+                stateStyles.backgroundColor = "var(--bg-primary)";
+                stateStyles.color = "var(--fg-neutral)";
+                stateStyles.borderColor = "var(--bg-primary)";
             }
             else if (variant === "link") {
                 stateStyles.color = `var(${fgHoverToken})`;

package/dist/components/Input.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithRef } from "react";
-export type InputSize = "sm" | "md" | "lg";
-export type InputStatus = "default" | "active";
+export type InputSize = "sm" | "md" | "lg" | "xl";
+export type InputStatus = "default" | "hover" | "active" | "error" | "disabled";
 export interface InputProps extends Omit<ComponentPropsWithRef<"input">, "size"> {
     label?: string;
     size?: InputSize;
@@ -15,6 +15,7 @@ export interface InputProps extends Omit<ComponentPropsWithRef<"input">, "size">
     rounded?: boolean;
     iconOnly?: boolean;
     borderRadius?: string;
+    fullWidth?: boolean;
 }
-export declare function Input({ label, size, status, showLabel, startIcon, endIcon, placeholderIcon, showError, errorMessage, numberPrefix, rounded, iconOnly, disabled, borderRadius, className, style, value, placeholder, ref, ...rest }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ label, size, status, showLabel, startIcon, endIcon, placeholderIcon, showError, errorMessage, numberPrefix, rounded, iconOnly, disabled, borderRadius, fullWidth, className, style, value, placeholder, ref, ...rest }: InputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Input.d.ts.map

package/dist/components/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAIjE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuDD,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,MAAkB,EAClB,SAAgB,EAChB,SAAS,EACT,OAAO,EACP,eAAe,EACf,SAAiB,EACjB,YAA+B,EAC/B,YAAY,EACZ,OAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,KAAK,EACL,WAAW,EACX,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,2CAgMZ"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAClD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAEhF,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAmED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,MAAkB,EAClB,SAAgB,EAChB,SAAS,EACT,OAAO,EACP,eAAe,EACf,SAAiB,EACjB,YAA+B,EAC/B,YAAY,EACZ,OAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,YAAY,EACZ,SAAgB,EAChB,SAAS,EACT,KAAK,EACL,KAAK,EACL,WAAW,EACX,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,2CAwTZ"}

package/dist/components/Input.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useCallback } from "react";
 import { useThemeSafe } from "../providers/ThemeProvider";
-import { AlertTriangleErrorIcon } from "../icons";
+import { AlertTriangleErrorIcon, CloseIcon } from "../icons";
 const SIZE_CONFIG = {
     sm: {
         height: "28px",
@@ -40,20 +40,39 @@ const SIZE_CONFIG = {
         borderRadius: "var(--corner-radius-200)",
         gap: "var(--spacing-200)",
     },
+    xl: {
+        height: "56px",
+        iconSize: 24,
+        fontSize: "var(--body-regular-text-size)",
+        lineHeight: "var(--body-regular-line-height)",
+        labelFontSize: "var(--body-regular-text-size)",
+        labelLineHeight: "var(--body-regular-line-height)",
+        paddingX: "var(--spacing-450)",
+        paddingY: "var(--spacing-400)",
+        borderRadius: "var(--corner-radius-200)",
+        gap: "var(--spacing-200)",
+    },
 };
-export function Input({ label, size = "md", status = "default", showLabel = true, startIcon, endIcon, placeholderIcon, showError = false, errorMessage = "Error message!", numberPrefix, rounded = false, iconOnly = false, disabled = false, borderRadius, className, style, value, placeholder, ref, ...rest }) {
+export function Input({ label, size = "md", status = "default", showLabel = true, startIcon, endIcon, placeholderIcon, showError = false, errorMessage = "Error message!", numberPrefix, rounded = false, iconOnly = false, disabled = false, borderRadius, fullWidth = true, className, style, value, placeholder, ref, ...rest }) {
     useThemeSafe(); // Ensure theme context is available
     const sizeConfig = SIZE_CONFIG[size];
     const hasValue = value != null && String(value).length > 0;
+    const isDisabled = disabled || status === "disabled";
     const borderColor = useMemo(() => {
-        if (disabled) {
-            return "var(--border-strong-100)";
+        if (isDisabled) {
+            return "var(--border-disabled)";
+        }
+        if (status === "error") {
+            return "var(--border-critical)";
         }
         if (status === "active") {
             return "var(--border-primary)";
         }
+        if (status === "hover") {
+            return "var(--border-neutral-primary)";
+        }
         return "var(--border-strong-200)";
-    }, [status, disabled]);
+    }, [status, isDisabled]);
     const inputContainerStyles = useMemo(() => {
         const baseStyles = {
             display: "flex",
@@ -66,36 +85,49 @@ export function Input({ label, size = "md", status = "default", showLabel = true
             paddingRight: sizeConfig.paddingX,
             paddingTop: sizeConfig.paddingY,
             paddingBottom: sizeConfig.paddingY,
-            width: iconOnly ? sizeConfig.height : "100%",
+            width: iconOnly ? sizeConfig.height : fullWidth ? "100%" : "fit-content",
             height: iconOnly ? sizeConfig.height : sizeConfig.height,
             justifyContent: iconOnly ? "center" : "flex-start",
-            cursor: disabled ? "not-allowed" : "text",
-            opacity: disabled ? 0.6 : 1,
-            transition: "border-color 0.15s ease",
+            cursor: isDisabled ? "not-allowed" : "text",
+            opacity: isDisabled ? 0.6 : 1,
+            transition: "border-color 0.15s ease, box-shadow 0.15s ease",
+            position: "relative",
         };
         return baseStyles;
-    }, [sizeConfig, borderColor, rounded, borderRadius, iconOnly, disabled]);
+    }, [sizeConfig, borderColor, rounded, borderRadius, iconOnly, isDisabled, fullWidth]);
     const labelStyles = useMemo(() => {
         return {
             fontSize: sizeConfig.labelFontSize,
             lineHeight: sizeConfig.labelLineHeight,
             fontFamily: "var(--font-secondary)",
-            color: disabled ? "var(--fg-disabled)" : "var(--fg-neutral)",
-            marginBottom: "var(--spacing-100)",
+            color: isDisabled ? "var(--fg-disabled)" : "var(--fg-neutral)",
         };
-    }, [sizeConfig, disabled]);
+    }, [sizeConfig, isDisabled]);
     const prefixStyles = useMemo(() => {
+        let borderColor = "var(--border-strong-200)";
+        if (isDisabled) {
+            borderColor = "var(--border-disabled)";
+        }
+        else if (status === "error") {
+            borderColor = "var(--border-critical)";
+        }
+        else if (status === "active") {
+            borderColor = "var(--border-primary)";
+        }
+        else if (status === "hover") {
+            borderColor = "var(--border-neutral-primary)";
+        }
         return {
             fontSize: sizeConfig.fontSize,
             lineHeight: sizeConfig.lineHeight,
             fontFamily: "var(--font-secondary)",
             color: "var(--fg-neutral-tertiary)",
             paddingRight: "var(--spacing-100)",
-            borderRight: `var(--border-width-25) solid ${status === "active" ? "var(--border-strong-100)" : "var(--border-strong-200)"}`,
+            borderRight: `var(--border-width-25) solid ${borderColor}`,
             display: "flex",
             alignItems: "center",
         };
-    }, [sizeConfig, status]);
+    }, [sizeConfig, status, isDisabled]);
     const errorContainerStyles = useMemo(() => {
         return {
             display: "flex",
@@ -122,32 +154,116 @@ export function Input({ label, size = "md", status = "default", showLabel = true
         fontSize: sizeConfig.fontSize,
         lineHeight: sizeConfig.lineHeight,
         fontFamily: "var(--font-secondary)",
-        color: hasValue ? "var(--fg-neutral-secondary)" : disabled ? "var(--fg-disabled)" : "var(--fg-disabled)",
+        color: isDisabled ? "var(--fg-disabled)" : "var(--fg-neutral)",
         fontWeight: hasValue ? 500 : 400,
-        flex: iconOnly ? "none" : "1 0 0",
+        flex: iconOnly || !fullWidth ? "none" : "1 0 0",
         minWidth: iconOnly ? "auto" : 0,
         minHeight: iconOnly ? "auto" : 0,
         border: "none",
         background: "transparent",
         outline: "none",
         padding: 0,
-        width: "100%",
+        width: fullWidth ? "100%" : "auto",
+        caretColor: isDisabled ? "var(--fg-disabled)" : "var(--fg-primary)",
     };
     const [isHovered, setIsHovered] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const handleFocus = useCallback((e) => {
+        if (!isDisabled) {
+            setIsFocused(true);
+        }
+        rest.onFocus?.(e);
+    }, [isDisabled, rest]);
+    const handleBlur = useCallback((e) => {
+        setIsFocused(false);
+        rest.onBlur?.(e);
+    }, [rest]);
+    const handleClear = useCallback((e) => {
+        e.stopPropagation();
+        if (!isDisabled && rest.onChange) {
+            const syntheticEvent = {
+                target: { value: "" },
+            };
+            rest.onChange(syntheticEvent);
+        }
+    }, [isDisabled, rest]);
+    const effectiveStatus = useMemo(() => {
+        if (isDisabled)
+            return status;
+        if (status === "error")
+            return status;
+        if (isFocused)
+            return "active";
+        return status;
+    }, [status, isDisabled, isFocused]);
     const hoverBorderColor = useMemo(() => {
-        if (disabled || status === "active") {
+        if (isDisabled) {
+            return borderColor;
+        }
+        if (status === "error") {
+            return borderColor;
+        }
+        if (isFocused || status === "active") {
+            return "var(--border-primary)";
+        }
+        if (status === "hover") {
             return borderColor;
         }
         return isHovered ? "var(--border-neutral-primary)" : borderColor;
-    }, [disabled, status, isHovered, borderColor]);
+    }, [isDisabled, status, isHovered, isFocused, borderColor]);
     const containerStylesWithHover = useMemo(() => {
         return {
             ...inputContainerStyles,
             border: `var(--border-width-25) solid ${hoverBorderColor}`,
+            ...(isFocused && !isDisabled && status !== "error" ? {
+                boxShadow: `0 0 0 2px rgba(5, 109, 255, 0.2)`,
+            } : {}),
         };
-    }, [inputContainerStyles, hoverBorderColor]);
+    }, [inputContainerStyles, hoverBorderColor, isFocused, isDisabled, status]);
     if (iconOnly) {
-        return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-100)", width: "100%" }, children: _jsxs("div", { style: containerStylesWithHover, onMouseEnter: () => !disabled && setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [placeholderIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", display: "flex", alignItems: "center", justifyContent: "center" }, children: placeholderIcon })), startIcon && !placeholderIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", display: "flex", alignItems: "center", justifyContent: "center" }, children: startIcon }))] }) }));
+        return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-100)", width: fullWidth ? "100%" : "fit-content" }, children: _jsxs("div", { style: containerStylesWithHover, onMouseEnter: () => !isDisabled && setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [placeholderIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", display: "flex", alignItems: "center", justifyContent: "center" }, children: placeholderIcon })), startIcon && !placeholderIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", display: "flex", alignItems: "center", justifyContent: "center" }, children: startIcon }))] }) }));
     }
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-100)", width: "100%" }, children: [showLabel && label && (_jsx("label", { htmlFor: rest.id, style: labelStyles, children: label })), _jsxs("div", { style: containerStylesWithHover, onMouseEnter: () => !disabled && setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [startIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: startIcon })), placeholderIcon && !hasValue && (_jsx("div", { style: { color: iconOnly ? "var(--fg-neutral)" : "var(--fg-disabled)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: placeholderIcon })), numberPrefix && (_jsx("div", { style: prefixStyles, children: numberPrefix })), _jsx("input", { ref: ref, type: "text", value: value, placeholder: placeholder, disabled: disabled, className: className, style: { ...inputStyles, ...style }, ...rest }), endIcon && (_jsx("div", { style: { color: "var(--fg-neutral-tertiary)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: endIcon }))] }), showError && (_jsxs("div", { style: errorContainerStyles, children: [_jsx("div", { style: { ...errorIconStyles, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(AlertTriangleErrorIcon, { size: 16 }) }), _jsx("p", { style: errorMessageStyles, children: errorMessage })] }))] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-100)", width: fullWidth ? "100%" : "fit-content" }, children: [showLabel && label && (_jsx("label", { htmlFor: rest.id, style: labelStyles, children: label })), _jsxs("div", { style: containerStylesWithHover, onMouseEnter: () => !isDisabled && setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [startIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: startIcon })), placeholderIcon && !hasValue && (_jsx("div", { style: { color: iconOnly ? "var(--fg-neutral)" : "var(--fg-disabled)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: placeholderIcon })), numberPrefix && (_jsx("div", { style: prefixStyles, children: numberPrefix })), _jsx("input", { ref: ref, type: "text", value: value, placeholder: placeholder, disabled: isDisabled, readOnly: value != null && !rest.onChange, className: className, style: { ...inputStyles, ...style }, onFocus: handleFocus, onBlur: handleBlur, ...rest }), _jsx("style", { children: `
+            input[type="text"]::placeholder {
+              color: var(--fg-disabled) !important;
+              opacity: 1;
+            }
+            input[type="text"]:disabled::placeholder {
+              color: var(--fg-disabled) !important;
+              opacity: 1;
+            }
+            input[type="text"]:not(:placeholder-shown) {
+              color: var(--fg-neutral) !important;
+            }
+            input[type="text"]:disabled:not(:placeholder-shown) {
+              color: var(--fg-disabled) !important;
+            }
+            input[type="text"]:placeholder-shown:not(:disabled) {
+              color: transparent !important;
+            }
+            input[type="text"]:not(:disabled) {
+              caret-color: var(--fg-primary) !important;
+            }
+            input[type="text"]:disabled {
+              caret-color: var(--fg-disabled) !important;
+            }
+          ` }), (endIcon || hasValue) && (_jsx("div", { onClick: !endIcon && hasValue && rest.onChange ? handleClear : undefined, style: {
+                            color: "var(--fg-neutral-tertiary)",
+                            flexShrink: 0,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            cursor: !endIcon && hasValue && rest.onChange ? "pointer" : "default",
+                            transition: "color 0.15s ease, transform 0.15s ease",
+                        }, onMouseEnter: (e) => {
+                            if (!endIcon && hasValue && rest.onChange) {
+                                e.currentTarget.style.color = "var(--fg-neutral)";
+                                e.currentTarget.style.transform = "scale(1.1)";
+                            }
+                        }, onMouseLeave: (e) => {
+                            if (!endIcon && hasValue && rest.onChange) {
+                                e.currentTarget.style.color = "var(--fg-neutral-tertiary)";
+                                e.currentTarget.style.transform = "scale(1)";
+                            }
+                        }, children: endIcon || _jsx(CloseIcon, { size: sizeConfig.iconSize }) }))] }), status === "error" && (_jsxs("div", { style: errorContainerStyles, children: [_jsx("div", { style: { ...errorIconStyles, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(AlertTriangleErrorIcon, { size: 16 }) }), _jsx("p", { style: errorMessageStyles, children: errorMessage })] }))] }));
 }

package/dist/components/Select.d.ts

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithoutRef } from "react";
+import type { CornerRadiusStep } from "./Button";
+export type SelectSize = "sm" | "md" | "lg" | "xl";
+export type SelectStatus = "default" | "hover" | "active" | "disabled";
+export interface SelectOption {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+export interface SelectProps extends Omit<ComponentPropsWithoutRef<"button">, "size" | "onClick" | "onSelect"> {
+    label?: string;
+    size?: SelectSize;
+    status?: SelectStatus;
+    showLabel?: boolean;
+    showStartIcon?: boolean;
+    showEndIcon?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    selectedValue?: string;
+    options?: SelectOption[];
+    onSelect?: (value: string) => void;
+    fullWidth?: boolean;
+    cornerRadius?: CornerRadiusStep;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare function Select({ label, size, status: statusProp, showLabel, showStartIcon, showEndIcon, startIcon, endIcon, selectedValue, options, onSelect, fullWidth, cornerRadius, className, style, id, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA+C,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGrG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEvE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAWD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAmED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,IAAW,EACX,MAAM,EAAE,UAAU,EAClB,SAAgB,EAChB,aAAoB,EACpB,WAAkB,EAClB,SAAS,EACT,OAAO,EACP,aAAa,EACb,OAAY,EACZ,QAAQ,EACR,SAAgB,EAChB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,EAAE,EACF,GAAG,IAAI,EACR,EAAE,WAAW,2CA4Tb"}

package/dist/components/Select.js

@@ -0,0 +1,276 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useState, useRef, useEffect, useId } from "react";
+import { useThemeSafe } from "../providers/ThemeProvider";
+import { ChevronDownIcon, CheckIcon, UserPersonIcon } from "../icons";
+const CORNER_RADIUS_MAP = {
+    0: "var(--corner-radius-none)",
+    1: "var(--corner-radius-100)",
+    2: "var(--corner-radius-200)",
+    3: "var(--corner-radius-300)",
+    4: "var(--corner-radius-400)",
+    5: "var(--corner-radius-full)",
+};
+const SIZE_CONFIG = {
+    sm: {
+        height: "28px",
+        iconSize: 16,
+        fontSize: "var(--fonts-body-small-text-size)",
+        lineHeight: "var(--fonts-body-small-line-height)",
+        labelFontSize: "var(--fonts-body-extra-small-text-size)",
+        labelLineHeight: "var(--fonts-body-extra-small-line-height)",
+        paddingX: "var(--spacing-200)",
+        paddingY: "var(--spacing-100)",
+        borderRadius: "var(--corner-radius-100)",
+        gap: "var(--spacing-100)",
+    },
+    md: {
+        height: "36px",
+        iconSize: 16,
+        fontSize: "var(--fonts-body-small-text-size)",
+        lineHeight: "var(--fonts-body-small-line-height)",
+        labelFontSize: "var(--fonts-body-small-text-size)",
+        labelLineHeight: "var(--fonts-body-small-line-height)",
+        paddingX: "var(--spacing-300)",
+        paddingY: "var(--spacing-200)",
+        borderRadius: "var(--corner-radius-100)",
+        gap: "var(--spacing-100)",
+    },
+    lg: {
+        height: "48px",
+        iconSize: "sm",
+        fontSize: "var(--fonts-body-regular-text-size)",
+        lineHeight: "var(--fonts-body-regular-line-height)",
+        labelFontSize: "var(--fonts-body-regular-text-size)",
+        labelLineHeight: "var(--fonts-body-regular-line-height)",
+        paddingX: "var(--spacing-400)",
+        paddingY: "var(--spacing-300)",
+        borderRadius: "var(--corner-radius-100)",
+        gap: "var(--spacing-200)",
+    },
+    xl: {
+        height: "56px",
+        iconSize: "rg",
+        fontSize: "var(--fonts-body-regular-text-size)",
+        lineHeight: "var(--fonts-body-regular-line-height)",
+        labelFontSize: "var(--fonts-body-regular-text-size)",
+        labelLineHeight: "var(--fonts-body-regular-line-height)",
+        paddingX: "var(--spacing-450)",
+        paddingY: "var(--spacing-400)",
+        borderRadius: "var(--corner-radius-200)",
+        gap: "var(--spacing-200)",
+    },
+};
+export function Select({ label, size = "md", status: statusProp, showLabel = true, showStartIcon = true, showEndIcon = true, startIcon, endIcon, selectedValue, options = [], onSelect, fullWidth = true, cornerRadius, className, style, id, ...rest }) {
+    useThemeSafe();
+    const sizeConfig = SIZE_CONFIG[size];
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalStatus, setInternalStatus] = useState("default");
+    const [hoveredOptionIndex, setHoveredOptionIndex] = useState(null);
+    const selectRef = useRef(null);
+    // Use controlled status if provided, otherwise use internal state
+    const status = statusProp ?? (isOpen ? "active" : internalStatus);
+    const selectedOption = useMemo(() => {
+        return options.find((opt) => opt.value === selectedValue);
+    }, [options, selectedValue]);
+    const displayText = selectedOption?.label || "Selected Item";
+    const borderColor = useMemo(() => {
+        if (status === "disabled") {
+            return "var(--border-disabled)";
+        }
+        if (status === "active") {
+            return "var(--border-primary)";
+        }
+        if (status === "hover") {
+            return "var(--border-neutral-primary)";
+        }
+        return "var(--border-strong-200)";
+    }, [status]);
+    const containerStyles = useMemo(() => {
+        const borderRadius = cornerRadius !== undefined
+            ? CORNER_RADIUS_MAP[cornerRadius]
+            : sizeConfig.borderRadius;
+        return {
+            display: "flex",
+            alignItems: "center",
+            border: `var(--border-width-25) solid ${borderColor}`,
+            backgroundColor: "var(--bg-page-primary)",
+            borderRadius,
+            gap: sizeConfig.gap,
+            paddingLeft: sizeConfig.paddingX,
+            paddingRight: sizeConfig.paddingX,
+            paddingTop: sizeConfig.paddingY,
+            paddingBottom: sizeConfig.paddingY,
+            width: fullWidth ? "100%" : "fit-content",
+            height: sizeConfig.height,
+            cursor: status === "disabled" ? "not-allowed" : "pointer",
+            transition: "border-color 0.15s ease",
+            opacity: status === "disabled" ? 0.6 : 1,
+        };
+    }, [sizeConfig, borderColor, fullWidth, cornerRadius]);
+    const labelStyles = useMemo(() => {
+        return {
+            fontSize: sizeConfig.labelFontSize,
+            lineHeight: sizeConfig.labelLineHeight,
+            fontFamily: "var(--font-secondary)",
+            color: status === "disabled" ? "var(--fg-disabled)" : "var(--fg-neutral)",
+        };
+    }, [sizeConfig, status]);
+    const textStyles = useMemo(() => {
+        return {
+            fontSize: sizeConfig.fontSize,
+            lineHeight: sizeConfig.lineHeight,
+            fontFamily: "var(--font-secondary)",
+            color: status === "disabled" ? "var(--fg-disabled)" : "var(--fg-neutral-secondary)",
+            flex: "1 0 0",
+            minWidth: 0,
+            textAlign: "left",
+        };
+    }, [sizeConfig, status]);
+    const handleClick = () => {
+        if (status === "disabled")
+            return;
+        if (!statusProp) {
+            setIsOpen(!isOpen);
+        }
+    };
+    const handleOptionClick = (value) => {
+        onSelect?.(value);
+        if (!statusProp) {
+            setIsOpen(false);
+            setInternalStatus("default");
+        }
+    };
+    const handleMouseEnter = () => {
+        if (status === "disabled")
+            return;
+        if (!statusProp && !isOpen) {
+            setInternalStatus("hover");
+        }
+    };
+    const handleMouseLeave = () => {
+        if (!statusProp && !isOpen) {
+            setInternalStatus("default");
+        }
+    };
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (selectRef.current && !selectRef.current.contains(event.target)) {
+                if (!statusProp) {
+                    setIsOpen(false);
+                    setInternalStatus("default");
+                }
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen, statusProp]);
+    const dropdownStyles = useMemo(() => {
+        if (!isOpen && status !== "active")
+            return { display: "none" };
+        const baseStyles = {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            width: "100%",
+            marginTop: "var(--spacing-100)",
+            display: "flex",
+            flexDirection: "column",
+            backgroundColor: "var(--bg-page-primary)",
+            border: "var(--border-width-25) solid var(--border-strong-100)",
+            borderRadius: cornerRadius !== undefined
+                ? CORNER_RADIUS_MAP[cornerRadius]
+                : sizeConfig.borderRadius,
+            overflow: "hidden",
+            zIndex: 1000,
+        };
+        return baseStyles;
+    }, [isOpen, status, sizeConfig, cornerRadius]);
+    const getOptionStyles = (isSelected, isHovered, isLast, isFirst) => {
+        const borderRadius = cornerRadius !== undefined
+            ? CORNER_RADIUS_MAP[cornerRadius]
+            : sizeConfig.borderRadius;
+        const baseStyles = {
+            display: "flex",
+            alignItems: "center",
+            gap: size === "sm" || size === "md" ? "var(--spacing-100)" : "var(--spacing-200)",
+            padding: size === "sm" || size === "md" ? "var(--spacing-200)" : "var(--spacing-200) var(--spacing-200) var(--spacing-300) var(--spacing-200)",
+            cursor: "pointer",
+            border: "none",
+            borderTop: isFirst ? "var(--border-width-25) solid var(--border-strong-100)" : "none",
+            borderLeft: "var(--border-width-25) solid var(--border-strong-100)",
+            borderRight: "var(--border-width-25) solid var(--border-strong-100)",
+            borderBottom: isLast ? "var(--border-width-25) solid var(--border-strong-100)" : "var(--border-width-25) solid var(--border-strong-100)",
+            borderTopLeftRadius: isFirst ? borderRadius : 0,
+            borderTopRightRadius: isFirst ? borderRadius : 0,
+            borderBottomLeftRadius: isLast ? borderRadius : 0,
+            borderBottomRightRadius: isLast ? borderRadius : 0,
+            backgroundColor: isSelected ? "var(--bg-primary-tonal)" : "var(--bg-page-primary)",
+            color: isSelected ? "var(--fg-primary-on-tonal)" : "var(--fg-neutral-tertiary)",
+            fontFamily: "var(--font-secondary)",
+            fontSize: size === "sm" || size === "md" ? "var(--body-extra-small-text-size)" : size === "lg" ? "var(--body-small-text-size)" : "var(--body-regular-text-size)",
+            lineHeight: size === "sm" || size === "md" ? "var(--body-extra-small-line-height)" : size === "lg" ? "var(--body-small-line-height)" : "var(--body-regular-line-height)",
+            transition: "background-color 0.15s ease, color 0.15s ease",
+        };
+        if (isHovered && !isSelected) {
+            baseStyles.backgroundColor = "var(--bg-page-secondary)";
+        }
+        return baseStyles;
+    };
+    const generatedId = useId();
+    const selectId = id || generatedId;
+    return (_jsxs("div", { ref: selectRef, style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "var(--spacing-100)",
+            width: fullWidth ? "100%" : "fit-content",
+            position: "relative",
+        }, children: [showLabel && label && (_jsx("label", { htmlFor: selectId, style: labelStyles, children: label })), _jsxs("button", { id: selectId, type: "button", onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { ...containerStyles, ...style }, className: className, "aria-expanded": isOpen || status === "active", "aria-haspopup": "listbox", "aria-disabled": status === "disabled", "aria-labelledby": showLabel && label ? undefined : undefined, disabled: status === "disabled", ...rest, children: [showStartIcon && (_jsx("div", { style: {
+                            color: status === "disabled" ? "var(--fg-disabled)" : "var(--fg-neutral)",
+                            flexShrink: 0,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }, children: startIcon ? (React.isValidElement(startIcon)
+                            ? React.cloneElement(startIcon, { size: sizeConfig.iconSize })
+                            : startIcon) : (_jsx(UserPersonIcon, { size: sizeConfig.iconSize })) })), _jsx("span", { style: textStyles, children: displayText }), showEndIcon && (_jsx("div", { style: {
+                            color: status === "disabled" ? "var(--fg-disabled)" : "var(--fg-neutral-tertiary)",
+                            flexShrink: 0,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            transform: isOpen || status === "active" ? "rotate(180deg)" : "rotate(0deg)",
+                            transition: "transform 0.15s ease",
+                        }, children: endIcon ? (React.isValidElement(endIcon)
+                            ? React.cloneElement(endIcon, { size: sizeConfig.iconSize })
+                            : endIcon) : (_jsx(ChevronDownIcon, { size: sizeConfig.iconSize })) }))] }), (isOpen || status === "active") && status !== "disabled" && options.length > 0 && (_jsx("div", { style: dropdownStyles, role: "listbox", children: options.map((option, index) => {
+                    const isSelected = option.value === selectedValue;
+                    const isHovered = hoveredOptionIndex === index;
+                    const isLast = index === options.length - 1;
+                    const isFirst = index === 0;
+                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, style: getOptionStyles(isSelected, isHovered, isLast, isFirst), onClick: () => handleOptionClick(option.value), onMouseEnter: () => setHoveredOptionIndex(index), onMouseLeave: () => setHoveredOptionIndex(null), children: [option.icon && (_jsx("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    ...(typeof sizeConfig.iconSize === "number"
+                                        ? { width: `${sizeConfig.iconSize}px`, height: `${sizeConfig.iconSize}px` }
+                                        : { width: `var(--icon-size-${sizeConfig.iconSize})`, height: `var(--icon-size-${sizeConfig.iconSize})` }),
+                                    flexShrink: 0,
+                                    color: isSelected ? "var(--fg-primary-on-tonal)" : "var(--fg-neutral-tertiary)",
+                                }, children: option.icon })), _jsx("span", { style: { flex: "1 0 0", minWidth: 0, textAlign: "left" }, children: option.label }), isSelected && (_jsx("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    ...(typeof sizeConfig.iconSize === "number"
+                                        ? { width: `${sizeConfig.iconSize}px`, height: `${sizeConfig.iconSize}px` }
+                                        : { width: `var(--icon-size-${sizeConfig.iconSize})`, height: `var(--icon-size-${sizeConfig.iconSize})` }),
+                                    flexShrink: 0,
+                                    color: "var(--fg-primary-on-tonal)",
+                                }, children: _jsx(CheckIcon, { size: sizeConfig.iconSize }) }))] }, option.value));
+                }) }))] }));
+}

package/dist/components/Slider.d.ts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithRef } from "react";
+export type SliderStatus = "default" | "hover" | "active" | "disabled";
+export interface SliderProps extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    range?: boolean;
+    rangeValue?: [number, number];
+    onChange?: (value: number | [number, number]) => void;
+    showTooltip?: boolean;
+    showSteps?: boolean;
+    stepCount?: number;
+    stepLabels?: string[];
+    showLabel?: boolean;
+    label?: string;
+    status?: SliderStatus;
+    disabled?: boolean;
+}
+export declare function Slider({ value, min, max, step, range, rangeValue, onChange, showTooltip, showSteps, stepCount, stepLabels, showLabel, label, status: statusProp, disabled, className, style, onMouseEnter, onMouseLeave, onFocus, onBlur, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Slider.d.ts.map