@orcestr/ui 0.0.3 → 0.1.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 (176) hide show
  1. package/dist/components/Alert/Alert.d.ts +5 -4
  2. package/dist/components/Alert/Alert.d.ts.map +1 -1
  3. package/dist/components/Alert/Alert.js +5 -2
  4. package/dist/components/AppShell/AppShell.d.ts +2 -0
  5. package/dist/components/AppShell/AppShell.d.ts.map +1 -1
  6. package/dist/components/AppShell/AppShell.js +9 -6
  7. package/dist/components/AppSidebar/AppSidebar.d.ts +36 -0
  8. package/dist/components/AppSidebar/AppSidebar.d.ts.map +1 -0
  9. package/dist/components/AppSidebar/AppSidebar.js +53 -0
  10. package/dist/components/Badge/Badge.d.ts +8 -6
  11. package/dist/components/Badge/Badge.d.ts.map +1 -1
  12. package/dist/components/Badge/Badge.js +4 -4
  13. package/dist/components/BadgeSelectMenu/BadgeSelectMenu.d.ts +22 -0
  14. package/dist/components/BadgeSelectMenu/BadgeSelectMenu.d.ts.map +1 -0
  15. package/dist/components/BadgeSelectMenu/BadgeSelectMenu.js +50 -0
  16. package/dist/components/Box/Box.d.ts +2 -0
  17. package/dist/components/Box/Box.d.ts.map +1 -1
  18. package/dist/components/Box/Box.js +15 -2
  19. package/dist/components/Button/Button.d.ts +7 -3
  20. package/dist/components/Button/Button.d.ts.map +1 -1
  21. package/dist/components/Button/Button.js +23 -3
  22. package/dist/components/Card/Card.d.ts +26 -0
  23. package/dist/components/Card/Card.d.ts.map +1 -0
  24. package/dist/components/Card/Card.js +25 -0
  25. package/dist/components/Checkbox/Checkbox.d.ts +6 -2
  26. package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
  27. package/dist/components/Checkbox/Checkbox.js +13 -4
  28. package/dist/components/CommandPalette/CommandPalette.d.ts.map +1 -1
  29. package/dist/components/CommandPalette/CommandPalette.js +10 -9
  30. package/dist/components/ConfirmDialog/ConfirmDialog.d.ts.map +1 -1
  31. package/dist/components/ConfirmDialog/ConfirmDialog.js +5 -2
  32. package/dist/components/ContextMenu/ContextMenu.d.ts.map +1 -1
  33. package/dist/components/ContextMenu/ContextMenu.js +2 -2
  34. package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
  35. package/dist/components/DatePicker/DatePicker.js +9 -1
  36. package/dist/components/Dialog/Dialog.d.ts +69 -1
  37. package/dist/components/Dialog/Dialog.d.ts.map +1 -1
  38. package/dist/components/Dialog/Dialog.js +48 -1
  39. package/dist/components/Drawer/Drawer.d.ts.map +1 -1
  40. package/dist/components/Drawer/Drawer.js +2 -2
  41. package/dist/components/EntityPicker/EntityPicker.d.ts +2 -1
  42. package/dist/components/EntityPicker/EntityPicker.d.ts.map +1 -1
  43. package/dist/components/EntityPicker/EntityPicker.js +2 -2
  44. package/dist/components/Flex/Flex.d.ts +5 -1
  45. package/dist/components/Flex/Flex.d.ts.map +1 -1
  46. package/dist/components/Flex/Flex.js +16 -3
  47. package/dist/components/Grid/Grid.d.ts +9 -2
  48. package/dist/components/Grid/Grid.d.ts.map +1 -1
  49. package/dist/components/Grid/Grid.js +22 -1
  50. package/dist/components/IconButton/IconButton.d.ts +19 -7
  51. package/dist/components/IconButton/IconButton.d.ts.map +1 -1
  52. package/dist/components/IconButton/IconButton.js +40 -5
  53. package/dist/components/IconTextButton/IconTextButton.d.ts +20 -0
  54. package/dist/components/IconTextButton/IconTextButton.d.ts.map +1 -0
  55. package/dist/components/IconTextButton/IconTextButton.js +24 -0
  56. package/dist/components/InlineEdit/InlineEdit.d.ts +63 -0
  57. package/dist/components/InlineEdit/InlineEdit.d.ts.map +1 -0
  58. package/dist/components/InlineEdit/InlineEdit.js +98 -0
  59. package/dist/components/LinkButton/LinkButton.d.ts +25 -0
  60. package/dist/components/LinkButton/LinkButton.d.ts.map +1 -0
  61. package/dist/components/LinkButton/LinkButton.js +12 -0
  62. package/dist/components/Modal/Modal.d.ts +29 -6
  63. package/dist/components/Modal/Modal.d.ts.map +1 -1
  64. package/dist/components/Modal/Modal.js +37 -13
  65. package/dist/components/Overlay/OverlayProvider.d.ts +1 -0
  66. package/dist/components/Overlay/OverlayProvider.d.ts.map +1 -1
  67. package/dist/components/Overlay/OverlayProvider.js +18 -1
  68. package/dist/components/PaginatedCombobox/PaginatedCombobox.d.ts +2 -1
  69. package/dist/components/PaginatedCombobox/PaginatedCombobox.d.ts.map +1 -1
  70. package/dist/components/PaginatedCombobox/PaginatedCombobox.js +3 -3
  71. package/dist/components/Popover/Popover.d.ts +37 -3
  72. package/dist/components/Popover/Popover.d.ts.map +1 -1
  73. package/dist/components/Popover/Popover.js +56 -9
  74. package/dist/components/ScrollArea/ScrollArea.d.ts +4 -0
  75. package/dist/components/ScrollArea/ScrollArea.d.ts.map +1 -1
  76. package/dist/components/ScrollArea/ScrollArea.js +30 -4
  77. package/dist/components/Section/Section.d.ts +2 -0
  78. package/dist/components/Section/Section.d.ts.map +1 -1
  79. package/dist/components/SegmentedControl/SegmentedControl.d.ts +24 -1
  80. package/dist/components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  81. package/dist/components/SegmentedControl/SegmentedControl.js +28 -2
  82. package/dist/components/Select/Select.d.ts +36 -4
  83. package/dist/components/Select/Select.d.ts.map +1 -1
  84. package/dist/components/Select/Select.js +70 -3
  85. package/dist/components/Separator/Separator.d.ts +3 -1
  86. package/dist/components/Separator/Separator.d.ts.map +1 -1
  87. package/dist/components/Separator/Separator.js +4 -2
  88. package/dist/components/SpecialModal/SpecialModal.d.ts +43 -0
  89. package/dist/components/SpecialModal/SpecialModal.d.ts.map +1 -0
  90. package/dist/components/SpecialModal/SpecialModal.js +34 -0
  91. package/dist/components/Spinner/Spinner.d.ts +3 -1
  92. package/dist/components/Spinner/Spinner.d.ts.map +1 -1
  93. package/dist/components/Spinner/Spinner.js +2 -2
  94. package/dist/components/State/State.d.ts +8 -1
  95. package/dist/components/State/State.d.ts.map +1 -1
  96. package/dist/components/State/State.js +2 -2
  97. package/dist/components/Switch/Switch.d.ts +2 -0
  98. package/dist/components/Switch/Switch.d.ts.map +1 -1
  99. package/dist/components/Switch/Switch.js +2 -1
  100. package/dist/components/Table/Table.d.ts +64 -0
  101. package/dist/components/Table/Table.d.ts.map +1 -0
  102. package/dist/components/Table/Table.js +38 -0
  103. package/dist/components/Tabs/Tabs.d.ts +33 -2
  104. package/dist/components/Tabs/Tabs.d.ts.map +1 -1
  105. package/dist/components/Tabs/Tabs.js +189 -4
  106. package/dist/components/Text/Text.d.ts +13 -3
  107. package/dist/components/Text/Text.d.ts.map +1 -1
  108. package/dist/components/Text/Text.js +16 -3
  109. package/dist/components/TextArea/TextArea.d.ts.map +1 -1
  110. package/dist/components/TextArea/TextArea.js +1 -1
  111. package/dist/components/TextField/TextField.d.ts.map +1 -1
  112. package/dist/components/TextField/TextField.js +1 -1
  113. package/dist/components/Toast/Toast.d.ts +1 -0
  114. package/dist/components/Toast/Toast.d.ts.map +1 -1
  115. package/dist/components/Toast/Toast.js +19 -8
  116. package/dist/components/Tooltip/Tooltip.d.ts +11 -3
  117. package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
  118. package/dist/components/Tooltip/Tooltip.js +58 -9
  119. package/dist/example/CodePreview.d.ts.map +1 -1
  120. package/dist/example/CodePreview.js +3 -3
  121. package/dist/example/ExampleActionsSection.d.ts.map +1 -1
  122. package/dist/example/ExampleActionsSection.js +3 -3
  123. package/dist/example/ExampleApplicationSection.d.ts +7 -0
  124. package/dist/example/ExampleApplicationSection.d.ts.map +1 -0
  125. package/dist/example/ExampleApplicationSection.js +68 -0
  126. package/dist/example/ExampleBasicsSections.d.ts.map +1 -1
  127. package/dist/example/ExampleBasicsSections.js +5 -9
  128. package/dist/example/ExampleDataSection.d.ts.map +1 -1
  129. package/dist/example/ExampleDataSection.js +31 -30
  130. package/dist/example/ExampleFieldsSection.d.ts.map +1 -1
  131. package/dist/example/ExampleFieldsSection.js +51 -3
  132. package/dist/example/ExampleFoundationsSection.js +1 -1
  133. package/dist/example/ExampleOverlays.d.ts.map +1 -1
  134. package/dist/example/ExampleOverlays.js +7 -2
  135. package/dist/example/ExampleOverlaysSection.d.ts.map +1 -1
  136. package/dist/example/ExampleOverlaysSection.js +5 -2
  137. package/dist/example/ExampleSelectionSection.d.ts +3 -1
  138. package/dist/example/ExampleSelectionSection.d.ts.map +1 -1
  139. package/dist/example/ExampleSelectionSection.js +10 -3
  140. package/dist/example/ExampleStateSection.d.ts +3 -0
  141. package/dist/example/ExampleStateSection.d.ts.map +1 -1
  142. package/dist/example/ExampleStateSection.js +58 -3
  143. package/dist/example/ExampleThemePlayground.d.ts +83 -53
  144. package/dist/example/ExampleThemePlayground.d.ts.map +1 -1
  145. package/dist/example/ExampleThemePlayground.js +119 -56
  146. package/dist/example/UiExamplePage.d.ts.map +1 -1
  147. package/dist/example/UiExamplePage.js +39 -10
  148. package/dist/example/codeSamples.d.ts +7 -0
  149. package/dist/example/codeSamples.d.ts.map +1 -1
  150. package/dist/example/codeSamples.js +429 -60
  151. package/dist/example/exampleData.d.ts.map +1 -1
  152. package/dist/example/exampleData.js +16 -2
  153. package/dist/example/styles.css +245 -74
  154. package/dist/hooks/useFloatingPosition.js +1 -1
  155. package/dist/hooks/usePresence.d.ts.map +1 -1
  156. package/dist/hooks/usePresence.js +9 -7
  157. package/dist/index.d.ts +8 -1
  158. package/dist/index.d.ts.map +1 -1
  159. package/dist/index.js +8 -1
  160. package/dist/styles/orcestr-ui.css +2544 -671
  161. package/dist/theme/ThemeProvider.d.ts.map +1 -1
  162. package/dist/theme/ThemeProvider.js +90 -36
  163. package/dist/theme/defaultTheme.d.ts.map +1 -1
  164. package/dist/theme/defaultTheme.js +322 -194
  165. package/dist/theme/systemProps.d.ts +48 -28
  166. package/dist/theme/systemProps.d.ts.map +1 -1
  167. package/dist/theme/systemProps.js +103 -1
  168. package/dist/theme/themeTypes.d.ts +21 -17
  169. package/dist/theme/themeTypes.d.ts.map +1 -1
  170. package/dist/utils/slot.d.ts +11 -0
  171. package/dist/utils/slot.d.ts.map +1 -0
  172. package/dist/utils/slot.js +18 -0
  173. package/package.json +1 -1
  174. package/dist/components/Workflow/Workflow.d.ts +0 -82
  175. package/dist/components/Workflow/Workflow.d.ts.map +0 -1
  176. package/dist/components/Workflow/Workflow.js +0 -73
@@ -1,11 +1,12 @@
1
1
  import type { HTMLAttributes, ReactNode } from 'react';
2
- import type { Tone } from '../../theme/systemProps';
3
- export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
4
- tone?: Exclude<Tone, 'brand'>;
2
+ import { type SystemProps, type ToneInput } from '../../theme/systemProps';
3
+ export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & SystemProps & {
4
+ tone?: Exclude<ToneInput, 'primary' | 'secondary' | 'muted'>;
5
+ v?: 'soft' | 'surface';
5
6
  title?: ReactNode;
6
7
  icon?: ReactNode;
7
8
  action?: ReactNode;
8
9
  testId?: string;
9
10
  };
10
- export declare function Alert({ tone, title, icon, action, className, children, testId, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function Alert({ tone, v, title, icon, action, className, style, children, testId, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
11
12
  //# sourceMappingURL=Alert.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,yBAAyB,CAAC;AAIlD,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,KAAK,CAAC,EAClB,IAAa,EACb,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACX,EAAE,UAAU,2CAiBZ"}
1
+ {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAErD,OAAO,EAGH,KAAK,WAAW,EAChB,KAAK,SAAS,EACjB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAClE,WAAW,GAAG;IACd,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC,CAAC;IAC7D,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,KAAK,CAAC,EAClB,IAAa,EACb,CAAU,EACV,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACX,EAAE,UAAU,2CAsBZ"}
@@ -1,7 +1,10 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { normalizeTone, splitSystemProps, } from '../../theme/systemProps';
3
4
  import { cn } from '../../utils/cn';
4
5
  import { stateIcon } from '../State/stateIcon';
5
- export function Alert({ tone = 'info', title, icon, action, className, children, testId, ...props }) {
6
- return (_jsxs("div", { className: cn('oui-alert', className), "data-tone": tone, "data-testid": testId, role: tone === 'danger' ? 'alert' : 'status', ...props, children: [_jsx("span", { className: 'oui-alert-icon', children: icon ?? stateIcon(tone) }), _jsxs("span", { className: 'oui-alert-main', children: [title ? _jsx("strong", { children: title }) : null, children ? _jsx("span", { children: children }) : null] }), action ? _jsx("span", { className: 'oui-alert-action', children: action }) : null] }));
6
+ export function Alert({ tone = 'info', v = 'soft', title, icon, action, className, style, children, testId, ...props }) {
7
+ const { systemStyle, restProps } = splitSystemProps(props);
8
+ const actualTone = normalizeTone(tone, 'info');
9
+ return (_jsxs("div", { className: cn('oui-alert', className), "data-tone": actualTone, "data-variant": v, "data-testid": testId, role: actualTone === 'danger' ? 'alert' : 'status', style: { ...systemStyle, ...style }, ...restProps, children: [_jsx("span", { className: 'oui-alert-icon', children: icon ?? stateIcon(actualTone) }), _jsxs("span", { className: 'oui-alert-main', children: [title ? _jsx("strong", { children: title }) : null, children ? _jsx("span", { children: children }) : null] }), action ? _jsx("span", { className: 'oui-alert-action', children: action }) : null] }));
7
10
  }
@@ -14,6 +14,7 @@ export type AppShellNavItem = {
14
14
  export type AppShellProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
15
15
  sidebar: ReactNode;
16
16
  header?: ReactNode;
17
+ sidebarMode?: 'auto' | 'desktop' | 'mobile';
17
18
  sidebarOpen?: boolean;
18
19
  onSidebarOpenChange?: (open: boolean) => void;
19
20
  sidebarWidth?: number | string;
@@ -24,6 +25,7 @@ export type AppShellProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
24
25
  export declare const AppShell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SystemProps & {
25
26
  sidebar: ReactNode;
26
27
  header?: ReactNode;
28
+ sidebarMode?: "auto" | "desktop" | "mobile";
27
29
  sidebarOpen?: boolean;
28
30
  onSidebarOpenChange?: (open: boolean) => void;
29
31
  sidebarWidth?: number | string;
@@ -1 +1 @@
1
- {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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"}
@@ -11,9 +11,10 @@ import { IconButton } from '../IconButton/IconButton';
11
11
  import { ScrollArea } from '../ScrollArea/ScrollArea';
12
12
  import { Separator } from '../Separator/Separator';
13
13
  import { Text } from '../Text/Text';
14
- export const AppShell = forwardRef(function AppShell({ className, style, sidebar, header, sidebarOpen = false, onSidebarOpenChange, sidebarWidth = 260, maxWidth = 1440, contentInset = 28, children, testId, ...props }, ref) {
15
- const [drawerMode, setDrawerMode] = useState(false);
14
+ export const AppShell = forwardRef(function AppShell({ className, style, sidebar, header, sidebarMode = 'auto', sidebarOpen = false, onSidebarOpenChange, sidebarWidth = 260, maxWidth = 1440, contentInset = 28, children, testId, ...props }, ref) {
15
+ const [autoDrawerMode, setAutoDrawerMode] = useState(false);
16
16
  const { systemStyle, restProps } = splitSystemProps(props);
17
+ const drawerMode = sidebarMode === 'auto' ? autoDrawerMode : sidebarMode === 'mobile';
17
18
  const shellStyle = {
18
19
  '--oui-app-shell-sidebar-width': shellSizeValue(sidebarWidth),
19
20
  '--oui-app-shell-max-width': shellSizeValue(maxWidth),
@@ -22,13 +23,15 @@ export const AppShell = forwardRef(function AppShell({ className, style, sidebar
22
23
  ...style,
23
24
  };
24
25
  useEffect(() => {
26
+ if (sidebarMode !== 'auto')
27
+ return;
25
28
  const media = window.matchMedia('(max-width: 860px)');
26
- const update = () => setDrawerMode(media.matches);
29
+ const update = () => setAutoDrawerMode(media.matches);
27
30
  update();
28
31
  media.addEventListener('change', update);
29
32
  return () => media.removeEventListener('change', update);
30
- }, []);
31
- return (_jsxs("div", { ref: ref, className: cn('oui-app-shell', className), "data-sidebar-open": sidebarOpen ? 'true' : 'false', "data-testid": testId, style: shellStyle, ...restProps, children: [header, _jsxs("div", { className: 'oui-app-shell-frame', children: [!drawerMode ? (_jsx("div", { className: 'oui-app-shell-sidebar-desktop', children: sidebar })) : null, drawerMode ? (_jsx(Drawer, { open: sidebarOpen, onOpenChange: (nextOpen) => onSidebarOpenChange?.(nextOpen), side: 'left', size: sidebarWidth, showCloseButton: false, panelClassName: 'oui-app-shell-sidebar-drawer-panel', bodyClassName: 'oui-app-shell-sidebar-drawer-body', testId: testId ? `${testId}-sidebar-drawer` : undefined, children: sidebar })) : null, _jsx("main", { className: 'oui-app-shell-main', children: children })] })] }));
33
+ }, [sidebarMode]);
34
+ return (_jsxs("div", { ref: ref, className: cn('oui-app-shell', className), "data-sidebar-open": sidebarOpen ? 'true' : 'false', "data-testid": testId, style: shellStyle, ...restProps, children: [header, _jsxs("div", { className: 'oui-app-shell-frame', children: [!drawerMode ? (_jsx("div", { className: 'oui-app-shell-sidebar-desktop', children: sidebar })) : null, drawerMode ? (_jsx(Drawer, { open: sidebarOpen, onOpenChange: (nextOpen) => onSidebarOpenChange?.(nextOpen), side: 'left', size: sidebarWidth, showCloseButton: false, backdropClassName: 'oui-app-shell-sidebar-drawer-overlay', panelClassName: 'oui-app-shell-sidebar-drawer-panel', bodyClassName: 'oui-app-shell-sidebar-drawer-body', testId: testId ? `${testId}-sidebar-drawer` : undefined, children: sidebar })) : null, _jsx("main", { className: 'oui-app-shell-main', children: children })] })] }));
32
35
  });
33
36
  export const AppShellHeader = forwardRef(function AppShellHeader({ className, style, title, actions, sidebarOpen = false, onSidebarOpenChange, navigationLabel, visibility = 'always', children, testId, ...props }, ref) {
34
37
  const { copy } = useOrcestrUiLocale();
@@ -72,7 +75,7 @@ export const AppShellNav = forwardRef(function AppShellNav({ className, style, i
72
75
  });
73
76
  export const PageTitleBlock = forwardRef(function PageTitleBlock({ className, style, title, caption, action, badge, testId, ...props }, ref) {
74
77
  const { systemStyle, restProps } = splitSystemProps(props);
75
- return (_jsxs("div", { ref: ref, className: cn('oui-page-title-block', className), "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps, children: [_jsxs("div", { className: 'oui-page-title-main', children: [_jsxs("div", { className: 'oui-page-title-row', children: [_jsx("h1", { className: 'oui-page-title', children: title }), badge ? _jsx(Badge, { tone: 'brand', children: badge }) : null] }), caption ? _jsx("p", { className: 'oui-page-title-caption', children: caption }) : null] }), action ? _jsx("div", { className: 'oui-page-title-actions', children: action }) : null] }));
78
+ return (_jsxs("div", { ref: ref, className: cn('oui-page-title-block', className), "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps, children: [_jsxs("div", { className: 'oui-page-title-main', children: [_jsxs("div", { className: 'oui-page-title-row', children: [_jsx("h1", { className: 'oui-page-title', children: title }), badge ? _jsx(Badge, { tone: 'primary', children: badge }) : null] }), caption ? _jsx("p", { className: 'oui-page-title-caption', children: caption }) : null] }), action ? _jsx("div", { className: 'oui-page-title-actions', children: action }) : null] }));
76
79
  });
77
80
  function AppShellNavButton({ item, onNavigate, testId, }) {
78
81
  const content = (_jsxs(_Fragment, { children: [item.icon ? _jsx("span", { className: 'oui-app-shell-nav-icon', children: item.icon }) : null, _jsxs("span", { className: 'oui-app-shell-nav-text', children: [_jsx("span", { className: 'oui-app-shell-nav-label', children: item.label }), item.caption ? (_jsx("span", { className: 'oui-app-shell-nav-caption', children: item.caption })) : null] }), item.badge ? _jsx("span", { className: 'oui-app-shell-nav-badge', children: item.badge }) : null] }));
@@ -0,0 +1,36 @@
1
+ import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';
2
+ import { type SystemProps } from '../../theme/systemProps';
3
+ export type AppSidebarSide = 'left' | 'right';
4
+ export type AppSidebarItem = {
5
+ key: string;
6
+ label: ReactNode;
7
+ icon?: ReactNode;
8
+ href?: string;
9
+ component?: ElementType;
10
+ active?: boolean;
11
+ disabled?: boolean;
12
+ onSelect?: () => void;
13
+ };
14
+ export type AppSidebarGroup = {
15
+ key: string;
16
+ items: readonly AppSidebarItem[];
17
+ };
18
+ export type AppSidebarProps = Omit<ComponentPropsWithoutRef<'aside'>, 'title'> & SystemProps & {
19
+ header?: ReactNode;
20
+ groups: readonly AppSidebarGroup[];
21
+ footer?: ReactNode;
22
+ side?: AppSidebarSide;
23
+ itemH?: number;
24
+ onNavigate?: (item: AppSidebarItem) => void;
25
+ testId?: string;
26
+ };
27
+ export declare const AppSidebar: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & SystemProps & {
28
+ header?: ReactNode;
29
+ groups: readonly AppSidebarGroup[];
30
+ footer?: ReactNode;
31
+ side?: AppSidebarSide;
32
+ itemH?: number;
33
+ onNavigate?: (item: AppSidebarItem) => void;
34
+ testId?: string;
35
+ } & import("react").RefAttributes<HTMLElement>>;
36
+ //# sourceMappingURL=AppSidebar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AppSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/AppSidebar/AppSidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,wBAAwB,EAE7B,KAAK,WAAW,EAChB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAK3E,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9C,MAAM,MAAM,cAAc,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAC1E,WAAW,GAAG;IACV,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,SAAS,eAAe,EAAE,CAAC;IACnC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,UAAU;aATN,SAAS;YACV,SAAS,eAAe,EAAE;aACzB,SAAS;WACX,cAAc;YACb,MAAM;iBACD,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI;aAClC,MAAM;+CA6FrB,CAAC"}
@@ -0,0 +1,53 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import { forwardRef, useLayoutEffect, useRef, } from 'react';
4
+ import { splitSystemProps } from '../../theme/systemProps';
5
+ import { cn } from '../../utils/cn';
6
+ import { ScrollArea } from '../ScrollArea/ScrollArea';
7
+ import { Separator } from '../Separator/Separator';
8
+ export const AppSidebar = forwardRef(function AppSidebar({ className, style, header, groups, footer, side = 'left', itemH = 40, onNavigate, testId, ...props }, ref) {
9
+ const contentRef = useRef(null);
10
+ const indicatorRef = useRef(null);
11
+ const activeKey = groups
12
+ .flatMap((group) => group.items)
13
+ .find((item) => item.active)?.key;
14
+ const { systemStyle, restProps } = splitSystemProps(props);
15
+ const sidebarStyle = {
16
+ '--oui-app-sidebar-item-h': `${itemH}px`,
17
+ ...systemStyle,
18
+ ...style,
19
+ };
20
+ useLayoutEffect(() => {
21
+ const root = contentRef.current;
22
+ const indicator = indicatorRef.current;
23
+ const activeItem = root?.querySelector('[data-sidebar-active="true"]');
24
+ if (!root || !indicator || !activeItem) {
25
+ if (indicator)
26
+ indicator.style.opacity = '0';
27
+ return;
28
+ }
29
+ const rootRect = root.getBoundingClientRect();
30
+ const itemRect = activeItem.getBoundingClientRect();
31
+ indicator.style.height = `${itemRect.height}px`;
32
+ indicator.style.transform = `translateY(${itemRect.top - rootRect.top}px)`;
33
+ indicator.style.opacity = '1';
34
+ }, [activeKey, groups]);
35
+ return (_jsxs("aside", { ref: ref, className: cn('oui-app-sidebar', className), "data-side": side, "data-testid": testId, style: sidebarStyle, ...restProps, children: [header ? _jsx("div", { className: 'oui-app-sidebar-head', children: header }) : null, _jsx(ScrollArea, { type: 'auto', scrollbars: 'vertical', className: 'oui-app-sidebar-scroll', children: _jsxs("div", { ref: contentRef, className: 'oui-app-sidebar-content', children: [_jsx("div", { ref: indicatorRef, className: 'oui-app-sidebar-indicator' }), _jsx("div", { className: 'oui-app-sidebar-groups', children: groups.map((group, index) => (_jsxs("div", { className: 'oui-app-sidebar-group', children: [index > 0 ? (_jsx(Separator, { className: 'oui-app-sidebar-separator' })) : null, _jsx("nav", { className: 'oui-app-sidebar-nav', children: group.items.map((item) => (_jsx(AppSidebarNavItem, { item: item, onNavigate: onNavigate }, item.key))) })] }, group.key))) })] }) }), footer ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: 'oui-app-sidebar-footer-separator' }), _jsx("div", { className: 'oui-app-sidebar-footer', children: footer })] })) : null] }));
36
+ });
37
+ function AppSidebarNavItem({ item, onNavigate, }) {
38
+ const content = (_jsxs(_Fragment, { children: [item.icon ? _jsx("span", { className: 'oui-app-sidebar-item-icon', children: item.icon }) : null, _jsx("span", { className: 'oui-app-sidebar-item-label', children: item.label })] }));
39
+ const commonProps = {
40
+ className: 'oui-app-sidebar-item',
41
+ 'data-sidebar-active': item.active ? 'true' : undefined,
42
+ 'aria-current': item.active ? 'page' : undefined,
43
+ onClick: () => {
44
+ item.onSelect?.();
45
+ onNavigate?.(item);
46
+ },
47
+ };
48
+ if (item.href && !item.disabled) {
49
+ const LinkComponent = item.component ?? 'a';
50
+ return (_jsx(LinkComponent, { href: item.href, ...commonProps, children: content }));
51
+ }
52
+ return (_jsx("button", { type: 'button', disabled: item.disabled, ...commonProps, children: content }));
53
+ }
@@ -1,15 +1,17 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
2
- import { type SystemProps, type Tone, type UiSize } from '../../theme/systemProps';
1
+ import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
2
+ import { type SystemProps, type ToneInput, type UiSize } from '../../theme/systemProps';
3
3
  export type BadgeProps = ComponentPropsWithoutRef<'span'> & SystemProps & {
4
- tone?: Tone;
4
+ tone?: ToneInput;
5
5
  size?: UiSize;
6
- v?: 'soft' | 'solid' | 'outline';
6
+ v?: 'soft' | 'solid' | 'outline' | 'surface';
7
+ icon?: ReactNode;
7
8
  testId?: string;
8
9
  };
9
10
  export declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SystemProps & {
10
- tone?: Tone;
11
+ tone?: ToneInput;
11
12
  size?: UiSize;
12
- v?: "soft" | "solid" | "outline";
13
+ v?: "soft" | "solid" | "outline" | "surface";
14
+ icon?: ReactNode;
13
15
  testId?: string;
14
16
  } & import("react").RefAttributes<HTMLSpanElement>>;
15
17
  //# sourceMappingURL=Badge.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,IAAI,EACT,KAAK,MAAM,EACd,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,UAAU,GAAG,wBAAwB,CAAC,MAAM,CAAC,GACrD,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,KAAK;WANH,IAAI;WACJ,MAAM;QACT,MAAM,GAAG,OAAO,GAAG,SAAS;aACvB,MAAM;mDA4BrB,CAAC"}
1
+ {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,EAEH,KAAK,WAAW,EAEhB,KAAK,SAAS,EACd,KAAK,MAAM,EAEd,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,UAAU,GAAG,wBAAwB,CAAC,MAAM,CAAC,GACrD,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,KAAK;WAPH,SAAS;WACT,MAAM;QACT,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS;WACrC,SAAS;aACP,MAAM;mDAiCrB,CAAC"}
@@ -1,8 +1,8 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef } from 'react';
3
3
  import { cn } from '../../utils/cn';
4
- import { splitSystemProps, } from '../../theme/systemProps';
5
- export const Badge = forwardRef(function Badge({ className, style, tone = 'neutral', size = 2, v = 'soft', testId, ...props }, ref) {
4
+ import { splitSystemProps, normalizeTone, } from '../../theme/systemProps';
5
+ export const Badge = forwardRef(function Badge({ className, style, tone = 'neutral', size = 2, v = 'soft', icon, testId, children, ...props }, ref) {
6
6
  const { systemStyle, restProps } = splitSystemProps(props);
7
- return (_jsx("span", { ref: ref, className: cn('oui-badge', className), "data-tone": tone, "data-size": size, "data-variant": v, "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps }));
7
+ return (_jsxs("span", { ref: ref, className: cn('oui-badge', className), "data-tone": normalizeTone(tone), "data-size": size, "data-variant": v, "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps, children: [icon ? _jsx("span", { className: 'oui-badge-icon', children: icon }) : null, children] }));
8
8
  });
@@ -0,0 +1,22 @@
1
+ import { type CSSProperties, type ReactNode } from 'react';
2
+ import { type SystemProps, type ToneInput, type UiSize } from '../../theme/systemProps';
3
+ export type BadgeSelectItem<V extends string = string> = {
4
+ value: V;
5
+ label: ReactNode;
6
+ disabled?: boolean;
7
+ };
8
+ export type BadgeSelectMenuProps<V extends string = string> = SystemProps & {
9
+ value: V | null;
10
+ items: ReadonlyArray<BadgeSelectItem<V>>;
11
+ onValueChange: (value: V) => void;
12
+ tone?: ToneInput;
13
+ width?: number | string;
14
+ maxHeight?: number;
15
+ disabled?: boolean;
16
+ size?: UiSize;
17
+ badgeStyle?: CSSProperties;
18
+ className?: string;
19
+ testId?: string;
20
+ };
21
+ export declare function BadgeSelectMenu<V extends string = string>({ value, items, onValueChange, tone, width, maxHeight, disabled, size, badgeStyle, className, testId, ...props }: BadgeSelectMenuProps<V>): import("react/jsx-runtime").JSX.Element;
22
+ //# sourceMappingURL=BadgeSelectMenu.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BadgeSelectMenu.d.ts","sourceRoot":"","sources":["../../../src/components/BadgeSelectMenu/BadgeSelectMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAGxG,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACrD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,WAAW,GAAG;IACxE,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACvD,KAAK,EACL,KAAK,EACL,aAAa,EACb,IAAgB,EAChB,KAAW,EACX,SAAe,EACf,QAAgB,EAChB,IAAI,EACJ,UAAU,EACV,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACX,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CA4FzB"}
@@ -0,0 +1,50 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { useMemo, useState } from 'react';
4
+ import { LuCheck } from 'react-icons/lu';
5
+ import { Badge } from '../Badge/Badge';
6
+ import { Popover } from '../Popover/Popover';
7
+ import { splitSystemProps } from '../../theme/systemProps';
8
+ import { cn } from '../../utils/cn';
9
+ export function BadgeSelectMenu({ value, items, onValueChange, tone = 'neutral', width = 220, maxHeight = 280, disabled = false, size, badgeStyle, className, testId, ...props }) {
10
+ const [open, setOpen] = useState(false);
11
+ const [highlightedValue, setHighlightedValue] = useState(null);
12
+ const { systemStyle, restProps } = splitSystemProps(props);
13
+ const currentValue = value ?? items[0]?.value ?? null;
14
+ const currentItem = useMemo(() => items.find((item) => item.value === currentValue) ?? null, [currentValue, items]);
15
+ const currentLabel = currentItem?.label ?? currentValue;
16
+ const triggerBadge = (_jsx(Badge, { tone: tone, v: 'soft', r: 7, size: size, "data-state": open ? 'open' : 'closed', className: 'oui-badge-select-trigger', testId: testId, style: {
17
+ cursor: disabled ? 'default' : 'pointer',
18
+ flexShrink: 0,
19
+ opacity: disabled ? 0.6 : 1,
20
+ ...systemStyle,
21
+ ...badgeStyle,
22
+ }, children: currentLabel }));
23
+ if (disabled) {
24
+ return triggerBadge;
25
+ }
26
+ return (_jsx(Popover, { open: open, onOpenChange: (nextOpen) => {
27
+ setOpen(nextOpen);
28
+ if (!nextOpen)
29
+ setHighlightedValue(null);
30
+ }, trigger: triggerBadge, className: cn('oui-select-content oui-badge-select-content', className), contentStyle: {
31
+ width,
32
+ maxWidth: 320,
33
+ }, sideOffset: 4, testId: testId ? `${testId}-menu` : undefined, ...restProps, children: _jsx("div", { className: 'oui-combobox-scroll oui-combobox-options oui-badge-select-options', style: { maxHeight }, children: items.map((item) => {
34
+ const isSelected = item.value === currentValue;
35
+ const isHighlighted = item.value === highlightedValue;
36
+ return (_jsxs("button", { type: 'button', className: 'oui-combobox-option oui-badge-select-option', "data-selected": isSelected ? 'true' : 'false', "data-highlighted": isHighlighted ? 'true' : 'false', disabled: item.disabled, onMouseEnter: () => {
37
+ if (!item.disabled)
38
+ setHighlightedValue(item.value);
39
+ }, onFocus: () => {
40
+ if (!item.disabled)
41
+ setHighlightedValue(item.value);
42
+ }, onClick: () => {
43
+ if (item.disabled)
44
+ return;
45
+ setOpen(false);
46
+ setHighlightedValue(null);
47
+ onValueChange(item.value);
48
+ }, children: [_jsx("span", { className: 'oui-combobox-option-main', children: item.label }), isSelected ? (_jsx(LuCheck, { className: 'oui-combobox-check', size: 15 })) : null] }, item.value));
49
+ }) }) }));
50
+ }
@@ -2,10 +2,12 @@ import { type ComponentPropsWithoutRef, type ElementType } from 'react';
2
2
  import { type SystemProps } from '../../theme/systemProps';
3
3
  export type BoxProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
4
4
  as?: ElementType;
5
+ asChild?: boolean;
5
6
  testId?: string;
6
7
  };
7
8
  export declare const Box: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SystemProps & {
8
9
  as?: ElementType;
10
+ asChild?: boolean;
9
11
  testId?: string;
10
12
  } & import("react").RefAttributes<HTMLElement>>;
11
13
  //# sourceMappingURL=Box.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EACnB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAE3E,MAAM,MAAM,QAAQ,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAClD,WAAW,GAAG;IACV,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,GAAG;SAJH,WAAW;aACP,MAAM;+CAiBrB,CAAC"}
1
+ {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEnB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,QAAQ,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAClD,WAAW,GAAG;IACV,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,GAAG;SALH,WAAW;cACN,OAAO;aACR,MAAM;+CA8BrB,CAAC"}
@@ -2,7 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { forwardRef, } from 'react';
3
3
  import { cn } from '../../utils/cn';
4
4
  import { splitSystemProps } from '../../theme/systemProps';
5
- export const Box = forwardRef(function Box({ as: Component = 'div', className, style, testId, ...props }, ref) {
5
+ import { renderSlot } from '../../utils/slot';
6
+ export const Box = forwardRef(function Box({ as: Component = 'div', asChild = false, className, style, testId, children, ...props }, ref) {
6
7
  const { systemStyle, restProps } = splitSystemProps(props);
7
- return (_jsx(Component, { ref: ref, className: cn('oui-box', className), "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps }));
8
+ const commonProps = {
9
+ className: cn('oui-box', className),
10
+ 'data-testid': testId,
11
+ style: { ...systemStyle, ...style },
12
+ ...restProps,
13
+ };
14
+ if (asChild) {
15
+ return renderSlot(children, {
16
+ ...commonProps,
17
+ ref: ref,
18
+ });
19
+ }
20
+ return (_jsx(Component, { ref: ref, ...commonProps, children: children }));
8
21
  });
@@ -1,27 +1,31 @@
1
1
  import { type ButtonHTMLAttributes, type ReactNode } from 'react';
2
- import { type SystemProps, type Tone, type UiSize } from '../../theme/systemProps';
2
+ import { type SystemProps, type ToneInput, type UiSize } from '../../theme/systemProps';
3
3
  import type { ButtonPressAnimation } from '../../theme/themeTypes';
4
4
  export type ButtonVariant = 'solid' | 'soft' | 'surface' | 'pad' | 'ghost' | 'outline';
5
5
  export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & SystemProps & {
6
6
  size?: UiSize;
7
7
  v?: ButtonVariant;
8
- tone?: Tone;
8
+ tone?: ToneInput;
9
9
  loading?: boolean;
10
10
  fullWidth?: boolean;
11
11
  leftIcon?: ReactNode;
12
12
  rightIcon?: ReactNode;
13
13
  pressAnimation?: ButtonPressAnimation;
14
+ asChild?: boolean;
15
+ children?: ReactNode;
14
16
  testId?: string;
15
17
  };
16
18
  export declare const Button: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & SystemProps & {
17
19
  size?: UiSize;
18
20
  v?: ButtonVariant;
19
- tone?: Tone;
21
+ tone?: ToneInput;
20
22
  loading?: boolean;
21
23
  fullWidth?: boolean;
22
24
  leftIcon?: ReactNode;
23
25
  rightIcon?: ReactNode;
24
26
  pressAnimation?: ButtonPressAnimation;
27
+ asChild?: boolean;
28
+ children?: ReactNode;
25
29
  testId?: string;
26
30
  } & import("react").RefAttributes<HTMLButtonElement>>;
27
31
  //# sourceMappingURL=Button.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,IAAI,EACT,KAAK,MAAM,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAGjE,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvF,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAC7D,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,aAAa,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,MAAM;WAXJ,MAAM;QACT,aAAa;WACV,IAAI;cACD,OAAO;gBACL,OAAO;eACR,SAAS;gBACR,SAAS;qBACJ,oBAAoB;aAC5B,MAAM;qDAgDrB,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,KAAK,oBAAoB,EAEzB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEH,KAAK,WAAW,EAEhB,KAAK,SAAS,EACd,KAAK,MAAM,EAEd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAIjE,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvF,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAC7D,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,aAAa,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,MAAM;WAbJ,MAAM;QACT,aAAa;WACV,SAAS;cACN,OAAO;gBACL,OAAO;eACR,SAAS;gBACR,SAAS;qBACJ,oBAAoB;cAC3B,OAAO;eACN,SAAS;aACX,MAAM;qDA6DrB,CAAC"}
@@ -2,12 +2,32 @@
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { forwardRef, useContext, } from 'react';
4
4
  import { cn } from '../../utils/cn';
5
- import { splitSystemProps, } from '../../theme/systemProps';
5
+ import { splitSystemProps, normalizeTone, } from '../../theme/systemProps';
6
6
  import { OrcestrThemeContext } from '../../theme/useTheme';
7
+ import { renderSlot } from '../../utils/slot';
7
8
  import { Spinner } from '../Spinner/Spinner';
8
- export const Button = forwardRef(function Button({ className, style, size = 3, v = 'solid', tone = 'neutral', loading = false, fullWidth = false, leftIcon, rightIcon, pressAnimation, testId, children, disabled, type = 'button', ...props }, ref) {
9
+ export const Button = forwardRef(function Button({ className, style, size = 3, v = 'solid', tone = 'neutral', loading = false, fullWidth = false, leftIcon, rightIcon, pressAnimation, asChild = false, testId, children, disabled, type = 'button', ...props }, ref) {
9
10
  const themeContext = useContext(OrcestrThemeContext);
10
11
  const actualPressAnimation = pressAnimation ?? themeContext?.theme.motion.pressAnimation ?? 'soft';
11
12
  const { systemStyle, restProps } = splitSystemProps(props);
12
- return (_jsxs("button", { ref: ref, type: type, className: cn('oui-button', fullWidth && 'oui-button-full', className), "data-size": size, "data-variant": v, "data-tone": tone, "data-press-animation": actualPressAnimation, "data-loading": loading ? 'true' : undefined, "data-testid": testId, "aria-busy": loading ? 'true' : undefined, disabled: disabled || loading, style: { ...systemStyle, ...style }, ...restProps, children: [loading ? _jsx(Spinner, { size: 1 }) : leftIcon, _jsx("span", { className: 'oui-button-label', children: children }), rightIcon] }));
13
+ const commonProps = {
14
+ className: cn('oui-button', fullWidth && 'oui-button-full', className),
15
+ 'data-size': size,
16
+ 'data-variant': v,
17
+ 'data-tone': normalizeTone(tone),
18
+ 'data-press-animation': actualPressAnimation,
19
+ 'data-loading': loading ? 'true' : undefined,
20
+ 'data-testid': testId,
21
+ 'aria-busy': loading || undefined,
22
+ style: { ...systemStyle, ...style },
23
+ ...restProps,
24
+ };
25
+ if (asChild) {
26
+ return renderSlot(children, {
27
+ ...commonProps,
28
+ ref: ref,
29
+ 'aria-disabled': disabled || loading ? true : undefined,
30
+ });
31
+ }
32
+ return (_jsxs("button", { ref: ref, type: type, ...commonProps, disabled: disabled || loading, children: [loading ? _jsx(Spinner, { size: 1 }) : leftIcon, _jsx("span", { className: 'oui-button-label', children: children }), rightIcon] }));
13
33
  });
@@ -0,0 +1,26 @@
1
+ import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';
2
+ import { type SystemProps, type UiSize } from '../../theme/systemProps';
3
+ export type CardVariant = 'ghost' | 'surface' | 'soft' | 'classic';
4
+ export type CardProps<C extends ElementType = 'div'> = SystemProps & {
5
+ as?: C;
6
+ children?: ReactNode;
7
+ className?: string;
8
+ style?: ComponentPropsWithoutRef<'div'>['style'];
9
+ size?: UiSize;
10
+ v?: CardVariant;
11
+ interactive?: boolean;
12
+ asChild?: boolean;
13
+ testId?: string;
14
+ } & Omit<ComponentPropsWithoutRef<C>, keyof SystemProps | 'as' | 'children' | 'className' | 'style' | 'size'>;
15
+ export declare const Card: import("react").ForwardRefExoticComponent<SystemProps & {
16
+ as?: "div" | undefined;
17
+ children?: ReactNode;
18
+ className?: string;
19
+ style?: ComponentPropsWithoutRef<"div">["style"];
20
+ size?: UiSize;
21
+ v?: CardVariant;
22
+ interactive?: boolean;
23
+ asChild?: boolean;
24
+ testId?: string;
25
+ } & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SystemProps | "children" | "style" | "className" | "as"> & import("react").RefAttributes<HTMLDivElement>>;
26
+ //# sourceMappingURL=Card.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEhB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAIxF,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAEnE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,GAAG;IACjE,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,wBAAwB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,WAAW,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAE9G,eAAO,MAAM,IAAI;;eAVF,SAAS;gBACR,MAAM;YACV,wBAAwB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;WACzC,MAAM;QACT,WAAW;kBACD,OAAO;cACX,OAAO;aACR,MAAM;wOA6CjB,CAAC"}
@@ -0,0 +1,25 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { forwardRef, } from 'react';
3
+ import { splitSystemProps } from '../../theme/systemProps';
4
+ import { cn } from '../../utils/cn';
5
+ import { renderSlot } from '../../utils/slot';
6
+ export const Card = forwardRef(function Card({ as, className, style, size = 2, v = 'ghost', interactive = false, asChild = false, testId, children, ...props }, ref) {
7
+ const Component = as ?? 'div';
8
+ const { systemStyle, restProps } = splitSystemProps(props);
9
+ const commonProps = {
10
+ className: cn('oui-card', className),
11
+ 'data-size': size,
12
+ 'data-variant': v,
13
+ 'data-interactive': interactive ? 'true' : undefined,
14
+ 'data-testid': testId,
15
+ style: { ...systemStyle, ...style },
16
+ ...restProps,
17
+ };
18
+ if (asChild) {
19
+ return renderSlot(children, {
20
+ ...commonProps,
21
+ ref: ref,
22
+ });
23
+ }
24
+ return (_jsx(Component, { ref: ref, ...commonProps, children: children }));
25
+ });
@@ -1,10 +1,14 @@
1
1
  import { type InputHTMLAttributes, type ReactNode } from 'react';
2
- export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
2
+ export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked'> & {
3
3
  label?: ReactNode;
4
+ checked?: boolean | 'indeterminate';
5
+ onCheckedChange?: (checked: boolean) => void;
4
6
  testId?: string;
5
7
  };
6
- export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
8
+ export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "checked"> & {
7
9
  label?: ReactNode;
10
+ checked?: boolean | "indeterminate";
11
+ onCheckedChange?: (checked: boolean) => void;
8
12
  testId?: string;
9
13
  } & import("react").RefAttributes<HTMLInputElement>>;
10
14
  //# sourceMappingURL=Checkbox.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG;IAC9E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,QAAQ;YAJT,SAAS;aACR,MAAM;oDA+ClB,CAAC"}
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,GAAG;IAC1F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,QAAQ;YANT,SAAS;cACP,OAAO,GAAG,eAAe;sBACjB,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;aACnC,MAAM;oDA2DlB,CAAC"}
@@ -1,15 +1,24 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { forwardRef, useState, } from 'react';
4
- import { LuCheck } from 'react-icons/lu';
3
+ import { forwardRef, useEffect, useRef, useState, } from 'react';
4
+ import { LuCheck, LuMinus } from 'react-icons/lu';
5
5
  import { cn } from '../../utils/cn';
6
- export const Checkbox = forwardRef(function Checkbox({ className, label, children, checked, defaultChecked, disabled, onChange, testId, ...props }, ref) {
6
+ import { composeRefs } from '../../utils/composeRefs';
7
+ export const Checkbox = forwardRef(function Checkbox({ className, label, children, checked, defaultChecked, disabled, onChange, onCheckedChange, testId, dangerouslySetInnerHTML: _dangerouslySetInnerHTML, ...props }, ref) {
8
+ const inputRef = useRef(null);
7
9
  const [internalChecked, setInternalChecked] = useState(Boolean(defaultChecked));
8
10
  const actualChecked = checked ?? internalChecked;
11
+ const inputChecked = actualChecked === 'indeterminate' ? false : actualChecked;
9
12
  const handleChange = (event) => {
10
13
  if (checked === undefined)
11
14
  setInternalChecked(event.target.checked);
12
15
  onChange?.(event);
16
+ onCheckedChange?.(event.target.checked);
13
17
  };
14
- return (_jsxs("label", { className: cn('oui-checkbox', className), "data-checked": actualChecked ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, "data-testid": testId, children: [_jsx("input", { ref: ref, type: 'checkbox', checked: actualChecked, disabled: disabled, onChange: handleChange, ...props }), _jsx("span", { className: 'oui-checkbox-box', children: _jsx(LuCheck, { size: 13 }) }), label || children ? _jsx("span", { children: label ?? children }) : null] }));
18
+ useEffect(() => {
19
+ if (!inputRef.current)
20
+ return;
21
+ inputRef.current.indeterminate = actualChecked === 'indeterminate';
22
+ }, [actualChecked]);
23
+ return (_jsxs("label", { className: cn('oui-checkbox', className), "data-checked": actualChecked === true ? 'true' : undefined, "data-indeterminate": actualChecked === 'indeterminate' ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, "data-testid": testId, children: [_jsx("input", { ref: composeRefs(inputRef, ref), type: 'checkbox', checked: inputChecked, disabled: disabled, onChange: handleChange, ...props }), _jsxs("span", { className: 'oui-checkbox-box', children: [_jsx(LuCheck, { className: 'oui-checkbox-check', size: 13 }), _jsx(LuMinus, { className: 'oui-checkbox-minus', size: 13 })] }), label || children ? _jsx("span", { children: label ?? children }) : null] }));
15
24
  });
@@ -1 +1 @@
1
- {"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../src/components/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAIf,OAAO,EAGH,KAAK,iBAAiB,EACzB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB,CAAC;AAQF,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAgB,EAChB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,gBAAqB,EACrB,MAAM,GACT,EAAE;IACC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CA2QA"}
1
+ {"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../src/components/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAIf,OAAO,EAGH,KAAK,iBAAiB,EACzB,MAAM,uBAAuB,CAAC;AAQ/B,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB,CAAC;AAQF,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAgB,EAChB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,gBAAqB,EACrB,MAAM,GACT,EAAE;IACC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CAuRA"}