shared-design-system 1.12.0 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/dist/src/components/Alert.d.ts +2 -1
  2. package/dist/src/components/Alert.js +80 -38
  3. package/dist/src/components/Alert.js.map +1 -1
  4. package/dist/src/components/Avatar.d.ts +11 -2
  5. package/dist/src/components/Avatar.js +87 -40
  6. package/dist/src/components/Avatar.js.map +1 -1
  7. package/dist/src/components/Badge.d.ts +4 -2
  8. package/dist/src/components/Badge.js +67 -29
  9. package/dist/src/components/Badge.js.map +1 -1
  10. package/dist/src/components/Breadcrumbs.d.ts +4 -1
  11. package/dist/src/components/Breadcrumbs.js +56 -27
  12. package/dist/src/components/Breadcrumbs.js.map +1 -1
  13. package/dist/src/components/Button.d.ts +4 -2
  14. package/dist/src/components/Button.js +99 -95
  15. package/dist/src/components/Button.js.map +1 -1
  16. package/dist/src/components/Card.d.ts +3 -1
  17. package/dist/src/components/Card.js +86 -23
  18. package/dist/src/components/Card.js.map +1 -1
  19. package/dist/src/components/ConfirmModal.d.ts +5 -2
  20. package/dist/src/components/ConfirmModal.js +99 -47
  21. package/dist/src/components/ConfirmModal.js.map +1 -1
  22. package/dist/src/components/Divider.d.ts +4 -2
  23. package/dist/src/components/Divider.js +46 -19
  24. package/dist/src/components/Divider.js.map +1 -1
  25. package/dist/src/components/ListComponents.d.ts +7 -4
  26. package/dist/src/components/ListComponents.js +70 -35
  27. package/dist/src/components/ListComponents.js.map +1 -1
  28. package/dist/src/components/LoadingSpinner.d.ts +9 -2
  29. package/dist/src/components/LoadingSpinner.js +59 -17
  30. package/dist/src/components/LoadingSpinner.js.map +1 -1
  31. package/dist/src/components/Progress.d.ts +5 -1
  32. package/dist/src/components/Progress.js +58 -26
  33. package/dist/src/components/Progress.js.map +1 -1
  34. package/dist/src/components/Radio.d.ts +4 -0
  35. package/dist/src/components/Radio.js +50 -24
  36. package/dist/src/components/Radio.js.map +1 -1
  37. package/dist/src/components/ReadOnlyField.d.ts +4 -0
  38. package/dist/src/components/ReadOnlyField.js +78 -25
  39. package/dist/src/components/ReadOnlyField.js.map +1 -1
  40. package/dist/src/components/Skeleton.d.ts +3 -1
  41. package/dist/src/components/Skeleton.js +52 -22
  42. package/dist/src/components/Skeleton.js.map +1 -1
  43. package/dist/src/components/Stack.d.ts +2 -0
  44. package/dist/src/components/Stack.js +21 -20
  45. package/dist/src/components/Stack.js.map +1 -1
  46. package/dist/src/components/Steps.d.ts +3 -1
  47. package/dist/src/components/Steps.js +93 -68
  48. package/dist/src/components/Steps.js.map +1 -1
  49. package/dist/src/components/Switch.d.ts +6 -2
  50. package/dist/src/components/Switch.js +45 -22
  51. package/dist/src/components/Switch.js.map +1 -1
  52. package/dist/src/components/Table.d.ts +9 -1
  53. package/dist/src/components/Table.js +102 -37
  54. package/dist/src/components/Table.js.map +1 -1
  55. package/dist/src/components/Tabs.d.ts +9 -5
  56. package/dist/src/components/Tabs.js +88 -88
  57. package/dist/src/components/Tabs.js.map +1 -1
  58. package/dist/src/components/Tag.d.ts +3 -1
  59. package/dist/src/components/Tag.js +104 -26
  60. package/dist/src/components/Tag.js.map +1 -1
  61. package/dist/src/components/Tooltip.d.ts +3 -0
  62. package/dist/src/components/Tooltip.js +89 -38
  63. package/dist/src/components/Tooltip.js.map +1 -1
  64. package/dist/src/components/Typography.d.ts +14 -1
  65. package/dist/src/components/Typography.js +108 -61
  66. package/dist/src/components/Typography.js.map +1 -1
  67. package/dist/src/index.d.ts +6 -6
  68. package/dist/src/index.js +3 -3
  69. package/dist/src/index.js.map +1 -1
  70. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../src/components/LoadingSpinner.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAQnC,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAClH,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,QAAO,IAAI,EAAE,CAAC;YACZ,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC;YACzB,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC;YACzB,KAAK,IAAI,CAAC;YACV,OAAO,CAAC,CAAC,OAAO,MAAM,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IACvD,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;IAE5E,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,SAAS,EAAE,SAAS,YAC1G,eACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,EAAE,SAAS,EAAE,4BAA4B,EAAE,aAElD,iBACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,QAAQ,EAAE,EAClB,WAAW,EAAE,cAAc,EAAE,EAC7B,eAAe,EAAC,SAAS,EACzB,aAAa,EAAC,OAAO,EACrB,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,GACrB,EACF,0BAAQ;;;;SAIP,GAAS,IACN,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../src/components/LoadingSpinner.tsx"],"names":[],"mappings":"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"}
@@ -2,8 +2,12 @@ import React from 'react';
2
2
  export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
3
3
  value?: number;
4
4
  max?: number;
5
- color?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
5
+ color?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'gradient';
6
+ size?: 'xs' | 'sm' | 'md' | 'lg';
6
7
  height?: string;
7
8
  showLabel?: boolean;
9
+ label?: string;
10
+ striped?: boolean;
11
+ indeterminate?: boolean;
8
12
  }
9
13
  export declare const Progress: React.FC<ProgressProps>;
@@ -1,43 +1,75 @@
1
- import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { tokens } from '../tokens';
3
- export const Progress = ({ value = 0, max = 100, color = 'primary', height = '8px', className = '', style = {}, showLabel = false, ...props }) => {
4
- const percentage = Math.min(100, Math.max(0, (value / max) * 100));
5
- const getColor = () => {
6
- switch (color) {
7
- case 'success': return tokens.color.success;
8
- case 'warning': return tokens.color.warning;
9
- case 'danger': return tokens.color.danger;
10
- case 'info': return tokens.color.info;
11
- case 'primary':
12
- default: return tokens.color.primary;
3
+ const COLOR_MAP = {
4
+ success: tokens.color.success,
5
+ warning: tokens.color.warning,
6
+ danger: tokens.color.danger,
7
+ info: tokens.color.info,
8
+ primary: tokens.color.primary,
9
+ };
10
+ const SIZE_HEIGHT = {
11
+ xs: '4px',
12
+ sm: '6px',
13
+ md: '10px',
14
+ lg: '14px',
15
+ };
16
+ export const Progress = ({ value = 0, max = 100, color = 'primary', size = 'sm', height, className = '', style = {}, showLabel = false, label, striped = false, indeterminate = false, ...props }) => {
17
+ const percentage = indeterminate ? 100 : Math.min(100, Math.max(0, (value / max) * 100));
18
+ const barHeight = height || SIZE_HEIGHT[size] || '6px';
19
+ const getBarColor = () => {
20
+ if (color === 'gradient') {
21
+ return `linear-gradient(90deg, ${tokens.color.primary} 0%, ${tokens.color.info} 100%)`;
13
22
  }
23
+ return COLOR_MAP[color] || tokens.color.primary;
14
24
  };
15
- const containerStyle = {
16
- width: '100%',
17
- ...style
18
- };
25
+ const isGradient = color === 'gradient';
19
26
  const trackStyle = {
20
27
  width: '100%',
21
- height: height,
22
- backgroundColor: tokens.color.surfaceAlt,
28
+ height: barHeight,
29
+ backgroundColor: tokens.color.slate100,
23
30
  borderRadius: tokens.radius.full,
24
31
  overflow: 'hidden',
25
- border: `1px solid ${tokens.color.border}`,
26
32
  };
27
33
  const barStyle = {
28
- width: `${percentage}%`,
34
+ width: indeterminate ? '40%' : `${percentage}%`,
29
35
  height: '100%',
30
- backgroundColor: getColor(),
31
- transition: 'width 0.3s ease-in-out',
36
+ ...(isGradient
37
+ ? { background: getBarColor() }
38
+ : { backgroundColor: getBarColor() }),
32
39
  borderRadius: tokens.radius.full,
40
+ transition: indeterminate ? 'none' : 'width 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
41
+ animation: indeterminate ? 'ds-progress-indeterminate 1.4s ease-in-out infinite' : undefined,
42
+ position: 'relative',
43
+ overflow: 'hidden',
44
+ ...(striped ? {
45
+ backgroundImage: `repeating-linear-gradient(
46
+ 45deg,
47
+ rgba(255,255,255,0.12) 0,
48
+ rgba(255,255,255,0.12) 6px,
49
+ transparent 6px,
50
+ transparent 12px
51
+ )`,
52
+ } : {}),
33
53
  };
34
- return (_jsxs("div", { style: containerStyle, className: className, ...props, children: [showLabel && (_jsx("div", { style: {
54
+ return (_jsxs("div", { style: { width: '100%', ...style }, className: `ds-progress ${className}`, ...props, children: [(showLabel || label) && (_jsxs("div", { style: {
35
55
  display: 'flex',
36
56
  justifyContent: 'space-between',
57
+ alignItems: 'center',
37
58
  marginBottom: tokens.spacing[1],
38
- fontSize: tokens.font.xs,
39
- fontWeight: tokens.font.weightBold,
40
- color: tokens.color.textMuted
41
- }, children: _jsxs("span", { children: [percentage.toFixed(0), "%"] }) })), _jsx("div", { style: trackStyle, children: _jsx("div", { style: barStyle }) })] }));
59
+ }, children: [label && (_jsx("span", { style: {
60
+ fontSize: tokens.font.xs,
61
+ fontWeight: tokens.font.weightSemibold,
62
+ color: tokens.color.textMuted,
63
+ letterSpacing: '0.02em',
64
+ }, children: label })), showLabel && !indeterminate && (_jsxs("span", { style: {
65
+ fontSize: tokens.font.xs,
66
+ fontWeight: tokens.font.weightBold,
67
+ color: COLOR_MAP[color] || tokens.color.primary,
68
+ }, children: [percentage.toFixed(0), "%"] }))] })), _jsx("div", { style: trackStyle, children: _jsx("div", { style: barStyle, children: _jsx("style", { children: `
69
+ @keyframes ds-progress-indeterminate {
70
+ 0% { transform: translateX(-200%); }
71
+ 100% { transform: translateX(400%); }
72
+ }
73
+ ` }) }) })] }));
42
74
  };
43
75
  //# sourceMappingURL=Progress.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAUnC,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,KAAK,GAAG,CAAC,EACT,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,SAAS,EACjB,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;IAEnE,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,SAAS,CAAC,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;YAC5C,KAAK,SAAS,CAAC,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;YAC5C,KAAK,QAAQ,CAAC,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;YAC1C,KAAK,MAAM,CAAC,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC;YACtC,KAAK,SAAS,CAAC;YACf,OAAO,CAAC,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;QACvC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAwB;QAC1C,KAAK,EAAE,MAAM;QACb,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,UAAU,GAAwB;QACtC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU;QACxC,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI;QAChC,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,aAAa,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE;KAC3C,CAAC;IAEF,MAAM,QAAQ,GAAwB;QACpC,KAAK,EAAE,GAAG,UAAU,GAAG;QACvB,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,QAAQ,EAAE;QAC3B,UAAU,EAAE,wBAAwB;QACpC,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI;KACjC,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,KAAM,KAAK,aACxD,SAAS,IAAI,CACZ,cAAK,KAAK,EAAE;oBACV,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,eAAe;oBAC/B,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;oBAC/B,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;oBACxB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU;oBAClC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;iBAC9B,YACC,2BAAO,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,GACjC,CACP,EACD,cAAK,KAAK,EAAE,UAAU,YACpB,cAAK,KAAK,EAAE,QAAQ,GAAI,GACpB,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAcnC,MAAM,SAAS,GAA2B;IACxC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;IAC7B,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;IAC7B,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM;IAC3B,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI;IACvB,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;CAC9B,CAAC;AAEF,MAAM,WAAW,GAA2B;IAC1C,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,KAAK,GAAG,CAAC,EACT,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,IAAI,EACX,MAAM,EACN,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;IACzF,MAAM,SAAS,GAAG,MAAM,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC;IAEvD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;YACzB,OAAO,0BAA0B,MAAM,CAAC,KAAK,CAAC,OAAO,QAAQ,MAAM,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC;QACzF,CAAC;QACD,OAAO,SAAS,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;IAClD,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,KAAK,UAAU,CAAC;IAExC,MAAM,UAAU,GAAwB;QACtC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,SAAS;QACjB,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ;QACtC,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI;QAChC,QAAQ,EAAE,QAAQ;KACnB,CAAC;IAEF,MAAM,QAAQ,GAAwB;QACpC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG;QAC/C,MAAM,EAAE,MAAM;QACd,GAAG,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE;YAC/B,CAAC,CAAC,EAAE,eAAe,EAAE,WAAW,EAAE,EAAE,CAAC;QACvC,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI;QAChC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,yCAAyC;QAC9E,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,qDAAqD,CAAC,CAAC,CAAC,SAAS;QAC5F,QAAQ,EAAE,UAAmB;QAC7B,QAAQ,EAAE,QAAQ;QAClB,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;YACZ,eAAe,EAAE;;;;;;QAMf;SACH,CAAC,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,SAAS,EAAE,KAAM,KAAK,aACtF,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,CACvB,eAAK,KAAK,EAAE;oBACV,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,eAAe;oBAC/B,UAAU,EAAE,QAAQ;oBACpB,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;iBAChC,aACE,KAAK,IAAI,CACR,eAAM,KAAK,EAAE;4BACX,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;4BACxB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,cAAc;4BACtC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;4BAC7B,aAAa,EAAE,QAAQ;yBACxB,YACE,KAAK,GACD,CACR,EACA,SAAS,IAAI,CAAC,aAAa,IAAI,CAC9B,gBAAM,KAAK,EAAE;4BACX,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;4BACxB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU;4BAClC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,OAAO;yBAChD,aACE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,SACjB,CACR,IACG,CACP,EAED,cAAK,KAAK,EAAE,UAAU,YACpB,cAAK,KAAK,EAAE,QAAQ,YAClB,0BAAQ;;;;;WAKP,GAAS,GACN,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -2,11 +2,14 @@ import React from 'react';
2
2
  import { tokens } from '../tokens';
3
3
  export interface RadioProps {
4
4
  label?: React.ReactNode;
5
+ description?: string;
5
6
  checked: boolean;
6
7
  name?: string;
7
8
  value?: string | number;
8
9
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
9
10
  disabled?: boolean;
11
+ size?: 'sm' | 'md' | 'lg';
12
+ color?: 'primary' | 'success' | 'warning' | 'danger';
10
13
  className?: string;
11
14
  style?: React.CSSProperties;
12
15
  }
@@ -15,6 +18,7 @@ export interface RadioGroupProps {
15
18
  children: React.ReactNode;
16
19
  direction?: 'row' | 'column';
17
20
  spacing?: keyof typeof tokens.spacing;
21
+ label?: string;
18
22
  className?: string;
19
23
  style?: React.CSSProperties;
20
24
  }
@@ -1,51 +1,77 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { tokens } from '../tokens';
3
- export const Radio = ({ label, checked, name, value, onChange, disabled = false, className = '', style = {}, }) => {
3
+ const COLOR_MAP = {
4
+ primary: tokens.color.primary,
5
+ success: tokens.color.success,
6
+ warning: tokens.color.warning,
7
+ danger: tokens.color.danger,
8
+ };
9
+ const SIZE_CONFIG = {
10
+ sm: { outer: '16px', inner: '8px' },
11
+ md: { outer: '20px', inner: '10px' },
12
+ lg: { outer: '24px', inner: '12px' },
13
+ };
14
+ export const Radio = ({ label, description, checked, name, value, onChange, disabled = false, size = 'md', color = 'primary', className = '', style = {}, }) => {
15
+ const activeColor = COLOR_MAP[color] || tokens.color.primary;
16
+ const sc = SIZE_CONFIG[size] || SIZE_CONFIG.md;
4
17
  const containerStyle = {
5
18
  display: 'inline-flex',
6
- alignItems: 'center',
19
+ alignItems: description ? 'flex-start' : 'center',
7
20
  gap: tokens.spacing['3'],
8
21
  cursor: disabled ? 'not-allowed' : 'pointer',
9
- opacity: disabled ? 0.6 : 1,
22
+ opacity: disabled ? 0.55 : 1,
10
23
  userSelect: 'none',
11
24
  ...style,
12
25
  };
13
26
  const radioBoxStyle = {
14
27
  position: 'relative',
15
- width: '20px',
16
- height: '20px',
28
+ width: sc.outer,
29
+ height: sc.outer,
17
30
  borderRadius: '50%',
18
- border: `2px solid ${checked ? tokens.color.primary : tokens.color.border}`,
31
+ border: `2px solid ${checked ? activeColor : tokens.color.slate300}`,
19
32
  backgroundColor: tokens.color.surface,
20
33
  display: 'flex',
21
34
  alignItems: 'center',
22
35
  justifyContent: 'center',
23
- transition: tokens.transition.fast,
36
+ transition: 'border-color 0.2s, box-shadow 0.2s',
24
37
  flexShrink: 0,
38
+ boxShadow: checked ? `0 0 0 3px ${activeColor}20` : 'none',
39
+ marginTop: description ? '2px' : '0',
25
40
  };
26
41
  const innerCircleStyle = {
27
- width: '10px',
28
- height: '10px',
42
+ width: sc.inner,
43
+ height: sc.inner,
29
44
  borderRadius: '50%',
30
- backgroundColor: tokens.color.primary,
45
+ backgroundColor: activeColor,
31
46
  transform: checked ? 'scale(1)' : 'scale(0)',
32
47
  opacity: checked ? 1 : 0,
33
- transition: tokens.transition.fast,
48
+ transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease',
34
49
  };
35
- return (_jsxs("label", { style: containerStyle, className: className, children: [_jsxs("div", { style: { position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx("input", { type: "radio", name: name, value: value, checked: checked, onChange: onChange, disabled: disabled, style: { position: 'absolute', opacity: 0, width: 0, height: 0 } }), _jsx("div", { style: radioBoxStyle, children: _jsx("div", { style: innerCircleStyle }) })] }), label && (_jsx("span", { style: {
36
- fontSize: tokens.font.sm,
37
- fontWeight: tokens.font.weightMedium,
38
- color: tokens.color.text,
39
- }, children: label }))] }));
50
+ return (_jsxs("label", { style: containerStyle, className: `ds-radio ${className}`, children: [_jsxs("div", { style: { position: 'relative', display: 'flex', alignItems: 'center', flexShrink: 0 }, children: [_jsx("input", { type: "radio", name: name, value: value, checked: checked, onChange: onChange, disabled: disabled, style: { position: 'absolute', opacity: 0, width: 0, height: 0 } }), _jsx("div", { style: radioBoxStyle, children: _jsx("div", { style: innerCircleStyle }) })] }), (label || description) && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [label && (_jsx("span", { style: {
51
+ fontSize: tokens.font.sm,
52
+ fontWeight: tokens.font.weightSemibold,
53
+ color: disabled ? tokens.color.textDisabled : tokens.color.text,
54
+ lineHeight: 1.4,
55
+ }, children: label })), description && (_jsx("span", { style: {
56
+ fontSize: '11px',
57
+ fontWeight: tokens.font.weightMedium,
58
+ color: tokens.color.textMuted,
59
+ lineHeight: 1.4,
60
+ }, children: description }))] }))] }));
40
61
  };
41
- export const RadioGroup = ({ children, direction = 'column', spacing = '3', className = '', style = {}, }) => {
62
+ export const RadioGroup = ({ children, direction = 'column', spacing = '3', label, className = '', style = {}, }) => {
42
63
  var _a;
43
- const groupStyle = {
44
- display: 'flex',
45
- flexDirection: direction,
46
- gap: (_a = tokens.spacing[spacing]) !== null && _a !== void 0 ? _a : tokens.spacing['3'],
47
- ...style,
48
- };
49
- return (_jsx("div", { style: groupStyle, className: className, children: children }));
64
+ return (_jsxs("div", { role: "radiogroup", style: { ...style }, className: `ds-radio-group ${className}`, children: [label && (_jsx("div", { style: {
65
+ fontSize: tokens.font.xs,
66
+ fontWeight: tokens.font.weightBold,
67
+ color: tokens.color.slate500,
68
+ textTransform: 'uppercase',
69
+ letterSpacing: '0.07em',
70
+ marginBottom: tokens.spacing['2'],
71
+ }, children: label })), _jsx("div", { style: {
72
+ display: 'flex',
73
+ flexDirection: direction,
74
+ gap: (_a = tokens.spacing[spacing]) !== null && _a !== void 0 ? _a : tokens.spacing['3'],
75
+ }, children: children })] }));
50
76
  };
51
77
  //# sourceMappingURL=Radio.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio.tsx"],"names":[],"mappings":"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"}
@@ -3,5 +3,9 @@ export interface ReadOnlyFieldProps extends React.HTMLAttributes<HTMLDivElement>
3
3
  label: string;
4
4
  value?: React.ReactNode;
5
5
  icon?: React.ReactNode;
6
+ copyable?: boolean;
7
+ placeholder?: string;
8
+ hint?: string;
9
+ layout?: 'floating' | 'stacked';
6
10
  }
7
11
  export declare const ReadOnlyField: React.FC<ReadOnlyFieldProps>;
@@ -1,28 +1,81 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useState } from 'react';
2
3
  import { tokens } from '../tokens';
3
- export const ReadOnlyField = ({ label, value, icon, className = '', style = {} }) => (_jsxs("div", { style: { position: 'relative', width: '100%', ...style }, className: className, children: [_jsx("label", { style: {
4
- position: 'absolute',
5
- top: '-10px',
6
- left: '14px',
7
- backgroundColor: tokens.color.white,
8
- padding: '0 6px',
9
- fontSize: '10px',
10
- fontWeight: tokens.font.weightBold,
11
- color: tokens.color.slate400,
12
- textTransform: 'uppercase',
13
- letterSpacing: '0.1em',
14
- zIndex: 1,
15
- }, children: label }), _jsxs("div", { style: {
16
- fontSize: tokens.font.sm,
17
- fontWeight: tokens.font.weightSemibold,
18
- color: tokens.color.slate800,
19
- backgroundColor: tokens.color.slate50,
20
- padding: '14px 16px',
21
- borderRadius: tokens.radius.lg,
22
- border: `1px solid ${tokens.color.slate200}`,
23
- minHeight: '46px',
24
- display: 'flex',
25
- alignItems: 'center',
26
- gap: tokens.spacing[3]
27
- }, children: [icon && _jsx("div", { style: { color: tokens.color.slate400 }, children: icon }), _jsx("div", { style: { flex: 1 }, children: value || _jsx("span", { style: { opacity: 0.4 }, children: "\u2014" }) })] })] }));
4
+ export const ReadOnlyField = ({ label, value, icon, copyable = false, placeholder = '—', hint, layout = 'floating', className = '', style = {}, }) => {
5
+ const [copied, setCopied] = useState(false);
6
+ const handleCopy = () => {
7
+ if (value && typeof value === 'string') {
8
+ navigator.clipboard.writeText(value).then(() => {
9
+ setCopied(true);
10
+ setTimeout(() => setCopied(false), 1500);
11
+ });
12
+ }
13
+ };
14
+ if (layout === 'stacked') {
15
+ return (_jsxs("div", { style: { width: '100%', ...style }, className: `ds-read-only-field ${className}`, children: [_jsx("div", { style: {
16
+ fontSize: tokens.font.xs,
17
+ fontWeight: tokens.font.weightSemibold,
18
+ color: tokens.color.slate500,
19
+ textTransform: 'uppercase',
20
+ letterSpacing: '0.07em',
21
+ marginBottom: '6px',
22
+ }, children: label }), _jsx("div", { style: {
23
+ fontSize: tokens.font.sm,
24
+ fontWeight: tokens.font.weightSemibold,
25
+ color: tokens.color.slate800,
26
+ lineHeight: 1.5,
27
+ }, children: value || _jsx("span", { style: { color: tokens.color.textDisabled }, children: placeholder }) }), hint && (_jsx("div", { style: {
28
+ fontSize: '11px',
29
+ color: tokens.color.textMuted,
30
+ marginTop: '4px',
31
+ fontWeight: tokens.font.weightMedium,
32
+ }, children: hint }))] }));
33
+ }
34
+ // Floating label layout
35
+ return (_jsxs("div", { style: { position: 'relative', width: '100%', ...style }, className: `ds-read-only-field ${className}`, children: [_jsx("label", { style: {
36
+ position: 'absolute',
37
+ top: '-9px',
38
+ left: '14px',
39
+ backgroundColor: tokens.color.surface,
40
+ padding: '0 5px',
41
+ fontSize: '10px',
42
+ fontWeight: tokens.font.weightBold,
43
+ color: tokens.color.slate400,
44
+ textTransform: 'uppercase',
45
+ letterSpacing: '0.08em',
46
+ zIndex: 1,
47
+ lineHeight: 1,
48
+ whiteSpace: 'nowrap',
49
+ }, children: label }), _jsxs("div", { style: {
50
+ fontSize: tokens.font.sm,
51
+ fontWeight: tokens.font.weightSemibold,
52
+ color: tokens.color.slate800,
53
+ backgroundColor: tokens.color.slate50,
54
+ padding: '12px 14px',
55
+ borderRadius: tokens.radius.lg,
56
+ border: `1.5px solid ${tokens.color.slate200}`,
57
+ minHeight: '46px',
58
+ display: 'flex',
59
+ alignItems: 'center',
60
+ gap: tokens.spacing[3],
61
+ lineHeight: 1.5,
62
+ }, 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: {
63
+ background: 'none',
64
+ border: 'none',
65
+ cursor: 'pointer',
66
+ padding: '2px',
67
+ color: copied ? tokens.color.success : tokens.color.slate400,
68
+ display: 'flex',
69
+ alignItems: 'center',
70
+ borderRadius: tokens.radius.sm,
71
+ transition: tokens.transition.fast,
72
+ flexShrink: 0,
73
+ }, 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: {
74
+ fontSize: '11px',
75
+ color: tokens.color.textMuted,
76
+ marginTop: '5px',
77
+ paddingLeft: '2px',
78
+ fontWeight: tokens.font.weightMedium,
79
+ }, children: hint }))] }));
80
+ };
28
81
  //# sourceMappingURL=ReadOnlyField.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ReadOnlyField.js","sourceRoot":"","sources":["../../../src/components/ReadOnlyField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAQnC,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CACjH,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,aACjF,gBAAO,KAAK,EAAE;gBACZ,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,OAAO;gBACZ,IAAI,EAAE,MAAM;gBACZ,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK;gBACnC,OAAO,EAAE,OAAO;gBAChB,QAAQ,EAAE,MAAM;gBAChB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU;gBAClC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ;gBAC5B,aAAa,EAAE,WAAW;gBAC1B,aAAa,EAAE,OAAO;gBACtB,MAAM,EAAE,CAAC;aACV,YACE,KAAK,GACA,EACR,eAAK,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,QAAQ;gBAC5B,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;gBACrC,OAAO,EAAE,WAAW;gBACpB,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE;gBAC9B,MAAM,EAAE,aAAa,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC5C,SAAS,EAAE,MAAM;gBACjB,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;aACvB,aACE,IAAI,IAAI,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,YAAG,IAAI,GAAO,EACnE,cAAK,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAAG,KAAK,IAAI,eAAM,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,uBAAU,GAAO,IAC7E,IACF,CACP,CAAC"}
1
+ {"version":3,"file":"ReadOnlyField.js","sourceRoot":"","sources":["../../../src/components/ReadOnlyField.tsx"],"names":[],"mappings":"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"}
@@ -1,7 +1,9 @@
1
1
  import React from 'react';
2
2
  export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
3
- variant?: 'text' | 'circle' | 'rectangular';
3
+ variant?: 'text' | 'circle' | 'rectangular' | 'rounded';
4
4
  width?: string | number;
5
5
  height?: string | number;
6
+ lines?: number;
7
+ animation?: 'wave' | 'pulse' | 'none';
6
8
  }
7
9
  export declare const Skeleton: React.FC<SkeletonProps>;
@@ -1,28 +1,58 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { tokens } from '../tokens';
3
- export const Skeleton = ({ variant = 'text', width, height, className = '', style = {} }) => {
3
+ const KEYFRAMES = `
4
+ @keyframes ds-skeleton-wave {
5
+ 0% { background-position: -400px 0; }
6
+ 100% { background-position: 400px 0; }
7
+ }
8
+ @keyframes ds-skeleton-pulse {
9
+ 0%, 100% { opacity: 1; }
10
+ 50% { opacity: 0.4; }
11
+ }
12
+ `;
13
+ const SingleSkeleton = ({ variant = 'text', width, height, animation = 'wave', className = '', style = {}, ...props }) => {
4
14
  const getDims = () => {
5
- if (variant === 'circle')
6
- return { width: width || '40px', height: height || '40px', borderRadius: '50%' };
7
- if (variant === 'rectangular')
8
- return { width: width || '100%', height: height || '100px', borderRadius: tokens.radius.md };
15
+ if (variant === 'circle') {
16
+ const d = width || '40px';
17
+ return { width: d, height: height || d, borderRadius: '50%', flexShrink: 0 };
18
+ }
19
+ if (variant === 'rectangular') {
20
+ return { width: width || '100%', height: height || '120px', borderRadius: tokens.radius.md };
21
+ }
22
+ if (variant === 'rounded') {
23
+ return { width: width || '100%', height: height || '48px', borderRadius: tokens.radius.xl };
24
+ }
9
25
  // text
10
- return { width: width || '100%', height: height || '1em', borderRadius: '4px' };
26
+ return { width: width || '100%', height: height || '14px', borderRadius: '6px' };
11
27
  };
12
- const dims = getDims();
13
- return (_jsx("div", { style: {
14
- ...dims,
15
- backgroundColor: tokens.color.surfaceAlt,
16
- position: 'relative',
17
- overflow: 'hidden',
18
- animation: 'ds-pulse 1.5s ease-in-out infinite',
19
- ...style
20
- }, className: className, children: _jsx("style", { children: `
21
- @keyframes ds-pulse {
22
- 0% { opacity: 1; }
23
- 50% { opacity: 0.4; }
24
- 100% { opacity: 1; }
25
- }
26
- ` }) }));
28
+ const animStyle = animation === 'wave'
29
+ ? {
30
+ background: `linear-gradient(
31
+ 90deg,
32
+ ${tokens.color.slate100} 25%,
33
+ ${tokens.color.slate200} 50%,
34
+ ${tokens.color.slate100} 75%
35
+ )`,
36
+ backgroundSize: '800px 100%',
37
+ animation: 'ds-skeleton-wave 1.4s ease-in-out infinite',
38
+ }
39
+ : animation === 'pulse'
40
+ ? {
41
+ backgroundColor: tokens.color.slate100,
42
+ animation: 'ds-skeleton-pulse 1.5s ease-in-out infinite',
43
+ }
44
+ : { backgroundColor: tokens.color.slate100 };
45
+ return (_jsxs(_Fragment, { children: [_jsx("style", { children: KEYFRAMES }), _jsx("div", { style: {
46
+ ...getDims(),
47
+ ...animStyle,
48
+ overflow: 'hidden',
49
+ ...style,
50
+ }, className: `ds-skeleton ${className}`, ...props })] }));
51
+ };
52
+ export const Skeleton = ({ lines, variant = 'text', animation = 'wave', width, height, className = '', style = {}, ...props }) => {
53
+ if (lines && lines > 1 && variant === 'text') {
54
+ 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))) }));
55
+ }
56
+ return (_jsx(SingleSkeleton, { variant: variant, animation: animation, width: width, height: height, className: className, style: style, ...props }));
27
57
  };
28
58
  //# sourceMappingURL=Skeleton.js.map
@@ -1 +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"}
1
+ {"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":"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"}
@@ -7,5 +7,7 @@ export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
7
7
  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
8
8
  divider?: boolean | React.ReactNode;
9
9
  wrap?: boolean;
10
+ inline?: boolean;
11
+ fullWidth?: boolean;
10
12
  }
11
13
  export declare const Stack: React.FC<StackProps>;