@acronis-platform/ui-react 0.34.0 → 0.35.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/breadcrumb/breadcrumb.js +1 -1
- package/dist/components/ui/input-select/input-select.js +53 -45
- package/dist/components/ui/input-select/input-select.js.map +1 -1
- package/dist/components/ui/sidebar-secondary/sidebar-secondary.js +1 -1
- package/dist/index.js +58 -58
- 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 +7 -7
- package/dist/react.js +58 -58
- package/dist/src/components/ui/input-select/input-select.d.ts +6 -0
- package/package.json +6 -3
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx as o, jsxs as c } from "react/jsx-runtime";
|
|
2
2
|
import * as l from "react";
|
|
3
3
|
import { Select as a } from "@base-ui/react/select";
|
|
4
|
-
import {
|
|
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
5
|
import { cn as i } from "../../../lib/utils.js";
|
|
6
6
|
const u = l.createContext(!1);
|
|
7
|
-
function
|
|
7
|
+
function f(e) {
|
|
8
8
|
return /* @__PURE__ */ o(u.Provider, { value: !!e.multiple, children: /* @__PURE__ */ o(a.Root, { ...e }) });
|
|
9
9
|
}
|
|
10
|
-
|
|
11
|
-
const
|
|
10
|
+
f.displayName = "InputSelect";
|
|
11
|
+
const E = a.Group, w = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
12
12
|
"div",
|
|
13
13
|
{
|
|
14
14
|
ref: t,
|
|
@@ -19,8 +19,8 @@ const V = a.Group, f = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__
|
|
|
19
19
|
...r
|
|
20
20
|
}
|
|
21
21
|
));
|
|
22
|
-
|
|
23
|
-
const
|
|
22
|
+
w.displayName = "InputSelectField";
|
|
23
|
+
const I = l.forwardRef(({ className: e, children: r, required: t, ...n }, d) => /* @__PURE__ */ c(
|
|
24
24
|
a.Label,
|
|
25
25
|
{
|
|
26
26
|
ref: d,
|
|
@@ -42,8 +42,8 @@ const w = l.forwardRef(({ className: e, children: r, required: t, ...n }, d) =>
|
|
|
42
42
|
]
|
|
43
43
|
}
|
|
44
44
|
));
|
|
45
|
-
|
|
46
|
-
const
|
|
45
|
+
I.displayName = "InputSelectLabel";
|
|
46
|
+
const N = l.forwardRef(({ className: e, children: r, ...t }, n) => /* @__PURE__ */ c(
|
|
47
47
|
a.Trigger,
|
|
48
48
|
{
|
|
49
49
|
ref: n,
|
|
@@ -61,7 +61,7 @@ const I = l.forwardRef(({ className: e, children: r, ...t }, n) => /* @__PURE__
|
|
|
61
61
|
children: [
|
|
62
62
|
r,
|
|
63
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
|
-
|
|
64
|
+
h,
|
|
65
65
|
{
|
|
66
66
|
size: 16,
|
|
67
67
|
className: "transition-transform group-data-[popup-open]:rotate-180"
|
|
@@ -70,8 +70,8 @@ const I = l.forwardRef(({ className: e, children: r, ...t }, n) => /* @__PURE__
|
|
|
70
70
|
]
|
|
71
71
|
}
|
|
72
72
|
));
|
|
73
|
-
|
|
74
|
-
const
|
|
73
|
+
N.displayName = "InputSelectTrigger";
|
|
74
|
+
const S = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
75
75
|
a.Value,
|
|
76
76
|
{
|
|
77
77
|
ref: t,
|
|
@@ -83,9 +83,17 @@ const N = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
|
83
83
|
...r
|
|
84
84
|
}
|
|
85
85
|
));
|
|
86
|
-
|
|
87
|
-
const
|
|
88
|
-
({
|
|
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(
|
|
89
97
|
a.Positioner,
|
|
90
98
|
{
|
|
91
99
|
sideOffset: t,
|
|
@@ -96,20 +104,20 @@ const S = l.forwardRef(
|
|
|
96
104
|
children: /* @__PURE__ */ o(
|
|
97
105
|
a.Popup,
|
|
98
106
|
{
|
|
99
|
-
ref:
|
|
107
|
+
ref: v,
|
|
100
108
|
className: i(
|
|
101
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",
|
|
102
110
|
e
|
|
103
111
|
),
|
|
104
|
-
...
|
|
112
|
+
...b,
|
|
105
113
|
children: r
|
|
106
114
|
}
|
|
107
115
|
)
|
|
108
116
|
}
|
|
109
117
|
) })
|
|
110
118
|
);
|
|
111
|
-
|
|
112
|
-
const
|
|
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: [
|
|
113
121
|
/* @__PURE__ */ o(
|
|
114
122
|
m,
|
|
115
123
|
{
|
|
@@ -130,8 +138,8 @@ const y = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ c("div", {
|
|
|
130
138
|
}
|
|
131
139
|
)
|
|
132
140
|
] }));
|
|
133
|
-
|
|
134
|
-
const
|
|
141
|
+
k.displayName = "InputSelectSearch";
|
|
142
|
+
const R = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
135
143
|
a.Group,
|
|
136
144
|
{
|
|
137
145
|
ref: t,
|
|
@@ -142,8 +150,8 @@ const k = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
|
142
150
|
...r
|
|
143
151
|
}
|
|
144
152
|
));
|
|
145
|
-
|
|
146
|
-
const
|
|
153
|
+
R.displayName = "InputSelectSection";
|
|
154
|
+
const z = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
147
155
|
a.GroupLabel,
|
|
148
156
|
{
|
|
149
157
|
ref: t,
|
|
@@ -154,8 +162,8 @@ const R = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
|
154
162
|
...r
|
|
155
163
|
}
|
|
156
164
|
));
|
|
157
|
-
|
|
158
|
-
const
|
|
165
|
+
z.displayName = "InputSelectSectionLabel";
|
|
166
|
+
const C = l.forwardRef(({ className: e, children: r, ...t }, n) => {
|
|
159
167
|
const d = l.useContext(u);
|
|
160
168
|
return /* @__PURE__ */ c(
|
|
161
169
|
a.Item,
|
|
@@ -186,8 +194,8 @@ const z = l.forwardRef(({ className: e, children: r, ...t }, n) => {
|
|
|
186
194
|
}
|
|
187
195
|
);
|
|
188
196
|
});
|
|
189
|
-
|
|
190
|
-
const
|
|
197
|
+
C.displayName = "InputSelectItem";
|
|
198
|
+
const L = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
191
199
|
"p",
|
|
192
200
|
{
|
|
193
201
|
ref: t,
|
|
@@ -198,8 +206,8 @@ const C = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
|
198
206
|
...r
|
|
199
207
|
}
|
|
200
208
|
));
|
|
201
|
-
|
|
202
|
-
const
|
|
209
|
+
L.displayName = "InputSelectDescription";
|
|
210
|
+
const T = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
203
211
|
"p",
|
|
204
212
|
{
|
|
205
213
|
ref: t,
|
|
@@ -210,8 +218,8 @@ const L = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
|
|
|
210
218
|
...r
|
|
211
219
|
}
|
|
212
220
|
));
|
|
213
|
-
|
|
214
|
-
const
|
|
221
|
+
T.displayName = "InputSelectError";
|
|
222
|
+
const j = l.forwardRef(
|
|
215
223
|
({ className: e, variant: r, children: t, action: n, ...d }, s) => /* @__PURE__ */ c(
|
|
216
224
|
"div",
|
|
217
225
|
{
|
|
@@ -237,21 +245,21 @@ const T = l.forwardRef(
|
|
|
237
245
|
}
|
|
238
246
|
)
|
|
239
247
|
);
|
|
240
|
-
|
|
248
|
+
j.displayName = "InputSelectStatus";
|
|
241
249
|
export {
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
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
|
|
256
264
|
};
|
|
257
265
|
//# sourceMappingURL=input-select.js.map
|
|
@@ -1 +1 @@
|
|
|
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>(\n (\n { className, children, sideOffset = 4, align = 'start', side = 'bottom', ...props },\n ref\n ) => (\n <SelectPrimitive.Portal>\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","InputSelectSearch","MagnifierIcon","InputSelectSection","InputSelectSectionLabel","InputSelectItem","multiple","CheckIcon","InputSelectDescription","InputSelectError","InputSelectStatus","variant","action","InboxIcon","CircleWarningIcon"],"mappings":"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"}
|
|
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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"}
|
|
@@ -3,7 +3,7 @@ import * as o from "react";
|
|
|
3
3
|
import { mergeProps as h } from "@base-ui/react/merge-props";
|
|
4
4
|
import { useRender as N } from "@base-ui/react/use-render";
|
|
5
5
|
import { Collapsible as x } from "@base-ui/react/collapsible";
|
|
6
|
-
import { ChevronRightIcon as k,
|
|
6
|
+
import { ChevronRightIcon as k, SquareArrowUpRightIcon as I, ChevronDownIcon as R } from "@acronis-platform/icons-react/stroke-mono";
|
|
7
7
|
import { cva as E } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
|
|
8
8
|
import { cn as t } from "../../../lib/utils.js";
|
|
9
9
|
const M = o.createContext(null);
|
package/dist/index.js
CHANGED
|
@@ -2,10 +2,10 @@ import { cn as t } from "./lib/utils.js";
|
|
|
2
2
|
import { Avatar as o, AvatarFallback as n, AvatarGroup as S, AvatarImage as i, avatarVariants as c } from "./components/ui/avatar/avatar.js";
|
|
3
3
|
import { Breadcrumb as p, BreadcrumbEllipsis as l, BreadcrumbItem as d, BreadcrumbLink as m, BreadcrumbList as b, BreadcrumbPage as I, BreadcrumbSeparator as s } from "./components/ui/breadcrumb/breadcrumb.js";
|
|
4
4
|
import { Button as y, buttonVariants as f } from "./components/ui/button/button.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
5
|
+
import { ButtonIcon as P, buttonIconVariants as M } from "./components/ui/button-icon/button-icon.js";
|
|
6
|
+
import { ButtonMenu as C, buttonMenuVariants as B } from "./components/ui/button-menu/button-menu.js";
|
|
7
|
+
import { CardFilter as L, cardFilterVariants as G } from "./components/ui/card-filter/card-filter.js";
|
|
8
|
+
import { Checkbox as v } from "./components/ui/checkbox/checkbox.js";
|
|
9
9
|
import { Input as k } from "./components/ui/input/input.js";
|
|
10
10
|
import { InputDatePicker as R } from "./components/ui/input-date-picker/input-date-picker.js";
|
|
11
11
|
import { InputSearch as z } from "./components/ui/input-search/input-search.js";
|
|
@@ -13,15 +13,15 @@ import { InputSelect as D, InputSelectContent as w, InputSelectDescription as j,
|
|
|
13
13
|
import { InputText as Se } from "./components/ui/input-text/input-text.js";
|
|
14
14
|
import { InputTextArea as ce } from "./components/ui/input-text-area/input-text-area.js";
|
|
15
15
|
import { Link as pe } from "./components/ui/link/link.js";
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
16
|
+
import { Radio as de, RadioGroup as me } from "./components/ui/radio/radio.js";
|
|
17
|
+
import { ResizableHandle as Ie, ResizablePanel as se, ResizablePanelGroup as xe } from "./components/ui/resizable/resizable.js";
|
|
18
|
+
import { Search as fe } from "./components/ui/search/search.js";
|
|
19
|
+
import { SearchGlobal as Pe } from "./components/ui/search-global/search-global.js";
|
|
20
|
+
import { SidebarPrimary as Te, SidebarPrimaryCollapseTrigger as Ce, SidebarPrimaryContent as Be, SidebarPrimaryFooter as Ve, SidebarPrimaryHeader as Le, SidebarPrimaryMenu as Ge, SidebarPrimaryMenuItem as he, SidebarPrimaryMenuItemExtras as ve, SidebarPrimarySection as Fe, sidebarPrimaryMenuItemVariants as ke } from "./components/ui/sidebar-primary/sidebar-primary.js";
|
|
21
|
+
import { SidebarSecondary as Re, SidebarSecondaryCollapseTrigger as Ee, SidebarSecondaryCollapsedBreadcrumb as ze, SidebarSecondaryContent as He, SidebarSecondaryFooter as De, SidebarSecondaryHeader as we, SidebarSecondaryMenu as je, SidebarSecondaryMenuItem as qe, SidebarSecondaryMenuItemExtras as Je, SidebarSecondaryMenuSub as Ke, SidebarSecondaryMenuSubContent as Ne, SidebarSecondaryMenuSubItem as Oe, SidebarSecondaryMenuSubTrigger as Qe, SidebarSecondarySection as Ue, SidebarSecondarySectionLabel as We, sidebarSecondaryMenuItemVariants as Xe } from "./components/ui/sidebar-secondary/sidebar-secondary.js";
|
|
22
22
|
import { Switch as Ze } from "./components/ui/switch/switch.js";
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
23
|
+
import { Tag as $e, tagVariants as er } from "./components/ui/tag/tag.js";
|
|
24
|
+
import { Tooltip as tr, TooltipContent as ar, TooltipProvider as or, TooltipTrigger as nr } from "./components/ui/tooltip/tooltip.js";
|
|
25
25
|
export {
|
|
26
26
|
o as Avatar,
|
|
27
27
|
n as AvatarFallback,
|
|
@@ -35,10 +35,10 @@ export {
|
|
|
35
35
|
I as BreadcrumbPage,
|
|
36
36
|
s as BreadcrumbSeparator,
|
|
37
37
|
y as Button,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
P as ButtonIcon,
|
|
39
|
+
C as ButtonMenu,
|
|
40
|
+
L as CardFilter,
|
|
41
|
+
v as Checkbox,
|
|
42
42
|
k as Input,
|
|
43
43
|
R as InputDatePicker,
|
|
44
44
|
z as InputSearch,
|
|
@@ -59,13 +59,13 @@ export {
|
|
|
59
59
|
Se as InputText,
|
|
60
60
|
ce as InputTextArea,
|
|
61
61
|
pe as Link,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
62
|
+
de as Radio,
|
|
63
|
+
me as RadioGroup,
|
|
64
|
+
Ie as ResizableHandle,
|
|
65
|
+
se as ResizablePanel,
|
|
66
|
+
xe as ResizablePanelGroup,
|
|
67
|
+
fe as Search,
|
|
68
|
+
Pe as SearchGlobal,
|
|
69
69
|
_ as Select,
|
|
70
70
|
$ as SelectContent,
|
|
71
71
|
ee as SelectGroup,
|
|
@@ -73,44 +73,44 @@ export {
|
|
|
73
73
|
te as SelectItem,
|
|
74
74
|
ae as SelectTrigger,
|
|
75
75
|
oe as SelectValue,
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
76
|
+
Te as SidebarPrimary,
|
|
77
|
+
Ce as SidebarPrimaryCollapseTrigger,
|
|
78
|
+
Be as SidebarPrimaryContent,
|
|
79
|
+
Ve as SidebarPrimaryFooter,
|
|
80
|
+
Le as SidebarPrimaryHeader,
|
|
81
|
+
Ge as SidebarPrimaryMenu,
|
|
82
|
+
he as SidebarPrimaryMenuItem,
|
|
83
|
+
ve as SidebarPrimaryMenuItemExtras,
|
|
84
|
+
Fe as SidebarPrimarySection,
|
|
85
|
+
Re as SidebarSecondary,
|
|
86
|
+
Ee as SidebarSecondaryCollapseTrigger,
|
|
87
|
+
ze as SidebarSecondaryCollapsedBreadcrumb,
|
|
88
|
+
He as SidebarSecondaryContent,
|
|
89
|
+
De as SidebarSecondaryFooter,
|
|
90
|
+
we as SidebarSecondaryHeader,
|
|
91
|
+
je as SidebarSecondaryMenu,
|
|
92
|
+
qe as SidebarSecondaryMenuItem,
|
|
93
|
+
Je as SidebarSecondaryMenuItemExtras,
|
|
94
|
+
Ke as SidebarSecondaryMenuSub,
|
|
95
|
+
Ne as SidebarSecondaryMenuSubContent,
|
|
96
|
+
Oe as SidebarSecondaryMenuSubItem,
|
|
97
|
+
Qe as SidebarSecondaryMenuSubTrigger,
|
|
98
|
+
Ue as SidebarSecondarySection,
|
|
99
|
+
We as SidebarSecondarySectionLabel,
|
|
100
100
|
Ze as Switch,
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
101
|
+
$e as Tag,
|
|
102
|
+
tr as Tooltip,
|
|
103
|
+
ar as TooltipContent,
|
|
104
|
+
or as TooltipProvider,
|
|
105
|
+
nr as TooltipTrigger,
|
|
106
106
|
c as avatarVariants,
|
|
107
|
-
|
|
108
|
-
|
|
107
|
+
M as buttonIconVariants,
|
|
108
|
+
B as buttonMenuVariants,
|
|
109
109
|
f as buttonVariants,
|
|
110
|
-
|
|
110
|
+
G as cardFilterVariants,
|
|
111
111
|
t as cn,
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
112
|
+
ke as sidebarPrimaryMenuItemVariants,
|
|
113
|
+
Xe as sidebarSecondaryMenuItemVariants,
|
|
114
|
+
er as tagVariants
|
|
115
115
|
};
|
|
116
116
|
//# sourceMappingURL=index.js.map
|
|
@@ -4,7 +4,7 @@ var Ee = (e) => {
|
|
|
4
4
|
var De = (e, t, n) => t.has(e) || Ee("Cannot " + n);
|
|
5
5
|
var re = (e, t, n) => (De(e, t, "read from private field"), n ? n.call(e) : t.get(e)), Re = (e, t, n) => t.has(e) ? Ee("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), Ie = (e, t, n, o) => (De(e, t, "write to private field"), o ? o.call(e, n) : t.set(e, n), n);
|
|
6
6
|
import { jsx as se } from "react/jsx-runtime";
|
|
7
|
-
import {
|
|
7
|
+
import { useState as pe, useRef as F, useEffect as ge, useSyncExternalStore as gt, useMemo as vt, useId as mt, useContext as bt, useLayoutEffect as yt, useCallback as Ue, useImperativeHandle as Ze, createContext as zt } from "react";
|
|
8
8
|
function St(e, t) {
|
|
9
9
|
const n = getComputedStyle(e), o = parseFloat(n.fontSize);
|
|
10
10
|
return t * o;
|
|
@@ -1514,10 +1514,10 @@ function Ut() {
|
|
|
1514
1514
|
return [e, n];
|
|
1515
1515
|
}
|
|
1516
1516
|
function Ce(e) {
|
|
1517
|
-
const t =
|
|
1517
|
+
const t = mt();
|
|
1518
1518
|
return `${e ?? t}`;
|
|
1519
1519
|
}
|
|
1520
|
-
const U = typeof window < "u" ?
|
|
1520
|
+
const U = typeof window < "u" ? yt : ge;
|
|
1521
1521
|
function ie(e) {
|
|
1522
1522
|
const t = F(e);
|
|
1523
1523
|
return U(() => {
|
|
@@ -1554,7 +1554,7 @@ function Le(e) {
|
|
|
1554
1554
|
t.current[n] = e[n];
|
|
1555
1555
|
}, [e]), t.current;
|
|
1556
1556
|
}
|
|
1557
|
-
const ct =
|
|
1557
|
+
const ct = zt(null);
|
|
1558
1558
|
function Zt(e, t) {
|
|
1559
1559
|
const n = F({
|
|
1560
1560
|
getLayout: () => ({}),
|
|
@@ -1627,7 +1627,7 @@ function Kt({
|
|
|
1627
1627
|
), E = Le({
|
|
1628
1628
|
defaultLayout: n,
|
|
1629
1629
|
disableCursor: o
|
|
1630
|
-
}), O =
|
|
1630
|
+
}), O = vt(
|
|
1631
1631
|
() => ({
|
|
1632
1632
|
get disableCursor() {
|
|
1633
1633
|
return !!E.disableCursor;
|
|
@@ -1777,7 +1777,7 @@ function Kt({
|
|
|
1777
1777
|
}
|
|
1778
1778
|
Kt.displayName = "Group";
|
|
1779
1779
|
function ke() {
|
|
1780
|
-
const e =
|
|
1780
|
+
const e = bt(ct);
|
|
1781
1781
|
return P(
|
|
1782
1782
|
e,
|
|
1783
1783
|
"Group Context not found; did you render a Panel or Separator outside of a Group?"
|
|
@@ -1875,7 +1875,7 @@ function _t({
|
|
|
1875
1875
|
const C = y(v, g);
|
|
1876
1876
|
if (C)
|
|
1877
1877
|
return JSON.stringify(C);
|
|
1878
|
-
}, x =
|
|
1878
|
+
}, x = gt(
|
|
1879
1879
|
(C) => ze(v, C),
|
|
1880
1880
|
w,
|
|
1881
1881
|
w
|
package/dist/react.js
CHANGED
|
@@ -2,10 +2,10 @@ import { cn as t } from "./lib/utils.js";
|
|
|
2
2
|
import { Avatar as o, AvatarFallback as n, AvatarGroup as S, AvatarImage as i, avatarVariants as c } from "./components/ui/avatar/avatar.js";
|
|
3
3
|
import { Breadcrumb as p, BreadcrumbEllipsis as l, BreadcrumbItem as d, BreadcrumbLink as m, BreadcrumbList as b, BreadcrumbPage as I, BreadcrumbSeparator as s } from "./components/ui/breadcrumb/breadcrumb.js";
|
|
4
4
|
import { Button as y, buttonVariants as f } from "./components/ui/button/button.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
5
|
+
import { ButtonIcon as P, buttonIconVariants as M } from "./components/ui/button-icon/button-icon.js";
|
|
6
|
+
import { ButtonMenu as C, buttonMenuVariants as B } from "./components/ui/button-menu/button-menu.js";
|
|
7
|
+
import { CardFilter as L, cardFilterVariants as G } from "./components/ui/card-filter/card-filter.js";
|
|
8
|
+
import { Checkbox as v } from "./components/ui/checkbox/checkbox.js";
|
|
9
9
|
import { Input as k } from "./components/ui/input/input.js";
|
|
10
10
|
import { InputDatePicker as R } from "./components/ui/input-date-picker/input-date-picker.js";
|
|
11
11
|
import { InputSearch as z } from "./components/ui/input-search/input-search.js";
|
|
@@ -13,15 +13,15 @@ import { InputSelect as D, InputSelectContent as w, InputSelectDescription as j,
|
|
|
13
13
|
import { InputText as Se } from "./components/ui/input-text/input-text.js";
|
|
14
14
|
import { InputTextArea as ce } from "./components/ui/input-text-area/input-text-area.js";
|
|
15
15
|
import { Link as pe } from "./components/ui/link/link.js";
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
16
|
+
import { Radio as de, RadioGroup as me } from "./components/ui/radio/radio.js";
|
|
17
|
+
import { ResizableHandle as Ie, ResizablePanel as se, ResizablePanelGroup as xe } from "./components/ui/resizable/resizable.js";
|
|
18
|
+
import { Search as fe } from "./components/ui/search/search.js";
|
|
19
|
+
import { SearchGlobal as Pe } from "./components/ui/search-global/search-global.js";
|
|
20
|
+
import { SidebarPrimary as Te, SidebarPrimaryCollapseTrigger as Ce, SidebarPrimaryContent as Be, SidebarPrimaryFooter as Ve, SidebarPrimaryHeader as Le, SidebarPrimaryMenu as Ge, SidebarPrimaryMenuItem as he, SidebarPrimaryMenuItemExtras as ve, SidebarPrimarySection as Fe, sidebarPrimaryMenuItemVariants as ke } from "./components/ui/sidebar-primary/sidebar-primary.js";
|
|
21
|
+
import { SidebarSecondary as Re, SidebarSecondaryCollapseTrigger as Ee, SidebarSecondaryCollapsedBreadcrumb as ze, SidebarSecondaryContent as He, SidebarSecondaryFooter as De, SidebarSecondaryHeader as we, SidebarSecondaryMenu as je, SidebarSecondaryMenuItem as qe, SidebarSecondaryMenuItemExtras as Je, SidebarSecondaryMenuSub as Ke, SidebarSecondaryMenuSubContent as Ne, SidebarSecondaryMenuSubItem as Oe, SidebarSecondaryMenuSubTrigger as Qe, SidebarSecondarySection as Ue, SidebarSecondarySectionLabel as We, sidebarSecondaryMenuItemVariants as Xe } from "./components/ui/sidebar-secondary/sidebar-secondary.js";
|
|
22
22
|
import { Switch as Ze } from "./components/ui/switch/switch.js";
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
23
|
+
import { Tag as $e, tagVariants as er } from "./components/ui/tag/tag.js";
|
|
24
|
+
import { Tooltip as tr, TooltipContent as ar, TooltipProvider as or, TooltipTrigger as nr } from "./components/ui/tooltip/tooltip.js";
|
|
25
25
|
export {
|
|
26
26
|
o as Avatar,
|
|
27
27
|
n as AvatarFallback,
|
|
@@ -35,10 +35,10 @@ export {
|
|
|
35
35
|
I as BreadcrumbPage,
|
|
36
36
|
s as BreadcrumbSeparator,
|
|
37
37
|
y as Button,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
P as ButtonIcon,
|
|
39
|
+
C as ButtonMenu,
|
|
40
|
+
L as CardFilter,
|
|
41
|
+
v as Checkbox,
|
|
42
42
|
k as Input,
|
|
43
43
|
R as InputDatePicker,
|
|
44
44
|
z as InputSearch,
|
|
@@ -59,13 +59,13 @@ export {
|
|
|
59
59
|
Se as InputText,
|
|
60
60
|
ce as InputTextArea,
|
|
61
61
|
pe as Link,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
62
|
+
de as Radio,
|
|
63
|
+
me as RadioGroup,
|
|
64
|
+
Ie as ResizableHandle,
|
|
65
|
+
se as ResizablePanel,
|
|
66
|
+
xe as ResizablePanelGroup,
|
|
67
|
+
fe as Search,
|
|
68
|
+
Pe as SearchGlobal,
|
|
69
69
|
_ as Select,
|
|
70
70
|
$ as SelectContent,
|
|
71
71
|
ee as SelectGroup,
|
|
@@ -73,44 +73,44 @@ export {
|
|
|
73
73
|
te as SelectItem,
|
|
74
74
|
ae as SelectTrigger,
|
|
75
75
|
oe as SelectValue,
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
76
|
+
Te as SidebarPrimary,
|
|
77
|
+
Ce as SidebarPrimaryCollapseTrigger,
|
|
78
|
+
Be as SidebarPrimaryContent,
|
|
79
|
+
Ve as SidebarPrimaryFooter,
|
|
80
|
+
Le as SidebarPrimaryHeader,
|
|
81
|
+
Ge as SidebarPrimaryMenu,
|
|
82
|
+
he as SidebarPrimaryMenuItem,
|
|
83
|
+
ve as SidebarPrimaryMenuItemExtras,
|
|
84
|
+
Fe as SidebarPrimarySection,
|
|
85
|
+
Re as SidebarSecondary,
|
|
86
|
+
Ee as SidebarSecondaryCollapseTrigger,
|
|
87
|
+
ze as SidebarSecondaryCollapsedBreadcrumb,
|
|
88
|
+
He as SidebarSecondaryContent,
|
|
89
|
+
De as SidebarSecondaryFooter,
|
|
90
|
+
we as SidebarSecondaryHeader,
|
|
91
|
+
je as SidebarSecondaryMenu,
|
|
92
|
+
qe as SidebarSecondaryMenuItem,
|
|
93
|
+
Je as SidebarSecondaryMenuItemExtras,
|
|
94
|
+
Ke as SidebarSecondaryMenuSub,
|
|
95
|
+
Ne as SidebarSecondaryMenuSubContent,
|
|
96
|
+
Oe as SidebarSecondaryMenuSubItem,
|
|
97
|
+
Qe as SidebarSecondaryMenuSubTrigger,
|
|
98
|
+
Ue as SidebarSecondarySection,
|
|
99
|
+
We as SidebarSecondarySectionLabel,
|
|
100
100
|
Ze as Switch,
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
101
|
+
$e as Tag,
|
|
102
|
+
tr as Tooltip,
|
|
103
|
+
ar as TooltipContent,
|
|
104
|
+
or as TooltipProvider,
|
|
105
|
+
nr as TooltipTrigger,
|
|
106
106
|
c as avatarVariants,
|
|
107
|
-
|
|
108
|
-
|
|
107
|
+
M as buttonIconVariants,
|
|
108
|
+
B as buttonMenuVariants,
|
|
109
109
|
f as buttonVariants,
|
|
110
|
-
|
|
110
|
+
G as cardFilterVariants,
|
|
111
111
|
t as cn,
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
112
|
+
ke as sidebarPrimaryMenuItemVariants,
|
|
113
|
+
Xe as sidebarSecondaryMenuItemVariants,
|
|
114
|
+
er as tagVariants
|
|
115
115
|
};
|
|
116
116
|
//# sourceMappingURL=react.js.map
|
|
@@ -17,6 +17,12 @@ declare const InputSelectContent: React.ForwardRefExoticComponent<Omit<Omit<impo
|
|
|
17
17
|
sideOffset?: number;
|
|
18
18
|
align?: SelectPrimitive.Positioner.Props["align"];
|
|
19
19
|
side?: SelectPrimitive.Positioner.Props["side"];
|
|
20
|
+
/**
|
|
21
|
+
* Container to portal the dropdown into. Defaults to the document body;
|
|
22
|
+
* pass an element to scope the portal (e.g. a shadow root, so the popup
|
|
23
|
+
* inherits styles defined there).
|
|
24
|
+
*/
|
|
25
|
+
portalContainer?: SelectPrimitive.Portal.Props["container"];
|
|
20
26
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
21
27
|
/**
|
|
22
28
|
* Presentational in-dropdown search row (magnifier + input). The consumer wires
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acronis-platform/ui-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.35.1",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/acronis/uikit.git",
|
|
@@ -8,6 +8,9 @@
|
|
|
8
8
|
},
|
|
9
9
|
"description": "Acronis React component library — a Base UI implementation, themed by @acronis-platform/design-tokens.",
|
|
10
10
|
"type": "module",
|
|
11
|
+
"sideEffects": [
|
|
12
|
+
"**/*.css"
|
|
13
|
+
],
|
|
11
14
|
"main": "./dist/index.js",
|
|
12
15
|
"module": "./dist/index.js",
|
|
13
16
|
"types": "./dist/index.d.ts",
|
|
@@ -47,8 +50,8 @@
|
|
|
47
50
|
"react-resizable-panels": "4.11.2",
|
|
48
51
|
"tailwind-merge": "3.6.0",
|
|
49
52
|
"@acronis-platform/design-assets": "0.4.0",
|
|
50
|
-
"@acronis-platform/
|
|
51
|
-
"@acronis-platform/
|
|
53
|
+
"@acronis-platform/icons-react": "0.4.0",
|
|
54
|
+
"@acronis-platform/tokens-pd": "1.8.1"
|
|
52
55
|
},
|
|
53
56
|
"devDependencies": {
|
|
54
57
|
"@figma/code-connect": "1.4.8",
|