shared-design-system 1.11.0 → 1.13.0

package/dist/src/components/Tabs.js

@@ -1,94 +1,94 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { tokens } from '../tokens';
-export const Tabs = ({ value, onChange, items, children, variant = 'standard', columns = 4, className = '', style = {} }) => {
-    const containerStyle = {
-        display: variant === 'dashboard' ? 'grid' : 'flex',
-        gridTemplateColumns: variant === 'dashboard' ? `repeat(${columns}, 1fr)` : 'none',
-        borderBottom: variant === 'standard' ? `1px solid ${tokens.color.slate100}` : 'none',
-        gap: variant === 'dashboard' ? tokens.spacing[4] : tokens.spacing[4],
-        width: '100%',
-        overflowX: 'auto',
-        paddingBottom: variant === 'dashboard' ? tokens.spacing[2] : '0',
-        ...style
-    };
-    return (_jsx("div", { style: containerStyle, className: className, children: items ? items.map((item, index) => (_jsx(Tab, { label: item.label, value: item.value, icon: item.icon, active: item.value === value, onClick: () => onChange(item.value), variant: variant }, index))) : React.Children.map(children, child => {
-            if (!React.isValidElement(child))
-                return null;
-            return React.cloneElement(child, {
-                active: child.props.value === value,
-                onClick: () => onChange(child.props.value),
-                variant
-            });
-        }) }));
-};
-export const Tab = ({ label, value, icon, active, onClick, variant, className = '', style = {} }) => {
-    const getTabStyle = () => {
-        switch (variant) {
-            case 'dashboard':
-                return {
-                    position: 'relative',
-                    cursor: 'pointer',
-                    backgroundColor: tokens.color.white,
-                    borderRadius: tokens.radius.xl,
-                    padding: tokens.spacing[5],
-                    boxShadow: active ? tokens.shadow.md : tokens.shadow.sm,
-                    borderTop: `2px solid ${active ? tokens.color.danger : 'transparent'}`,
-                    transition: tokens.transition.normal,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: tokens.spacing[3],
-                    flex: 1,
-                    borderBottom: 'none',
-                    ...style
-                };
-            case 'pills':
-                return {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: tokens.spacing[2],
-                    padding: `${tokens.spacing[3]} ${tokens.spacing[4]}`,
-                    fontSize: tokens.font.sm,
-                    fontWeight: active ? tokens.font.weightBold : tokens.font.weightMedium,
-                    color: active ? tokens.color.primary : tokens.color.textMuted,
-                    cursor: 'pointer',
-                    transition: tokens.transition.fast,
-                    backgroundColor: active ? tokens.color.primaryLight : 'transparent',
-                    borderRadius: tokens.radius.md,
-                    whiteSpace: 'nowrap',
-                    ...style
-                };
-            case 'standard':
-            default:
-                return {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: tokens.spacing[2],
-                    padding: `${tokens.spacing[3]} ${tokens.spacing[4]}`,
-                    fontSize: tokens.font.sm,
-                    fontWeight: active ? tokens.font.weightBold : tokens.font.weightMedium,
-                    color: active ? tokens.color.primary : tokens.color.textMuted,
-                    cursor: 'pointer',
-                    borderBottom: `2px solid ${active ? tokens.color.primary : 'transparent'}`,
-                    transition: tokens.transition.fast,
-                    whiteSpace: 'nowrap',
-                    ...style
-                };
+export const Tabs = ({ value, onChange, items, children, variant = 'standard', columns = 4, className = '', style = {}, }) => {
+    const isPills = variant === 'pills';
+    const isDashboard = variant === 'dashboard';
+    const isUnderline = variant === 'underline' || variant === 'standard';
+    const containerStyle = isDashboard
+        ? {
+            display: 'grid',
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+            gap: tokens.spacing[4],
+            width: '100%',
+            ...style,
         }
-    };
-    const textStyle = {
-        fontSize: tokens.font.sm,
-        fontWeight: tokens.font.weightSemibold,
-        color: active ? tokens.color.slate800 : tokens.color.slate500,
-        transition: tokens.transition.fast,
-    };
-    const iconStyle = {
-        display: 'flex',
-        padding: tokens.spacing[2],
-        borderRadius: tokens.radius.md,
-        color: active ? tokens.color.warning : tokens.color.slate400,
-        transition: tokens.transition.fast,
-    };
-    return (_jsxs("div", { style: getTabStyle(), onClick: onClick, className: className, children: [icon && _jsx("span", { style: variant === 'dashboard' ? iconStyle : { display: 'flex' }, children: icon }), variant === 'dashboard' ? (_jsx("span", { style: textStyle, children: label })) : label] }));
+        : {
+            display: 'flex',
+            gap: isPills ? tokens.spacing[1] : tokens.spacing[2],
+            borderBottom: isUnderline ? `1.5px solid ${tokens.color.slate100}` : 'none',
+            width: '100%',
+            overflowX: 'auto',
+            padding: isPills ? tokens.spacing[1] : '0',
+            backgroundColor: isPills ? tokens.color.slate50 : 'transparent',
+            borderRadius: isPills ? tokens.radius.xl : 'none',
+            ...style,
+        };
+    return (_jsx("div", { style: containerStyle, className: `ds-tabs ds-tabs--${variant} ${className}`, role: "tablist", children: items
+            ? items.map((item, index) => (_jsx(Tab, { label: item.label, value: item.value, icon: item.icon, badge: item.badge, disabled: item.disabled, active: item.value === value, onClick: () => !item.disabled && onChange(item.value), variant: variant }, index)))
+            : React.Children.map(children, (child) => {
+                if (!React.isValidElement(child))
+                    return null;
+                return React.cloneElement(child, {
+                    active: child.props.value === value,
+                    onClick: () => !child.props.disabled && onChange(child.props.value),
+                    variant,
+                });
+            }) }));
+};
+export const Tab = ({ label, value, icon, badge, active, disabled = false, onClick, variant, className = '', style = {}, }) => {
+    const isPills = variant === 'pills';
+    const isDashboard = variant === 'dashboard';
+    if (isDashboard) {
+        return (_jsxs("div", { role: "tab", "aria-selected": active, style: {
+                position: 'relative',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                backgroundColor: tokens.color.white,
+                borderRadius: tokens.radius.xl,
+                padding: tokens.spacing[5],
+                boxShadow: active ? tokens.shadow.md : tokens.shadow.sm,
+                borderTop: `3px solid ${active ? tokens.color.primary : 'transparent'}`,
+                transition: tokens.transition.normal,
+                display: 'flex',
+                alignItems: 'center',
+                gap: tokens.spacing[3],
+                opacity: disabled ? 0.5 : 1,
+                ...style,
+            }, onClick: disabled ? undefined : onClick, className: className, children: [icon && (_jsx("span", { style: {
+                        display: 'flex',
+                        padding: tokens.spacing[2],
+                        borderRadius: tokens.radius.md,
+                        color: active ? tokens.color.primary : tokens.color.slate400,
+                        backgroundColor: active ? tokens.color.primaryLight : tokens.color.slate50,
+                        transition: tokens.transition.fast,
+                    }, children: icon })), _jsx("span", { style: {
+                        fontSize: tokens.font.sm,
+                        fontWeight: active ? tokens.font.weightBold : tokens.font.weightSemibold,
+                        color: active ? tokens.color.slate800 : tokens.color.slate500,
+                        transition: tokens.transition.fast,
+                    }, children: label }), badge && _jsx("span", { style: { marginLeft: 'auto' }, children: badge })] }));
+    }
+    // Pills & Standard/Underline
+    return (_jsxs("div", { role: "tab", "aria-selected": active, style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: tokens.spacing[2],
+            padding: isPills
+                ? `${tokens.spacing[2]} ${tokens.spacing[4]}`
+                : `${tokens.spacing[3]} ${tokens.spacing[4]}`,
+            fontSize: tokens.font.sm,
+            fontWeight: active ? tokens.font.weightBold : tokens.font.weightMedium,
+            color: active ? tokens.color.primary : tokens.color.textMuted,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            borderRadius: isPills ? tokens.radius.lg : '0',
+            borderBottom: !isPills ? `2px solid ${active ? tokens.color.primary : 'transparent'}` : 'none',
+            backgroundColor: isPills && active ? tokens.color.surface : 'transparent',
+            boxShadow: isPills && active ? tokens.shadow.sm : 'none',
+            transition: tokens.transition.fast,
+            whiteSpace: 'nowrap',
+            opacity: disabled ? 0.45 : 1,
+            userSelect: 'none',
+            ...style,
+        }, onClick: disabled ? undefined : onClick, className: className, children: [icon && _jsx("span", { style: { display: 'inline-flex', alignItems: 'center' }, children: icon }), label, badge && _jsx("span", { style: { marginLeft: '2px' }, children: badge })] }));
 };
 //# sourceMappingURL=Tabs.js.map

package/dist/src/components/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/Tag.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
-    color?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'slate';
-    variant?: 'light' | 'solid' | 'outline';
+    color?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'slate' | 'premium' | 'gold';
+    variant?: 'subtle' | 'solid' | 'outline' | 'gradient';
+    size?: 'sm' | 'md';
     onClose?: () => void;
+    icon?: React.ReactNode;
+    clickable?: boolean;
 }
 export declare const Tag: React.FC<TagProps>;

package/dist/src/components/Tag.js

@@ -1,43 +1,121 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tokens } from '../tokens';
-export const Tag = ({ children, color = 'slate', variant = 'light', className = '', style = {}, onClose, ...props }) => {
-    const getColorScheme = () => {
-        switch (color) {
-            case 'primary': return { bg: tokens.color.primary, text: '#ffffff', lightBg: tokens.color.primaryLight, lightText: tokens.color.primary };
-            case 'success': return { bg: tokens.color.success, text: '#ffffff', lightBg: tokens.color.successBg, lightText: tokens.color.success };
-            case 'warning': return { bg: tokens.color.warning, text: '#ffffff', lightBg: tokens.color.warningBg, lightText: tokens.color.warning };
-            case 'danger': return { bg: tokens.color.danger, text: '#ffffff', lightBg: tokens.color.dangerBg, lightText: tokens.color.danger };
-            case 'info': return { bg: tokens.color.info, text: '#ffffff', lightBg: tokens.color.infoBg, lightText: tokens.color.info };
-            case 'slate':
-            default: return { bg: tokens.color.text, text: '#ffffff', lightBg: tokens.color.surfaceAlt, lightText: tokens.color.textMuted };
+const COLOR_SCHEMES = {
+    primary: {
+        bg: tokens.color.primary,
+        text: '#fff',
+        lightBg: tokens.color.primaryLight,
+        lightText: tokens.color.primary,
+        border: 'rgba(37, 99, 235, 0.2)',
+    },
+    success: {
+        bg: tokens.color.success,
+        text: '#fff',
+        lightBg: tokens.color.successBg,
+        lightText: tokens.color.success,
+        border: 'rgba(5, 150, 105, 0.2)',
+    },
+    warning: {
+        bg: tokens.color.warning,
+        text: '#fff',
+        lightBg: tokens.color.warningBg,
+        lightText: '#b45309',
+        border: 'rgba(245, 158, 11, 0.2)',
+    },
+    danger: {
+        bg: tokens.color.danger,
+        text: '#fff',
+        lightBg: tokens.color.dangerBg,
+        lightText: tokens.color.danger,
+        border: 'rgba(220, 38, 38, 0.2)',
+    },
+    info: {
+        bg: tokens.color.info,
+        text: '#fff',
+        lightBg: tokens.color.infoBg,
+        lightText: tokens.color.info,
+        border: 'rgba(59, 130, 246, 0.2)',
+    },
+    premium: {
+        bg: '#7c3aed',
+        text: '#fff',
+        lightBg: '#f5f3ff',
+        lightText: '#7c3aed',
+        border: '#ede9fe',
+    },
+    gold: {
+        bg: '#b45309',
+        text: '#fff',
+        lightBg: '#fffbeb',
+        lightText: '#92400e',
+        border: '#fde68a',
+    },
+    slate: {
+        bg: tokens.color.slate700,
+        text: '#fff',
+        lightBg: tokens.color.slate100,
+        lightText: tokens.color.slate600,
+        border: tokens.color.slate200,
+    },
+};
+export const Tag = ({ children, color = 'slate', variant = 'subtle', size = 'md', className = '', style = {}, onClose, icon, clickable = false, onClick, ...props }) => {
+    const c = COLOR_SCHEMES[color] || COLOR_SCHEMES.slate;
+    const isGradient = variant === 'gradient';
+    const backgroundStyle = () => {
+        if (isGradient && color === 'premium') {
+            return { background: 'linear-gradient(135deg, #7c3aed 0%, #db2777 100%)', color: '#fff' };
+        }
+        if (isGradient && color === 'gold') {
+            return { background: 'linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)', color: '#fff' };
+        }
+        if (variant === 'solid' || isGradient) {
+            return { backgroundColor: c.bg, color: c.text };
         }
+        if (variant === 'outline') {
+            return { backgroundColor: 'transparent', color: c.lightText };
+        }
+        return { backgroundColor: c.lightBg, color: c.lightText };
     };
-    const c = getColorScheme();
+    const borderColor = variant === 'outline' ? c.lightText :
+        variant === 'subtle' ? c.border :
+            'transparent';
+    const sizeStyles = size === 'sm'
+        ? { padding: '1px 8px', fontSize: '10px', gap: '4px' }
+        : { padding: '3px 10px', fontSize: '11px', gap: '5px' };
     const baseStyle = {
         display: 'inline-flex',
         alignItems: 'center',
-        gap: tokens.spacing[1],
-        padding: `2px ${tokens.spacing[2]}`,
-        borderRadius: tokens.radius.sm,
-        fontSize: '11px',
-        fontWeight: tokens.font.weightBold,
-        backgroundColor: variant === 'solid' ? c.bg : c.lightBg,
-        color: variant === 'solid' ? c.text : c.lightText,
-        border: variant === 'outline' ? `1px solid ${c.bg}` : '1px solid transparent',
+        borderRadius: tokens.radius.md,
+        fontWeight: tokens.font.weightSemibold,
+        letterSpacing: '0.02em',
+        lineHeight: 1.5,
+        border: `1px solid ${borderColor}`,
         transition: tokens.transition.fast,
         userSelect: 'none',
-        ...style
+        whiteSpace: 'nowrap',
+        cursor: clickable || onClick ? 'pointer' : 'default',
+        ...sizeStyles,
+        ...backgroundStyle(),
+        ...style,
     };
-    if (variant === 'outline') {
-        baseStyle.backgroundColor = 'transparent';
-        baseStyle.color = c.lightText;
-    }
-    return (_jsxs("span", { style: baseStyle, className: className, ...props, children: [children, onClose && (_jsx("span", { onClick: (e) => { e.stopPropagation(); onClose(); }, style: {
+    return (_jsxs("span", { style: baseStyle, className: `ds-tag ${className}`, onClick: onClick, ...props, children: [icon && (_jsx("span", { style: { display: 'inline-flex', alignItems: 'center', flexShrink: 0 }, children: icon })), children, onClose && (_jsx("span", { onClick: (e) => { e.stopPropagation(); onClose(); }, style: {
                     cursor: 'pointer',
-                    marginLeft: '2px',
                     display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginLeft: '2px',
+                    width: size === 'sm' ? '14px' : '16px',
+                    height: size === 'sm' ? '14px' : '16px',
+                    borderRadius: '50%',
                     opacity: 0.7,
-                    transition: 'opacity 0.2s'
-                }, onMouseEnter: (e) => e.currentTarget.style.opacity = '1', onMouseLeave: (e) => e.currentTarget.style.opacity = '0.7', children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) }))] }));
+                    transition: 'opacity 0.15s, background-color 0.15s',
+                    flexShrink: 0,
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.opacity = '1';
+                    e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.1)';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.opacity = '0.7';
+                    e.currentTarget.style.backgroundColor = 'transparent';
+                }, children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) }))] }));
 };
 //# sourceMappingURL=Tag.js.map

package/dist/src/components/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Tag.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Tag.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/Tooltip.d.ts

@@ -2,5 +2,8 @@ import React from 'react';
 export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     title: React.ReactNode;
     position?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    maxWidth?: string;
+    arrow?: boolean;
 }
 export declare const Tooltip: React.FC<TooltipProps>;

package/dist/src/components/Tooltip.js

@@ -1,43 +1,94 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
 import { tokens } from '../tokens';
-export const Tooltip = ({ children, title, position = 'top', className = '', style = {} }) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const containerStyle = {
-        position: 'relative',
-        display: 'inline-flex',
-        ...style
-    };
-    const getPositionStyles = () => {
-        switch (position) {
-            case 'bottom':
-                return { top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: '8px' };
-            case 'left':
-                return { top: '50%', right: '100%', transform: 'translateY(-50%)', marginRight: '8px' };
-            case 'right':
-                return { top: '50%', left: '100%', transform: 'translateY(-50%)', marginLeft: '8px' };
-            case 'top':
-            default:
-                return { bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: '8px' };
-        }
+const ARROW_STYLES = {
+    top: {
+        bottom: '-5px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        borderLeft: '5px solid transparent',
+        borderRight: '5px solid transparent',
+        borderTop: `5px solid ${tokens.color.slate800}`,
+    },
+    bottom: {
+        top: '-5px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        borderLeft: '5px solid transparent',
+        borderRight: '5px solid transparent',
+        borderBottom: `5px solid ${tokens.color.slate800}`,
+    },
+    left: {
+        top: '50%',
+        right: '-5px',
+        transform: 'translateY(-50%)',
+        borderTop: '5px solid transparent',
+        borderBottom: '5px solid transparent',
+        borderLeft: `5px solid ${tokens.color.slate800}`,
+    },
+    right: {
+        top: '50%',
+        left: '-5px',
+        transform: 'translateY(-50%)',
+        borderTop: '5px solid transparent',
+        borderBottom: '5px solid transparent',
+        borderRight: `5px solid ${tokens.color.slate800}`,
+    },
+};
+const POSITION_STYLES = {
+    top: { bottom: 'calc(100% + 8px)', left: '50%', transform: 'translateX(-50%)' },
+    bottom: { top: 'calc(100% + 8px)', left: '50%', transform: 'translateX(-50%)' },
+    left: { top: '50%', right: 'calc(100% + 8px)', transform: 'translateY(-50%)' },
+    right: { top: '50%', left: 'calc(100% + 8px)', transform: 'translateY(-50%)' },
+};
+export const Tooltip = ({ children, title, position = 'top', delay = 120, maxWidth = '240px', arrow = true, className = '', style = {}, ...props }) => {
+    const [visible, setVisible] = useState(false);
+    const timerRef = useRef(null);
+    const show = () => {
+        timerRef.current = setTimeout(() => setVisible(true), delay);
     };
-    const tooltipStyle = {
-        position: 'absolute',
-        backgroundColor: tokens.color.text,
-        color: 'white',
-        padding: `${tokens.spacing[1]} ${tokens.spacing[3]}`,
-        borderRadius: tokens.radius.sm,
-        fontSize: '11px',
-        fontWeight: tokens.font.weightMedium,
-        whiteSpace: 'nowrap',
-        pointerEvents: 'none',
-        opacity: isVisible ? 1 : 0,
-        visibility: isVisible ? 'visible' : 'hidden',
-        transition: tokens.transition.fast,
-        zIndex: 1000,
-        boxShadow: tokens.shadow.md,
-        ...getPositionStyles()
+    const hide = () => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        setVisible(false);
     };
-    return (_jsxs("div", { style: containerStyle, className: className, onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), children: [children, title && _jsx("div", { style: tooltipStyle, children: title })] }));
+    useEffect(() => () => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+    }, []);
+    if (!title)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("div", { style: { position: 'relative', display: 'inline-flex', ...style }, className: `ds-tooltip-wrapper ${className}`, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, ...props, children: [children, _jsxs("div", { role: "tooltip", style: {
+                    position: 'absolute',
+                    ...POSITION_STYLES[position],
+                    backgroundColor: tokens.color.slate800,
+                    color: '#fff',
+                    padding: `${tokens.spacing[1]} ${tokens.spacing[3]}`,
+                    borderRadius: tokens.radius.md,
+                    fontSize: '11.5px',
+                    fontWeight: tokens.font.weightMedium,
+                    fontFamily: tokens.font.family,
+                    letterSpacing: '0.01em',
+                    lineHeight: 1.5,
+                    whiteSpace: 'pre-wrap',
+                    maxWidth,
+                    pointerEvents: 'none',
+                    zIndex: 9999,
+                    opacity: visible ? 1 : 0,
+                    visibility: visible ? 'visible' : 'hidden',
+                    transform: `${POSITION_STYLES[position].transform || ''} ${!visible
+                        ? position === 'top' ? 'translateY(4px)' :
+                            position === 'bottom' ? 'translateY(-4px)' :
+                                position === 'left' ? 'translateX(4px)' : 'translateX(-4px)'
+                        : ''}`,
+                    transition: 'opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease',
+                    boxShadow: `${tokens.shadow.lg}, 0 0 0 1px rgba(0,0,0,0.05)`,
+                    willChange: 'opacity, transform',
+                }, children: [title, arrow && (_jsx("div", { style: {
+                            position: 'absolute',
+                            width: 0,
+                            height: 0,
+                            ...ARROW_STYLES[position],
+                        } }))] })] }));
 };
 //# sourceMappingURL=Tooltip.js.map

package/dist/src/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAOnC,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACX,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,cAAc,GAAwB;QAC1C,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,aAAa;QACtB,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,QAAO,QAAQ,EAAE,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;YACvF,KAAK,MAAM;gBACT,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC;YAC1F,KAAK,OAAO;gBACV,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;YACxF,KAAK,KAAK,CAAC;YACX;gBACE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;QAC/F,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAwB;QACxC,QAAQ,EAAE,UAAU;QACpB,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI;QAClC,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;QACpD,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE;QAC9B,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY;QACpC,UAAU,EAAE,QAAiB;QAC7B,aAAa,EAAE,MAAe;QAC9B,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1B,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;QAC5C,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,IAAI;QAClC,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE;QAC3B,GAAG,iBAAiB,EAAE;KACvB,CAAC;IAEF,OAAO,CACL,eACE,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACtC,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,aAEtC,QAAQ,EACR,KAAK,IAAI,cAAK,KAAK,EAAE,YAAY,YAAG,KAAK,GAAO,IAC7C,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAUnC,MAAM,YAAY,GAAwC;IACxD,GAAG,EAAE;QACH,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,kBAAkB;QAC7B,UAAU,EAAE,uBAAuB;QACnC,WAAW,EAAE,uBAAuB;QACpC,SAAS,EAAE,aAAa,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE;KAChD;IACD,MAAM,EAAE;QACN,GAAG,EAAE,MAAM;QACX,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,kBAAkB;QAC7B,UAAU,EAAE,uBAAuB;QACnC,WAAW,EAAE,uBAAuB;QACpC,YAAY,EAAE,aAAa,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE;KACnD;IACD,IAAI,EAAE;QACJ,GAAG,EAAE,KAAK;QACV,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,kBAAkB;QAC7B,SAAS,EAAE,uBAAuB;QAClC,YAAY,EAAE,uBAAuB;QACrC,UAAU,EAAE,aAAa,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE;KACjD;IACD,KAAK,EAAE;QACL,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,kBAAkB;QAC7B,SAAS,EAAE,uBAAuB;QAClC,YAAY,EAAE,uBAAuB;QACrC,WAAW,EAAE,aAAa,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE;KAClD;CACF,CAAC;AAEF,MAAM,eAAe,GAAwC;IAC3D,GAAG,EAAK,EAAE,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE;IAClF,MAAM,EAAE,EAAE,GAAG,EAAE,kBAAkB,EAAK,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE;IAClF,IAAI,EAAI,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,kBAAkB,EAAI,SAAS,EAAE,kBAAkB,EAAE;IAClF,KAAK,EAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAK,SAAS,EAAE,kBAAkB,EAAE;CACnF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,GAAG,EACX,QAAQ,GAAG,OAAO,EAClB,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAEpE,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,IAAI,QAAQ,CAAC,OAAO;YAAE,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACrD,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ,CAAC,OAAO;YAAE,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACvD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,KAAK;QAAE,OAAO,4BAAG,QAAQ,GAAI,CAAC;IAEnC,OAAO,CACL,eACE,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EACjE,SAAS,EAAE,sBAAsB,SAAS,EAAE,EAC5C,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAClB,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,IAAI,KACR,KAAK,aAER,QAAQ,EAET,eACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,GAAG,eAAe,CAAC,QAAQ,CAAC;oBAC5B,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ;oBACtC,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;oBACpD,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE;oBAC9B,QAAQ,EAAE,QAAQ;oBAClB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY;oBACpC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM;oBAC9B,aAAa,EAAE,QAAQ;oBACvB,UAAU,EAAE,GAAG;oBACf,UAAU,EAAE,UAAmB;oBAC/B,QAAQ;oBACR,aAAa,EAAE,MAAe;oBAC9B,MAAM,EAAE,IAAI;oBACZ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACxB,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;oBAC1C,SAAS,EAAE,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC,SAAS,IAAI,EAAE,IACrD,CAAC,OAAO;wBACN,CAAC,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;4BACxC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC;gCAC5C,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB;wBAC9D,CAAC,CAAC,EACN,EAAE;oBACF,UAAU,EAAE,iEAAiE;oBAC7E,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,8BAA8B;oBAC5D,UAAU,EAAE,oBAAoB;iBACjC,aAEA,KAAK,EACL,KAAK,IAAI,CACR,cAAK,KAAK,EAAE;4BACV,QAAQ,EAAE,UAAU;4BACpB,KAAK,EAAE,CAAC;4BACR,MAAM,EAAE,CAAC;4BACT,GAAG,YAAY,CAAC,QAAQ,CAAC;yBAC1B,GAAI,CACN,IACG,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/Typography.d.ts

@@ -1,16 +1,29 @@
 import React from 'react';
 import { tokens } from '../tokens';
 export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
-    level?: 1 | 2 | 3 | 4;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    gradient?: boolean;
 }
 export declare const Heading: React.FC<HeadingProps>;
+type TextColor = keyof typeof tokens.color | 'default' | 'muted' | 'disabled' | 'primary' | 'danger' | 'success' | 'warning' | 'info';
 export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
     size?: keyof typeof tokens.font;
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
-    color?: keyof typeof tokens.color | 'default' | 'muted' | 'disabled' | 'primary' | 'danger';
+    color?: TextColor;
+    truncate?: boolean;
+    as?: 'p' | 'span' | 'div' | 'li';
 }
 export declare const Text: React.FC<TextProps>;
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+}
+export declare const Label: React.FC<LabelProps>;
+export interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const Caption: React.FC<CaptionProps>;
 export interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
+    description?: string;
 }
 export declare const SectionHeader: React.FC<SectionHeaderProps>;
+export {};