@acronis-platform/ui-react 0.38.0 → 0.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/data-table/data-table-column-header.js +48 -0
- package/dist/components/ui/data-table/data-table-column-header.js.map +1 -0
- package/dist/components/ui/data-table/data-table-pagination.js +89 -0
- package/dist/components/ui/data-table/data-table-pagination.js.map +1 -0
- package/dist/components/ui/data-table/data-table-toolbar.js +46 -0
- package/dist/components/ui/data-table/data-table-toolbar.js.map +1 -0
- package/dist/components/ui/data-table/data-table-view-options.js +40 -0
- package/dist/components/ui/data-table/data-table-view-options.js.map +1 -0
- package/dist/components/ui/data-table/data-table.js +89 -0
- package/dist/components/ui/data-table/data-table.js.map +1 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu.js +159 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu.js.map +1 -0
- package/dist/components/ui/empty/empty.js +78 -0
- package/dist/components/ui/empty/empty.js.map +1 -0
- package/dist/components/ui/label/label.js +12 -0
- package/dist/components/ui/label/label.js.map +1 -0
- package/dist/components/ui/popover/popover.js +48 -0
- package/dist/components/ui/popover/popover.js.map +1 -0
- package/dist/components/ui/progress/progress.js +30 -0
- package/dist/components/ui/progress/progress.js.map +1 -0
- package/dist/components/ui/separator/separator.js +22 -0
- package/dist/components/ui/separator/separator.js.map +1 -0
- package/dist/components/ui/spinner/spinner.js +38 -0
- package/dist/components/ui/spinner/spinner.js.map +1 -0
- package/dist/components/ui/table/table.js +8 -8
- package/dist/components/ui/table/table.js.map +1 -1
- package/dist/components/ui/tabs/tabs.js +44 -0
- package/dist/components/ui/tabs/tabs.js.map +1 -0
- package/dist/components/ui/toast/toast.js +83 -0
- package/dist/components/ui/toast/toast.js.map +1 -0
- package/dist/components/ui/widget-placeholder/widget-placeholder.js +106 -0
- package/dist/components/ui/widget-placeholder/widget-placeholder.js.map +1 -0
- package/dist/index.js +210 -142
- package/dist/index.js.map +1 -1
- package/dist/node_modules/.pnpm/@tanstack_react-table@8.21.3_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@tanstack/react-table/build/lib/index.js +104 -0
- package/dist/node_modules/.pnpm/@tanstack_react-table@8.21.3_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@tanstack/react-table/build/lib/index.js.map +1 -0
- package/dist/node_modules/.pnpm/@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js +1900 -0
- package/dist/node_modules/.pnpm/@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js.map +1 -0
- package/dist/react.js +210 -142
- package/dist/react.js.map +1 -1
- package/dist/src/components/ui/data-table/data-table-column-header.d.ts +8 -0
- package/dist/src/components/ui/data-table/data-table-pagination.d.ts +8 -0
- package/dist/src/components/ui/data-table/data-table-toolbar.d.ts +9 -0
- package/dist/src/components/ui/data-table/data-table-view-options.d.ts +6 -0
- package/dist/src/components/ui/data-table/data-table.d.ts +24 -0
- package/dist/src/components/ui/data-table/data-table.docs.d.ts +22 -0
- package/dist/src/components/ui/data-table/index.d.ts +5 -0
- package/dist/src/components/ui/dropdown-menu/dropdown-menu.d.ts +39 -0
- package/dist/src/components/ui/dropdown-menu/dropdown-menu.docs.d.ts +25 -0
- package/dist/src/components/ui/dropdown-menu/index.d.ts +1 -0
- package/dist/src/components/ui/empty/empty.d.ts +9 -0
- package/dist/src/components/ui/empty/index.d.ts +1 -0
- package/dist/src/components/ui/label/index.d.ts +1 -0
- package/dist/src/components/ui/label/label.d.ts +5 -0
- package/dist/src/components/ui/label/label.docs.d.ts +10 -0
- package/dist/src/components/ui/popover/index.d.ts +1 -0
- package/dist/src/components/ui/popover/popover.d.ts +27 -0
- package/dist/src/components/ui/popover/popover.docs.d.ts +25 -0
- package/dist/src/components/ui/progress/index.d.ts +1 -0
- package/dist/src/components/ui/progress/progress.d.ts +9 -0
- package/dist/src/components/ui/progress/progress.docs.d.ts +16 -0
- package/dist/src/components/ui/separator/index.d.ts +1 -0
- package/dist/src/components/ui/separator/separator.d.ts +3 -0
- package/dist/src/components/ui/spinner/index.d.ts +1 -0
- package/dist/src/components/ui/spinner/spinner.d.ts +9 -0
- package/dist/src/components/ui/tabs/index.d.ts +1 -0
- package/dist/src/components/ui/tabs/tabs.d.ts +6 -0
- package/dist/src/components/ui/tabs/tabs.docs.d.ts +25 -0
- package/dist/src/components/ui/tag/tag.d.ts +1 -1
- package/dist/src/components/ui/toast/index.d.ts +1 -0
- package/dist/src/components/ui/toast/toast.d.ts +48 -0
- package/dist/src/components/ui/toast/toast.docs.d.ts +12 -0
- package/dist/src/components/ui/widget-placeholder/index.d.ts +1 -0
- package/dist/src/components/ui/widget-placeholder/widget-placeholder.d.ts +18 -0
- package/dist/src/components/ui/widget-placeholder/widget-placeholder.docs.d.ts +14 -0
- package/dist/src/index.d.ts +12 -0
- package/dist/ui-react.css +1 -1
- package/package.json +5 -3
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import * as m from "react";
|
|
3
|
+
import { cn as l } from "../../../lib/utils.js";
|
|
4
|
+
const r = m.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
|
|
5
|
+
"div",
|
|
6
|
+
{
|
|
7
|
+
ref: s,
|
|
8
|
+
className: l(
|
|
9
|
+
"flex w-full max-w-[448px] flex-col items-center justify-center text-center text-muted-foreground",
|
|
10
|
+
e
|
|
11
|
+
),
|
|
12
|
+
...t
|
|
13
|
+
}
|
|
14
|
+
));
|
|
15
|
+
r.displayName = "Empty";
|
|
16
|
+
const o = m.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
|
|
17
|
+
"div",
|
|
18
|
+
{
|
|
19
|
+
ref: s,
|
|
20
|
+
className: l(
|
|
21
|
+
"mb-4 flex size-[72px] items-center justify-center [&_svg]:size-full",
|
|
22
|
+
e
|
|
23
|
+
),
|
|
24
|
+
...t
|
|
25
|
+
}
|
|
26
|
+
));
|
|
27
|
+
o.displayName = "EmptyIcon";
|
|
28
|
+
const i = m.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
|
|
29
|
+
"div",
|
|
30
|
+
{
|
|
31
|
+
ref: s,
|
|
32
|
+
className: l(
|
|
33
|
+
"flex w-full flex-col items-center gap-2 text-center",
|
|
34
|
+
e
|
|
35
|
+
),
|
|
36
|
+
...t
|
|
37
|
+
}
|
|
38
|
+
));
|
|
39
|
+
i.displayName = "EmptyHeader";
|
|
40
|
+
const c = m.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
|
|
41
|
+
"h3",
|
|
42
|
+
{
|
|
43
|
+
ref: s,
|
|
44
|
+
className: l("text-lg font-normal leading-6 text-foreground", e),
|
|
45
|
+
...t
|
|
46
|
+
}
|
|
47
|
+
));
|
|
48
|
+
c.displayName = "EmptyTitle";
|
|
49
|
+
const f = m.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a("p", { ref: s, className: l("text-sm leading-6", e), ...t }));
|
|
50
|
+
f.displayName = "EmptyDescription";
|
|
51
|
+
const p = m.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
|
|
52
|
+
"div",
|
|
53
|
+
{
|
|
54
|
+
ref: s,
|
|
55
|
+
className: l("mt-4 flex flex-col items-center gap-4", e),
|
|
56
|
+
...t
|
|
57
|
+
}
|
|
58
|
+
));
|
|
59
|
+
p.displayName = "EmptyActions";
|
|
60
|
+
const n = m.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
|
|
61
|
+
"div",
|
|
62
|
+
{
|
|
63
|
+
ref: s,
|
|
64
|
+
className: l("flex flex-col items-center gap-2", e),
|
|
65
|
+
...t
|
|
66
|
+
}
|
|
67
|
+
));
|
|
68
|
+
n.displayName = "EmptyLinks";
|
|
69
|
+
export {
|
|
70
|
+
r as Empty,
|
|
71
|
+
p as EmptyActions,
|
|
72
|
+
f as EmptyDescription,
|
|
73
|
+
i as EmptyHeader,
|
|
74
|
+
o as EmptyIcon,
|
|
75
|
+
n as EmptyLinks,
|
|
76
|
+
c as EmptyTitle
|
|
77
|
+
};
|
|
78
|
+
//# sourceMappingURL=empty.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty.js","sources":["../../../../src/components/ui/empty/empty.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Composable empty-state parts ported from `@acronis-platform/shadcn-uikit`'s\n// `empty` (packages/ui-legacy/src/components/ui/empty.tsx). Plain styled\n// elements — no Base UI primitive. No `--ui-empty-*` token tier exists yet, so\n// this design-pending v1 themes from the shared semantic text tokens:\n// • title -> text-foreground (--ui-text-on-surface-primary)\n// • description / icon -> text-muted-foreground (--ui-text-on-surface-secondary)\n// (Legacy used a single `--empty-foreground` for the whole block; this splits it\n// into an emphasized title over muted supporting content.) The legacy\n// `--empty-icon-size` (72px) becomes a fixed size. Reconcile with\n// `/figma-component Empty <url> --update` once a mockup lands.\n\nconst Empty = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex w-full max-w-[448px] flex-col items-center justify-center text-center text-muted-foreground',\n className\n )}\n {...props}\n />\n));\nEmpty.displayName = 'Empty';\n\nconst EmptyIcon = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'mb-4 flex size-[72px] items-center justify-center [&_svg]:size-full',\n className\n )}\n {...props}\n />\n));\nEmptyIcon.displayName = 'EmptyIcon';\n\nconst EmptyHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex w-full flex-col items-center gap-2 text-center',\n className\n )}\n {...props}\n />\n));\nEmptyHeader.displayName = 'EmptyHeader';\n\nconst EmptyTitle = React.forwardRef<\n HTMLHeadingElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n className={cn('text-lg font-normal leading-6 text-foreground', className)}\n {...props}\n />\n));\nEmptyTitle.displayName = 'EmptyTitle';\n\nconst EmptyDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p ref={ref} className={cn('text-sm leading-6', className)} {...props} />\n));\nEmptyDescription.displayName = 'EmptyDescription';\n\nconst EmptyActions = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('mt-4 flex flex-col items-center gap-4', className)}\n {...props}\n />\n));\nEmptyActions.displayName = 'EmptyActions';\n\nconst EmptyLinks = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col items-center gap-2', className)}\n {...props}\n />\n));\nEmptyLinks.displayName = 'EmptyLinks';\n\nexport {\n Empty,\n EmptyIcon,\n EmptyHeader,\n EmptyTitle,\n EmptyDescription,\n EmptyActions,\n EmptyLinks,\n};\n"],"names":["Empty","React","className","props","ref","jsx","cn","EmptyIcon","EmptyHeader","EmptyTitle","EmptyDescription","EmptyActions","EmptyLinks"],"mappings":";;;AAeA,MAAMA,IAAQC,EAAM,WAGlB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAM,cAAc;AAEpB,MAAMO,IAAYN,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAU,cAAc;AAExB,MAAMC,IAAcP,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAc;AAE1B,MAAMC,IAAaR,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iDAAiDJ,CAAS;AAAA,IACvE,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAW,cAAc;AAEzB,MAAMC,IAAmBT,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,KAAA,EAAE,KAAAA,GAAU,WAAWE,EAAG,qBAAqBJ,CAAS,GAAI,GAAGC,GAAO,CACxE;AACDO,EAAiB,cAAc;AAE/B,MAAMC,IAAeV,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,yCAAyCJ,CAAS;AAAA,IAC/D,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAa,cAAc;AAE3B,MAAMC,IAAaX,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,oCAAoCJ,CAAS;AAAA,IAC1D,GAAGC;AAAA,EAAA;AACN,CACD;AACDS,EAAW,cAAc;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import * as r from "react";
|
|
3
|
+
import { cn as s } from "../../../lib/utils.js";
|
|
4
|
+
const m = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", t = r.forwardRef(
|
|
5
|
+
({ className: e, ...a }, o) => /* @__PURE__ */ l("label", { ref: o, className: s(m, e), ...a })
|
|
6
|
+
);
|
|
7
|
+
t.displayName = "Label";
|
|
8
|
+
export {
|
|
9
|
+
t as Label,
|
|
10
|
+
m as labelClassName
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=label.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"label.js","sources":["../../../../src/components/ui/label/label.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `label`\n// (packages/ui-legacy/src/components/ui/label.tsx). A caption for a form\n// control — a plain `<label>`, no Base UI primitive. The text color is\n// inherited (`text-foreground` from context), so no `--ui-label-*` tier is\n// needed. `peer-disabled:*` dims the label when an associated `peer`-marked\n// control is disabled, mirroring the legacy behavior.\nconst labelClassName =\n 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70';\n\nexport type LabelProps = React.ComponentPropsWithoutRef<'label'>;\n\nconst Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n ({ className, ...props }, ref) => (\n <label ref={ref} className={cn(labelClassName, className)} {...props} />\n )\n);\nLabel.displayName = 'Label';\n\nexport { Label, labelClassName };\n"],"names":["labelClassName","Label","React","className","props","ref","jsx","cn"],"mappings":";;;AAUA,MAAMA,IACJ,8FAIIC,IAAQC,EAAM;AAAA,EAClB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC,EAAC,SAAA,EAAM,KAAAD,GAAU,WAAWE,EAAGP,GAAgBG,CAAS,GAAI,GAAGC,EAAA,CAAO;AAE1E;AACAH,EAAM,cAAc;"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import * as c from "react";
|
|
3
|
+
import { Popover as o } from "@base-ui/react/popover";
|
|
4
|
+
import { cn as f } from "../../../lib/utils.js";
|
|
5
|
+
const v = o.Root, h = o.Trigger, w = o.Portal, P = c.forwardRef(
|
|
6
|
+
({
|
|
7
|
+
className: r,
|
|
8
|
+
side: a = "bottom",
|
|
9
|
+
align: d = "center",
|
|
10
|
+
sideOffset: n = 4,
|
|
11
|
+
portal: i = !0,
|
|
12
|
+
portalContainer: s,
|
|
13
|
+
keepMounted: m,
|
|
14
|
+
...p
|
|
15
|
+
}, l) => {
|
|
16
|
+
const e = /* @__PURE__ */ t(
|
|
17
|
+
o.Positioner,
|
|
18
|
+
{
|
|
19
|
+
side: a,
|
|
20
|
+
align: d,
|
|
21
|
+
sideOffset: n,
|
|
22
|
+
className: "z-50",
|
|
23
|
+
children: /* @__PURE__ */ t(
|
|
24
|
+
o.Popup,
|
|
25
|
+
{
|
|
26
|
+
ref: l,
|
|
27
|
+
className: f(
|
|
28
|
+
"w-72 rounded-md border border-border bg-background p-4 text-foreground shadow-md outline-none",
|
|
29
|
+
"duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95",
|
|
30
|
+
"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
|
|
31
|
+
r
|
|
32
|
+
),
|
|
33
|
+
...p
|
|
34
|
+
}
|
|
35
|
+
)
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
return i ? /* @__PURE__ */ t(o.Portal, { container: s, keepMounted: m, children: e }) : e;
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
P.displayName = "PopoverContent";
|
|
42
|
+
export {
|
|
43
|
+
v as Popover,
|
|
44
|
+
P as PopoverContent,
|
|
45
|
+
w as PopoverPortal,
|
|
46
|
+
h as PopoverTrigger
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=popover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover.js","sources":["../../../../src/components/ui/popover/popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `popover`\n// (packages/ui-legacy/src/components/ui/popover.tsx). A floating panel anchored\n// to a trigger, built on the Base UI Popover primitive (positioning, focus\n// management, outside-press / Esc dismissal, ARIA come from Base UI). No\n// `--ui-popover-*` token tier exists yet, so this design-pending v1 themes from\n// the shared semantic tokens:\n// • surface -> bg-background (--ui-background-surface-primary) (legacy `bg-popover`)\n// • text -> text-foreground (--ui-text-on-surface-primary) (legacy `text-popover-foreground`)\n// • border -> border-border (--ui-border-on-surface-border) (legacy bare `border`)\n// Enter/exit animations use `tw-animate-css` keyed to Base UI's data-[open] /\n// data-[closed] / data-[side] attributes. Reconcile (and a possible\n// `--ui-popover-*` tier) with `/figma-component Popover <url> --update`.\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverPortal = PopoverPrimitive.Portal;\n\nexport interface PopoverContentProps\n extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Popup> {\n /** Which side of the trigger to render on. */\n side?: PopoverPrimitive.Positioner.Props['side'];\n /** Alignment along the chosen side. */\n align?: PopoverPrimitive.Positioner.Props['align'];\n /** Distance in px from the trigger. */\n sideOffset?: number;\n /**\n * Render inside a portal (default `true`). Set `false` for inline usage\n * (e.g. when supplying your own `PopoverPortal`).\n */\n portal?: boolean;\n /**\n * Portal container. Pass a shadow-root mount for isolated-style previews\n * (the docs demos do this via `useShadowMount`).\n */\n portalContainer?: PopoverPrimitive.Portal.Props['container'];\n /** Keep the content mounted while closed (Base UI `Portal` prop). */\n keepMounted?: PopoverPrimitive.Portal.Props['keepMounted'];\n}\n\nconst PopoverContent = React.forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Popup>,\n PopoverContentProps\n>(\n (\n {\n className,\n side = 'bottom',\n align = 'center',\n sideOffset = 4,\n portal = true,\n portalContainer,\n keepMounted,\n ...props\n },\n ref\n ) => {\n const positioner = (\n <PopoverPrimitive.Positioner\n side={side}\n align={align}\n sideOffset={sideOffset}\n className=\"z-50\"\n >\n <PopoverPrimitive.Popup\n ref={ref}\n className={cn(\n 'w-72 rounded-md border border-border bg-background p-4 text-foreground shadow-md outline-none',\n 'duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95',\n 'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',\n className\n )}\n {...props}\n />\n </PopoverPrimitive.Positioner>\n );\n\n return portal ? (\n <PopoverPrimitive.Portal container={portalContainer} keepMounted={keepMounted}>\n {positioner}\n </PopoverPrimitive.Portal>\n ) : (\n positioner\n );\n }\n);\nPopoverContent.displayName = 'PopoverContent';\n\nexport { Popover, PopoverTrigger, PopoverPortal, PopoverContent };\n"],"names":["Popover","PopoverPrimitive","PopoverTrigger","PopoverPortal","PopoverContent","React","className","side","align","sideOffset","portal","portalContainer","keepMounted","props","ref","positioner","jsx","cn"],"mappings":";;;;AAkBA,MAAMA,IAAUC,EAAiB,MAE3BC,IAAiBD,EAAiB,SAElCE,IAAgBF,EAAiB,QAwBjCG,IAAiBC,EAAM;AAAA,EAI3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAS;AAAA,IACT,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IACJ,gBAAAC;AAAA,MAACf,EAAiB;AAAA,MAAjB;AAAA,QACC,MAAAM;AAAA,QACA,OAAAC;AAAA,QACA,YAAAC;AAAA,QACA,WAAU;AAAA,QAEV,UAAA,gBAAAO;AAAA,UAACf,EAAiB;AAAA,UAAjB;AAAA,YACC,KAAAa;AAAA,YACA,WAAWG;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAX;AAAA,YAAA;AAAA,YAED,GAAGO;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAIJ,WAAOH,sBACJT,EAAiB,QAAjB,EAAwB,WAAWU,GAAiB,aAAAC,GAClD,UAAAG,EAAA,CACH,IAEAA;AAAA,EAEJ;AACF;AACAX,EAAe,cAAc;"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import * as i from "react";
|
|
3
|
+
import { Progress as r } from "@base-ui/react";
|
|
4
|
+
import { cn as n } from "../../../lib/utils.js";
|
|
5
|
+
const s = i.forwardRef(
|
|
6
|
+
({ className: o, value: a, ...l }, t) => /* @__PURE__ */ e(
|
|
7
|
+
r.Root,
|
|
8
|
+
{
|
|
9
|
+
ref: t,
|
|
10
|
+
value: a ?? null,
|
|
11
|
+
className: n(
|
|
12
|
+
"relative h-2 w-full overflow-hidden rounded-full",
|
|
13
|
+
o
|
|
14
|
+
),
|
|
15
|
+
...l,
|
|
16
|
+
children: /* @__PURE__ */ e(r.Track, { className: "relative h-full w-full overflow-hidden bg-input", children: /* @__PURE__ */ e(
|
|
17
|
+
r.Indicator,
|
|
18
|
+
{
|
|
19
|
+
className: "h-full bg-secondary transition-all data-[indeterminate]:animate-indeterminate-progress data-[indeterminate]:transition-none",
|
|
20
|
+
style: a == null ? { width: "33%" } : void 0
|
|
21
|
+
}
|
|
22
|
+
) })
|
|
23
|
+
}
|
|
24
|
+
)
|
|
25
|
+
);
|
|
26
|
+
s.displayName = "Progress";
|
|
27
|
+
export {
|
|
28
|
+
s as Progress
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=progress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"progress.js","sources":["../../../../src/components/ui/progress/progress.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Progress as ProgressPrimitive } from '@base-ui/react';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `progress`\n// (packages/ui-legacy/src/components/ui/progress.tsx). Wraps Base UI's Progress\n// primitive (Root → Track → Indicator). No `--ui-progress-*` tier yet: the\n// track uses the shared border token via `bg-input`, and the filled indicator\n// uses the brand action blue via `bg-secondary` (--ui-background-brand-secondary,\n// the same remap Spinner uses — ui-react's `primary` is the dark navy, not the\n// action color legacy's `bg-primary` meant). When `value` is `null` the bar is\n// indeterminate: Base UI sets `data-indeterminate`, which swaps the determinate\n// width transition for the sliding `indeterminate-progress` keyframe (registered\n// in src/styles/index.css).\n// Base UI types `value` as required; we make it optional so `<Progress />`\n// renders an indeterminate bar (the `value ?? null` below normalizes it).\nexport type ProgressProps = Omit<\n React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,\n 'value'\n> & {\n value?: number | null;\n};\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n ({ className, value, ...props }, ref) => (\n <ProgressPrimitive.Root\n ref={ref}\n value={value ?? null}\n className={cn(\n 'relative h-2 w-full overflow-hidden rounded-full',\n className\n )}\n {...props}\n >\n <ProgressPrimitive.Track className=\"relative h-full w-full overflow-hidden bg-input\">\n <ProgressPrimitive.Indicator\n className=\"h-full bg-secondary transition-all data-[indeterminate]:animate-indeterminate-progress data-[indeterminate]:transition-none\"\n style={value == null ? { width: '33%' } : undefined}\n />\n </ProgressPrimitive.Track>\n </ProgressPrimitive.Root>\n )\n);\nProgress.displayName = 'Progress';\n\nexport { Progress };\n"],"names":["Progress","React","className","value","props","ref","jsx","ProgressPrimitive","cn"],"mappings":";;;;AA0BA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAASC,MAC/B,gBAAAC;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,KAAAF;AAAA,MACA,OAAOF,KAAS;AAAA,MAChB,WAAWK;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEJ,UAAA,gBAAAE,EAACC,EAAkB,OAAlB,EAAwB,WAAU,mDACjC,UAAA,gBAAAD;AAAA,QAACC,EAAkB;AAAA,QAAlB;AAAA,UACC,WAAU;AAAA,UACV,OAAOJ,KAAS,OAAO,EAAE,OAAO,UAAU;AAAA,QAAA;AAAA,MAAA,EAC5C,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AACAH,EAAS,cAAc;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import * as m from "react";
|
|
3
|
+
import { Separator as e } from "@base-ui/react/separator";
|
|
4
|
+
import { cn as f } from "../../../lib/utils.js";
|
|
5
|
+
const l = m.forwardRef(({ className: o, orientation: r = "horizontal", ...a }, p) => /* @__PURE__ */ t(
|
|
6
|
+
e,
|
|
7
|
+
{
|
|
8
|
+
ref: p,
|
|
9
|
+
orientation: r,
|
|
10
|
+
className: f(
|
|
11
|
+
"shrink-0 bg-border",
|
|
12
|
+
r === "horizontal" ? "h-px w-full" : "h-full w-px",
|
|
13
|
+
o
|
|
14
|
+
),
|
|
15
|
+
...a
|
|
16
|
+
}
|
|
17
|
+
));
|
|
18
|
+
l.displayName = "Separator";
|
|
19
|
+
export {
|
|
20
|
+
l as Separator
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=separator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"separator.js","sources":["../../../../src/components/ui/separator/separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `separator`\n// (packages/ui-legacy/src/components/ui/separator.tsx). A thin divider built on\n// the Base UI Separator primitive (sets the `separator` role + aria-orientation).\n// No `--ui-separator-*` tier; the line uses the shared divider token `bg-border`\n// (--ui-border-on-surface-border), replacing the legacy `bg-primary/10` hack.\n\nconst Separator = React.forwardRef<\n React.ElementRef<typeof SeparatorPrimitive>,\n React.ComponentPropsWithoutRef<typeof SeparatorPrimitive>\n>(({ className, orientation = 'horizontal', ...props }, ref) => (\n <SeparatorPrimitive\n ref={ref}\n orientation={orientation}\n className={cn(\n 'shrink-0 bg-border',\n orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n className\n )}\n {...props}\n />\n));\nSeparator.displayName = 'Separator';\n\nexport { Separator };\n"],"names":["Separator","React","className","orientation","props","ref","jsx","SeparatorPrimitive","cn"],"mappings":";;;;AAWA,MAAMA,IAAYC,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,aAAAC,IAAc,cAAc,GAAGC,KAASC,MACtD,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,aAAAF;AAAA,IACA,WAAWK;AAAA,MACT;AAAA,MACAL,MAAgB,eAAe,gBAAgB;AAAA,MAC/CD;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAU,cAAc;"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import * as n from "react";
|
|
3
|
+
import { cva as o } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
|
|
4
|
+
import { cn as t } from "../../../lib/utils.js";
|
|
5
|
+
const d = o(
|
|
6
|
+
"inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent text-secondary",
|
|
7
|
+
{
|
|
8
|
+
variants: {
|
|
9
|
+
size: {
|
|
10
|
+
sm: "size-4",
|
|
11
|
+
md: "size-6",
|
|
12
|
+
lg: "size-8",
|
|
13
|
+
xl: "size-12"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
defaultVariants: {
|
|
17
|
+
size: "md"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
), l = n.forwardRef(
|
|
21
|
+
({ className: e, size: a, ...i }, s) => /* @__PURE__ */ r(
|
|
22
|
+
"div",
|
|
23
|
+
{
|
|
24
|
+
ref: s,
|
|
25
|
+
role: "status",
|
|
26
|
+
"aria-label": "Loading",
|
|
27
|
+
className: t(d({ size: a }), e),
|
|
28
|
+
...i,
|
|
29
|
+
children: /* @__PURE__ */ r("span", { className: "sr-only", children: "Loading…" })
|
|
30
|
+
}
|
|
31
|
+
)
|
|
32
|
+
);
|
|
33
|
+
l.displayName = "Spinner";
|
|
34
|
+
export {
|
|
35
|
+
l as Spinner,
|
|
36
|
+
d as spinnerVariants
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=spinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spinner.js","sources":["../../../../src/components/ui/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `spinner`\n// (packages/ui-legacy/src/components/ui/spinner.tsx). A CSS loading spinner — no\n// Base UI primitive. No `--ui-spinner-*` tier; the ring color defaults to the\n// brand action blue via `text-secondary` (--ui-background-brand-secondary, used\n// through `border-current`), replacing the legacy `--spinner-color` var.\n// Override the color with a `text-*` class. `size` mirrors the legacy scale.\nconst spinnerVariants = cva(\n 'inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent text-secondary',\n {\n variants: {\n size: {\n sm: 'size-4',\n md: 'size-6',\n lg: 'size-8',\n xl: 'size-12',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nexport interface SpinnerProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof spinnerVariants> {}\n\nconst Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n ({ className, size, ...props }, ref) => (\n <div\n ref={ref}\n role=\"status\"\n aria-label=\"Loading\"\n className={cn(spinnerVariants({ size }), className)}\n {...props}\n >\n <span className=\"sr-only\">Loading…</span>\n </div>\n )\n);\nSpinner.displayName = 'Spinner';\n\nexport { Spinner, spinnerVariants };\n"],"names":["spinnerVariants","cva","Spinner","React","className","size","props","ref","jsx","cn"],"mappings":";;;;AAWA,MAAMA,IAAkBC;AAAA,EACtB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAMMC,IAAUC,EAAM;AAAA,EACpB,CAAC,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,GAASC,MAC9B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAWE,EAAGT,EAAgB,EAAE,MAAAK,EAAA,CAAM,GAAGD,CAAS;AAAA,MACjD,GAAGE;AAAA,MAEJ,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,WAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAGxC;AACAN,EAAQ,cAAc;"}
|
|
@@ -38,10 +38,10 @@ const g = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
|
|
|
38
38
|
));
|
|
39
39
|
g.displayName = "TableFooter";
|
|
40
40
|
const h = t.forwardRef(
|
|
41
|
-
({ className: a, selected: e, ...o },
|
|
41
|
+
({ className: a, selected: e, ...o }, i) => /* @__PURE__ */ l(
|
|
42
42
|
"tr",
|
|
43
43
|
{
|
|
44
|
-
ref:
|
|
44
|
+
ref: i,
|
|
45
45
|
"data-state": e ? "selected" : void 0,
|
|
46
46
|
className: r(
|
|
47
47
|
"border-b border-[color:var(--ui-table-global-cell-border-color)] bg-[var(--ui-table-global-row-color-idle)] transition-colors hover:bg-[var(--ui-table-global-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-global-row-color-active)]",
|
|
@@ -57,13 +57,13 @@ function x({ direction: a }) {
|
|
|
57
57
|
return a === "asc" ? /* @__PURE__ */ l(n, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : a === "desc" ? /* @__PURE__ */ l(m, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : /* @__PURE__ */ l(f, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-inactive)]") });
|
|
58
58
|
}
|
|
59
59
|
const w = t.forwardRef(
|
|
60
|
-
({ className: a, children: e, sortable: o, sortDirection:
|
|
60
|
+
({ className: a, children: e, sortable: o, sortDirection: i = !1, onSort: s, ...c }, d) => /* @__PURE__ */ l(
|
|
61
61
|
"th",
|
|
62
62
|
{
|
|
63
63
|
ref: d,
|
|
64
|
-
"aria-sort":
|
|
64
|
+
"aria-sort": i === "asc" ? "ascending" : i === "desc" ? "descending" : o ? "none" : void 0,
|
|
65
65
|
className: r(
|
|
66
|
-
"h-10 px-[var(--ui-table-header-cell-padding-x)] text-left align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pr-0",
|
|
66
|
+
"h-10 px-[var(--ui-table-header-cell-padding-x)] text-left align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:align-middle",
|
|
67
67
|
o && "cursor-pointer transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)]",
|
|
68
68
|
a
|
|
69
69
|
),
|
|
@@ -72,11 +72,11 @@ const w = t.forwardRef(
|
|
|
72
72
|
"button",
|
|
73
73
|
{
|
|
74
74
|
type: "button",
|
|
75
|
-
onClick:
|
|
75
|
+
onClick: s,
|
|
76
76
|
className: "-mx-1 inline-flex items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
|
|
77
77
|
children: [
|
|
78
78
|
e,
|
|
79
|
-
/* @__PURE__ */ l(x, { direction:
|
|
79
|
+
/* @__PURE__ */ l(x, { direction: i })
|
|
80
80
|
]
|
|
81
81
|
}
|
|
82
82
|
) : e
|
|
@@ -89,7 +89,7 @@ const N = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
|
|
|
89
89
|
{
|
|
90
90
|
ref: o,
|
|
91
91
|
className: r(
|
|
92
|
-
"h-10 px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pr-0",
|
|
92
|
+
"h-10 px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:align-middle",
|
|
93
93
|
a
|
|
94
94
|
),
|
|
95
95
|
...e
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ArrowDownIcon,\n ArrowUpIcon,\n ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives ported from `@acronis-platform/shadcn-uikit`'s\n// `table` (packages/ui-legacy/src/components/ui/table.tsx) and informed by the\n// \"pre-release\" Table design in the shadcn-uikit Figma (node 2948-2416). Unlike\n// Card/Dialog, a `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n// • cell -> --ui-table-global-cell-{border-color,padding-x,padding-y,min-height}\n// • row -> --ui-table-global-row-color-{idle,hover,active} (active = selected)\n// • header -> --ui-table-header-{label-color,cell-color-hover,cell-padding-x,gap}\n// • sort -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n// • data -> --ui-table-data-value-color-{idle,disabled}\n// The design's row checkboxes, tags, links and the column-settings button are\n// consumer composition (use Checkbox / Tag / Link / ButtonIcon in cells). A\n// TanStack-backed `DataTable` (sorting/selection logic over these primitives) is\n// a planned follow-up, mirroring legacy's separate `data-table`. Reconcile with\n// `/figma-component Table <url> --update` once the design is ready for dev.\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n <div className=\"relative w-full overflow-auto\">\n <table\n ref={ref}\n className={cn(\n 'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n className\n )}\n {...props}\n />\n </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tbody\n ref={ref}\n className={cn('[&_tr:last-child]:border-0', className)}\n {...props}\n />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'border-t border-[color:var(--ui-table-global-cell-border-color)] font-medium [&>tr]:last:border-b-0',\n className\n )}\n {...props}\n />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n extends React.HTMLAttributes<HTMLTableRowElement> {\n /** Mark the row as selected — applies the active row token + `data-state`. */\n selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, selected, ...props }, ref) => (\n <tr\n ref={ref}\n data-state={selected ? 'selected' : undefined}\n className={cn(\n 'border-b border-[color:var(--ui-table-global-cell-border-color)] bg-[var(--ui-table-global-row-color-idle)] transition-colors hover:bg-[var(--ui-table-global-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-global-row-color-active)]',\n className\n )}\n {...props}\n />\n )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n extends React.ThHTMLAttributes<HTMLTableCellElement> {\n /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n sortable?: boolean;\n /** Current sort direction for this column (`false` = sortable but unsorted). */\n sortDirection?: SortDirection;\n /** Invoked when the user activates a sortable header (click / Enter / Space). */\n onSort?: () => void;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n if (direction === 'asc') {\n return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n }\n if (direction === 'desc') {\n return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n }\n return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n ({ className, children, sortable, sortDirection = false, onSort, ...props }, ref) => (\n <th\n ref={ref}\n aria-sort={\n sortDirection === 'asc'\n ? 'ascending'\n : sortDirection === 'desc'\n ? 'descending'\n : sortable\n ? 'none'\n : undefined\n }\n className={cn(\n 'h-10 px-[var(--ui-table-header-cell-padding-x)] text-left align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pr-0',\n sortable &&\n 'cursor-pointer transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)]',\n className\n )}\n {...props}\n >\n {sortable ? (\n <button\n type=\"button\"\n onClick={onSort}\n className=\"-mx-1 inline-flex items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]\"\n >\n {children}\n <SortIcon direction={sortDirection} />\n </button>\n ) : (\n children\n )}\n </th>\n )\n);\nTableHead.displayName = 'TableHead';\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <td\n ref={ref}\n className={cn(\n 'h-10 px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pr-0',\n className\n )}\n {...props}\n />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn('mt-4 text-sm text-muted-foreground', className)}\n {...props}\n />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","jsxs","TableCell","TableCaption"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ArrowDownIcon,\n ArrowUpIcon,\n ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives ported from `@acronis-platform/shadcn-uikit`'s\n// `table` (packages/ui-legacy/src/components/ui/table.tsx) and informed by the\n// \"pre-release\" Table design in the shadcn-uikit Figma (node 2948-2416). Unlike\n// Card/Dialog, a `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n// • cell -> --ui-table-global-cell-{border-color,padding-x,padding-y,min-height}\n// • row -> --ui-table-global-row-color-{idle,hover,active} (active = selected)\n// • header -> --ui-table-header-{label-color,cell-color-hover,cell-padding-x,gap}\n// • sort -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n// • data -> --ui-table-data-value-color-{idle,disabled}\n// The design's row checkboxes, tags, links and the column-settings button are\n// consumer composition (use Checkbox / Tag / Link / ButtonIcon in cells). A\n// TanStack-backed `DataTable` (sorting/selection logic over these primitives) is\n// a planned follow-up, mirroring legacy's separate `data-table`. Reconcile with\n// `/figma-component Table <url> --update` once the design is ready for dev.\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n <div className=\"relative w-full overflow-auto\">\n <table\n ref={ref}\n className={cn(\n 'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n className\n )}\n {...props}\n />\n </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tbody\n ref={ref}\n className={cn('[&_tr:last-child]:border-0', className)}\n {...props}\n />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'border-t border-[color:var(--ui-table-global-cell-border-color)] font-medium [&>tr]:last:border-b-0',\n className\n )}\n {...props}\n />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n extends React.HTMLAttributes<HTMLTableRowElement> {\n /** Mark the row as selected — applies the active row token + `data-state`. */\n selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, selected, ...props }, ref) => (\n <tr\n ref={ref}\n data-state={selected ? 'selected' : undefined}\n className={cn(\n 'border-b border-[color:var(--ui-table-global-cell-border-color)] bg-[var(--ui-table-global-row-color-idle)] transition-colors hover:bg-[var(--ui-table-global-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-global-row-color-active)]',\n className\n )}\n {...props}\n />\n )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n extends React.ThHTMLAttributes<HTMLTableCellElement> {\n /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n sortable?: boolean;\n /** Current sort direction for this column (`false` = sortable but unsorted). */\n sortDirection?: SortDirection;\n /** Invoked when the user activates a sortable header (click / Enter / Space). */\n onSort?: () => void;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n if (direction === 'asc') {\n return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n }\n if (direction === 'desc') {\n return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n }\n return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n ({ className, children, sortable, sortDirection = false, onSort, ...props }, ref) => (\n <th\n ref={ref}\n aria-sort={\n sortDirection === 'asc'\n ? 'ascending'\n : sortDirection === 'desc'\n ? 'descending'\n : sortable\n ? 'none'\n : undefined\n }\n className={cn(\n 'h-10 px-[var(--ui-table-header-cell-padding-x)] text-left align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:align-middle',\n sortable &&\n 'cursor-pointer transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)]',\n className\n )}\n {...props}\n >\n {sortable ? (\n <button\n type=\"button\"\n onClick={onSort}\n className=\"-mx-1 inline-flex items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]\"\n >\n {children}\n <SortIcon direction={sortDirection} />\n </button>\n ) : (\n children\n )}\n </th>\n )\n);\nTableHead.displayName = 'TableHead';\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <td\n ref={ref}\n className={cn(\n 'h-10 px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:align-middle',\n className\n )}\n {...props}\n />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn('mt-4 text-sm text-muted-foreground', className)}\n {...props}\n />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","jsxs","TableCell","TableCaption"],"mappings":"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"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import * as o from "react";
|
|
3
|
+
import { Tabs as a } from "@base-ui/react/tabs";
|
|
4
|
+
import { cn as t } from "../../../lib/utils.js";
|
|
5
|
+
const b = a.Root, n = o.forwardRef(({ className: e, ...s }, r) => /* @__PURE__ */ i(
|
|
6
|
+
a.List,
|
|
7
|
+
{
|
|
8
|
+
ref: r,
|
|
9
|
+
className: t("inline-flex items-stretch rounded-md", e),
|
|
10
|
+
...s
|
|
11
|
+
}
|
|
12
|
+
));
|
|
13
|
+
n.displayName = "TabsList";
|
|
14
|
+
const d = o.forwardRef(({ className: e, ...s }, r) => /* @__PURE__ */ i(
|
|
15
|
+
a.Tab,
|
|
16
|
+
{
|
|
17
|
+
ref: r,
|
|
18
|
+
className: t(
|
|
19
|
+
"-mr-px inline-flex flex-1 items-center justify-center whitespace-nowrap border border-secondary px-2 py-1 text-sm font-semibold text-secondary transition-colors first:rounded-l-md last:-mr-0 last:rounded-r-md outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-secondary data-[active]:text-primary-foreground",
|
|
20
|
+
e
|
|
21
|
+
),
|
|
22
|
+
...s
|
|
23
|
+
}
|
|
24
|
+
));
|
|
25
|
+
d.displayName = "TabsTrigger";
|
|
26
|
+
const m = o.forwardRef(({ className: e, ...s }, r) => /* @__PURE__ */ i(
|
|
27
|
+
a.Panel,
|
|
28
|
+
{
|
|
29
|
+
ref: r,
|
|
30
|
+
className: t(
|
|
31
|
+
"mt-2 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
|
|
32
|
+
e
|
|
33
|
+
),
|
|
34
|
+
...s
|
|
35
|
+
}
|
|
36
|
+
));
|
|
37
|
+
m.displayName = "TabsContent";
|
|
38
|
+
export {
|
|
39
|
+
b as Tabs,
|
|
40
|
+
m as TabsContent,
|
|
41
|
+
n as TabsList,
|
|
42
|
+
d as TabsTrigger
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.js","sources":["../../../../src/components/ui/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `tabs`\n// (packages/ui-legacy/src/components/ui/tabs.tsx). A bordered segmented-control\n// tab group built on the Base UI Tabs primitive (keyboard nav, roving focus,\n// ARIA come from Base UI). No `--ui-tabs-*` token tier exists yet, so this\n// design-pending v1 themes from the shared semantic tokens:\n// • trigger idle -> border-secondary + text-secondary (brand outline segment)\n// • trigger active -> bg-secondary + text-primary-foreground (data-[active])\n// — pure-white label (glyph-on-brand-primary), like the default Button;\n// NOT text-secondary-foreground, which is a dimmed 60% white.\n// • focus ring -> var(--ui-focus-primary)\n// NB: the brand action blue is the `secondary` bridge (--ui-background-brand-\n// secondary, the same blue Button's primary uses); `primary` bridges to the\n// dark navy --ui-background-brand-primary, so it is NOT used here.\n// The legacy active treatment was a `bg-primary/10` tint; the opacity hack is\n// dropped for a token-pure filled segment. Reconcile (and a possible\n// `--ui-tabs-*` tier / underline-indicator variant) with\n// `/figma-component Tabs <url> --update` once a mockup lands.\n\nconst Tabs = TabsPrimitive.Root;\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.List\n ref={ref}\n className={cn('inline-flex items-stretch rounded-md', className)}\n {...props}\n />\n));\nTabsList.displayName = 'TabsList';\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Tab>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Tab>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Tab\n ref={ref}\n className={cn(\n '-mr-px inline-flex flex-1 items-center justify-center whitespace-nowrap border border-secondary px-2 py-1 text-sm font-semibold text-secondary transition-colors first:rounded-l-md last:-mr-0 last:rounded-r-md outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-secondary data-[active]:text-primary-foreground',\n className\n )}\n {...props}\n />\n));\nTabsTrigger.displayName = 'TabsTrigger';\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Panel>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Panel>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Panel\n ref={ref}\n className={cn(\n 'mt-2 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]',\n className\n )}\n {...props}\n />\n));\nTabsContent.displayName = 'TabsContent';\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"names":["Tabs","TabsPrimitive","TabsList","React","className","props","ref","jsx","cn","TabsTrigger","TabsContent"],"mappings":";;;;AAuBA,MAAMA,IAAOC,EAAc,MAErBC,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAc;AAAA,EAAd;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAG,wCAAwCJ,CAAS;AAAA,IAC9D,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAS,cAAc;AAEvB,MAAMO,IAAcN,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAc;AAAA,EAAd;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAY,cAAc;AAE1B,MAAMC,IAAcP,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAc;AAAA,EAAd;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAc;"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { jsx as s, jsxs as l } from "react/jsx-runtime";
|
|
2
|
+
import { Toast as o } from "@base-ui/react/toast";
|
|
3
|
+
import { TimesIcon as d, CircleTimesIcon as m, TriangleWarningIcon as u, CircleInfoIcon as f, CircleCheckIcon as g } from "@acronis-platform/icons-react/stroke-mono";
|
|
4
|
+
import { cn as x } from "../../../lib/utils.js";
|
|
5
|
+
import { Spinner as p } from "../spinner/spinner.js";
|
|
6
|
+
const r = o.createToastManager();
|
|
7
|
+
function n(t, e, a = {}) {
|
|
8
|
+
const { action: i, ...c } = a;
|
|
9
|
+
return r.add({
|
|
10
|
+
title: t,
|
|
11
|
+
type: e,
|
|
12
|
+
actionProps: i ? { children: i.label, onClick: i.onClick } : void 0,
|
|
13
|
+
...c
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
const C = Object.assign(
|
|
17
|
+
(t, e) => n(t, void 0, e),
|
|
18
|
+
{
|
|
19
|
+
success: (t, e) => n(t, "success", e),
|
|
20
|
+
info: (t, e) => n(t, "info", e),
|
|
21
|
+
warning: (t, e) => n(t, "warning", e),
|
|
22
|
+
error: (t, e) => n(t, "error", e),
|
|
23
|
+
loading: (t, e) => n(t, "loading", { timeout: 0, ...e }),
|
|
24
|
+
dismiss: (t) => r.close(t),
|
|
25
|
+
promise: r.promise
|
|
26
|
+
}
|
|
27
|
+
), v = {
|
|
28
|
+
success: /* @__PURE__ */ s(g, { className: "size-4 text-[var(--ui-text-on-status-success)]" }),
|
|
29
|
+
info: /* @__PURE__ */ s(f, { className: "size-4 text-[var(--ui-text-on-status-info)]" }),
|
|
30
|
+
warning: /* @__PURE__ */ s(u, { className: "size-4 text-[var(--ui-text-on-status-warning)]" }),
|
|
31
|
+
error: /* @__PURE__ */ s(m, { className: "size-4 text-[var(--ui-text-on-status-danger)]" }),
|
|
32
|
+
loading: /* @__PURE__ */ s(p, { size: "sm", className: "size-4" })
|
|
33
|
+
};
|
|
34
|
+
function h() {
|
|
35
|
+
const { toasts: t } = o.useToastManager();
|
|
36
|
+
return t.map((e) => {
|
|
37
|
+
const a = v[e.type];
|
|
38
|
+
return /* @__PURE__ */ l(
|
|
39
|
+
o.Root,
|
|
40
|
+
{
|
|
41
|
+
toast: e,
|
|
42
|
+
className: x(
|
|
43
|
+
"relative flex w-full items-start gap-3 rounded border border-border bg-background p-4 shadow-md",
|
|
44
|
+
"transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
|
|
45
|
+
"data-[starting-style]:translate-x-4 data-[ending-style]:translate-x-4"
|
|
46
|
+
),
|
|
47
|
+
children: [
|
|
48
|
+
a ? /* @__PURE__ */ s("span", { className: "mt-0.5 shrink-0", children: a }) : null,
|
|
49
|
+
/* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
|
|
50
|
+
/* @__PURE__ */ s(o.Title, { className: "text-sm font-semibold leading-5 text-foreground" }),
|
|
51
|
+
/* @__PURE__ */ s(o.Description, { className: "text-sm leading-5 text-muted-foreground" }),
|
|
52
|
+
e.actionProps ? /* @__PURE__ */ s(o.Action, { className: "mt-1 self-start text-sm font-semibold text-secondary hover:underline" }) : null
|
|
53
|
+
] }),
|
|
54
|
+
/* @__PURE__ */ s(
|
|
55
|
+
o.Close,
|
|
56
|
+
{
|
|
57
|
+
"aria-label": "Close",
|
|
58
|
+
className: "shrink-0 rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-focus-primary)]",
|
|
59
|
+
children: /* @__PURE__ */ s(d, { className: "size-4" })
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
]
|
|
63
|
+
},
|
|
64
|
+
e.id
|
|
65
|
+
);
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
function z({ timeout: t, limit: e, portalContainer: a }) {
|
|
69
|
+
return /* @__PURE__ */ s(
|
|
70
|
+
o.Provider,
|
|
71
|
+
{
|
|
72
|
+
toastManager: r,
|
|
73
|
+
timeout: t,
|
|
74
|
+
limit: e,
|
|
75
|
+
children: /* @__PURE__ */ s(o.Portal, { container: a, children: /* @__PURE__ */ s(o.Viewport, { className: "fixed bottom-4 right-4 z-[100] flex w-[384px] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none", children: /* @__PURE__ */ s(h, {}) }) })
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
export {
|
|
80
|
+
z as Toaster,
|
|
81
|
+
C as toast
|
|
82
|
+
};
|
|
83
|
+
//# sourceMappingURL=toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toast.js","sources":["../../../../src/components/ui/toast/toast.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast';\nimport {\n CircleCheckIcon,\n CircleInfoIcon,\n CircleTimesIcon,\n TimesIcon,\n TriangleWarningIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Spinner } from '../spinner';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `sonner`\n// (packages/ui-legacy/src/components/ui/sonner.tsx), which wrapped the Sonner\n// library. Rebuilt on the Base UI toast primitive (the ui-react convention), so\n// no Sonner dependency. The contract is preserved: drop a single `<Toaster />`\n// at the app root and call the imperative `toast(...)` / `toast.success(...)`\n// API from anywhere. No `--ui-toast-*` tier yet, so this design-pending v1 is a\n// neutral surface (bg-background + border-border + shadow) with the status\n// conveyed by a colored leading icon (`--ui-text-on-status-*`); per-status\n// surface tinting is design-pending. Auto-dismiss after `timeout` (default\n// 5000ms); `loading` toasts persist until updated or dismissed.\n\n// A module-level manager so `toast(...)` works outside React (like Sonner's\n// `toast`). `<Toaster />` subscribes this manager to its provider.\nconst toastManager = ToastPrimitive.createToastManager();\n\nexport type ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading';\n\nexport interface ToastOptions {\n /** Secondary line under the title. */\n description?: React.ReactNode;\n /** Auto-dismiss delay in ms; `0` keeps the toast until dismissed. */\n timeout?: number;\n /** A single inline action button (e.g. Undo). */\n action?: { label: React.ReactNode; onClick?: () => void };\n /** Stable id — re-adding with the same id updates the toast in place. */\n id?: string;\n}\n\nfunction add(title: React.ReactNode, type?: ToastType, options: ToastOptions = {}) {\n const { action, ...rest } = options;\n return toastManager.add({\n title,\n type,\n actionProps: action\n ? { children: action.label, onClick: action.onClick }\n : undefined,\n ...rest,\n });\n}\n\n/**\n * Imperative toast API. `toast(title, options)` shows a neutral toast;\n * `toast.success` / `info` / `warning` / `error` / `loading` set the variant.\n * `toast.dismiss(id?)` closes one (or all) and `toast.promise` ties a toast to a\n * promise's lifecycle.\n */\nconst toast = Object.assign(\n (title: React.ReactNode, options?: ToastOptions) => add(title, undefined, options),\n {\n success: (title: React.ReactNode, options?: ToastOptions) =>\n add(title, 'success', options),\n info: (title: React.ReactNode, options?: ToastOptions) =>\n add(title, 'info', options),\n warning: (title: React.ReactNode, options?: ToastOptions) =>\n add(title, 'warning', options),\n error: (title: React.ReactNode, options?: ToastOptions) =>\n add(title, 'error', options),\n loading: (title: React.ReactNode, options?: ToastOptions) =>\n add(title, 'loading', { timeout: 0, ...options }),\n dismiss: (id?: string) => toastManager.close(id),\n promise: toastManager.promise,\n }\n);\n\nconst ICON_BY_TYPE: Record<ToastType, React.ReactNode> = {\n success: (\n <CircleCheckIcon className=\"size-4 text-[var(--ui-text-on-status-success)]\" />\n ),\n info: (\n <CircleInfoIcon className=\"size-4 text-[var(--ui-text-on-status-info)]\" />\n ),\n warning: (\n <TriangleWarningIcon className=\"size-4 text-[var(--ui-text-on-status-warning)]\" />\n ),\n error: (\n <CircleTimesIcon className=\"size-4 text-[var(--ui-text-on-status-danger)]\" />\n ),\n loading: <Spinner size=\"sm\" className=\"size-4\" />,\n};\n\nfunction ToastList() {\n const { toasts } = ToastPrimitive.useToastManager();\n return toasts.map((item) => {\n const icon = ICON_BY_TYPE[item.type as ToastType];\n return (\n <ToastPrimitive.Root\n key={item.id}\n toast={item}\n className={cn(\n 'relative flex w-full items-start gap-3 rounded border border-border bg-background p-4 shadow-md',\n 'transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',\n 'data-[starting-style]:translate-x-4 data-[ending-style]:translate-x-4'\n )}\n >\n {icon ? <span className=\"mt-0.5 shrink-0\">{icon}</span> : null}\n <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n <ToastPrimitive.Title className=\"text-sm font-semibold leading-5 text-foreground\" />\n <ToastPrimitive.Description className=\"text-sm leading-5 text-muted-foreground\" />\n {item.actionProps ? (\n <ToastPrimitive.Action className=\"mt-1 self-start text-sm font-semibold text-secondary hover:underline\" />\n ) : null}\n </div>\n <ToastPrimitive.Close\n aria-label=\"Close\"\n className=\"shrink-0 rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-focus-primary)]\"\n >\n <TimesIcon className=\"size-4\" />\n </ToastPrimitive.Close>\n </ToastPrimitive.Root>\n );\n });\n}\n\nexport interface ToasterProps {\n /** Default auto-dismiss delay in ms for toasts that don't set one. */\n timeout?: number;\n /** Max toasts shown at once; the oldest is dropped past the limit. */\n limit?: number;\n /**\n * Portal container for the toast stack. Pass a shadow-root mount for\n * isolated-style previews (the docs demos do this via `useShadowMount`).\n */\n portalContainer?: ToastPrimitive.Portal.Props['container'];\n}\n\n/**\n * The toast region. Render once near the app root; it portals a bottom-right\n * stack and renders every queued toast. Trigger toasts with the `toast` API.\n */\nfunction Toaster({ timeout, limit, portalContainer }: ToasterProps) {\n return (\n <ToastPrimitive.Provider\n toastManager={toastManager}\n timeout={timeout}\n limit={limit}\n >\n <ToastPrimitive.Portal container={portalContainer}>\n <ToastPrimitive.Viewport className=\"fixed bottom-4 right-4 z-[100] flex w-[384px] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none\">\n <ToastList />\n </ToastPrimitive.Viewport>\n </ToastPrimitive.Portal>\n </ToastPrimitive.Provider>\n );\n}\n\nexport { toast, Toaster };\n"],"names":["toastManager","ToastPrimitive","add","title","type","options","action","rest","toast","id","ICON_BY_TYPE","jsx","CircleCheckIcon","CircleInfoIcon","TriangleWarningIcon","CircleTimesIcon","Spinner","ToastList","toasts","item","icon","jsxs","cn","TimesIcon","Toaster","timeout","limit","portalContainer"],"mappings":"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"}
|