@acronis-platform/ui-react 0.35.1 → 0.38.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/card/card.js +92 -0
- package/dist/components/ui/card/card.js.map +1 -0
- package/dist/components/ui/chip/chip.js +70 -0
- package/dist/components/ui/chip/chip.js.map +1 -0
- package/dist/components/ui/dialog/dialog.js +140 -0
- package/dist/components/ui/dialog/dialog.js.map +1 -0
- package/dist/components/ui/input/input.js +2 -2
- package/dist/components/ui/input/input.js.map +1 -1
- package/dist/components/ui/input-search/input-search.js +4 -4
- package/dist/components/ui/input-search/input-search.js.map +1 -1
- package/dist/components/ui/input-text/input-text.js +1 -1
- package/dist/components/ui/input-text/input-text.js.map +1 -1
- package/dist/components/ui/search/search.js +2 -2
- package/dist/components/ui/search/search.js.map +1 -1
- package/dist/components/ui/table/table.js +118 -0
- package/dist/components/ui/table/table.js.map +1 -0
- package/dist/index.js +137 -105
- package/dist/index.js.map +1 -1
- package/dist/react.js +137 -105
- package/dist/react.js.map +1 -1
- package/dist/src/components/ui/card/card.d.ts +17 -0
- package/dist/src/components/ui/card/index.d.ts +1 -0
- package/dist/src/components/ui/chip/chip.d.ts +20 -0
- package/dist/src/components/ui/chip/index.d.ts +1 -0
- package/dist/src/components/ui/dialog/dialog.d.ts +39 -0
- package/dist/src/components/ui/dialog/dialog.docs.d.ts +24 -0
- package/dist/src/components/ui/dialog/index.d.ts +1 -0
- package/dist/src/components/ui/input/index.d.ts +1 -1
- package/dist/src/components/ui/input/input.d.ts +3 -3
- package/dist/src/components/ui/input-search/input-search.d.ts +2 -2
- package/dist/src/components/ui/search/index.d.ts +1 -1
- package/dist/src/components/ui/search/search.d.ts +3 -3
- package/dist/src/components/ui/sidebar-primary/sidebar-primary.d.ts +1 -1
- package/dist/src/components/ui/sidebar-secondary/sidebar-secondary.d.ts +1 -1
- package/dist/src/components/ui/table/index.d.ts +1 -0
- package/dist/src/components/ui/table/table.d.ts +23 -0
- package/dist/src/index.d.ts +7 -2
- package/dist/ui-react.css +1 -1
- package/package.json +4 -3
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import * as o from "react";
|
|
2
|
+
import { mergeProps as t } from "@base-ui/react/merge-props";
|
|
3
|
+
import { useRender as s } from "@base-ui/react/use-render";
|
|
4
|
+
import { cn as p } from "../../../lib/utils.js";
|
|
5
|
+
const m = o.forwardRef(
|
|
6
|
+
({ className: e, render: a, ...r }, d) => s({
|
|
7
|
+
render: a,
|
|
8
|
+
ref: d,
|
|
9
|
+
defaultTagName: "div",
|
|
10
|
+
props: t(
|
|
11
|
+
{
|
|
12
|
+
className: p(
|
|
13
|
+
"rounded-lg border border-border bg-background text-foreground shadow-xs",
|
|
14
|
+
e
|
|
15
|
+
)
|
|
16
|
+
},
|
|
17
|
+
r
|
|
18
|
+
)
|
|
19
|
+
})
|
|
20
|
+
);
|
|
21
|
+
m.displayName = "Card";
|
|
22
|
+
const f = o.forwardRef(
|
|
23
|
+
({ className: e, render: a, ...r }, d) => s({
|
|
24
|
+
render: a,
|
|
25
|
+
ref: d,
|
|
26
|
+
defaultTagName: "div",
|
|
27
|
+
props: t(
|
|
28
|
+
{ className: p("flex flex-col space-y-1.5 p-6", e) },
|
|
29
|
+
r
|
|
30
|
+
)
|
|
31
|
+
})
|
|
32
|
+
);
|
|
33
|
+
f.displayName = "CardHeader";
|
|
34
|
+
const l = o.forwardRef(
|
|
35
|
+
({ className: e, render: a, ...r }, d) => s({
|
|
36
|
+
render: a,
|
|
37
|
+
ref: d,
|
|
38
|
+
defaultTagName: "div",
|
|
39
|
+
props: t(
|
|
40
|
+
{
|
|
41
|
+
className: p(
|
|
42
|
+
"text-2xl font-semibold leading-none tracking-tight",
|
|
43
|
+
e
|
|
44
|
+
)
|
|
45
|
+
},
|
|
46
|
+
r
|
|
47
|
+
)
|
|
48
|
+
})
|
|
49
|
+
);
|
|
50
|
+
l.displayName = "CardTitle";
|
|
51
|
+
const i = o.forwardRef(
|
|
52
|
+
({ className: e, render: a, ...r }, d) => s({
|
|
53
|
+
render: a,
|
|
54
|
+
ref: d,
|
|
55
|
+
defaultTagName: "div",
|
|
56
|
+
props: t(
|
|
57
|
+
{ className: p("text-sm text-muted-foreground", e) },
|
|
58
|
+
r
|
|
59
|
+
)
|
|
60
|
+
})
|
|
61
|
+
);
|
|
62
|
+
i.displayName = "CardDescription";
|
|
63
|
+
const n = o.forwardRef(
|
|
64
|
+
({ className: e, render: a, ...r }, d) => s({
|
|
65
|
+
render: a,
|
|
66
|
+
ref: d,
|
|
67
|
+
defaultTagName: "div",
|
|
68
|
+
props: t({ className: p("p-6 pt-0", e) }, r)
|
|
69
|
+
})
|
|
70
|
+
);
|
|
71
|
+
n.displayName = "CardContent";
|
|
72
|
+
const c = o.forwardRef(
|
|
73
|
+
({ className: e, render: a, ...r }, d) => s({
|
|
74
|
+
render: a,
|
|
75
|
+
ref: d,
|
|
76
|
+
defaultTagName: "div",
|
|
77
|
+
props: t(
|
|
78
|
+
{ className: p("flex items-center p-6 pt-0", e) },
|
|
79
|
+
r
|
|
80
|
+
)
|
|
81
|
+
})
|
|
82
|
+
);
|
|
83
|
+
c.displayName = "CardFooter";
|
|
84
|
+
export {
|
|
85
|
+
m as Card,
|
|
86
|
+
n as CardContent,
|
|
87
|
+
i as CardDescription,
|
|
88
|
+
c as CardFooter,
|
|
89
|
+
f as CardHeader,
|
|
90
|
+
l as CardTitle
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.js","sources":["../../../../src/components/ui/card/card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `card`\n// (packages/ui-legacy/src/components/ui/card.tsx). No \"ready for dev\" Figma node\n// exists yet, so this is a design-pending v1: there is no `--ui-card-*` token\n// tier, so the surface/text/border colors resolve to the shared **semantic**\n// tokens via the bridged Tailwind names in `src/styles/index.css`:\n// • bg-background → --ui-background-surface-primary (legacy `bg-card`)\n// • text-foreground → --ui-text-on-surface-primary (legacy `text-card-foreground`)\n// • border-border → --ui-border-on-surface-border (legacy bare `border`)\n// • text-muted-foreground → --ui-text-on-surface-secondary (description)\n// Geometry (radius, padding, gaps, shadow) is carried over verbatim from legacy.\n// Reconcile against the real design with `/figma-component Card <url> --update`\n// once a mockup lands — at which point an elevated-surface token may replace the\n// primary surface used for the card background.\n\ninterface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Replace the rendered `<div>` with another element or component (Base UI\n * composition) — e.g. render `CardTitle` as a heading. The component's props\n * and class names are merged onto it.\n */\n render?: useRender.RenderProp;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardPartProps>(\n ({ className, render, ...props }, ref) =>\n useRender({\n render,\n ref,\n defaultTagName: 'div',\n props: mergeProps<'div'>(\n {\n className: cn(\n 'rounded-lg border border-border bg-background text-foreground shadow-xs',\n className\n ),\n },\n props\n ),\n })\n);\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardPartProps>(\n ({ className, render, ...props }, ref) =>\n useRender({\n render,\n ref,\n defaultTagName: 'div',\n props: mergeProps<'div'>(\n { className: cn('flex flex-col space-y-1.5 p-6', className) },\n props\n ),\n })\n);\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<HTMLDivElement, CardPartProps>(\n ({ className, render, ...props }, ref) =>\n useRender({\n render,\n ref,\n defaultTagName: 'div',\n props: mergeProps<'div'>(\n {\n className: cn(\n 'text-2xl font-semibold leading-none tracking-tight',\n className\n ),\n },\n props\n ),\n })\n);\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<HTMLDivElement, CardPartProps>(\n ({ className, render, ...props }, ref) =>\n useRender({\n render,\n ref,\n defaultTagName: 'div',\n props: mergeProps<'div'>(\n { className: cn('text-sm text-muted-foreground', className) },\n props\n ),\n })\n);\nCardDescription.displayName = 'CardDescription';\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardPartProps>(\n ({ className, render, ...props }, ref) =>\n useRender({\n render,\n ref,\n defaultTagName: 'div',\n props: mergeProps<'div'>({ className: cn('p-6 pt-0', className) }, props),\n })\n);\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardPartProps>(\n ({ className, render, ...props }, ref) =>\n useRender({\n render,\n ref,\n defaultTagName: 'div',\n props: mergeProps<'div'>(\n { className: cn('flex items-center p-6 pt-0', className) },\n props\n ),\n })\n);\nCardFooter.displayName = 'CardFooter';\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardDescription,\n CardContent,\n type CardPartProps,\n};\n"],"names":["Card","React","className","render","props","ref","useRender","mergeProps","cn","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":";;;;AA6BA,MAAMA,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QAAA;AAAA,MACF;AAAA,MAEFE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAJ,EAAK,cAAc;AAEnB,MAAMS,IAAaR,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,iCAAiCN,CAAS,EAAA;AAAA,MAC1DE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAK,EAAW,cAAc;AAEzB,MAAMC,IAAYT,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QAAA;AAAA,MACF;AAAA,MAEFE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAM,EAAU,cAAc;AAExB,MAAMC,IAAkBV,EAAM;AAAA,EAC5B,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,iCAAiCN,CAAS,EAAA;AAAA,MAC1DE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAO,EAAgB,cAAc;AAE9B,MAAMC,IAAcX,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE,EAAkB,EAAE,WAAWC,EAAG,YAAYN,CAAS,EAAA,GAAKE,CAAK;AAAA,EAAA,CACzE;AACL;AACAQ,EAAY,cAAc;AAE1B,MAAMC,IAAaZ,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,8BAA8BN,CAAS,EAAA;AAAA,MACvDE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAS,EAAW,cAAc;"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { jsxs as d, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import * as h from "react";
|
|
3
|
+
import { TimesIcon as b } from "@acronis-platform/icons-react/stroke-mono";
|
|
4
|
+
import { cva as m } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
|
|
5
|
+
import { cn as f } from "../../../lib/utils.js";
|
|
6
|
+
const g = m(
|
|
7
|
+
"inline-flex h-[var(--ui-chips-container-height)] min-w-[var(--ui-chips-container-width-min)] items-center justify-center gap-[var(--ui-chips-container-gap)] rounded-[var(--ui-chips-border-radius)] border-[length:var(--ui-chips-border-width)] border-solid border-[var(--ui-chips-border-color-idle)] bg-[var(--ui-chips-container-color-idle)] px-[var(--ui-chips-container-padding-x)] text-sm leading-6 text-[var(--ui-chips-label-color)] hover:border-[var(--ui-chips-border-color-hover)] hover:bg-[var(--ui-chips-container-color-hover)] [&_svg]:size-[var(--ui-chips-icon-size)] [&_svg]:shrink-0 [&_svg]:text-[var(--ui-chips-icon-color)]",
|
|
8
|
+
{
|
|
9
|
+
variants: {
|
|
10
|
+
variant: {
|
|
11
|
+
removable: "focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chips-border-color-active)] active:bg-[var(--ui-chips-container-color-active)]",
|
|
12
|
+
selectable: "cursor-pointer focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chips-border-color-active)] data-[selected=true]:bg-[var(--ui-chips-container-color-active)]"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
defaultVariants: {
|
|
16
|
+
variant: "removable"
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
), x = h.forwardRef(
|
|
20
|
+
({
|
|
21
|
+
className: t,
|
|
22
|
+
variant: i = "removable",
|
|
23
|
+
icon: s,
|
|
24
|
+
selected: a,
|
|
25
|
+
onRemove: n,
|
|
26
|
+
removeLabel: l = "Remove",
|
|
27
|
+
children: u,
|
|
28
|
+
onKeyDown: e,
|
|
29
|
+
...v
|
|
30
|
+
}, p) => {
|
|
31
|
+
const c = i === "selectable";
|
|
32
|
+
return /* @__PURE__ */ d(
|
|
33
|
+
"div",
|
|
34
|
+
{
|
|
35
|
+
ref: p,
|
|
36
|
+
className: f(g({ variant: i }), t),
|
|
37
|
+
onKeyDown: (r) => {
|
|
38
|
+
c && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click()), e == null || e(r);
|
|
39
|
+
},
|
|
40
|
+
...c ? {
|
|
41
|
+
role: "button",
|
|
42
|
+
tabIndex: 0,
|
|
43
|
+
"aria-pressed": !!a,
|
|
44
|
+
"data-selected": a ? "true" : void 0
|
|
45
|
+
} : {},
|
|
46
|
+
...v,
|
|
47
|
+
children: [
|
|
48
|
+
s,
|
|
49
|
+
/* @__PURE__ */ o("span", { className: "min-w-0 truncate", children: u }),
|
|
50
|
+
i === "removable" && /* @__PURE__ */ o(
|
|
51
|
+
"button",
|
|
52
|
+
{
|
|
53
|
+
type: "button",
|
|
54
|
+
"aria-label": l,
|
|
55
|
+
onClick: n,
|
|
56
|
+
className: "-mr-1 flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-none",
|
|
57
|
+
children: /* @__PURE__ */ o(b, {})
|
|
58
|
+
}
|
|
59
|
+
)
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
x.displayName = "Chip";
|
|
66
|
+
export {
|
|
67
|
+
x as Chip,
|
|
68
|
+
g as chipVariants
|
|
69
|
+
};
|
|
70
|
+
//# sourceMappingURL=chip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chip.js","sources":["../../../../src/components/ui/chip/chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact, interactive label. `variant` mirrors the Figma \"Chip\" `type`:\n// `removable` carries a trailing × (remove) button; `selectable` toggles a\n// selected state. The container fill/border/label/icon all wire to the dedicated\n// `--ui-chips-*` tier from @acronis-platform/tokens-pd; geometry (height, gap,\n// padding, min-width, radius, border width, icon size) is tokenized too.\n// The Figma `state` enum (idle / hover / active / focused) maps to interaction\n// states, not props: `hover:` → the hover tokens, `:focus`/`focus-visible` → the\n// 3px `--ui-focus-primary` ring, and the `active` look is the pressed state for\n// `removable` (`active:`) and the selected state for `selectable`\n// (`data-[selected]`, driven by the `selected` prop).\nconst chipVariants = cva(\n \"inline-flex h-[var(--ui-chips-container-height)] min-w-[var(--ui-chips-container-width-min)] items-center justify-center gap-[var(--ui-chips-container-gap)] rounded-[var(--ui-chips-border-radius)] border-[length:var(--ui-chips-border-width)] border-solid border-[var(--ui-chips-border-color-idle)] bg-[var(--ui-chips-container-color-idle)] px-[var(--ui-chips-container-padding-x)] text-sm leading-6 text-[var(--ui-chips-label-color)] hover:border-[var(--ui-chips-border-color-hover)] hover:bg-[var(--ui-chips-container-color-hover)] [&_svg]:size-[var(--ui-chips-icon-size)] [&_svg]:shrink-0 [&_svg]:text-[var(--ui-chips-icon-color)]\",\n {\n variants: {\n variant: {\n removable:\n 'focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chips-border-color-active)] active:bg-[var(--ui-chips-container-color-active)]',\n selectable:\n 'cursor-pointer focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chips-border-color-active)] data-[selected=true]:bg-[var(--ui-chips-container-color-active)]',\n },\n },\n defaultVariants: {\n variant: 'removable',\n },\n }\n);\n\nexport interface ChipProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof chipVariants> {\n /** Optional leading icon, rendered at 16px before the label. */\n icon?: React.ReactNode;\n /**\n * `selectable` only — applies the selected (active) styling and exposes the\n * chip as a pressed toggle (`role=\"button\"` + `aria-pressed`).\n */\n selected?: boolean;\n /** `removable` only — called when the trailing remove (×) button is pressed. */\n onRemove?: () => void;\n /** Accessible label for the remove button (`removable`). */\n removeLabel?: string;\n}\n\nconst Chip = React.forwardRef<HTMLDivElement, ChipProps>(\n (\n {\n className,\n variant = 'removable',\n icon,\n selected,\n onRemove,\n removeLabel = 'Remove',\n children,\n onKeyDown,\n ...props\n },\n ref\n ) => {\n const selectable = variant === 'selectable';\n return (\n <div\n ref={ref}\n className={cn(chipVariants({ variant }), className)}\n onKeyDown={(event) => {\n // The selectable chip is a div with button semantics; mirror native\n // button activation so Enter/Space fire its click handler.\n if (selectable && (event.key === 'Enter' || event.key === ' ')) {\n event.preventDefault();\n event.currentTarget.click();\n }\n onKeyDown?.(event);\n }}\n {...(selectable\n ? {\n role: 'button',\n tabIndex: 0,\n 'aria-pressed': Boolean(selected),\n 'data-selected': selected ? 'true' : undefined,\n }\n : {})}\n {...props}\n >\n {icon}\n <span className=\"min-w-0 truncate\">{children}</span>\n {variant === 'removable' && (\n <button\n type=\"button\"\n aria-label={removeLabel}\n onClick={onRemove}\n className=\"-mr-1 flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-none\"\n >\n <TimesIcon />\n </button>\n )}\n </div>\n );\n }\n);\nChip.displayName = 'Chip';\n\nexport { Chip, chipVariants };\n"],"names":["chipVariants","cva","Chip","React","className","variant","icon","selected","onRemove","removeLabel","children","onKeyDown","props","ref","selectable","jsxs","cn","event","jsx","TimesIcon"],"mappings":";;;;;AAgBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,WACE;AAAA,QACF,YACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAmBMC,IAAOC,EAAM;AAAA,EACjB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAaT,MAAY;AAC/B,WACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAWG,EAAGhB,EAAa,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,QAClD,WAAW,CAACa,MAAU;AAGpB,UAAIH,MAAeG,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACxDA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBN,KAAA,QAAAA,EAAYM;AAAA,QACd;AAAA,QACC,GAAIH,IACD;AAAA,UACE,MAAM;AAAA,UACN,UAAU;AAAA,UACV,gBAAgB,EAAQP;AAAA,UACxB,iBAAiBA,IAAW,SAAS;AAAA,QAAA,IAEvC,CAAA;AAAA,QACH,GAAGK;AAAA,QAEH,UAAA;AAAA,UAAAN;AAAA,UACD,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAR,EAAA,CAAS;AAAA,UAC5CL,MAAY,eACX,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAYT;AAAA,cACZ,SAASD;AAAA,cACT,WAAU;AAAA,cAEV,4BAACW,GAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAjB,EAAK,cAAc;"}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { jsx as t, jsxs as n, Fragment as u } from "react/jsx-runtime";
|
|
2
|
+
import * as i from "react";
|
|
3
|
+
import { Dialog as r } from "@base-ui/react/dialog";
|
|
4
|
+
import { TimesIcon as x } from "@acronis-platform/icons-react/stroke-mono";
|
|
5
|
+
import { cva as D } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
|
|
6
|
+
import { cn as l } from "../../../lib/utils.js";
|
|
7
|
+
const y = D(
|
|
8
|
+
"fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg bg-muted text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
size: {
|
|
12
|
+
xs: "max-w-[464px]",
|
|
13
|
+
sm: "max-w-lg",
|
|
14
|
+
md: "max-w-2xl",
|
|
15
|
+
lg: "max-w-[832px]",
|
|
16
|
+
xl: "max-w-[992px]",
|
|
17
|
+
"2xl": "max-w-[1136px]"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
defaultVariants: {
|
|
21
|
+
size: "sm"
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
), j = r.Root, F = r.Trigger, H = r.Portal, O = r.Close, d = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
|
|
25
|
+
r.Backdrop,
|
|
26
|
+
{
|
|
27
|
+
ref: e,
|
|
28
|
+
className: l(
|
|
29
|
+
"fixed inset-0 z-50 bg-[var(--ui-background-overlay-primary)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0",
|
|
30
|
+
o
|
|
31
|
+
),
|
|
32
|
+
...a
|
|
33
|
+
}
|
|
34
|
+
));
|
|
35
|
+
d.displayName = "DialogOverlay";
|
|
36
|
+
const b = i.forwardRef(
|
|
37
|
+
({
|
|
38
|
+
className: o,
|
|
39
|
+
children: a,
|
|
40
|
+
size: e,
|
|
41
|
+
portal: m = !0,
|
|
42
|
+
portalContainer: c,
|
|
43
|
+
keepMounted: f,
|
|
44
|
+
...g
|
|
45
|
+
}, p) => {
|
|
46
|
+
const s = /* @__PURE__ */ n(u, { children: [
|
|
47
|
+
/* @__PURE__ */ t(d, {}),
|
|
48
|
+
/* @__PURE__ */ t(
|
|
49
|
+
r.Popup,
|
|
50
|
+
{
|
|
51
|
+
ref: p,
|
|
52
|
+
className: l(y({ size: e }), o),
|
|
53
|
+
...g,
|
|
54
|
+
children: a
|
|
55
|
+
}
|
|
56
|
+
)
|
|
57
|
+
] });
|
|
58
|
+
return m ? /* @__PURE__ */ t(r.Portal, { container: c, keepMounted: f, children: s }) : s;
|
|
59
|
+
}
|
|
60
|
+
);
|
|
61
|
+
b.displayName = "DialogContent";
|
|
62
|
+
const w = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
|
|
63
|
+
"div",
|
|
64
|
+
{
|
|
65
|
+
ref: e,
|
|
66
|
+
className: l(
|
|
67
|
+
"flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4",
|
|
68
|
+
o
|
|
69
|
+
),
|
|
70
|
+
...a
|
|
71
|
+
}
|
|
72
|
+
));
|
|
73
|
+
w.displayName = "DialogHeader";
|
|
74
|
+
const v = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
|
|
75
|
+
"div",
|
|
76
|
+
{
|
|
77
|
+
ref: e,
|
|
78
|
+
className: l(
|
|
79
|
+
"flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4",
|
|
80
|
+
o
|
|
81
|
+
),
|
|
82
|
+
...a
|
|
83
|
+
}
|
|
84
|
+
));
|
|
85
|
+
v.displayName = "DialogFooter";
|
|
86
|
+
const N = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t("div", { ref: e, className: l("flex-1 overflow-auto p-6", o), ...a }));
|
|
87
|
+
N.displayName = "DialogBody";
|
|
88
|
+
const R = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
|
|
89
|
+
r.Title,
|
|
90
|
+
{
|
|
91
|
+
ref: e,
|
|
92
|
+
className: l(
|
|
93
|
+
"flex-1 text-2xl font-normal leading-8 text-foreground",
|
|
94
|
+
o
|
|
95
|
+
),
|
|
96
|
+
...a
|
|
97
|
+
}
|
|
98
|
+
));
|
|
99
|
+
R.displayName = "DialogTitle";
|
|
100
|
+
const h = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
|
|
101
|
+
r.Description,
|
|
102
|
+
{
|
|
103
|
+
ref: e,
|
|
104
|
+
className: l("text-sm text-muted-foreground", o),
|
|
105
|
+
...a
|
|
106
|
+
}
|
|
107
|
+
));
|
|
108
|
+
h.displayName = "DialogDescription";
|
|
109
|
+
const C = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ n(
|
|
110
|
+
r.Close,
|
|
111
|
+
{
|
|
112
|
+
ref: e,
|
|
113
|
+
className: l(
|
|
114
|
+
"rounded p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none",
|
|
115
|
+
o
|
|
116
|
+
),
|
|
117
|
+
...a,
|
|
118
|
+
children: [
|
|
119
|
+
/* @__PURE__ */ t(x, { size: 24 }),
|
|
120
|
+
/* @__PURE__ */ t("span", { className: "sr-only", children: "Close" })
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
));
|
|
124
|
+
C.displayName = "DialogCloseButton";
|
|
125
|
+
export {
|
|
126
|
+
j as Dialog,
|
|
127
|
+
N as DialogBody,
|
|
128
|
+
O as DialogClose,
|
|
129
|
+
C as DialogCloseButton,
|
|
130
|
+
b as DialogContent,
|
|
131
|
+
h as DialogDescription,
|
|
132
|
+
v as DialogFooter,
|
|
133
|
+
w as DialogHeader,
|
|
134
|
+
d as DialogOverlay,
|
|
135
|
+
H as DialogPortal,
|
|
136
|
+
R as DialogTitle,
|
|
137
|
+
F as DialogTrigger,
|
|
138
|
+
y as dialogContentVariants
|
|
139
|
+
};
|
|
140
|
+
//# sourceMappingURL=dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dialog.js","sources":["../../../../src/components/ui/dialog/dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `dialog`\n// (packages/ui-legacy/src/components/ui/dialog.tsx). A modal overlay built on\n// the Base UI Dialog primitive (keyboard, focus trap, scroll lock, ARIA come\n// from Base UI). No `--ui-dialog-*` token tier exists yet, so this design-\n// pending v1 themes from the shared semantic tokens via bridged Tailwind names:\n// • overlay -> var(--ui-background-overlay-primary) (legacy `bg-black/80`)\n// • popup -> bg-muted = --ui-background-surface-secondary\n// • header / footer -> bg-background = --ui-background-surface-primary (white\n// bars over the muted body), divided by border-border\n// • title -> text-foreground / description -> text-muted-foreground\n// • close -> text-muted-foreground → hover text-foreground (replaces the\n// legacy opacity hack), focus ring var(--ui-focus-primary)\n// Enter/exit animations use `tw-animate-css` (imported in styles/index.css),\n// keyed to Base UI's data-[open] / data-[closed] state attributes — overlay\n// fades, popup fades + zooms. The `size` scale (max-width) mirrors the reference\n// design's six widths; until a `--ui-dialog-*` tier defines them, they are plain\n// max-width utilities. Reconcile against the real design with\n// `/figma-component Dialog <url> --update` once a mockup lands.\n\n// Popup width scale. `sm` (512px) is the default and matches the pre-size width.\nconst dialogContentVariants = cva(\n 'fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg bg-muted text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',\n {\n variants: {\n size: {\n xs: 'max-w-[464px]',\n sm: 'max-w-lg',\n md: 'max-w-2xl',\n lg: 'max-w-[832px]',\n xl: 'max-w-[992px]',\n '2xl': 'max-w-[1136px]',\n },\n },\n defaultVariants: {\n size: 'sm',\n },\n }\n);\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Backdrop>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Backdrop>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Backdrop\n ref={ref}\n className={cn(\n 'fixed inset-0 z-50 bg-[var(--ui-background-overlay-primary)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',\n className\n )}\n {...props}\n />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\nexport interface DialogContentProps\n extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup>,\n VariantProps<typeof dialogContentVariants> {\n /**\n * Popup max-width. `sm` 512 · `xs` 464 · `md` 672 · `lg` 832 · `xl` 992 ·\n * `2xl` 1136 (px). Defaults to `sm`.\n */\n size?: VariantProps<typeof dialogContentVariants>['size'];\n /**\n * Render the content inside a portal (default `true`). Base UI requires the\n * Popup to sit in a Portal for correct stacking; set `false` for inline usage\n * (e.g. when the caller supplies its own `DialogPortal`, or in tests).\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?: DialogPrimitive.Portal.Props['container'];\n /** Keep the content mounted while closed (Base UI `Portal` prop). */\n keepMounted?: DialogPrimitive.Portal.Props['keepMounted'];\n}\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Popup>,\n DialogContentProps\n>(\n (\n {\n className,\n children,\n size,\n portal = true,\n portalContainer,\n keepMounted,\n ...props\n },\n ref\n ) => {\n const popup = (\n <>\n <DialogOverlay />\n <DialogPrimitive.Popup\n ref={ref}\n className={cn(dialogContentVariants({ size }), className)}\n {...props}\n >\n {children}\n </DialogPrimitive.Popup>\n </>\n );\n\n return portal ? (\n <DialogPrimitive.Portal container={portalContainer} keepMounted={keepMounted}>\n {popup}\n </DialogPrimitive.Portal>\n ) : (\n popup\n );\n }\n);\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4',\n className\n )}\n {...props}\n />\n));\nDialogHeader.displayName = 'DialogHeader';\n\nconst DialogFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4',\n className\n )}\n {...props}\n />\n));\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn('flex-1 overflow-auto p-6', className)} {...props} />\n));\nDialogBody.displayName = 'DialogBody';\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn(\n 'flex-1 text-2xl font-normal leading-8 text-foreground',\n className\n )}\n {...props}\n />\n));\nDialogTitle.displayName = 'DialogTitle';\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-sm text-muted-foreground', className)}\n {...props}\n />\n));\nDialogDescription.displayName = 'DialogDescription';\n\nconst DialogCloseButton = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Close>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Close\n ref={ref}\n className={cn(\n 'rounded p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none',\n className\n )}\n {...props}\n >\n <TimesIcon size={24} />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n));\nDialogCloseButton.displayName = 'DialogCloseButton';\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogCloseButton,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogBody,\n DialogDescription,\n dialogContentVariants,\n};\n"],"names":["dialogContentVariants","cva","Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","React","className","props","ref","jsx","cn","DialogContent","children","size","portal","portalContainer","keepMounted","popup","jsxs","Fragment","DialogHeader","DialogFooter","DialogBody","DialogTitle","DialogDescription","DialogCloseButton","TimesIcon"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sources":["../../../../src/components/ui/input/input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n//
|
|
1
|
+
{"version":3,"file":"input.js","sources":["../../../../src/components/ui/input/input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Internal primitive: the bare single-line input box behind the public\n// `InputText` field (which is also exported as `Input`). Not exported from the\n// package; consumed by `input-text`. Themed by the dedicated next-gen `--ui-input-text-*`\n// token tier from @acronis-platform/tokens-pd. The box fill (`global-box-color-*`)\n// and the normal border (`normal-box-border-color-*`) are wired per state: idle /\n// hover / focus / disabled. The `normal-box-border-color-*` tier has no `-active`,\n// so focus reuses `-hover` for the border, paired with a 3px `--ui-focus-primary`\n// ring. Value and placeholder text use `global-value-color-*` /\n// `global-placeholder-color-*`. The error state is driven by `aria-invalid` —\n// `error-msg-box-border-color-*` border and, on focus, a `--ui-focus-error` ring —\n// scoped with `not-aria-[invalid]` so it wins over the hover/focus border. Box\n// geometry (32px height, 4px radius, 12px padding-x) comes from\n// `--ui-input-text-global-box-*`. Label, description, and error message are\n// composed by the consumer (a Field component is future work).\nexport type InputBoxProps = React.ComponentPropsWithoutRef<'input'>;\n\nconst InputBox = React.forwardRef<HTMLInputElement, InputBoxProps>(\n ({ className, type = 'text', ...props }, ref) => (\n <input\n ref={ref}\n type={type}\n className={cn(\n 'h-[var(--ui-input-text-global-box-height)] w-full min-w-0 rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] px-[var(--ui-input-text-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-global-box-color-hover)] not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-normal-box-border-color-hover)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-text-global-box-color-disabled)] disabled:text-[var(--ui-input-text-global-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-global-placeholder-color-disabled)]',\n className\n )}\n {...props}\n />\n )\n);\nInputBox.displayName = 'InputBox';\n\nexport { InputBox };\n"],"names":["InputBox","React","className","type","props","ref","jsx","cn"],"mappings":";;;AAoBA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GAASC,MACvC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAF;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAS,cAAc;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as c, jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import * as o from "react";
|
|
3
|
-
import { cn as
|
|
4
|
-
import {
|
|
3
|
+
import { cn as x } from "../../../lib/utils.js";
|
|
4
|
+
import { SearchBox as f } from "../search/search.js";
|
|
5
5
|
const v = o.forwardRef(
|
|
6
6
|
({
|
|
7
7
|
className: s,
|
|
@@ -18,7 +18,7 @@ const v = o.forwardRef(
|
|
|
18
18
|
"label",
|
|
19
19
|
{
|
|
20
20
|
htmlFor: t,
|
|
21
|
-
className:
|
|
21
|
+
className: x(
|
|
22
22
|
"flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4",
|
|
23
23
|
e ? "text-[var(--ui-input-search-color-disabled)]" : "text-[var(--ui-input-search-color-idle)]"
|
|
24
24
|
),
|
|
@@ -36,7 +36,7 @@ const v = o.forwardRef(
|
|
|
36
36
|
}
|
|
37
37
|
),
|
|
38
38
|
/* @__PURE__ */ l(
|
|
39
|
-
|
|
39
|
+
f,
|
|
40
40
|
{
|
|
41
41
|
ref: d,
|
|
42
42
|
id: t,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-search.js","sources":["../../../../src/components/ui/input-search/input-search.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport {
|
|
1
|
+
{"version":3,"file":"input-search.js","sources":["../../../../src/components/ui/input-search/input-search.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { SearchBox, type SearchBoxProps } from '../search';\n\n// Mirrors the Figma \"InputSearch\" component: a full search field built around the\n// bare `SearchBox` (themed by the `--ui-input-search-*` tier). It adds the field\n// furniture — an optional `label` above the box (with an optional `required` `*`).\n// Every other prop (placeholder, value, onClear, disabled, …) passes straight\n// through to `Search`. Label colors come from `--ui-input-search-color-{idle,disabled}`\n// and the required marker from `--ui-input-search-required-color`, so brand overrides\n// are honored. When a visible label is present it names the field via `htmlFor`/`id`,\n// and `Search`'s built-in `aria-label=\"Search\"` is cleared so it doesn't shadow the\n// visible label.\nexport interface InputSearchProps extends SearchBoxProps {\n /** Field label, rendered above the search box. */\n label?: React.ReactNode;\n /** Marks the field required — appends a `*` after the label. */\n required?: boolean;\n}\n\nconst InputSearch = React.forwardRef<HTMLInputElement, InputSearchProps>(\n (\n {\n className,\n id,\n label,\n required,\n disabled,\n 'aria-label': ariaLabel,\n ...props\n },\n ref\n ) => {\n const reactId = React.useId();\n const inputId = id ?? reactId;\n const hasLabel = label != null && label !== '';\n\n // A visible label names the field via `htmlFor`/`id`, so clear `Search`'s\n // default `aria-label`. With no label, forward the caller's `aria-label` (if\n // any) and otherwise let `Search`'s default stand.\n const ariaLabelProps = hasLabel\n ? { 'aria-label': undefined }\n : ariaLabel != null\n ? { 'aria-label': ariaLabel }\n : {};\n\n return (\n <div className=\"flex w-full min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]\">\n {hasLabel && (\n <label\n htmlFor={inputId}\n className={cn(\n 'flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4',\n disabled\n ? 'text-[var(--ui-input-search-color-disabled)]'\n : 'text-[var(--ui-input-search-color-idle)]'\n )}\n >\n {label}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-search-required-color)]\"\n >\n *\n </span>\n )}\n </label>\n )}\n <SearchBox\n ref={ref}\n id={inputId}\n disabled={disabled}\n aria-required={required || undefined}\n className={className}\n {...ariaLabelProps}\n {...props}\n />\n </div>\n );\n }\n);\nInputSearch.displayName = 'InputSearch';\n\nexport { InputSearch };\n"],"names":["InputSearch","React","className","id","label","required","disabled","ariaLabel","props","ref","reactId","inputId","hasLabel","ariaLabelProps","jsxs","cn","jsx","SearchBox"],"mappings":";;;;AAqBA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUT,EAAM,MAAA,GAChBU,IAAUR,KAAMO,GAChBE,IAAWR,KAAS,QAAQA,MAAU,IAKtCS,IAAiBD,IACnB,EAAE,cAAc,OAAA,IAChBL,KAAa,OACX,EAAE,cAAcA,EAAA,IAChB,CAAA;AAEN,WACE,gBAAAO,EAAC,OAAA,EAAI,WAAU,sHACZ,UAAA;AAAA,MAAAF,KACC,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASH;AAAA,UACT,WAAWI;AAAA,YACT;AAAA,YACAT,IACI,iDACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAF;AAAA,YACAC,KACC,gBAAAW;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAIN,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAAR;AAAA,UACA,IAAIE;AAAA,UACJ,UAAAL;AAAA,UACA,iBAAeD,KAAY;AAAA,UAC3B,WAAAH;AAAA,UACC,GAAGW;AAAA,UACH,GAAGL;AAAA,QAAA;AAAA,MAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AACAR,EAAY,cAAc;"}
|
|
@@ -2,7 +2,7 @@ import { jsxs as s, jsx as t } from "react/jsx-runtime";
|
|
|
2
2
|
import * as m from "react";
|
|
3
3
|
import { TimesIcon as j } from "@acronis-platform/icons-react/stroke-mono";
|
|
4
4
|
import { cn as c } from "../../../lib/utils.js";
|
|
5
|
-
import {
|
|
5
|
+
import { InputBox as C } from "../input/input.js";
|
|
6
6
|
const T = m.forwardRef(
|
|
7
7
|
({
|
|
8
8
|
className: g,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-text.js","sources":["../../../../src/components/ui/input-text/input-text.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport {
|
|
1
|
+
{"version":3,"file":"input-text.js","sources":["../../../../src/components/ui/input-text/input-text.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { InputBox } from '../input';\n\n// Mirrors the Figma \"InputText\" component: a full single-line text field built\n// around the bare `InputBox` primitive (themed by the `--ui-input-text-*` tier). It\n// adds the field furniture: an optional `label` (with an optional `required` `*`),\n// an optional clear (✕) button, and an optional `description` or `error` message\n// below. Passing `error` switches the field to its error treatment — the box gets\n// the red error border (via the input's `aria-invalid` styling) and the red error\n// message replaces the description. The clear button appears only while `clearable`\n// is set and the (controlled) field has a value, and calls `onClear`. Colors come\n// from the `--ui-input-text-*` tokens — label/required/description/error/clear — so\n// brand overrides are honored; the clear button uses a 3px `--ui-focus-primary` ring.\nexport interface InputTextProps\n extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children'> {\n /** Field label, rendered above the input. */\n label?: React.ReactNode;\n /** Marks the field required — appends a `*` after the label. */\n required?: boolean;\n /** Helper text below the input. Hidden while `error` is set. */\n description?: React.ReactNode;\n /**\n * Error message below the input. Its presence switches the field to the error\n * treatment (red box border + red message).\n */\n error?: React.ReactNode;\n /** Show a clear (✕) button while the (controlled) field has a value. */\n clearable?: boolean;\n /** Called when the clear button is activated. */\n onClear?: () => void;\n}\n\nconst InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n (\n {\n className,\n id,\n label,\n required,\n description,\n error,\n clearable,\n onClear,\n disabled,\n value,\n ...props\n },\n ref\n ) => {\n const reactId = React.useId();\n const inputId = id ?? reactId;\n const messageId = `${inputId}-message`;\n\n const hasError = error != null && error !== '';\n const hasValue = value != null && value !== '';\n const showClear = Boolean(clearable) && hasValue && !disabled;\n const message = hasError ? error : description;\n const hasMessage = message != null && message !== '';\n\n return (\n <div className=\"flex w-full min-w-[var(--ui-input-text-global-container-width-min)] flex-col gap-[var(--ui-input-text-global-container-gap)]\">\n {label != null && label !== '' && (\n <label\n htmlFor={inputId}\n className={cn(\n 'flex gap-[var(--ui-input-text-global-container-label-gap)] text-sm leading-4',\n disabled\n ? 'text-[var(--ui-input-text-global-label-color-disabled)]'\n : 'text-[var(--ui-input-text-global-label-color-idle)]'\n )}\n >\n {label}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-text-global-required-color)]\"\n >\n *\n </span>\n )}\n </label>\n )}\n\n <div className=\"relative\">\n <InputBox\n ref={ref}\n id={inputId}\n disabled={disabled}\n value={value}\n aria-invalid={hasError || undefined}\n aria-required={required || undefined}\n aria-describedby={hasMessage ? messageId : undefined}\n className={cn(showClear && 'pr-9', className)}\n {...props}\n />\n {showClear && (\n <button\n type=\"button\"\n onClick={onClear}\n aria-label=\"Clear\"\n className=\"absolute right-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-4 -translate-y-1/2 items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] text-[var(--ui-input-text-global-clear-icon-color)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0\"\n >\n <TimesIcon />\n </button>\n )}\n </div>\n\n {hasMessage && (\n <p\n id={messageId}\n className={cn(\n 'text-xs leading-4',\n hasError\n ? 'text-[var(--ui-input-text-error-msg-error-color)]'\n : disabled\n ? 'text-[var(--ui-input-text-normal-description-color-disabled)]'\n : 'text-[var(--ui-input-text-normal-description-color-idle)]'\n )}\n >\n {message}\n </p>\n )}\n </div>\n );\n }\n);\nInputText.displayName = 'InputText';\n\nexport { InputText };\n"],"names":["InputText","React","className","id","label","required","description","error","clearable","onClear","disabled","value","props","ref","reactId","inputId","messageId","hasError","hasValue","showClear","message","hasMessage","jsxs","cn","jsx","InputBox","TimesIcon"],"mappings":";;;;;AAmCA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUb,EAAM,MAAA,GAChBc,IAAUZ,KAAMW,GAChBE,IAAY,GAAGD,CAAO,YAEtBE,IAAWV,KAAS,QAAQA,MAAU,IACtCW,IAAWP,KAAS,QAAQA,MAAU,IACtCQ,IAAY,EAAQX,KAAcU,KAAY,CAACR,GAC/CU,IAAUH,IAAWV,IAAQD,GAC7Be,IAAaD,KAAW,QAAQA,MAAY;AAElD,WACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,gIACZ,UAAA;AAAA,MAAAlB,KAAS,QAAQA,MAAU,MAC1B,gBAAAkB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASP;AAAA,UACT,WAAWQ;AAAA,YACT;AAAA,YACAb,IACI,4DACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAN;AAAA,YACAC,KACC,gBAAAmB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAKN,gBAAAF,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAZ;AAAA,YACA,IAAIE;AAAA,YACJ,UAAAL;AAAA,YACA,OAAAC;AAAA,YACA,gBAAcM,KAAY;AAAA,YAC1B,iBAAeZ,KAAY;AAAA,YAC3B,oBAAkBgB,IAAaL,IAAY;AAAA,YAC3C,WAAWO,EAAGJ,KAAa,QAAQjB,CAAS;AAAA,YAC3C,GAAGU;AAAA,UAAA;AAAA,QAAA;AAAA,QAELO,KACC,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAASf;AAAA,YACT,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,4BAACiB,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,GAEJ;AAAA,MAECL,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIR;AAAA,UACJ,WAAWO;AAAA,YACT;AAAA,YACAN,IACI,sDACAP,IACE,kEACA;AAAA,UAAA;AAAA,UAGP,UAAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AACApB,EAAU,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.js","sources":["../../../../src/components/ui/search/search.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MagnifierIcon,\n TimesIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n//
|
|
1
|
+
{"version":3,"file":"search.js","sources":["../../../../src/components/ui/search/search.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MagnifierIcon,\n TimesIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Internal primitive: the bare search box behind the public `InputSearch` field\n// (which is also exported as `Search`). Not exported from the package; consumed\n// by `input-search`. A bordered box (the dedicated `--ui-input-search-*` token\n// tier) holding a leading magnifier, a borderless native input, and a trailing\n// clear button shown once there's a value. The box owns the visual state via\n// `focus-within` (the input-search tier has no focus/active border token, so the\n// focused border reuses `--ui-input-search-border-color-hover` plus a 3px\n// `--ui-focus-primary` ring) / hover / disabled; the magnifier uses\n// `--ui-input-search-icon-search-color-{idle,disabled}` (via the `group`) and the\n// clear button uses `--ui-input-search-clear-icon-color`.\n\nexport interface SearchBoxProps extends React.ComponentPropsWithoutRef<'input'> {\n /** Called when the clear (×) button is pressed, after the value is cleared. */\n onClear?: () => void;\n}\n\nconst SearchBox = React.forwardRef<HTMLInputElement, SearchBoxProps>(\n (\n {\n className,\n type = 'search',\n disabled,\n onClear,\n onChange,\n value,\n defaultValue,\n ...props\n },\n forwardedRef\n ) => {\n const innerRef = React.useRef<HTMLInputElement>(null);\n const [hasValue, setHasValue] = React.useState(\n () => String(value ?? defaultValue ?? '').length > 0\n );\n\n // Keep the clear button in sync when the value is controlled externally.\n React.useEffect(() => {\n if (value !== undefined) setHasValue(String(value).length > 0);\n }, [value]);\n\n const setRefs = React.useCallback(\n (node: HTMLInputElement | null) => {\n innerRef.current = node;\n if (typeof forwardedRef === 'function') forwardedRef(node);\n else if (forwardedRef) forwardedRef.current = node;\n },\n [forwardedRef]\n );\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value.length > 0);\n onChange?.(event);\n };\n\n const handleClear = () => {\n const input = innerRef.current;\n if (!input) return;\n // Use the native value setter when available + dispatch a real input event\n // so React's onChange fires for both controlled and uncontrolled usage.\n let setter: ((this: HTMLInputElement, value: string) => void) | undefined;\n try {\n setter = Object.getOwnPropertyDescriptor(\n globalThis.HTMLInputElement?.prototype,\n 'value'\n )?.set;\n } catch {\n setter = undefined;\n }\n\n if (setter) setter.call(input, '');\n else input.value = '';\n\n input.dispatchEvent(new Event('input', { bubbles: true }));\n setHasValue(false);\n input.focus();\n onClear?.();\n };\n\n return (\n <div\n data-disabled={disabled || undefined}\n className={cn(\n 'group inline-flex h-[var(--ui-input-search-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-search-box-gap)] rounded-[var(--ui-input-search-box-border-radius)] border bg-[var(--ui-input-search-box-color-idle)] border-[var(--ui-input-search-border-color-idle)] px-[var(--ui-input-search-box-padding-x)] text-sm leading-6 text-[var(--ui-input-search-value-color-idle)] transition-colors not-data-[disabled]:hover:bg-[var(--ui-input-search-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-search-border-color-hover)] focus-within:border-[var(--ui-input-search-border-color-hover)] focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-search-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-search-box-color-disabled)] data-[disabled]:text-[var(--ui-input-search-value-color-disabled)]',\n className\n )}\n >\n <MagnifierIcon\n size={16}\n className=\"shrink-0 text-[var(--ui-input-search-icon-search-color-idle)] group-data-[disabled]:text-[var(--ui-input-search-icon-search-color-disabled)]\"\n />\n <input\n ref={setRefs}\n type={type}\n disabled={disabled}\n value={value}\n defaultValue={defaultValue}\n onChange={handleChange}\n aria-label=\"Search\"\n className=\"h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-inherit outline-none placeholder:text-[var(--ui-input-search-placeholder-color-idle)] disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none\"\n {...props}\n />\n {hasValue && !disabled && (\n <button\n type=\"button\"\n aria-label=\"Clear search\"\n onClick={handleClear}\n className=\"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm text-[var(--ui-input-search-clear-icon-color)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&>svg]:size-4\"\n >\n <TimesIcon size={16} />\n </button>\n )}\n </div>\n );\n }\n);\nSearchBox.displayName = 'SearchBox';\n\nexport { SearchBox };\n"],"names":["SearchBox","React","className","type","disabled","onClear","onChange","value","defaultValue","props","forwardedRef","innerRef","hasValue","setHasValue","setRefs","node","handleChange","event","handleClear","input","setter","_b","_a","jsxs","cn","jsx","MagnifierIcon","TimesIcon"],"mappings":";;;;AAwBA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAWV,EAAM,OAAyB,IAAI,GAC9C,CAACW,GAAUC,CAAW,IAAIZ,EAAM;AAAA,MACpC,MAAM,OAAOM,KAASC,KAAgB,EAAE,EAAE,SAAS;AAAA,IAAA;AAIrD,IAAAP,EAAM,UAAU,MAAM;AACpB,MAAIM,MAAU,UAAWM,EAAY,OAAON,CAAK,EAAE,SAAS,CAAC;AAAA,IAC/D,GAAG,CAACA,CAAK,CAAC;AAEV,UAAMO,IAAUb,EAAM;AAAA,MACpB,CAACc,MAAkC;AACjC,QAAAJ,EAAS,UAAUI,GACf,OAAOL,KAAiB,aAAYA,EAAaK,CAAI,IAChDL,QAA2B,UAAUK;AAAA,MAChD;AAAA,MACA,CAACL,CAAY;AAAA,IAAA,GAGTM,IAAe,CAACC,MAA+C;AACnE,MAAAJ,EAAYI,EAAM,OAAO,MAAM,SAAS,CAAC,GACzCX,KAAA,QAAAA,EAAWW;AAAA,IACb,GAEMC,IAAc,MAAM;;AACxB,YAAMC,IAAQR,EAAS;AACvB,UAAI,CAACQ,EAAO;AAGZ,UAAIC;AACJ,UAAI;AACF,QAAAA,KAASC,IAAA,OAAO;AAAA,WACdC,IAAA,WAAW,qBAAX,gBAAAA,EAA6B;AAAA,UAC7B;AAAA,QAAA,MAFO,gBAAAD,EAGN;AAAA,MACL,QAAQ;AACN,QAAAD,IAAS;AAAA,MACX;AAEA,MAAIA,IAAQA,EAAO,KAAKD,GAAO,EAAE,MACtB,QAAQ,IAEnBA,EAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAA,CAAM,CAAC,GACzDN,EAAY,EAAK,GACjBM,EAAM,MAAA,GACNd,KAAA,QAAAA;AAAA,IACF;AAEA,WACE,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,iBAAenB,KAAY;AAAA,QAC3B,WAAWoB;AAAA,UACT;AAAA,UACAtB;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAuB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKX;AAAA,cACL,MAAAX;AAAA,cACA,UAAAC;AAAA,cACA,OAAAG;AAAA,cACA,cAAAC;AAAA,cACA,UAAUQ;AAAA,cACV,cAAW;AAAA,cACX,WAAU;AAAA,cACT,GAAGP;AAAA,YAAA;AAAA,UAAA;AAAA,UAELG,KAAY,CAACR,KACZ,gBAAAqB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAASP;AAAA,cACT,WAAU;AAAA,cAEV,UAAA,gBAAAO,EAACE,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACA3B,EAAU,cAAc;"}
|