@acronis-platform/ui-react 0.54.0 → 0.56.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/package.json +4 -2
- package/dist/components/ui/accordion/accordion.js +0 -53
- package/dist/components/ui/accordion/accordion.js.map +0 -1
- package/dist/components/ui/alert/alert.js +0 -99
- package/dist/components/ui/alert/alert.js.map +0 -1
- package/dist/components/ui/app-shell/app-shell.js +0 -75
- package/dist/components/ui/app-shell/app-shell.js.map +0 -1
- package/dist/components/ui/auth-layout/auth-layout.js +0 -56
- package/dist/components/ui/auth-layout/auth-layout.js.map +0 -1
- package/dist/components/ui/avatar/avatar.js +0 -70
- package/dist/components/ui/avatar/avatar.js.map +0 -1
- package/dist/components/ui/breadcrumb/breadcrumb.js +0 -116
- package/dist/components/ui/breadcrumb/breadcrumb.js.map +0 -1
- package/dist/components/ui/button/button.js +0 -50
- package/dist/components/ui/button/button.js.map +0 -1
- package/dist/components/ui/button-icon/button-icon.js +0 -35
- package/dist/components/ui/button-icon/button-icon.js.map +0 -1
- package/dist/components/ui/button-menu/button-menu.js +0 -52
- package/dist/components/ui/button-menu/button-menu.js.map +0 -1
- package/dist/components/ui/card/card.js +0 -92
- package/dist/components/ui/card/card.js.map +0 -1
- package/dist/components/ui/card-filter/card-filter.js +0 -63
- package/dist/components/ui/card-filter/card-filter.js.map +0 -1
- package/dist/components/ui/chart/chart.js +0 -213
- package/dist/components/ui/chart/chart.js.map +0 -1
- package/dist/components/ui/checkbox/checkbox.js +0 -70
- package/dist/components/ui/checkbox/checkbox.js.map +0 -1
- package/dist/components/ui/chip/chip.js +0 -70
- package/dist/components/ui/chip/chip.js.map +0 -1
- package/dist/components/ui/collapsible/collapsible.js +0 -22
- package/dist/components/ui/collapsible/collapsible.js.map +0 -1
- package/dist/components/ui/combobox/combobox.js +0 -149
- package/dist/components/ui/combobox/combobox.js.map +0 -1
- package/dist/components/ui/data-table/data-table-column-header.js +0 -36
- package/dist/components/ui/data-table/data-table-column-header.js.map +0 -1
- package/dist/components/ui/data-table/data-table-pagination.js +0 -89
- package/dist/components/ui/data-table/data-table-pagination.js.map +0 -1
- package/dist/components/ui/data-table/data-table-toolbar.js +0 -46
- package/dist/components/ui/data-table/data-table-toolbar.js.map +0 -1
- package/dist/components/ui/data-table/data-table-view-options.js +0 -40
- package/dist/components/ui/data-table/data-table-view-options.js.map +0 -1
- package/dist/components/ui/data-table/data-table.js +0 -89
- package/dist/components/ui/data-table/data-table.js.map +0 -1
- package/dist/components/ui/description-list/description-list.js +0 -54
- package/dist/components/ui/description-list/description-list.js.map +0 -1
- package/dist/components/ui/dialog/dialog.js +0 -140
- package/dist/components/ui/dialog/dialog.js.map +0 -1
- package/dist/components/ui/dropdown-menu/dropdown-menu.js +0 -159
- package/dist/components/ui/dropdown-menu/dropdown-menu.js.map +0 -1
- package/dist/components/ui/empty/empty.js +0 -78
- package/dist/components/ui/empty/empty.js.map +0 -1
- package/dist/components/ui/field/field.js +0 -189
- package/dist/components/ui/field/field.js.map +0 -1
- package/dist/components/ui/form/form.js +0 -16
- package/dist/components/ui/form/form.js.map +0 -1
- package/dist/components/ui/grid/grid.js +0 -69
- package/dist/components/ui/grid/grid.js.map +0 -1
- package/dist/components/ui/input/input.js +0 -22
- package/dist/components/ui/input/input.js.map +0 -1
- package/dist/components/ui/input-date-picker/input-date-picker.js +0 -104
- package/dist/components/ui/input-date-picker/input-date-picker.js.map +0 -1
- package/dist/components/ui/input-search/input-search.js +0 -57
- package/dist/components/ui/input-search/input-search.js.map +0 -1
- package/dist/components/ui/input-select/input-select.js +0 -265
- package/dist/components/ui/input-select/input-select.js.map +0 -1
- package/dist/components/ui/input-text/input-text.js +0 -87
- package/dist/components/ui/input-text/input-text.js.map +0 -1
- package/dist/components/ui/input-text-area/input-text-area.js +0 -77
- package/dist/components/ui/input-text-area/input-text-area.js.map +0 -1
- package/dist/components/ui/label/label.js +0 -12
- package/dist/components/ui/label/label.js.map +0 -1
- package/dist/components/ui/link/link.js +0 -39
- package/dist/components/ui/link/link.js.map +0 -1
- package/dist/components/ui/number-field/number-field.js +0 -61
- package/dist/components/ui/number-field/number-field.js.map +0 -1
- package/dist/components/ui/page-content/page-content.js +0 -19
- package/dist/components/ui/page-content/page-content.js.map +0 -1
- package/dist/components/ui/page-header/page-header.js +0 -74
- package/dist/components/ui/page-header/page-header.js.map +0 -1
- package/dist/components/ui/pagination/pagination.js +0 -87
- package/dist/components/ui/pagination/pagination.js.map +0 -1
- package/dist/components/ui/popover/popover.js +0 -48
- package/dist/components/ui/popover/popover.js.map +0 -1
- package/dist/components/ui/progress/progress.js +0 -30
- package/dist/components/ui/progress/progress.js.map +0 -1
- package/dist/components/ui/progress-circle/progress-circle.js +0 -115
- package/dist/components/ui/progress-circle/progress-circle.js.map +0 -1
- package/dist/components/ui/radio/radio.js +0 -44
- package/dist/components/ui/radio/radio.js.map +0 -1
- package/dist/components/ui/resizable/resizable.js +0 -52
- package/dist/components/ui/resizable/resizable.js.map +0 -1
- package/dist/components/ui/scroll-area/scroll-area.js +0 -61
- package/dist/components/ui/scroll-area/scroll-area.js.map +0 -1
- package/dist/components/ui/search/search.js +0 -93
- package/dist/components/ui/search/search.js.map +0 -1
- package/dist/components/ui/search-global/search-global.js +0 -60
- package/dist/components/ui/search-global/search-global.js.map +0 -1
- package/dist/components/ui/section/section.js +0 -37
- package/dist/components/ui/section/section.js.map +0 -1
- package/dist/components/ui/separator/separator.js +0 -22
- package/dist/components/ui/separator/separator.js.map +0 -1
- package/dist/components/ui/sheet/sheet-details.js +0 -80
- package/dist/components/ui/sheet/sheet-details.js.map +0 -1
- package/dist/components/ui/sheet/sheet.js +0 -138
- package/dist/components/ui/sheet/sheet.js.map +0 -1
- package/dist/components/ui/sidebar-primary/sidebar-primary.js +0 -252
- package/dist/components/ui/sidebar-primary/sidebar-primary.js.map +0 -1
- package/dist/components/ui/sidebar-secondary/sidebar-secondary.js +0 -470
- package/dist/components/ui/sidebar-secondary/sidebar-secondary.js.map +0 -1
- package/dist/components/ui/skeleton/skeleton.js +0 -22
- package/dist/components/ui/skeleton/skeleton.js.map +0 -1
- package/dist/components/ui/slider/slider.js +0 -42
- package/dist/components/ui/slider/slider.js.map +0 -1
- package/dist/components/ui/spinner/spinner.js +0 -38
- package/dist/components/ui/spinner/spinner.js.map +0 -1
- package/dist/components/ui/stack/stack.js +0 -61
- package/dist/components/ui/stack/stack.js.map +0 -1
- package/dist/components/ui/switch/switch.js +0 -41
- package/dist/components/ui/switch/switch.js.map +0 -1
- package/dist/components/ui/table/table.js +0 -118
- package/dist/components/ui/table/table.js.map +0 -1
- package/dist/components/ui/tabs/tabs.js +0 -44
- package/dist/components/ui/tabs/tabs.js.map +0 -1
- package/dist/components/ui/tag/tag.js +0 -47
- package/dist/components/ui/tag/tag.js.map +0 -1
- package/dist/components/ui/toast/toast.js +0 -83
- package/dist/components/ui/toast/toast.js.map +0 -1
- package/dist/components/ui/toggle-group/toggle-group.js +0 -47
- package/dist/components/ui/toggle-group/toggle-group.js.map +0 -1
- package/dist/components/ui/tooltip/tooltip.js +0 -49
- package/dist/components/ui/tooltip/tooltip.js.map +0 -1
- package/dist/components/ui/widget-placeholder/widget-placeholder.js +0 -106
- package/dist/components/ui/widget-placeholder/widget-placeholder.js.map +0 -1
- package/dist/index.d.ts +0 -2
- package/dist/index.js +0 -360
- package/dist/index.js.map +0 -1
- package/dist/lib/utils.js +0 -9
- package/dist/lib/utils.js.map +0 -1
- package/dist/node_modules/.pnpm/@tanstack_react-table@8.21.3_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@tanstack/react-table/build/lib/index.js +0 -104
- package/dist/node_modules/.pnpm/@tanstack_react-table@8.21.3_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@tanstack/react-table/build/lib/index.js.map +0 -1
- package/dist/node_modules/.pnpm/@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js +0 -1900
- package/dist/node_modules/.pnpm/@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js.map +0 -1
- package/dist/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js +0 -36
- package/dist/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js.map +0 -1
- package/dist/node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js +0 -17
- package/dist/node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js.map +0 -1
- package/dist/node_modules/.pnpm/react-resizable-panels@4.11.2_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/react-resizable-panels/dist/react-resizable-panels.js +0 -2093
- package/dist/node_modules/.pnpm/react-resizable-panels@4.11.2_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/react-resizable-panels/dist/react-resizable-panels.js.map +0 -1
- package/dist/node_modules/.pnpm/tailwind-merge@3.6.0/node_modules/tailwind-merge/dist/bundle-mjs.js +0 -2996
- package/dist/node_modules/.pnpm/tailwind-merge@3.6.0/node_modules/tailwind-merge/dist/bundle-mjs.js.map +0 -1
- package/dist/react.d.ts +0 -2
- package/dist/react.js +0 -360
- package/dist/react.js.map +0 -1
- package/dist/src/components/ui/accordion/accordion.d.ts +0 -7
- package/dist/src/components/ui/accordion/index.d.ts +0 -1
- package/dist/src/components/ui/alert/alert.d.ts +0 -14
- package/dist/src/components/ui/alert/index.d.ts +0 -2
- package/dist/src/components/ui/app-shell/app-shell.d.ts +0 -8
- package/dist/src/components/ui/app-shell/index.d.ts +0 -1
- package/dist/src/components/ui/auth-layout/auth-layout.d.ts +0 -6
- package/dist/src/components/ui/auth-layout/index.d.ts +0 -1
- package/dist/src/components/ui/avatar/avatar.d.ts +0 -27
- package/dist/src/components/ui/avatar/index.d.ts +0 -1
- package/dist/src/components/ui/breadcrumb/breadcrumb.d.ts +0 -30
- package/dist/src/components/ui/breadcrumb/index.d.ts +0 -1
- package/dist/src/components/ui/button/button.d.ts +0 -16
- package/dist/src/components/ui/button/index.d.ts +0 -1
- package/dist/src/components/ui/button-icon/button-icon.d.ts +0 -20
- package/dist/src/components/ui/button-icon/index.d.ts +0 -1
- package/dist/src/components/ui/button-menu/button-menu.d.ts +0 -29
- package/dist/src/components/ui/button-menu/index.d.ts +0 -1
- package/dist/src/components/ui/card/card.d.ts +0 -17
- package/dist/src/components/ui/card/index.d.ts +0 -1
- package/dist/src/components/ui/card-filter/card-filter.d.ts +0 -27
- package/dist/src/components/ui/card-filter/index.d.ts +0 -1
- package/dist/src/components/ui/chart/chart.d.ts +0 -55
- package/dist/src/components/ui/chart/index.d.ts +0 -2
- package/dist/src/components/ui/checkbox/checkbox.d.ts +0 -10
- package/dist/src/components/ui/checkbox/index.d.ts +0 -1
- package/dist/src/components/ui/chip/chip.d.ts +0 -20
- package/dist/src/components/ui/chip/index.d.ts +0 -1
- package/dist/src/components/ui/collapsible/collapsible.d.ts +0 -5
- package/dist/src/components/ui/collapsible/index.d.ts +0 -1
- package/dist/src/components/ui/combobox/combobox.d.ts +0 -28
- package/dist/src/components/ui/combobox/index.d.ts +0 -2
- package/dist/src/components/ui/data-table/data-table-column-header.d.ts +0 -8
- package/dist/src/components/ui/data-table/data-table-pagination.d.ts +0 -8
- package/dist/src/components/ui/data-table/data-table-toolbar.d.ts +0 -9
- package/dist/src/components/ui/data-table/data-table-view-options.d.ts +0 -6
- package/dist/src/components/ui/data-table/data-table.d.ts +0 -24
- package/dist/src/components/ui/data-table/data-table.docs.d.ts +0 -22
- package/dist/src/components/ui/data-table/index.d.ts +0 -5
- package/dist/src/components/ui/description-list/description-list.d.ts +0 -8
- package/dist/src/components/ui/description-list/index.d.ts +0 -1
- package/dist/src/components/ui/dialog/dialog.d.ts +0 -39
- package/dist/src/components/ui/dialog/dialog.docs.d.ts +0 -24
- package/dist/src/components/ui/dialog/index.d.ts +0 -1
- package/dist/src/components/ui/dropdown-menu/dropdown-menu.d.ts +0 -39
- package/dist/src/components/ui/dropdown-menu/dropdown-menu.docs.d.ts +0 -25
- package/dist/src/components/ui/dropdown-menu/index.d.ts +0 -1
- package/dist/src/components/ui/empty/empty.d.ts +0 -9
- package/dist/src/components/ui/empty/index.d.ts +0 -1
- package/dist/src/components/ui/field/field.d.ts +0 -39
- package/dist/src/components/ui/field/field.docs.d.ts +0 -27
- package/dist/src/components/ui/field/index.d.ts +0 -2
- package/dist/src/components/ui/form/form.d.ts +0 -6
- package/dist/src/components/ui/form/index.d.ts +0 -1
- package/dist/src/components/ui/grid/grid.d.ts +0 -15
- package/dist/src/components/ui/grid/index.d.ts +0 -1
- package/dist/src/components/ui/input/index.d.ts +0 -1
- package/dist/src/components/ui/input/input.d.ts +0 -4
- package/dist/src/components/ui/input-date-picker/index.d.ts +0 -1
- package/dist/src/components/ui/input-date-picker/input-date-picker.d.ts +0 -27
- package/dist/src/components/ui/input-search/index.d.ts +0 -1
- package/dist/src/components/ui/input-search/input-search.d.ts +0 -10
- package/dist/src/components/ui/input-select/index.d.ts +0 -1
- package/dist/src/components/ui/input-select/input-select.d.ts +0 -46
- package/dist/src/components/ui/input-text/index.d.ts +0 -1
- package/dist/src/components/ui/input-text/input-text.d.ts +0 -20
- package/dist/src/components/ui/input-text-area/index.d.ts +0 -1
- package/dist/src/components/ui/input-text-area/input-text-area.d.ts +0 -16
- package/dist/src/components/ui/label/index.d.ts +0 -1
- package/dist/src/components/ui/label/label.d.ts +0 -5
- package/dist/src/components/ui/label/label.docs.d.ts +0 -10
- package/dist/src/components/ui/link/index.d.ts +0 -1
- package/dist/src/components/ui/link/link.d.ts +0 -15
- package/dist/src/components/ui/number-field/index.d.ts +0 -1
- package/dist/src/components/ui/number-field/number-field.d.ts +0 -7
- package/dist/src/components/ui/page-content/index.d.ts +0 -1
- package/dist/src/components/ui/page-content/page-content.d.ts +0 -4
- package/dist/src/components/ui/page-header/index.d.ts +0 -1
- package/dist/src/components/ui/page-header/page-header.d.ts +0 -8
- package/dist/src/components/ui/pagination/index.d.ts +0 -2
- package/dist/src/components/ui/pagination/pagination.d.ts +0 -25
- package/dist/src/components/ui/popover/index.d.ts +0 -1
- package/dist/src/components/ui/popover/popover.d.ts +0 -27
- package/dist/src/components/ui/popover/popover.docs.d.ts +0 -25
- package/dist/src/components/ui/progress/index.d.ts +0 -1
- package/dist/src/components/ui/progress/progress.d.ts +0 -9
- package/dist/src/components/ui/progress/progress.docs.d.ts +0 -16
- package/dist/src/components/ui/progress-circle/index.d.ts +0 -1
- package/dist/src/components/ui/progress-circle/progress-circle.d.ts +0 -47
- package/dist/src/components/ui/progress-circle/progress-circle.docs.d.ts +0 -21
- package/dist/src/components/ui/radio/index.d.ts +0 -1
- package/dist/src/components/ui/radio/radio.d.ts +0 -8
- package/dist/src/components/ui/resizable/index.d.ts +0 -1
- package/dist/src/components/ui/resizable/resizable.d.ts +0 -9
- package/dist/src/components/ui/scroll-area/index.d.ts +0 -1
- package/dist/src/components/ui/scroll-area/scroll-area.d.ts +0 -10
- package/dist/src/components/ui/search/index.d.ts +0 -1
- package/dist/src/components/ui/search/search.d.ts +0 -7
- package/dist/src/components/ui/search-global/index.d.ts +0 -1
- package/dist/src/components/ui/search-global/search-global.d.ts +0 -7
- package/dist/src/components/ui/section/index.d.ts +0 -1
- package/dist/src/components/ui/section/section.d.ts +0 -7
- package/dist/src/components/ui/select/index.d.ts +0 -1
- package/dist/src/components/ui/select/select.d.ts +0 -1
- package/dist/src/components/ui/separator/index.d.ts +0 -1
- package/dist/src/components/ui/separator/separator.d.ts +0 -3
- package/dist/src/components/ui/sheet/index.d.ts +0 -3
- package/dist/src/components/ui/sheet/sheet-details.d.ts +0 -42
- package/dist/src/components/ui/sheet/sheet.d.ts +0 -36
- package/dist/src/components/ui/sheet/sheet.docs.d.ts +0 -21
- package/dist/src/components/ui/sidebar-primary/index.d.ts +0 -1
- package/dist/src/components/ui/sidebar-primary/sidebar-primary.d.ts +0 -54
- package/dist/src/components/ui/sidebar-secondary/index.d.ts +0 -1
- package/dist/src/components/ui/sidebar-secondary/sidebar-secondary.d.ts +0 -112
- package/dist/src/components/ui/skeleton/index.d.ts +0 -1
- package/dist/src/components/ui/skeleton/skeleton.d.ts +0 -4
- package/dist/src/components/ui/slider/index.d.ts +0 -1
- package/dist/src/components/ui/slider/slider.d.ts +0 -7
- package/dist/src/components/ui/spinner/index.d.ts +0 -1
- package/dist/src/components/ui/spinner/spinner.d.ts +0 -9
- package/dist/src/components/ui/stack/index.d.ts +0 -1
- package/dist/src/components/ui/stack/stack.d.ts +0 -13
- package/dist/src/components/ui/switch/index.d.ts +0 -1
- package/dist/src/components/ui/switch/switch.d.ts +0 -8
- package/dist/src/components/ui/table/index.d.ts +0 -1
- package/dist/src/components/ui/table/table.d.ts +0 -23
- package/dist/src/components/ui/tabs/index.d.ts +0 -1
- package/dist/src/components/ui/tabs/tabs.d.ts +0 -6
- package/dist/src/components/ui/tabs/tabs.docs.d.ts +0 -25
- package/dist/src/components/ui/tag/index.d.ts +0 -1
- package/dist/src/components/ui/tag/tag.d.ts +0 -12
- package/dist/src/components/ui/toast/index.d.ts +0 -1
- package/dist/src/components/ui/toast/toast.d.ts +0 -48
- package/dist/src/components/ui/toast/toast.docs.d.ts +0 -12
- package/dist/src/components/ui/toggle-group/index.d.ts +0 -1
- package/dist/src/components/ui/toggle-group/toggle-group.d.ts +0 -7
- package/dist/src/components/ui/tooltip/index.d.ts +0 -1
- package/dist/src/components/ui/tooltip/tooltip.d.ts +0 -13
- package/dist/src/components/ui/widget-placeholder/index.d.ts +0 -1
- package/dist/src/components/ui/widget-placeholder/widget-placeholder.d.ts +0 -18
- package/dist/src/components/ui/widget-placeholder/widget-placeholder.docs.d.ts +0 -14
- package/dist/src/index.d.ts +0 -66
- package/dist/src/lib/utils.d.ts +0 -2
- package/dist/src/react.d.ts +0 -1
- package/dist/styles.d.ts +0 -1
- package/dist/ui-react.css +0 -1
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { jsx as e, jsxs as n } from "react/jsx-runtime";
|
|
2
|
-
import * as l from "react";
|
|
3
|
-
import { Checkbox as h } from "@base-ui/react/checkbox";
|
|
4
|
-
import { MinusIcon as v, CheckIcon as u } from "@acronis-platform/icons-react/stroke-mono";
|
|
5
|
-
import { cn as m } from "../../../lib/utils.js";
|
|
6
|
-
const g = [
|
|
7
|
-
// geometry + focus ring
|
|
8
|
-
// `align-middle` keeps the box vertically centered when it sits inline next to
|
|
9
|
-
// text (e.g. in a table cell) rather than defaulting to the text baseline.
|
|
10
|
-
"inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border align-middle transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0",
|
|
11
|
-
// unchecked (base): idle / hover / active
|
|
12
|
-
"bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]",
|
|
13
|
-
"not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]",
|
|
14
|
-
"not-data-[disabled]:active:bg-[var(--ui-checkbox-unchecked-box-color-active)] not-data-[disabled]:active:border-[var(--ui-checkbox-unchecked-box-border-color-active)]",
|
|
15
|
-
// checked: idle / hover / active
|
|
16
|
-
"data-[checked]:bg-[var(--ui-checkbox-checked-box-color-idle)] data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-idle)] data-[checked]:text-[var(--ui-checkbox-checked-icon-color-idle)]",
|
|
17
|
-
"data-[checked]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-checked-box-color-hover)] data-[checked]:not-data-[disabled]:hover:border-[var(--ui-checkbox-checked-box-border-color-hover)] data-[checked]:not-data-[disabled]:hover:text-[var(--ui-checkbox-checked-icon-color-hover)]",
|
|
18
|
-
"data-[checked]:not-data-[disabled]:active:bg-[var(--ui-checkbox-checked-box-color-active)] data-[checked]:not-data-[disabled]:active:border-[var(--ui-checkbox-checked-box-border-color-active)] data-[checked]:not-data-[disabled]:active:text-[var(--ui-checkbox-checked-icon-color-active)]",
|
|
19
|
-
// indeterminate: idle / hover / active
|
|
20
|
-
"data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-idle)] data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-idle)] data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-idle)]",
|
|
21
|
-
"data-[indeterminate]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-indeterminate-box-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:border-[var(--ui-checkbox-indeterminate-box-border-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:text-[var(--ui-checkbox-indeterminate-icon-color-hover)]",
|
|
22
|
-
"data-[indeterminate]:not-data-[disabled]:active:bg-[var(--ui-checkbox-indeterminate-box-color-active)] data-[indeterminate]:not-data-[disabled]:active:border-[var(--ui-checkbox-indeterminate-box-border-color-active)] data-[indeterminate]:not-data-[disabled]:active:text-[var(--ui-checkbox-indeterminate-icon-color-active)]",
|
|
23
|
-
// disabled (unchecked base + per-state overrides)
|
|
24
|
-
"data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-checkbox-unchecked-box-color-disabled)] data-[disabled]:border-[var(--ui-checkbox-unchecked-box-border-color-disabled)]",
|
|
25
|
-
"data-[disabled]:data-[checked]:bg-[var(--ui-checkbox-checked-box-color-disabled)] data-[disabled]:data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-disabled)] data-[disabled]:data-[checked]:text-[var(--ui-checkbox-checked-icon-color-disabled)]",
|
|
26
|
-
"data-[disabled]:data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-disabled)] data-[disabled]:data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-disabled)] data-[disabled]:data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-disabled)]"
|
|
27
|
-
].join(" "), f = l.forwardRef(({ className: x, label: a, description: o, indeterminate: c, ...s }, k) => {
|
|
28
|
-
const d = l.useId(), r = a != null ? `${d}-label` : void 0, i = o != null ? `${d}-description` : void 0, t = a != null || o != null, b = /* @__PURE__ */ e(
|
|
29
|
-
h.Root,
|
|
30
|
-
{
|
|
31
|
-
ref: k,
|
|
32
|
-
indeterminate: c,
|
|
33
|
-
"aria-labelledby": r,
|
|
34
|
-
"aria-describedby": i,
|
|
35
|
-
className: m(
|
|
36
|
-
g,
|
|
37
|
-
t && "mt-[var(--ui-checkbox-global-box-margin-x)]",
|
|
38
|
-
x
|
|
39
|
-
),
|
|
40
|
-
...s,
|
|
41
|
-
children: /* @__PURE__ */ e(h.Indicator, { className: "flex items-center justify-center text-current", children: c ? /* @__PURE__ */ e(v, { size: 16 }) : /* @__PURE__ */ e(u, { size: 16 }) })
|
|
42
|
-
}
|
|
43
|
-
);
|
|
44
|
-
return t ? /* @__PURE__ */ n("label", { className: "inline-flex max-w-[var(--ui-checkbox-global-container-width-max)] min-w-[var(--ui-checkbox-global-container-width-min)] cursor-pointer items-start gap-[var(--ui-checkbox-global-container-gap)]", children: [
|
|
45
|
-
b,
|
|
46
|
-
/* @__PURE__ */ n("span", { className: "flex max-w-[var(--ui-checkbox-global-container-content-width-max)] flex-col gap-[var(--ui-checkbox-global-container-content-gap)]", children: [
|
|
47
|
-
a != null && /* @__PURE__ */ e(
|
|
48
|
-
"span",
|
|
49
|
-
{
|
|
50
|
-
id: r,
|
|
51
|
-
className: "text-sm leading-6 font-normal text-[var(--ui-checkbox-global-label-color)]",
|
|
52
|
-
children: a
|
|
53
|
-
}
|
|
54
|
-
),
|
|
55
|
-
o != null && /* @__PURE__ */ e(
|
|
56
|
-
"span",
|
|
57
|
-
{
|
|
58
|
-
id: i,
|
|
59
|
-
className: "text-sm leading-6 font-normal text-[var(--ui-checkbox-global-description-color)]",
|
|
60
|
-
children: o
|
|
61
|
-
}
|
|
62
|
-
)
|
|
63
|
-
] })
|
|
64
|
-
] }) : b;
|
|
65
|
-
});
|
|
66
|
-
f.displayName = "Checkbox";
|
|
67
|
-
export {
|
|
68
|
-
f as Checkbox
|
|
69
|
-
};
|
|
70
|
-
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport {\n CheckIcon,\n MinusIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Checkbox primitive, themed by the dedicated next-gen\n// `--ui-checkbox-*` token tier from @acronis-platform/tokens-pd. The box has three\n// logical states — `unchecked` (the base), `checked`, and `indeterminate` — each\n// with its own per-interaction (idle / hover / active / disabled) fill\n// (`*-box-color-*`), border (`*-box-border-color-*`), and glyph (`*-icon-color-*`)\n// tokens. `unchecked` is the base layer (lowest specificity); `data-[checked]` /\n// `data-[indeterminate]` override it (Base UI marks an indeterminate box with both\n// data-unchecked AND data-indeterminate, so the single-attribute overrides win on\n// specificity), and `data-[disabled]:data-[<state>]` overrides those in turn. The\n// glyph (check when checked, minus when indeterminate) inherits the Root's text\n// color via the Indicator's `text-current`. Box geometry (16px size, 2px radius)\n// comes from `--ui-checkbox-global-box-*`; the focus ring uses `--ui-focus-primary`.\n//\n// An optional `label` / `description` compose the full Figma field: the box, an\n// optional label, and an optional description stacked beside it. When either is\n// present the whole row is a `<label>` (so clicking the text toggles the box — a\n// Base UI checkbox renders a labelable <button>), the box gets a top margin of\n// `--ui-checkbox-global-box-margin-x` (4px = (line-height 24 − box 16) / 2, the\n// design's box alignment margin) to center it on the first text line, and the\n// box is wired to the text via aria-labelledby / aria-describedby. With neither,\n// the box renders on its own (name it with `aria-label`).\nconst boxClasses = [\n // geometry + focus ring\n // `align-middle` keeps the box vertically centered when it sits inline next to\n // text (e.g. in a table cell) rather than defaulting to the text baseline.\n 'inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border align-middle transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0',\n // unchecked (base): idle / hover / active\n 'bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]',\n 'not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]',\n 'not-data-[disabled]:active:bg-[var(--ui-checkbox-unchecked-box-color-active)] not-data-[disabled]:active:border-[var(--ui-checkbox-unchecked-box-border-color-active)]',\n // checked: idle / hover / active\n 'data-[checked]:bg-[var(--ui-checkbox-checked-box-color-idle)] data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-idle)] data-[checked]:text-[var(--ui-checkbox-checked-icon-color-idle)]',\n 'data-[checked]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-checked-box-color-hover)] data-[checked]:not-data-[disabled]:hover:border-[var(--ui-checkbox-checked-box-border-color-hover)] data-[checked]:not-data-[disabled]:hover:text-[var(--ui-checkbox-checked-icon-color-hover)]',\n 'data-[checked]:not-data-[disabled]:active:bg-[var(--ui-checkbox-checked-box-color-active)] data-[checked]:not-data-[disabled]:active:border-[var(--ui-checkbox-checked-box-border-color-active)] data-[checked]:not-data-[disabled]:active:text-[var(--ui-checkbox-checked-icon-color-active)]',\n // indeterminate: idle / hover / active\n 'data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-idle)] data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-idle)] data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-idle)]',\n 'data-[indeterminate]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-indeterminate-box-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:border-[var(--ui-checkbox-indeterminate-box-border-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:text-[var(--ui-checkbox-indeterminate-icon-color-hover)]',\n 'data-[indeterminate]:not-data-[disabled]:active:bg-[var(--ui-checkbox-indeterminate-box-color-active)] data-[indeterminate]:not-data-[disabled]:active:border-[var(--ui-checkbox-indeterminate-box-border-color-active)] data-[indeterminate]:not-data-[disabled]:active:text-[var(--ui-checkbox-indeterminate-icon-color-active)]',\n // disabled (unchecked base + per-state overrides)\n 'data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-checkbox-unchecked-box-color-disabled)] data-[disabled]:border-[var(--ui-checkbox-unchecked-box-border-color-disabled)]',\n 'data-[disabled]:data-[checked]:bg-[var(--ui-checkbox-checked-box-color-disabled)] data-[disabled]:data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-disabled)] data-[disabled]:data-[checked]:text-[var(--ui-checkbox-checked-icon-color-disabled)]',\n 'data-[disabled]:data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-disabled)] data-[disabled]:data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-disabled)] data-[disabled]:data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-disabled)]',\n].join(' ');\n\nexport interface CheckboxProps\n extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n /** Optional label rendered beside the box; names the control. */\n label?: React.ReactNode;\n /** Optional secondary description rendered under the label. */\n description?: React.ReactNode;\n}\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(({ className, label, description, indeterminate, ...props }, ref) => {\n const reactId = React.useId();\n const labelId = label != null ? `${reactId}-label` : undefined;\n const descriptionId = description != null ? `${reactId}-description` : undefined;\n const hasContent = label != null || description != null;\n\n const box = (\n <CheckboxPrimitive.Root\n ref={ref}\n indeterminate={indeterminate}\n aria-labelledby={labelId}\n aria-describedby={descriptionId}\n className={cn(\n boxClasses,\n hasContent && 'mt-[var(--ui-checkbox-global-box-margin-x)]',\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n {indeterminate ? <MinusIcon size={16} /> : <CheckIcon size={16} />}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n\n if (!hasContent) return box;\n\n return (\n <label className=\"inline-flex max-w-[var(--ui-checkbox-global-container-width-max)] min-w-[var(--ui-checkbox-global-container-width-min)] cursor-pointer items-start gap-[var(--ui-checkbox-global-container-gap)]\">\n {box}\n <span className=\"flex max-w-[var(--ui-checkbox-global-container-content-width-max)] flex-col gap-[var(--ui-checkbox-global-container-content-gap)]\">\n {label != null && (\n <span\n id={labelId}\n className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-label-color)]\"\n >\n {label}\n </span>\n )}\n {description != null && (\n <span\n id={descriptionId}\n className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-description-color)]\"\n >\n {description}\n </span>\n )}\n </span>\n </label>\n );\n});\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"names":["boxClasses","Checkbox","React","className","label","description","indeterminate","props","ref","reactId","labelId","descriptionId","hasContent","box","jsx","CheckboxPrimitive","cn","MinusIcon","CheckIcon","jsxs"],"mappings":";;;;;AA8BA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,EAIjB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG,GAUJC,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,eAAAC,GAAe,GAAGC,EAAA,GAASC,MAAQ;AACrE,QAAMC,IAAUP,EAAM,MAAA,GAChBQ,IAAUN,KAAS,OAAO,GAAGK,CAAO,WAAW,QAC/CE,IAAgBN,KAAe,OAAO,GAAGI,CAAO,iBAAiB,QACjEG,IAAaR,KAAS,QAAQC,KAAe,MAE7CQ,IACJ,gBAAAC;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,KAAAP;AAAA,MACA,eAAAF;AAAA,MACA,mBAAiBI;AAAA,MACjB,oBAAkBC;AAAA,MAClB,WAAWK;AAAA,QACThB;AAAA,QACAY,KAAc;AAAA,QACdT;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAEJ,4BAACQ,EAAkB,WAAlB,EAA4B,WAAU,iDACpC,UAAAT,IAAgB,gBAAAQ,EAACG,GAAA,EAAU,MAAM,IAAI,IAAK,gBAAAH,EAACI,GAAA,EAAU,MAAM,IAAI,EAAA,CAClE;AAAA,IAAA;AAAA,EAAA;AAIJ,SAAKN,IAGH,gBAAAO,EAAC,SAAA,EAAM,WAAU,oMACd,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAM,EAAC,QAAA,EAAK,WAAU,qIACb,UAAA;AAAA,MAAAf,KAAS,QACR,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIJ;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJC,KAAe,QACd,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIH;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GACF,IAvBsBQ;AAyB1B,CAAC;AACDZ,EAAS,cAAc;"}
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { jsxs as d, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import * as h from "react";
|
|
3
|
-
import { TimesIcon as b } from "@acronis-platform/icons-react/stroke-mono";
|
|
4
|
-
import { cva as m } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
|
|
5
|
-
import { cn as f } from "../../../lib/utils.js";
|
|
6
|
-
const g = m(
|
|
7
|
-
"inline-flex h-[var(--ui-chips-container-height)] min-w-[var(--ui-chips-container-width-min)] items-center justify-center gap-[var(--ui-chips-container-gap)] rounded-[var(--ui-chips-border-radius)] border-[length:var(--ui-chips-border-width)] border-solid border-[var(--ui-chips-border-color-idle)] bg-[var(--ui-chips-container-color-idle)] px-[var(--ui-chips-container-padding-x)] text-sm leading-6 text-[var(--ui-chips-label-color)] hover:border-[var(--ui-chips-border-color-hover)] hover:bg-[var(--ui-chips-container-color-hover)] [&_svg]:size-[var(--ui-chips-icon-size)] [&_svg]:shrink-0 [&_svg]:text-[var(--ui-chips-icon-color)]",
|
|
8
|
-
{
|
|
9
|
-
variants: {
|
|
10
|
-
variant: {
|
|
11
|
-
removable: "focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chips-border-color-active)] active:bg-[var(--ui-chips-container-color-active)]",
|
|
12
|
-
selectable: "cursor-pointer focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chips-border-color-active)] data-[selected=true]:bg-[var(--ui-chips-container-color-active)]"
|
|
13
|
-
}
|
|
14
|
-
},
|
|
15
|
-
defaultVariants: {
|
|
16
|
-
variant: "removable"
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
), x = h.forwardRef(
|
|
20
|
-
({
|
|
21
|
-
className: t,
|
|
22
|
-
variant: i = "removable",
|
|
23
|
-
icon: s,
|
|
24
|
-
selected: a,
|
|
25
|
-
onRemove: n,
|
|
26
|
-
removeLabel: l = "Remove",
|
|
27
|
-
children: u,
|
|
28
|
-
onKeyDown: e,
|
|
29
|
-
...v
|
|
30
|
-
}, p) => {
|
|
31
|
-
const c = i === "selectable";
|
|
32
|
-
return /* @__PURE__ */ d(
|
|
33
|
-
"div",
|
|
34
|
-
{
|
|
35
|
-
ref: p,
|
|
36
|
-
className: f(g({ variant: i }), t),
|
|
37
|
-
onKeyDown: (r) => {
|
|
38
|
-
c && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click()), e == null || e(r);
|
|
39
|
-
},
|
|
40
|
-
...c ? {
|
|
41
|
-
role: "button",
|
|
42
|
-
tabIndex: 0,
|
|
43
|
-
"aria-pressed": !!a,
|
|
44
|
-
"data-selected": a ? "true" : void 0
|
|
45
|
-
} : {},
|
|
46
|
-
...v,
|
|
47
|
-
children: [
|
|
48
|
-
s,
|
|
49
|
-
/* @__PURE__ */ o("span", { className: "min-w-0 truncate", children: u }),
|
|
50
|
-
i === "removable" && /* @__PURE__ */ o(
|
|
51
|
-
"button",
|
|
52
|
-
{
|
|
53
|
-
type: "button",
|
|
54
|
-
"aria-label": l,
|
|
55
|
-
onClick: n,
|
|
56
|
-
className: "-mr-1 flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-none",
|
|
57
|
-
children: /* @__PURE__ */ o(b, {})
|
|
58
|
-
}
|
|
59
|
-
)
|
|
60
|
-
]
|
|
61
|
-
}
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
);
|
|
65
|
-
x.displayName = "Chip";
|
|
66
|
-
export {
|
|
67
|
-
x as Chip,
|
|
68
|
-
g as chipVariants
|
|
69
|
-
};
|
|
70
|
-
//# sourceMappingURL=chip.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chip.js","sources":["../../../../src/components/ui/chip/chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact, interactive label. `variant` mirrors the Figma \"Chip\" `type`:\n// `removable` carries a trailing × (remove) button; `selectable` toggles a\n// selected state. The container fill/border/label/icon all wire to the dedicated\n// `--ui-chips-*` tier from @acronis-platform/tokens-pd; geometry (height, gap,\n// padding, min-width, radius, border width, icon size) is tokenized too.\n// The Figma `state` enum (idle / hover / active / focused) maps to interaction\n// states, not props: `hover:` → the hover tokens, `:focus`/`focus-visible` → the\n// 3px `--ui-focus-primary` ring, and the `active` look is the pressed state for\n// `removable` (`active:`) and the selected state for `selectable`\n// (`data-[selected]`, driven by the `selected` prop).\nconst chipVariants = cva(\n \"inline-flex h-[var(--ui-chips-container-height)] min-w-[var(--ui-chips-container-width-min)] items-center justify-center gap-[var(--ui-chips-container-gap)] rounded-[var(--ui-chips-border-radius)] border-[length:var(--ui-chips-border-width)] border-solid border-[var(--ui-chips-border-color-idle)] bg-[var(--ui-chips-container-color-idle)] px-[var(--ui-chips-container-padding-x)] text-sm leading-6 text-[var(--ui-chips-label-color)] hover:border-[var(--ui-chips-border-color-hover)] hover:bg-[var(--ui-chips-container-color-hover)] [&_svg]:size-[var(--ui-chips-icon-size)] [&_svg]:shrink-0 [&_svg]:text-[var(--ui-chips-icon-color)]\",\n {\n variants: {\n variant: {\n removable:\n 'focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chips-border-color-active)] active:bg-[var(--ui-chips-container-color-active)]',\n selectable:\n 'cursor-pointer focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chips-border-color-active)] data-[selected=true]:bg-[var(--ui-chips-container-color-active)]',\n },\n },\n defaultVariants: {\n variant: 'removable',\n },\n }\n);\n\nexport interface ChipProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof chipVariants> {\n /** Optional leading icon, rendered at 16px before the label. */\n icon?: React.ReactNode;\n /**\n * `selectable` only — applies the selected (active) styling and exposes the\n * chip as a pressed toggle (`role=\"button\"` + `aria-pressed`).\n */\n selected?: boolean;\n /** `removable` only — called when the trailing remove (×) button is pressed. */\n onRemove?: () => void;\n /** Accessible label for the remove button (`removable`). */\n removeLabel?: string;\n}\n\nconst Chip = React.forwardRef<HTMLDivElement, ChipProps>(\n (\n {\n className,\n variant = 'removable',\n icon,\n selected,\n onRemove,\n removeLabel = 'Remove',\n children,\n onKeyDown,\n ...props\n },\n ref\n ) => {\n const selectable = variant === 'selectable';\n return (\n <div\n ref={ref}\n className={cn(chipVariants({ variant }), className)}\n onKeyDown={(event) => {\n // The selectable chip is a div with button semantics; mirror native\n // button activation so Enter/Space fire its click handler.\n if (selectable && (event.key === 'Enter' || event.key === ' ')) {\n event.preventDefault();\n event.currentTarget.click();\n }\n onKeyDown?.(event);\n }}\n {...(selectable\n ? {\n role: 'button',\n tabIndex: 0,\n 'aria-pressed': Boolean(selected),\n 'data-selected': selected ? 'true' : undefined,\n }\n : {})}\n {...props}\n >\n {icon}\n <span className=\"min-w-0 truncate\">{children}</span>\n {variant === 'removable' && (\n <button\n type=\"button\"\n aria-label={removeLabel}\n onClick={onRemove}\n className=\"-mr-1 flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-none\"\n >\n <TimesIcon />\n </button>\n )}\n </div>\n );\n }\n);\nChip.displayName = 'Chip';\n\nexport { Chip, chipVariants };\n"],"names":["chipVariants","cva","Chip","React","className","variant","icon","selected","onRemove","removeLabel","children","onKeyDown","props","ref","selectable","jsxs","cn","event","jsx","TimesIcon"],"mappings":";;;;;AAgBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,WACE;AAAA,QACF,YACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAmBMC,IAAOC,EAAM;AAAA,EACjB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAaT,MAAY;AAC/B,WACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAWG,EAAGhB,EAAa,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,QAClD,WAAW,CAACa,MAAU;AAGpB,UAAIH,MAAeG,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACxDA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBN,KAAA,QAAAA,EAAYM;AAAA,QACd;AAAA,QACC,GAAIH,IACD;AAAA,UACE,MAAM;AAAA,UACN,UAAU;AAAA,UACV,gBAAgB,EAAQP;AAAA,UACxB,iBAAiBA,IAAW,SAAS;AAAA,QAAA,IAEvC,CAAA;AAAA,QACH,GAAGK;AAAA,QAEH,UAAA;AAAA,UAAAN;AAAA,UACD,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAR,EAAA,CAAS;AAAA,UAC5CL,MAAY,eACX,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAYT;AAAA,cACZ,SAASD;AAAA,cACT,WAAU;AAAA,cAEV,4BAACW,GAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAjB,EAAK,cAAc;"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import * as i from "react";
|
|
3
|
-
import { Collapsible as o } from "@base-ui/react/collapsible";
|
|
4
|
-
import { cn as s } from "../../../lib/utils.js";
|
|
5
|
-
const d = o.Root, C = o.Trigger, r = i.forwardRef(({ className: t, ...e }, l) => /* @__PURE__ */ a(
|
|
6
|
-
o.Panel,
|
|
7
|
-
{
|
|
8
|
-
ref: l,
|
|
9
|
-
className: s(
|
|
10
|
-
"overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
|
|
11
|
-
t
|
|
12
|
-
),
|
|
13
|
-
...e
|
|
14
|
-
}
|
|
15
|
-
));
|
|
16
|
-
r.displayName = "CollapsibleContent";
|
|
17
|
-
export {
|
|
18
|
-
d as Collapsible,
|
|
19
|
-
r as CollapsibleContent,
|
|
20
|
-
C as CollapsibleTrigger
|
|
21
|
-
};
|
|
22
|
-
//# sourceMappingURL=collapsible.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"collapsible.js","sources":["../../../../src/components/ui/collapsible/collapsible.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `collapsible`. A thin wrapper over\n// Base UI's Collapsible — a disclosure: a trigger toggles a height-animating panel.\n// No colors of its own (it's the primitive behind Accordion and the sidebars).\nconst Collapsible = CollapsiblePrimitive.Root;\n\nconst CollapsibleTrigger = CollapsiblePrimitive.Trigger;\n\nconst CollapsibleContent = React.forwardRef<\n React.ElementRef<typeof CollapsiblePrimitive.Panel>,\n React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Panel>\n>(({ className, ...props }, ref) => (\n <CollapsiblePrimitive.Panel\n ref={ref}\n className={cn(\n 'overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0',\n className\n )}\n {...props}\n />\n));\nCollapsibleContent.displayName = 'CollapsibleContent';\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"names":["Collapsible","CollapsiblePrimitive","CollapsibleTrigger","CollapsibleContent","React","className","props","ref","jsx","cn"],"mappings":";;;;AAUA,MAAMA,IAAcC,EAAqB,MAEnCC,IAAqBD,EAAqB,SAE1CE,IAAqBC,EAAM,WAG/B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACP,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAmB,cAAc;"}
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
import { jsx as e, jsxs as s } from "react/jsx-runtime";
|
|
2
|
-
import * as n from "react";
|
|
3
|
-
import { Combobox as o } from "@base-ui/react/combobox";
|
|
4
|
-
import { TimesIcon as b, ChevronDownIcon as m, CheckIcon as x } from "@acronis-platform/icons-react/stroke-mono";
|
|
5
|
-
import { cn as a } from "../../../lib/utils.js";
|
|
6
|
-
function v(r) {
|
|
7
|
-
return /* @__PURE__ */ e(o.Root, { ...r });
|
|
8
|
-
}
|
|
9
|
-
v.displayName = "Combobox";
|
|
10
|
-
const g = n.forwardRef(({ className: r, containerClassName: i, clearable: t, ...l }, d) => (
|
|
11
|
-
// InputGroup (not a plain div) is the popup's anchor, so the dropdown aligns to
|
|
12
|
-
// the box's left edge rather than to the bare input inside the box padding.
|
|
13
|
-
/* @__PURE__ */ s(
|
|
14
|
-
o.InputGroup,
|
|
15
|
-
{
|
|
16
|
-
className: a(
|
|
17
|
-
"group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 transition-colors",
|
|
18
|
-
"not-has-disabled:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-has-disabled:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]",
|
|
19
|
-
"has-[input:focus-visible]:border-[var(--ui-input-select-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]",
|
|
20
|
-
"has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-select-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-select-global-box-color-disabled)]",
|
|
21
|
-
"has-[input[aria-invalid=true]]:border-[var(--ui-input-select-error-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]",
|
|
22
|
-
i
|
|
23
|
-
),
|
|
24
|
-
children: [
|
|
25
|
-
/* @__PURE__ */ e(
|
|
26
|
-
o.Input,
|
|
27
|
-
{
|
|
28
|
-
ref: d,
|
|
29
|
-
className: a(
|
|
30
|
-
"min-w-0 flex-1 bg-transparent text-[var(--ui-input-select-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-select-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-select-global-value-color-disabled)]",
|
|
31
|
-
r
|
|
32
|
-
),
|
|
33
|
-
...l
|
|
34
|
-
}
|
|
35
|
-
),
|
|
36
|
-
t && /* @__PURE__ */ e(
|
|
37
|
-
o.Clear,
|
|
38
|
-
{
|
|
39
|
-
"aria-label": "Clear",
|
|
40
|
-
className: "flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:hidden",
|
|
41
|
-
children: /* @__PURE__ */ e(b, { size: 16 })
|
|
42
|
-
}
|
|
43
|
-
),
|
|
44
|
-
/* @__PURE__ */ e(
|
|
45
|
-
o.Trigger,
|
|
46
|
-
{
|
|
47
|
-
"aria-label": "Toggle",
|
|
48
|
-
className: "flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none group-has-disabled:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]",
|
|
49
|
-
children: /* @__PURE__ */ e(
|
|
50
|
-
m,
|
|
51
|
-
{
|
|
52
|
-
size: 16,
|
|
53
|
-
className: "transition-transform group-has-[input[aria-expanded=true]]:rotate-180"
|
|
54
|
-
}
|
|
55
|
-
)
|
|
56
|
-
}
|
|
57
|
-
)
|
|
58
|
-
]
|
|
59
|
-
}
|
|
60
|
-
)
|
|
61
|
-
));
|
|
62
|
-
g.displayName = "ComboboxInput";
|
|
63
|
-
const h = n.forwardRef(
|
|
64
|
-
({ className: r, children: i, sideOffset: t = 4, align: l = "start", side: d = "bottom", portalContainer: c, ...u }, p) => /* @__PURE__ */ e(o.Portal, { container: c, children: /* @__PURE__ */ e(
|
|
65
|
-
o.Positioner,
|
|
66
|
-
{
|
|
67
|
-
sideOffset: t,
|
|
68
|
-
align: l,
|
|
69
|
-
side: d,
|
|
70
|
-
className: "z-50 outline-none",
|
|
71
|
-
children: /* @__PURE__ */ e(
|
|
72
|
-
o.Popup,
|
|
73
|
-
{
|
|
74
|
-
ref: p,
|
|
75
|
-
className: a(
|
|
76
|
-
"max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none",
|
|
77
|
-
r
|
|
78
|
-
),
|
|
79
|
-
...u,
|
|
80
|
-
children: i
|
|
81
|
-
}
|
|
82
|
-
)
|
|
83
|
-
}
|
|
84
|
-
) })
|
|
85
|
-
);
|
|
86
|
-
h.displayName = "ComboboxContent";
|
|
87
|
-
const f = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
|
|
88
|
-
o.List,
|
|
89
|
-
{
|
|
90
|
-
ref: t,
|
|
91
|
-
className: a("flex flex-col", r),
|
|
92
|
-
...i
|
|
93
|
-
}
|
|
94
|
-
));
|
|
95
|
-
f.displayName = "ComboboxList";
|
|
96
|
-
const w = n.forwardRef(({ className: r, children: i, ...t }, l) => /* @__PURE__ */ s(
|
|
97
|
-
o.Item,
|
|
98
|
-
{
|
|
99
|
-
ref: l,
|
|
100
|
-
className: a(
|
|
101
|
-
"relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none",
|
|
102
|
-
"bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]",
|
|
103
|
-
"data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]",
|
|
104
|
-
"data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]",
|
|
105
|
-
r
|
|
106
|
-
),
|
|
107
|
-
...t,
|
|
108
|
-
children: [
|
|
109
|
-
/* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: i }),
|
|
110
|
-
/* @__PURE__ */ e(o.ItemIndicator, { className: "flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]", children: /* @__PURE__ */ e(x, { size: 16 }) })
|
|
111
|
-
]
|
|
112
|
-
}
|
|
113
|
-
));
|
|
114
|
-
w.displayName = "ComboboxItem";
|
|
115
|
-
const y = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
|
|
116
|
-
o.Empty,
|
|
117
|
-
{
|
|
118
|
-
ref: t,
|
|
119
|
-
className: a(
|
|
120
|
-
"px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-normal-description-color-idle)] empty:m-0 empty:p-0",
|
|
121
|
-
r
|
|
122
|
-
),
|
|
123
|
-
...i
|
|
124
|
-
}
|
|
125
|
-
));
|
|
126
|
-
y.displayName = "ComboboxEmpty";
|
|
127
|
-
const L = o.Group, C = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
|
|
128
|
-
o.GroupLabel,
|
|
129
|
-
{
|
|
130
|
-
ref: t,
|
|
131
|
-
className: a(
|
|
132
|
-
"px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]",
|
|
133
|
-
r
|
|
134
|
-
),
|
|
135
|
-
...i
|
|
136
|
-
}
|
|
137
|
-
));
|
|
138
|
-
C.displayName = "ComboboxGroupLabel";
|
|
139
|
-
export {
|
|
140
|
-
v as Combobox,
|
|
141
|
-
h as ComboboxContent,
|
|
142
|
-
y as ComboboxEmpty,
|
|
143
|
-
L as ComboboxGroup,
|
|
144
|
-
C as ComboboxGroupLabel,
|
|
145
|
-
g as ComboboxInput,
|
|
146
|
-
w as ComboboxItem,
|
|
147
|
-
f as ComboboxList
|
|
148
|
-
};
|
|
149
|
-
//# sourceMappingURL=combobox.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.js","sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';\nimport {\n CheckIcon,\n ChevronDownIcon,\n TimesIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// A searchable single/multi-select built on Base UI's Combobox primitive. The\n// legacy `combobox` was only a hardcoded Popover + cmdk demo; this is a real,\n// reusable component. There is no `--ui-combobox-*` tier, so it reuses the\n// `--ui-input-select-*` tokens (already imported) — the field box, dropdown\n// container, and items match InputSelect, the non-searchable sibling. The Root\n// auto-extracts `{ value, label }` items and filters them by the input value.\n\nfunction Combobox<Value, Multiple extends boolean | undefined = false>(\n props: ComboboxPrimitive.Root.Props<Value, Multiple>\n) {\n return <ComboboxPrimitive.Root {...props} />;\n}\nCombobox.displayName = 'Combobox';\n\nexport interface ComboboxInputProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Input>,\n 'className'\n > {\n className?: string;\n /** Wrapper (box) className. */\n containerClassName?: string;\n /** Show a clear (✕) button while the field has a value. */\n clearable?: boolean;\n}\n\n// The field box: a typeable input + a clear button (optional) + a chevron trigger.\nconst ComboboxInput = React.forwardRef<\n HTMLInputElement,\n ComboboxInputProps\n>(({ className, containerClassName, clearable, ...props }, ref) => (\n // InputGroup (not a plain div) is the popup's anchor, so the dropdown aligns to\n // the box's left edge rather than to the bare input inside the box padding.\n <ComboboxPrimitive.InputGroup\n className={cn(\n 'group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 transition-colors',\n 'not-has-disabled:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-has-disabled:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n 'has-[input:focus-visible]:border-[var(--ui-input-select-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n 'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-select-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-select-global-box-color-disabled)]',\n 'has-[input[aria-invalid=true]]:border-[var(--ui-input-select-error-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]',\n containerClassName\n )}\n >\n <ComboboxPrimitive.Input\n ref={ref}\n className={cn(\n 'min-w-0 flex-1 bg-transparent text-[var(--ui-input-select-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-select-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-select-global-value-color-disabled)]',\n className\n )}\n {...props}\n />\n {clearable && (\n <ComboboxPrimitive.Clear\n aria-label=\"Clear\"\n className=\"flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:hidden\"\n >\n <TimesIcon size={16} />\n </ComboboxPrimitive.Clear>\n )}\n <ComboboxPrimitive.Trigger\n aria-label=\"Toggle\"\n className=\"flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none group-has-disabled:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\"\n >\n <ChevronDownIcon\n size={16}\n className=\"transition-transform group-has-[input[aria-expanded=true]]:rotate-180\"\n />\n </ComboboxPrimitive.Trigger>\n </ComboboxPrimitive.InputGroup>\n));\nComboboxInput.displayName = 'ComboboxInput';\n\nexport interface ComboboxContentProps\n extends React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Popup> {\n sideOffset?: number;\n align?: ComboboxPrimitive.Positioner.Props['align'];\n side?: ComboboxPrimitive.Positioner.Props['side'];\n /** Container to portal into (e.g. a shadow root, so the popup inherits styles). */\n portalContainer?: ComboboxPrimitive.Portal.Props['container'];\n}\n\nconst ComboboxContent = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.Popup>,\n ComboboxContentProps\n>(\n (\n { className, children, sideOffset = 4, align = 'start', side = 'bottom', portalContainer, ...props },\n ref\n ) => (\n <ComboboxPrimitive.Portal container={portalContainer}>\n <ComboboxPrimitive.Positioner\n sideOffset={sideOffset}\n align={align}\n side={side}\n className=\"z-50 outline-none\"\n >\n <ComboboxPrimitive.Popup\n ref={ref}\n className={cn(\n 'max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none',\n className\n )}\n {...props}\n >\n {children}\n </ComboboxPrimitive.Popup>\n </ComboboxPrimitive.Positioner>\n </ComboboxPrimitive.Portal>\n )\n);\nComboboxContent.displayName = 'ComboboxContent';\n\nconst ComboboxList = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.List>\n>(({ className, ...props }, ref) => (\n <ComboboxPrimitive.List\n ref={ref}\n className={cn('flex flex-col', className)}\n {...props}\n />\n));\nComboboxList.displayName = 'ComboboxList';\n\nconst ComboboxItem = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <ComboboxPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n 'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n 'data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]',\n 'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]',\n className\n )}\n {...props}\n >\n <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n <ComboboxPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]\">\n <CheckIcon size={16} />\n </ComboboxPrimitive.ItemIndicator>\n </ComboboxPrimitive.Item>\n));\nComboboxItem.displayName = 'ComboboxItem';\n\nconst ComboboxEmpty = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n <ComboboxPrimitive.Empty\n ref={ref}\n className={cn(\n 'px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-normal-description-color-idle)] empty:m-0 empty:p-0',\n className\n )}\n {...props}\n />\n));\nComboboxEmpty.displayName = 'ComboboxEmpty';\n\nconst ComboboxGroup = ComboboxPrimitive.Group;\n\nconst ComboboxGroupLabel = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.GroupLabel>,\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n <ComboboxPrimitive.GroupLabel\n ref={ref}\n className={cn(\n 'px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]',\n className\n )}\n {...props}\n />\n));\nComboboxGroupLabel.displayName = 'ComboboxGroupLabel';\n\nexport {\n Combobox,\n ComboboxInput,\n ComboboxContent,\n ComboboxList,\n ComboboxItem,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxGroupLabel,\n};\n"],"names":["Combobox","props","jsx","ComboboxPrimitive","ComboboxInput","React","className","containerClassName","clearable","ref","jsxs","cn","TimesIcon","ChevronDownIcon","ComboboxContent","children","sideOffset","align","side","portalContainer","ComboboxList","ComboboxItem","CheckIcon","ComboboxEmpty","ComboboxGroup","ComboboxGroupLabel"],"mappings":";;;;;AAmBA,SAASA,EACPC,GACA;AACA,SAAO,gBAAAC,EAACC,EAAkB,MAAlB,EAAwB,GAAGF,EAAA,CAAO;AAC5C;AACAD,EAAS,cAAc;AAevB,MAAMI,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,oBAAAC,GAAoB,WAAAC,GAAW,GAAGP,EAAA,GAASQ;AAAA;AAAA;AAAA,EAGzD,gBAAAC;AAAA,IAACP,EAAkB;AAAA,IAAlB;AAAA,MACC,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAL;AAAA,UAACC,EAAkB;AAAA,UAAlB;AAAA,YACC,KAAAM;AAAA,YACA,WAAWE;AAAA,cACT;AAAA,cACAL;AAAA,YAAA;AAAA,YAED,GAAGL;AAAA,UAAA;AAAA,QAAA;AAAA,QAELO,KACC,gBAAAN;AAAA,UAACC,EAAkB;AAAA,UAAlB;AAAA,YACC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,UAAA,gBAAAD,EAACU,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGzB,gBAAAV;AAAA,UAACC,EAAkB;AAAA,UAAlB;AAAA,YACC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,UAAA,gBAAAD;AAAA,cAACW;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAAA,CAEH;AACDT,EAAc,cAAc;AAW5B,MAAMU,IAAkBT,EAAM;AAAA,EAI5B,CACE,EAAE,WAAAC,GAAW,UAAAS,GAAU,YAAAC,IAAa,GAAG,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,iBAAAC,GAAiB,GAAGlB,EAAA,GAC7FQ,MAEA,gBAAAP,EAACC,EAAkB,QAAlB,EAAyB,WAAWgB,GACnC,UAAA,gBAAAjB;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,YAAAa;AAAA,MACA,OAAAC;AAAA,MACA,MAAAC;AAAA,MACA,WAAU;AAAA,MAEV,UAAA,gBAAAhB;AAAA,QAACC,EAAkB;AAAA,QAAlB;AAAA,UACC,KAAAM;AAAA,UACA,WAAWE;AAAA,YACT;AAAA,YACAL;AAAA,UAAA;AAAA,UAED,GAAGL;AAAA,UAEH,UAAAc;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA,EACF,CACF;AAEJ;AACAD,EAAgB,cAAc;AAE9B,MAAMM,IAAef,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGL,EAAA,GAASQ,MAC1B,gBAAAP;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE,EAAG,iBAAiBL,CAAS;AAAA,IACvC,GAAGL;AAAA,EAAA;AACN,CACD;AACDmB,EAAa,cAAc;AAE3B,MAAMC,IAAehB,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,UAAAS,GAAU,GAAGd,KAASQ,MACpC,gBAAAC;AAAA,EAACP,EAAkB;AAAA,EAAlB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,2BAA2B,UAAAa,EAAA,CAAS;AAAA,MACpD,gBAAAb,EAACC,EAAkB,eAAlB,EAAgC,WAAU,2FACzC,UAAA,gBAAAD,EAACoB,GAAA,EAAU,MAAM,GAAA,CAAI,EAAA,CACvB;AAAA,IAAA;AAAA,EAAA;AACF,CACD;AACDD,EAAa,cAAc;AAE3B,MAAME,IAAgBlB,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGL,EAAA,GAASQ,MAC1B,gBAAAP;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDsB,EAAc,cAAc;AAE5B,MAAMC,IAAgBrB,EAAkB,OAElCsB,IAAqBpB,EAAM,WAG/B,CAAC,EAAE,WAAAC,GAAW,GAAGL,EAAA,GAASQ,MAC1B,gBAAAP;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDwB,EAAmB,cAAc;"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { jsx as e, jsxs as n } from "react/jsx-runtime";
|
|
2
|
-
import { ArrowUpIcon as c, ArrowDownIcon as l, ArrowsDownUpIcon as v } from "@acronis-platform/icons-react/stroke-mono";
|
|
3
|
-
import { cn as a } from "../../../lib/utils.js";
|
|
4
|
-
function m({
|
|
5
|
-
column: r,
|
|
6
|
-
title: o,
|
|
7
|
-
className: t,
|
|
8
|
-
...s
|
|
9
|
-
}) {
|
|
10
|
-
if (!r.getCanSort())
|
|
11
|
-
return /* @__PURE__ */ e("div", { className: a(t), children: o });
|
|
12
|
-
const i = r.getIsSorted();
|
|
13
|
-
return /* @__PURE__ */ n(
|
|
14
|
-
"button",
|
|
15
|
-
{
|
|
16
|
-
type: "button",
|
|
17
|
-
onClick: () => r.toggleSorting(),
|
|
18
|
-
"aria-label": `Sort by ${o}`,
|
|
19
|
-
className: a(
|
|
20
|
-
// -ml-2 px-2 keeps the label flush at the cell padding while giving the
|
|
21
|
-
// toggle a comfortable click/hover target.
|
|
22
|
-
"-ml-2 inline-flex h-8 select-none items-center gap-2 rounded px-2 text-sm font-semibold transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0",
|
|
23
|
-
t
|
|
24
|
-
),
|
|
25
|
-
...s,
|
|
26
|
-
children: [
|
|
27
|
-
/* @__PURE__ */ e("span", { children: o }),
|
|
28
|
-
i === "asc" ? /* @__PURE__ */ e(c, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : i === "desc" ? /* @__PURE__ */ e(l, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : /* @__PURE__ */ e(v, { className: "text-[var(--ui-table-header-sort-icon-color-inactive)]" })
|
|
29
|
-
]
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
export {
|
|
34
|
-
m as DataTableColumnHeader
|
|
35
|
-
};
|
|
36
|
-
//# sourceMappingURL=data-table-column-header.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/ui/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Column } from '@tanstack/react-table';\nimport {\n ArrowDownIcon,\n ArrowsDownUpIcon,\n ArrowUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableColumnHeaderProps<TData, TValue>\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n column: Column<TData, TValue>;\n title: string;\n}\n\n// Single-click sortable column header — matches the Table primitive's sortable\n// `TableHead`: one click toggles the sort (ascending → descending → unsorted) via\n// TanStack's `column.toggleSorting()`. The trailing icon shows the state with the\n// same `--ui-table-header-sort-icon-*` tokens — an up arrow (ascending) or down\n// arrow (descending) in the active blue, or the muted up/down arrows when\n// unsorted. (Column hiding lives in the toolbar's `DataTableViewOptions`, not a\n// per-header menu, so sorting is a single click.)\nexport function DataTableColumnHeader<TData, TValue>({\n column,\n title,\n className,\n ...props\n}: DataTableColumnHeaderProps<TData, TValue>) {\n if (!column.getCanSort()) {\n return <div className={cn(className)}>{title}</div>;\n }\n\n const sorted = column.getIsSorted();\n\n return (\n <button\n type=\"button\"\n onClick={() => column.toggleSorting()}\n aria-label={`Sort by ${title}`}\n className={cn(\n // -ml-2 px-2 keeps the label flush at the cell padding while giving the\n // toggle a comfortable click/hover target.\n '-ml-2 inline-flex h-8 select-none items-center gap-2 rounded px-2 text-sm font-semibold transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0',\n className\n )}\n {...props}\n >\n <span>{title}</span>\n {sorted === 'asc' ? (\n <ArrowUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n ) : sorted === 'desc' ? (\n <ArrowDownIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n ) : (\n <ArrowsDownUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-inactive)]\" />\n )}\n </button>\n );\n}\n"],"names":["DataTableColumnHeader","column","title","className","props","cn","sorted","jsxs","jsx","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon"],"mappings":";;;AAuBO,SAASA,EAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAA8C;AAC5C,MAAI,CAACH,EAAO;AACV,6BAAQ,OAAA,EAAI,WAAWI,EAAGF,CAAS,GAAI,UAAAD,GAAM;AAG/C,QAAMI,IAASL,EAAO,YAAA;AAEtB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAMN,EAAO,cAAA;AAAA,MACtB,cAAY,WAAWC,CAAK;AAAA,MAC5B,WAAWG;AAAA;AAAA;AAAA,QAGT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,UAAM,UAAAN,EAAA,CAAM;AAAA,QACZI,MAAW,QACV,gBAAAE,EAACC,GAAA,EAAY,WAAU,wDAAuD,IAC5EH,MAAW,SACb,gBAAAE,EAACE,KAAc,WAAU,uDAAA,CAAuD,IAEhF,gBAAAF,EAACG,GAAA,EAAiB,WAAU,yDAAA,CAAyD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI7F;"}
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
import { jsxs as a, jsx as n } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronFirstIcon as o, ChevronLeftIcon as l, ChevronRightIcon as s, ChevronLastIcon as c } from "@acronis-platform/icons-react/stroke-mono";
|
|
3
|
-
import { InputSelect as d, InputSelectTrigger as g, InputSelectValue as m, InputSelectContent as p, InputSelectItem as h } from "../input-select/input-select.js";
|
|
4
|
-
import { ButtonIcon as i } from "../button-icon/button-icon.js";
|
|
5
|
-
function C({
|
|
6
|
-
table: e,
|
|
7
|
-
pageSizeOptions: r = [10, 20, 30, 40, 50]
|
|
8
|
-
}) {
|
|
9
|
-
return /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-2", children: [
|
|
10
|
-
/* @__PURE__ */ a("div", { className: "flex-1 text-sm text-muted-foreground", children: [
|
|
11
|
-
e.getFilteredSelectedRowModel().rows.length,
|
|
12
|
-
" of",
|
|
13
|
-
" ",
|
|
14
|
-
e.getFilteredRowModel().rows.length,
|
|
15
|
-
" row(s) selected."
|
|
16
|
-
] }),
|
|
17
|
-
/* @__PURE__ */ a("div", { className: "flex items-center gap-6 lg:gap-8", children: [
|
|
18
|
-
/* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
|
|
19
|
-
/* @__PURE__ */ n("p", { className: "text-sm font-medium", children: "Rows per page" }),
|
|
20
|
-
/* @__PURE__ */ a(
|
|
21
|
-
d,
|
|
22
|
-
{
|
|
23
|
-
value: `${e.getState().pagination.pageSize}`,
|
|
24
|
-
onValueChange: (t) => e.setPageSize(Number(t)),
|
|
25
|
-
children: [
|
|
26
|
-
/* @__PURE__ */ n(g, { "aria-label": "Rows per page", className: "h-8 w-[70px]", children: /* @__PURE__ */ n(m, {}) }),
|
|
27
|
-
/* @__PURE__ */ n(p, { children: r.map((t) => /* @__PURE__ */ n(h, { value: `${t}`, children: t }, t)) })
|
|
28
|
-
]
|
|
29
|
-
}
|
|
30
|
-
)
|
|
31
|
-
] }),
|
|
32
|
-
/* @__PURE__ */ a("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
|
|
33
|
-
"Page ",
|
|
34
|
-
e.getState().pagination.pageIndex + 1,
|
|
35
|
-
" of",
|
|
36
|
-
" ",
|
|
37
|
-
e.getPageCount()
|
|
38
|
-
] }),
|
|
39
|
-
/* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
|
|
40
|
-
/* @__PURE__ */ n(
|
|
41
|
-
i,
|
|
42
|
-
{
|
|
43
|
-
variant: "secondary",
|
|
44
|
-
"aria-label": "Go to first page",
|
|
45
|
-
className: "hidden lg:inline-flex",
|
|
46
|
-
onClick: () => e.setPageIndex(0),
|
|
47
|
-
disabled: !e.getCanPreviousPage(),
|
|
48
|
-
children: /* @__PURE__ */ n(o, {})
|
|
49
|
-
}
|
|
50
|
-
),
|
|
51
|
-
/* @__PURE__ */ n(
|
|
52
|
-
i,
|
|
53
|
-
{
|
|
54
|
-
variant: "secondary",
|
|
55
|
-
"aria-label": "Go to previous page",
|
|
56
|
-
onClick: () => e.previousPage(),
|
|
57
|
-
disabled: !e.getCanPreviousPage(),
|
|
58
|
-
children: /* @__PURE__ */ n(l, {})
|
|
59
|
-
}
|
|
60
|
-
),
|
|
61
|
-
/* @__PURE__ */ n(
|
|
62
|
-
i,
|
|
63
|
-
{
|
|
64
|
-
variant: "secondary",
|
|
65
|
-
"aria-label": "Go to next page",
|
|
66
|
-
onClick: () => e.nextPage(),
|
|
67
|
-
disabled: !e.getCanNextPage(),
|
|
68
|
-
children: /* @__PURE__ */ n(s, {})
|
|
69
|
-
}
|
|
70
|
-
),
|
|
71
|
-
/* @__PURE__ */ n(
|
|
72
|
-
i,
|
|
73
|
-
{
|
|
74
|
-
variant: "secondary",
|
|
75
|
-
"aria-label": "Go to last page",
|
|
76
|
-
className: "hidden lg:inline-flex",
|
|
77
|
-
onClick: () => e.setPageIndex(e.getPageCount() - 1),
|
|
78
|
-
disabled: !e.getCanNextPage(),
|
|
79
|
-
children: /* @__PURE__ */ n(c, {})
|
|
80
|
-
}
|
|
81
|
-
)
|
|
82
|
-
] })
|
|
83
|
-
] })
|
|
84
|
-
] });
|
|
85
|
-
}
|
|
86
|
-
export {
|
|
87
|
-
C as DataTablePagination
|
|
88
|
-
};
|
|
89
|
-
//# sourceMappingURL=data-table-pagination.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport {\n ChevronFirstIcon,\n ChevronLastIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '../select';\n\ninterface DataTablePaginationProps<TData> {\n table: Table<TData>;\n /** Page-size options offered in the rows-per-page select. */\n pageSizeOptions?: number[];\n}\n\nexport function DataTablePagination<TData>({\n table,\n pageSizeOptions = [10, 20, 30, 40, 50],\n}: DataTablePaginationProps<TData>) {\n return (\n <div className=\"flex items-center justify-between px-2\">\n <div className=\"flex-1 text-sm text-muted-foreground\">\n {table.getFilteredSelectedRowModel().rows.length} of{' '}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n </div>\n <div className=\"flex items-center gap-6 lg:gap-8\">\n <div className=\"flex items-center gap-2\">\n <p className=\"text-sm font-medium\">Rows per page</p>\n <Select\n value={`${table.getState().pagination.pageSize}`}\n onValueChange={(value) => table.setPageSize(Number(value))}\n >\n <SelectTrigger aria-label=\"Rows per page\" className=\"h-8 w-[70px]\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {pageSizeOptions.map((pageSize) => (\n <SelectItem key={pageSize} value={`${pageSize}`}>\n {pageSize}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n Page {table.getState().pagination.pageIndex + 1} of{' '}\n {table.getPageCount()}\n </div>\n <div className=\"flex items-center gap-2\">\n <ButtonIcon\n variant=\"secondary\"\n aria-label=\"Go to first page\"\n className=\"hidden lg:inline-flex\"\n onClick={() => table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronFirstIcon />\n </ButtonIcon>\n <ButtonIcon\n variant=\"secondary\"\n aria-label=\"Go to previous page\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronLeftIcon />\n </ButtonIcon>\n <ButtonIcon\n variant=\"secondary\"\n aria-label=\"Go to next page\"\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n <ChevronRightIcon />\n </ButtonIcon>\n <ButtonIcon\n variant=\"secondary\"\n aria-label=\"Go to last page\"\n className=\"hidden lg:inline-flex\"\n onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n <ChevronLastIcon />\n </ButtonIcon>\n </div>\n </div>\n </div>\n );\n}\n"],"names":["DataTablePagination","table","pageSizeOptions","jsxs","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":";;;;AAuBO,SAASA,EAA2B;AAAA,EACzC,OAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;AACvC,GAAoC;AAClC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,wCACZ,UAAA;AAAA,MAAAF,EAAM,8BAA8B,KAAK;AAAA,MAAO;AAAA,MAAI;AAAA,MACpDA,EAAM,sBAAsB,KAAK;AAAA,MAAO;AAAA,IAAA,GAC3C;AAAA,IACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,uBAAsB,UAAA,iBAAa;AAAA,QAChD,gBAAAD;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,OAAO,GAAGJ,EAAM,SAAA,EAAW,WAAW,QAAQ;AAAA,YAC9C,eAAe,CAACK,MAAUL,EAAM,YAAY,OAAOK,CAAK,CAAC;AAAA,YAEzD,UAAA;AAAA,cAAA,gBAAAF,EAACG,KAAc,cAAW,iBAAgB,WAAU,gBAClD,UAAA,gBAAAH,EAACI,KAAY,EAAA,CACf;AAAA,cACA,gBAAAJ,EAACK,GAAA,EACE,UAAAP,EAAgB,IAAI,CAACQ,MACpB,gBAAAN,EAACO,GAAA,EAA0B,OAAO,GAAGD,CAAQ,IAC1C,UAAAA,EAAA,GADcA,CAEjB,CACD,EAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MACA,gBAAAP,EAAC,OAAA,EAAI,WAAU,kEAAiE,UAAA;AAAA,QAAA;AAAA,QACxEF,EAAM,SAAA,EAAW,WAAW,YAAY;AAAA,QAAE;AAAA,QAAI;AAAA,QACnDA,EAAM,aAAA;AAAA,MAAa,GACtB;AAAA,MACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS,MAAMX,EAAM,aAAa,CAAC;AAAA,YACnC,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACY,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAT;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,MAAMX,EAAM,aAAA;AAAA,YACrB,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACa,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnB,gBAAAV;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,MAAMX,EAAM,SAAA;AAAA,YACrB,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACc,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAX;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS,MAAMX,EAAM,aAAaA,EAAM,aAAA,IAAiB,CAAC;AAAA,YAC1D,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACe,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { jsxs as l, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { TimesIcon as m } from "@acronis-platform/icons-react/stroke-mono";
|
|
3
|
-
import { DataTableViewOptions as c } from "./data-table-view-options.js";
|
|
4
|
-
import { InputText as p } from "../input-text/input-text.js";
|
|
5
|
-
import { Button as u } from "../button/button.js";
|
|
6
|
-
function F({
|
|
7
|
-
table: e,
|
|
8
|
-
searchKey: t,
|
|
9
|
-
searchPlaceholder: n = "Filter…"
|
|
10
|
-
}) {
|
|
11
|
-
var i;
|
|
12
|
-
const s = e.getState().columnFilters.length > 0;
|
|
13
|
-
return /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
|
|
14
|
-
/* @__PURE__ */ l("div", { className: "flex flex-1 items-center gap-2", children: [
|
|
15
|
-
t && /* @__PURE__ */ r(
|
|
16
|
-
p,
|
|
17
|
-
{
|
|
18
|
-
placeholder: n,
|
|
19
|
-
value: ((i = e.getColumn(t)) == null ? void 0 : i.getFilterValue()) ?? "",
|
|
20
|
-
onChange: (a) => {
|
|
21
|
-
var o;
|
|
22
|
-
return (o = e.getColumn(t)) == null ? void 0 : o.setFilterValue(a.target.value);
|
|
23
|
-
},
|
|
24
|
-
className: "h-8 w-[150px] lg:w-[250px]"
|
|
25
|
-
}
|
|
26
|
-
),
|
|
27
|
-
s && /* @__PURE__ */ l(
|
|
28
|
-
u,
|
|
29
|
-
{
|
|
30
|
-
variant: "ghost",
|
|
31
|
-
onClick: () => e.resetColumnFilters(),
|
|
32
|
-
className: "h-8 gap-2",
|
|
33
|
-
children: [
|
|
34
|
-
"Reset",
|
|
35
|
-
/* @__PURE__ */ r(m, {})
|
|
36
|
-
]
|
|
37
|
-
}
|
|
38
|
-
)
|
|
39
|
-
] }),
|
|
40
|
-
/* @__PURE__ */ r(c, { table: e })
|
|
41
|
-
] });
|
|
42
|
-
}
|
|
43
|
-
export {
|
|
44
|
-
F as DataTableToolbar
|
|
45
|
-
};
|
|
46
|
-
//# sourceMappingURL=data-table-toolbar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-toolbar.js","sources":["../../../../src/components/ui/data-table/data-table-toolbar.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport { InputText } from '../input-text';\nimport { DataTableViewOptions } from './data-table-view-options';\n\ninterface DataTableToolbarProps<TData> {\n table: Table<TData>;\n /** Column id to wire the search box to (client-side text filter). */\n searchKey?: string;\n searchPlaceholder?: string;\n}\n\nexport function DataTableToolbar<TData>({\n table,\n searchKey,\n searchPlaceholder = 'Filter…',\n}: DataTableToolbarProps<TData>) {\n const isFiltered = table.getState().columnFilters.length > 0;\n\n return (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex flex-1 items-center gap-2\">\n {searchKey && (\n <InputText\n placeholder={searchPlaceholder}\n value={\n (table.getColumn(searchKey)?.getFilterValue() as string) ?? ''\n }\n onChange={(event) =>\n table.getColumn(searchKey)?.setFilterValue(event.target.value)\n }\n className=\"h-8 w-[150px] lg:w-[250px]\"\n />\n )}\n {isFiltered && (\n <Button\n variant=\"ghost\"\n onClick={() => table.resetColumnFilters()}\n className=\"h-8 gap-2\"\n >\n Reset\n <TimesIcon />\n </Button>\n )}\n </div>\n <DataTableViewOptions table={table} />\n </div>\n );\n}\n"],"names":["DataTableToolbar","table","searchKey","searchPlaceholder","isFiltered","jsxs","jsx","InputText","_a","event","Button","TimesIcon","DataTableViewOptions"],"mappings":";;;;;AAcO,SAASA,EAAwB;AAAA,EACtC,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AACtB,GAAiC;;AAC/B,QAAMC,IAAaH,EAAM,SAAA,EAAW,cAAc,SAAS;AAE3D,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,kCACZ,UAAA;AAAA,MAAAH,KACC,gBAAAI;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAaJ;AAAA,UACb,SACGK,IAAAP,EAAM,UAAUC,CAAS,MAAzB,gBAAAM,EAA4B,qBAA+B;AAAA,UAE9D,UAAU,CAACC,MAAA;;AACT,oBAAAD,IAAAP,EAAM,UAAUC,CAAS,MAAzB,gBAAAM,EAA4B,eAAeC,EAAM,OAAO;AAAA;AAAA,UAE1D,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGbL,KACC,gBAAAC;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAMT,EAAM,mBAAA;AAAA,UACrB,WAAU;AAAA,UACX,UAAA;AAAA,YAAA;AAAA,8BAEEU,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACb,GAEJ;AAAA,IACA,gBAAAL,EAACM,KAAqB,OAAAX,EAAA,CAAc;AAAA,EAAA,GACtC;AAEJ;"}
|