@acronis-platform/ui-react 0.29.0 → 0.33.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.
Files changed (30) hide show
  1. package/README.md +18 -1
  2. package/dist/components/ui/input-date-picker/input-date-picker.js +104 -0
  3. package/dist/components/ui/input-date-picker/input-date-picker.js.map +1 -0
  4. package/dist/components/ui/input-select/input-select.js +257 -0
  5. package/dist/components/ui/input-select/input-select.js.map +1 -0
  6. package/dist/components/ui/input-text-area/input-text-area.js +72 -16
  7. package/dist/components/ui/input-text-area/input-text-area.js.map +1 -1
  8. package/dist/components/ui/link/link.js +39 -0
  9. package/dist/components/ui/link/link.js.map +1 -0
  10. package/dist/components/ui/sidebar-primary/sidebar-primary.js +85 -71
  11. package/dist/components/ui/sidebar-primary/sidebar-primary.js.map +1 -1
  12. package/dist/components/ui/sidebar-secondary/sidebar-secondary.js +125 -117
  13. package/dist/components/ui/sidebar-secondary/sidebar-secondary.js.map +1 -1
  14. package/dist/index.js +112 -94
  15. package/dist/index.js.map +1 -1
  16. package/dist/react.js +112 -94
  17. package/dist/react.js.map +1 -1
  18. package/dist/src/components/ui/input-date-picker/index.d.ts +1 -0
  19. package/dist/src/components/ui/input-date-picker/input-date-picker.d.ts +27 -0
  20. package/dist/src/components/ui/input-select/index.d.ts +1 -0
  21. package/dist/src/components/ui/input-select/input-select.d.ts +40 -0
  22. package/dist/src/components/ui/input-text-area/input-text-area.d.ts +14 -2
  23. package/dist/src/components/ui/link/index.d.ts +1 -0
  24. package/dist/src/components/ui/link/link.d.ts +15 -0
  25. package/dist/src/components/ui/select/select.d.ts +1 -14
  26. package/dist/src/index.d.ts +3 -0
  27. package/dist/ui-react.css +1 -1
  28. package/package.json +5 -1
  29. package/dist/components/ui/select/select.js +0 -105
  30. package/dist/components/ui/select/select.js.map +0 -1
package/README.md CHANGED
@@ -29,7 +29,24 @@ export function Example() {
29
29
  }
30
30
  ```
31
31
 
32
- Toggle dark mode by adding the `dark` class to an ancestor element.
32
+ `@acronis-platform/ui-react/styles` loads the `acronis` token base. To switch
33
+ theme at runtime:
34
+
35
+ ```css
36
+ /* base brand */
37
+ @import '@acronis-platform/ui-react/styles';
38
+
39
+ /* optional: layer another brand override on top */
40
+ @import '@acronis-platform/tokens-pd/css/deep-sky.css';
41
+ ```
42
+
43
+ ```html
44
+ <!-- light/dark mode -->
45
+ <html data-theme="dark"></html>
46
+ ```
47
+
48
+ Light/dark is driven by `light-dark()` + `color-scheme`; `dark:` utilities are
49
+ wired to `[data-theme='dark']`.
33
50
 
34
51
  ## Fonts
35
52
 
package/dist/components/ui/input-date-picker/input-date-picker.js ADDED
@@ -0,0 +1,104 @@
1
+ import { jsxs as e, jsx as r } from "react/jsx-runtime";
2
+ import * as m from "react";
3
+ import { CalendarIcon as C } from "@acronis-platform/icons-react/stroke-mono";
4
+ import { cn as p } from "../../../lib/utils.js";
5
+ const E = m.forwardRef(
6
+ ({
7
+ className: k,
8
+ id: h,
9
+ label: i,
10
+ required: s,
11
+ description: f,
12
+ error: a,
13
+ pickerType: N = "date",
14
+ placeholder: w,
15
+ value: o,
16
+ startDate: l,
17
+ endDate: t,
18
+ separator: I = "–",
19
+ open: b,
20
+ disabled: d,
21
+ "aria-invalid": y,
22
+ ...R
23
+ }, j) => {
24
+ const P = m.useId(), n = h ?? P, v = `${n}-message`, c = a != null && a !== "", q = c || y, u = c ? a : f, g = u != null && u !== "", x = N === "dateRange", z = x ? l != null && l !== "" || t != null && t !== "" : o != null && o !== "";
25
+ return /* @__PURE__ */ e("div", { className: "flex w-full min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]", children: [
26
+ i != null && i !== "" && /* @__PURE__ */ e(
27
+ "label",
28
+ {
29
+ htmlFor: n,
30
+ className: p(
31
+ "flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4",
32
+ d ? "text-[var(--ui-input-date-picker-global-label-color-disabled)]" : "text-[var(--ui-input-date-picker-global-label-color-idle)]"
33
+ ),
34
+ children: [
35
+ i,
36
+ s && /* @__PURE__ */ r(
37
+ "span",
38
+ {
39
+ "aria-hidden": "true",
40
+ className: "text-[var(--ui-input-date-picker-global-required-color)]",
41
+ children: "*"
42
+ }
43
+ )
44
+ ]
45
+ }
46
+ ),
47
+ /* @__PURE__ */ e(
48
+ "button",
49
+ {
50
+ ref: j,
51
+ id: n,
52
+ type: "button",
53
+ disabled: d,
54
+ "aria-invalid": q || void 0,
55
+ "aria-required": s || void 0,
56
+ "aria-haspopup": "dialog",
57
+ "aria-expanded": b || void 0,
58
+ "aria-describedby": g ? v : void 0,
59
+ "data-open": b || void 0,
60
+ className: p(
61
+ "group flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-left text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors",
62
+ "enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)]",
63
+ "not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)]",
64
+ "not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]",
65
+ "aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]",
66
+ "disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]",
67
+ k
68
+ ),
69
+ ...R,
70
+ children: [
71
+ z ? x ? /* @__PURE__ */ e("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate", children: [
72
+ /* @__PURE__ */ r("span", { children: l }),
73
+ /* @__PURE__ */ r("span", { className: "text-[var(--ui-input-date-picker-global-separator-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-separator-color-disabled)]", children: I }),
74
+ /* @__PURE__ */ r("span", { children: t })
75
+ ] }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate", children: o }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]", children: w }),
76
+ /* @__PURE__ */ r(
77
+ C,
78
+ {
79
+ size: 16,
80
+ className: "shrink-0 text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-disabled:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]:text-[var(--ui-input-date-picker-error-icon-color-idle)]"
81
+ }
82
+ )
83
+ ]
84
+ }
85
+ ),
86
+ g && /* @__PURE__ */ r(
87
+ "p",
88
+ {
89
+ id: v,
90
+ className: p(
91
+ "text-xs leading-4",
92
+ c ? "text-[var(--ui-input-date-picker-error-error-msg-color)]" : d ? "text-[var(--ui-input-date-picker-normal-description-color-disabled)]" : "text-[var(--ui-input-date-picker-normal-description-color-idle)]"
93
+ ),
94
+ children: u
95
+ }
96
+ )
97
+ ] });
98
+ }
99
+ );
100
+ E.displayName = "InputDatePicker";
101
+ export {
102
+ E as InputDatePicker
103
+ };
104
+ //# sourceMappingURL=input-date-picker.js.map
package/dist/components/ui/input-date-picker/input-date-picker.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input-date-picker.js","sources":["../../../../src/components/ui/input-date-picker/input-date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CalendarIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputDatePicker\" component: the date-field **trigger** — a\n// button box that displays a formatted date `value` (or a `startDate – endDate`\n// range when `pickerType=\"dateRange\"`) and a trailing calendar icon, with the field\n// furniture (optional `label` + required `*`, optional `description` / `error`).\n// Themed by the `--ui-input-date-picker-*` tier. The box border is wired per state:\n// idle / hover / open (`open` → `-active`) / focus (`-active` + a 3px\n// `--ui-focus-primary` ring) / disabled; `error` (or `aria-invalid`) swaps the\n// border to `error-box-border-color-*` and the ring to `--ui-focus-error`.\n//\n// This is the trigger only — the calendar popup is NOT in the Figma design or the\n// token tier yet, so the consumer renders the date `value`/range as formatted\n// strings and wires their own calendar to `open` / `onClick`.\nexport interface InputDatePickerProps\n extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {\n /** Field label, rendered above the box. */\n label?: React.ReactNode;\n /** Marks the field required — appends a `*` after the label. */\n required?: boolean;\n /** Helper text below the box. Hidden while `error` is set. */\n description?: React.ReactNode;\n /** Error message below the box. Its presence switches the field to the error treatment. */\n error?: React.ReactNode;\n /** Single date or a start–end range. */\n pickerType?: 'date' | 'dateRange';\n /** Hint shown when no value is selected. */\n placeholder?: React.ReactNode;\n /** Formatted selected date (`pickerType=\"date\"`). */\n value?: React.ReactNode;\n /** Formatted range start (`pickerType=\"dateRange\"`). */\n startDate?: React.ReactNode;\n /** Formatted range end (`pickerType=\"dateRange\"`). */\n endDate?: React.ReactNode;\n /** Separator between range dates. */\n separator?: React.ReactNode;\n /** Whether the (consumer-owned) calendar popup is open — paints the active border. */\n open?: boolean;\n}\n\nconst InputDatePicker = React.forwardRef<HTMLButtonElement, InputDatePickerProps>(\n (\n {\n className,\n id,\n label,\n required,\n description,\n error,\n pickerType = 'date',\n placeholder,\n value,\n startDate,\n endDate,\n separator = '–',\n open,\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 const isRange = pickerType === 'dateRange';\n const hasValue = isRange\n ? (startDate != null && startDate !== '') ||\n (endDate != null && endDate !== '')\n : value != null && value !== '';\n\n return (\n <div className=\"flex w-full min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]\">\n {label != null && label !== '' && (\n <label\n htmlFor={inputId}\n className={cn(\n 'flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4',\n disabled\n ? 'text-[var(--ui-input-date-picker-global-label-color-disabled)]'\n : 'text-[var(--ui-input-date-picker-global-label-color-idle)]'\n )}\n >\n {label}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-date-picker-global-required-color)]\"\n >\n *\n </span>\n )}\n </label>\n )}\n\n <button\n ref={ref}\n id={inputId}\n type=\"button\"\n disabled={disabled}\n aria-invalid={invalid || undefined}\n aria-required={required || undefined}\n aria-haspopup=\"dialog\"\n aria-expanded={open || undefined}\n aria-describedby={hasMessage ? messageId : undefined}\n data-open={open || undefined}\n className={cn(\n 'group flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-left text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors',\n 'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)]',\n 'not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)]',\n 'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n 'aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n 'disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]',\n className\n )}\n {...props}\n >\n {hasValue ? (\n isRange ? (\n <span className=\"flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate\">\n <span>{startDate}</span>\n <span className=\"text-[var(--ui-input-date-picker-global-separator-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-separator-color-disabled)]\">\n {separator}\n </span>\n <span>{endDate}</span>\n </span>\n ) : (\n <span className=\"min-w-0 flex-1 truncate\">{value}</span>\n )\n ) : (\n <span className=\"min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]\">\n {placeholder}\n </span>\n )}\n <CalendarIcon\n size={16}\n className=\"shrink-0 text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-disabled:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]:text-[var(--ui-input-date-picker-error-icon-color-idle)]\"\n />\n </button>\n\n {hasMessage && (\n <p\n id={messageId}\n className={cn(\n 'text-xs leading-4',\n hasError\n ? 'text-[var(--ui-input-date-picker-error-error-msg-color)]'\n : disabled\n ? 'text-[var(--ui-input-date-picker-normal-description-color-disabled)]'\n : 'text-[var(--ui-input-date-picker-normal-description-color-idle)]'\n )}\n >\n {message}\n </p>\n )}\n </div>\n );\n }\n);\nInputDatePicker.displayName = 'InputDatePicker';\n\nexport { InputDatePicker };\n"],"names":["InputDatePicker","React","className","id","label","required","description","error","pickerType","placeholder","value","startDate","endDate","separator","open","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","isRange","hasValue","jsxs","cn","jsx","CalendarIcon"],"mappings":"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"}
package/dist/components/ui/input-select/input-select.js ADDED
@@ -0,0 +1,257 @@
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 { ChevronDownIcon as v, MagnifierIcon as m, CheckIcon as p, InboxIcon as g, CircleWarningIcon as x } from "@acronis-platform/icons-react/stroke-mono";
5
+ import { cn as i } from "../../../lib/utils.js";
6
+ const u = l.createContext(!1);
7
+ function h(e) {
8
+ return /* @__PURE__ */ o(u.Provider, { value: !!e.multiple, children: /* @__PURE__ */ o(a.Root, { ...e }) });
9
+ }
10
+ h.displayName = "InputSelect";
11
+ const V = a.Group, f = 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
+ f.displayName = "InputSelectField";
23
+ const w = 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
+ w.displayName = "InputSelectLabel";
46
+ const I = 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
+ v,
65
+ {
66
+ size: 16,
67
+ className: "transition-transform group-data-[popup-open]:rotate-180"
68
+ }
69
+ ) })
70
+ ]
71
+ }
72
+ ));
73
+ I.displayName = "InputSelectTrigger";
74
+ const N = 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
+ N.displayName = "InputSelectValue";
87
+ const S = l.forwardRef(
88
+ ({ className: e, children: r, sideOffset: t = 4, align: n = "start", side: d = "bottom", ...s }, b) => /* @__PURE__ */ o(a.Portal, { children: /* @__PURE__ */ o(
89
+ a.Positioner,
90
+ {
91
+ sideOffset: t,
92
+ align: n,
93
+ side: d,
94
+ alignItemWithTrigger: !1,
95
+ className: "z-50 outline-none",
96
+ children: /* @__PURE__ */ o(
97
+ a.Popup,
98
+ {
99
+ ref: b,
100
+ className: i(
101
+ "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
+ e
103
+ ),
104
+ ...s,
105
+ children: r
106
+ }
107
+ )
108
+ }
109
+ ) })
110
+ );
111
+ S.displayName = "InputSelectContent";
112
+ const y = 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
+ /* @__PURE__ */ o(
114
+ m,
115
+ {
116
+ size: 16,
117
+ className: "shrink-0 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)]"
118
+ }
119
+ ),
120
+ /* @__PURE__ */ o(
121
+ "input",
122
+ {
123
+ ref: t,
124
+ type: "search",
125
+ className: i(
126
+ "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",
127
+ e
128
+ ),
129
+ ...r
130
+ }
131
+ )
132
+ ] }));
133
+ y.displayName = "InputSelectSearch";
134
+ const k = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
135
+ a.Group,
136
+ {
137
+ ref: t,
138
+ className: i(
139
+ "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",
140
+ e
141
+ ),
142
+ ...r
143
+ }
144
+ ));
145
+ k.displayName = "InputSelectSection";
146
+ const R = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
147
+ a.GroupLabel,
148
+ {
149
+ ref: t,
150
+ className: i(
151
+ "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)]",
152
+ e
153
+ ),
154
+ ...r
155
+ }
156
+ ));
157
+ R.displayName = "InputSelectSectionLabel";
158
+ const z = l.forwardRef(({ className: e, children: r, ...t }, n) => {
159
+ const d = l.useContext(u);
160
+ return /* @__PURE__ */ c(
161
+ a.Item,
162
+ {
163
+ ref: n,
164
+ className: i(
165
+ "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",
166
+ "bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]",
167
+ // Single-select rows tint when selected; multiple-select rows keep the
168
+ // unselected background (the leading checkbox carries the state).
169
+ !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)]",
170
+ "data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]",
171
+ e
172
+ ),
173
+ ...t,
174
+ children: [
175
+ d && /* @__PURE__ */ o(
176
+ "span",
177
+ {
178
+ "aria-hidden": "true",
179
+ 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)]",
180
+ children: /* @__PURE__ */ o(p, { size: 16 })
181
+ }
182
+ ),
183
+ /* @__PURE__ */ o(a.ItemText, { className: "min-w-0 flex-1 truncate", children: r }),
184
+ !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 }) })
185
+ ]
186
+ }
187
+ );
188
+ });
189
+ z.displayName = "InputSelectItem";
190
+ const C = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
191
+ "p",
192
+ {
193
+ ref: t,
194
+ className: i(
195
+ "text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]",
196
+ e
197
+ ),
198
+ ...r
199
+ }
200
+ ));
201
+ C.displayName = "InputSelectDescription";
202
+ const L = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
203
+ "p",
204
+ {
205
+ ref: t,
206
+ className: i(
207
+ "text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]",
208
+ e
209
+ ),
210
+ ...r
211
+ }
212
+ ));
213
+ L.displayName = "InputSelectError";
214
+ const T = l.forwardRef(
215
+ ({ className: e, variant: r, children: t, action: n, ...d }, s) => /* @__PURE__ */ c(
216
+ "div",
217
+ {
218
+ ref: s,
219
+ className: i(
220
+ "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)]",
221
+ e
222
+ ),
223
+ ...d,
224
+ children: [
225
+ r === "loading" && /* @__PURE__ */ o(
226
+ "span",
227
+ {
228
+ "aria-hidden": "true",
229
+ className: "size-6 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70"
230
+ }
231
+ ),
232
+ r === "empty" && /* @__PURE__ */ o(g, { size: 24, className: "opacity-70" }),
233
+ r === "error" && /* @__PURE__ */ o(x, { size: 24, className: "opacity-70" }),
234
+ t,
235
+ r === "error" && n
236
+ ]
237
+ }
238
+ )
239
+ );
240
+ T.displayName = "InputSelectStatus";
241
+ export {
242
+ h as InputSelect,
243
+ S as InputSelectContent,
244
+ C as InputSelectDescription,
245
+ L as InputSelectError,
246
+ f as InputSelectField,
247
+ V as InputSelectGroup,
248
+ z as InputSelectItem,
249
+ w as InputSelectLabel,
250
+ y as InputSelectSearch,
251
+ k as InputSelectSection,
252
+ R as InputSelectSectionLabel,
253
+ T as InputSelectStatus,
254
+ I as InputSelectTrigger,
255
+ N as InputSelectValue
256
+ };
257
+ //# sourceMappingURL=input-select.js.map
package/dist/components/ui/input-select/input-select.js.map ADDED
@@ -0,0 +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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"}
package/dist/components/ui/input-text-area/input-text-area.js CHANGED
@@ -1,21 +1,77 @@
1
- import { jsx as i } from "react/jsx-runtime";
2
- import * as o from "react";
3
- import { cn as t } from "../../../lib/utils.js";
4
- const l = o.forwardRef(
5
- ({ className: e, ...r }, a) => /* @__PURE__ */ i(
6
- "textarea",
7
- {
8
- ref: a,
9
- className: t(
10
- "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] enabled:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled: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)] focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] 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)]",
11
- e
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
+ }
12
38
  ),
13
- ...r
14
- }
15
- )
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
+ }
16
72
  );
17
- l.displayName = "InputTextArea";
73
+ y.displayName = "InputTextArea";
18
74
  export {
19
- l as InputTextArea
75
+ y as InputTextArea
20
76
  };
21
77
  //# sourceMappingURL=input-text-area.js.map
package/dist/components/ui/input-text-area/input-text-area.js.map CHANGED
@@ -1 +1 @@
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// A multiline text area, themed by the dedicated next-gen `--ui-input-text-area-*`\n// token tier from @acronis-platform/tokens-pd. The box fill (`box-color-*`) and the\n// border (`border-color-*`) are wired per state: idle / hover / focus (border\n// `border-color-focus` + a 3px `--ui-focus-primary` ring) / disabled. Value and\n// placeholder text use `value-color-*` / `placeholder-color-*`. Box geometry\n// (96px min-height, 4px radius, 12px padding-x, 8px padding-y) comes from\n// `--ui-input-text-area-box-*`; it grows with vertical resize. Unlike the\n// single-line Input tier, this tier has NO error-specific border/fill token — so\n// the error state (driven by `aria-invalid`) keeps the idle/hover/focus border and\n// only swaps the focus ring to `--ui-focus-error`. Label, description, and required\n// marker are composed by the consumer (a Field component is future work).\nexport type InputTextAreaProps = React.ComponentPropsWithoutRef<'textarea'>;\n\nconst InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(\n ({ className, ...props }, ref) => (\n <textarea\n ref={ref}\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] enabled:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled: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)] focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] 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);\nInputTextArea.displayName = 'InputTextArea';\n\nexport { InputTextArea };\n"],"names":["InputTextArea","React","className","props","ref","jsx","cn"],"mappings":";;;AAiBA,MAAMA,IAAgBC,EAAM;AAAA,EAC1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAH,EAAc,cAAc;"}
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;"}
package/dist/components/ui/link/link.js ADDED
@@ -0,0 +1,39 @@
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