shared-design-system 1.21.0 → 1.23.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 (97) hide show
  1. package/dist/src/components/Alert.d.ts +1 -1
  2. package/dist/src/components/Alert.js +34 -20
  3. package/dist/src/components/Alert.js.map +1 -1
  4. package/dist/src/components/Avatar.d.ts +7 -2
  5. package/dist/src/components/Avatar.js +15 -12
  6. package/dist/src/components/Avatar.js.map +1 -1
  7. package/dist/src/components/Badge.d.ts +1 -1
  8. package/dist/src/components/Badge.js +113 -89
  9. package/dist/src/components/Badge.js.map +1 -1
  10. package/dist/src/components/Breadcrumbs.d.ts +1 -1
  11. package/dist/src/components/Breadcrumbs.js +7 -9
  12. package/dist/src/components/Breadcrumbs.js.map +1 -1
  13. package/dist/src/components/Button.d.ts +1 -1
  14. package/dist/src/components/Button.js +6 -4
  15. package/dist/src/components/Button.js.map +1 -1
  16. package/dist/src/components/ConfigProvider.d.ts +17 -0
  17. package/dist/src/components/ConfigProvider.js +54 -0
  18. package/dist/src/components/ConfigProvider.js.map +1 -0
  19. package/dist/src/components/ConfirmModal.d.ts +1 -1
  20. package/dist/src/components/ConfirmModal.js +82 -72
  21. package/dist/src/components/ConfirmModal.js.map +1 -1
  22. package/dist/src/components/DatePicker.d.ts +1 -1
  23. package/dist/src/components/DatePicker.js +33 -10
  24. package/dist/src/components/DatePicker.js.map +1 -1
  25. package/dist/src/components/Descriptions.d.ts +15 -0
  26. package/dist/src/components/Descriptions.js +44 -0
  27. package/dist/src/components/Descriptions.js.map +1 -0
  28. package/dist/src/components/Divider.d.ts +1 -1
  29. package/dist/src/components/Divider.js +21 -16
  30. package/dist/src/components/Divider.js.map +1 -1
  31. package/dist/src/components/Drawer.d.ts +1 -1
  32. package/dist/src/components/Drawer.js +81 -68
  33. package/dist/src/components/Drawer.js.map +1 -1
  34. package/dist/src/components/Dropdown.d.ts +17 -0
  35. package/dist/src/components/Dropdown.js +129 -0
  36. package/dist/src/components/Dropdown.js.map +1 -0
  37. package/dist/src/components/InputComponents.d.ts +4 -4
  38. package/dist/src/components/InputComponents.js +57 -26
  39. package/dist/src/components/InputComponents.js.map +1 -1
  40. package/dist/src/components/ListComponents.d.ts +4 -2
  41. package/dist/src/components/ListComponents.js +36 -15
  42. package/dist/src/components/ListComponents.js.map +1 -1
  43. package/dist/src/components/Modal.d.ts +1 -1
  44. package/dist/src/components/Modal.js +90 -77
  45. package/dist/src/components/Modal.js.map +1 -1
  46. package/dist/src/components/MultiSelect.d.ts +1 -1
  47. package/dist/src/components/MultiSelect.js +65 -20
  48. package/dist/src/components/MultiSelect.js.map +1 -1
  49. package/dist/src/components/Popconfirm.d.ts +12 -0
  50. package/dist/src/components/Popconfirm.js +24 -0
  51. package/dist/src/components/Popconfirm.js.map +1 -0
  52. package/dist/src/components/Popover.d.ts +10 -0
  53. package/dist/src/components/Popover.js +108 -0
  54. package/dist/src/components/Popover.js.map +1 -0
  55. package/dist/src/components/Portal.d.ts +11 -0
  56. package/dist/src/components/Portal.js +30 -0
  57. package/dist/src/components/Portal.js.map +1 -0
  58. package/dist/src/components/Radio.d.ts +5 -2
  59. package/dist/src/components/Radio.js +10 -6
  60. package/dist/src/components/Radio.js.map +1 -1
  61. package/dist/src/components/Result.d.ts +9 -0
  62. package/dist/src/components/Result.js +52 -0
  63. package/dist/src/components/Result.js.map +1 -0
  64. package/dist/src/components/Select.d.ts +1 -1
  65. package/dist/src/components/Select.js +70 -19
  66. package/dist/src/components/Select.js.map +1 -1
  67. package/dist/src/components/Skeleton.d.ts +1 -1
  68. package/dist/src/components/Skeleton.js +10 -7
  69. package/dist/src/components/Skeleton.js.map +1 -1
  70. package/dist/src/components/Steps.d.ts +1 -1
  71. package/dist/src/components/Steps.js +17 -14
  72. package/dist/src/components/Steps.js.map +1 -1
  73. package/dist/src/components/Switch.d.ts +1 -1
  74. package/dist/src/components/Switch.js +6 -6
  75. package/dist/src/components/Switch.js.map +1 -1
  76. package/dist/src/components/Table.d.ts +20 -7
  77. package/dist/src/components/Table.js +140 -113
  78. package/dist/src/components/Table.js.map +1 -1
  79. package/dist/src/components/Tabs.d.ts +4 -2
  80. package/dist/src/components/Tabs.js +15 -10
  81. package/dist/src/components/Tabs.js.map +1 -1
  82. package/dist/src/components/Tag.d.ts +1 -1
  83. package/dist/src/components/Tag.js +17 -8
  84. package/dist/src/components/Tag.js.map +1 -1
  85. package/dist/src/components/Timeline.d.ts +13 -0
  86. package/dist/src/components/Timeline.js +35 -0
  87. package/dist/src/components/Timeline.js.map +1 -0
  88. package/dist/src/components/Tooltip.d.ts +1 -1
  89. package/dist/src/components/Tooltip.js +17 -10
  90. package/dist/src/components/Tooltip.js.map +1 -1
  91. package/dist/src/components/Typography.d.ts +5 -5
  92. package/dist/src/components/Typography.js +38 -23
  93. package/dist/src/components/Typography.js.map +1 -1
  94. package/dist/src/index.d.ts +19 -4
  95. package/dist/src/index.js +12 -5
  96. package/dist/src/index.js.map +1 -1
  97. package/package.json +1 -1
@@ -1,13 +1,19 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React from 'react';
2
3
  import { tokens } from '../tokens';
3
- export const Divider = ({ orientation = 'horizontal', type = 'solid', label, margin = 'md', color, thickness = 1, className = '', style = {}, }) => {
4
+ export const Divider = React.forwardRef(({ orientation = 'horizontal', type = 'solid', label, margin = 'md', color, thickness = 1, className = '', style = {}, ...props }, ref) => {
4
5
  const getMargin = () => {
5
6
  switch (margin) {
6
- case 'none': return '0';
7
- case 'xs': return tokens.spacing[1];
8
- case 'sm': return tokens.spacing[2];
9
- case 'lg': return tokens.spacing[8];
10
- default: return tokens.spacing[4];
7
+ case 'none':
8
+ return '0';
9
+ case 'xs':
10
+ return tokens.spacing[1];
11
+ case 'sm':
12
+ return tokens.spacing[2];
13
+ case 'lg':
14
+ return tokens.spacing[8];
15
+ default:
16
+ return tokens.spacing[4];
11
17
  }
12
18
  };
13
19
  const isVertical = orientation === 'vertical';
@@ -23,9 +29,7 @@ export const Divider = ({ orientation = 'horizontal', type = 'solid', label, mar
23
29
  }
24
30
  : {
25
31
  backgroundColor: isDashed ? 'transparent' : defaultColor,
26
- border: isDashed
27
- ? `${thickness}px dashed ${defaultColor}`
28
- : 'none',
32
+ border: isDashed ? `${thickness}px dashed ${defaultColor}` : 'none',
29
33
  };
30
34
  const baseLineStyle = {
31
35
  ...lineStyle,
@@ -35,23 +39,23 @@ export const Divider = ({ orientation = 'horizontal', type = 'solid', label, mar
35
39
  ...(!isDashed && !isGradient ? { backgroundColor: defaultColor } : {}),
36
40
  };
37
41
  if (isVertical) {
38
- return (_jsx("div", { style: {
42
+ return (_jsx("div", { ref: ref, role: "separator", "aria-orientation": "vertical", style: {
39
43
  ...baseLineStyle,
40
44
  margin: `0 ${getMargin()}`,
41
45
  display: 'inline-block',
42
46
  alignSelf: 'stretch',
43
47
  ...style,
44
- }, className: `ds-divider ds-divider--vertical ${className}` }));
48
+ }, className: `ds-divider ds-divider--vertical ${className}`, ...props }));
45
49
  }
46
50
  if (label) {
47
- return (_jsxs("div", { style: {
51
+ return (_jsxs("div", { ref: ref, role: "separator", "aria-orientation": "horizontal", style: {
48
52
  display: 'flex',
49
53
  alignItems: 'center',
50
54
  width: '100%',
51
55
  margin: `${getMargin()} 0`,
52
56
  gap: tokens.spacing[3],
53
57
  ...style,
54
- }, className: `ds-divider ds-divider--labeled ${className}`, children: [_jsx("div", { style: { ...baseLineStyle, flex: 1 } }), _jsx("span", { style: {
58
+ }, className: `ds-divider ds-divider--labeled ${className}`, ...props, children: [_jsx("div", { style: { ...baseLineStyle, flex: 1 } }), _jsx("span", { style: {
55
59
  fontSize: '11px',
56
60
  fontWeight: tokens.font.weightSemibold,
57
61
  color: tokens.color.slate400,
@@ -61,10 +65,11 @@ export const Divider = ({ orientation = 'horizontal', type = 'solid', label, mar
61
65
  padding: `0 ${tokens.spacing[1]}`,
62
66
  }, children: label }), _jsx("div", { style: { ...baseLineStyle, flex: 1 } })] }));
63
67
  }
64
- return (_jsx("hr", { style: {
68
+ return (_jsx("hr", { ref: ref, style: {
65
69
  ...baseLineStyle,
66
70
  margin: `${getMargin()} 0`,
67
71
  ...style,
68
- }, className: `ds-divider ${className}` }));
69
- };
72
+ }, className: `ds-divider ${className}`, ...props }));
73
+ });
74
+ Divider.displayName = 'Divider';
70
75
  //# sourceMappingURL=Divider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider.tsx"],"names":[],"mappings":"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"}
@@ -8,4 +8,4 @@ export interface DrawerProps {
8
8
  width?: string | number;
9
9
  placement?: 'left' | 'right';
10
10
  }
11
- export declare const Drawer: React.FC<DrawerProps>;
11
+ export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,8 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useEffect } from 'react';
2
+ import React, { useEffect } from 'react';
3
3
  import { tokens } from '../tokens';
4
4
  import { Heading } from './Typography';
5
- export const Drawer = ({ isOpen, onClose, title, children, footer, width = 400, placement = 'right', }) => {
5
+ import { Portal } from './Portal';
6
+ export const Drawer = React.forwardRef(({ isOpen, onClose, title, children, footer, width = 400, placement = 'right' }, ref) => {
6
7
  useEffect(() => {
7
8
  if (isOpen) {
8
9
  document.body.style.overflow = 'hidden';
@@ -14,73 +15,85 @@ export const Drawer = ({ isOpen, onClose, title, children, footer, width = 400,
14
15
  document.body.style.overflow = 'unset';
15
16
  };
16
17
  }, [isOpen]);
18
+ useEffect(() => {
19
+ const handleEscape = (e) => {
20
+ if (e.key === 'Escape' && isOpen) {
21
+ onClose();
22
+ }
23
+ };
24
+ if (isOpen) {
25
+ document.addEventListener('keydown', handleEscape);
26
+ }
27
+ return () => document.removeEventListener('keydown', handleEscape);
28
+ }, [isOpen, onClose]);
17
29
  if (!isOpen)
18
30
  return null;
19
31
  const isRight = placement === 'right';
20
- return (_jsxs("div", { style: {
21
- position: 'fixed',
22
- inset: 0,
23
- zIndex: 1000,
24
- display: 'flex',
25
- justifyContent: isRight ? 'flex-end' : 'flex-start',
26
- }, children: [_jsx("div", { onClick: onClose, style: {
27
- position: 'absolute',
28
- inset: 0,
29
- backgroundColor: 'rgba(15, 23, 42, 0.4)',
30
- backdropFilter: 'blur(2px)',
31
- animation: 'ds-fade-in 0.3s ease-out',
32
- } }), _jsxs("div", { style: {
33
- position: 'relative',
34
- backgroundColor: tokens.color.white,
35
- width: '100%',
36
- maxWidth: typeof width === 'number' ? `${width}px` : width,
37
- height: '100%',
38
- display: 'flex',
39
- flexDirection: 'column',
40
- boxShadow: tokens.shadow.xl,
41
- animation: `ds-drawer-slide-${placement} 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)`,
42
- zIndex: 1,
43
- }, children: [_jsxs("div", { style: {
44
- padding: `${tokens.spacing[6]} ${tokens.spacing[6]}`,
45
- borderBottom: `1px solid ${tokens.color.slate100}`,
46
- display: 'flex',
47
- alignItems: 'center',
48
- justifyContent: 'space-between',
49
- }, children: [title ? (_jsx(Heading, { level: 4, style: { margin: 0 }, children: title })) : _jsx("div", {}), _jsx("button", { onClick: onClose, style: {
50
- padding: '8px',
51
- borderRadius: '50%',
52
- border: 'none',
53
- backgroundColor: 'transparent',
54
- color: tokens.color.slate400,
55
- cursor: 'pointer',
56
- display: 'flex',
57
- alignItems: 'center',
58
- justifyContent: 'center',
59
- transition: tokens.transition.fast,
60
- }, children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsx("div", { style: {
61
- padding: tokens.spacing[6],
62
- overflowY: 'auto',
63
- flex: 1,
64
- }, children: children }), footer && (_jsx("div", { style: {
65
- padding: `${tokens.spacing[4]} ${tokens.spacing[6]}`,
66
- borderTop: `1px solid ${tokens.color.slate100}`,
67
- backgroundColor: tokens.color.white,
68
- display: 'flex',
69
- justifyContent: 'flex-end',
70
- gap: tokens.spacing[3],
71
- }, children: footer }))] }), _jsx("style", { children: `
72
- @keyframes ds-fade-in {
73
- from { opacity: 0; }
74
- to { opacity: 1; }
75
- }
76
- @keyframes ds-drawer-slide-right {
77
- from { transform: translateX(100%); }
78
- to { transform: translateX(0); }
79
- }
80
- @keyframes ds-drawer-slide-left {
81
- from { transform: translateX(-100%); }
82
- to { transform: translateX(0); }
83
- }
84
- ` })] }));
85
- };
32
+ return (_jsx(Portal, { children: _jsxs("div", { ref: ref, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? 'ds-drawer-title' : undefined, style: {
33
+ position: 'fixed',
34
+ inset: 0,
35
+ zIndex: 1000,
36
+ display: 'flex',
37
+ justifyContent: isRight ? 'flex-end' : 'flex-start',
38
+ }, children: [_jsx("div", { onClick: onClose, style: {
39
+ position: 'absolute',
40
+ inset: 0,
41
+ backgroundColor: 'rgba(15, 23, 42, 0.4)',
42
+ backdropFilter: 'blur(2px)',
43
+ animation: 'ds-fade-in 0.3s ease-out',
44
+ } }), _jsxs("div", { style: {
45
+ position: 'relative',
46
+ backgroundColor: tokens.color.white,
47
+ width: '100%',
48
+ maxWidth: typeof width === 'number' ? `${width}px` : width,
49
+ height: '100%',
50
+ display: 'flex',
51
+ flexDirection: 'column',
52
+ boxShadow: tokens.shadow.xl,
53
+ animation: `ds-drawer-slide-${placement} 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)`,
54
+ zIndex: 1,
55
+ }, children: [_jsxs("div", { style: {
56
+ padding: `${tokens.spacing[6]} ${tokens.spacing[6]}`,
57
+ borderBottom: `1px solid ${tokens.color.slate100}`,
58
+ display: 'flex',
59
+ alignItems: 'center',
60
+ justifyContent: 'space-between',
61
+ }, children: [title ? (_jsx(Heading, { id: "ds-drawer-title", level: 4, style: { margin: 0 }, children: title })) : (_jsx("div", {})), _jsx("button", { onClick: onClose, "aria-label": "Close drawer", style: {
62
+ padding: '8px',
63
+ borderRadius: '50%',
64
+ border: 'none',
65
+ backgroundColor: 'transparent',
66
+ color: tokens.color.slate400,
67
+ cursor: 'pointer',
68
+ display: 'flex',
69
+ alignItems: 'center',
70
+ justifyContent: 'center',
71
+ transition: tokens.transition.fast,
72
+ }, children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsx("div", { style: {
73
+ padding: tokens.spacing[6],
74
+ overflowY: 'auto',
75
+ flex: 1,
76
+ }, children: children }), footer && (_jsx("div", { style: {
77
+ padding: `${tokens.spacing[4]} ${tokens.spacing[6]}`,
78
+ borderTop: `1px solid ${tokens.color.slate100}`,
79
+ backgroundColor: tokens.color.white,
80
+ display: 'flex',
81
+ justifyContent: 'flex-end',
82
+ gap: tokens.spacing[3],
83
+ }, children: footer }))] }), _jsx("style", { children: `
84
+ @keyframes ds-fade-in {
85
+ from { opacity: 0; }
86
+ to { opacity: 1; }
87
+ }
88
+ @keyframes ds-drawer-slide-right {
89
+ from { transform: translateX(100%); }
90
+ to { transform: translateX(0); }
91
+ }
92
+ @keyframes ds-drawer-slide-left {
93
+ from { transform: translateX(-100%); }
94
+ to { transform: translateX(0); }
95
+ }
96
+ ` })] }) }));
97
+ });
98
+ Drawer.displayName = 'Drawer';
86
99
  //# sourceMappingURL=Drawer.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ export interface DropdownProps {
3
+ children: React.ReactNode;
4
+ menu: React.ReactNode;
5
+ trigger?: 'click' | 'hover';
6
+ placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
7
+ disabled?: boolean;
8
+ }
9
+ export declare const Dropdown: any;
10
+ export interface MenuItemProps {
11
+ children: React.ReactNode;
12
+ onClick?: () => void;
13
+ icon?: React.ReactNode;
14
+ danger?: boolean;
15
+ disabled?: boolean;
16
+ active?: boolean;
17
+ }
@@ -0,0 +1,129 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import React, { useState, useRef, useEffect, useCallback } from 'react';
3
+ import { tokens } from '../tokens';
4
+ import { Portal } from './Portal';
5
+ export const Dropdown = React.forwardRef(({ children, menu, trigger = 'click', placement = 'bottomLeft', disabled = false }, ref) => {
6
+ const [visible, setVisible] = useState(false);
7
+ const [coords, setCoords] = useState({ top: 0, left: 0, width: 0 });
8
+ const triggerRef = useRef(null);
9
+ const menuRef = useRef(null);
10
+ const updateCoords = useCallback(() => {
11
+ if (triggerRef.current) {
12
+ const rect = triggerRef.current.getBoundingClientRect();
13
+ setCoords({
14
+ top: rect.top + window.scrollY,
15
+ left: rect.left + window.scrollX,
16
+ width: rect.width,
17
+ });
18
+ }
19
+ }, []);
20
+ const toggle = () => !disabled && setVisible(!visible);
21
+ const show = () => !disabled && setVisible(true);
22
+ const hide = () => setVisible(false);
23
+ useEffect(() => {
24
+ if (visible) {
25
+ updateCoords();
26
+ window.addEventListener('resize', updateCoords);
27
+ window.addEventListener('scroll', updateCoords, true);
28
+ const handleClickOutside = (e) => {
29
+ if (triggerRef.current &&
30
+ !triggerRef.current.contains(e.target) &&
31
+ menuRef.current &&
32
+ !menuRef.current.contains(e.target)) {
33
+ hide();
34
+ }
35
+ };
36
+ document.addEventListener('mousedown', handleClickOutside);
37
+ return () => {
38
+ window.removeEventListener('resize', updateCoords);
39
+ window.removeEventListener('scroll', updateCoords, true);
40
+ document.removeEventListener('mousedown', handleClickOutside);
41
+ };
42
+ }
43
+ }, [visible, updateCoords]);
44
+ const triggerProps = trigger === 'click'
45
+ ? { onClick: toggle }
46
+ : { onMouseEnter: show, onMouseLeave: hide };
47
+ const getMenuStyles = () => {
48
+ var _a, _b, _c, _d;
49
+ const spacing = 4;
50
+ const styles = {
51
+ position: 'absolute',
52
+ zIndex: 1100,
53
+ minWidth: '160px',
54
+ };
55
+ if (placement === 'bottomLeft') {
56
+ styles.top = coords.top + triggerRef.current.offsetHeight + spacing;
57
+ styles.left = coords.left;
58
+ }
59
+ else if (placement === 'bottomRight') {
60
+ styles.top = coords.top + triggerRef.current.offsetHeight + spacing;
61
+ styles.left = coords.left + coords.width - (((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
62
+ }
63
+ else if (placement === 'topLeft') {
64
+ styles.top = coords.top - (((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0) - spacing;
65
+ styles.left = coords.left;
66
+ }
67
+ else if (placement === 'topRight') {
68
+ styles.top = coords.top - (((_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 0) - spacing;
69
+ styles.left = coords.left + coords.width - (((_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.offsetWidth) || 0);
70
+ }
71
+ return styles;
72
+ };
73
+ return (_jsxs(_Fragment, { children: [_jsx("div", { ref: (node) => {
74
+ triggerRef.current = node;
75
+ if (typeof ref === 'function')
76
+ ref(node);
77
+ else if (ref)
78
+ ref.current = node;
79
+ }, style: { display: 'inline-flex' }, className: "ds-dropdown-trigger", ...triggerProps, children: children }), visible && (_jsxs(Portal, { children: [_jsx("div", { ref: menuRef, style: getMenuStyles(), className: "ds-dropdown-menu-container", onMouseEnter: trigger === 'hover' ? show : undefined, onMouseLeave: trigger === 'hover' ? hide : undefined, children: _jsx("div", { style: {
80
+ backgroundColor: tokens.color.white,
81
+ borderRadius: tokens.radius.lg,
82
+ boxShadow: tokens.shadow.xl,
83
+ border: `1px solid ${tokens.color.slate100}`,
84
+ padding: tokens.spacing[1],
85
+ overflow: 'hidden',
86
+ animation: 'ds-dropdown-in 0.2s cubic-bezier(0, 0, 0.2, 1)',
87
+ }, children: menu }) }), _jsx("style", { children: `
88
+ @keyframes ds-dropdown-in {
89
+ from { opacity: 0; transform: scale(0.95) translateY(-4px); }
90
+ to { opacity: 1; transform: scale(1) translateY(0); }
91
+ }
92
+ ` })] }))] }));
93
+ });
94
+ Dropdown.displayName = 'Dropdown';
95
+ const MenuItem = ({ children, onClick, icon, danger, disabled, active, }) => {
96
+ const [hovered, setHovered] = useState(false);
97
+ return (_jsxs("div", { onClick: disabled ? undefined : onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
98
+ display: 'flex',
99
+ alignItems: 'center',
100
+ gap: tokens.spacing[3],
101
+ padding: `${tokens.spacing[2]} ${tokens.spacing[4]}`,
102
+ fontSize: tokens.font.sm,
103
+ fontWeight: tokens.font.weightMedium,
104
+ color: disabled
105
+ ? tokens.color.textDisabled
106
+ : danger
107
+ ? tokens.color.danger
108
+ : active
109
+ ? tokens.color.primary
110
+ : tokens.color.slate700,
111
+ backgroundColor: active
112
+ ? tokens.color.primaryLight
113
+ : hovered && !disabled
114
+ ? tokens.color.slate50
115
+ : 'transparent',
116
+ cursor: disabled ? 'not-allowed' : 'pointer',
117
+ borderRadius: tokens.radius.md,
118
+ transition: tokens.transition.fast,
119
+ userSelect: 'none',
120
+ }, children: [icon && (_jsx("span", { style: { display: 'flex', fontSize: '1.1em', opacity: hovered ? 1 : 0.7 }, children: icon })), _jsx("span", { style: { flex: 1 }, children: children })] }));
121
+ };
122
+ const MenuDivider = () => (_jsx("div", { style: {
123
+ height: '1px',
124
+ backgroundColor: tokens.color.slate100,
125
+ margin: `${tokens.spacing[1]} 0`,
126
+ } }));
127
+ Dropdown.Item = MenuItem;
128
+ Dropdown.Divider = MenuDivider;
129
+ //# sourceMappingURL=Dropdown.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/Dropdown.tsx"],"names":[],"mappings":"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"}
@@ -5,21 +5,21 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
5
5
  error?: string;
6
6
  leadingIcon?: React.ReactNode;
7
7
  }
8
- export declare const Input: React.FC<InputProps>;
8
+ export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
9
9
  export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
10
10
  label?: string;
11
11
  required?: boolean;
12
12
  error?: string;
13
13
  }
14
- export declare const Textarea: React.FC<TextareaProps>;
14
+ export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
15
15
  export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
16
16
  label?: string;
17
17
  required?: boolean;
18
18
  error?: string;
19
19
  leadingIcon?: React.ReactNode;
20
20
  }
21
- export declare const NativeSelect: React.FC<NativeSelectProps>;
21
+ export declare const NativeSelect: React.ForwardRefExoticComponent<NativeSelectProps & React.RefAttributes<HTMLSelectElement>>;
22
22
  export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
23
23
  label?: string;
24
24
  }
25
- export declare const Checkbox: React.FC<CheckboxProps>;
25
+ export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;