@usefragments/ui 1.5.4 → 1.6.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.
- package/README.md +1 -1
- package/dist/assets/ui.css +8808 -5810
- package/dist/chart.cjs +7 -20
- package/dist/chart.js +7 -20
- package/dist/colorpicker.cjs +2 -1
- package/dist/colorpicker.js +2 -1
- package/dist/components/Accordion/Accordion.module.scss.cjs +8 -8
- package/dist/components/Accordion/Accordion.module.scss.js +8 -8
- package/dist/components/Alert/Alert.module.scss.cjs +12 -12
- package/dist/components/Alert/Alert.module.scss.js +12 -12
- package/dist/components/AppShell/AppShell.module.scss.cjs +14 -14
- package/dist/components/AppShell/AppShell.module.scss.js +14 -14
- package/dist/components/AppShell/index.cjs +5 -3
- package/dist/components/AppShell/index.d.ts +4 -2
- package/dist/components/AppShell/index.d.ts.map +1 -1
- package/dist/components/AppShell/index.js +5 -3
- package/dist/components/Avatar/Avatar.module.scss.cjs +17 -14
- package/dist/components/Avatar/Avatar.module.scss.js +17 -14
- package/dist/components/Avatar/index.cjs +100 -118
- package/dist/components/Avatar/index.d.ts +7 -5
- package/dist/components/Avatar/index.d.ts.map +1 -1
- package/dist/components/Avatar/index.js +100 -118
- package/dist/components/Badge/Badge.module.scss.cjs +19 -19
- package/dist/components/Badge/Badge.module.scss.js +19 -19
- package/dist/components/BentoGrid/BentoGrid.module.scss.cjs +14 -14
- package/dist/components/BentoGrid/BentoGrid.module.scss.js +14 -14
- package/dist/components/Box/Box.module.scss.cjs +152 -152
- package/dist/components/Box/Box.module.scss.js +152 -152
- package/dist/components/Breadcrumbs/Breadcrumbs.module.scss.cjs +8 -8
- package/dist/components/Breadcrumbs/Breadcrumbs.module.scss.js +8 -8
- package/dist/components/Button/Button.module.scss.cjs +14 -14
- package/dist/components/Button/Button.module.scss.js +14 -14
- package/dist/components/ButtonGroup/ButtonGroup.module.scss.cjs +15 -15
- package/dist/components/ButtonGroup/ButtonGroup.module.scss.js +15 -15
- package/dist/components/Card/Card.module.scss.cjs +18 -18
- package/dist/components/Card/Card.module.scss.js +18 -18
- package/dist/components/Chart/Chart.module.scss.cjs +15 -15
- package/dist/components/Chart/Chart.module.scss.js +15 -15
- package/dist/components/Chart/index.d.ts +7 -7
- package/dist/components/Chart/index.d.ts.map +1 -1
- package/dist/components/Checkbox/Checkbox.module.scss.cjs +9 -15
- package/dist/components/Checkbox/Checkbox.module.scss.js +9 -15
- package/dist/components/Checkbox/index.cjs +4 -6
- package/dist/components/Checkbox/index.d.ts.map +1 -1
- package/dist/components/Checkbox/index.js +4 -6
- package/dist/components/Chip/Chip.module.scss.cjs +15 -15
- package/dist/components/Chip/Chip.module.scss.js +15 -15
- package/dist/components/Chip/index.cjs +4 -5
- package/dist/components/Chip/index.d.ts +1 -1
- package/dist/components/Chip/index.d.ts.map +1 -1
- package/dist/components/Chip/index.js +2 -3
- package/dist/components/CodeBlock/CodeBlock.module.scss.cjs +22 -22
- package/dist/components/CodeBlock/CodeBlock.module.scss.js +22 -22
- package/dist/components/Collapsible/Collapsible.module.scss.cjs +9 -12
- package/dist/components/Collapsible/Collapsible.module.scss.js +9 -12
- package/dist/components/Collapsible/index.cjs +3 -2
- package/dist/components/Collapsible/index.d.ts +3 -3
- package/dist/components/Collapsible/index.d.ts.map +1 -1
- package/dist/components/Collapsible/index.js +3 -2
- package/dist/components/ColorPicker/ColorPicker.module.scss.cjs +16 -16
- package/dist/components/ColorPicker/ColorPicker.module.scss.js +16 -16
- package/dist/components/ColorPicker/index.d.ts.map +1 -1
- package/dist/components/Combobox/Combobox.module.scss.cjs +21 -27
- package/dist/components/Combobox/Combobox.module.scss.js +21 -27
- package/dist/components/Combobox/index.cjs +4 -4
- package/dist/components/Combobox/index.d.ts.map +1 -1
- package/dist/components/Combobox/index.js +4 -4
- package/dist/components/Command/Command.module.scss.cjs +11 -11
- package/dist/components/Command/Command.module.scss.js +11 -11
- package/dist/components/ConversationList/ConversationList.module.scss.cjs +11 -14
- package/dist/components/ConversationList/ConversationList.module.scss.js +11 -14
- package/dist/components/ConversationList/index.cjs +40 -44
- package/dist/components/ConversationList/index.d.ts +3 -3
- package/dist/components/ConversationList/index.d.ts.map +1 -1
- package/dist/components/ConversationList/index.js +40 -44
- package/dist/components/DataTable/DataTable.module.scss.cjs +32 -56
- package/dist/components/DataTable/DataTable.module.scss.js +32 -56
- package/dist/components/DataTable/index.d.ts +5 -4
- package/dist/components/DataTable/index.d.ts.map +1 -1
- package/dist/components/DatePicker/DatePicker.module.scss.cjs +33 -33
- package/dist/components/DatePicker/DatePicker.module.scss.js +33 -33
- package/dist/components/DatePicker/index.d.ts.map +1 -1
- package/dist/components/Dialog/Dialog.module.scss.cjs +14 -14
- package/dist/components/Dialog/Dialog.module.scss.js +14 -14
- package/dist/components/Drawer/Drawer.module.scss.cjs +31 -28
- package/dist/components/Drawer/Drawer.module.scss.js +31 -28
- package/dist/components/Drawer/index.cjs +1 -1
- package/dist/components/Drawer/index.js +1 -1
- package/dist/components/Editor/Editor.module.scss.cjs +23 -23
- package/dist/components/Editor/Editor.module.scss.js +23 -23
- package/dist/components/EmptyState/EmptyState.module.scss.cjs +12 -12
- package/dist/components/EmptyState/EmptyState.module.scss.js +12 -12
- package/dist/components/Field/Field.module.scss.cjs +8 -5
- package/dist/components/Field/Field.module.scss.js +8 -5
- package/dist/components/Field/index.cjs +10 -1
- package/dist/components/Field/index.d.ts +9 -2
- package/dist/components/Field/index.d.ts.map +1 -1
- package/dist/components/Field/index.js +10 -1
- package/dist/components/Fieldset/Fieldset.module.scss.cjs +3 -3
- package/dist/components/Fieldset/Fieldset.module.scss.js +3 -3
- package/dist/components/Form/Form.module.scss.cjs +5 -2
- package/dist/components/Form/Form.module.scss.js +5 -2
- package/dist/components/Form/index.cjs +6 -1
- package/dist/components/Form/index.d.ts +8 -3
- package/dist/components/Form/index.d.ts.map +1 -1
- package/dist/components/Form/index.js +6 -1
- package/dist/components/Grid/Grid.module.scss.cjs +54 -72
- package/dist/components/Grid/Grid.module.scss.js +54 -72
- package/dist/components/Grid/index.cjs +57 -77
- package/dist/components/Grid/index.d.ts +11 -11
- package/dist/components/Grid/index.d.ts.map +1 -1
- package/dist/components/Grid/index.js +57 -77
- package/dist/components/Header/Header.module.scss.cjs +33 -33
- package/dist/components/Header/Header.module.scss.js +33 -33
- package/dist/components/Header/index.cjs +2 -1
- package/dist/components/Header/index.d.ts.map +1 -1
- package/dist/components/Header/index.js +2 -1
- package/dist/components/Icon/Icon.module.scss.cjs +29 -8
- package/dist/components/Icon/Icon.module.scss.js +30 -9
- package/dist/components/Icon/index.cjs +30 -48
- package/dist/components/Icon/index.d.ts +6 -6
- package/dist/components/Icon/index.d.ts.map +1 -1
- package/dist/components/Icon/index.js +30 -48
- package/dist/components/IconButton/IconButton.module.scss.cjs +8 -8
- package/dist/components/IconButton/IconButton.module.scss.js +8 -8
- package/dist/components/Input/Input.module.scss.cjs +19 -25
- package/dist/components/Input/Input.module.scss.js +19 -25
- package/dist/components/Input/index.cjs +1 -2
- package/dist/components/Input/index.d.ts.map +1 -1
- package/dist/components/Input/index.js +1 -2
- package/dist/components/Link/Link.module.scss.cjs +10 -10
- package/dist/components/Link/Link.module.scss.js +10 -10
- package/dist/components/List/List.module.scss.cjs +19 -19
- package/dist/components/List/List.module.scss.js +19 -19
- package/dist/components/List/index.cjs +4 -7
- package/dist/components/List/index.d.ts.map +1 -1
- package/dist/components/List/index.js +4 -7
- package/dist/components/Listbox/Listbox.module.scss.cjs +9 -9
- package/dist/components/Listbox/Listbox.module.scss.js +9 -9
- package/dist/components/Loading/Loading.module.scss.cjs +30 -30
- package/dist/components/Loading/Loading.module.scss.js +30 -30
- package/dist/components/Loading/index.cjs +39 -67
- package/dist/components/Loading/index.d.ts +6 -6
- package/dist/components/Loading/index.d.ts.map +1 -1
- package/dist/components/Loading/index.js +39 -67
- package/dist/components/Main/Main.module.scss.cjs +7 -7
- package/dist/components/Main/Main.module.scss.js +7 -7
- package/dist/components/Markdown/Markdown.module.scss.cjs +1 -1
- package/dist/components/Markdown/Markdown.module.scss.js +1 -1
- package/dist/components/Menu/Menu.module.scss.cjs +16 -16
- package/dist/components/Menu/Menu.module.scss.js +16 -16
- package/dist/components/Menu/index.cjs +19 -61
- package/dist/components/Menu/index.d.ts +10 -10
- package/dist/components/Menu/index.d.ts.map +1 -1
- package/dist/components/Menu/index.js +19 -61
- package/dist/components/Message/Message.module.scss.cjs +18 -21
- package/dist/components/Message/Message.module.scss.js +18 -21
- package/dist/components/Message/index.cjs +15 -2
- package/dist/components/Message/index.d.ts.map +1 -1
- package/dist/components/Message/index.js +15 -2
- package/dist/components/NavigationMenu/NavigationMenu.module.scss.cjs +28 -28
- package/dist/components/NavigationMenu/NavigationMenu.module.scss.js +28 -28
- package/dist/components/Pagination/Pagination.module.scss.cjs +18 -9
- package/dist/components/Pagination/Pagination.module.scss.js +19 -10
- package/dist/components/Pagination/index.cjs +5 -2
- package/dist/components/Pagination/index.d.ts +3 -1
- package/dist/components/Pagination/index.d.ts.map +1 -1
- package/dist/components/Pagination/index.js +5 -2
- package/dist/components/Popover/Popover.module.scss.cjs +10 -10
- package/dist/components/Popover/Popover.module.scss.js +10 -10
- package/dist/components/Progress/Progress.module.scss.cjs +29 -32
- package/dist/components/Progress/Progress.module.scss.js +29 -32
- package/dist/components/Progress/geometry.cjs +30 -0
- package/dist/components/Progress/geometry.d.ts +8 -0
- package/dist/components/Progress/geometry.d.ts.map +1 -0
- package/dist/components/Progress/geometry.js +30 -0
- package/dist/components/Progress/index.cjs +40 -29
- package/dist/components/Progress/index.d.ts +4 -3
- package/dist/components/Progress/index.d.ts.map +1 -1
- package/dist/components/Progress/index.js +40 -29
- package/dist/components/Prompt/Prompt.module.scss.cjs +29 -29
- package/dist/components/Prompt/Prompt.module.scss.js +29 -29
- package/dist/components/Prompt/index.cjs +5 -4
- package/dist/components/Prompt/index.d.ts.map +1 -1
- package/dist/components/Prompt/index.js +5 -4
- package/dist/components/RadioGroup/RadioGroup.module.scss.cjs +15 -21
- package/dist/components/RadioGroup/RadioGroup.module.scss.js +15 -21
- package/dist/components/RadioGroup/index.cjs +7 -6
- package/dist/components/RadioGroup/index.d.ts.map +1 -1
- package/dist/components/RadioGroup/index.js +7 -6
- package/dist/components/ScrollArea/ScrollArea.module.scss.cjs +7 -22
- package/dist/components/ScrollArea/ScrollArea.module.scss.js +7 -22
- package/dist/components/ScrollArea/index.cjs +66 -42
- package/dist/components/ScrollArea/index.d.ts +3 -2
- package/dist/components/ScrollArea/index.d.ts.map +1 -1
- package/dist/components/ScrollArea/index.js +66 -42
- package/dist/components/ScrollArea/scroll-state.cjs +58 -0
- package/dist/components/ScrollArea/scroll-state.d.ts +16 -0
- package/dist/components/ScrollArea/scroll-state.d.ts.map +1 -0
- package/dist/components/ScrollArea/scroll-state.js +58 -0
- package/dist/components/Select/Select.module.scss.cjs +21 -21
- package/dist/components/Select/Select.module.scss.js +21 -21
- package/dist/components/Select/index.cjs +3 -2
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +3 -2
- package/dist/components/Separator/Separator.module.scss.cjs +13 -10
- package/dist/components/Separator/Separator.module.scss.js +13 -10
- package/dist/components/Separator/index.cjs +37 -38
- package/dist/components/Separator/index.d.ts +4 -4
- package/dist/components/Separator/index.d.ts.map +1 -1
- package/dist/components/Separator/index.js +37 -38
- package/dist/components/Sidebar/Sidebar.module.scss.cjs +43 -43
- package/dist/components/Sidebar/Sidebar.module.scss.js +43 -43
- package/dist/components/Sidebar/index.cjs +5 -3
- package/dist/components/Sidebar/index.d.ts +6 -1
- package/dist/components/Sidebar/index.d.ts.map +1 -1
- package/dist/components/Sidebar/index.js +5 -3
- package/dist/components/Skeleton/Skeleton.module.scss.cjs +50 -38
- package/dist/components/Skeleton/Skeleton.module.scss.js +50 -38
- package/dist/components/Skeleton/index.cjs +41 -55
- package/dist/components/Skeleton/index.d.ts +7 -7
- package/dist/components/Skeleton/index.d.ts.map +1 -1
- package/dist/components/Skeleton/index.js +41 -55
- package/dist/components/Slider/Slider.module.scss.cjs +12 -12
- package/dist/components/Slider/Slider.module.scss.js +12 -12
- package/dist/components/Stack/Stack.module.scss.cjs +25 -45
- package/dist/components/Stack/Stack.module.scss.js +25 -45
- package/dist/components/Stack/index.cjs +106 -101
- package/dist/components/Stack/index.d.ts +7 -7
- package/dist/components/Stack/index.d.ts.map +1 -1
- package/dist/components/Stack/index.js +106 -101
- package/dist/components/Switch/Switch.module.scss.cjs +32 -0
- package/dist/components/Switch/Switch.module.scss.js +32 -0
- package/dist/components/{Toggle → Switch}/index.cjs +9 -14
- package/dist/components/Switch/index.d.ts +37 -1
- package/dist/components/Switch/index.d.ts.map +1 -1
- package/dist/components/{Toggle → Switch}/index.js +5 -10
- package/dist/components/Table/Table.module.scss.cjs +18 -27
- package/dist/components/Table/Table.module.scss.js +18 -27
- package/dist/components/Table/index.d.ts +6 -5
- package/dist/components/Table/index.d.ts.map +1 -1
- package/dist/components/TableOfContents/TableOfContents.module.scss.cjs +15 -15
- package/dist/components/TableOfContents/TableOfContents.module.scss.js +15 -15
- package/dist/components/Tabs/Tabs.module.scss.cjs +12 -12
- package/dist/components/Tabs/Tabs.module.scss.js +12 -12
- package/dist/components/Tabs/index.cjs +2 -2
- package/dist/components/Tabs/index.js +2 -2
- package/dist/components/Text/Text.module.scss.cjs +93 -57
- package/dist/components/Text/Text.module.scss.js +93 -57
- package/dist/components/Text/index.cjs +14 -6
- package/dist/components/Text/index.d.ts +25 -15
- package/dist/components/Text/index.d.ts.map +1 -1
- package/dist/components/Text/index.js +14 -6
- package/dist/components/Textarea/Textarea.module.scss.cjs +26 -23
- package/dist/components/Textarea/Textarea.module.scss.js +26 -23
- package/dist/components/Textarea/index.cjs +5 -10
- package/dist/components/Textarea/index.d.ts.map +1 -1
- package/dist/components/Textarea/index.js +5 -10
- package/dist/components/Theme/context.cjs +39 -0
- package/dist/components/Theme/context.d.ts +21 -0
- package/dist/components/Theme/context.d.ts.map +1 -0
- package/dist/components/Theme/context.js +22 -0
- package/dist/components/Theme/index.cjs +14 -209
- package/dist/components/Theme/index.d.ts +4 -37
- package/dist/components/Theme/index.d.ts.map +1 -1
- package/dist/components/Theme/index.js +9 -204
- package/dist/components/{Theme → ThemeToggle}/ThemeToggle.module.scss.cjs +6 -6
- package/dist/components/ThemeToggle/ThemeToggle.module.scss.js +23 -0
- package/dist/components/ThemeToggle/index.cjs +115 -0
- package/dist/components/ThemeToggle/index.d.ts +21 -0
- package/dist/components/ThemeToggle/index.d.ts.map +1 -0
- package/dist/components/ThemeToggle/index.js +115 -0
- package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.cjs +13 -13
- package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.js +13 -13
- package/dist/components/ThinkingIndicator/index.cjs +34 -41
- package/dist/components/ThinkingIndicator/index.d.ts +4 -4
- package/dist/components/ThinkingIndicator/index.d.ts.map +1 -1
- package/dist/components/ThinkingIndicator/index.js +34 -41
- package/dist/components/Toast/Toast.module.scss.cjs +20 -20
- package/dist/components/Toast/Toast.module.scss.js +20 -20
- package/dist/components/Toggle/index.d.ts +2 -42
- package/dist/components/Toggle/index.d.ts.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.module.scss.cjs +20 -20
- package/dist/components/ToggleGroup/ToggleGroup.module.scss.js +20 -20
- package/dist/components/ToggleGroup/index.cjs +3 -2
- package/dist/components/ToggleGroup/index.d.ts +2 -1
- package/dist/components/ToggleGroup/index.d.ts.map +1 -1
- package/dist/components/ToggleGroup/index.js +3 -2
- package/dist/components/Tooltip/Tooltip.module.scss.cjs +3 -3
- package/dist/components/Tooltip/Tooltip.module.scss.js +3 -3
- package/dist/components/VisuallyHidden/VisuallyHidden.module.scss.cjs +1 -1
- package/dist/components/VisuallyHidden/VisuallyHidden.module.scss.js +1 -1
- package/dist/data-table.cjs +12 -9
- package/dist/data-table.js +12 -9
- package/dist/datepicker.cjs +2 -1
- package/dist/datepicker.js +2 -1
- package/dist/index.cjs +100 -98
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -2
- package/dist/markdown.cjs +1 -1
- package/dist/markdown.js +2 -2
- package/dist/measurements/generated.cjs +296 -0
- package/dist/measurements/generated.d.ts +261 -0
- package/dist/measurements/generated.d.ts.map +1 -0
- package/dist/measurements/generated.js +296 -0
- package/dist/measurements/index.d.ts +2 -0
- package/dist/measurements/index.d.ts.map +1 -0
- package/dist/measurements.cjs +6 -0
- package/dist/measurements.js +6 -0
- package/dist/recipes/popup.cjs +14 -0
- package/dist/recipes/popup.d.ts +4 -0
- package/dist/recipes/popup.d.ts.map +1 -0
- package/dist/recipes/popup.js +14 -0
- package/dist/recipes/table-chrome.cjs +18 -0
- package/dist/recipes/table-chrome.d.ts +10 -0
- package/dist/recipes/table-chrome.d.ts.map +1 -0
- package/dist/recipes/table-chrome.js +18 -0
- package/dist/table.cjs +5 -2
- package/dist/table.js +5 -2
- package/dist/utils/layout-spacing.cjs +27 -0
- package/dist/utils/layout-spacing.d.ts +5 -0
- package/dist/utils/layout-spacing.d.ts.map +1 -0
- package/dist/utils/layout-spacing.js +27 -0
- package/dist/utils/seed-derivation.cjs +4 -42
- package/dist/utils/seed-derivation.d.ts +4 -3
- package/dist/utils/seed-derivation.d.ts.map +1 -1
- package/dist/utils/seed-derivation.js +4 -42
- package/dist/utils/theme-presets.cjs +1 -0
- package/dist/utils/theme-presets.d.ts +3 -2
- package/dist/utils/theme-presets.d.ts.map +1 -1
- package/dist/utils/theme-presets.js +1 -0
- package/fragments.json +1 -1
- package/package.json +23 -4
- package/src/components/Accordion/Accordion.module.scss +31 -52
- package/src/components/Alert/Alert.module.scss +28 -44
- package/src/components/AppShell/AppShell.module.scss +6 -3
- package/src/components/AppShell/index.tsx +8 -4
- package/src/components/Avatar/Avatar.module.scss +22 -60
- package/src/components/Avatar/index.tsx +152 -146
- package/src/components/Badge/Badge.module.scss +51 -46
- package/src/components/BentoGrid/BentoGrid.module.scss +11 -32
- package/src/components/Box/Box.module.scss +253 -81
- package/src/components/Breadcrumbs/Breadcrumbs.module.scss +10 -11
- package/src/components/Button/Button.module.scss +52 -57
- package/src/components/ButtonGroup/ButtonGroup.module.scss +5 -5
- package/src/components/Card/Card.consumer-fixture.module.scss +8 -0
- package/src/components/Card/Card.module.scss +211 -175
- package/src/components/Chart/Chart.module.scss +28 -29
- package/src/components/Chart/index.tsx +40 -53
- package/src/components/Checkbox/Checkbox.module.scss +43 -64
- package/src/components/Checkbox/index.tsx +4 -9
- package/src/components/Chip/Chip.contract.json +4 -3
- package/src/components/Chip/Chip.module.scss +23 -34
- package/src/components/Chip/index.tsx +3 -4
- package/src/components/CodeBlock/CodeBlock.module.scss +102 -215
- package/src/components/Collapsible/Collapsible.module.scss +29 -63
- package/src/components/Collapsible/index.tsx +22 -26
- package/src/components/ColorPicker/ColorPicker.module.scss +42 -24
- package/src/components/ColorPicker/index.tsx +2 -1
- package/src/components/Combobox/Combobox.module.scss +60 -73
- package/src/components/Combobox/index.tsx +7 -5
- package/src/components/Command/Command.module.scss +47 -77
- package/src/components/ConversationList/ConversationList.module.scss +20 -78
- package/src/components/ConversationList/index.tsx +55 -59
- package/src/components/DataTable/DataTable.module.scss +76 -216
- package/src/components/DataTable/index.tsx +20 -25
- package/src/components/DatePicker/DatePicker.module.scss +54 -33
- package/src/components/DatePicker/index.tsx +2 -1
- package/src/components/Dialog/Dialog.module.scss +42 -66
- package/src/components/Drawer/Drawer.module.scss +93 -99
- package/src/components/Drawer/index.tsx +1 -1
- package/src/components/Editor/Editor.module.scss +115 -220
- package/src/components/EmptyState/EmptyState.module.scss +38 -85
- package/src/components/Field/Field.contract.json +2 -1
- package/src/components/Field/Field.module.scss +9 -11
- package/src/components/Field/index.tsx +27 -1
- package/src/components/Fieldset/Fieldset.module.scss +14 -6
- package/src/components/Form/Form.contract.json +10 -23
- package/src/components/Form/Form.module.scss +9 -4
- package/src/components/Form/index.tsx +22 -7
- package/src/components/Grid/Grid.module.scss +159 -63
- package/src/components/Grid/index.tsx +107 -126
- package/src/components/Header/Header.module.scss +25 -32
- package/src/components/Header/index.tsx +2 -1
- package/src/components/Icon/Icon.module.scss +16 -0
- package/src/components/Icon/index.tsx +74 -86
- package/src/components/IconButton/IconButton.module.scss +11 -21
- package/src/components/Input/Input.module.scss +67 -55
- package/src/components/Input/index.tsx +1 -2
- package/src/components/Link/Link.module.scss +8 -9
- package/src/components/List/List.module.scss +16 -21
- package/src/components/List/index.tsx +4 -10
- package/src/components/Listbox/Listbox.module.scss +26 -54
- package/src/components/Loading/Loading.module.scss +23 -33
- package/src/components/Loading/index.tsx +68 -97
- package/src/components/Main/Main.module.scss +3 -5
- package/src/components/Markdown/Markdown.module.scss +36 -184
- package/src/components/Markdown/index.tsx +2 -2
- package/src/components/Menu/Menu.module.scss +48 -133
- package/src/components/Menu/index.tsx +57 -89
- package/src/components/Message/Message.module.scss +52 -142
- package/src/components/Message/index.tsx +16 -6
- package/src/components/NavigationMenu/NavigationMenu.module.scss +59 -52
- package/src/components/Pagination/Pagination.module.scss +32 -25
- package/src/components/Pagination/index.tsx +7 -2
- package/src/components/Popover/Popover.module.scss +37 -73
- package/src/components/Progress/Progress.module.scss +61 -41
- package/src/components/Progress/geometry.ts +41 -0
- package/src/components/Progress/index.tsx +44 -30
- package/src/components/Prompt/Prompt.module.scss +45 -82
- package/src/components/Prompt/index.tsx +6 -5
- package/src/components/RadioGroup/RadioGroup.module.scss +50 -69
- package/src/components/RadioGroup/index.tsx +7 -9
- package/src/components/ScrollArea/ScrollArea.contract.json +8 -24
- package/src/components/ScrollArea/ScrollArea.module.scss +122 -96
- package/src/components/ScrollArea/index.tsx +78 -60
- package/src/components/ScrollArea/scroll-state.ts +87 -0
- package/src/components/Select/Select.module.scss +53 -41
- package/src/components/Select/index.tsx +6 -2
- package/src/components/Separator/Separator.module.scss +29 -19
- package/src/components/Separator/index.tsx +55 -51
- package/src/components/Sidebar/Sidebar.contract.json +12 -0
- package/src/components/Sidebar/Sidebar.module.scss +101 -99
- package/src/components/Sidebar/index.tsx +10 -3
- package/src/components/Skeleton/Skeleton.module.scss +26 -26
- package/src/components/Skeleton/index.tsx +65 -72
- package/src/components/Slider/Slider.module.scss +31 -25
- package/src/components/Stack/Stack.module.scss +101 -30
- package/src/components/Stack/index.tsx +157 -127
- package/src/components/{Toggle/Toggle.contract.json → Switch/Switch.contract.json} +1 -1
- package/src/components/{Toggle/Toggle.module.scss → Switch/Switch.module.scss} +55 -82
- package/src/components/{Toggle → Switch}/index.tsx +5 -21
- package/src/components/Table/Table.module.scss +38 -129
- package/src/components/Table/index.tsx +13 -6
- package/src/components/TableOfContents/TableOfContents.module.scss +20 -177
- package/src/components/Tabs/Tabs.module.scss +27 -22
- package/src/components/Tabs/index.tsx +2 -2
- package/src/components/Text/Text.module.scss +22 -3
- package/src/components/Text/index.tsx +56 -21
- package/src/components/Textarea/Textarea.module.scss +59 -39
- package/src/components/Textarea/index.tsx +5 -12
- package/src/components/Theme/context.ts +42 -0
- package/src/components/Theme/index.tsx +14 -309
- package/src/components/ThemeToggle/ThemeToggle.module.scss +73 -0
- package/src/components/ThemeToggle/index.tsx +144 -0
- package/src/components/ThinkingIndicator/ThinkingIndicator.module.scss +24 -19
- package/src/components/ThinkingIndicator/index.tsx +44 -54
- package/src/components/Toast/Toast.contract.json +5 -21
- package/src/components/Toast/Toast.module.scss +61 -138
- package/src/components/Toggle/index.ts +7 -0
- package/src/components/ToggleGroup/ToggleGroup.contract.json +12 -39
- package/src/components/ToggleGroup/ToggleGroup.module.scss +132 -88
- package/src/components/ToggleGroup/index.tsx +5 -3
- package/src/components/Tooltip/Tooltip.module.scss +23 -39
- package/src/components/VisuallyHidden/VisuallyHidden.module.scss +3 -0
- package/src/index.ts +2 -1
- package/src/measurements/MeasurementTargets.module.scss +229 -0
- package/src/measurements/generated.ts +317 -0
- package/src/measurements/index.ts +8 -0
- package/src/measurements/measurements.json +361 -0
- package/src/recipes/_action.scss +138 -0
- package/src/recipes/_boolean-range.scss +124 -0
- package/src/recipes/_feedback.scss +171 -0
- package/src/recipes/_field.scss +98 -0
- package/src/recipes/_layout.scss +67 -0
- package/src/recipes/_navigation.scss +110 -0
- package/src/recipes/_overlay.scss +191 -0
- package/src/recipes/_popup.scss +92 -0
- package/src/recipes/_prose.scss +174 -0
- package/src/recipes/_representation.scss +193 -0
- package/src/recipes/_segmented.scss +26 -0
- package/src/recipes/_surface.scss +13 -0
- package/src/recipes/_table-chrome.scss +105 -0
- package/src/recipes/_target.scss +31 -0
- package/src/recipes/_typography.scss +38 -0
- package/src/recipes/popup.ts +12 -0
- package/src/recipes/table-chrome.ts +30 -0
- package/src/styles/globals.scss +2 -2
- package/src/tokens/_component-properties.scss +2 -2
- package/src/tokens/_computed.scss +9 -9
- package/src/tokens/_density.scss +41 -132
- package/src/tokens/_measurements.catalog.generated.css +91 -0
- package/src/tokens/_measurements.generated.scss +604 -0
- package/src/tokens/_mixins.scss +0 -276
- package/src/tokens/_property-registrations.scss +96 -92
- package/src/tokens/_radius.scss +16 -70
- package/src/tokens/_seeds.scss +8 -7
- package/src/tokens/_variables.scss +163 -148
- package/src/utils/layout-spacing.ts +31 -0
- package/src/utils/seed-derivation.ts +134 -172
- package/src/utils/theme-presets.ts +58 -30
- package/dist/components/Theme/ThemeToggle.module.scss.js +0 -23
- package/dist/components/Toggle/Toggle.module.scss.cjs +0 -44
- package/dist/components/Toggle/Toggle.module.scss.js +0 -44
- package/src/components/Switch/index.ts +0 -3
- package/src/components/Theme/ThemeToggle.module.scss +0 -91
|
@@ -1,59 +1,44 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const stack = "
|
|
4
|
-
const row = "
|
|
5
|
-
const column = "
|
|
6
|
-
const directionResponsive = "
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
const justifyCenter = "_justify-center_1otmq_105";
|
|
20
|
-
const justifyEnd = "_justify-end_1otmq_109";
|
|
21
|
-
const justifyBetween = "_justify-between_1otmq_113";
|
|
22
|
-
const wrap = "_wrap_1otmq_117";
|
|
23
|
-
const separator = "_separator_1otmq_121";
|
|
3
|
+
const stack = "_stack_qpued_1";
|
|
4
|
+
const row = "_row_qpued_6";
|
|
5
|
+
const column = "_column_qpued_10";
|
|
6
|
+
const directionResponsive = "_directionResponsive_qpued_14";
|
|
7
|
+
const gapResponsive = "_gapResponsive_qpued_38";
|
|
8
|
+
const alignStart = "_align-start_qpued_62";
|
|
9
|
+
const alignCenter = "_align-center_qpued_66";
|
|
10
|
+
const alignEnd = "_align-end_qpued_70";
|
|
11
|
+
const alignStretch = "_align-stretch_qpued_74";
|
|
12
|
+
const alignBaseline = "_align-baseline_qpued_78";
|
|
13
|
+
const justifyStart = "_justify-start_qpued_82";
|
|
14
|
+
const justifyCenter = "_justify-center_qpued_86";
|
|
15
|
+
const justifyEnd = "_justify-end_qpued_90";
|
|
16
|
+
const justifyBetween = "_justify-between_qpued_94";
|
|
17
|
+
const wrap = "_wrap_qpued_98";
|
|
18
|
+
const separator = "_separator_qpued_102";
|
|
24
19
|
const styles = {
|
|
25
20
|
stack,
|
|
26
21
|
row,
|
|
27
22
|
column,
|
|
28
23
|
directionResponsive,
|
|
29
|
-
"gap-xs": "_gap-xs_1otmq_37",
|
|
30
|
-
gapXs,
|
|
31
|
-
"gap-sm": "_gap-sm_1otmq_41",
|
|
32
|
-
gapSm,
|
|
33
|
-
"gap-md": "_gap-md_1otmq_45",
|
|
34
|
-
gapMd,
|
|
35
|
-
"gap-lg": "_gap-lg_1otmq_49",
|
|
36
|
-
gapLg,
|
|
37
|
-
"gap-xl": "_gap-xl_1otmq_53",
|
|
38
|
-
gapXl,
|
|
39
24
|
gapResponsive,
|
|
40
|
-
"align-start": "_align-
|
|
25
|
+
"align-start": "_align-start_qpued_62",
|
|
41
26
|
alignStart,
|
|
42
|
-
"align-center": "_align-
|
|
27
|
+
"align-center": "_align-center_qpued_66",
|
|
43
28
|
alignCenter,
|
|
44
|
-
"align-end": "_align-
|
|
29
|
+
"align-end": "_align-end_qpued_70",
|
|
45
30
|
alignEnd,
|
|
46
|
-
"align-stretch": "_align-
|
|
31
|
+
"align-stretch": "_align-stretch_qpued_74",
|
|
47
32
|
alignStretch,
|
|
48
|
-
"align-baseline": "_align-
|
|
33
|
+
"align-baseline": "_align-baseline_qpued_78",
|
|
49
34
|
alignBaseline,
|
|
50
|
-
"justify-start": "_justify-
|
|
35
|
+
"justify-start": "_justify-start_qpued_82",
|
|
51
36
|
justifyStart,
|
|
52
|
-
"justify-center": "_justify-
|
|
37
|
+
"justify-center": "_justify-center_qpued_86",
|
|
53
38
|
justifyCenter,
|
|
54
|
-
"justify-end": "_justify-
|
|
39
|
+
"justify-end": "_justify-end_qpued_90",
|
|
55
40
|
justifyEnd,
|
|
56
|
-
"justify-between": "_justify-
|
|
41
|
+
"justify-between": "_justify-between_qpued_94",
|
|
57
42
|
justifyBetween,
|
|
58
43
|
wrap,
|
|
59
44
|
separator
|
|
@@ -66,12 +51,7 @@ exports.alignStretch = alignStretch;
|
|
|
66
51
|
exports.column = column;
|
|
67
52
|
exports.default = styles;
|
|
68
53
|
exports.directionResponsive = directionResponsive;
|
|
69
|
-
exports.gapLg = gapLg;
|
|
70
|
-
exports.gapMd = gapMd;
|
|
71
54
|
exports.gapResponsive = gapResponsive;
|
|
72
|
-
exports.gapSm = gapSm;
|
|
73
|
-
exports.gapXl = gapXl;
|
|
74
|
-
exports.gapXs = gapXs;
|
|
75
55
|
exports.justifyBetween = justifyBetween;
|
|
76
56
|
exports.justifyCenter = justifyCenter;
|
|
77
57
|
exports.justifyEnd = justifyEnd;
|
|
@@ -1,57 +1,42 @@
|
|
|
1
|
-
const stack = "
|
|
2
|
-
const row = "
|
|
3
|
-
const column = "
|
|
4
|
-
const directionResponsive = "
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const justifyCenter = "_justify-center_1otmq_105";
|
|
18
|
-
const justifyEnd = "_justify-end_1otmq_109";
|
|
19
|
-
const justifyBetween = "_justify-between_1otmq_113";
|
|
20
|
-
const wrap = "_wrap_1otmq_117";
|
|
21
|
-
const separator = "_separator_1otmq_121";
|
|
1
|
+
const stack = "_stack_qpued_1";
|
|
2
|
+
const row = "_row_qpued_6";
|
|
3
|
+
const column = "_column_qpued_10";
|
|
4
|
+
const directionResponsive = "_directionResponsive_qpued_14";
|
|
5
|
+
const gapResponsive = "_gapResponsive_qpued_38";
|
|
6
|
+
const alignStart = "_align-start_qpued_62";
|
|
7
|
+
const alignCenter = "_align-center_qpued_66";
|
|
8
|
+
const alignEnd = "_align-end_qpued_70";
|
|
9
|
+
const alignStretch = "_align-stretch_qpued_74";
|
|
10
|
+
const alignBaseline = "_align-baseline_qpued_78";
|
|
11
|
+
const justifyStart = "_justify-start_qpued_82";
|
|
12
|
+
const justifyCenter = "_justify-center_qpued_86";
|
|
13
|
+
const justifyEnd = "_justify-end_qpued_90";
|
|
14
|
+
const justifyBetween = "_justify-between_qpued_94";
|
|
15
|
+
const wrap = "_wrap_qpued_98";
|
|
16
|
+
const separator = "_separator_qpued_102";
|
|
22
17
|
const styles = {
|
|
23
18
|
stack,
|
|
24
19
|
row,
|
|
25
20
|
column,
|
|
26
21
|
directionResponsive,
|
|
27
|
-
"gap-xs": "_gap-xs_1otmq_37",
|
|
28
|
-
gapXs,
|
|
29
|
-
"gap-sm": "_gap-sm_1otmq_41",
|
|
30
|
-
gapSm,
|
|
31
|
-
"gap-md": "_gap-md_1otmq_45",
|
|
32
|
-
gapMd,
|
|
33
|
-
"gap-lg": "_gap-lg_1otmq_49",
|
|
34
|
-
gapLg,
|
|
35
|
-
"gap-xl": "_gap-xl_1otmq_53",
|
|
36
|
-
gapXl,
|
|
37
22
|
gapResponsive,
|
|
38
|
-
"align-start": "_align-
|
|
23
|
+
"align-start": "_align-start_qpued_62",
|
|
39
24
|
alignStart,
|
|
40
|
-
"align-center": "_align-
|
|
25
|
+
"align-center": "_align-center_qpued_66",
|
|
41
26
|
alignCenter,
|
|
42
|
-
"align-end": "_align-
|
|
27
|
+
"align-end": "_align-end_qpued_70",
|
|
43
28
|
alignEnd,
|
|
44
|
-
"align-stretch": "_align-
|
|
29
|
+
"align-stretch": "_align-stretch_qpued_74",
|
|
45
30
|
alignStretch,
|
|
46
|
-
"align-baseline": "_align-
|
|
31
|
+
"align-baseline": "_align-baseline_qpued_78",
|
|
47
32
|
alignBaseline,
|
|
48
|
-
"justify-start": "_justify-
|
|
33
|
+
"justify-start": "_justify-start_qpued_82",
|
|
49
34
|
justifyStart,
|
|
50
|
-
"justify-center": "_justify-
|
|
35
|
+
"justify-center": "_justify-center_qpued_86",
|
|
51
36
|
justifyCenter,
|
|
52
|
-
"justify-end": "_justify-
|
|
37
|
+
"justify-end": "_justify-end_qpued_90",
|
|
53
38
|
justifyEnd,
|
|
54
|
-
"justify-between": "_justify-
|
|
39
|
+
"justify-between": "_justify-between_qpued_94",
|
|
55
40
|
justifyBetween,
|
|
56
41
|
wrap,
|
|
57
42
|
separator
|
|
@@ -65,12 +50,7 @@ export {
|
|
|
65
50
|
column,
|
|
66
51
|
styles as default,
|
|
67
52
|
directionResponsive,
|
|
68
|
-
gapLg,
|
|
69
|
-
gapMd,
|
|
70
53
|
gapResponsive,
|
|
71
|
-
gapSm,
|
|
72
|
-
gapXl,
|
|
73
|
-
gapXs,
|
|
74
54
|
justifyBetween,
|
|
75
55
|
justifyCenter,
|
|
76
56
|
justifyEnd,
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const React = require("react");
|
|
5
|
+
const layoutSpacing = require("../../utils/layout-spacing.cjs");
|
|
5
6
|
const Stack_module = require("./Stack.module.scss.cjs");
|
|
6
7
|
function _interopNamespaceDefault(e) {
|
|
7
8
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
@@ -29,109 +30,113 @@ function isResponsiveGap(gap) {
|
|
|
29
30
|
function isNumericGap(gap) {
|
|
30
31
|
return typeof gap === "number";
|
|
31
32
|
}
|
|
32
|
-
const StackRoot = React__namespace.forwardRef(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
33
|
+
const StackRoot = React__namespace.forwardRef(function Stack2({
|
|
34
|
+
children,
|
|
35
|
+
direction = "column",
|
|
36
|
+
gap = "md",
|
|
37
|
+
align,
|
|
38
|
+
justify,
|
|
39
|
+
wrap = false,
|
|
40
|
+
separator,
|
|
41
|
+
as: Component = "div",
|
|
42
|
+
className,
|
|
43
|
+
style,
|
|
44
|
+
...htmlProps
|
|
45
|
+
}, ref) {
|
|
46
|
+
let directionClass;
|
|
47
|
+
let gapClass;
|
|
48
|
+
let inlineStyle;
|
|
49
|
+
if (isResponsiveDirection(direction)) {
|
|
50
|
+
directionClass = Stack_module.default.directionResponsive;
|
|
51
|
+
const vars = {};
|
|
52
|
+
const baseDirection = direction.base ?? "column";
|
|
53
|
+
const smDirection = direction.sm ?? baseDirection;
|
|
54
|
+
const mdDirection = direction.md ?? smDirection;
|
|
55
|
+
const lgDirection = direction.lg ?? mdDirection;
|
|
56
|
+
const xlDirection = direction.xl ?? lgDirection;
|
|
57
|
+
vars["--fui-stack-direction"] = baseDirection;
|
|
58
|
+
vars["--fui-stack-direction-sm"] = smDirection;
|
|
59
|
+
vars["--fui-stack-direction-md"] = mdDirection;
|
|
60
|
+
vars["--fui-stack-direction-lg"] = lgDirection;
|
|
61
|
+
vars["--fui-stack-direction-xl"] = xlDirection;
|
|
62
|
+
inlineStyle = vars;
|
|
63
|
+
} else {
|
|
64
|
+
directionClass = Stack_module.default[direction];
|
|
65
|
+
}
|
|
66
|
+
if (isResponsiveGap(gap)) {
|
|
67
|
+
gapClass = Stack_module.default.gapResponsive;
|
|
68
|
+
const gapVars = {};
|
|
69
|
+
if (gap.base) gapVars["--fui-stack-gap"] = layoutSpacing.resolveLayoutGap(gap.base);
|
|
70
|
+
if (gap.sm) gapVars["--fui-stack-gap-sm"] = layoutSpacing.resolveLayoutGap(gap.sm);
|
|
71
|
+
if (gap.md) gapVars["--fui-stack-gap-md"] = layoutSpacing.resolveLayoutGap(gap.md);
|
|
72
|
+
if (gap.lg) gapVars["--fui-stack-gap-lg"] = layoutSpacing.resolveLayoutGap(gap.lg);
|
|
73
|
+
if (gap.xl) gapVars["--fui-stack-gap-xl"] = layoutSpacing.resolveLayoutGap(gap.xl);
|
|
74
|
+
inlineStyle = { ...inlineStyle, ...gapVars };
|
|
75
|
+
} else if (isNumericGap(gap)) {
|
|
76
|
+
gapClass = false;
|
|
77
|
+
inlineStyle = {
|
|
78
|
+
...inlineStyle,
|
|
79
|
+
"--fui-stack-gap": layoutSpacing.resolveLayoutGap(gap)
|
|
80
|
+
};
|
|
81
|
+
} else {
|
|
82
|
+
gapClass = false;
|
|
83
|
+
inlineStyle = {
|
|
84
|
+
...inlineStyle,
|
|
85
|
+
"--fui-stack-gap": layoutSpacing.resolveLayoutGap(gap)
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
const classes = [
|
|
89
|
+
Stack_module.default.stack,
|
|
90
|
+
directionClass,
|
|
91
|
+
gapClass,
|
|
92
|
+
align && Stack_module.default[`align-${align}`],
|
|
93
|
+
justify && Stack_module.default[`justify-${justify}`],
|
|
94
|
+
wrap && Stack_module.default.wrap,
|
|
95
|
+
className
|
|
96
|
+
].filter(Boolean).join(" ");
|
|
97
|
+
const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
|
|
98
|
+
let content = children;
|
|
99
|
+
if (separator) {
|
|
100
|
+
const validChildren = React__namespace.Children.toArray(children).filter(Boolean);
|
|
101
|
+
if (validChildren.length > 1) {
|
|
102
|
+
const responsiveDirection = isResponsiveDirection(direction);
|
|
103
|
+
const resolvedDir = responsiveDirection ? direction.base ?? "column" : direction;
|
|
104
|
+
const separatorEl = separator === true ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
105
|
+
"div",
|
|
106
|
+
{
|
|
107
|
+
className: Stack_module.default.separator,
|
|
108
|
+
"data-orientation": resolvedDir === "row" ? "vertical" : "horizontal",
|
|
109
|
+
role: responsiveDirection ? void 0 : "separator",
|
|
110
|
+
"aria-hidden": responsiveDirection ? true : void 0
|
|
111
|
+
}
|
|
112
|
+
) : separator;
|
|
113
|
+
const items = [];
|
|
114
|
+
validChildren.forEach((child, idx) => {
|
|
115
|
+
items.push(child);
|
|
116
|
+
if (idx < validChildren.length - 1) {
|
|
117
|
+
const childKey = React__namespace.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;
|
|
118
|
+
items.push(/* @__PURE__ */ jsxRuntime.jsx(React__namespace.Fragment, { children: separatorEl }, `sep-${childKey}`));
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
content = items;
|
|
111
122
|
}
|
|
112
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
-
Component,
|
|
114
|
-
{
|
|
115
|
-
...htmlProps,
|
|
116
|
-
ref,
|
|
117
|
-
className: classes,
|
|
118
|
-
style: mergedStyle,
|
|
119
|
-
children: content
|
|
120
|
-
}
|
|
121
|
-
);
|
|
122
123
|
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
124
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
125
|
+
Component,
|
|
126
|
+
{
|
|
127
|
+
...htmlProps,
|
|
128
|
+
ref,
|
|
129
|
+
className: classes,
|
|
130
|
+
style: mergedStyle,
|
|
131
|
+
"data-direction-base": isResponsiveDirection(direction) ? direction.base ?? "column" : direction,
|
|
132
|
+
"data-direction-sm": isResponsiveDirection(direction) ? direction.sm ?? direction.base ?? "column" : direction,
|
|
133
|
+
"data-direction-md": isResponsiveDirection(direction) ? direction.md ?? direction.sm ?? direction.base ?? "column" : direction,
|
|
134
|
+
"data-direction-lg": isResponsiveDirection(direction) ? direction.lg ?? direction.md ?? direction.sm ?? direction.base ?? "column" : direction,
|
|
135
|
+
"data-direction-xl": isResponsiveDirection(direction) ? direction.xl ?? direction.lg ?? direction.md ?? direction.sm ?? direction.base ?? "column" : direction,
|
|
136
|
+
children: content
|
|
137
|
+
}
|
|
138
|
+
);
|
|
139
|
+
});
|
|
135
140
|
const Stack = Object.assign(StackRoot, {
|
|
136
141
|
Root: StackRoot
|
|
137
142
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
type Direction =
|
|
3
|
-
type GapToken =
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
type Direction = "row" | "column";
|
|
3
|
+
type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl";
|
|
4
4
|
/** Gap accepts string tokens or numbers (1-8) mapping to the spacing scale */
|
|
5
5
|
type GapScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
6
6
|
type Gap = GapToken | GapScale;
|
|
@@ -34,7 +34,7 @@ export interface ResponsiveGap {
|
|
|
34
34
|
* Flexbox layout component for vertical or horizontal stacking with consistent spacing.
|
|
35
35
|
* @see https://usefragments.com/components/stack
|
|
36
36
|
*/
|
|
37
|
-
export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>,
|
|
37
|
+
export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "style" | "className"> {
|
|
38
38
|
children: React.ReactNode;
|
|
39
39
|
/**
|
|
40
40
|
* Stack direction.
|
|
@@ -48,8 +48,8 @@ export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'chi
|
|
|
48
48
|
* - An object for responsive gap: `{ base: "sm", md: "lg" }`
|
|
49
49
|
*/
|
|
50
50
|
gap?: Gap | ResponsiveGap;
|
|
51
|
-
align?:
|
|
52
|
-
justify?:
|
|
51
|
+
align?: "start" | "center" | "end" | "stretch" | "baseline";
|
|
52
|
+
justify?: "start" | "center" | "end" | "between";
|
|
53
53
|
wrap?: boolean;
|
|
54
54
|
/**
|
|
55
55
|
* Render a separator between each child.
|
|
@@ -57,7 +57,7 @@ export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'chi
|
|
|
57
57
|
* - A ReactNode renders custom content between children
|
|
58
58
|
*/
|
|
59
59
|
separator?: boolean | React.ReactNode;
|
|
60
|
-
as?:
|
|
60
|
+
as?: "div" | "section" | "nav" | "article" | "aside" | "header" | "footer" | "main" | "ul" | "ol";
|
|
61
61
|
className?: string;
|
|
62
62
|
style?: React.CSSProperties;
|
|
63
63
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClC,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,8EAA8E;AAC9E,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC9C,KAAK,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE/B,2EAA2E;AAC3E,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB;AAED,2BAA2B;AAC3B,MAAM,WAAW,aAAa;IAC5B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,aAAa;IACb,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,aAAa;IACb,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,cAAc;IACd,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,cAAc;IACd,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,UAAU,GAAG,OAAO,GAAG,WAAW,CACnC;IACC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,mBAAmB,CAAC;IAC5C;;;;OAIG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAmKD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}
|