beacon-ui 3.4.8 → 3.5.1

package/CHANGELOG.md

@@ -5,6 +5,34 @@ 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.5.0] - 2026-01-09
+
+### Added
+- Toast component with support for default, success, error, and warning variants
+- Toast component includes action buttons, dismiss controls, and configurable icons
+- Toast component supports border styling via `showBorder` prop
+- Tab and TabItem components for navigation and content organization
+- Tab component supports segmented control patterns with consistent styling
+
+### Changed
+- Toast component updated with improved typography (regular font size) and padding (8px vertical, 12px horizontal)
+- Toast component height now calculated dynamically from padding and line height instead of fixed height
+- Select component dropdown items now have size-specific styling:
+  - Small/Medium: 16px icons, extra-small/small font sizes, 8px/12px padding
+  - Large/XL: 20px icons, regular font size, 12px/16px padding
+- Input component iconOnly mode now maintains square dimensions (width equals height) for all size variants
+- Slider component enhanced with desktop hover preview tooltip showing value at cursor position
+- Slider component enhanced with mobile long-press preview (500ms) showing value before setting
+
+### Fixed
+- Select component dropdown items now correctly match design specifications for each size variant
+- Input component iconOnly mode now properly sizes to square dimensions matching component guidelines
+
+## [3.5.1] - 2026-01-09
+
+### Changed
+- Updated design token variables across the system
+
 ## [3.4.8] - 2026-01-08
 
 ### Added

package/dist/components/Button.js

@@ -208,7 +208,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
             }
             else if (variant === "outline") {
                 stateStyles.backgroundColor = "var(--bg-primary)";
-                stateStyles.color = "var(--fg-neutral)";
+                stateStyles.color = "var(--fg-on-action)";
                 stateStyles.borderColor = "var(--bg-primary)";
             }
             else if (variant === "link") {

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

@@ -1 +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"}
+{"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,2CA0Vb"}

package/dist/components/Select.js

@@ -187,34 +187,65 @@ export function Select({ label, size = "md", status: statusProp, showLabel = tru
                 ? CORNER_RADIUS_MAP[cornerRadius]
                 : sizeConfig.borderRadius,
             overflow: "hidden",
-            zIndex: 1000,
+            zIndex: 9999,
         };
         return baseStyles;
     }, [isOpen, status, sizeConfig, cornerRadius]);
     const getOptionStyles = (isSelected, isHovered, isLast, isFirst) => {
-        const borderRadius = cornerRadius !== undefined
-            ? CORNER_RADIUS_MAP[cornerRadius]
-            : sizeConfig.borderRadius;
+        // Border radius for dropdown items: use corner-radius-200 for lg/xl, otherwise use sizeConfig.borderRadius
+        const itemBorderRadius = (size === "lg" || size === "xl")
+            ? "var(--corner-radius-200)"
+            : (cornerRadius !== undefined ? CORNER_RADIUS_MAP[cornerRadius] : sizeConfig.borderRadius);
+        // Padding based on size
+        let padding;
+        if (size === "sm") {
+            padding = "var(--spacing-200)"; // 8px all around
+        }
+        else if (size === "md") {
+            padding = "var(--spacing-300) var(--spacing-200)"; // 12px vertical, 8px horizontal
+        }
+        else {
+            // lg and xl
+            padding = "var(--spacing-400) var(--spacing-300)"; // 16px vertical, 12px horizontal
+        }
+        // Gap based on size
+        const gap = size === "sm" ? "var(--spacing-100)" : "var(--spacing-200)";
+        // Font size and line height based on size
+        let fontSize;
+        let lineHeight;
+        if (size === "sm") {
+            fontSize = "var(--fonts-body-extra-small-text-size)";
+            lineHeight = "var(--fonts-body-extra-small-line-height)";
+        }
+        else if (size === "md") {
+            fontSize = "var(--fonts-body-small-text-size)";
+            lineHeight = "var(--fonts-body-small-line-height)";
+        }
+        else {
+            // lg and xl
+            fontSize = "var(--fonts-body-regular-text-size)";
+            lineHeight = "var(--fonts-body-regular-line-height)";
+        }
         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)",
+            gap,
+            padding,
             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,
+            borderTopLeftRadius: isFirst ? itemBorderRadius : 0,
+            borderTopRightRadius: isFirst ? itemBorderRadius : 0,
+            borderBottomLeftRadius: isLast ? itemBorderRadius : 0,
+            borderBottomRightRadius: isLast ? itemBorderRadius : 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)",
+            fontSize,
+            lineHeight,
             transition: "background-color 0.15s ease, color 0.15s ease",
         };
         if (isHovered && !isSelected) {
@@ -230,6 +261,7 @@ export function Select({ label, size = "md", status: statusProp, showLabel = tru
             gap: "var(--spacing-100)",
             width: fullWidth ? "100%" : "fit-content",
             position: "relative",
+            overflow: "visible",
         }, 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,
@@ -253,24 +285,25 @@ export function Select({ label, size = "md", status: statusProp, showLabel = tru
                     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: {
+                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, style: {
+                            ...getOptionStyles(isSelected, isHovered, isLast, isFirst),
+                            touchAction: "manipulation", // Allow touch scrolling while still enabling taps
+                        }, 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})` }),
+                                    width: size === "sm" || size === "md" ? "16px" : "20px",
+                                    height: size === "sm" || size === "md" ? "16px" : "20px",
                                     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})` }),
+                                    width: size === "sm" || size === "md" ? "16px" : "20px",
+                                    height: size === "sm" || size === "md" ? "16px" : "20px",
                                     flexShrink: 0,
                                     color: "var(--fg-primary-on-tonal)",
-                                }, children: _jsx(CheckIcon, { size: sizeConfig.iconSize }) }))] }, option.value));
+                                }, children: _jsx(CheckIcon, { size: size === "sm" || size === "md" ? 16 : 20 }) }))] }, option.value));
                 }) }))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/components/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0C,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAGtF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEvE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,wBAAgB,MAAM,CAAC,EACrB,KAAU,EACV,GAAO,EACP,GAAS,EACT,IAAQ,EACR,KAAa,EACb,UAAU,EACV,QAAQ,EACR,WAAmB,EACnB,SAAiB,EACjB,SAAc,EACd,UAAU,EACV,SAAgB,EAChB,KAAgB,EAChB,MAAM,EAAE,UAAU,EAClB,QAAgB,EAChB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,GAAG,IAAI,EACR,EAAE,WAAW,2CAocb"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/components/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqD,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAGjG,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEvE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,wBAAgB,MAAM,CAAC,EACrB,KAAU,EACV,GAAO,EACP,GAAS,EACT,IAAQ,EACR,KAAa,EACb,UAAU,EACV,QAAQ,EACR,WAAmB,EACnB,SAAiB,EACjB,SAAc,EACd,UAAU,EACV,SAAgB,EAChB,KAAgB,EAChB,MAAM,EAAE,UAAU,EAClB,QAAgB,EAChB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,GAAG,IAAI,EACR,EAAE,WAAW,2CAkrBb"}

package/dist/components/Slider.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback, useMemo, useRef } from "react";
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
 import { useThemeSafe } from "../providers/ThemeProvider";
 const TRACK_HEIGHT = 8;
 const THUMB_SIZE = 16;
@@ -10,6 +10,12 @@ export function Slider({ value = 60, min = 0, max = 100, step = 1, range = false
     const [internalStatus, setInternalStatus] = useState("default");
     const [isDragging, setIsDragging] = useState(false);
     const [activeThumb, setActiveThumb] = useState(null);
+    const [previewValue, setPreviewValue] = useState(null);
+    const [previewPosition, setPreviewPosition] = useState(null);
+    const [isLongPressing, setIsLongPressing] = useState(false);
+    const longPressTimerRef = useRef(null);
+    const touchStartPositionRef = useRef(null);
+    const isLongPressActiveRef = useRef(false);
     const trackRef = useRef(null);
     const status = statusProp ?? internalStatus;
     const isDisabled = disabled || status === "disabled";
@@ -49,6 +55,9 @@ export function Slider({ value = 60, min = 0, max = 100, step = 1, range = false
         const rawValue = min + percentage * (max - min);
         return Math.round(rawValue / step) * step;
     }, [min, max, step, value]);
+    const getValueFromTouchPosition = useCallback((clientX) => {
+        return getValueFromPosition(clientX);
+    }, [getValueFromPosition]);
     const handleTrackClick = useCallback((e) => {
         if (isDisabled)
             return;
@@ -68,12 +77,130 @@ export function Slider({ value = 60, min = 0, max = 100, step = 1, range = false
             onChange?.(newValue);
         }
     }, [isDisabled, getValueFromPosition, range, currentRangeValue, onChange]);
+    const handleTrackMouseMove = useCallback((e) => {
+        if (isDisabled || !showTooltip || isDragging)
+            return;
+        const newValue = getValueFromPosition(e.clientX);
+        const rect = trackRef.current?.getBoundingClientRect();
+        if (rect) {
+            const percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+            setPreviewValue(newValue);
+            setPreviewPosition(percentage * 100);
+        }
+    }, [isDisabled, showTooltip, isDragging, getValueFromPosition]);
+    const handleTrackMouseLeave = useCallback(() => {
+        setPreviewValue(null);
+        setPreviewPosition(null);
+    }, []);
+    const handleTrackTouchStart = useCallback((e) => {
+        if (isDisabled)
+            return;
+        const touch = e.touches[0];
+        if (!touch)
+            return;
+        touchStartPositionRef.current = touch.clientX;
+        setIsLongPressing(false);
+        // Clear any existing timer
+        if (longPressTimerRef.current) {
+            clearTimeout(longPressTimerRef.current);
+        }
+        // Set up long-press timer
+        isLongPressActiveRef.current = false;
+        longPressTimerRef.current = setTimeout(() => {
+            if (touchStartPositionRef.current !== null && showTooltip) {
+                isLongPressActiveRef.current = true;
+                setIsLongPressing(true);
+                const newValue = getValueFromTouchPosition(touchStartPositionRef.current);
+                const rect = trackRef.current?.getBoundingClientRect();
+                if (rect) {
+                    const percentage = Math.max(0, Math.min(1, (touchStartPositionRef.current - rect.left) / rect.width));
+                    setPreviewValue(newValue);
+                    setPreviewPosition(percentage * 100);
+                }
+            }
+        }, 500); // 500ms for long-press
+        // Handle immediate touch (for quick taps)
+        const handleTouchEnd = (endEvent) => {
+            const wasLongPress = isLongPressActiveRef.current;
+            if (longPressTimerRef.current) {
+                clearTimeout(longPressTimerRef.current);
+                longPressTimerRef.current = null;
+            }
+            if (wasLongPress) {
+                // Long-press was active, set the value
+                endEvent.preventDefault();
+                if (touchStartPositionRef.current !== null) {
+                    const newValue = getValueFromTouchPosition(touchStartPositionRef.current);
+                    if (range && currentRangeValue) {
+                        const [start, end] = currentRangeValue;
+                        const distToStart = Math.abs(newValue - start);
+                        const distToEnd = Math.abs(newValue - end);
+                        if (distToStart < distToEnd) {
+                            onChange?.([newValue, end]);
+                        }
+                        else {
+                            onChange?.([start, newValue]);
+                        }
+                    }
+                    else {
+                        onChange?.(newValue);
+                    }
+                }
+                setIsLongPressing(false);
+                isLongPressActiveRef.current = false;
+                setPreviewValue(null);
+                setPreviewPosition(null);
+            }
+            else {
+                // Quick tap, set value immediately
+                const endTouch = endEvent.changedTouches[0];
+                if (endTouch) {
+                    const newValue = getValueFromTouchPosition(endTouch.clientX);
+                    if (range && currentRangeValue) {
+                        const [start, end] = currentRangeValue;
+                        const distToStart = Math.abs(newValue - start);
+                        const distToEnd = Math.abs(newValue - end);
+                        if (distToStart < distToEnd) {
+                            onChange?.([newValue, end]);
+                        }
+                        else {
+                            onChange?.([start, newValue]);
+                        }
+                    }
+                    else {
+                        onChange?.(newValue);
+                    }
+                }
+            }
+            touchStartPositionRef.current = null;
+            document.removeEventListener("touchend", handleTouchEnd);
+            document.removeEventListener("touchcancel", handleTouchEnd);
+            document.removeEventListener("touchmove", handleTouchMove);
+        };
+        const handleTouchMove = (moveEvent) => {
+            // If user moves finger, cancel long-press
+            if (longPressTimerRef.current) {
+                clearTimeout(longPressTimerRef.current);
+                longPressTimerRef.current = null;
+            }
+            setIsLongPressing(false);
+            isLongPressActiveRef.current = false;
+            setPreviewValue(null);
+            setPreviewPosition(null);
+            touchStartPositionRef.current = null;
+        };
+        document.addEventListener("touchend", handleTouchEnd);
+        document.addEventListener("touchcancel", handleTouchEnd);
+        document.addEventListener("touchmove", handleTouchMove, { passive: true });
+    }, [isDisabled, showTooltip, getValueFromTouchPosition, range, currentRangeValue, onChange, isLongPressing]);
     const handleThumbMouseDown = useCallback((thumb) => (e) => {
         if (isDisabled)
             return;
         e.preventDefault();
         setIsDragging(true);
         setActiveThumb(thumb);
+        setPreviewValue(null);
+        setPreviewPosition(null);
         if (!statusProp) {
             setInternalStatus("active");
         }
@@ -106,6 +233,57 @@ export function Slider({ value = 60, min = 0, max = 100, step = 1, range = false
         document.addEventListener("mousemove", handleMouseMove);
         document.addEventListener("mouseup", handleMouseUp);
     }, [isDisabled, statusProp, getValueFromPosition, range, currentRangeValue, onChange]);
+    const handleThumbTouchStart = useCallback((thumb) => (e) => {
+        if (isDisabled)
+            return;
+        e.preventDefault();
+        setIsDragging(true);
+        setActiveThumb(thumb);
+        setPreviewValue(null);
+        setPreviewPosition(null);
+        setIsLongPressing(false);
+        isLongPressActiveRef.current = false;
+        if (longPressTimerRef.current) {
+            clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+        if (!statusProp) {
+            setInternalStatus("active");
+        }
+        const handleTouchMove = (moveEvent) => {
+            if (moveEvent.touches.length === 0)
+                return;
+            const touch = moveEvent.touches[0];
+            const newValue = getValueFromTouchPosition(touch.clientX);
+            if (range && currentRangeValue) {
+                const [start, end] = currentRangeValue;
+                if (thumb === "start") {
+                    const clampedValue = Math.min(newValue, end);
+                    onChange?.([clampedValue, end]);
+                }
+                else {
+                    const clampedValue = Math.max(newValue, start);
+                    onChange?.([start, clampedValue]);
+                }
+            }
+            else {
+                onChange?.(newValue);
+            }
+        };
+        const handleTouchEnd = () => {
+            setIsDragging(false);
+            setActiveThumb(null);
+            if (!statusProp) {
+                setInternalStatus("default");
+            }
+            document.removeEventListener("touchmove", handleTouchMove);
+            document.removeEventListener("touchend", handleTouchEnd);
+            document.removeEventListener("touchcancel", handleTouchEnd);
+        };
+        document.addEventListener("touchmove", handleTouchMove, { passive: false });
+        document.addEventListener("touchend", handleTouchEnd);
+        document.addEventListener("touchcancel", handleTouchEnd);
+    }, [isDisabled, statusProp, getValueFromTouchPosition, range, currentRangeValue, onChange]);
     const startPercentage = useMemo(() => {
         return ((startValue - min) / (max - min)) * 100;
     }, [startValue, min, max]);
@@ -230,6 +408,14 @@ export function Slider({ value = 60, min = 0, max = 100, step = 1, range = false
         }
         return String(val);
     }, [stepLabels, min, step]);
+    // Cleanup long-press timer on unmount
+    useEffect(() => {
+        return () => {
+            if (longPressTimerRef.current) {
+                clearTimeout(longPressTimerRef.current);
+            }
+        };
+    }, []);
     const { id, ...restProps } = rest;
     return (_jsxs("div", { className: className, style: {
             display: "flex",
@@ -243,7 +429,21 @@ export function Slider({ value = 60, min = 0, max = 100, step = 1, range = false
                     paddingBottom: "2px",
                     height: "8px",
                     overflow: "visible",
-                }, onClick: handleTrackClick, children: _jsxs("div", { style: trackStyles, children: [_jsx("div", { style: selectionStyles }), showSteps && (_jsx("div", { style: {
+                    touchAction: "none", // Prevent default touch behaviors for better dragging
+                }, onClick: handleTrackClick, onTouchStart: handleTrackTouchStart, onMouseMove: handleTrackMouseMove, onMouseLeave: handleTrackMouseLeave, children: _jsxs("div", { style: trackStyles, children: [_jsx("div", { style: selectionStyles }), showTooltip && previewValue !== null && previewPosition !== null && !isDragging && (_jsxs("div", { style: {
+                                ...tooltipStyles,
+                                left: `${previewPosition}%`,
+                            }, children: [_jsx("p", { style: { margin: 0, textAlign: "center" }, children: getTooltipText(previewValue) }), _jsx("div", { style: {
+                                        position: "absolute",
+                                        bottom: "-6px",
+                                        left: "50%",
+                                        transform: "translateX(-50%)",
+                                        width: 0,
+                                        height: 0,
+                                        borderLeft: "6px solid transparent",
+                                        borderRight: "6px solid transparent",
+                                        borderTop: "6px solid var(--bg-page-tertiary)",
+                                    } })] })), showSteps && (_jsx("div", { style: {
                                 position: "absolute",
                                 top: 0,
                                 left: 0,
@@ -268,7 +468,8 @@ export function Slider({ value = 60, min = 0, max = 100, step = 1, range = false
                             }) })), range ? (_jsxs(_Fragment, { children: [_jsx("div", { role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": startValue, "aria-valuetext": getTooltipText(startValue), "aria-labelledby": id ? `${id}-label` : undefined, "aria-label": id ? undefined : `${restProps["aria-label"] || label} start`, tabIndex: isDisabled ? -1 : 0, style: {
                                         ...thumbStyles,
                                         left: `${startPercentage}%`,
-                                    }, onMouseDown: handleThumbMouseDown("start"), children: showTooltip && (status === "active" || status === "hover") && (_jsxs("div", { style: { ...tooltipStyles, left: "50%" }, children: [_jsx("p", { style: { margin: 0, textAlign: "center" }, children: getTooltipText(startValue) }), _jsx("div", { style: {
+                                        touchAction: "none", // Prevent default touch behaviors for better dragging
+                                    }, onMouseDown: handleThumbMouseDown("start"), onTouchStart: handleThumbTouchStart("start"), children: showTooltip && (status === "active" || status === "hover") && (_jsxs("div", { style: { ...tooltipStyles, left: "50%" }, children: [_jsx("p", { style: { margin: 0, textAlign: "center" }, children: getTooltipText(startValue) }), _jsx("div", { style: {
                                                     position: "absolute",
                                                     bottom: "-6px",
                                                     left: "50%",
@@ -281,7 +482,8 @@ export function Slider({ value = 60, min = 0, max = 100, step = 1, range = false
                                                 } })] })) }), _jsx("div", { role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": endValue, "aria-valuetext": getTooltipText(endValue), "aria-labelledby": id ? `${id}-label` : undefined, "aria-label": id ? undefined : `${restProps["aria-label"] || label} end`, tabIndex: isDisabled ? -1 : 0, style: {
                                         ...thumbStyles,
                                         left: `${endPercentage}%`,
-                                    }, onMouseDown: handleThumbMouseDown("end"), children: showTooltip && (status === "active" || status === "hover") && (_jsxs("div", { style: { ...tooltipStyles, left: "50%" }, children: [_jsx("p", { style: { margin: 0, textAlign: "center" }, children: getTooltipText(endValue) }), _jsx("div", { style: {
+                                        touchAction: "none", // Prevent default touch behaviors for better dragging
+                                    }, onMouseDown: handleThumbMouseDown("end"), onTouchStart: handleThumbTouchStart("end"), children: showTooltip && (status === "active" || status === "hover") && (_jsxs("div", { style: { ...tooltipStyles, left: "50%" }, children: [_jsx("p", { style: { margin: 0, textAlign: "center" }, children: getTooltipText(endValue) }), _jsx("div", { style: {
                                                     position: "absolute",
                                                     bottom: "-6px",
                                                     left: "50%",
@@ -294,7 +496,8 @@ export function Slider({ value = 60, min = 0, max = 100, step = 1, range = false
                                                 } })] })) })] })) : (_jsx("div", { role: "none", "aria-hidden": "true", tabIndex: -1, style: {
                                 ...thumbStyles,
                                 left: `${startPercentage}%`,
-                            }, onMouseDown: handleThumbMouseDown("end"), children: showTooltip && (status === "active" || status === "hover") && (_jsxs("div", { style: { ...tooltipStyles, left: "50%" }, children: [_jsx("p", { style: { margin: 0, textAlign: "center" }, children: getTooltipText(currentSingleValue ?? 60) }), _jsx("div", { style: {
+                                touchAction: "none", // Prevent default touch behaviors for better dragging
+                            }, onMouseDown: handleThumbMouseDown("end"), onTouchStart: handleThumbTouchStart("end"), children: showTooltip && (status === "active" || status === "hover") && (_jsxs("div", { style: { ...tooltipStyles, left: "50%" }, children: [_jsx("p", { style: { margin: 0, textAlign: "center" }, children: getTooltipText(currentSingleValue ?? 60) }), _jsx("div", { style: {
                                             position: "absolute",
                                             bottom: "-6px",
                                             left: "50%",

package/dist/components/Tab.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef, ReactElement } from "react";
+import type { TabItemProps } from "./TabItem";
+export interface TabProps extends ComponentPropsWithRef<"div"> {
+    children: ReactElement<TabItemProps> | ReactElement<TabItemProps>[];
+    size?: TabItemProps["size"];
+    tabStyle?: TabItemProps["tabStyle"];
+}
+export declare function Tab({ children, size, tabStyle, className, style: inlineStyle, ...rest }: TabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/components/Tab.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,qBAAqB,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AAEnG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,WAAW,QAAS,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC5D,QAAQ,EAAE,YAAY,CAAC,YAAY,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;IACpE,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CACrC;AAED,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,IAAW,EACX,QAAoB,EACpB,SAAS,EACT,KAAK,EAAE,WAAW,EAClB,GAAG,IAAI,EACR,EAAE,QAAQ,2CAgCV"}

package/dist/components/Tab.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, cloneElement, isValidElement } from "react";
+import { useThemeSafe } from "../providers/ThemeProvider";
+export function Tab({ children, size = "sm", tabStyle = "default", className, style: inlineStyle, ...rest }) {
+    useThemeSafe();
+    const containerStyles = useMemo(() => {
+        return {
+            display: "inline-flex",
+            gap: 0,
+            backgroundColor: "var(--bg-page-primary)",
+            border: "var(--border-width-25) solid var(--border-strong-200)",
+            borderRadius: tabStyle === "pill" ? "var(--corner-radius-200)" : "var(--corner-radius-200)",
+            padding: "2px",
+            overflow: "hidden",
+            ...inlineStyle,
+        };
+    }, [tabStyle, inlineStyle]);
+    const childrenArray = Array.isArray(children) ? children : [children];
+    return (_jsx("div", { className: className, style: containerStyles, role: "tablist", ...rest, children: childrenArray.map((child, index) => {
+            if (isValidElement(child)) {
+                return cloneElement(child, {
+                    key: child.key || index,
+                    size: child.props.size ?? size,
+                    tabStyle: child.props.tabStyle ?? tabStyle,
+                });
+            }
+            return child;
+        }) }));
+}

package/dist/components/TabItem.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithRef } from "react";
+export type TabItemState = "default" | "active" | "hover" | "disabled";
+export type TabItemSize = "sm" | "md";
+export type TabItemStyle = "default" | "pill";
+export interface TabItemProps extends Omit<ComponentPropsWithRef<"button">, "onClick"> {
+    tabName?: string;
+    state?: TabItemState;
+    size?: TabItemSize;
+    tabStyle?: TabItemStyle;
+    onClick?: () => void;
+}
+export declare function TabItem({ tabName, state: stateProp, size, tabStyle, onClick, className, style: inlineStyle, disabled, onMouseEnter, onMouseLeave, ...rest }: TabItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TabItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabItem.d.ts","sourceRoot":"","sources":["../../src/components/TabItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAGjE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AACvE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACpF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAyBD,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,IAAW,EACX,QAAoB,EACpB,OAAO,EACP,SAAS,EACT,KAAK,EAAE,WAAW,EAClB,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,YAAY,2CAgEd"}

package/dist/components/TabItem.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useThemeSafe } from "../providers/ThemeProvider";
+const SIZE_CONFIG = {
+    sm: {
+        fontSize: "var(--fonts-body-small-text-size)",
+        lineHeight: "var(--fonts-body-small-line-height)",
+        paddingY: "var(--spacing-100)",
+        paddingX: "var(--spacing-200)",
+    },
+    md: {
+        fontSize: "var(--fonts-body-regular-text-size)",
+        lineHeight: "var(--fonts-body-regular-line-height)",
+        paddingY: "var(--spacing-200)",
+        paddingX: "var(--spacing-300)",
+    },
+};
+export function TabItem({ tabName, state: stateProp, size = "sm", tabStyle = "default", onClick, className, style: inlineStyle, disabled, onMouseEnter, onMouseLeave, ...rest }) {
+    useThemeSafe();
+    const [internalHover, setInternalHover] = useState(false);
+    const sizeConfig = SIZE_CONFIG[size];
+    const isDisabled = disabled || stateProp === "disabled";
+    const isActive = stateProp === "active";
+    const isHovered = stateProp === "hover" || (internalHover && !stateProp && !isDisabled && !isActive);
+    const effectiveState = stateProp ?? (isHovered ? "hover" : "default");
+    const buttonStyles = useMemo(() => {
+        const baseStyles = {
+            flex: "1",
+            padding: `${sizeConfig.paddingY} ${sizeConfig.paddingX}`,
+            border: "none",
+            backgroundColor: "transparent",
+            color: isDisabled ? "var(--fg-disabled)" : isActive ? "var(--fg-primary-on-tonal)" : "var(--fg-neutral)",
+            fontFamily: "var(--font-secondary)",
+            fontSize: sizeConfig.fontSize,
+            lineHeight: sizeConfig.lineHeight,
+            fontWeight: "var(--font-weight-secondary-medium)",
+            cursor: isDisabled ? "not-allowed" : "pointer",
+            transition: "background-color 0.15s ease, color 0.15s ease",
+            borderRadius: tabStyle === "pill" ? "var(--corner-radius-100)" : "0",
+            whiteSpace: "nowrap",
+            ...inlineStyle,
+        };
+        if (isActive) {
+            baseStyles.backgroundColor = "var(--bg-primary-tonal)";
+        }
+        else if (isHovered) {
+            baseStyles.backgroundColor = "var(--bg-page-secondary)";
+        }
+        return baseStyles;
+    }, [sizeConfig, isDisabled, isActive, isHovered, tabStyle, inlineStyle]);
+    const handleMouseEnter = (e) => {
+        if (!isDisabled && !stateProp) {
+            setInternalHover(true);
+        }
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!stateProp) {
+            setInternalHover(false);
+        }
+        onMouseLeave?.(e);
+    };
+    return (_jsx("button", { type: "button", onClick: onClick, disabled: isDisabled, className: className, style: buttonStyles, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest, children: tabName }));
+}

package/dist/components/Toast.d.ts

@@ -0,0 +1,54 @@
+import { type ComponentPropsWithRef } from "react";
+export type ToastVariant = "default" | "success" | "error" | "warning";
+export interface ToastProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Visual tone of the toast.
+     */
+    variant?: ToastVariant;
+    /**
+     * Primary message content.
+     */
+    message?: React.ReactNode;
+    /**
+     * Optional action label (e.g. "Undo").
+     */
+    actionLabel?: string;
+    /**
+     * Called when the action is clicked.
+     */
+    onAction?: () => void;
+    /**
+     * Toggle visibility of the action chip.
+     */
+    showAction?: boolean;
+    /**
+     * Show the dismiss control.
+     */
+    dismissible?: boolean;
+    /**
+     * Called when the close control is clicked.
+     */
+    onDismiss?: () => void;
+    /**
+     * Override the default leading icon.
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Hide the leading icon.
+     */
+    showIcon?: boolean;
+    /**
+     * Override the default close icon.
+     */
+    closeIcon?: React.ReactNode;
+    /**
+     * Stretch to the parent's width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Show border around the toast.
+     */
+    showBorder?: boolean;
+}
+export declare function Toast({ variant, message, actionLabel, onAction, showAction, dismissible, onDismiss, leadingIcon, showIcon, closeIcon, fullWidth, showBorder, className, style, role, ...rest }: ToastProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/components/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAI5D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvE,MAAM,WAAW,UAAW,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC9D;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA8CD,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,OAAsB,EACtB,WAAoB,EACpB,QAAQ,EACR,UAAiB,EACjB,WAAkB,EAClB,SAAS,EACT,WAAW,EACX,QAAe,EACf,SAAS,EACT,SAAiB,EACjB,UAAkB,EAClB,SAAS,EACT,KAAK,EACL,IAAe,EACf,GAAG,IAAI,EACR,EAAE,UAAU,2CA4HZ"}

package/dist/components/Toast.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useThemeSafe } from "../providers/ThemeProvider";
+import { CircleErrorIcon, CloseIcon } from "../icons";
+const VARIANT_CONFIG = {
+    default: {
+        background: "var(--bg-page-secondary)",
+        text: "var(--fg-neutral)",
+        iconColor: "var(--fg-neutral-tertiary)",
+        actionColor: "var(--fg-primary)",
+        closeColor: "var(--fg-neutral-tertiary)",
+        icon: _jsx(CircleErrorIcon, { size: 20 }),
+    },
+    success: {
+        background: "var(--bg-success)",
+        text: "var(--fg-on-action)",
+        iconColor: "var(--fg-on-action)",
+        actionColor: "var(--fg-on-action)",
+        closeColor: "var(--fg-on-action)",
+        icon: _jsx(CircleErrorIcon, { size: 20 }),
+    },
+    error: {
+        background: "var(--bg-critical)",
+        text: "var(--fg-on-action)",
+        iconColor: "var(--fg-on-action)",
+        actionColor: "var(--fg-on-action)",
+        closeColor: "var(--fg-on-action)",
+        icon: _jsx(CircleErrorIcon, { size: 20 }),
+    },
+    warning: {
+        background: "var(--bg-warning)",
+        text: "var(--fg-on-action)",
+        iconColor: "var(--fg-on-action)",
+        actionColor: "var(--fg-on-action)",
+        closeColor: "var(--fg-on-action)",
+        icon: _jsx(CircleErrorIcon, { size: 20 }),
+    },
+};
+export function Toast({ variant = "default", message = "Toast Info", actionLabel = "Undo", onAction, showAction = true, dismissible = true, onDismiss, leadingIcon, showIcon = true, closeIcon, fullWidth = false, showBorder = false, className, style, role = "status", ...rest }) {
+    useThemeSafe();
+    const config = VARIANT_CONFIG[variant];
+    const containerStyles = useMemo(() => {
+        const baseStyles = {
+            display: "flex",
+            alignItems: "center",
+            gap: "var(--spacing-200)",
+            padding: "var(--spacing-200) var(--spacing-300)",
+            borderRadius: "var(--corner-radius-200)",
+            boxShadow: "var(--drop-shadow-200)",
+            backgroundColor: config.background,
+            color: config.text,
+            width: fullWidth ? "100%" : "300px",
+            ...style,
+        };
+        if (showBorder) {
+            baseStyles.border = "var(--border-width-25) solid var(--border-strong-200)";
+        }
+        return baseStyles;
+    }, [config.background, config.text, fullWidth, showBorder, style]);
+    const messageStyles = useMemo(() => {
+        return {
+            flex: "1 1 0%",
+            minWidth: 0,
+            fontFamily: "var(--font-secondary)",
+            fontSize: "var(--fonts-body-regular-text-size)",
+            lineHeight: "var(--fonts-body-regular-line-height)",
+            fontWeight: "var(--font-weight-secondary-regular)",
+            color: config.text,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        };
+    }, [config.text]);
+    const actionStyles = useMemo(() => {
+        return {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "var(--spacing-100)",
+            padding: "var(--spacing-100) var(--spacing-200)",
+            borderRadius: "var(--corner-radius-100)",
+            border: "none",
+            backgroundColor: "transparent",
+            color: config.actionColor,
+            fontFamily: "var(--font-secondary)",
+            fontSize: "var(--body-small-text-size)",
+            lineHeight: "var(--body-small-line-height)",
+            fontWeight: "var(--font-weight-secondary-medium)",
+            cursor: onAction ? "pointer" : "default",
+            transition: "opacity 0.15s ease",
+        };
+    }, [config.actionColor, onAction]);
+    const iconNode = showIcon ? leadingIcon ?? config.icon : null;
+    return (_jsxs("div", { role: role, "aria-live": role === "alert" ? "assertive" : "polite", className: className, style: containerStyles, ...rest, children: [iconNode && (_jsx("span", { style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "20px",
+                    height: "20px",
+                    flexShrink: 0,
+                    color: config.iconColor,
+                }, children: iconNode })), _jsx("span", { style: messageStyles, children: message }), showAction && actionLabel && (_jsx("button", { type: "button", onClick: onAction, style: actionStyles, "aria-label": actionLabel, children: actionLabel })), dismissible && (_jsx("button", { type: "button", onClick: onDismiss, style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "20px",
+                    height: "20px",
+                    borderRadius: "var(--corner-radius-100)",
+                    border: "none",
+                    backgroundColor: "transparent",
+                    color: config.closeColor,
+                    cursor: onDismiss ? "pointer" : "default",
+                    flexShrink: 0,
+                }, "aria-label": "Dismiss notification", children: closeIcon ?? _jsx(CloseIcon, { size: 20 }) }))] }));
+}

package/dist/index.d.ts

@@ -11,6 +11,9 @@ export { Menu, type MenuItem as MenuItemData } from "./components/Menu";
 export { MenuItem, type MenuItemProps, type MenuItemState } from "./components/MenuItem";
 export { RadioButton } from "./components/RadioButton";
 export { Slider } from "./components/Slider";
+export { Toast } from "./components/Toast";
+export { Tab } from "./components/Tab";
+export { TabItem } from "./components/TabItem";
 export type { ButtonProps, ButtonVariant, ButtonSize, CornerRadiusStep, JustifyContent, ButtonState, ButtonColor } from "./components/Button";
 export type { ButtonIconProps } from "./components/ButtonIcon";
 export type { CardProps, CardStatus, CardShadow } from "./components/Card";
@@ -23,6 +26,9 @@ export type { ChipProps, ChipSize, ChipColor } from "./components/Chip";
 export type { MenuProps } from "./components/Menu";
 export type { RadioButtonProps, RadioButtonStatus } from "./components/RadioButton";
 export type { SliderProps, SliderStatus } from "./components/Slider";
+export type { ToastProps, ToastVariant } from "./components/Toast";
+export type { TabProps } from "./components/Tab";
+export type { TabItemProps, TabItemState, TabItemSize, TabItemStyle } from "./components/TabItem";
 export { ThemeProvider, useTheme, useThemeSafe } from "./providers/ThemeProvider";
 export type { Theme, HueVariant } from "./tokens/types";
 export type { ColorPrimitive, SemanticColor, SpacingToken, BackgroundToken, ForegroundToken, BorderToken, } from "./tokens/types";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9I,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3E,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC/F,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACpF,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9I,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3E,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC/F,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACpF,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGlG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -12,5 +12,8 @@ export { Menu } from "./components/Menu";
 export { MenuItem } from "./components/MenuItem";
 export { RadioButton } from "./components/RadioButton";
 export { Slider } from "./components/Slider";
+export { Toast } from "./components/Toast";
+export { Tab } from "./components/Tab";
+export { TabItem } from "./components/TabItem";
 // Providers
 export { ThemeProvider, useTheme, useThemeSafe } from "./providers/ThemeProvider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beacon-ui",
-  "version": "3.4.8",
+  "version": "3.5.1",
   "description": "Beacon Design System - Components and tokens",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/tokens/generated/brand-dark.css

@@ -82,6 +82,11 @@
   --util-overlay-light: var(--color-alpha-neutral-black-300);
   --util-overlay-medium: var(--color-alpha-neutral-black-500);
   --util-overlay-strong: var(--color-alpha-neutral-black-700);
+  --util-bright-alpha-100: var(--color-alpha-neutral-white-100);
+  --util-bright-alpha-200: var(--color-alpha-neutral-white-200);
+  --util-bright-alpha-300: var(--color-alpha-neutral-white-300);
+  --util-bright-alpha-400: var(--color-alpha-neutral-white-400);
+  --util-brigh-alpha-500: var(--color-alpha-neutral-white-500);
   --shadow-none: var(--color-alpha-neutral-black-0);
   --shadow-subtle: var(--color-alpha-neutral-black-100);
   --shadow-normal: var(--color-alpha-neutral-black-200);

package/tokens/generated/brand-light.css

@@ -82,6 +82,11 @@
   --util-overlay-light: var(--color-alpha-neutral-black-300);
   --util-overlay-medium: var(--color-alpha-neutral-black-500);
   --util-overlay-strong: var(--color-alpha-neutral-black-700);
+  --util-bright-alpha-100: var(--color-alpha-neutral-black-100);
+  --util-bright-alpha-200: var(--color-alpha-neutral-black-200);
+  --util-bright-alpha-300: var(--color-alpha-neutral-black-300);
+  --util-bright-alpha-400: var(--color-alpha-neutral-black-400);
+  --util-brigh-alpha-500: var(--color-alpha-neutral-black-500);
   --shadow-none: var(--color-alpha-neutral-black-0);
   --shadow-subtle: var(--color-alpha-neutral-black-100);
   --shadow-normal: var(--color-alpha-neutral-black-200);

package/tokens/generated/index.css

@@ -404,6 +404,11 @@
   --util-overlay-light: var(--color-alpha-neutral-black-300);
   --util-overlay-medium: var(--color-alpha-neutral-black-500);
   --util-overlay-strong: var(--color-alpha-neutral-black-700);
+  --util-bright-alpha-100: var(--color-alpha-neutral-black-100);
+  --util-bright-alpha-200: var(--color-alpha-neutral-black-200);
+  --util-bright-alpha-300: var(--color-alpha-neutral-black-300);
+  --util-bright-alpha-400: var(--color-alpha-neutral-black-400);
+  --util-brigh-alpha-500: var(--color-alpha-neutral-black-500);
   --shadow-none: var(--color-alpha-neutral-black-0);
   --shadow-subtle: var(--color-alpha-neutral-black-100);
   --shadow-normal: var(--color-alpha-neutral-black-200);
@@ -495,6 +500,11 @@
   --util-overlay-light: var(--color-alpha-neutral-black-300);
   --util-overlay-medium: var(--color-alpha-neutral-black-500);
   --util-overlay-strong: var(--color-alpha-neutral-black-700);
+  --util-bright-alpha-100: var(--color-alpha-neutral-white-100);
+  --util-bright-alpha-200: var(--color-alpha-neutral-white-200);
+  --util-bright-alpha-300: var(--color-alpha-neutral-white-300);
+  --util-bright-alpha-400: var(--color-alpha-neutral-white-400);
+  --util-brigh-alpha-500: var(--color-alpha-neutral-white-500);
   --shadow-none: var(--color-alpha-neutral-black-0);
   --shadow-subtle: var(--color-alpha-neutral-black-100);
   --shadow-normal: var(--color-alpha-neutral-black-200);