@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,265 +0,0 @@
|
|
|
1
|
-
import { jsx as o, jsxs as c } from "react/jsx-runtime";
|
|
2
|
-
import * as l from "react";
|
|
3
|
-
import { Select as a } from "@base-ui/react/select";
|
|
4
|
-
import { CheckIcon as p, MagnifierIcon as m, InboxIcon as g, CircleWarningIcon as x, ChevronDownIcon as h } from "@acronis-platform/icons-react/stroke-mono";
|
|
5
|
-
import { cn as i } from "../../../lib/utils.js";
|
|
6
|
-
const u = l.createContext(!1);
|
|
7
|
-
function f(e) {
|
|
8
|
-
return /* @__PURE__ */ o(u.Provider, { value: !!e.multiple, children: /* @__PURE__ */ o(a.Root, { ...e }) });
|
|
9
|
-
}
|
|
10
|
-
f.displayName = "InputSelect";
|
|
11
|
-
const E = a.Group, w = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
12
|
-
"div",
|
|
13
|
-
{
|
|
14
|
-
ref: t,
|
|
15
|
-
className: i(
|
|
16
|
-
"flex w-full min-w-[var(--ui-input-select-global-container-width-min)] flex-col gap-[var(--ui-input-select-global-container-gap)]",
|
|
17
|
-
e
|
|
18
|
-
),
|
|
19
|
-
...r
|
|
20
|
-
}
|
|
21
|
-
));
|
|
22
|
-
w.displayName = "InputSelectField";
|
|
23
|
-
const I = l.forwardRef(({ className: e, children: r, required: t, ...n }, d) => /* @__PURE__ */ c(
|
|
24
|
-
a.Label,
|
|
25
|
-
{
|
|
26
|
-
ref: d,
|
|
27
|
-
className: i(
|
|
28
|
-
"flex gap-[var(--ui-input-select-global-container-label-gap)] text-sm leading-4 text-[var(--ui-input-select-global-label-color-idle)] data-[disabled]:text-[var(--ui-input-select-global-label-color-disabled)]",
|
|
29
|
-
e
|
|
30
|
-
),
|
|
31
|
-
...n,
|
|
32
|
-
children: [
|
|
33
|
-
r,
|
|
34
|
-
t && /* @__PURE__ */ o(
|
|
35
|
-
"span",
|
|
36
|
-
{
|
|
37
|
-
"aria-hidden": "true",
|
|
38
|
-
className: "text-[var(--ui-input-select-global-required-color)]",
|
|
39
|
-
children: "*"
|
|
40
|
-
}
|
|
41
|
-
)
|
|
42
|
-
]
|
|
43
|
-
}
|
|
44
|
-
));
|
|
45
|
-
I.displayName = "InputSelectLabel";
|
|
46
|
-
const N = l.forwardRef(({ className: e, children: r, ...t }, n) => /* @__PURE__ */ c(
|
|
47
|
-
a.Trigger,
|
|
48
|
-
{
|
|
49
|
-
ref: n,
|
|
50
|
-
className: i(
|
|
51
|
-
"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 text-[var(--ui-input-select-global-value-color-idle)] outline-none transition-colors",
|
|
52
|
-
"not-data-[disabled]:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]",
|
|
53
|
-
"focus-visible:border-[var(--ui-input-select-normal-box-border-color-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
|
|
54
|
-
"data-[popup-open]:border-[var(--ui-input-select-normal-box-border-color-hover)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]",
|
|
55
|
-
"data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-select-normal-box-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-select-global-box-color-disabled)] data-[disabled]:text-[var(--ui-input-select-global-value-color-disabled)]",
|
|
56
|
-
// Error treatment (driven by `aria-invalid`).
|
|
57
|
-
"aria-invalid:border-[var(--ui-input-select-error-box-border-color-idle)] not-data-[disabled]:aria-invalid:hover:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:ring-[var(--ui-focus-error)] aria-invalid:data-[popup-open]:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:data-[popup-open]:ring-[var(--ui-focus-error)]",
|
|
58
|
-
e
|
|
59
|
-
),
|
|
60
|
-
...t,
|
|
61
|
-
children: [
|
|
62
|
-
r,
|
|
63
|
-
/* @__PURE__ */ o(a.Icon, { className: "flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] group-data-[disabled]:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]", children: /* @__PURE__ */ o(
|
|
64
|
-
h,
|
|
65
|
-
{
|
|
66
|
-
size: 16,
|
|
67
|
-
className: "transition-transform group-data-[popup-open]:rotate-180"
|
|
68
|
-
}
|
|
69
|
-
) })
|
|
70
|
-
]
|
|
71
|
-
}
|
|
72
|
-
));
|
|
73
|
-
N.displayName = "InputSelectTrigger";
|
|
74
|
-
const S = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
75
|
-
a.Value,
|
|
76
|
-
{
|
|
77
|
-
ref: t,
|
|
78
|
-
className: i(
|
|
79
|
-
"min-w-0 flex-1 truncate text-left text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]",
|
|
80
|
-
"group-data-[disabled]:!text-[var(--ui-input-select-global-value-color-disabled)] group-data-[disabled]:data-[placeholder]:!text-[var(--ui-input-select-global-placeholder-color-disabled)]",
|
|
81
|
-
e
|
|
82
|
-
),
|
|
83
|
-
...r
|
|
84
|
-
}
|
|
85
|
-
));
|
|
86
|
-
S.displayName = "InputSelectValue";
|
|
87
|
-
const y = l.forwardRef(
|
|
88
|
-
({
|
|
89
|
-
className: e,
|
|
90
|
-
children: r,
|
|
91
|
-
sideOffset: t = 4,
|
|
92
|
-
align: n = "start",
|
|
93
|
-
side: d = "bottom",
|
|
94
|
-
portalContainer: s,
|
|
95
|
-
...b
|
|
96
|
-
}, v) => /* @__PURE__ */ o(a.Portal, { container: s, children: /* @__PURE__ */ o(
|
|
97
|
-
a.Positioner,
|
|
98
|
-
{
|
|
99
|
-
sideOffset: t,
|
|
100
|
-
align: n,
|
|
101
|
-
side: d,
|
|
102
|
-
alignItemWithTrigger: !1,
|
|
103
|
-
className: "z-50 outline-none",
|
|
104
|
-
children: /* @__PURE__ */ o(
|
|
105
|
-
a.Popup,
|
|
106
|
-
{
|
|
107
|
-
ref: v,
|
|
108
|
-
className: i(
|
|
109
|
-
"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",
|
|
110
|
-
e
|
|
111
|
-
),
|
|
112
|
-
...b,
|
|
113
|
-
children: r
|
|
114
|
-
}
|
|
115
|
-
)
|
|
116
|
-
}
|
|
117
|
-
) })
|
|
118
|
-
);
|
|
119
|
-
y.displayName = "InputSelectContent";
|
|
120
|
-
const k = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ c("div", { className: "flex items-center gap-[var(--ui-input-select-dropdown-dropdown-search-gap)] px-[var(--ui-input-select-dropdown-dropdown-search-padding-x)] py-[var(--ui-input-select-dropdown-dropdown-search-padding-y)]", children: [
|
|
121
|
-
/* @__PURE__ */ o(
|
|
122
|
-
m,
|
|
123
|
-
{
|
|
124
|
-
size: 16,
|
|
125
|
-
className: "shrink-0 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)]"
|
|
126
|
-
}
|
|
127
|
-
),
|
|
128
|
-
/* @__PURE__ */ o(
|
|
129
|
-
"input",
|
|
130
|
-
{
|
|
131
|
-
ref: t,
|
|
132
|
-
type: "search",
|
|
133
|
-
className: i(
|
|
134
|
-
"min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-6 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-value)] outline-none placeholder:text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)] [&::-webkit-search-cancel-button]:appearance-none",
|
|
135
|
-
e
|
|
136
|
-
),
|
|
137
|
-
...r
|
|
138
|
-
}
|
|
139
|
-
)
|
|
140
|
-
] }));
|
|
141
|
-
k.displayName = "InputSelectSearch";
|
|
142
|
-
const R = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
143
|
-
a.Group,
|
|
144
|
-
{
|
|
145
|
-
ref: t,
|
|
146
|
-
className: i(
|
|
147
|
-
"flex flex-col border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] py-[var(--ui-input-select-dropdown-section-container-padding-y)] first:border-t-0",
|
|
148
|
-
e
|
|
149
|
-
),
|
|
150
|
-
...r
|
|
151
|
-
}
|
|
152
|
-
));
|
|
153
|
-
R.displayName = "InputSelectSection";
|
|
154
|
-
const z = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
155
|
-
a.GroupLabel,
|
|
156
|
-
{
|
|
157
|
-
ref: t,
|
|
158
|
-
className: i(
|
|
159
|
-
"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)]",
|
|
160
|
-
e
|
|
161
|
-
),
|
|
162
|
-
...r
|
|
163
|
-
}
|
|
164
|
-
));
|
|
165
|
-
z.displayName = "InputSelectSectionLabel";
|
|
166
|
-
const C = l.forwardRef(({ className: e, children: r, ...t }, n) => {
|
|
167
|
-
const d = l.useContext(u);
|
|
168
|
-
return /* @__PURE__ */ c(
|
|
169
|
-
a.Item,
|
|
170
|
-
{
|
|
171
|
-
ref: n,
|
|
172
|
-
className: i(
|
|
173
|
-
"group/item 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",
|
|
174
|
-
"bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]",
|
|
175
|
-
// Single-select rows tint when selected; multiple-select rows keep the
|
|
176
|
-
// unselected background (the leading checkbox carries the state).
|
|
177
|
-
!d && "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)]",
|
|
178
|
-
"data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]",
|
|
179
|
-
e
|
|
180
|
-
),
|
|
181
|
-
...t,
|
|
182
|
-
children: [
|
|
183
|
-
d && /* @__PURE__ */ o(
|
|
184
|
-
"span",
|
|
185
|
-
{
|
|
186
|
-
"aria-hidden": "true",
|
|
187
|
-
className: "flex size-[var(--ui-checkbox-global-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border-[length:var(--ui-checkbox-global-box-border-width)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)] bg-[var(--ui-checkbox-unchecked-box-color-idle)] text-transparent group-data-[selected]/item:border-[var(--ui-checkbox-checked-box-border-color-idle)] group-data-[selected]/item:bg-[var(--ui-checkbox-checked-box-color-idle)] group-data-[selected]/item:text-[var(--ui-checkbox-checked-icon-color-idle)]",
|
|
188
|
-
children: /* @__PURE__ */ o(p, { size: 16 })
|
|
189
|
-
}
|
|
190
|
-
),
|
|
191
|
-
/* @__PURE__ */ o(a.ItemText, { className: "min-w-0 flex-1 truncate", children: r }),
|
|
192
|
-
!d && /* @__PURE__ */ o(a.ItemIndicator, { className: "flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]", children: /* @__PURE__ */ o(p, { size: 16 }) })
|
|
193
|
-
]
|
|
194
|
-
}
|
|
195
|
-
);
|
|
196
|
-
});
|
|
197
|
-
C.displayName = "InputSelectItem";
|
|
198
|
-
const L = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
199
|
-
"p",
|
|
200
|
-
{
|
|
201
|
-
ref: t,
|
|
202
|
-
className: i(
|
|
203
|
-
"text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]",
|
|
204
|
-
e
|
|
205
|
-
),
|
|
206
|
-
...r
|
|
207
|
-
}
|
|
208
|
-
));
|
|
209
|
-
L.displayName = "InputSelectDescription";
|
|
210
|
-
const T = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
211
|
-
"p",
|
|
212
|
-
{
|
|
213
|
-
ref: t,
|
|
214
|
-
className: i(
|
|
215
|
-
"text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]",
|
|
216
|
-
e
|
|
217
|
-
),
|
|
218
|
-
...r
|
|
219
|
-
}
|
|
220
|
-
));
|
|
221
|
-
T.displayName = "InputSelectError";
|
|
222
|
-
const j = l.forwardRef(
|
|
223
|
-
({ className: e, variant: r, children: t, action: n, ...d }, s) => /* @__PURE__ */ c(
|
|
224
|
-
"div",
|
|
225
|
-
{
|
|
226
|
-
ref: s,
|
|
227
|
-
className: i(
|
|
228
|
-
"flex min-h-[128px] flex-col items-center justify-center gap-[var(--ui-input-select-dropdown-container-status-gap)] border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]",
|
|
229
|
-
e
|
|
230
|
-
),
|
|
231
|
-
...d,
|
|
232
|
-
children: [
|
|
233
|
-
r === "loading" && /* @__PURE__ */ o(
|
|
234
|
-
"span",
|
|
235
|
-
{
|
|
236
|
-
"aria-hidden": "true",
|
|
237
|
-
className: "size-6 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70"
|
|
238
|
-
}
|
|
239
|
-
),
|
|
240
|
-
r === "empty" && /* @__PURE__ */ o(g, { size: 24, className: "opacity-70" }),
|
|
241
|
-
r === "error" && /* @__PURE__ */ o(x, { size: 24, className: "opacity-70" }),
|
|
242
|
-
t,
|
|
243
|
-
r === "error" && n
|
|
244
|
-
]
|
|
245
|
-
}
|
|
246
|
-
)
|
|
247
|
-
);
|
|
248
|
-
j.displayName = "InputSelectStatus";
|
|
249
|
-
export {
|
|
250
|
-
f as InputSelect,
|
|
251
|
-
y as InputSelectContent,
|
|
252
|
-
L as InputSelectDescription,
|
|
253
|
-
T as InputSelectError,
|
|
254
|
-
w as InputSelectField,
|
|
255
|
-
E as InputSelectGroup,
|
|
256
|
-
C as InputSelectItem,
|
|
257
|
-
I as InputSelectLabel,
|
|
258
|
-
k as InputSelectSearch,
|
|
259
|
-
R as InputSelectSection,
|
|
260
|
-
z as InputSelectSectionLabel,
|
|
261
|
-
j as InputSelectStatus,
|
|
262
|
-
N as InputSelectTrigger,
|
|
263
|
-
S as InputSelectValue
|
|
264
|
-
};
|
|
265
|
-
//# sourceMappingURL=input-select.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-select.js","sources":["../../../../src/components/ui/input-select/input-select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport {\n CheckIcon,\n ChevronDownIcon,\n CircleWarningIcon,\n InboxIcon,\n MagnifierIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// The next-gen select, themed by the dedicated `--ui-input-select-*` tier (global /\n// normal / error / dropdown). It composes Base UI `Select` and adds the field\n// furniture (label, required, description, error) and the dropdown machinery\n// (in-dropdown search, sections/groups, single + multiple items, loading/empty/error\n// status). The trigger box wires each state to its own token — idle / hover / open\n// (`data-popup-open`) + focus ring / disabled — and switches to the error border +\n// `--ui-focus-error` ring when `aria-invalid` is set. Selection mode (single vs\n// multiple) flows from the `multiple` prop on the root via `InputSelectModeContext`:\n// single items toggle the row background and show a trailing check; multiple items\n// keep the row background and show a leading checkbox.\n\nconst InputSelectModeContext = React.createContext(false);\n\nfunction InputSelect<Value, Multiple extends boolean | undefined = false>(\n props: SelectPrimitive.Root.Props<Value, Multiple>\n) {\n return (\n <InputSelectModeContext.Provider value={Boolean(props.multiple)}>\n <SelectPrimitive.Root {...props} />\n </InputSelectModeContext.Provider>\n );\n}\nInputSelect.displayName = 'InputSelect';\n\nconst InputSelectGroup = SelectPrimitive.Group;\n\n/** Vertical field stack: label, trigger, description/error. */\nconst InputSelectField = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex w-full min-w-[var(--ui-input-select-global-container-width-min)] flex-col gap-[var(--ui-input-select-global-container-gap)]',\n className\n )}\n {...props}\n />\n));\nInputSelectField.displayName = 'InputSelectField';\n\nconst InputSelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {\n /** Appends a required `*` after the label text. */\n required?: boolean;\n }\n>(({ className, children, required, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn(\n 'flex gap-[var(--ui-input-select-global-container-label-gap)] text-sm leading-4 text-[var(--ui-input-select-global-label-color-idle)] data-[disabled]:text-[var(--ui-input-select-global-label-color-disabled)]',\n className\n )}\n {...props}\n >\n {children}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-select-global-required-color)]\"\n >\n *\n </span>\n )}\n </SelectPrimitive.Label>\n));\nInputSelectLabel.displayName = 'InputSelectLabel';\n\nconst InputSelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\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 text-[var(--ui-input-select-global-value-color-idle)] outline-none transition-colors',\n 'not-data-[disabled]:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n 'focus-visible:border-[var(--ui-input-select-normal-box-border-color-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n 'data-[popup-open]:border-[var(--ui-input-select-normal-box-border-color-hover)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]',\n 'data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-select-normal-box-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-select-global-box-color-disabled)] data-[disabled]:text-[var(--ui-input-select-global-value-color-disabled)]',\n // Error treatment (driven by `aria-invalid`).\n 'aria-invalid:border-[var(--ui-input-select-error-box-border-color-idle)] not-data-[disabled]:aria-invalid:hover:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:ring-[var(--ui-focus-error)] aria-invalid:data-[popup-open]:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:data-[popup-open]:ring-[var(--ui-focus-error)]',\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon className=\"flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] group-data-[disabled]:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\">\n <ChevronDownIcon\n size={16}\n className=\"transition-transform group-data-[popup-open]:rotate-180\"\n />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n));\nInputSelectTrigger.displayName = 'InputSelectTrigger';\n\nconst InputSelectValue = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Value>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Value\n ref={ref}\n className={cn(\n 'min-w-0 flex-1 truncate text-left text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]',\n 'group-data-[disabled]:!text-[var(--ui-input-select-global-value-color-disabled)] group-data-[disabled]:data-[placeholder]:!text-[var(--ui-input-select-global-placeholder-color-disabled)]',\n className\n )}\n {...props}\n />\n));\nInputSelectValue.displayName = 'InputSelectValue';\n\nconst InputSelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Popup>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Popup> & {\n sideOffset?: number;\n align?: SelectPrimitive.Positioner.Props['align'];\n side?: SelectPrimitive.Positioner.Props['side'];\n /**\n * Container to portal the dropdown into. Defaults to the document body;\n * pass an element to scope the portal (e.g. a shadow root, so the popup\n * inherits styles defined there).\n */\n portalContainer?: SelectPrimitive.Portal.Props['container'];\n }\n>(\n (\n {\n className,\n children,\n sideOffset = 4,\n align = 'start',\n side = 'bottom',\n portalContainer,\n ...props\n },\n ref\n ) => (\n <SelectPrimitive.Portal container={portalContainer}>\n <SelectPrimitive.Positioner\n sideOffset={sideOffset}\n align={align}\n side={side}\n alignItemWithTrigger={false}\n className=\"z-50 outline-none\"\n >\n <SelectPrimitive.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 </SelectPrimitive.Popup>\n </SelectPrimitive.Positioner>\n </SelectPrimitive.Portal>\n )\n);\nInputSelectContent.displayName = 'InputSelectContent';\n\n/**\n * Presentational in-dropdown search row (magnifier + input). The consumer wires\n * `value`/`onChange` to filter the items it renders.\n */\nconst InputSelectSearch = React.forwardRef<\n HTMLInputElement,\n React.ComponentPropsWithoutRef<'input'>\n>(({ className, ...props }, ref) => (\n <div className=\"flex items-center gap-[var(--ui-input-select-dropdown-dropdown-search-gap)] px-[var(--ui-input-select-dropdown-dropdown-search-padding-x)] py-[var(--ui-input-select-dropdown-dropdown-search-padding-y)]\">\n <MagnifierIcon\n size={16}\n className=\"shrink-0 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)]\"\n />\n <input\n ref={ref}\n type=\"search\"\n className={cn(\n 'min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-6 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-value)] outline-none placeholder:text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)] [&::-webkit-search-cancel-button]:appearance-none',\n className\n )}\n {...props}\n />\n </div>\n));\nInputSelectSearch.displayName = 'InputSelectSearch';\n\n/** A section (group) of items with an optional header. Divided by a top border. */\nconst InputSelectSection = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Group\n ref={ref}\n className={cn(\n 'flex flex-col border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] py-[var(--ui-input-select-dropdown-section-container-padding-y)] first:border-t-0',\n className\n )}\n {...props}\n />\n));\nInputSelectSection.displayName = 'InputSelectSection';\n\nconst InputSelectSectionLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.GroupLabel>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.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));\nInputSelectSectionLabel.displayName = 'InputSelectSectionLabel';\n\nconst InputSelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => {\n const multiple = React.useContext(InputSelectModeContext);\n return (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'group/item 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 // Single-select rows tint when selected; multiple-select rows keep the\n // unselected background (the leading checkbox carries the state).\n !multiple &&\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 {multiple && (\n <span\n aria-hidden=\"true\"\n className=\"flex size-[var(--ui-checkbox-global-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border-[length:var(--ui-checkbox-global-box-border-width)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)] bg-[var(--ui-checkbox-unchecked-box-color-idle)] text-transparent group-data-[selected]/item:border-[var(--ui-checkbox-checked-box-border-color-idle)] group-data-[selected]/item:bg-[var(--ui-checkbox-checked-box-color-idle)] group-data-[selected]/item:text-[var(--ui-checkbox-checked-icon-color-idle)]\"\n >\n <CheckIcon size={16} />\n </span>\n )}\n <SelectPrimitive.ItemText className=\"min-w-0 flex-1 truncate\">\n {children}\n </SelectPrimitive.ItemText>\n {!multiple && (\n <SelectPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]\">\n <CheckIcon size={16} />\n </SelectPrimitive.ItemIndicator>\n )}\n </SelectPrimitive.Item>\n );\n});\nInputSelectItem.displayName = 'InputSelectItem';\n\nconst InputSelectDescription = React.forwardRef<\n HTMLParagraphElement,\n React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\n 'text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]',\n className\n )}\n {...props}\n />\n));\nInputSelectDescription.displayName = 'InputSelectDescription';\n\nconst InputSelectError = React.forwardRef<\n HTMLParagraphElement,\n React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\n 'text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]',\n className\n )}\n {...props}\n />\n));\nInputSelectError.displayName = 'InputSelectError';\n\nexport interface InputSelectStatusProps\n extends React.ComponentPropsWithoutRef<'div'> {\n /** Which status to show. Drives the leading icon. */\n variant: 'loading' | 'empty' | 'error';\n /** Optional trailing action (e.g. a \"Try again\" button) — shown for `error`. */\n action?: React.ReactNode;\n}\n\n/** Loading / empty / error status row shown instead of items inside the dropdown. */\nconst InputSelectStatus = React.forwardRef<HTMLDivElement, InputSelectStatusProps>(\n ({ className, variant, children, action, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex min-h-[128px] flex-col items-center justify-center gap-[var(--ui-input-select-dropdown-container-status-gap)] border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]',\n className\n )}\n {...props}\n >\n {variant === 'loading' && (\n <span\n aria-hidden=\"true\"\n className=\"size-6 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70\"\n />\n )}\n {variant === 'empty' && <InboxIcon size={24} className=\"opacity-70\" />}\n {variant === 'error' && <CircleWarningIcon size={24} className=\"opacity-70\" />}\n {children}\n {variant === 'error' && action}\n </div>\n )\n);\nInputSelectStatus.displayName = 'InputSelectStatus';\n\nexport {\n InputSelect,\n InputSelectField,\n InputSelectLabel,\n InputSelectTrigger,\n InputSelectValue,\n InputSelectContent,\n InputSelectSearch,\n InputSelectGroup,\n InputSelectSection,\n InputSelectSectionLabel,\n InputSelectItem,\n InputSelectDescription,\n InputSelectError,\n InputSelectStatus,\n};\n"],"names":["InputSelectModeContext","React","InputSelect","props","jsx","SelectPrimitive","InputSelectGroup","InputSelectField","className","ref","cn","InputSelectLabel","children","required","jsxs","InputSelectTrigger","ChevronDownIcon","InputSelectValue","InputSelectContent","sideOffset","align","side","portalContainer","InputSelectSearch","MagnifierIcon","InputSelectSection","InputSelectSectionLabel","InputSelectItem","multiple","CheckIcon","InputSelectDescription","InputSelectError","InputSelectStatus","variant","action","InboxIcon","CircleWarningIcon"],"mappings":"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"}
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import { jsxs as s, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import * as m from "react";
|
|
3
|
-
import { TimesIcon as j } from "@acronis-platform/icons-react/stroke-mono";
|
|
4
|
-
import { cn as c } from "../../../lib/utils.js";
|
|
5
|
-
import { InputBox as C } from "../input/input.js";
|
|
6
|
-
const T = m.forwardRef(
|
|
7
|
-
({
|
|
8
|
-
className: g,
|
|
9
|
-
id: v,
|
|
10
|
-
label: i,
|
|
11
|
-
required: u,
|
|
12
|
-
description: b,
|
|
13
|
-
error: a,
|
|
14
|
-
clearable: f,
|
|
15
|
-
onClear: h,
|
|
16
|
-
disabled: e,
|
|
17
|
-
value: r,
|
|
18
|
-
...I
|
|
19
|
-
}, N) => {
|
|
20
|
-
const y = m.useId(), l = v ?? y, p = `${l}-message`, o = a != null && a !== "", w = r != null && r !== "", d = !!f && w && !e, n = o ? a : b, x = n != null && n !== "";
|
|
21
|
-
return /* @__PURE__ */ s("div", { className: "flex w-full min-w-[var(--ui-input-text-global-container-width-min)] flex-col gap-[var(--ui-input-text-global-container-gap)]", children: [
|
|
22
|
-
i != null && i !== "" && /* @__PURE__ */ s(
|
|
23
|
-
"label",
|
|
24
|
-
{
|
|
25
|
-
htmlFor: l,
|
|
26
|
-
className: c(
|
|
27
|
-
"flex gap-[var(--ui-input-text-global-container-label-gap)] text-sm leading-4",
|
|
28
|
-
e ? "text-[var(--ui-input-text-global-label-color-disabled)]" : "text-[var(--ui-input-text-global-label-color-idle)]"
|
|
29
|
-
),
|
|
30
|
-
children: [
|
|
31
|
-
i,
|
|
32
|
-
u && /* @__PURE__ */ t(
|
|
33
|
-
"span",
|
|
34
|
-
{
|
|
35
|
-
"aria-hidden": "true",
|
|
36
|
-
className: "text-[var(--ui-input-text-global-required-color)]",
|
|
37
|
-
children: "*"
|
|
38
|
-
}
|
|
39
|
-
)
|
|
40
|
-
]
|
|
41
|
-
}
|
|
42
|
-
),
|
|
43
|
-
/* @__PURE__ */ s("div", { className: "relative", children: [
|
|
44
|
-
/* @__PURE__ */ t(
|
|
45
|
-
C,
|
|
46
|
-
{
|
|
47
|
-
ref: N,
|
|
48
|
-
id: l,
|
|
49
|
-
disabled: e,
|
|
50
|
-
value: r,
|
|
51
|
-
"aria-invalid": o || void 0,
|
|
52
|
-
"aria-required": u || void 0,
|
|
53
|
-
"aria-describedby": x ? p : void 0,
|
|
54
|
-
className: c(d && "pr-9", g),
|
|
55
|
-
...I
|
|
56
|
-
}
|
|
57
|
-
),
|
|
58
|
-
d && /* @__PURE__ */ t(
|
|
59
|
-
"button",
|
|
60
|
-
{
|
|
61
|
-
type: "button",
|
|
62
|
-
onClick: h,
|
|
63
|
-
"aria-label": "Clear",
|
|
64
|
-
className: "absolute right-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-4 -translate-y-1/2 items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] text-[var(--ui-input-text-global-clear-icon-color)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
|
|
65
|
-
children: /* @__PURE__ */ t(j, {})
|
|
66
|
-
}
|
|
67
|
-
)
|
|
68
|
-
] }),
|
|
69
|
-
x && /* @__PURE__ */ t(
|
|
70
|
-
"p",
|
|
71
|
-
{
|
|
72
|
-
id: p,
|
|
73
|
-
className: c(
|
|
74
|
-
"text-xs leading-4",
|
|
75
|
-
o ? "text-[var(--ui-input-text-error-msg-error-color)]" : e ? "text-[var(--ui-input-text-normal-description-color-disabled)]" : "text-[var(--ui-input-text-normal-description-color-idle)]"
|
|
76
|
-
),
|
|
77
|
-
children: n
|
|
78
|
-
}
|
|
79
|
-
)
|
|
80
|
-
] });
|
|
81
|
-
}
|
|
82
|
-
);
|
|
83
|
-
T.displayName = "InputText";
|
|
84
|
-
export {
|
|
85
|
-
T as InputText
|
|
86
|
-
};
|
|
87
|
-
//# sourceMappingURL=input-text.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-text.js","sources":["../../../../src/components/ui/input-text/input-text.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { InputBox } from '../input';\n\n// Mirrors the Figma \"InputText\" component: a full single-line text field built\n// around the bare `InputBox` primitive (themed by the `--ui-input-text-*` tier). It\n// adds the field furniture: an optional `label` (with an optional `required` `*`),\n// an optional clear (✕) button, and an optional `description` or `error` message\n// below. Passing `error` switches the field to its error treatment — the box gets\n// the red error border (via the input's `aria-invalid` styling) and the red error\n// message replaces the description. The clear button appears only while `clearable`\n// is set and the (controlled) field has a value, and calls `onClear`. Colors come\n// from the `--ui-input-text-*` tokens — label/required/description/error/clear — so\n// brand overrides are honored; the clear button uses a 3px `--ui-focus-primary` ring.\nexport interface InputTextProps\n extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children'> {\n /** Field label, rendered above the input. */\n label?: React.ReactNode;\n /** Marks the field required — appends a `*` after the label. */\n required?: boolean;\n /** Helper text below the input. Hidden while `error` is set. */\n description?: React.ReactNode;\n /**\n * Error message below the input. Its presence switches the field to the error\n * treatment (red box border + red message).\n */\n error?: React.ReactNode;\n /** Show a clear (✕) button while the (controlled) field has a value. */\n clearable?: boolean;\n /** Called when the clear button is activated. */\n onClear?: () => void;\n}\n\nconst InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n (\n {\n className,\n id,\n label,\n required,\n description,\n error,\n clearable,\n onClear,\n disabled,\n value,\n ...props\n },\n ref\n ) => {\n const reactId = React.useId();\n const inputId = id ?? reactId;\n const messageId = `${inputId}-message`;\n\n const hasError = error != null && error !== '';\n const hasValue = value != null && value !== '';\n const showClear = Boolean(clearable) && hasValue && !disabled;\n const message = hasError ? error : description;\n const hasMessage = message != null && message !== '';\n\n return (\n <div className=\"flex w-full min-w-[var(--ui-input-text-global-container-width-min)] flex-col gap-[var(--ui-input-text-global-container-gap)]\">\n {label != null && label !== '' && (\n <label\n htmlFor={inputId}\n className={cn(\n 'flex gap-[var(--ui-input-text-global-container-label-gap)] text-sm leading-4',\n disabled\n ? 'text-[var(--ui-input-text-global-label-color-disabled)]'\n : 'text-[var(--ui-input-text-global-label-color-idle)]'\n )}\n >\n {label}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-text-global-required-color)]\"\n >\n *\n </span>\n )}\n </label>\n )}\n\n <div className=\"relative\">\n <InputBox\n ref={ref}\n id={inputId}\n disabled={disabled}\n value={value}\n aria-invalid={hasError || undefined}\n aria-required={required || undefined}\n aria-describedby={hasMessage ? messageId : undefined}\n className={cn(showClear && 'pr-9', className)}\n {...props}\n />\n {showClear && (\n <button\n type=\"button\"\n onClick={onClear}\n aria-label=\"Clear\"\n className=\"absolute right-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-4 -translate-y-1/2 items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] text-[var(--ui-input-text-global-clear-icon-color)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0\"\n >\n <TimesIcon />\n </button>\n )}\n </div>\n\n {hasMessage && (\n <p\n id={messageId}\n className={cn(\n 'text-xs leading-4',\n hasError\n ? 'text-[var(--ui-input-text-error-msg-error-color)]'\n : disabled\n ? 'text-[var(--ui-input-text-normal-description-color-disabled)]'\n : 'text-[var(--ui-input-text-normal-description-color-idle)]'\n )}\n >\n {message}\n </p>\n )}\n </div>\n );\n }\n);\nInputText.displayName = 'InputText';\n\nexport { InputText };\n"],"names":["InputText","React","className","id","label","required","description","error","clearable","onClear","disabled","value","props","ref","reactId","inputId","messageId","hasError","hasValue","showClear","message","hasMessage","jsxs","cn","jsx","InputBox","TimesIcon"],"mappings":";;;;;AAmCA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUb,EAAM,MAAA,GAChBc,IAAUZ,KAAMW,GAChBE,IAAY,GAAGD,CAAO,YAEtBE,IAAWV,KAAS,QAAQA,MAAU,IACtCW,IAAWP,KAAS,QAAQA,MAAU,IACtCQ,IAAY,EAAQX,KAAcU,KAAY,CAACR,GAC/CU,IAAUH,IAAWV,IAAQD,GAC7Be,IAAaD,KAAW,QAAQA,MAAY;AAElD,WACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,gIACZ,UAAA;AAAA,MAAAlB,KAAS,QAAQA,MAAU,MAC1B,gBAAAkB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASP;AAAA,UACT,WAAWQ;AAAA,YACT;AAAA,YACAb,IACI,4DACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAN;AAAA,YACAC,KACC,gBAAAmB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAKN,gBAAAF,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAZ;AAAA,YACA,IAAIE;AAAA,YACJ,UAAAL;AAAA,YACA,OAAAC;AAAA,YACA,gBAAcM,KAAY;AAAA,YAC1B,iBAAeZ,KAAY;AAAA,YAC3B,oBAAkBgB,IAAaL,IAAY;AAAA,YAC3C,WAAWO,EAAGJ,KAAa,QAAQjB,CAAS;AAAA,YAC3C,GAAGU;AAAA,UAAA;AAAA,QAAA;AAAA,QAELO,KACC,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAASf;AAAA,YACT,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,4BAACiB,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,GAEJ;AAAA,MAECL,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIR;AAAA,UACJ,WAAWO;AAAA,YACT;AAAA,YACAN,IACI,sDACAP,IACE,kEACA;AAAA,UAAA;AAAA,UAGP,UAAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AACApB,EAAU,cAAc;"}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { jsxs as x, jsx as l } from "react/jsx-runtime";
|
|
2
|
-
import * as c from "react";
|
|
3
|
-
import { cn as n } from "../../../lib/utils.js";
|
|
4
|
-
const y = c.forwardRef(
|
|
5
|
-
({
|
|
6
|
-
className: v,
|
|
7
|
-
id: p,
|
|
8
|
-
label: e,
|
|
9
|
-
required: d,
|
|
10
|
-
description: b,
|
|
11
|
-
error: r,
|
|
12
|
-
disabled: a,
|
|
13
|
-
"aria-invalid": h,
|
|
14
|
-
...m
|
|
15
|
-
}, g) => {
|
|
16
|
-
const f = c.useId(), i = p ?? f, u = `${i}-message`, t = r != null && r !== "", w = t || h, o = t ? r : b, s = o != null && o !== "";
|
|
17
|
-
return /* @__PURE__ */ x("div", { className: "flex w-full min-w-[var(--ui-input-text-area-container-width-min)] flex-col gap-[var(--ui-input-text-area-container-gap)]", children: [
|
|
18
|
-
e != null && e !== "" && /* @__PURE__ */ x(
|
|
19
|
-
"label",
|
|
20
|
-
{
|
|
21
|
-
htmlFor: i,
|
|
22
|
-
className: n(
|
|
23
|
-
"flex gap-[var(--ui-input-text-area-container-label-gap)] text-sm leading-4",
|
|
24
|
-
a ? "text-[var(--ui-input-text-area-label-color-disabled)]" : "text-[var(--ui-input-text-area-label-color-idle)]"
|
|
25
|
-
),
|
|
26
|
-
children: [
|
|
27
|
-
e,
|
|
28
|
-
d && /* @__PURE__ */ l(
|
|
29
|
-
"span",
|
|
30
|
-
{
|
|
31
|
-
"aria-hidden": "true",
|
|
32
|
-
className: "text-[var(--ui-input-text-area-required-color)]",
|
|
33
|
-
children: "*"
|
|
34
|
-
}
|
|
35
|
-
)
|
|
36
|
-
]
|
|
37
|
-
}
|
|
38
|
-
),
|
|
39
|
-
/* @__PURE__ */ l(
|
|
40
|
-
"textarea",
|
|
41
|
-
{
|
|
42
|
-
ref: g,
|
|
43
|
-
id: i,
|
|
44
|
-
disabled: a,
|
|
45
|
-
"aria-invalid": w || void 0,
|
|
46
|
-
"aria-required": d || void 0,
|
|
47
|
-
"aria-describedby": s ? u : void 0,
|
|
48
|
-
className: n(
|
|
49
|
-
"min-h-[var(--ui-input-text-area-box-height-min)] w-full min-w-0 resize-y rounded-[var(--ui-input-text-area-box-border-radius)] border bg-[var(--ui-input-text-area-box-color-idle)] border-[var(--ui-input-text-area-border-color-idle)] px-[var(--ui-input-text-area-box-padding-x)] py-[var(--ui-input-text-area-box-padding-y)] text-sm leading-6 text-[var(--ui-input-text-area-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-area-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px]",
|
|
50
|
-
"enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-area-border-color-hover)] enabled:hover:text-[var(--ui-input-text-area-value-color-hover)] enabled:hover:placeholder:text-[var(--ui-input-text-area-placeholder-color-hover)]",
|
|
51
|
-
"not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]",
|
|
52
|
-
"aria-[invalid=true]:border-[var(--ui-input-text-area-error-msg-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]",
|
|
53
|
-
"disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-area-border-color-disabled)] disabled:bg-[var(--ui-input-text-area-box-color-disabled)] disabled:text-[var(--ui-input-text-area-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-area-placeholder-color-disabled)]",
|
|
54
|
-
v
|
|
55
|
-
),
|
|
56
|
-
...m
|
|
57
|
-
}
|
|
58
|
-
),
|
|
59
|
-
s && /* @__PURE__ */ l(
|
|
60
|
-
"p",
|
|
61
|
-
{
|
|
62
|
-
id: u,
|
|
63
|
-
className: n(
|
|
64
|
-
"text-xs leading-4",
|
|
65
|
-
t ? "text-[var(--ui-input-text-area-error-msg-error-color)]" : a ? "text-[var(--ui-input-text-area-description-color-disabled)]" : "text-[var(--ui-input-text-area-description-color-idle)]"
|
|
66
|
-
),
|
|
67
|
-
children: o
|
|
68
|
-
}
|
|
69
|
-
)
|
|
70
|
-
] });
|
|
71
|
-
}
|
|
72
|
-
);
|
|
73
|
-
y.displayName = "InputTextArea";
|
|
74
|
-
export {
|
|
75
|
-
y as InputTextArea
|
|
76
|
-
};
|
|
77
|
-
//# sourceMappingURL=input-text-area.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-text-area.js","sources":["../../../../src/components/ui/input-text-area/input-text-area.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputTextArea\" component: a full multiline text field built\n// around a `<textarea>` (themed by the dedicated `--ui-input-text-area-*` tier). It\n// adds the field furniture: an optional `label` (with an optional required `*`) and\n// an optional `description` or `error` message below. Passing `error` switches the\n// field to its error treatment — the box gets the red error border (via the\n// textarea's `aria-invalid` styling) and the red error message replaces the\n// description. The box fill / border are wired per state: idle / hover / focus\n// (`border-color-focus` + a 3px `--ui-focus-primary` ring) / disabled; the error\n// state (driven by `aria-invalid`) swaps the border to\n// `error-msg-box-border-color-{idle,hover}` and the focus ring to `--ui-focus-error`.\n// Box geometry (96px min-height, 4px radius, 12px padding-x, 8px padding-y) comes\n// from `--ui-input-text-area-box-*`; it grows with vertical resize. `ref` and\n// `className` target the underlying `<textarea>`, so the bare usage\n// (`<InputTextArea placeholder=… />`, no label) renders just the box.\nexport interface InputTextAreaProps\n extends Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> {\n /** Field label, rendered above the textarea. */\n label?: React.ReactNode;\n /** Marks the field required — appends a `*` after the label. */\n required?: boolean;\n /** Helper text below the textarea. Hidden while `error` is set. */\n description?: React.ReactNode;\n /**\n * Error message below the textarea. Its presence switches the field to the error\n * treatment (red box border + red message).\n */\n error?: React.ReactNode;\n}\n\nconst InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(\n (\n {\n className,\n id,\n label,\n required,\n description,\n error,\n disabled,\n 'aria-invalid': ariaInvalid,\n ...props\n },\n ref\n ) => {\n const reactId = React.useId();\n const inputId = id ?? reactId;\n const messageId = `${inputId}-message`;\n\n const hasError = error != null && error !== '';\n const invalid = hasError || ariaInvalid;\n const message = hasError ? error : description;\n const hasMessage = message != null && message !== '';\n\n return (\n <div className=\"flex w-full min-w-[var(--ui-input-text-area-container-width-min)] flex-col gap-[var(--ui-input-text-area-container-gap)]\">\n {label != null && label !== '' && (\n <label\n htmlFor={inputId}\n className={cn(\n 'flex gap-[var(--ui-input-text-area-container-label-gap)] text-sm leading-4',\n disabled\n ? 'text-[var(--ui-input-text-area-label-color-disabled)]'\n : 'text-[var(--ui-input-text-area-label-color-idle)]'\n )}\n >\n {label}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-text-area-required-color)]\"\n >\n *\n </span>\n )}\n </label>\n )}\n\n <textarea\n ref={ref}\n id={inputId}\n disabled={disabled}\n aria-invalid={invalid || undefined}\n aria-required={required || undefined}\n aria-describedby={hasMessage ? messageId : undefined}\n className={cn(\n 'min-h-[var(--ui-input-text-area-box-height-min)] w-full min-w-0 resize-y rounded-[var(--ui-input-text-area-box-border-radius)] border bg-[var(--ui-input-text-area-box-color-idle)] border-[var(--ui-input-text-area-border-color-idle)] px-[var(--ui-input-text-area-box-padding-x)] py-[var(--ui-input-text-area-box-padding-y)] text-sm leading-6 text-[var(--ui-input-text-area-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-area-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px]',\n 'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-area-border-color-hover)] enabled:hover:text-[var(--ui-input-text-area-value-color-hover)] enabled:hover:placeholder:text-[var(--ui-input-text-area-placeholder-color-hover)]',\n 'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n 'aria-[invalid=true]:border-[var(--ui-input-text-area-error-msg-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n 'disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-area-border-color-disabled)] disabled:bg-[var(--ui-input-text-area-box-color-disabled)] disabled:text-[var(--ui-input-text-area-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-area-placeholder-color-disabled)]',\n className\n )}\n {...props}\n />\n\n {hasMessage && (\n <p\n id={messageId}\n className={cn(\n 'text-xs leading-4',\n hasError\n ? 'text-[var(--ui-input-text-area-error-msg-error-color)]'\n : disabled\n ? 'text-[var(--ui-input-text-area-description-color-disabled)]'\n : 'text-[var(--ui-input-text-area-description-color-idle)]'\n )}\n >\n {message}\n </p>\n )}\n </div>\n );\n }\n);\nInputTextArea.displayName = 'InputTextArea';\n\nexport { InputTextArea };\n"],"names":["InputTextArea","React","className","id","label","required","description","error","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","jsxs","cn","jsx"],"mappings":";;;AAiCA,MAAMA,IAAgBC,EAAM;AAAA,EAC1B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAgBC;AAAA,IAChB,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUX,EAAM,MAAA,GAChBY,IAAUV,KAAMS,GAChBE,IAAY,GAAGD,CAAO,YAEtBE,IAAWR,KAAS,QAAQA,MAAU,IACtCS,IAAUD,KAAYN,GACtBQ,IAAUF,IAAWR,IAAQD,GAC7BY,IAAaD,KAAW,QAAQA,MAAY;AAElD,WACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,4HACZ,UAAA;AAAA,MAAAf,KAAS,QAAQA,MAAU,MAC1B,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASN;AAAA,UACT,WAAWO;AAAA,YACT;AAAA,YACAZ,IACI,0DACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAJ;AAAA,YACAC,KACC,gBAAAgB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAKN,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAV;AAAA,UACA,IAAIE;AAAA,UACJ,UAAAL;AAAA,UACA,gBAAcQ,KAAW;AAAA,UACzB,iBAAeX,KAAY;AAAA,UAC3B,oBAAkBa,IAAaJ,IAAY;AAAA,UAC3C,WAAWM;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAlB;AAAA,UAAA;AAAA,UAED,GAAGQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAGLQ,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIP;AAAA,UACJ,WAAWM;AAAA,YACT;AAAA,YACAL,IACI,2DACAP,IACE,gEACA;AAAA,UAAA;AAAA,UAGP,UAAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AACAjB,EAAc,cAAc;"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
-
import * as r from "react";
|
|
3
|
-
import { cn as s } from "../../../lib/utils.js";
|
|
4
|
-
const m = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", t = r.forwardRef(
|
|
5
|
-
({ className: e, ...a }, o) => /* @__PURE__ */ l("label", { ref: o, className: s(m, e), ...a })
|
|
6
|
-
);
|
|
7
|
-
t.displayName = "Label";
|
|
8
|
-
export {
|
|
9
|
-
t as Label,
|
|
10
|
-
m as labelClassName
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=label.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"label.js","sources":["../../../../src/components/ui/label/label.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `label`\n// (packages/ui-legacy/src/components/ui/label.tsx). A caption for a form\n// control — a plain `<label>`, no Base UI primitive. The text color is\n// inherited (`text-foreground` from context), so no `--ui-label-*` tier is\n// needed. `peer-disabled:*` dims the label when an associated `peer`-marked\n// control is disabled, mirroring the legacy behavior.\nconst labelClassName =\n 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70';\n\nexport type LabelProps = React.ComponentPropsWithoutRef<'label'>;\n\nconst Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n ({ className, ...props }, ref) => (\n <label ref={ref} className={cn(labelClassName, className)} {...props} />\n )\n);\nLabel.displayName = 'Label';\n\nexport { Label, labelClassName };\n"],"names":["labelClassName","Label","React","className","props","ref","jsx","cn"],"mappings":";;;AAUA,MAAMA,IACJ,8FAIIC,IAAQC,EAAM;AAAA,EAClB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC,EAAC,SAAA,EAAM,KAAAD,GAAU,WAAWE,EAAGP,GAAgBG,CAAS,GAAI,GAAGC,EAAA,CAAO;AAE1E;AACAH,EAAM,cAAc;"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { jsxs as c, Fragment as s, jsx as d } from "react/jsx-runtime";
|
|
2
|
-
import * as v from "react";
|
|
3
|
-
import { mergeProps as x } from "@base-ui/react/merge-props";
|
|
4
|
-
import { useRender as m } from "@base-ui/react/use-render";
|
|
5
|
-
import { SquareArrowUpRightIcon as u } from "@acronis-platform/icons-react/stroke-mono";
|
|
6
|
-
import { cn as p } from "../../../lib/utils.js";
|
|
7
|
-
const f = v.forwardRef(
|
|
8
|
-
({ className: e, external: r, disabled: i, href: o, children: t, render: a, ...n }, l) => m({
|
|
9
|
-
render: a,
|
|
10
|
-
ref: l,
|
|
11
|
-
defaultTagName: "a",
|
|
12
|
-
props: x(
|
|
13
|
-
{
|
|
14
|
-
className: p(
|
|
15
|
-
"inline-flex items-center gap-[var(--ui-link-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [text-underline-position:from-font] [&_svg]:size-4 [&_svg]:shrink-0",
|
|
16
|
-
"text-[var(--ui-link-color-idle)] [text-decoration:var(--ui-link-text-decoration-idle)] [&_svg]:text-[var(--ui-link-external-icon-color-idle)]",
|
|
17
|
-
"hover:text-[var(--ui-link-color-hover)] hover:[text-decoration:var(--ui-link-text-decoration-hover)] hover:[&_svg]:text-[var(--ui-link-external-icon-color-hover)]",
|
|
18
|
-
"active:text-[var(--ui-link-color-active)] active:[text-decoration:var(--ui-link-text-decoration-active)] active:[&_svg]:text-[var(--ui-link-external-icon-color-active)]",
|
|
19
|
-
"focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
|
|
20
|
-
"aria-disabled:pointer-events-none aria-disabled:text-[var(--ui-link-color-disabled)] aria-disabled:[text-decoration:var(--ui-link-text-decoration-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-external-icon-color-disabled)]",
|
|
21
|
-
e
|
|
22
|
-
),
|
|
23
|
-
href: i ? void 0 : o,
|
|
24
|
-
"aria-disabled": i || void 0,
|
|
25
|
-
tabIndex: i ? -1 : void 0,
|
|
26
|
-
children: /* @__PURE__ */ c(s, { children: [
|
|
27
|
-
t,
|
|
28
|
-
r && /* @__PURE__ */ d(u, { size: 16 })
|
|
29
|
-
] })
|
|
30
|
-
},
|
|
31
|
-
n
|
|
32
|
-
)
|
|
33
|
-
})
|
|
34
|
-
);
|
|
35
|
-
f.displayName = "Link";
|
|
36
|
-
export {
|
|
37
|
-
f as Link
|
|
38
|
-
};
|
|
39
|
-
//# sourceMappingURL=link.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"link.js","sources":["../../../../src/components/ui/link/link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { SquareArrowUpRightIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"Link\" component: an inline text link (semibold, 14/24) with an\n// optional trailing external-link icon (`external`). Themed by the `--ui-link-*`\n// tier — each state wires its own text color (`--ui-link-color-*`), text decoration\n// (`--ui-link-text-decoration-*`; underline on hover only) and external-icon color\n// (`--ui-link-external-icon-color-*`, kept separate from the text per the tier).\n// Focus paints a 3px `--ui-focus-primary` ring. Polymorphic via Base UI `useRender`\n// — pass `render` to render a router `Link` instead of the default `<a>`. `disabled`\n// makes it inert: disabled color, removed from the tab order, no navigation.\n//\n// The Figma container has a fixed 32px height for grid alignment\n// (`--ui-link-container-height`); it is intentionally NOT applied here so the link\n// flows inline within prose.\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /** Append a trailing external-link icon (e.g. for links that leave the app). */\n external?: boolean;\n /** Render the link inert: disabled color, removed from the tab order, no navigation. */\n disabled?: boolean;\n /**\n * Replace the rendered `<a>` with another element or component (Base UI\n * composition) — e.g. a router `Link`. Props and class names are merged onto it.\n */\n render?: useRender.RenderProp;\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n ({ className, external, disabled, href, children, render, ...props }, ref) =>\n useRender({\n render,\n ref,\n defaultTagName: 'a',\n props: mergeProps<'a'>(\n {\n className: cn(\n 'inline-flex items-center gap-[var(--ui-link-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [text-underline-position:from-font] [&_svg]:size-4 [&_svg]:shrink-0',\n 'text-[var(--ui-link-color-idle)] [text-decoration:var(--ui-link-text-decoration-idle)] [&_svg]:text-[var(--ui-link-external-icon-color-idle)]',\n 'hover:text-[var(--ui-link-color-hover)] hover:[text-decoration:var(--ui-link-text-decoration-hover)] hover:[&_svg]:text-[var(--ui-link-external-icon-color-hover)]',\n 'active:text-[var(--ui-link-color-active)] active:[text-decoration:var(--ui-link-text-decoration-active)] active:[&_svg]:text-[var(--ui-link-external-icon-color-active)]',\n 'focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n 'aria-disabled:pointer-events-none aria-disabled:text-[var(--ui-link-color-disabled)] aria-disabled:[text-decoration:var(--ui-link-text-decoration-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-external-icon-color-disabled)]',\n className\n ),\n href: disabled ? undefined : href,\n 'aria-disabled': disabled || undefined,\n tabIndex: disabled ? -1 : undefined,\n children: (\n <>\n {children}\n {external && <SquareArrowUpRightIcon size={16} />}\n </>\n ),\n },\n props\n ),\n })\n);\nLink.displayName = 'Link';\n\nexport { Link };\n"],"names":["Link","React","className","external","disabled","href","children","render","props","ref","useRender","mergeProps","cn","jsxs","Fragment","jsx","SquareArrowUpRightIcon"],"mappings":";;;;;;AA+BA,MAAMA,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,QAAAC,GAAQ,GAAGC,KAASC,MACpEC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAV;AAAA,QAAA;AAAA,QAEF,MAAME,IAAW,SAAYC;AAAA,QAC7B,iBAAiBD,KAAY;AAAA,QAC7B,UAAUA,IAAW,KAAK;AAAA,QAC1B,UACE,gBAAAS,EAAAC,GAAA,EACG,UAAA;AAAA,UAAAR;AAAA,UACAH,KAAY,gBAAAY,EAACC,GAAA,EAAuB,MAAM,GAAA,CAAI;AAAA,QAAA,EAAA,CACjD;AAAA,MAAA;AAAA,MAGJR;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAR,EAAK,cAAc;"}
|