@fragments-sdk/ui 0.13.0 → 0.14.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/dist/assets/ui.css +1642 -1679
- package/dist/chart.cjs.map +1 -1
- package/dist/chart.js.map +1 -1
- package/dist/codeblock.cjs +26 -18
- package/dist/codeblock.cjs.map +1 -1
- package/dist/codeblock.js +26 -18
- package/dist/codeblock.js.map +1 -1
- package/dist/components/Accordion/Accordion.module.scss.cjs +8 -8
- package/dist/components/Accordion/Accordion.module.scss.js +8 -8
- package/dist/components/Accordion/index.cjs +7 -3
- package/dist/components/Accordion/index.cjs.map +1 -1
- package/dist/components/Accordion/index.d.ts +24 -11
- package/dist/components/Accordion/index.d.ts.map +1 -1
- package/dist/components/Accordion/index.js +7 -3
- package/dist/components/Accordion/index.js.map +1 -1
- package/dist/components/Alert/Alert.module.scss.cjs +12 -12
- package/dist/components/Alert/Alert.module.scss.js +12 -12
- package/dist/components/Alert/index.cjs +37 -15
- package/dist/components/Alert/index.cjs.map +1 -1
- package/dist/components/Alert/index.d.ts +15 -22
- package/dist/components/Alert/index.d.ts.map +1 -1
- package/dist/components/Alert/index.js +37 -15
- package/dist/components/Alert/index.js.map +1 -1
- 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 +3 -1
- package/dist/components/AppShell/index.cjs.map +1 -1
- package/dist/components/AppShell/index.d.ts.map +1 -1
- package/dist/components/AppShell/index.js +3 -1
- package/dist/components/AppShell/index.js.map +1 -1
- package/dist/components/Avatar/index.cjs +9 -1
- package/dist/components/Avatar/index.cjs.map +1 -1
- package/dist/components/Avatar/index.d.ts +2 -0
- package/dist/components/Avatar/index.d.ts.map +1 -1
- package/dist/components/Avatar/index.js +9 -1
- package/dist/components/Avatar/index.js.map +1 -1
- package/dist/components/Badge/index.cjs +4 -2
- package/dist/components/Badge/index.cjs.map +1 -1
- package/dist/components/Badge/index.d.ts +3 -0
- package/dist/components/Badge/index.d.ts.map +1 -1
- package/dist/components/Badge/index.js +4 -2
- package/dist/components/Badge/index.js.map +1 -1
- package/dist/components/BentoGrid/BentoGrid.module.scss.cjs +11 -11
- package/dist/components/BentoGrid/BentoGrid.module.scss.js +11 -11
- package/dist/components/BentoGrid/index.cjs +8 -5
- package/dist/components/BentoGrid/index.cjs.map +1 -1
- package/dist/components/BentoGrid/index.d.ts +2 -8
- package/dist/components/BentoGrid/index.d.ts.map +1 -1
- package/dist/components/BentoGrid/index.js +8 -5
- package/dist/components/BentoGrid/index.js.map +1 -1
- package/dist/components/Box/index.cjs +12 -2
- package/dist/components/Box/index.cjs.map +1 -1
- package/dist/components/Box/index.d.ts +1 -1
- package/dist/components/Box/index.d.ts.map +1 -1
- package/dist/components/Box/index.js +12 -2
- package/dist/components/Box/index.js.map +1 -1
- package/dist/components/Breadcrumbs/index.cjs +3 -1
- package/dist/components/Breadcrumbs/index.cjs.map +1 -1
- package/dist/components/Breadcrumbs/index.d.ts +3 -1
- package/dist/components/Breadcrumbs/index.d.ts.map +1 -1
- package/dist/components/Breadcrumbs/index.js +3 -1
- package/dist/components/Breadcrumbs/index.js.map +1 -1
- package/dist/components/Button/Button.module.scss.cjs +11 -11
- package/dist/components/Button/Button.module.scss.js +11 -11
- package/dist/components/Button/index.cjs +5 -2
- package/dist/components/Button/index.cjs.map +1 -1
- package/dist/components/Button/index.d.ts +3 -3
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +5 -2
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/ButtonGroup/index.cjs +3 -2
- package/dist/components/ButtonGroup/index.cjs.map +1 -1
- package/dist/components/ButtonGroup/index.d.ts +1 -2
- package/dist/components/ButtonGroup/index.d.ts.map +1 -1
- package/dist/components/ButtonGroup/index.js +3 -2
- package/dist/components/ButtonGroup/index.js.map +1 -1
- package/dist/components/Card/Card.module.scss.cjs +14 -14
- package/dist/components/Card/Card.module.scss.js +14 -14
- package/dist/components/Card/index.cjs +3 -22
- package/dist/components/Card/index.cjs.map +1 -1
- package/dist/components/Card/index.d.ts +6 -11
- package/dist/components/Card/index.d.ts.map +1 -1
- package/dist/components/Card/index.js +3 -22
- package/dist/components/Card/index.js.map +1 -1
- 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 +3 -3
- package/dist/components/Chart/index.d.ts.map +1 -1
- package/dist/components/Checkbox/Checkbox.module.scss.cjs +10 -10
- package/dist/components/Checkbox/Checkbox.module.scss.js +10 -10
- package/dist/components/Checkbox/index.cjs +11 -4
- package/dist/components/Checkbox/index.cjs.map +1 -1
- package/dist/components/Checkbox/index.d.ts +6 -0
- package/dist/components/Checkbox/index.d.ts.map +1 -1
- package/dist/components/Checkbox/index.js +11 -4
- package/dist/components/Checkbox/index.js.map +1 -1
- package/dist/components/Chip/index.cjs +11 -3
- package/dist/components/Chip/index.cjs.map +1 -1
- package/dist/components/Chip/index.d.ts +1 -2
- package/dist/components/Chip/index.d.ts.map +1 -1
- package/dist/components/Chip/index.js +11 -3
- package/dist/components/Chip/index.js.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.module.scss.cjs +20 -20
- package/dist/components/CodeBlock/CodeBlock.module.scss.js +20 -20
- package/dist/components/CodeBlock/index.d.ts +8 -2
- package/dist/components/CodeBlock/index.d.ts.map +1 -1
- package/dist/components/Collapsible/Collapsible.module.scss.cjs +10 -10
- package/dist/components/Collapsible/Collapsible.module.scss.js +10 -10
- package/dist/components/Combobox/Combobox.module.scss.cjs +15 -15
- package/dist/components/Combobox/Combobox.module.scss.js +15 -15
- package/dist/components/Combobox/index.cjs +68 -18
- package/dist/components/Combobox/index.cjs.map +1 -1
- package/dist/components/Combobox/index.d.ts +32 -11
- package/dist/components/Combobox/index.d.ts.map +1 -1
- package/dist/components/Combobox/index.js +68 -18
- package/dist/components/Combobox/index.js.map +1 -1
- package/dist/components/Command/Command.module.scss.cjs +11 -11
- package/dist/components/Command/Command.module.scss.js +11 -11
- package/dist/components/Command/index.cjs +4 -4
- package/dist/components/Command/index.cjs.map +1 -1
- package/dist/components/Command/index.d.ts +1 -1
- package/dist/components/Command/index.d.ts.map +1 -1
- package/dist/components/Command/index.js +4 -4
- package/dist/components/Command/index.js.map +1 -1
- package/dist/components/ConversationList/ConversationList.module.scss.cjs +10 -10
- package/dist/components/ConversationList/ConversationList.module.scss.js +10 -10
- package/dist/components/ConversationList/index.cjs +6 -3
- package/dist/components/ConversationList/index.cjs.map +1 -1
- package/dist/components/ConversationList/index.d.ts +1 -1
- package/dist/components/ConversationList/index.d.ts.map +1 -1
- package/dist/components/ConversationList/index.js +6 -3
- package/dist/components/ConversationList/index.js.map +1 -1
- package/dist/components/DataTable/DataTable.module.scss.cjs +26 -26
- package/dist/components/DataTable/DataTable.module.scss.js +26 -26
- package/dist/components/DataTable/index.cjs +13 -4
- package/dist/components/DataTable/index.cjs.map +1 -1
- package/dist/components/DataTable/index.d.ts +7 -2
- package/dist/components/DataTable/index.d.ts.map +1 -1
- package/dist/components/DataTable/index.js +13 -4
- package/dist/components/DataTable/index.js.map +1 -1
- package/dist/components/DatePicker/DatePicker.module.scss.cjs +26 -26
- package/dist/components/DatePicker/DatePicker.module.scss.js +26 -26
- package/dist/components/DatePicker/index.d.ts +2 -2
- 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/Dialog/index.cjs +2 -1
- package/dist/components/Dialog/index.cjs.map +1 -1
- package/dist/components/Dialog/index.d.ts +20 -7
- package/dist/components/Dialog/index.d.ts.map +1 -1
- package/dist/components/Dialog/index.js +2 -1
- package/dist/components/Dialog/index.js.map +1 -1
- package/dist/components/Drawer/Drawer.module.scss.cjs +26 -26
- package/dist/components/Drawer/Drawer.module.scss.js +26 -26
- package/dist/components/Drawer/index.cjs +30 -3
- package/dist/components/Drawer/index.cjs.map +1 -1
- package/dist/components/Drawer/index.d.ts +3 -1
- package/dist/components/Drawer/index.d.ts.map +1 -1
- package/dist/components/Drawer/index.js +13 -3
- package/dist/components/Drawer/index.js.map +1 -1
- package/dist/components/Editor/Editor.module.scss.cjs +17 -17
- package/dist/components/Editor/Editor.module.scss.js +17 -17
- package/dist/components/Editor/index.cjs +32 -7
- package/dist/components/Editor/index.cjs.map +1 -1
- package/dist/components/Editor/index.d.ts +16 -3
- package/dist/components/Editor/index.d.ts.map +1 -1
- package/dist/components/Editor/index.js +32 -7
- package/dist/components/Editor/index.js.map +1 -1
- package/dist/components/EmptyState/EmptyState.module.scss.cjs +8 -8
- package/dist/components/EmptyState/EmptyState.module.scss.js +8 -8
- package/dist/components/EmptyState/index.cjs +12 -8
- package/dist/components/EmptyState/index.cjs.map +1 -1
- package/dist/components/EmptyState/index.d.ts +8 -12
- package/dist/components/EmptyState/index.d.ts.map +1 -1
- package/dist/components/EmptyState/index.js +12 -8
- package/dist/components/EmptyState/index.js.map +1 -1
- package/dist/components/Fieldset/index.cjs +2 -2
- package/dist/components/Fieldset/index.cjs.map +1 -1
- package/dist/components/Fieldset/index.d.ts +2 -3
- package/dist/components/Fieldset/index.d.ts.map +1 -1
- package/dist/components/Fieldset/index.js +2 -2
- package/dist/components/Fieldset/index.js.map +1 -1
- package/dist/components/Form/index.cjs +13 -13
- package/dist/components/Form/index.cjs.map +1 -1
- package/dist/components/Form/index.d.ts +5 -2
- package/dist/components/Form/index.d.ts.map +1 -1
- package/dist/components/Form/index.js +13 -13
- package/dist/components/Form/index.js.map +1 -1
- package/dist/components/Grid/Grid.module.scss.cjs +57 -57
- package/dist/components/Grid/Grid.module.scss.js +57 -57
- package/dist/components/Grid/index.cjs +7 -4
- package/dist/components/Grid/index.cjs.map +1 -1
- package/dist/components/Grid/index.d.ts +5 -3
- package/dist/components/Grid/index.d.ts.map +1 -1
- package/dist/components/Grid/index.js +7 -4
- package/dist/components/Grid/index.js.map +1 -1
- package/dist/components/Header/Header.module.scss.cjs +21 -21
- package/dist/components/Header/Header.module.scss.js +21 -21
- package/dist/components/Header/index.cjs +61 -23
- package/dist/components/Header/index.cjs.map +1 -1
- package/dist/components/Header/index.d.ts +27 -34
- package/dist/components/Header/index.d.ts.map +1 -1
- package/dist/components/Header/index.js +61 -23
- package/dist/components/Header/index.js.map +1 -1
- package/dist/components/Icon/index.cjs +11 -1
- package/dist/components/Icon/index.cjs.map +1 -1
- package/dist/components/Icon/index.d.ts +28 -9
- package/dist/components/Icon/index.d.ts.map +1 -1
- package/dist/components/Icon/index.js +11 -1
- package/dist/components/Icon/index.js.map +1 -1
- package/dist/components/Image/index.cjs +15 -4
- package/dist/components/Image/index.cjs.map +1 -1
- package/dist/components/Image/index.d.ts +7 -1
- package/dist/components/Image/index.d.ts.map +1 -1
- package/dist/components/Image/index.js +15 -4
- package/dist/components/Image/index.js.map +1 -1
- package/dist/components/Input/Input.module.scss.cjs +13 -13
- package/dist/components/Input/Input.module.scss.js +13 -13
- package/dist/components/Input/index.cjs +79 -31
- package/dist/components/Input/index.cjs.map +1 -1
- package/dist/components/Input/index.d.ts +17 -3
- package/dist/components/Input/index.d.ts.map +1 -1
- package/dist/components/Input/index.js +79 -31
- package/dist/components/Input/index.js.map +1 -1
- package/dist/components/Link/index.cjs +17 -0
- package/dist/components/Link/index.cjs.map +1 -1
- package/dist/components/Link/index.d.ts.map +1 -1
- package/dist/components/Link/index.js +17 -0
- package/dist/components/Link/index.js.map +1 -1
- package/dist/components/Listbox/Listbox.module.scss.cjs +8 -8
- package/dist/components/Listbox/Listbox.module.scss.js +8 -8
- package/dist/components/Listbox/index.cjs +10 -6
- package/dist/components/Listbox/index.cjs.map +1 -1
- package/dist/components/Listbox/index.d.ts +2 -2
- package/dist/components/Listbox/index.d.ts.map +1 -1
- package/dist/components/Listbox/index.js +10 -6
- package/dist/components/Listbox/index.js.map +1 -1
- package/dist/components/Markdown/Markdown.module.scss.cjs +1 -1
- package/dist/components/Markdown/Markdown.module.scss.js +1 -1
- package/dist/components/Markdown/index.d.ts +4 -2
- package/dist/components/Markdown/index.d.ts.map +1 -1
- package/dist/components/Menu/Menu.module.scss.cjs +13 -13
- package/dist/components/Menu/Menu.module.scss.js +13 -13
- package/dist/components/Menu/index.cjs +12 -1
- package/dist/components/Menu/index.cjs.map +1 -1
- package/dist/components/Menu/index.d.ts +9 -4
- package/dist/components/Menu/index.d.ts.map +1 -1
- package/dist/components/Menu/index.js +12 -1
- package/dist/components/Menu/index.js.map +1 -1
- package/dist/components/Message/Message.module.scss.cjs +18 -18
- package/dist/components/Message/Message.module.scss.js +18 -18
- package/dist/components/NavigationMenu/NavigationMenu.module.scss.cjs +28 -28
- package/dist/components/NavigationMenu/NavigationMenu.module.scss.js +28 -28
- package/dist/components/NavigationMenu/NavigationMenuContext.cjs.map +1 -1
- package/dist/components/NavigationMenu/NavigationMenuContext.d.ts +8 -0
- package/dist/components/NavigationMenu/NavigationMenuContext.d.ts.map +1 -1
- package/dist/components/NavigationMenu/NavigationMenuContext.js.map +1 -1
- package/dist/components/NavigationMenu/index.cjs +49 -10
- package/dist/components/NavigationMenu/index.cjs.map +1 -1
- package/dist/components/NavigationMenu/index.d.ts +5 -1
- package/dist/components/NavigationMenu/index.d.ts.map +1 -1
- package/dist/components/NavigationMenu/index.js +49 -10
- package/dist/components/NavigationMenu/index.js.map +1 -1
- package/dist/components/Pagination/index.cjs +37 -9
- package/dist/components/Pagination/index.cjs.map +1 -1
- package/dist/components/Pagination/index.d.ts +2 -3
- package/dist/components/Pagination/index.d.ts.map +1 -1
- package/dist/components/Pagination/index.js +37 -9
- package/dist/components/Pagination/index.js.map +1 -1
- package/dist/components/Popover/Popover.module.scss.cjs +10 -10
- package/dist/components/Popover/Popover.module.scss.js +10 -10
- package/dist/components/Popover/index.cjs +43 -2
- package/dist/components/Popover/index.cjs.map +1 -1
- package/dist/components/Popover/index.d.ts +16 -6
- package/dist/components/Popover/index.d.ts.map +1 -1
- package/dist/components/Popover/index.js +26 -2
- package/dist/components/Popover/index.js.map +1 -1
- package/dist/components/Progress/index.cjs +3 -1
- package/dist/components/Progress/index.cjs.map +1 -1
- package/dist/components/Progress/index.d.ts.map +1 -1
- package/dist/components/Progress/index.js +3 -1
- package/dist/components/Progress/index.js.map +1 -1
- package/dist/components/Prompt/Prompt.module.scss.cjs +14 -14
- package/dist/components/Prompt/Prompt.module.scss.js +14 -14
- package/dist/components/Prompt/index.cjs +14 -2
- package/dist/components/Prompt/index.cjs.map +1 -1
- package/dist/components/Prompt/index.d.ts +8 -5
- package/dist/components/Prompt/index.d.ts.map +1 -1
- package/dist/components/Prompt/index.js +14 -2
- package/dist/components/Prompt/index.js.map +1 -1
- package/dist/components/RadioGroup/index.cjs +14 -6
- package/dist/components/RadioGroup/index.cjs.map +1 -1
- package/dist/components/RadioGroup/index.d.ts +12 -2
- package/dist/components/RadioGroup/index.d.ts.map +1 -1
- package/dist/components/RadioGroup/index.js +14 -6
- package/dist/components/RadioGroup/index.js.map +1 -1
- package/dist/components/Select/Select.module.scss.cjs +10 -10
- package/dist/components/Select/Select.module.scss.js +10 -10
- package/dist/components/Select/index.cjs +37 -24
- package/dist/components/Select/index.cjs.map +1 -1
- package/dist/components/Select/index.d.ts +6 -2
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +37 -24
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Sidebar/Sidebar.module.scss.cjs +42 -42
- package/dist/components/Sidebar/Sidebar.module.scss.js +42 -42
- package/dist/components/Sidebar/index.cjs +2 -2
- package/dist/components/Sidebar/index.cjs.map +1 -1
- package/dist/components/Sidebar/index.d.ts +3 -3
- package/dist/components/Sidebar/index.d.ts.map +1 -1
- package/dist/components/Sidebar/index.js +2 -2
- package/dist/components/Sidebar/index.js.map +1 -1
- package/dist/components/Skeleton/index.cjs +6 -3
- package/dist/components/Skeleton/index.cjs.map +1 -1
- package/dist/components/Skeleton/index.d.ts +3 -7
- package/dist/components/Skeleton/index.d.ts.map +1 -1
- package/dist/components/Skeleton/index.js +6 -3
- package/dist/components/Skeleton/index.js.map +1 -1
- package/dist/components/Slider/Slider.module.scss.cjs +13 -10
- package/dist/components/Slider/Slider.module.scss.cjs.map +1 -1
- package/dist/components/Slider/Slider.module.scss.js +13 -10
- package/dist/components/Slider/Slider.module.scss.js.map +1 -1
- package/dist/components/Slider/index.cjs +33 -1
- package/dist/components/Slider/index.cjs.map +1 -1
- package/dist/components/Slider/index.d.ts +2 -0
- package/dist/components/Slider/index.d.ts.map +1 -1
- package/dist/components/Slider/index.js +33 -1
- package/dist/components/Slider/index.js.map +1 -1
- package/dist/components/Stack/index.cjs +12 -2
- package/dist/components/Stack/index.cjs.map +1 -1
- package/dist/components/Stack/index.d.ts +3 -2
- package/dist/components/Stack/index.d.ts.map +1 -1
- package/dist/components/Stack/index.js +12 -2
- package/dist/components/Stack/index.js.map +1 -1
- package/dist/components/Table/Table.module.scss.cjs +16 -16
- package/dist/components/Table/Table.module.scss.js +16 -16
- package/dist/components/Table/index.d.ts +10 -4
- package/dist/components/Table/index.d.ts.map +1 -1
- package/dist/components/TableOfContents/index.cjs +8 -5
- package/dist/components/TableOfContents/index.cjs.map +1 -1
- package/dist/components/TableOfContents/index.d.ts +2 -2
- package/dist/components/TableOfContents/index.d.ts.map +1 -1
- package/dist/components/TableOfContents/index.js +8 -5
- package/dist/components/TableOfContents/index.js.map +1 -1
- package/dist/components/Tabs/Tabs.module.scss.cjs +9 -9
- package/dist/components/Tabs/Tabs.module.scss.js +9 -9
- package/dist/components/Tabs/index.cjs +9 -6
- package/dist/components/Tabs/index.cjs.map +1 -1
- package/dist/components/Tabs/index.d.ts +4 -1
- package/dist/components/Tabs/index.d.ts.map +1 -1
- package/dist/components/Tabs/index.js +9 -6
- package/dist/components/Tabs/index.js.map +1 -1
- package/dist/components/Textarea/index.cjs +61 -43
- package/dist/components/Textarea/index.cjs.map +1 -1
- package/dist/components/Textarea/index.d.ts +9 -1
- package/dist/components/Textarea/index.d.ts.map +1 -1
- package/dist/components/Textarea/index.js +61 -43
- package/dist/components/Textarea/index.js.map +1 -1
- package/dist/components/Theme/index.cjs +3 -1
- package/dist/components/Theme/index.cjs.map +1 -1
- package/dist/components/Theme/index.d.ts +2 -4
- package/dist/components/Theme/index.d.ts.map +1 -1
- package/dist/components/Theme/index.js +3 -1
- package/dist/components/Theme/index.js.map +1 -1
- package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.cjs +22 -22
- package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.js +22 -22
- package/dist/components/Toast/Toast.module.scss.cjs +20 -20
- package/dist/components/Toast/Toast.module.scss.js +20 -20
- package/dist/components/Toast/index.cjs +15 -14
- package/dist/components/Toast/index.cjs.map +1 -1
- package/dist/components/Toast/index.d.ts +9 -5
- package/dist/components/Toast/index.d.ts.map +1 -1
- package/dist/components/Toast/index.js +15 -14
- package/dist/components/Toast/index.js.map +1 -1
- package/dist/components/Toggle/Toggle.module.scss.cjs +11 -11
- package/dist/components/Toggle/Toggle.module.scss.js +11 -11
- package/dist/components/Toggle/index.cjs +1 -1
- package/dist/components/Toggle/index.cjs.map +1 -1
- package/dist/components/Toggle/index.js +1 -1
- package/dist/components/Toggle/index.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.module.scss.cjs +17 -17
- package/dist/components/ToggleGroup/ToggleGroup.module.scss.js +17 -17
- package/dist/components/ToggleGroup/index.cjs +27 -8
- package/dist/components/ToggleGroup/index.cjs.map +1 -1
- package/dist/components/ToggleGroup/index.d.ts +8 -3
- package/dist/components/ToggleGroup/index.d.ts.map +1 -1
- package/dist/components/ToggleGroup/index.js +27 -8
- package/dist/components/ToggleGroup/index.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.module.scss.cjs +3 -3
- package/dist/components/Tooltip/Tooltip.module.scss.js +3 -3
- package/dist/components/Tooltip/index.cjs +20 -4
- package/dist/components/Tooltip/index.cjs.map +1 -1
- package/dist/components/Tooltip/index.d.ts +3 -1
- package/dist/components/Tooltip/index.d.ts.map +1 -1
- package/dist/components/Tooltip/index.js +20 -4
- package/dist/components/Tooltip/index.js.map +1 -1
- package/dist/components/VisuallyHidden/index.cjs +10 -2
- package/dist/components/VisuallyHidden/index.cjs.map +1 -1
- package/dist/components/VisuallyHidden/index.d.ts +1 -1
- package/dist/components/VisuallyHidden/index.d.ts.map +1 -1
- package/dist/components/VisuallyHidden/index.js +10 -2
- package/dist/components/VisuallyHidden/index.js.map +1 -1
- package/dist/datepicker.cjs +8 -1
- package/dist/datepicker.cjs.map +1 -1
- package/dist/datepicker.js +8 -1
- package/dist/datepicker.js.map +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/markdown.cjs +5 -5
- package/dist/markdown.cjs.map +1 -1
- package/dist/markdown.js +5 -5
- package/dist/markdown.js.map +1 -1
- package/dist/table.cjs +19 -3
- package/dist/table.cjs.map +1 -1
- package/dist/table.js +19 -3
- package/dist/table.js.map +1 -1
- package/fragments.json +1 -1
- package/package.json +2 -2
- package/src/blocks/AccountSettings.block.ts +1 -1
- package/src/blocks/ActivityFeed.block.ts +1 -1
- package/src/blocks/ActivityFeedSkeleton.block.ts +1 -1
- package/src/blocks/BlogEditor.block.ts +1 -1
- package/src/blocks/ChatInterface.block.ts +1 -1
- package/src/blocks/ChatMessages.block.ts +1 -1
- package/src/blocks/CheckoutForm.block.ts +1 -1
- package/src/blocks/CommandPalette.block.ts +1 -1
- package/src/blocks/ContactForm.block.ts +1 -1
- package/src/blocks/DashboardLayout.block.ts +1 -1
- package/src/blocks/DashboardPage.block.ts +1 -1
- package/src/blocks/DashboardSkeleton.block.ts +1 -1
- package/src/blocks/DataTable.block.ts +1 -1
- package/src/blocks/EmptyState.block.ts +1 -1
- package/src/blocks/FAQSection.block.ts +1 -1
- package/src/blocks/FeatureGrid.block.ts +1 -1
- package/src/blocks/HeroSection.block.ts +1 -1
- package/src/blocks/LoginForm.block.ts +1 -1
- package/src/blocks/NavigationHeader.block.ts +1 -1
- package/src/blocks/PaginatedTable.block.ts +1 -1
- package/src/blocks/PricingComparison.block.ts +1 -1
- package/src/blocks/ProductCard.block.ts +1 -1
- package/src/blocks/RegistrationForm.block.ts +1 -1
- package/src/blocks/SettingsDrawer.block.ts +1 -1
- package/src/blocks/SettingsPanel.block.ts +1 -1
- package/src/blocks/ShoppingCart.block.ts +1 -1
- package/src/blocks/StatsCard.block.ts +1 -1
- package/src/blocks/StatsCardSkeleton.block.ts +1 -1
- package/src/blocks/TableSkeleton.block.ts +1 -1
- package/src/blocks/ThinkingStates.block.ts +1 -1
- package/src/components/Accordion/Accordion.fragment.tsx +7 -7
- package/src/components/Accordion/Accordion.module.scss +2 -2
- package/src/components/Accordion/Accordion.test.tsx +8 -5
- package/src/components/Accordion/index.tsx +33 -13
- package/src/components/Alert/Alert.fragment.tsx +5 -1
- package/src/components/Alert/Alert.module.scss +1 -1
- package/src/components/Alert/Alert.test.tsx +25 -0
- package/src/components/Alert/index.tsx +49 -30
- package/src/components/AppShell/AppShell.fragment.tsx +1 -1
- package/src/components/AppShell/AppShell.module.scss +5 -5
- package/src/components/AppShell/AppShell.test.tsx +12 -0
- package/src/components/AppShell/index.tsx +2 -0
- package/src/components/Avatar/Avatar.fragment.tsx +7 -1
- package/src/components/Avatar/Avatar.test.tsx +24 -2
- package/src/components/Avatar/index.tsx +13 -1
- package/src/components/Badge/Badge.fragment.tsx +16 -1
- package/src/components/Badge/Badge.test.tsx +8 -1
- package/src/components/Badge/index.tsx +7 -2
- package/src/components/BentoGrid/BentoGrid.fragment.tsx +3 -1
- package/src/components/BentoGrid/BentoGrid.module.scss +52 -16
- package/src/components/BentoGrid/BentoGrid.test.tsx +20 -0
- package/src/components/BentoGrid/index.tsx +9 -12
- package/src/components/Box/Box.fragment.tsx +3 -1
- package/src/components/Box/Box.test.tsx +14 -0
- package/src/components/Box/index.tsx +8 -2
- package/src/components/Breadcrumbs/Breadcrumbs.fragment.tsx +19 -1
- package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +13 -0
- package/src/components/Breadcrumbs/index.tsx +5 -1
- package/src/components/Button/Button.fragment.tsx +28 -6
- package/src/components/Button/Button.module.scss +3 -3
- package/src/components/Button/Button.test.tsx +11 -0
- package/src/components/Button/index.tsx +16 -6
- package/src/components/ButtonGroup/ButtonGroup.fragment.tsx +4 -2
- package/src/components/ButtonGroup/ButtonGroup.test.tsx +10 -0
- package/src/components/ButtonGroup/index.tsx +3 -3
- package/src/components/Card/Card.fragment.tsx +24 -9
- package/src/components/Card/Card.module.scss +8 -8
- package/src/components/Card/Card.test.tsx +4 -5
- package/src/components/Card/index.tsx +8 -38
- package/src/components/Chart/Chart.fragment.tsx +5 -3
- package/src/components/Chart/Chart.module.scss +1 -1
- package/src/components/Chart/index.tsx +12 -10
- package/src/components/Checkbox/Checkbox.fragment.tsx +27 -1
- package/src/components/Checkbox/Checkbox.module.scss +3 -3
- package/src/components/Checkbox/index.tsx +16 -3
- package/src/components/Chip/Chip.fragment.tsx +20 -3
- package/src/components/Chip/Chip.test.tsx +28 -0
- package/src/components/Chip/index.tsx +14 -6
- package/src/components/CodeBlock/CodeBlock.fragment.tsx +3 -1
- package/src/components/CodeBlock/CodeBlock.module.scss +9 -9
- package/src/components/CodeBlock/CodeBlock.test.tsx +21 -0
- package/src/components/CodeBlock/index.tsx +23 -9
- package/src/components/Collapsible/Collapsible.fragment.tsx +1 -1
- package/src/components/Collapsible/Collapsible.module.scss +1 -1
- package/src/components/ColorPicker/ColorPicker.fragment.tsx +1 -1
- package/src/components/Combobox/Combobox.fragment.tsx +63 -9
- package/src/components/Combobox/Combobox.module.scss +4 -7
- package/src/components/Combobox/Combobox.test.tsx +24 -3
- package/src/components/Combobox/index.tsx +117 -34
- package/src/components/Command/Command.fragment.tsx +3 -3
- package/src/components/Command/Command.module.scss +5 -5
- package/src/components/Command/Command.test.tsx +17 -0
- package/src/components/Command/index.tsx +8 -5
- package/src/components/ConversationList/ConversationList.fragment.tsx +4 -3
- package/src/components/ConversationList/ConversationList.module.scss +5 -5
- package/src/components/ConversationList/ConversationList.test.tsx +21 -0
- package/src/components/ConversationList/index.tsx +8 -4
- package/src/components/DataTable/DataTable.fragment.tsx +12 -2
- package/src/components/DataTable/DataTable.module.scss +3 -3
- package/src/components/DataTable/DataTable.test.tsx +23 -2
- package/src/components/DataTable/index.tsx +23 -5
- package/src/components/DatePicker/DatePicker.fragment.tsx +3 -1
- package/src/components/DatePicker/DatePicker.module.scss +1 -1
- package/src/components/DatePicker/DatePicker.test.tsx +17 -0
- package/src/components/DatePicker/index.tsx +9 -2
- package/src/components/Dialog/Dialog.fragment.tsx +28 -1
- package/src/components/Dialog/Dialog.module.scss +6 -6
- package/src/components/Dialog/index.tsx +25 -7
- package/src/components/Drawer/Drawer.fragment.tsx +4 -1
- package/src/components/Drawer/Drawer.module.scss +3 -3
- package/src/components/Drawer/Drawer.test.tsx +8 -0
- package/src/components/Drawer/index.tsx +15 -3
- package/src/components/Editor/Editor.fragment.tsx +10 -3
- package/src/components/Editor/Editor.module.scss +4 -4
- package/src/components/Editor/Editor.test.tsx +68 -1
- package/src/components/Editor/index.tsx +60 -9
- package/src/components/EmptyState/EmptyState.fragment.tsx +3 -1
- package/src/components/EmptyState/EmptyState.module.scss +3 -3
- package/src/components/EmptyState/EmptyState.test.tsx +18 -0
- package/src/components/EmptyState/index.tsx +16 -16
- package/src/components/Field/Field.fragment.tsx +1 -1
- package/src/components/Fieldset/Fieldset.fragment.tsx +3 -1
- package/src/components/Fieldset/Fieldset.test.tsx +14 -0
- package/src/components/Fieldset/index.tsx +3 -4
- package/src/components/Form/Form.fragment.tsx +12 -7
- package/src/components/Form/index.tsx +13 -17
- package/src/components/Grid/Grid.fragment.tsx +4 -3
- package/src/components/Grid/Grid.module.scss +3 -3
- package/src/components/Grid/index.tsx +11 -6
- package/src/components/Header/Header.fragment.tsx +31 -1
- package/src/components/Header/Header.module.scss +6 -6
- package/src/components/Header/Header.test.tsx +95 -1
- package/src/components/Header/index.tsx +95 -46
- package/src/components/Icon/Icon.fragment.tsx +21 -8
- package/src/components/Icon/Icon.test.tsx +27 -3
- package/src/components/Icon/index.tsx +39 -15
- package/src/components/Image/Image.fragment.tsx +15 -1
- package/src/components/Image/Image.test.tsx +32 -1
- package/src/components/Image/index.tsx +24 -4
- package/src/components/Input/Input.fragment.tsx +49 -1
- package/src/components/Input/Input.module.scss +4 -2
- package/src/components/Input/Input.test.tsx +3 -3
- package/src/components/Input/index.tsx +103 -37
- package/src/components/Link/Link.fragment.tsx +7 -6
- package/src/components/Link/Link.test.tsx +17 -1
- package/src/components/Link/index.tsx +22 -0
- package/src/components/List/List.fragment.tsx +1 -1
- package/src/components/Listbox/Listbox.fragment.tsx +3 -3
- package/src/components/Listbox/Listbox.module.scss +4 -4
- package/src/components/Listbox/Listbox.test.tsx +14 -0
- package/src/components/Listbox/index.tsx +12 -2
- package/src/components/Loading/Loading.fragment.tsx +1 -1
- package/src/components/Markdown/Markdown.fragment.tsx +5 -3
- package/src/components/Markdown/Markdown.module.scss +5 -5
- package/src/components/Markdown/Markdown.test.tsx +6 -0
- package/src/components/Markdown/index.tsx +12 -9
- package/src/components/Menu/Menu.fragment.tsx +19 -1
- package/src/components/Menu/Menu.module.scss +11 -11
- package/src/components/Menu/index.tsx +19 -7
- package/src/components/Message/Message.fragment.tsx +1 -1
- package/src/components/Message/Message.module.scss +3 -3
- package/src/components/NavigationMenu/NavigationMenu.fragment.tsx +9 -1
- package/src/components/NavigationMenu/NavigationMenu.module.scss +7 -7
- package/src/components/NavigationMenu/NavigationMenu.test.tsx +48 -0
- package/src/components/NavigationMenu/NavigationMenuContext.ts +14 -0
- package/src/components/NavigationMenu/index.tsx +70 -7
- package/src/components/Pagination/Pagination.fragment.tsx +4 -1
- package/src/components/Pagination/Pagination.test.tsx +39 -0
- package/src/components/Pagination/index.tsx +36 -10
- package/src/components/Popover/Popover.fragment.tsx +18 -1
- package/src/components/Popover/Popover.module.scss +13 -13
- package/src/components/Popover/index.tsx +33 -8
- package/src/components/Progress/Progress.fragment.tsx +3 -1
- package/src/components/Progress/Progress.test.tsx +8 -0
- package/src/components/Progress/index.tsx +9 -1
- package/src/components/Prompt/Prompt.fragment.tsx +4 -1
- package/src/components/Prompt/Prompt.module.scss +3 -3
- package/src/components/Prompt/Prompt.test.tsx +19 -0
- package/src/components/Prompt/index.tsx +24 -6
- package/src/components/RadioGroup/RadioGroup.fragment.tsx +31 -1
- package/src/components/RadioGroup/index.tsx +22 -3
- package/src/components/ScrollArea/ScrollArea.fragment.tsx +1 -1
- package/src/components/Select/Select.fragment.tsx +30 -3
- package/src/components/Select/Select.module.scss +3 -3
- package/src/components/Select/index.tsx +46 -33
- package/src/components/Separator/Separator.fragment.tsx +1 -1
- package/src/components/Sidebar/Sidebar.fragment.tsx +3 -1
- package/src/components/Sidebar/Sidebar.module.scss +20 -20
- package/src/components/Sidebar/Sidebar.test.tsx +25 -0
- package/src/components/Sidebar/index.tsx +7 -7
- package/src/components/Skeleton/Skeleton.fragment.tsx +3 -1
- package/src/components/Skeleton/Skeleton.test.tsx +12 -0
- package/src/components/Skeleton/index.tsx +6 -7
- package/src/components/Slider/Slider.fragment.tsx +21 -1
- package/src/components/Slider/Slider.module.scss +31 -0
- package/src/components/Slider/Slider.test.tsx +16 -0
- package/src/components/Slider/index.tsx +40 -1
- package/src/components/Stack/Stack.fragment.tsx +3 -1
- package/src/components/Stack/index.tsx +13 -6
- package/src/components/Table/Table.fragment.tsx +43 -2
- package/src/components/Table/Table.module.scss +2 -2
- package/src/components/Table/index.tsx +23 -5
- package/src/components/TableOfContents/TableOfContents.fragment.tsx +4 -2
- package/src/components/TableOfContents/TableOfContents.test.tsx +34 -9
- package/src/components/TableOfContents/index.tsx +9 -5
- package/src/components/Tabs/Tabs.fragment.tsx +33 -8
- package/src/components/Tabs/Tabs.module.scss +8 -8
- package/src/components/Tabs/index.tsx +22 -14
- package/src/components/Text/Text.fragment.tsx +1 -1
- package/src/components/Textarea/Textarea.fragment.tsx +27 -1
- package/src/components/Textarea/index.tsx +39 -14
- package/src/components/Theme/Theme.fragment.tsx +3 -1
- package/src/components/Theme/Theme.test.tsx +11 -0
- package/src/components/Theme/index.tsx +3 -3
- package/src/components/ThinkingIndicator/ThinkingIndicator.fragment.tsx +1 -1
- package/src/components/ThinkingIndicator/ThinkingIndicator.module.scss +1 -1
- package/src/components/Toast/Toast.fragment.tsx +6 -3
- package/src/components/Toast/Toast.module.scss +8 -6
- package/src/components/Toast/index.tsx +24 -20
- package/src/components/Toggle/Toggle.fragment.tsx +1 -1
- package/src/components/Toggle/Toggle.module.scss +61 -21
- package/src/components/Toggle/index.tsx +3 -3
- package/src/components/ToggleGroup/ToggleGroup.fragment.tsx +33 -8
- package/src/components/ToggleGroup/ToggleGroup.module.scss +3 -3
- package/src/components/ToggleGroup/index.tsx +29 -9
- package/src/components/Tooltip/Tooltip.fragment.tsx +16 -1
- package/src/components/Tooltip/Tooltip.module.scss +1 -1
- package/src/components/Tooltip/index.tsx +16 -1
- package/src/components/VisuallyHidden/VisuallyHidden.fragment.tsx +3 -1
- package/src/components/VisuallyHidden/VisuallyHidden.test.tsx +12 -0
- package/src/components/VisuallyHidden/index.tsx +7 -3
- package/src/index.ts +3 -2
- package/src/tokens/_computed.scss +1 -19
- package/src/tokens/_density.scss +0 -42
- package/src/tokens/_mixins.scss +4 -0
- package/src/tokens/_variables.scss +12 -114
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Pagination.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface PaginationProps {\n children: React.ReactNode;\n /** Total number of pages. Clamped to Math.max(0, totalPages). Renders nothing when 0. */\n totalPages: number;\n /** Controlled current page (1-indexed). Clamped to [1, totalPages]. */\n page?: number;\n /** Default page (uncontrolled). Clamped to [1, totalPages]. Default: 1 */\n defaultPage?: number;\n /** Called when page changes */\n onPageChange?: (page: number) => void;\n /** Number of pages shown at edges: default 1 */\n edgeCount?: number;\n /** Number of pages shown around current: default 1 */\n siblingCount?: number;\n className?: string;\n}\n\nexport interface PaginationItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children?: React.ReactNode;\n /** Override page number (auto-assigned by context if omitted) */\n page?: number;\n className?: string;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface PaginationContextValue {\n currentPage: number;\n totalPages: number;\n edgeCount: number;\n siblingCount: number;\n setPage: (page: number) => void;\n}\n\nconst PaginationContext = React.createContext<PaginationContextValue | null>(null);\n\nfunction usePaginationContext() {\n const ctx = React.useContext(PaginationContext);\n if (!ctx) throw new Error('Pagination sub-components must be used within <Pagination>');\n return ctx;\n}\n\n// ============================================\n// Page range algorithm\n// ============================================\n\ntype RangeItem = number | 'ellipsis';\n\nfunction usePaginationRange(\n totalPages: number,\n currentPage: number,\n siblingCount: number,\n edgeCount: number,\n): RangeItem[] {\n return React.useMemo(() => {\n if (totalPages <= 0) return [];\n\n // If total pages is small enough, show all pages\n const totalSlots = edgeCount * 2 + siblingCount * 2 + 1 + 2; // edges + siblings + current + 2 ellipses\n if (totalPages <= totalSlots) {\n return Array.from({ length: totalPages }, (_, i) => i + 1);\n }\n\n const leftEdge = Array.from({ length: edgeCount }, (_, i) => i + 1);\n const rightEdge = Array.from({ length: edgeCount }, (_, i) => totalPages - edgeCount + 1 + i);\n\n const siblingStart = Math.max(edgeCount + 1, currentPage - siblingCount);\n const siblingEnd = Math.min(totalPages - edgeCount, currentPage + siblingCount);\n\n const result: RangeItem[] = [];\n\n // Add left edge\n for (const p of leftEdge) {\n result.push(p);\n }\n\n // Left ellipsis\n if (siblingStart > edgeCount + 1) {\n // If there's only one gap, show the number instead of ellipsis\n if (siblingStart === edgeCount + 2) {\n result.push(edgeCount + 1);\n } else {\n result.push('ellipsis');\n }\n }\n\n // Siblings + current\n for (let i = siblingStart; i <= siblingEnd; i++) {\n if (!result.includes(i)) {\n result.push(i);\n }\n }\n\n // Right ellipsis\n if (siblingEnd < totalPages - edgeCount) {\n if (siblingEnd === totalPages - edgeCount - 1) {\n result.push(totalPages - edgeCount);\n } else {\n result.push('ellipsis');\n }\n }\n\n // Add right edge\n for (const p of rightEdge) {\n if (!result.includes(p)) {\n result.push(p);\n }\n }\n\n return result;\n }, [totalPages, currentPage, siblingCount, edgeCount]);\n}\n\n// ============================================\n// Chevron Icons\n// ============================================\n\nfunction ChevronLeftIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"15 18 9 12 15 6\" />\n </svg>\n );\n}\n\nfunction ChevronRightIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"9 18 15 12 9 6\" />\n </svg>\n );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.max(min, Math.min(max, value));\n}\n\nfunction PaginationRoot({\n children,\n totalPages: rawTotalPages,\n page: controlledPage,\n defaultPage = 1,\n onPageChange,\n edgeCount = 1,\n siblingCount = 1,\n className,\n}: PaginationProps) {\n const totalPages = Math.max(0, Math.floor(rawTotalPages));\n const [uncontrolledPage, setUncontrolledPage] = React.useState(() =>\n totalPages > 0 ? clamp(defaultPage, 1, totalPages) : 1\n );\n\n const isControlled = controlledPage !== undefined;\n const currentPage = isControlled\n ? (totalPages > 0 ? clamp(controlledPage, 1, totalPages) : 1)\n : (totalPages > 0 ? clamp(uncontrolledPage, 1, totalPages) : 1);\n\n const setPage = React.useCallback(\n (newPage: number) => {\n if (totalPages <= 0) return;\n const clamped = clamp(newPage, 1, totalPages);\n if (clamped === currentPage) return;\n if (!isControlled) {\n setUncontrolledPage(clamped);\n }\n onPageChange?.(clamped);\n },\n [totalPages, currentPage, isControlled, onPageChange]\n );\n\n const contextValue = React.useMemo<PaginationContextValue>(\n () => ({ currentPage, totalPages, edgeCount, siblingCount, setPage }),\n [currentPage, totalPages, edgeCount, siblingCount, setPage]\n );\n\n if (totalPages <= 0) {\n return <nav aria-label=\"Pagination\" className={className} />;\n }\n\n return (\n <PaginationContext.Provider value={contextValue}>\n <nav aria-label=\"Pagination\" className={[styles.pagination, className].filter(Boolean).join(' ')}>\n <ul className={styles.list}>\n {children}\n </ul>\n </nav>\n </PaginationContext.Provider>\n );\n}\n\nfunction PaginationPrevious({ className, ...htmlProps }: React.ButtonHTMLAttributes<HTMLButtonElement>) {\n const { currentPage, setPage } = usePaginationContext();\n const disabled = currentPage <= 1;\n\n return (\n <li>\n <button\n type=\"button\"\n aria-label=\"Go to previous page\"\n disabled={disabled}\n onClick={() => setPage(currentPage - 1)}\n className={[styles.item, styles.navButton, disabled && styles.itemDisabled, className].filter(Boolean).join(' ')}\n {...htmlProps}\n >\n <ChevronLeftIcon />\n </button>\n </li>\n );\n}\n\nfunction PaginationNext({ className, ...htmlProps }: React.ButtonHTMLAttributes<HTMLButtonElement>) {\n const { currentPage, totalPages, setPage } = usePaginationContext();\n const disabled = currentPage >= totalPages;\n\n return (\n <li>\n <button\n type=\"button\"\n aria-label=\"Go to next page\"\n disabled={disabled}\n onClick={() => setPage(currentPage + 1)}\n className={[styles.item, styles.navButton, disabled && styles.itemDisabled, className].filter(Boolean).join(' ')}\n {...htmlProps}\n >\n <ChevronRightIcon />\n </button>\n </li>\n );\n}\n\nfunction PaginationItems() {\n const { currentPage, totalPages, siblingCount, edgeCount, setPage } = usePaginationContext();\n const range = usePaginationRange(totalPages, currentPage, siblingCount, edgeCount);\n let ellipsisCount = 0;\n\n return (\n <>\n {range.map((item) => {\n if (item === 'ellipsis') {\n ellipsisCount++;\n return (\n <li key={`ellipsis-${ellipsisCount}`}>\n <span className={styles.ellipsis} aria-hidden=\"true\">\n …\n </span>\n </li>\n );\n }\n\n const isActive = item === currentPage;\n return (\n <li key={item}>\n <button\n type=\"button\"\n aria-label={`Go to page ${item}`}\n aria-current={isActive ? 'page' : undefined}\n onClick={() => setPage(item)}\n className={[styles.item, isActive && styles.itemActive].filter(Boolean).join(' ')}\n >\n {item}\n </button>\n </li>\n );\n })}\n </>\n );\n}\n\nfunction PaginationItem({\n children,\n page: pageProp,\n className,\n ...htmlProps\n}: PaginationItemProps) {\n const { currentPage, setPage } = usePaginationContext();\n const page = pageProp ?? 1;\n const isActive = page === currentPage;\n\n return (\n <li>\n <button\n type=\"button\"\n aria-label={`Go to page ${page}`}\n aria-current={isActive ? 'page' : undefined}\n onClick={() => setPage(page)}\n className={[styles.item, isActive && styles.itemActive, className].filter(Boolean).join(' ')}\n {...htmlProps}\n >\n {children ?? page}\n </button>\n </li>\n );\n}\n\nfunction PaginationEllipsis({ className, ...htmlProps }: React.HTMLAttributes<HTMLSpanElement>) {\n return (\n <li>\n <span className={[styles.ellipsis, className].filter(Boolean).join(' ')} aria-hidden=\"true\" {...htmlProps}>\n …\n </span>\n </li>\n );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Pagination = Object.assign(PaginationRoot, {\n Previous: PaginationPrevious,\n Next: PaginationNext,\n Items: PaginationItems,\n Item: PaginationItem,\n Ellipsis: PaginationEllipsis,\n});\n\nexport {\n PaginationRoot,\n PaginationPrevious,\n PaginationNext,\n PaginationItems,\n PaginationItem,\n PaginationEllipsis,\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Pagination.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n children: React.ReactNode;\n /** Total number of pages. Clamped to Math.max(0, totalPages). Renders nothing when 0. */\n totalPages: number;\n /** Controlled current page (1-indexed). Clamped to [1, totalPages]. */\n page?: number;\n /** Default page (uncontrolled). Clamped to [1, totalPages]. Default: 1 */\n defaultPage?: number;\n /** Called when page changes */\n onPageChange?: (page: number) => void;\n /** Number of pages shown at edges: default 1 */\n edgeCount?: number;\n /** Number of pages shown around current: default 1 */\n siblingCount?: number;\n}\n\nexport interface PaginationItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children?: React.ReactNode;\n /** Override page number (auto-assigned by context if omitted) */\n page?: number;\n className?: string;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface PaginationContextValue {\n currentPage: number;\n totalPages: number;\n edgeCount: number;\n siblingCount: number;\n setPage: (page: number) => void;\n}\n\nconst PaginationContext = React.createContext<PaginationContextValue | null>(null);\n\nfunction usePaginationContext() {\n const ctx = React.useContext(PaginationContext);\n if (!ctx) throw new Error('Pagination sub-components must be used within <Pagination>');\n return ctx;\n}\n\n// ============================================\n// Page range algorithm\n// ============================================\n\ntype RangeItem = number | 'ellipsis';\n\nfunction usePaginationRange(\n totalPages: number,\n currentPage: number,\n siblingCount: number,\n edgeCount: number,\n): RangeItem[] {\n return React.useMemo(() => {\n if (totalPages <= 0) return [];\n\n // If total pages is small enough, show all pages\n const totalSlots = edgeCount * 2 + siblingCount * 2 + 1 + 2; // edges + siblings + current + 2 ellipses\n if (totalPages <= totalSlots) {\n return Array.from({ length: totalPages }, (_, i) => i + 1);\n }\n\n const leftEdge = Array.from({ length: edgeCount }, (_, i) => i + 1);\n const rightEdge = Array.from({ length: edgeCount }, (_, i) => totalPages - edgeCount + 1 + i);\n\n const siblingStart = Math.max(edgeCount + 1, currentPage - siblingCount);\n const siblingEnd = Math.min(totalPages - edgeCount, currentPage + siblingCount);\n\n const result: RangeItem[] = [];\n\n // Add left edge\n for (const p of leftEdge) {\n result.push(p);\n }\n\n // Left ellipsis\n if (siblingStart > edgeCount + 1) {\n // If there's only one gap, show the number instead of ellipsis\n if (siblingStart === edgeCount + 2) {\n result.push(edgeCount + 1);\n } else {\n result.push('ellipsis');\n }\n }\n\n // Siblings + current\n for (let i = siblingStart; i <= siblingEnd; i++) {\n if (!result.includes(i)) {\n result.push(i);\n }\n }\n\n // Right ellipsis\n if (siblingEnd < totalPages - edgeCount) {\n if (siblingEnd === totalPages - edgeCount - 1) {\n result.push(totalPages - edgeCount);\n } else {\n result.push('ellipsis');\n }\n }\n\n // Add right edge\n for (const p of rightEdge) {\n if (!result.includes(p)) {\n result.push(p);\n }\n }\n\n return result;\n }, [totalPages, currentPage, siblingCount, edgeCount]);\n}\n\n// ============================================\n// Chevron Icons\n// ============================================\n\nfunction ChevronLeftIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"15 18 9 12 15 6\" />\n </svg>\n );\n}\n\nfunction ChevronRightIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"9 18 15 12 9 6\" />\n </svg>\n );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.max(min, Math.min(max, value));\n}\n\nfunction composeButtonClickHandlers(\n internal: (event: React.MouseEvent<HTMLButtonElement>) => void,\n external?: React.MouseEventHandler<HTMLButtonElement>,\n) {\n return (event: React.MouseEvent<HTMLButtonElement>) => {\n external?.(event);\n if (!event.defaultPrevented) {\n internal(event);\n }\n };\n}\n\nfunction PaginationRoot({\n children,\n totalPages: rawTotalPages,\n page: controlledPage,\n defaultPage = 1,\n onPageChange,\n edgeCount = 1,\n siblingCount = 1,\n className,\n 'aria-label': ariaLabel,\n ...htmlProps\n}: PaginationProps) {\n const totalPages = Math.max(0, Math.floor(rawTotalPages));\n const [uncontrolledPage, setUncontrolledPage] = React.useState(() =>\n totalPages > 0 ? clamp(defaultPage, 1, totalPages) : 1\n );\n\n const isControlled = controlledPage !== undefined;\n const currentPage = isControlled\n ? (totalPages > 0 ? clamp(controlledPage, 1, totalPages) : 1)\n : (totalPages > 0 ? clamp(uncontrolledPage, 1, totalPages) : 1);\n\n const setPage = React.useCallback(\n (newPage: number) => {\n if (totalPages <= 0) return;\n const clamped = clamp(newPage, 1, totalPages);\n if (clamped === currentPage) return;\n if (!isControlled) {\n setUncontrolledPage(clamped);\n }\n onPageChange?.(clamped);\n },\n [totalPages, currentPage, isControlled, onPageChange]\n );\n\n const contextValue = React.useMemo<PaginationContextValue>(\n () => ({ currentPage, totalPages, edgeCount, siblingCount, setPage }),\n [currentPage, totalPages, edgeCount, siblingCount, setPage]\n );\n\n if (totalPages <= 0) {\n return (\n <nav\n {...htmlProps}\n aria-label={ariaLabel ?? 'Pagination'}\n className={[styles.pagination, className].filter(Boolean).join(' ')}\n />\n );\n }\n\n return (\n <PaginationContext.Provider value={contextValue}>\n <nav\n {...htmlProps}\n aria-label={ariaLabel ?? 'Pagination'}\n className={[styles.pagination, className].filter(Boolean).join(' ')}\n >\n <ul className={styles.list}>\n {children}\n </ul>\n </nav>\n </PaginationContext.Provider>\n );\n}\n\nfunction PaginationPrevious({ className, ...htmlProps }: React.ButtonHTMLAttributes<HTMLButtonElement>) {\n const { currentPage, setPage } = usePaginationContext();\n const disabled = currentPage <= 1;\n const { onClick, ...buttonProps } = htmlProps;\n\n return (\n <li>\n <button\n type=\"button\"\n aria-label=\"Go to previous page\"\n disabled={disabled}\n {...buttonProps}\n onClick={composeButtonClickHandlers(() => setPage(currentPage - 1), onClick)}\n className={[styles.item, styles.navButton, disabled && styles.itemDisabled, className].filter(Boolean).join(' ')}\n >\n <ChevronLeftIcon />\n </button>\n </li>\n );\n}\n\nfunction PaginationNext({ className, ...htmlProps }: React.ButtonHTMLAttributes<HTMLButtonElement>) {\n const { currentPage, totalPages, setPage } = usePaginationContext();\n const disabled = currentPage >= totalPages;\n const { onClick, ...buttonProps } = htmlProps;\n\n return (\n <li>\n <button\n type=\"button\"\n aria-label=\"Go to next page\"\n disabled={disabled}\n {...buttonProps}\n onClick={composeButtonClickHandlers(() => setPage(currentPage + 1), onClick)}\n className={[styles.item, styles.navButton, disabled && styles.itemDisabled, className].filter(Boolean).join(' ')}\n >\n <ChevronRightIcon />\n </button>\n </li>\n );\n}\n\nfunction PaginationItems() {\n const { currentPage, totalPages, siblingCount, edgeCount, setPage } = usePaginationContext();\n const range = usePaginationRange(totalPages, currentPage, siblingCount, edgeCount);\n let ellipsisCount = 0;\n\n return (\n <>\n {range.map((item) => {\n if (item === 'ellipsis') {\n ellipsisCount++;\n return (\n <li key={`ellipsis-${ellipsisCount}`}>\n <span className={styles.ellipsis} aria-hidden=\"true\">\n …\n </span>\n </li>\n );\n }\n\n const isActive = item === currentPage;\n return (\n <li key={item}>\n <button\n type=\"button\"\n aria-label={`Go to page ${item}`}\n aria-current={isActive ? 'page' : undefined}\n onClick={() => setPage(item)}\n className={[styles.item, isActive && styles.itemActive].filter(Boolean).join(' ')}\n >\n {item}\n </button>\n </li>\n );\n })}\n </>\n );\n}\n\nfunction PaginationItem({\n children,\n page: pageProp,\n className,\n ...htmlProps\n}: PaginationItemProps) {\n const { currentPage, setPage } = usePaginationContext();\n const page = pageProp ?? 1;\n const isActive = page === currentPage;\n const { onClick, ...buttonProps } = htmlProps;\n\n return (\n <li>\n <button\n type=\"button\"\n aria-label={`Go to page ${page}`}\n aria-current={isActive ? 'page' : undefined}\n {...buttonProps}\n onClick={composeButtonClickHandlers(() => setPage(page), onClick)}\n className={[styles.item, isActive && styles.itemActive, className].filter(Boolean).join(' ')}\n >\n {children ?? page}\n </button>\n </li>\n );\n}\n\nfunction PaginationEllipsis({ className, ...htmlProps }: React.HTMLAttributes<HTMLSpanElement>) {\n return (\n <li>\n <span className={[styles.ellipsis, className].filter(Boolean).join(' ')} aria-hidden=\"true\" {...htmlProps}>\n …\n </span>\n </li>\n );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Pagination = Object.assign(PaginationRoot, {\n Previous: PaginationPrevious,\n Next: PaginationNext,\n Items: PaginationItems,\n Item: PaginationItem,\n Ellipsis: PaginationEllipsis,\n});\n\nexport {\n PaginationRoot,\n PaginationPrevious,\n PaginationNext,\n PaginationItems,\n PaginationItem,\n PaginationEllipsis,\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const positioner = "
|
|
4
|
-
const popup = "
|
|
5
|
-
const sm = "
|
|
6
|
-
const lg = "
|
|
7
|
-
const title = "
|
|
8
|
-
const description = "
|
|
9
|
-
const close = "
|
|
10
|
-
const arrow = "
|
|
11
|
-
const body = "
|
|
12
|
-
const footer = "
|
|
3
|
+
const positioner = "_positioner_1wp7z_1";
|
|
4
|
+
const popup = "_popup_1wp7z_6";
|
|
5
|
+
const sm = "_sm_1wp7z_47";
|
|
6
|
+
const lg = "_lg_1wp7z_52";
|
|
7
|
+
const title = "_title_1wp7z_57";
|
|
8
|
+
const description = "_description_1wp7z_65";
|
|
9
|
+
const close = "_close_1wp7z_72";
|
|
10
|
+
const arrow = "_arrow_1wp7z_119";
|
|
11
|
+
const body = "_body_1wp7z_143";
|
|
12
|
+
const footer = "_footer_1wp7z_147";
|
|
13
13
|
const styles = {
|
|
14
14
|
positioner,
|
|
15
15
|
popup,
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
const positioner = "
|
|
2
|
-
const popup = "
|
|
3
|
-
const sm = "
|
|
4
|
-
const lg = "
|
|
5
|
-
const title = "
|
|
6
|
-
const description = "
|
|
7
|
-
const close = "
|
|
8
|
-
const arrow = "
|
|
9
|
-
const body = "
|
|
10
|
-
const footer = "
|
|
1
|
+
const positioner = "_positioner_1wp7z_1";
|
|
2
|
+
const popup = "_popup_1wp7z_6";
|
|
3
|
+
const sm = "_sm_1wp7z_47";
|
|
4
|
+
const lg = "_lg_1wp7z_52";
|
|
5
|
+
const title = "_title_1wp7z_57";
|
|
6
|
+
const description = "_description_1wp7z_65";
|
|
7
|
+
const close = "_close_1wp7z_72";
|
|
8
|
+
const arrow = "_arrow_1wp7z_119";
|
|
9
|
+
const body = "_body_1wp7z_143";
|
|
10
|
+
const footer = "_footer_1wp7z_147";
|
|
11
11
|
const styles = {
|
|
12
12
|
positioner,
|
|
13
13
|
popup,
|
|
@@ -1,8 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
4
5
|
const popover = require("@base-ui/react/popover");
|
|
5
6
|
const Popover_module = require("./Popover.module.scss.cjs");
|
|
7
|
+
function _interopNamespaceDefault(e) {
|
|
8
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
9
|
+
if (e) {
|
|
10
|
+
for (const k in e) {
|
|
11
|
+
if (k !== "default") {
|
|
12
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
13
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: () => e[k]
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
n.default = e;
|
|
21
|
+
return Object.freeze(n);
|
|
22
|
+
}
|
|
23
|
+
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
6
24
|
function CloseIcon() {
|
|
7
25
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
8
26
|
"svg",
|
|
@@ -44,9 +62,20 @@ function PopoverRoot({
|
|
|
44
62
|
}
|
|
45
63
|
function PopoverTrigger({ children, asChild, className, ...htmlProps }) {
|
|
46
64
|
if (asChild) {
|
|
65
|
+
if (!React__namespace.isValidElement(children)) {
|
|
66
|
+
throw new Error("Popover.Trigger with asChild requires a single valid React element child.");
|
|
67
|
+
}
|
|
47
68
|
return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { ...htmlProps, className, render: children, children: null });
|
|
48
69
|
}
|
|
49
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
70
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
71
|
+
popover.Popover.Trigger,
|
|
72
|
+
{
|
|
73
|
+
...htmlProps,
|
|
74
|
+
type: htmlProps.type ?? "button",
|
|
75
|
+
className,
|
|
76
|
+
children
|
|
77
|
+
}
|
|
78
|
+
);
|
|
50
79
|
}
|
|
51
80
|
function PopoverContent({
|
|
52
81
|
children,
|
|
@@ -99,6 +128,7 @@ function PopoverClose({ children, asChild, className, ...htmlProps }) {
|
|
|
99
128
|
popover.Popover.Close,
|
|
100
129
|
{
|
|
101
130
|
...htmlProps,
|
|
131
|
+
type: htmlProps.type ?? "button",
|
|
102
132
|
"aria-label": "Close popover",
|
|
103
133
|
className: [Popover_module.default.close, className].filter(Boolean).join(" "),
|
|
104
134
|
children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
|
|
@@ -106,9 +136,20 @@ function PopoverClose({ children, asChild, className, ...htmlProps }) {
|
|
|
106
136
|
);
|
|
107
137
|
}
|
|
108
138
|
if (asChild) {
|
|
139
|
+
if (!React__namespace.isValidElement(children)) {
|
|
140
|
+
throw new Error("Popover.Close with asChild requires a single valid React element child.");
|
|
141
|
+
}
|
|
109
142
|
return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Close, { ...htmlProps, className, render: children, children: null });
|
|
110
143
|
}
|
|
111
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
144
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
145
|
+
popover.Popover.Close,
|
|
146
|
+
{
|
|
147
|
+
...htmlProps,
|
|
148
|
+
type: htmlProps.type ?? "button",
|
|
149
|
+
className,
|
|
150
|
+
children
|
|
151
|
+
}
|
|
152
|
+
);
|
|
112
153
|
}
|
|
113
154
|
const Popover = Object.assign(PopoverRoot, {
|
|
114
155
|
Trigger: PopoverTrigger,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport styles from './Popover.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Popover for floating content attached to a trigger element.\n * @see https://usefragments.com/components/popover\n */\nexport interface PopoverProps {\n children: React.ReactNode;\n /** Controlled open state */\n open?: boolean;\n /** Default open state */\n defaultOpen?: boolean;\n /** Called when open state changes */\n onOpenChange?: (open: boolean) => void;\n /** Whether the popover blocks interaction with the rest of the page.\n * @default false */\n modal?: boolean;\n}\n\nexport interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children: React.ReactNode;\n asChild?: boolean;\n}\n\nexport interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n size?: 'sm' | 'md' | 'lg';\n side?: 'top' | 'bottom' | 'left' | 'right';\n align?: 'start' | 'center' | 'end';\n sideOffset?: number;\n arrow?: boolean;\n}\n\nexport interface PopoverTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n children: React.ReactNode;\n}\n\nexport interface PopoverDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n children: React.ReactNode;\n}\n\nexport interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nexport interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nexport interface PopoverCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children?: React.ReactNode;\n asChild?: boolean;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction CloseIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction PopoverRoot({\n children,\n open,\n defaultOpen,\n onOpenChange,\n modal = false,\n}: PopoverProps) {\n return (\n <BasePopover.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n modal={modal}\n >\n {children}\n </BasePopover.Root>\n );\n}\n\nfunction PopoverTrigger({ children, asChild, className, ...htmlProps }: PopoverTriggerProps) {\n if (asChild) {\n return (\n <BasePopover.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>\n {null}\n </BasePopover.Trigger>\n );\n }\n\n return (\n <BasePopover.Trigger {...htmlProps} className={className}>\n {children}\n </BasePopover.Trigger>\n );\n}\n\nfunction PopoverContent({\n children,\n size = 'md',\n side = 'bottom',\n align = 'center',\n sideOffset = 8,\n arrow = false,\n className,\n ...htmlProps\n}: PopoverContentProps) {\n const popupClasses = [\n styles.popup,\n size !== 'md' && styles[size],\n className,\n ].filter(Boolean).join(' ');\n\n return (\n <BasePopover.Portal>\n <BasePopover.Positioner\n side={side}\n align={align}\n sideOffset={sideOffset}\n className={styles.positioner}\n >\n <BasePopover.Popup {...htmlProps} className={popupClasses}>\n {children}\n {arrow && <BasePopover.Arrow className={styles.arrow} />}\n </BasePopover.Popup>\n </BasePopover.Positioner>\n </BasePopover.Portal>\n );\n}\n\nfunction PopoverTitle({ children, className, ...htmlProps }: PopoverTitleProps) {\n const classes = [styles.title, className].filter(Boolean).join(' ');\n return <BasePopover.Title {...htmlProps} className={classes}>{children}</BasePopover.Title>;\n}\n\nfunction PopoverDescription({ children, className, ...htmlProps }: PopoverDescriptionProps) {\n const classes = [styles.description, className].filter(Boolean).join(' ');\n return (\n <BasePopover.Description {...htmlProps} className={classes}>\n {children}\n </BasePopover.Description>\n );\n}\n\nfunction PopoverBody({ children, className, ...htmlProps }: PopoverBodyProps) {\n const classes = [styles.body, className].filter(Boolean).join(' ');\n return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverFooter({ children, className, ...htmlProps }: PopoverFooterProps) {\n const classes = [styles.footer, className].filter(Boolean).join(' ');\n return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverClose({ children, asChild, className, ...htmlProps }: PopoverCloseProps) {\n // Default close button (X icon)\n if (!children) {\n return (\n <BasePopover.Close\n {...htmlProps}\n aria-label=\"Close popover\"\n className={[styles.close, className].filter(Boolean).join(' ')}\n >\n <CloseIcon />\n </BasePopover.Close>\n );\n }\n\n if (asChild) {\n return (\n <BasePopover.Close {...htmlProps} className={className} render={children as React.ReactElement}>\n {null}\n </BasePopover.Close>\n );\n }\n\n return (\n <BasePopover.Close {...htmlProps} className={className}>\n {children}\n </BasePopover.Close>\n );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Popover = Object.assign(PopoverRoot, {\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Title: PopoverTitle,\n Description: PopoverDescription,\n Body: PopoverBody,\n Footer: PopoverFooter,\n Close: PopoverClose,\n});\n\n// Re-export individual components\nexport {\n PopoverRoot,\n PopoverTrigger,\n PopoverContent,\n PopoverTitle,\n PopoverDescription,\n PopoverBody,\n PopoverFooter,\n PopoverClose,\n};\n"],"names":["jsxs","jsx","BasePopover","styles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport styles from './Popover.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Popover for floating content attached to a trigger element.\n * @see https://usefragments.com/components/popover\n */\nexport interface PopoverProps {\n children: React.ReactNode;\n /** Controlled open state */\n open?: boolean;\n /** Default open state */\n defaultOpen?: boolean;\n /** Called when open state changes */\n onOpenChange?: (open: boolean) => void;\n /** Whether the popover blocks interaction with the rest of the page.\n * @default false */\n modal?: boolean;\n}\n\ntype PopoverTriggerAsButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n children: React.ReactNode;\n asChild?: false;\n};\ntype PopoverTriggerAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {\n children: React.ReactElement;\n asChild: true;\n};\nexport type PopoverTriggerProps = PopoverTriggerAsButtonProps | PopoverTriggerAsChildProps;\n\nexport interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n size?: 'sm' | 'md' | 'lg';\n side?: 'top' | 'bottom' | 'left' | 'right';\n align?: 'start' | 'center' | 'end';\n sideOffset?: number;\n arrow?: boolean;\n}\n\nexport interface PopoverTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n children: React.ReactNode;\n}\n\nexport interface PopoverDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n children: React.ReactNode;\n}\n\nexport interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nexport interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\ntype PopoverCloseAsButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n children?: React.ReactNode;\n asChild?: false;\n};\ntype PopoverCloseAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {\n children: React.ReactElement;\n asChild: true;\n};\nexport type PopoverCloseProps = PopoverCloseAsButtonProps | PopoverCloseAsChildProps;\n\n// ============================================\n// Icons\n// ============================================\n\nfunction CloseIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction PopoverRoot({\n children,\n open,\n defaultOpen,\n onOpenChange,\n modal = false,\n}: PopoverProps) {\n return (\n <BasePopover.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n modal={modal}\n >\n {children}\n </BasePopover.Root>\n );\n}\n\nfunction PopoverTrigger({ children, asChild, className, ...htmlProps }: PopoverTriggerProps) {\n if (asChild) {\n if (!React.isValidElement(children)) {\n throw new Error('Popover.Trigger with asChild requires a single valid React element child.');\n }\n return (\n <BasePopover.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>\n {null}\n </BasePopover.Trigger>\n );\n }\n\n return (\n <BasePopover.Trigger\n {...htmlProps}\n type={(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>).type ?? 'button'}\n className={className}\n >\n {children}\n </BasePopover.Trigger>\n );\n}\n\nfunction PopoverContent({\n children,\n size = 'md',\n side = 'bottom',\n align = 'center',\n sideOffset = 8,\n arrow = false,\n className,\n ...htmlProps\n}: PopoverContentProps) {\n const popupClasses = [\n styles.popup,\n size !== 'md' && styles[size],\n className,\n ].filter(Boolean).join(' ');\n\n return (\n <BasePopover.Portal>\n <BasePopover.Positioner\n side={side}\n align={align}\n sideOffset={sideOffset}\n className={styles.positioner}\n >\n <BasePopover.Popup {...htmlProps} className={popupClasses}>\n {children}\n {arrow && <BasePopover.Arrow className={styles.arrow} />}\n </BasePopover.Popup>\n </BasePopover.Positioner>\n </BasePopover.Portal>\n );\n}\n\nfunction PopoverTitle({ children, className, ...htmlProps }: PopoverTitleProps) {\n const classes = [styles.title, className].filter(Boolean).join(' ');\n return <BasePopover.Title {...htmlProps} className={classes}>{children}</BasePopover.Title>;\n}\n\nfunction PopoverDescription({ children, className, ...htmlProps }: PopoverDescriptionProps) {\n const classes = [styles.description, className].filter(Boolean).join(' ');\n return (\n <BasePopover.Description {...htmlProps} className={classes}>\n {children}\n </BasePopover.Description>\n );\n}\n\nfunction PopoverBody({ children, className, ...htmlProps }: PopoverBodyProps) {\n const classes = [styles.body, className].filter(Boolean).join(' ');\n return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverFooter({ children, className, ...htmlProps }: PopoverFooterProps) {\n const classes = [styles.footer, className].filter(Boolean).join(' ');\n return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverClose({ children, asChild, className, ...htmlProps }: PopoverCloseProps) {\n // Default close button (X icon)\n if (!children) {\n return (\n <BasePopover.Close\n {...htmlProps}\n type={(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>).type ?? 'button'}\n aria-label=\"Close popover\"\n className={[styles.close, className].filter(Boolean).join(' ')}\n >\n <CloseIcon />\n </BasePopover.Close>\n );\n }\n\n if (asChild) {\n if (!React.isValidElement(children)) {\n throw new Error('Popover.Close with asChild requires a single valid React element child.');\n }\n return (\n <BasePopover.Close {...htmlProps} className={className} render={children as React.ReactElement}>\n {null}\n </BasePopover.Close>\n );\n }\n\n return (\n <BasePopover.Close\n {...htmlProps}\n type={(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>).type ?? 'button'}\n className={className}\n >\n {children}\n </BasePopover.Close>\n );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Popover = Object.assign(PopoverRoot, {\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Title: PopoverTitle,\n Description: PopoverDescription,\n Body: PopoverBody,\n Footer: PopoverFooter,\n Close: PopoverClose,\n});\n\n// Re-export individual components\nexport {\n PopoverRoot,\n PopoverTrigger,\n PopoverContent,\n PopoverTitle,\n PopoverDescription,\n PopoverBody,\n PopoverFooter,\n PopoverClose,\n};\n"],"names":["jsxs","jsx","BasePopover","React","styles"],"mappings":"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"}
|
|
@@ -15,10 +15,15 @@ export interface PopoverProps {
|
|
|
15
15
|
* @default false */
|
|
16
16
|
modal?: boolean;
|
|
17
17
|
}
|
|
18
|
-
|
|
18
|
+
type PopoverTriggerAsButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
19
19
|
children: React.ReactNode;
|
|
20
|
-
asChild?:
|
|
21
|
-
}
|
|
20
|
+
asChild?: false;
|
|
21
|
+
};
|
|
22
|
+
type PopoverTriggerAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
|
|
23
|
+
children: React.ReactElement;
|
|
24
|
+
asChild: true;
|
|
25
|
+
};
|
|
26
|
+
export type PopoverTriggerProps = PopoverTriggerAsButtonProps | PopoverTriggerAsChildProps;
|
|
22
27
|
export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
23
28
|
children: React.ReactNode;
|
|
24
29
|
size?: 'sm' | 'md' | 'lg';
|
|
@@ -39,10 +44,15 @@ export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
39
44
|
export interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
40
45
|
children: React.ReactNode;
|
|
41
46
|
}
|
|
42
|
-
|
|
47
|
+
type PopoverCloseAsButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
43
48
|
children?: React.ReactNode;
|
|
44
|
-
asChild?:
|
|
45
|
-
}
|
|
49
|
+
asChild?: false;
|
|
50
|
+
};
|
|
51
|
+
type PopoverCloseAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
|
|
52
|
+
children: React.ReactElement;
|
|
53
|
+
asChild: true;
|
|
54
|
+
};
|
|
55
|
+
export type PopoverCloseProps = PopoverCloseAsButtonProps | PopoverCloseAsChildProps;
|
|
46
56
|
declare function PopoverRoot({ children, open, defaultOpen, onOpenChange, modal, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
47
57
|
declare function PopoverTrigger({ children, asChild, className, ...htmlProps }: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
48
58
|
declare function PopoverContent({ children, size, side, align, sideOffset, arrow, className, ...htmlProps }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;wBACoB;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;wBACoB;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,KAAK,2BAA2B,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACjF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AACF,KAAK,0BAA0B,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,OAAO,EAAE,IAAI,CAAC;CACf,CAAC;AACF,MAAM,MAAM,mBAAmB,GAAG,2BAA2B,GAAG,0BAA0B,CAAC;AAE3F,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAClG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,KAAK,yBAAyB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC/E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AACF,KAAK,wBAAwB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,OAAO,EAAE,IAAI,CAAC;CACf,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG,yBAAyB,GAAG,wBAAwB,CAAC;AA8BrF,iBAAS,WAAW,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,KAAa,GACd,EAAE,YAAY,2CAWd;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,mBAAmB,2CAqB1F;AAED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,IAAW,EACX,IAAe,EACf,KAAgB,EAChB,UAAc,EACd,KAAa,EACb,SAAS,EACT,GAAG,SAAS,EACb,EAAE,mBAAmB,2CAsBrB;AAED,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,iBAAiB,2CAG7E;AAED,iBAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,uBAAuB,2CAOzF;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,gBAAgB,2CAG3E;AAED,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,kBAAkB,2CAG/E;AAED,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,iBAAiB,2CAmCtF;AAMD,eAAO,MAAM,OAAO;;;;;;;;CAQlB,CAAC;AAGH,OAAO,EACL,WAAW,EACX,cAAc,EACd,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,YAAY,GACb,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
2
3
|
import { Popover as Popover$1 } from "@base-ui/react/popover";
|
|
3
4
|
import styles from "./Popover.module.scss.js";
|
|
4
5
|
function CloseIcon() {
|
|
@@ -42,9 +43,20 @@ function PopoverRoot({
|
|
|
42
43
|
}
|
|
43
44
|
function PopoverTrigger({ children, asChild, className, ...htmlProps }) {
|
|
44
45
|
if (asChild) {
|
|
46
|
+
if (!React.isValidElement(children)) {
|
|
47
|
+
throw new Error("Popover.Trigger with asChild requires a single valid React element child.");
|
|
48
|
+
}
|
|
45
49
|
return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...htmlProps, className, render: children, children: null });
|
|
46
50
|
}
|
|
47
|
-
return /* @__PURE__ */ jsx(
|
|
51
|
+
return /* @__PURE__ */ jsx(
|
|
52
|
+
Popover$1.Trigger,
|
|
53
|
+
{
|
|
54
|
+
...htmlProps,
|
|
55
|
+
type: htmlProps.type ?? "button",
|
|
56
|
+
className,
|
|
57
|
+
children
|
|
58
|
+
}
|
|
59
|
+
);
|
|
48
60
|
}
|
|
49
61
|
function PopoverContent({
|
|
50
62
|
children,
|
|
@@ -97,6 +109,7 @@ function PopoverClose({ children, asChild, className, ...htmlProps }) {
|
|
|
97
109
|
Popover$1.Close,
|
|
98
110
|
{
|
|
99
111
|
...htmlProps,
|
|
112
|
+
type: htmlProps.type ?? "button",
|
|
100
113
|
"aria-label": "Close popover",
|
|
101
114
|
className: [styles.close, className].filter(Boolean).join(" "),
|
|
102
115
|
children: /* @__PURE__ */ jsx(CloseIcon, {})
|
|
@@ -104,9 +117,20 @@ function PopoverClose({ children, asChild, className, ...htmlProps }) {
|
|
|
104
117
|
);
|
|
105
118
|
}
|
|
106
119
|
if (asChild) {
|
|
120
|
+
if (!React.isValidElement(children)) {
|
|
121
|
+
throw new Error("Popover.Close with asChild requires a single valid React element child.");
|
|
122
|
+
}
|
|
107
123
|
return /* @__PURE__ */ jsx(Popover$1.Close, { ...htmlProps, className, render: children, children: null });
|
|
108
124
|
}
|
|
109
|
-
return /* @__PURE__ */ jsx(
|
|
125
|
+
return /* @__PURE__ */ jsx(
|
|
126
|
+
Popover$1.Close,
|
|
127
|
+
{
|
|
128
|
+
...htmlProps,
|
|
129
|
+
type: htmlProps.type ?? "button",
|
|
130
|
+
className,
|
|
131
|
+
children
|
|
132
|
+
}
|
|
133
|
+
);
|
|
110
134
|
}
|
|
111
135
|
const Popover = Object.assign(PopoverRoot, {
|
|
112
136
|
Trigger: PopoverTrigger,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport styles from './Popover.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Popover for floating content attached to a trigger element.\n * @see https://usefragments.com/components/popover\n */\nexport interface PopoverProps {\n children: React.ReactNode;\n /** Controlled open state */\n open?: boolean;\n /** Default open state */\n defaultOpen?: boolean;\n /** Called when open state changes */\n onOpenChange?: (open: boolean) => void;\n /** Whether the popover blocks interaction with the rest of the page.\n * @default false */\n modal?: boolean;\n}\n\nexport interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children: React.ReactNode;\n asChild?: boolean;\n}\n\nexport interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n size?: 'sm' | 'md' | 'lg';\n side?: 'top' | 'bottom' | 'left' | 'right';\n align?: 'start' | 'center' | 'end';\n sideOffset?: number;\n arrow?: boolean;\n}\n\nexport interface PopoverTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n children: React.ReactNode;\n}\n\nexport interface PopoverDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n children: React.ReactNode;\n}\n\nexport interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nexport interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nexport interface PopoverCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children?: React.ReactNode;\n asChild?: boolean;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction CloseIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction PopoverRoot({\n children,\n open,\n defaultOpen,\n onOpenChange,\n modal = false,\n}: PopoverProps) {\n return (\n <BasePopover.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n modal={modal}\n >\n {children}\n </BasePopover.Root>\n );\n}\n\nfunction PopoverTrigger({ children, asChild, className, ...htmlProps }: PopoverTriggerProps) {\n if (asChild) {\n return (\n <BasePopover.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>\n {null}\n </BasePopover.Trigger>\n );\n }\n\n return (\n <BasePopover.Trigger {...htmlProps} className={className}>\n {children}\n </BasePopover.Trigger>\n );\n}\n\nfunction PopoverContent({\n children,\n size = 'md',\n side = 'bottom',\n align = 'center',\n sideOffset = 8,\n arrow = false,\n className,\n ...htmlProps\n}: PopoverContentProps) {\n const popupClasses = [\n styles.popup,\n size !== 'md' && styles[size],\n className,\n ].filter(Boolean).join(' ');\n\n return (\n <BasePopover.Portal>\n <BasePopover.Positioner\n side={side}\n align={align}\n sideOffset={sideOffset}\n className={styles.positioner}\n >\n <BasePopover.Popup {...htmlProps} className={popupClasses}>\n {children}\n {arrow && <BasePopover.Arrow className={styles.arrow} />}\n </BasePopover.Popup>\n </BasePopover.Positioner>\n </BasePopover.Portal>\n );\n}\n\nfunction PopoverTitle({ children, className, ...htmlProps }: PopoverTitleProps) {\n const classes = [styles.title, className].filter(Boolean).join(' ');\n return <BasePopover.Title {...htmlProps} className={classes}>{children}</BasePopover.Title>;\n}\n\nfunction PopoverDescription({ children, className, ...htmlProps }: PopoverDescriptionProps) {\n const classes = [styles.description, className].filter(Boolean).join(' ');\n return (\n <BasePopover.Description {...htmlProps} className={classes}>\n {children}\n </BasePopover.Description>\n );\n}\n\nfunction PopoverBody({ children, className, ...htmlProps }: PopoverBodyProps) {\n const classes = [styles.body, className].filter(Boolean).join(' ');\n return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverFooter({ children, className, ...htmlProps }: PopoverFooterProps) {\n const classes = [styles.footer, className].filter(Boolean).join(' ');\n return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverClose({ children, asChild, className, ...htmlProps }: PopoverCloseProps) {\n // Default close button (X icon)\n if (!children) {\n return (\n <BasePopover.Close\n {...htmlProps}\n aria-label=\"Close popover\"\n className={[styles.close, className].filter(Boolean).join(' ')}\n >\n <CloseIcon />\n </BasePopover.Close>\n );\n }\n\n if (asChild) {\n return (\n <BasePopover.Close {...htmlProps} className={className} render={children as React.ReactElement}>\n {null}\n </BasePopover.Close>\n );\n }\n\n return (\n <BasePopover.Close {...htmlProps} className={className}>\n {children}\n </BasePopover.Close>\n );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Popover = Object.assign(PopoverRoot, {\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Title: PopoverTitle,\n Description: PopoverDescription,\n Body: PopoverBody,\n Footer: PopoverFooter,\n Close: PopoverClose,\n});\n\n// Re-export individual components\nexport {\n PopoverRoot,\n PopoverTrigger,\n PopoverContent,\n PopoverTitle,\n PopoverDescription,\n PopoverBody,\n PopoverFooter,\n PopoverClose,\n};\n"],"names":["BasePopover"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport styles from './Popover.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Popover for floating content attached to a trigger element.\n * @see https://usefragments.com/components/popover\n */\nexport interface PopoverProps {\n children: React.ReactNode;\n /** Controlled open state */\n open?: boolean;\n /** Default open state */\n defaultOpen?: boolean;\n /** Called when open state changes */\n onOpenChange?: (open: boolean) => void;\n /** Whether the popover blocks interaction with the rest of the page.\n * @default false */\n modal?: boolean;\n}\n\ntype PopoverTriggerAsButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n children: React.ReactNode;\n asChild?: false;\n};\ntype PopoverTriggerAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {\n children: React.ReactElement;\n asChild: true;\n};\nexport type PopoverTriggerProps = PopoverTriggerAsButtonProps | PopoverTriggerAsChildProps;\n\nexport interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n size?: 'sm' | 'md' | 'lg';\n side?: 'top' | 'bottom' | 'left' | 'right';\n align?: 'start' | 'center' | 'end';\n sideOffset?: number;\n arrow?: boolean;\n}\n\nexport interface PopoverTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n children: React.ReactNode;\n}\n\nexport interface PopoverDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n children: React.ReactNode;\n}\n\nexport interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nexport interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\ntype PopoverCloseAsButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n children?: React.ReactNode;\n asChild?: false;\n};\ntype PopoverCloseAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {\n children: React.ReactElement;\n asChild: true;\n};\nexport type PopoverCloseProps = PopoverCloseAsButtonProps | PopoverCloseAsChildProps;\n\n// ============================================\n// Icons\n// ============================================\n\nfunction CloseIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction PopoverRoot({\n children,\n open,\n defaultOpen,\n onOpenChange,\n modal = false,\n}: PopoverProps) {\n return (\n <BasePopover.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n modal={modal}\n >\n {children}\n </BasePopover.Root>\n );\n}\n\nfunction PopoverTrigger({ children, asChild, className, ...htmlProps }: PopoverTriggerProps) {\n if (asChild) {\n if (!React.isValidElement(children)) {\n throw new Error('Popover.Trigger with asChild requires a single valid React element child.');\n }\n return (\n <BasePopover.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>\n {null}\n </BasePopover.Trigger>\n );\n }\n\n return (\n <BasePopover.Trigger\n {...htmlProps}\n type={(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>).type ?? 'button'}\n className={className}\n >\n {children}\n </BasePopover.Trigger>\n );\n}\n\nfunction PopoverContent({\n children,\n size = 'md',\n side = 'bottom',\n align = 'center',\n sideOffset = 8,\n arrow = false,\n className,\n ...htmlProps\n}: PopoverContentProps) {\n const popupClasses = [\n styles.popup,\n size !== 'md' && styles[size],\n className,\n ].filter(Boolean).join(' ');\n\n return (\n <BasePopover.Portal>\n <BasePopover.Positioner\n side={side}\n align={align}\n sideOffset={sideOffset}\n className={styles.positioner}\n >\n <BasePopover.Popup {...htmlProps} className={popupClasses}>\n {children}\n {arrow && <BasePopover.Arrow className={styles.arrow} />}\n </BasePopover.Popup>\n </BasePopover.Positioner>\n </BasePopover.Portal>\n );\n}\n\nfunction PopoverTitle({ children, className, ...htmlProps }: PopoverTitleProps) {\n const classes = [styles.title, className].filter(Boolean).join(' ');\n return <BasePopover.Title {...htmlProps} className={classes}>{children}</BasePopover.Title>;\n}\n\nfunction PopoverDescription({ children, className, ...htmlProps }: PopoverDescriptionProps) {\n const classes = [styles.description, className].filter(Boolean).join(' ');\n return (\n <BasePopover.Description {...htmlProps} className={classes}>\n {children}\n </BasePopover.Description>\n );\n}\n\nfunction PopoverBody({ children, className, ...htmlProps }: PopoverBodyProps) {\n const classes = [styles.body, className].filter(Boolean).join(' ');\n return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverFooter({ children, className, ...htmlProps }: PopoverFooterProps) {\n const classes = [styles.footer, className].filter(Boolean).join(' ');\n return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverClose({ children, asChild, className, ...htmlProps }: PopoverCloseProps) {\n // Default close button (X icon)\n if (!children) {\n return (\n <BasePopover.Close\n {...htmlProps}\n type={(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>).type ?? 'button'}\n aria-label=\"Close popover\"\n className={[styles.close, className].filter(Boolean).join(' ')}\n >\n <CloseIcon />\n </BasePopover.Close>\n );\n }\n\n if (asChild) {\n if (!React.isValidElement(children)) {\n throw new Error('Popover.Close with asChild requires a single valid React element child.');\n }\n return (\n <BasePopover.Close {...htmlProps} className={className} render={children as React.ReactElement}>\n {null}\n </BasePopover.Close>\n );\n }\n\n return (\n <BasePopover.Close\n {...htmlProps}\n type={(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>).type ?? 'button'}\n className={className}\n >\n {children}\n </BasePopover.Close>\n );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Popover = Object.assign(PopoverRoot, {\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Title: PopoverTitle,\n Description: PopoverDescription,\n Body: PopoverBody,\n Footer: PopoverFooter,\n Close: PopoverClose,\n});\n\n// Re-export individual components\nexport {\n PopoverRoot,\n PopoverTrigger,\n PopoverContent,\n PopoverTitle,\n PopoverDescription,\n PopoverBody,\n PopoverFooter,\n PopoverClose,\n};\n"],"names":["BasePopover"],"mappings":"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"}
|
|
@@ -18,7 +18,9 @@ function ProgressRoot({
|
|
|
18
18
|
...htmlProps
|
|
19
19
|
}) {
|
|
20
20
|
const isIndeterminate = value === null;
|
|
21
|
-
const
|
|
21
|
+
const range = max - min;
|
|
22
|
+
const normalizedPercentage = isIndeterminate ? 0 : range <= 0 ? 0 : (value - min) / range * 100;
|
|
23
|
+
const percentage = isIndeterminate ? 0 : Math.round(Math.min(100, Math.max(0, normalizedPercentage)));
|
|
22
24
|
const trackClasses = [
|
|
23
25
|
Progress_module.default.track,
|
|
24
26
|
size === "sm" && Progress_module.default.trackSm,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/Progress/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Progress as BaseProgress } from '@base-ui/react/progress';\nimport styles from './Progress.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n /** Current progress value (0-100). Null for indeterminate. */\n value?: number | null;\n /** Minimum value */\n min?: number;\n /** Maximum value */\n max?: number;\n /** Size of the progress bar */\n size?: 'sm' | 'md' | 'lg';\n /** Color variant */\n variant?: 'default' | 'success' | 'warning' | 'danger';\n /** Label text */\n label?: string;\n /** Show percentage value */\n showValue?: boolean;\n /** Custom value formatter */\n formatValue?: (value: number) => string;\n}\n\nexport interface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Current progress value (0-100). Null for indeterminate. */\n value?: number | null;\n /** Size of the circular progress */\n size?: 'sm' | 'md' | 'lg';\n /** Color variant */\n variant?: 'default' | 'success' | 'warning' | 'danger';\n /** Show percentage in center */\n showValue?: boolean;\n /** Stroke width */\n strokeWidth?: number;\n}\n\n// ============================================\n// Linear Progress\n// ============================================\n\nfunction ProgressRoot({\n value = null,\n min = 0,\n max = 100,\n size = 'md',\n variant = 'default',\n label,\n showValue = false,\n formatValue,\n className,\n 'aria-label': ariaLabel,\n 'aria-valuetext': ariaValueText,\n ...htmlProps\n}: ProgressProps) {\n const isIndeterminate = value === null;\n const percentage = isIndeterminate ? 0 : Math.round(((value - min) / (max - min)) * 100);\n\n const trackClasses = [\n styles.track,\n size === 'sm' && styles.trackSm,\n size === 'md' && styles.trackMd,\n size === 'lg' && styles.trackLg,\n ].filter(Boolean).join(' ');\n\n const indicatorClasses = [\n styles.indicator,\n variant === 'success' && styles.indicatorSuccess,\n variant === 'warning' && styles.indicatorWarning,\n variant === 'danger' && styles.indicatorDanger,\n isIndeterminate && styles.indicatorIndeterminate,\n ].filter(Boolean).join(' ');\n\n const rootClasses = [styles.root, className].filter(Boolean).join(' ');\n\n const displayValue = formatValue\n ? formatValue(percentage)\n : `${percentage}%`;\n\n // Default value text for screen readers\n const effectiveValueText = ariaValueText || (\n isIndeterminate ? 'Loading' : `${percentage} percent`\n );\n\n return (\n <BaseProgress.Root\n {...htmlProps}\n value={value}\n min={min}\n max={max}\n className={rootClasses}\n aria-label={ariaLabel || (label ? undefined : 'Progress')}\n aria-valuetext={effectiveValueText}\n aria-busy={isIndeterminate}\n >\n {(label || showValue) && (\n <div className={styles.header}>\n {label && (\n <BaseProgress.Label className={styles.label}>\n {label}\n </BaseProgress.Label>\n )}\n {showValue && !isIndeterminate && (\n <span className={styles.value}>{displayValue}</span>\n )}\n </div>\n )}\n <BaseProgress.Track className={trackClasses}>\n <BaseProgress.Indicator\n className={indicatorClasses}\n style={isIndeterminate ? undefined : { width: `${percentage}%` }}\n />\n </BaseProgress.Track>\n </BaseProgress.Root>\n );\n}\n\n// ============================================\n// Circular Progress\n// ============================================\n\nconst CIRCLE_SIZES = {\n sm: { size: 32, strokeWidth: 3 },\n md: { size: 48, strokeWidth: 4 },\n lg: { size: 64, strokeWidth: 5 },\n};\n\nfunction CircularProgressRoot({\n value = null,\n size = 'md',\n variant = 'default',\n showValue = false,\n strokeWidth: customStrokeWidth,\n className,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-valuetext': ariaValueText,\n ...htmlProps\n}: CircularProgressProps) {\n const isIndeterminate = value === null;\n const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, value));\n\n const { size: svgSize, strokeWidth: defaultStrokeWidth } = CIRCLE_SIZES[size];\n const strokeWidth = customStrokeWidth ?? defaultStrokeWidth;\n\n const radius = (svgSize - strokeWidth) / 2;\n const circumference = 2 * Math.PI * radius;\n const offset = circumference - (percentage / 100) * circumference;\n\n const sizeClass = size === 'sm' ? styles.circularSm\n : size === 'lg' ? styles.circularLg\n : styles.circularMd;\n\n const indicatorClasses = [\n styles.circularIndicator,\n variant === 'success' && styles.circularIndicatorSuccess,\n variant === 'warning' && styles.circularIndicatorWarning,\n variant === 'danger' && styles.circularIndicatorDanger,\n isIndeterminate && styles.circularIndicatorIndeterminate,\n ].filter(Boolean).join(' ');\n\n const rootClasses = [styles.circular, sizeClass, className]\n .filter(Boolean)\n .join(' ');\n\n // Default value text for screen readers\n const effectiveValueText = ariaValueText || (\n isIndeterminate ? 'Loading' : `${Math.round(percentage)} percent`\n );\n\n return (\n <BaseProgress.Root\n {...htmlProps}\n value={value}\n min={0}\n max={100}\n className={rootClasses}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-valuenow={isIndeterminate ? undefined : percentage}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuetext={effectiveValueText}\n aria-busy={isIndeterminate}\n >\n <svg\n className={styles.circularSvg}\n width={svgSize}\n height={svgSize}\n viewBox={`0 0 ${svgSize} ${svgSize}`}\n aria-hidden=\"true\"\n >\n {/* Track circle */}\n <circle\n className={styles.circularTrack}\n cx={svgSize / 2}\n cy={svgSize / 2}\n r={radius}\n strokeWidth={strokeWidth}\n />\n {/* Indicator circle */}\n <circle\n className={indicatorClasses}\n cx={svgSize / 2}\n cy={svgSize / 2}\n r={radius}\n strokeWidth={strokeWidth}\n strokeDasharray={circumference}\n strokeDashoffset={isIndeterminate ? undefined : offset}\n style={isIndeterminate ? { transformOrigin: 'center' } : undefined}\n />\n </svg>\n {showValue && !isIndeterminate && (\n <span className={styles.circularValue} aria-hidden=\"true\">{Math.round(percentage)}%</span>\n )}\n </BaseProgress.Root>\n );\n}\n\nexport const CircularProgress = CircularProgressRoot;\n\nexport const Progress = Object.assign(ProgressRoot, {\n Root: ProgressRoot,\n Circular: CircularProgressRoot,\n});\n"],"names":["styles","jsxs","BaseProgress","jsx"],"mappings":";;;;;AA8CA,SAAS,aAAa;AAAA,EACpB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,GAAG;AACL,GAAkB;AAChB,QAAM,kBAAkB,UAAU;AAClC,QAAM,aAAa,kBAAkB,IAAI,KAAK,OAAQ,QAAQ,QAAQ,MAAM,OAAQ,GAAG;AAEvF,QAAM,eAAe;AAAA,IACnBA,gBAAAA,QAAO;AAAA,IACP,SAAS,QAAQA,gBAAAA,QAAO;AAAA,IACxB,SAAS,QAAQA,gBAAAA,QAAO;AAAA,IACxB,SAAS,QAAQA,wBAAO;AAAA,EAAA,EACxB,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,mBAAmB;AAAA,IACvBA,gBAAAA,QAAO;AAAA,IACP,YAAY,aAAaA,gBAAAA,QAAO;AAAA,IAChC,YAAY,aAAaA,gBAAAA,QAAO;AAAA,IAChC,YAAY,YAAYA,gBAAAA,QAAO;AAAA,IAC/B,mBAAmBA,gBAAAA,QAAO;AAAA,EAAA,EAC1B,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,cAAc,CAACA,gBAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAErE,QAAM,eAAe,cACjB,YAAY,UAAU,IACtB,GAAG,UAAU;AAGjB,QAAM,qBAAqB,kBACzB,kBAAkB,YAAY,GAAG,UAAU;AAG7C,SACEC,2BAAAA;AAAAA,IAACC,SAAAA,SAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,cAAY,cAAc,QAAQ,SAAY;AAAA,MAC9C,kBAAgB;AAAA,MAChB,aAAW;AAAA,MAET,UAAA;AAAA,SAAA,SAAS,cACTD,gCAAC,OAAA,EAAI,WAAWD,gBAAAA,QAAO,QACpB,UAAA;AAAA,UAAA,wCACEE,SAAAA,SAAa,OAAb,EAAmB,WAAWF,gBAAAA,QAAO,OACnC,UAAA,OACH;AAAA,UAED,aAAa,CAAC,mBACbG,2BAAAA,IAAC,UAAK,WAAWH,wBAAO,OAAQ,UAAA,aAAA,CAAa;AAAA,QAAA,GAEjD;AAAA,QAEFG,2BAAAA,IAACD,SAAAA,SAAa,OAAb,EAAmB,WAAW,cAC7B,UAAAC,2BAAAA;AAAAA,UAACD,SAAAA,SAAa;AAAA,UAAb;AAAA,YACC,WAAW;AAAA,YACX,OAAO,kBAAkB,SAAY,EAAE,OAAO,GAAG,UAAU,IAAA;AAAA,UAAI;AAAA,QAAA,EACjE,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAMA,MAAM,eAAe;AAAA,EACnB,IAAI,EAAE,MAAM,IAAI,aAAa,EAAA;AAAA,EAC7B,IAAI,EAAE,MAAM,IAAI,aAAa,EAAA;AAAA,EAC7B,IAAI,EAAE,MAAM,IAAI,aAAa,EAAA;AAC/B;AAEA,SAAS,qBAAqB;AAAA,EAC5B,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,GAAG;AACL,GAA0B;AACxB,QAAM,kBAAkB,UAAU;AAClC,QAAM,aAAa,kBAAkB,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AAEzE,QAAM,EAAE,MAAM,SAAS,aAAa,mBAAA,IAAuB,aAAa,IAAI;AAC5E,QAAM,cAAc,qBAAqB;AAEzC,QAAM,UAAU,UAAU,eAAe;AACzC,QAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,QAAM,SAAS,gBAAiB,aAAa,MAAO;AAEpD,QAAM,YAAY,SAAS,OAAOF,wBAAO,aACrC,SAAS,OAAOA,gBAAAA,QAAO,aACvBA,gBAAAA,QAAO;AAEX,QAAM,mBAAmB;AAAA,IACvBA,gBAAAA,QAAO;AAAA,IACP,YAAY,aAAaA,gBAAAA,QAAO;AAAA,IAChC,YAAY,aAAaA,gBAAAA,QAAO;AAAA,IAChC,YAAY,YAAYA,gBAAAA,QAAO;AAAA,IAC/B,mBAAmBA,gBAAAA,QAAO;AAAA,EAAA,EAC1B,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,cAAc,CAACA,wBAAO,UAAU,WAAW,SAAS,EACvD,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,QAAM,qBAAqB,kBACzB,kBAAkB,YAAY,GAAG,KAAK,MAAM,UAAU,CAAC;AAGzD,SACEC,2BAAAA;AAAAA,IAACC,SAAAA,SAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,WAAW;AAAA,MACX,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,iBAAe,kBAAkB,SAAY;AAAA,MAC7C,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB;AAAA,MAChB,aAAW;AAAA,MAEX,UAAA;AAAA,QAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,gBAAAA,QAAO;AAAA,YAClB,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS,OAAO,OAAO,IAAI,OAAO;AAAA,YAClC,eAAY;AAAA,YAGZ,UAAA;AAAA,cAAAG,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH,gBAAAA,QAAO;AAAA,kBAClB,IAAI,UAAU;AAAA,kBACd,IAAI,UAAU;AAAA,kBACd,GAAG;AAAA,kBACH;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGFG,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,kBACX,IAAI,UAAU;AAAA,kBACd,IAAI,UAAU;AAAA,kBACd,GAAG;AAAA,kBACH;AAAA,kBACA,iBAAiB;AAAA,kBACjB,kBAAkB,kBAAkB,SAAY;AAAA,kBAChD,OAAO,kBAAkB,EAAE,iBAAiB,aAAa;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC3D;AAAA,UAAA;AAAA,QAAA;AAAA,QAED,aAAa,CAAC,mBACbF,2BAAAA,KAAC,UAAK,WAAWD,gBAAAA,QAAO,eAAe,eAAY,QAAQ,UAAA;AAAA,UAAA,KAAK,MAAM,UAAU;AAAA,UAAE;AAAA,QAAA,EAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI3F;AAEO,MAAM,mBAAmB;AAEzB,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,MAAM;AAAA,EACN,UAAU;AACZ,CAAC;;;"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/Progress/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Progress as BaseProgress } from '@base-ui/react/progress';\nimport styles from './Progress.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n /** Current progress value (0-100). Null for indeterminate. */\n value?: number | null;\n /** Minimum value */\n min?: number;\n /** Maximum value */\n max?: number;\n /** Size of the progress bar */\n size?: 'sm' | 'md' | 'lg';\n /** Color variant */\n variant?: 'default' | 'success' | 'warning' | 'danger';\n /** Label text */\n label?: string;\n /** Show percentage value */\n showValue?: boolean;\n /** Custom value formatter */\n formatValue?: (value: number) => string;\n}\n\nexport interface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Current progress value (0-100). Null for indeterminate. */\n value?: number | null;\n /** Size of the circular progress */\n size?: 'sm' | 'md' | 'lg';\n /** Color variant */\n variant?: 'default' | 'success' | 'warning' | 'danger';\n /** Show percentage in center */\n showValue?: boolean;\n /** Stroke width */\n strokeWidth?: number;\n}\n\n// ============================================\n// Linear Progress\n// ============================================\n\nfunction ProgressRoot({\n value = null,\n min = 0,\n max = 100,\n size = 'md',\n variant = 'default',\n label,\n showValue = false,\n formatValue,\n className,\n 'aria-label': ariaLabel,\n 'aria-valuetext': ariaValueText,\n ...htmlProps\n}: ProgressProps) {\n const isIndeterminate = value === null;\n const range = max - min;\n const normalizedPercentage = isIndeterminate\n ? 0\n : range <= 0\n ? 0\n : ((value - min) / range) * 100;\n const percentage = isIndeterminate\n ? 0\n : Math.round(Math.min(100, Math.max(0, normalizedPercentage)));\n\n const trackClasses = [\n styles.track,\n size === 'sm' && styles.trackSm,\n size === 'md' && styles.trackMd,\n size === 'lg' && styles.trackLg,\n ].filter(Boolean).join(' ');\n\n const indicatorClasses = [\n styles.indicator,\n variant === 'success' && styles.indicatorSuccess,\n variant === 'warning' && styles.indicatorWarning,\n variant === 'danger' && styles.indicatorDanger,\n isIndeterminate && styles.indicatorIndeterminate,\n ].filter(Boolean).join(' ');\n\n const rootClasses = [styles.root, className].filter(Boolean).join(' ');\n\n const displayValue = formatValue\n ? formatValue(percentage)\n : `${percentage}%`;\n\n // Default value text for screen readers\n const effectiveValueText = ariaValueText || (\n isIndeterminate ? 'Loading' : `${percentage} percent`\n );\n\n return (\n <BaseProgress.Root\n {...htmlProps}\n value={value}\n min={min}\n max={max}\n className={rootClasses}\n aria-label={ariaLabel || (label ? undefined : 'Progress')}\n aria-valuetext={effectiveValueText}\n aria-busy={isIndeterminate}\n >\n {(label || showValue) && (\n <div className={styles.header}>\n {label && (\n <BaseProgress.Label className={styles.label}>\n {label}\n </BaseProgress.Label>\n )}\n {showValue && !isIndeterminate && (\n <span className={styles.value}>{displayValue}</span>\n )}\n </div>\n )}\n <BaseProgress.Track className={trackClasses}>\n <BaseProgress.Indicator\n className={indicatorClasses}\n style={isIndeterminate ? undefined : { width: `${percentage}%` }}\n />\n </BaseProgress.Track>\n </BaseProgress.Root>\n );\n}\n\n// ============================================\n// Circular Progress\n// ============================================\n\nconst CIRCLE_SIZES = {\n sm: { size: 32, strokeWidth: 3 },\n md: { size: 48, strokeWidth: 4 },\n lg: { size: 64, strokeWidth: 5 },\n};\n\nfunction CircularProgressRoot({\n value = null,\n size = 'md',\n variant = 'default',\n showValue = false,\n strokeWidth: customStrokeWidth,\n className,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-valuetext': ariaValueText,\n ...htmlProps\n}: CircularProgressProps) {\n const isIndeterminate = value === null;\n const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, value));\n\n const { size: svgSize, strokeWidth: defaultStrokeWidth } = CIRCLE_SIZES[size];\n const strokeWidth = customStrokeWidth ?? defaultStrokeWidth;\n\n const radius = (svgSize - strokeWidth) / 2;\n const circumference = 2 * Math.PI * radius;\n const offset = circumference - (percentage / 100) * circumference;\n\n const sizeClass = size === 'sm' ? styles.circularSm\n : size === 'lg' ? styles.circularLg\n : styles.circularMd;\n\n const indicatorClasses = [\n styles.circularIndicator,\n variant === 'success' && styles.circularIndicatorSuccess,\n variant === 'warning' && styles.circularIndicatorWarning,\n variant === 'danger' && styles.circularIndicatorDanger,\n isIndeterminate && styles.circularIndicatorIndeterminate,\n ].filter(Boolean).join(' ');\n\n const rootClasses = [styles.circular, sizeClass, className]\n .filter(Boolean)\n .join(' ');\n\n // Default value text for screen readers\n const effectiveValueText = ariaValueText || (\n isIndeterminate ? 'Loading' : `${Math.round(percentage)} percent`\n );\n\n return (\n <BaseProgress.Root\n {...htmlProps}\n value={value}\n min={0}\n max={100}\n className={rootClasses}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-valuenow={isIndeterminate ? undefined : percentage}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuetext={effectiveValueText}\n aria-busy={isIndeterminate}\n >\n <svg\n className={styles.circularSvg}\n width={svgSize}\n height={svgSize}\n viewBox={`0 0 ${svgSize} ${svgSize}`}\n aria-hidden=\"true\"\n >\n {/* Track circle */}\n <circle\n className={styles.circularTrack}\n cx={svgSize / 2}\n cy={svgSize / 2}\n r={radius}\n strokeWidth={strokeWidth}\n />\n {/* Indicator circle */}\n <circle\n className={indicatorClasses}\n cx={svgSize / 2}\n cy={svgSize / 2}\n r={radius}\n strokeWidth={strokeWidth}\n strokeDasharray={circumference}\n strokeDashoffset={isIndeterminate ? undefined : offset}\n style={isIndeterminate ? { transformOrigin: 'center' } : undefined}\n />\n </svg>\n {showValue && !isIndeterminate && (\n <span className={styles.circularValue} aria-hidden=\"true\">{Math.round(percentage)}%</span>\n )}\n </BaseProgress.Root>\n );\n}\n\nexport const CircularProgress = CircularProgressRoot;\n\nexport const Progress = Object.assign(ProgressRoot, {\n Root: ProgressRoot,\n Circular: CircularProgressRoot,\n});\n"],"names":["styles","jsxs","BaseProgress","jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC/F,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oCAAoC;IACpC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,iBAAS,YAAY,CAAC,EACpB,KAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAW,EACX,OAAmB,EACnB,KAAK,EACL,SAAiB,EACjB,WAAW,EACX,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC/F,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oCAAoC;IACpC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,iBAAS,YAAY,CAAC,EACpB,KAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAW,EACX,OAAmB,EACnB,KAAK,EACL,SAAiB,EACjB,WAAW,EACX,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,aAAa,2CAqEf;AAYD,iBAAS,oBAAoB,CAAC,EAC5B,KAAY,EACZ,IAAW,EACX,OAAmB,EACnB,SAAiB,EACjB,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,qBAAqB,2CA+EvB;AAED,eAAO,MAAM,gBAAgB,6BAAuB,CAAC;AAErD,eAAO,MAAM,QAAQ;;;CAGnB,CAAC"}
|
|
@@ -16,7 +16,9 @@ function ProgressRoot({
|
|
|
16
16
|
...htmlProps
|
|
17
17
|
}) {
|
|
18
18
|
const isIndeterminate = value === null;
|
|
19
|
-
const
|
|
19
|
+
const range = max - min;
|
|
20
|
+
const normalizedPercentage = isIndeterminate ? 0 : range <= 0 ? 0 : (value - min) / range * 100;
|
|
21
|
+
const percentage = isIndeterminate ? 0 : Math.round(Math.min(100, Math.max(0, normalizedPercentage)));
|
|
20
22
|
const trackClasses = [
|
|
21
23
|
styles.track,
|
|
22
24
|
size === "sm" && styles.trackSm,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Progress/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Progress as BaseProgress } from '@base-ui/react/progress';\nimport styles from './Progress.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n /** Current progress value (0-100). Null for indeterminate. */\n value?: number | null;\n /** Minimum value */\n min?: number;\n /** Maximum value */\n max?: number;\n /** Size of the progress bar */\n size?: 'sm' | 'md' | 'lg';\n /** Color variant */\n variant?: 'default' | 'success' | 'warning' | 'danger';\n /** Label text */\n label?: string;\n /** Show percentage value */\n showValue?: boolean;\n /** Custom value formatter */\n formatValue?: (value: number) => string;\n}\n\nexport interface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Current progress value (0-100). Null for indeterminate. */\n value?: number | null;\n /** Size of the circular progress */\n size?: 'sm' | 'md' | 'lg';\n /** Color variant */\n variant?: 'default' | 'success' | 'warning' | 'danger';\n /** Show percentage in center */\n showValue?: boolean;\n /** Stroke width */\n strokeWidth?: number;\n}\n\n// ============================================\n// Linear Progress\n// ============================================\n\nfunction ProgressRoot({\n value = null,\n min = 0,\n max = 100,\n size = 'md',\n variant = 'default',\n label,\n showValue = false,\n formatValue,\n className,\n 'aria-label': ariaLabel,\n 'aria-valuetext': ariaValueText,\n ...htmlProps\n}: ProgressProps) {\n const isIndeterminate = value === null;\n const percentage = isIndeterminate ? 0 : Math.round(((value - min) / (max - min)) * 100);\n\n const trackClasses = [\n styles.track,\n size === 'sm' && styles.trackSm,\n size === 'md' && styles.trackMd,\n size === 'lg' && styles.trackLg,\n ].filter(Boolean).join(' ');\n\n const indicatorClasses = [\n styles.indicator,\n variant === 'success' && styles.indicatorSuccess,\n variant === 'warning' && styles.indicatorWarning,\n variant === 'danger' && styles.indicatorDanger,\n isIndeterminate && styles.indicatorIndeterminate,\n ].filter(Boolean).join(' ');\n\n const rootClasses = [styles.root, className].filter(Boolean).join(' ');\n\n const displayValue = formatValue\n ? formatValue(percentage)\n : `${percentage}%`;\n\n // Default value text for screen readers\n const effectiveValueText = ariaValueText || (\n isIndeterminate ? 'Loading' : `${percentage} percent`\n );\n\n return (\n <BaseProgress.Root\n {...htmlProps}\n value={value}\n min={min}\n max={max}\n className={rootClasses}\n aria-label={ariaLabel || (label ? undefined : 'Progress')}\n aria-valuetext={effectiveValueText}\n aria-busy={isIndeterminate}\n >\n {(label || showValue) && (\n <div className={styles.header}>\n {label && (\n <BaseProgress.Label className={styles.label}>\n {label}\n </BaseProgress.Label>\n )}\n {showValue && !isIndeterminate && (\n <span className={styles.value}>{displayValue}</span>\n )}\n </div>\n )}\n <BaseProgress.Track className={trackClasses}>\n <BaseProgress.Indicator\n className={indicatorClasses}\n style={isIndeterminate ? undefined : { width: `${percentage}%` }}\n />\n </BaseProgress.Track>\n </BaseProgress.Root>\n );\n}\n\n// ============================================\n// Circular Progress\n// ============================================\n\nconst CIRCLE_SIZES = {\n sm: { size: 32, strokeWidth: 3 },\n md: { size: 48, strokeWidth: 4 },\n lg: { size: 64, strokeWidth: 5 },\n};\n\nfunction CircularProgressRoot({\n value = null,\n size = 'md',\n variant = 'default',\n showValue = false,\n strokeWidth: customStrokeWidth,\n className,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-valuetext': ariaValueText,\n ...htmlProps\n}: CircularProgressProps) {\n const isIndeterminate = value === null;\n const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, value));\n\n const { size: svgSize, strokeWidth: defaultStrokeWidth } = CIRCLE_SIZES[size];\n const strokeWidth = customStrokeWidth ?? defaultStrokeWidth;\n\n const radius = (svgSize - strokeWidth) / 2;\n const circumference = 2 * Math.PI * radius;\n const offset = circumference - (percentage / 100) * circumference;\n\n const sizeClass = size === 'sm' ? styles.circularSm\n : size === 'lg' ? styles.circularLg\n : styles.circularMd;\n\n const indicatorClasses = [\n styles.circularIndicator,\n variant === 'success' && styles.circularIndicatorSuccess,\n variant === 'warning' && styles.circularIndicatorWarning,\n variant === 'danger' && styles.circularIndicatorDanger,\n isIndeterminate && styles.circularIndicatorIndeterminate,\n ].filter(Boolean).join(' ');\n\n const rootClasses = [styles.circular, sizeClass, className]\n .filter(Boolean)\n .join(' ');\n\n // Default value text for screen readers\n const effectiveValueText = ariaValueText || (\n isIndeterminate ? 'Loading' : `${Math.round(percentage)} percent`\n );\n\n return (\n <BaseProgress.Root\n {...htmlProps}\n value={value}\n min={0}\n max={100}\n className={rootClasses}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-valuenow={isIndeterminate ? undefined : percentage}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuetext={effectiveValueText}\n aria-busy={isIndeterminate}\n >\n <svg\n className={styles.circularSvg}\n width={svgSize}\n height={svgSize}\n viewBox={`0 0 ${svgSize} ${svgSize}`}\n aria-hidden=\"true\"\n >\n {/* Track circle */}\n <circle\n className={styles.circularTrack}\n cx={svgSize / 2}\n cy={svgSize / 2}\n r={radius}\n strokeWidth={strokeWidth}\n />\n {/* Indicator circle */}\n <circle\n className={indicatorClasses}\n cx={svgSize / 2}\n cy={svgSize / 2}\n r={radius}\n strokeWidth={strokeWidth}\n strokeDasharray={circumference}\n strokeDashoffset={isIndeterminate ? undefined : offset}\n style={isIndeterminate ? { transformOrigin: 'center' } : undefined}\n />\n </svg>\n {showValue && !isIndeterminate && (\n <span className={styles.circularValue} aria-hidden=\"true\">{Math.round(percentage)}%</span>\n )}\n </BaseProgress.Root>\n );\n}\n\nexport const CircularProgress = CircularProgressRoot;\n\nexport const Progress = Object.assign(ProgressRoot, {\n Root: ProgressRoot,\n Circular: CircularProgressRoot,\n});\n"],"names":["BaseProgress"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Progress/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Progress as BaseProgress } from '@base-ui/react/progress';\nimport styles from './Progress.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n /** Current progress value (0-100). Null for indeterminate. */\n value?: number | null;\n /** Minimum value */\n min?: number;\n /** Maximum value */\n max?: number;\n /** Size of the progress bar */\n size?: 'sm' | 'md' | 'lg';\n /** Color variant */\n variant?: 'default' | 'success' | 'warning' | 'danger';\n /** Label text */\n label?: string;\n /** Show percentage value */\n showValue?: boolean;\n /** Custom value formatter */\n formatValue?: (value: number) => string;\n}\n\nexport interface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Current progress value (0-100). Null for indeterminate. */\n value?: number | null;\n /** Size of the circular progress */\n size?: 'sm' | 'md' | 'lg';\n /** Color variant */\n variant?: 'default' | 'success' | 'warning' | 'danger';\n /** Show percentage in center */\n showValue?: boolean;\n /** Stroke width */\n strokeWidth?: number;\n}\n\n// ============================================\n// Linear Progress\n// ============================================\n\nfunction ProgressRoot({\n value = null,\n min = 0,\n max = 100,\n size = 'md',\n variant = 'default',\n label,\n showValue = false,\n formatValue,\n className,\n 'aria-label': ariaLabel,\n 'aria-valuetext': ariaValueText,\n ...htmlProps\n}: ProgressProps) {\n const isIndeterminate = value === null;\n const range = max - min;\n const normalizedPercentage = isIndeterminate\n ? 0\n : range <= 0\n ? 0\n : ((value - min) / range) * 100;\n const percentage = isIndeterminate\n ? 0\n : Math.round(Math.min(100, Math.max(0, normalizedPercentage)));\n\n const trackClasses = [\n styles.track,\n size === 'sm' && styles.trackSm,\n size === 'md' && styles.trackMd,\n size === 'lg' && styles.trackLg,\n ].filter(Boolean).join(' ');\n\n const indicatorClasses = [\n styles.indicator,\n variant === 'success' && styles.indicatorSuccess,\n variant === 'warning' && styles.indicatorWarning,\n variant === 'danger' && styles.indicatorDanger,\n isIndeterminate && styles.indicatorIndeterminate,\n ].filter(Boolean).join(' ');\n\n const rootClasses = [styles.root, className].filter(Boolean).join(' ');\n\n const displayValue = formatValue\n ? formatValue(percentage)\n : `${percentage}%`;\n\n // Default value text for screen readers\n const effectiveValueText = ariaValueText || (\n isIndeterminate ? 'Loading' : `${percentage} percent`\n );\n\n return (\n <BaseProgress.Root\n {...htmlProps}\n value={value}\n min={min}\n max={max}\n className={rootClasses}\n aria-label={ariaLabel || (label ? undefined : 'Progress')}\n aria-valuetext={effectiveValueText}\n aria-busy={isIndeterminate}\n >\n {(label || showValue) && (\n <div className={styles.header}>\n {label && (\n <BaseProgress.Label className={styles.label}>\n {label}\n </BaseProgress.Label>\n )}\n {showValue && !isIndeterminate && (\n <span className={styles.value}>{displayValue}</span>\n )}\n </div>\n )}\n <BaseProgress.Track className={trackClasses}>\n <BaseProgress.Indicator\n className={indicatorClasses}\n style={isIndeterminate ? undefined : { width: `${percentage}%` }}\n />\n </BaseProgress.Track>\n </BaseProgress.Root>\n );\n}\n\n// ============================================\n// Circular Progress\n// ============================================\n\nconst CIRCLE_SIZES = {\n sm: { size: 32, strokeWidth: 3 },\n md: { size: 48, strokeWidth: 4 },\n lg: { size: 64, strokeWidth: 5 },\n};\n\nfunction CircularProgressRoot({\n value = null,\n size = 'md',\n variant = 'default',\n showValue = false,\n strokeWidth: customStrokeWidth,\n className,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-valuetext': ariaValueText,\n ...htmlProps\n}: CircularProgressProps) {\n const isIndeterminate = value === null;\n const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, value));\n\n const { size: svgSize, strokeWidth: defaultStrokeWidth } = CIRCLE_SIZES[size];\n const strokeWidth = customStrokeWidth ?? defaultStrokeWidth;\n\n const radius = (svgSize - strokeWidth) / 2;\n const circumference = 2 * Math.PI * radius;\n const offset = circumference - (percentage / 100) * circumference;\n\n const sizeClass = size === 'sm' ? styles.circularSm\n : size === 'lg' ? styles.circularLg\n : styles.circularMd;\n\n const indicatorClasses = [\n styles.circularIndicator,\n variant === 'success' && styles.circularIndicatorSuccess,\n variant === 'warning' && styles.circularIndicatorWarning,\n variant === 'danger' && styles.circularIndicatorDanger,\n isIndeterminate && styles.circularIndicatorIndeterminate,\n ].filter(Boolean).join(' ');\n\n const rootClasses = [styles.circular, sizeClass, className]\n .filter(Boolean)\n .join(' ');\n\n // Default value text for screen readers\n const effectiveValueText = ariaValueText || (\n isIndeterminate ? 'Loading' : `${Math.round(percentage)} percent`\n );\n\n return (\n <BaseProgress.Root\n {...htmlProps}\n value={value}\n min={0}\n max={100}\n className={rootClasses}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-valuenow={isIndeterminate ? undefined : percentage}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuetext={effectiveValueText}\n aria-busy={isIndeterminate}\n >\n <svg\n className={styles.circularSvg}\n width={svgSize}\n height={svgSize}\n viewBox={`0 0 ${svgSize} ${svgSize}`}\n aria-hidden=\"true\"\n >\n {/* Track circle */}\n <circle\n className={styles.circularTrack}\n cx={svgSize / 2}\n cy={svgSize / 2}\n r={radius}\n strokeWidth={strokeWidth}\n />\n {/* Indicator circle */}\n <circle\n className={indicatorClasses}\n cx={svgSize / 2}\n cy={svgSize / 2}\n r={radius}\n strokeWidth={strokeWidth}\n strokeDasharray={circumference}\n strokeDashoffset={isIndeterminate ? undefined : offset}\n style={isIndeterminate ? { transformOrigin: 'center' } : undefined}\n />\n </svg>\n {showValue && !isIndeterminate && (\n <span className={styles.circularValue} aria-hidden=\"true\">{Math.round(percentage)}%</span>\n )}\n </BaseProgress.Root>\n );\n}\n\nexport const CircularProgress = CircularProgressRoot;\n\nexport const Progress = Object.assign(ProgressRoot, {\n Root: ProgressRoot,\n Circular: CircularProgressRoot,\n});\n"],"names":["BaseProgress"],"mappings":"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"}
|