shared-design-system 1.11.0 → 1.13.0

package/dist/src/components/ReadOnlyField.js

@@ -1,21 +1,81 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { tokens } from '../tokens';
-export const ReadOnlyField = ({ label, value, className = '', style = {} }) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: tokens.spacing[1], ...style }, className: className, children: [_jsx("label", { style: {
-                fontSize: tokens.font.xs,
-                fontWeight: tokens.font.weightBold,
-                color: tokens.color.textMuted,
-                textTransform: 'uppercase',
-                letterSpacing: '0.05em'
-            }, children: label }), _jsx("div", { style: {
-                fontSize: tokens.font.sm,
-                fontWeight: tokens.font.weightSemibold,
-                color: tokens.color.text,
-                backgroundColor: tokens.color.surfaceAlt,
-                padding: `${tokens.spacing[2]} ${tokens.spacing[3]}`,
-                borderRadius: tokens.radius.md,
-                border: `1px solid ${tokens.color.border}`,
-                minHeight: '38px',
-                display: 'flex',
-                alignItems: 'center'
-            }, children: value || 'N/A' })] }));
+export const ReadOnlyField = ({ label, value, icon, copyable = false, placeholder = '—', hint, layout = 'floating', className = '', style = {}, }) => {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = () => {
+        if (value && typeof value === 'string') {
+            navigator.clipboard.writeText(value).then(() => {
+                setCopied(true);
+                setTimeout(() => setCopied(false), 1500);
+            });
+        }
+    };
+    if (layout === 'stacked') {
+        return (_jsxs("div", { style: { width: '100%', ...style }, className: `ds-read-only-field ${className}`, children: [_jsx("div", { style: {
+                        fontSize: tokens.font.xs,
+                        fontWeight: tokens.font.weightSemibold,
+                        color: tokens.color.slate500,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.07em',
+                        marginBottom: '6px',
+                    }, children: label }), _jsx("div", { style: {
+                        fontSize: tokens.font.sm,
+                        fontWeight: tokens.font.weightSemibold,
+                        color: tokens.color.slate800,
+                        lineHeight: 1.5,
+                    }, children: value || _jsx("span", { style: { color: tokens.color.textDisabled }, children: placeholder }) }), hint && (_jsx("div", { style: {
+                        fontSize: '11px',
+                        color: tokens.color.textMuted,
+                        marginTop: '4px',
+                        fontWeight: tokens.font.weightMedium,
+                    }, children: hint }))] }));
+    }
+    // Floating label layout
+    return (_jsxs("div", { style: { position: 'relative', width: '100%', ...style }, className: `ds-read-only-field ${className}`, children: [_jsx("label", { style: {
+                    position: 'absolute',
+                    top: '-9px',
+                    left: '14px',
+                    backgroundColor: tokens.color.surface,
+                    padding: '0 5px',
+                    fontSize: '10px',
+                    fontWeight: tokens.font.weightBold,
+                    color: tokens.color.slate400,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.08em',
+                    zIndex: 1,
+                    lineHeight: 1,
+                    whiteSpace: 'nowrap',
+                }, children: label }), _jsxs("div", { style: {
+                    fontSize: tokens.font.sm,
+                    fontWeight: tokens.font.weightSemibold,
+                    color: tokens.color.slate800,
+                    backgroundColor: tokens.color.slate50,
+                    padding: '12px 14px',
+                    borderRadius: tokens.radius.lg,
+                    border: `1.5px solid ${tokens.color.slate200}`,
+                    minHeight: '46px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: tokens.spacing[3],
+                    lineHeight: 1.5,
+                }, children: [icon && (_jsx("div", { style: { color: tokens.color.slate400, display: 'flex', alignItems: 'center', flexShrink: 0 }, children: icon })), _jsx("div", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: value || _jsx("span", { style: { color: tokens.color.textDisabled, fontWeight: tokens.font.weightNormal }, children: placeholder }) }), copyable && value && typeof value === 'string' && (_jsx("button", { type: "button", onClick: handleCopy, title: copied ? 'Đã sao chép!' : 'Sao chép', style: {
+                            background: 'none',
+                            border: 'none',
+                            cursor: 'pointer',
+                            padding: '2px',
+                            color: copied ? tokens.color.success : tokens.color.slate400,
+                            display: 'flex',
+                            alignItems: 'center',
+                            borderRadius: tokens.radius.sm,
+                            transition: tokens.transition.fast,
+                            flexShrink: 0,
+                        }, onMouseEnter: (e) => (e.currentTarget.style.color = tokens.color.primary), onMouseLeave: (e) => (e.currentTarget.style.color = copied ? tokens.color.success : tokens.color.slate400), children: copied ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })] })) }))] }), hint && (_jsx("div", { style: {
+                    fontSize: '11px',
+                    color: tokens.color.textMuted,
+                    marginTop: '5px',
+                    paddingLeft: '2px',
+                    fontWeight: tokens.font.weightMedium,
+                }, children: hint }))] }));
+};
 //# sourceMappingURL=ReadOnlyField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReadOnlyField.js","sourceRoot":"","sources":["../../../src/components/ReadOnlyField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAOnC,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAC3G,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,aAC9G,gBAAO,KAAK,EAAE;gBACZ,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;gBACxB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU;gBAClC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;gBAC7B,aAAa,EAAE,WAAoB;gBACnC,aAAa,EAAE,QAAQ;aACxB,YACE,KAAK,GACA,EACR,cAAK,KAAK,EAAE;gBACV,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;gBACxB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,cAAc;gBACtC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI;gBACxB,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU;gBACxC,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gBACpD,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE;gBAC9B,MAAM,EAAE,aAAa,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE;gBAC1C,SAAS,EAAE,MAAM;gBACjB,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;aACrB,YACE,KAAK,IAAI,KAAK,GACX,IACF,CACP,CAAC"}
+{"version":3,"file":"ReadOnlyField.js","sourceRoot":"","sources":["../../../src/components/ReadOnlyField.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export interface SelectProps {
+    label?: string;
+    required?: boolean;
+    options: (string | SelectOption)[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    error?: string;
+    leadingIcon?: React.ReactNode;
+    searchable?: boolean;
+}
+export declare const Select: React.FC<SelectProps>;

package/dist/src/components/Select.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { tokens } from '../tokens';
+const floatingLabelStyle = {
+    position: 'absolute',
+    top: '-10px',
+    left: '14px',
+    backgroundColor: 'white',
+    padding: '0 6px',
+    fontSize: '10px',
+    fontWeight: tokens.font.weightBold,
+    color: tokens.color.slate400,
+    textTransform: 'uppercase',
+    letterSpacing: '0.1em',
+    zIndex: 10,
+    transition: tokens.transition.fast,
+};
+export const Select = ({ label, required, options, value, onChange, placeholder = 'Chọn...', className = '', style = {}, error, leadingIcon, searchable = true }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const containerRef = useRef(null);
+    // Normalize options to objects
+    const normalizedOptions = options.map(opt => typeof opt === 'string' ? { label: opt, value: opt } : opt);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setSearchValue('');
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const handleSelectValue = (val) => {
+        if (onChange) {
+            onChange(val);
+        }
+        setIsOpen(false);
+        setSearchValue('');
+    };
+    const selectedOption = normalizedOptions.find(opt => opt.value === value);
+    const filteredOptions = normalizedOptions.filter(opt => opt.label.toLowerCase().includes(searchValue.toLowerCase()));
+    return (_jsxs("div", { ref: containerRef, className: className, style: { position: 'relative', width: '100%', ...style }, children: [label && (_jsxs("label", { style: {
+                    ...floatingLabelStyle,
+                    color: isOpen ? tokens.color.borderFocus : (error ? tokens.color.danger : tokens.color.slate400),
+                    left: leadingIcon ? '40px' : '14px'
+                }, children: [label, " ", required && _jsx("span", { style: { color: tokens.color.danger }, children: "*" })] })), _jsxs("div", { onClick: () => setIsOpen(!isOpen), style: {
+                    minHeight: '46px',
+                    padding: '10px 14px',
+                    backgroundColor: tokens.color.white,
+                    border: `1px solid ${error ? tokens.color.danger : (isOpen ? tokens.color.borderFocus : tokens.color.slate200)}`,
+                    borderRadius: tokens.radius.lg,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '12px',
+                    cursor: 'pointer',
+                    transition: tokens.transition.fast,
+                    boxShadow: isOpen ? '0 0 0 3px rgba(245, 158, 11, 0.1)' : tokens.shadow.sm,
+                }, children: [leadingIcon && (_jsx("div", { style: {
+                            color: isOpen ? tokens.color.primary : tokens.color.slate300,
+                            display: 'flex',
+                            alignItems: 'center',
+                            marginTop: '2px'
+                        }, children: leadingIcon })), _jsx("div", { style: { flex: 1 }, children: selectedOption ? (_jsx("span", { style: { fontSize: tokens.font.sm, fontWeight: tokens.font.weightBold, color: tokens.color.slate800 }, children: selectedOption.label })) : (_jsx("span", { style: { color: tokens.color.slate400, fontSize: tokens.font.sm, fontWeight: tokens.font.weightMedium }, children: placeholder })) }), _jsx("div", { style: { color: tokens.color.slate300 }, children: _jsx("svg", { style: { width: '18px', height: '18px', transition: tokens.transition.fast, transform: isOpen ? 'rotate(180deg)' : 'none' }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) }) })] }), isOpen && (_jsxs("div", { style: {
+                    position: 'absolute',
+                    top: '100%',
+                    left: 0,
+                    right: 0,
+                    marginTop: '8px',
+                    backgroundColor: tokens.color.white,
+                    borderRadius: tokens.radius.xl,
+                    boxShadow: tokens.shadow.xl,
+                    border: `1px solid ${tokens.color.slate100}`,
+                    zIndex: 2000,
+                    overflow: 'hidden',
+                    animation: 'reveal 0.2s ease-out'
+                }, children: [searchable && (_jsx("div", { style: { padding: '10px 12px', borderBottom: `1px solid ${tokens.color.slate100}` }, children: _jsxs("div", { style: { position: 'relative' }, children: [_jsx("div", { style: { position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)', color: tokens.color.slate300 }, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] }) }), _jsx("input", { type: "text", autoFocus: true, value: searchValue, onChange: (e) => setSearchValue(e.target.value), placeholder: "T\u00ECm ki\u1EBFm...", style: {
+                                        width: '100%',
+                                        padding: '8px 12px 8px 32px',
+                                        fontSize: '12px',
+                                        backgroundColor: tokens.color.slate50,
+                                        border: 'none',
+                                        borderRadius: '10px',
+                                        outline: 'none',
+                                    }, onKeyDown: (e) => e.stopPropagation() })] }) })), _jsx("div", { style: { maxHeight: '240px', overflowY: 'auto', padding: '4px' }, children: filteredOptions.length > 0 ? (filteredOptions.map(opt => {
+                            const isSelected = value === opt.value;
+                            return (_jsxs("div", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    handleSelectValue(opt.value);
+                                }, style: {
+                                    padding: '10px 16px',
+                                    fontSize: '13px',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    borderRadius: '10px',
+                                    backgroundColor: 'transparent',
+                                    transition: tokens.transition.fast,
+                                    fontWeight: isSelected ? tokens.font.weightBold : tokens.font.weightMedium,
+                                    color: isSelected ? tokens.color.primary : tokens.color.slate600,
+                                }, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = tokens.color.slate50, onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'transparent', children: [opt.label, isSelected && (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: tokens.color.primary, strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }))] }, opt.value));
+                        })) : (_jsx("div", { style: { padding: '20px', textAlign: 'center', color: tokens.color.slate400, fontSize: '11px', fontStyle: 'italic' }, children: "Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3 ph\u00F9 h\u1EE3p" })) })] })), error && _jsx("p", { style: { fontSize: '11px', color: tokens.color.danger, marginTop: '6px', fontWeight: tokens.font.weightMedium }, children: error }), _jsx("style", { children: `
+        @keyframes reveal {
+          from { opacity: 0; transform: translateY(-8px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      ` })] }));
+};
+//# sourceMappingURL=Select.js.map

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

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

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

@@ -1,7 +1,9 @@
 import React from 'react';
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: 'text' | 'circle' | 'rectangular';
+    variant?: 'text' | 'circle' | 'rectangular' | 'rounded';
     width?: string | number;
     height?: string | number;
+    lines?: number;
+    animation?: 'wave' | 'pulse' | 'none';
 }
 export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/src/components/Skeleton.js

@@ -1,28 +1,58 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { tokens } from '../tokens';
-export const Skeleton = ({ variant = 'text', width, height, className = '', style = {} }) => {
+const KEYFRAMES = `
+  @keyframes ds-skeleton-wave {
+    0% { background-position: -400px 0; }
+    100% { background-position: 400px 0; }
+  }
+  @keyframes ds-skeleton-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+`;
+const SingleSkeleton = ({ variant = 'text', width, height, animation = 'wave', className = '', style = {}, ...props }) => {
     const getDims = () => {
-        if (variant === 'circle')
-            return { width: width || '40px', height: height || '40px', borderRadius: '50%' };
-        if (variant === 'rectangular')
-            return { width: width || '100%', height: height || '100px', borderRadius: tokens.radius.md };
+        if (variant === 'circle') {
+            const d = width || '40px';
+            return { width: d, height: height || d, borderRadius: '50%', flexShrink: 0 };
+        }
+        if (variant === 'rectangular') {
+            return { width: width || '100%', height: height || '120px', borderRadius: tokens.radius.md };
+        }
+        if (variant === 'rounded') {
+            return { width: width || '100%', height: height || '48px', borderRadius: tokens.radius.xl };
+        }
         // text
-        return { width: width || '100%', height: height || '1em', borderRadius: '4px' };
+        return { width: width || '100%', height: height || '14px', borderRadius: '6px' };
     };
-    const dims = getDims();
-    return (_jsx("div", { style: {
-            ...dims,
-            backgroundColor: tokens.color.surfaceAlt,
-            position: 'relative',
-            overflow: 'hidden',
-            animation: 'ds-pulse 1.5s ease-in-out infinite',
-            ...style
-        }, className: className, children: _jsx("style", { children: `
-        @keyframes ds-pulse {
-          0% { opacity: 1; }
-          50% { opacity: 0.4; }
-          100% { opacity: 1; }
-        }
-      ` }) }));
+    const animStyle = animation === 'wave'
+        ? {
+            background: `linear-gradient(
+          90deg,
+          ${tokens.color.slate100} 25%,
+          ${tokens.color.slate200} 50%,
+          ${tokens.color.slate100} 75%
+        )`,
+            backgroundSize: '800px 100%',
+            animation: 'ds-skeleton-wave 1.4s ease-in-out infinite',
+        }
+        : animation === 'pulse'
+            ? {
+                backgroundColor: tokens.color.slate100,
+                animation: 'ds-skeleton-pulse 1.5s ease-in-out infinite',
+            }
+            : { backgroundColor: tokens.color.slate100 };
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: KEYFRAMES }), _jsx("div", { style: {
+                    ...getDims(),
+                    ...animStyle,
+                    overflow: 'hidden',
+                    ...style,
+                }, className: `ds-skeleton ${className}`, ...props })] }));
+};
+export const Skeleton = ({ lines, variant = 'text', animation = 'wave', width, height, className = '', style = {}, ...props }) => {
+    if (lines && lines > 1 && variant === 'text') {
+        return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', ...style }, className: className, children: Array.from({ length: lines }).map((_, i) => (_jsx(SingleSkeleton, { variant: "text", animation: animation, width: i === lines - 1 ? '70%' : '100%', height: height, ...props }, i))) }));
+    }
+    return (_jsx(SingleSkeleton, { variant: variant, animation: animation, width: width, height: height, className: className, style: style, ...props }));
 };
 //# sourceMappingURL=Skeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAQnC,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,OAAO,GAAG,MAAM,EAChB,KAAK,EACL,MAAM,EACN,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACX,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,OAAO,KAAK,QAAQ;YAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI,MAAM,EAAE,MAAM,EAAE,MAAM,IAAI,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;QAC3G,IAAI,OAAO,KAAK,aAAa;YAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI,MAAM,EAAE,MAAM,EAAE,MAAM,IAAI,OAAO,EAAE,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;QAC5H,OAAO;QACP,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI,MAAM,EAAE,MAAM,EAAE,MAAM,IAAI,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;IAClF,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,OAAO,CACL,cACE,KAAK,EAAE;YACL,GAAG,IAAI;YACP,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU;YACxC,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,oCAAoC;YAC/C,GAAG,KAAK;SACT,EACD,SAAS,EAAE,SAAS,YAEpB,0BAAQ;;;;;;OAMP,GAAS,GACN,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":"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"}

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

@@ -5,5 +5,9 @@ export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
     spacing?: keyof typeof tokens.spacing | number;
     align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
     justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    divider?: boolean | React.ReactNode;
+    wrap?: boolean;
+    inline?: boolean;
+    fullWidth?: boolean;
 }
 export declare const Stack: React.FC<StackProps>;

package/dist/src/components/Stack.js

@@ -1,28 +1,42 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { tokens } from '../tokens';
-export const Stack = ({ direction = 'column', spacing = 'md', align = 'stretch', justify = 'start', children, className = '', style = {}, ...props }) => {
+import { Divider } from './Divider';
+const JUSTIFY_MAP = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    between: 'space-between',
+    around: 'space-around',
+    evenly: 'space-evenly',
+};
+export const Stack = ({ direction = 'column', spacing = '4', align = 'stretch', justify = 'start', divider, wrap = false, inline = false, fullWidth = false, children, className = '', style = {}, ...props }) => {
     const getSpacing = () => {
         if (typeof spacing === 'number')
             return `${spacing}px`;
-        return tokens.spacing[spacing] || tokens.spacing.md;
-    };
-    const getJustify = () => {
-        if (justify === 'between')
-            return 'space-between';
-        if (justify === 'around')
-            return 'space-around';
-        if (justify === 'evenly')
-            return 'space-evenly';
-        return justify;
+        return (tokens.spacing[spacing]) || tokens.spacing['4'];
     };
+    const isRow = direction === 'row' || direction === 'row-reverse';
     const baseStyle = {
-        display: 'flex',
+        display: inline ? 'inline-flex' : 'flex',
         flexDirection: direction,
-        gap: getSpacing(),
-        alignItems: align,
-        justifyContent: getJustify(),
-        ...style
+        gap: divider ? 0 : getSpacing(),
+        alignItems: align === 'start' ? 'flex-start' : align === 'end' ? 'flex-end' : align,
+        justifyContent: JUSTIFY_MAP[justify] || 'flex-start',
+        flexWrap: wrap ? 'wrap' : 'nowrap',
+        width: fullWidth ? '100%' : undefined,
+        ...style,
+    };
+    const renderChildren = () => {
+        if (!divider)
+            return children;
+        const arrayChildren = React.Children.toArray(children).filter(Boolean);
+        return arrayChildren.map((child, index) => (_jsxs(React.Fragment, { children: [child, index < arrayChildren.length - 1 && (typeof divider === 'boolean' ? (_jsx(Divider, { orientation: isRow ? 'vertical' : 'horizontal', margin: "none", style: {
+                        margin: isRow
+                            ? `0 ${getSpacing()}`
+                            : `${getSpacing()} 0`,
+                    } })) : divider)] }, index)));
     };
-    return (_jsx("div", { style: baseStyle, className: className, ...props, children: children }));
+    return (_jsx("div", { style: baseStyle, className: `ds-stack ${className}`, ...props, children: renderChildren() }));
 };
 //# sourceMappingURL=Stack.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/components/Stack.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AASnC,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAC1C,SAAS,GAAG,QAAQ,EACpB,OAAO,GAAG,IAAI,EACd,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,OAAO,EACjB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,OAAO,OAAO,KAAK,QAAQ;YAAE,OAAO,GAAG,OAAO,IAAI,CAAC;QACvD,OAAO,MAAM,CAAC,OAAO,CAAC,OAAiB,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;IAChE,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,OAAO,KAAK,SAAS;YAAE,OAAO,eAAe,CAAC;QAClD,IAAI,OAAO,KAAK,QAAQ;YAAE,OAAO,cAAc,CAAC;QAChD,IAAI,OAAO,KAAK,QAAQ;YAAE,OAAO,cAAc,CAAC;QAChD,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAwB;QACrC,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,SAAS;QACxB,GAAG,EAAE,UAAU,EAAE;QACjB,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,UAAU,EAAE;QAC5B,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,cAAK,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,KAAM,KAAK,YACnD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/components/Stack.tsx"],"names":[],"mappings":"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"}

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

@@ -1,13 +1,15 @@
 import React from 'react';
-export type StepStatus = 'finish' | 'process' | 'wait';
+export type StepStatus = 'finish' | 'process' | 'wait' | 'error';
 export interface StepItem {
     title: string;
     description?: string;
+    icon?: React.ReactNode;
 }
 export interface StepsProps {
     current?: number;
     items?: StepItem[];
     direction?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
     className?: string;
     style?: React.CSSProperties;
 }