@acronis-platform/ui-react 0.43.0 → 0.44.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/checkbox/checkbox.js +3 -1
- package/dist/components/ui/checkbox/checkbox.js.map +1 -1
- package/dist/components/ui/sheet/sheet.js +138 -0
- package/dist/components/ui/sheet/sheet.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/index.js +215 -189
- package/dist/index.js.map +1 -1
- package/dist/react.js +215 -189
- package/dist/react.js.map +1 -1
- package/dist/src/components/ui/sheet/index.d.ts +2 -0
- package/dist/src/components/ui/sheet/sheet.d.ts +36 -0
- package/dist/src/components/ui/sheet/sheet.docs.d.ts +21 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/ui-react.css +1 -1
- package/package.json +4 -4
|
@@ -5,7 +5,9 @@ import { MinusIcon as v, CheckIcon as u } from "@acronis-platform/icons-react/st
|
|
|
5
5
|
import { cn as m } from "../../../lib/utils.js";
|
|
6
6
|
const g = [
|
|
7
7
|
// geometry + focus ring
|
|
8
|
-
|
|
8
|
+
// `align-middle` keeps the box vertically centered when it sits inline next to
|
|
9
|
+
// text (e.g. in a table cell) rather than defaulting to the text baseline.
|
|
10
|
+
"inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border align-middle transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0",
|
|
9
11
|
// unchecked (base): idle / hover / active
|
|
10
12
|
"bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]",
|
|
11
13
|
"not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport {\n CheckIcon,\n MinusIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Checkbox primitive, themed by the dedicated next-gen\n// `--ui-checkbox-*` token tier from @acronis-platform/tokens-pd. The box has three\n// logical states — `unchecked` (the base), `checked`, and `indeterminate` — each\n// with its own per-interaction (idle / hover / active / disabled) fill\n// (`*-box-color-*`), border (`*-box-border-color-*`), and glyph (`*-icon-color-*`)\n// tokens. `unchecked` is the base layer (lowest specificity); `data-[checked]` /\n// `data-[indeterminate]` override it (Base UI marks an indeterminate box with both\n// data-unchecked AND data-indeterminate, so the single-attribute overrides win on\n// specificity), and `data-[disabled]:data-[<state>]` overrides those in turn. The\n// glyph (check when checked, minus when indeterminate) inherits the Root's text\n// color via the Indicator's `text-current`. Box geometry (16px size, 2px radius)\n// comes from `--ui-checkbox-global-box-*`; the focus ring uses `--ui-focus-primary`.\n//\n// An optional `label` / `description` compose the full Figma field: the box, an\n// optional label, and an optional description stacked beside it. When either is\n// present the whole row is a `<label>` (so clicking the text toggles the box — a\n// Base UI checkbox renders a labelable <button>), the box gets a top margin of\n// `--ui-checkbox-global-box-margin-x` (4px = (line-height 24 − box 16) / 2, the\n// design's box alignment margin) to center it on the first text line, and the\n// box is wired to the text via aria-labelledby / aria-describedby. With neither,\n// the box renders on its own (name it with `aria-label`).\nconst boxClasses = [\n // geometry + focus ring\n 'inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0',\n // unchecked (base): idle / hover / active\n 'bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]',\n 'not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]',\n 'not-data-[disabled]:active:bg-[var(--ui-checkbox-unchecked-box-color-active)] not-data-[disabled]:active:border-[var(--ui-checkbox-unchecked-box-border-color-active)]',\n // checked: idle / hover / active\n 'data-[checked]:bg-[var(--ui-checkbox-checked-box-color-idle)] data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-idle)] data-[checked]:text-[var(--ui-checkbox-checked-icon-color-idle)]',\n 'data-[checked]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-checked-box-color-hover)] data-[checked]:not-data-[disabled]:hover:border-[var(--ui-checkbox-checked-box-border-color-hover)] data-[checked]:not-data-[disabled]:hover:text-[var(--ui-checkbox-checked-icon-color-hover)]',\n 'data-[checked]:not-data-[disabled]:active:bg-[var(--ui-checkbox-checked-box-color-active)] data-[checked]:not-data-[disabled]:active:border-[var(--ui-checkbox-checked-box-border-color-active)] data-[checked]:not-data-[disabled]:active:text-[var(--ui-checkbox-checked-icon-color-active)]',\n // indeterminate: idle / hover / active\n 'data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-idle)] data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-idle)] data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-idle)]',\n 'data-[indeterminate]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-indeterminate-box-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:border-[var(--ui-checkbox-indeterminate-box-border-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:text-[var(--ui-checkbox-indeterminate-icon-color-hover)]',\n 'data-[indeterminate]:not-data-[disabled]:active:bg-[var(--ui-checkbox-indeterminate-box-color-active)] data-[indeterminate]:not-data-[disabled]:active:border-[var(--ui-checkbox-indeterminate-box-border-color-active)] data-[indeterminate]:not-data-[disabled]:active:text-[var(--ui-checkbox-indeterminate-icon-color-active)]',\n // disabled (unchecked base + per-state overrides)\n 'data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-checkbox-unchecked-box-color-disabled)] data-[disabled]:border-[var(--ui-checkbox-unchecked-box-border-color-disabled)]',\n 'data-[disabled]:data-[checked]:bg-[var(--ui-checkbox-checked-box-color-disabled)] data-[disabled]:data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-disabled)] data-[disabled]:data-[checked]:text-[var(--ui-checkbox-checked-icon-color-disabled)]',\n 'data-[disabled]:data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-disabled)] data-[disabled]:data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-disabled)] data-[disabled]:data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-disabled)]',\n].join(' ');\n\nexport interface CheckboxProps\n extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n /** Optional label rendered beside the box; names the control. */\n label?: React.ReactNode;\n /** Optional secondary description rendered under the label. */\n description?: React.ReactNode;\n}\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(({ className, label, description, indeterminate, ...props }, ref) => {\n const reactId = React.useId();\n const labelId = label != null ? `${reactId}-label` : undefined;\n const descriptionId = description != null ? `${reactId}-description` : undefined;\n const hasContent = label != null || description != null;\n\n const box = (\n <CheckboxPrimitive.Root\n ref={ref}\n indeterminate={indeterminate}\n aria-labelledby={labelId}\n aria-describedby={descriptionId}\n className={cn(\n boxClasses,\n hasContent && 'mt-[var(--ui-checkbox-global-box-margin-x)]',\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n {indeterminate ? <MinusIcon size={16} /> : <CheckIcon size={16} />}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n\n if (!hasContent) return box;\n\n return (\n <label className=\"inline-flex max-w-[var(--ui-checkbox-global-container-width-max)] min-w-[var(--ui-checkbox-global-container-width-min)] cursor-pointer items-start gap-[var(--ui-checkbox-global-container-gap)]\">\n {box}\n <span className=\"flex max-w-[var(--ui-checkbox-global-container-content-width-max)] flex-col gap-[var(--ui-checkbox-global-container-content-gap)]\">\n {label != null && (\n <span\n id={labelId}\n className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-label-color)]\"\n >\n {label}\n </span>\n )}\n {description != null && (\n <span\n id={descriptionId}\n className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-description-color)]\"\n >\n {description}\n </span>\n )}\n </span>\n </label>\n );\n});\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"names":["boxClasses","Checkbox","React","className","label","description","indeterminate","props","ref","reactId","labelId","descriptionId","hasContent","box","jsx","CheckboxPrimitive","cn","MinusIcon","CheckIcon","jsxs"],"mappings":";;;;;AA8BA,MAAMA,IAAa;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"checkbox.js","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport {\n CheckIcon,\n MinusIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Checkbox primitive, themed by the dedicated next-gen\n// `--ui-checkbox-*` token tier from @acronis-platform/tokens-pd. The box has three\n// logical states — `unchecked` (the base), `checked`, and `indeterminate` — each\n// with its own per-interaction (idle / hover / active / disabled) fill\n// (`*-box-color-*`), border (`*-box-border-color-*`), and glyph (`*-icon-color-*`)\n// tokens. `unchecked` is the base layer (lowest specificity); `data-[checked]` /\n// `data-[indeterminate]` override it (Base UI marks an indeterminate box with both\n// data-unchecked AND data-indeterminate, so the single-attribute overrides win on\n// specificity), and `data-[disabled]:data-[<state>]` overrides those in turn. The\n// glyph (check when checked, minus when indeterminate) inherits the Root's text\n// color via the Indicator's `text-current`. Box geometry (16px size, 2px radius)\n// comes from `--ui-checkbox-global-box-*`; the focus ring uses `--ui-focus-primary`.\n//\n// An optional `label` / `description` compose the full Figma field: the box, an\n// optional label, and an optional description stacked beside it. When either is\n// present the whole row is a `<label>` (so clicking the text toggles the box — a\n// Base UI checkbox renders a labelable <button>), the box gets a top margin of\n// `--ui-checkbox-global-box-margin-x` (4px = (line-height 24 − box 16) / 2, the\n// design's box alignment margin) to center it on the first text line, and the\n// box is wired to the text via aria-labelledby / aria-describedby. With neither,\n// the box renders on its own (name it with `aria-label`).\nconst boxClasses = [\n // geometry + focus ring\n // `align-middle` keeps the box vertically centered when it sits inline next to\n // text (e.g. in a table cell) rather than defaulting to the text baseline.\n 'inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border align-middle transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0',\n // unchecked (base): idle / hover / active\n 'bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]',\n 'not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]',\n 'not-data-[disabled]:active:bg-[var(--ui-checkbox-unchecked-box-color-active)] not-data-[disabled]:active:border-[var(--ui-checkbox-unchecked-box-border-color-active)]',\n // checked: idle / hover / active\n 'data-[checked]:bg-[var(--ui-checkbox-checked-box-color-idle)] data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-idle)] data-[checked]:text-[var(--ui-checkbox-checked-icon-color-idle)]',\n 'data-[checked]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-checked-box-color-hover)] data-[checked]:not-data-[disabled]:hover:border-[var(--ui-checkbox-checked-box-border-color-hover)] data-[checked]:not-data-[disabled]:hover:text-[var(--ui-checkbox-checked-icon-color-hover)]',\n 'data-[checked]:not-data-[disabled]:active:bg-[var(--ui-checkbox-checked-box-color-active)] data-[checked]:not-data-[disabled]:active:border-[var(--ui-checkbox-checked-box-border-color-active)] data-[checked]:not-data-[disabled]:active:text-[var(--ui-checkbox-checked-icon-color-active)]',\n // indeterminate: idle / hover / active\n 'data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-idle)] data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-idle)] data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-idle)]',\n 'data-[indeterminate]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-indeterminate-box-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:border-[var(--ui-checkbox-indeterminate-box-border-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:text-[var(--ui-checkbox-indeterminate-icon-color-hover)]',\n 'data-[indeterminate]:not-data-[disabled]:active:bg-[var(--ui-checkbox-indeterminate-box-color-active)] data-[indeterminate]:not-data-[disabled]:active:border-[var(--ui-checkbox-indeterminate-box-border-color-active)] data-[indeterminate]:not-data-[disabled]:active:text-[var(--ui-checkbox-indeterminate-icon-color-active)]',\n // disabled (unchecked base + per-state overrides)\n 'data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-checkbox-unchecked-box-color-disabled)] data-[disabled]:border-[var(--ui-checkbox-unchecked-box-border-color-disabled)]',\n 'data-[disabled]:data-[checked]:bg-[var(--ui-checkbox-checked-box-color-disabled)] data-[disabled]:data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-disabled)] data-[disabled]:data-[checked]:text-[var(--ui-checkbox-checked-icon-color-disabled)]',\n 'data-[disabled]:data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-disabled)] data-[disabled]:data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-disabled)] data-[disabled]:data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-disabled)]',\n].join(' ');\n\nexport interface CheckboxProps\n extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n /** Optional label rendered beside the box; names the control. */\n label?: React.ReactNode;\n /** Optional secondary description rendered under the label. */\n description?: React.ReactNode;\n}\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(({ className, label, description, indeterminate, ...props }, ref) => {\n const reactId = React.useId();\n const labelId = label != null ? `${reactId}-label` : undefined;\n const descriptionId = description != null ? `${reactId}-description` : undefined;\n const hasContent = label != null || description != null;\n\n const box = (\n <CheckboxPrimitive.Root\n ref={ref}\n indeterminate={indeterminate}\n aria-labelledby={labelId}\n aria-describedby={descriptionId}\n className={cn(\n boxClasses,\n hasContent && 'mt-[var(--ui-checkbox-global-box-margin-x)]',\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n {indeterminate ? <MinusIcon size={16} /> : <CheckIcon size={16} />}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n\n if (!hasContent) return box;\n\n return (\n <label className=\"inline-flex max-w-[var(--ui-checkbox-global-container-width-max)] min-w-[var(--ui-checkbox-global-container-width-min)] cursor-pointer items-start gap-[var(--ui-checkbox-global-container-gap)]\">\n {box}\n <span className=\"flex max-w-[var(--ui-checkbox-global-container-content-width-max)] flex-col gap-[var(--ui-checkbox-global-container-content-gap)]\">\n {label != null && (\n <span\n id={labelId}\n className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-label-color)]\"\n >\n {label}\n </span>\n )}\n {description != null && (\n <span\n id={descriptionId}\n className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-description-color)]\"\n >\n {description}\n </span>\n )}\n </span>\n </label>\n );\n});\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"names":["boxClasses","Checkbox","React","className","label","description","indeterminate","props","ref","reactId","labelId","descriptionId","hasContent","box","jsx","CheckboxPrimitive","cn","MinusIcon","CheckIcon","jsxs"],"mappings":";;;;;AA8BA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,EAIjB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG,GAUJC,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,eAAAC,GAAe,GAAGC,EAAA,GAASC,MAAQ;AACrE,QAAMC,IAAUP,EAAM,MAAA,GAChBQ,IAAUN,KAAS,OAAO,GAAGK,CAAO,WAAW,QAC/CE,IAAgBN,KAAe,OAAO,GAAGI,CAAO,iBAAiB,QACjEG,IAAaR,KAAS,QAAQC,KAAe,MAE7CQ,IACJ,gBAAAC;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,KAAAP;AAAA,MACA,eAAAF;AAAA,MACA,mBAAiBI;AAAA,MACjB,oBAAkBC;AAAA,MAClB,WAAWK;AAAA,QACThB;AAAA,QACAY,KAAc;AAAA,QACdT;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAEJ,4BAACQ,EAAkB,WAAlB,EAA4B,WAAU,iDACpC,UAAAT,IAAgB,gBAAAQ,EAACG,GAAA,EAAU,MAAM,IAAI,IAAK,gBAAAH,EAACI,GAAA,EAAU,MAAM,IAAI,EAAA,CAClE;AAAA,IAAA;AAAA,EAAA;AAIJ,SAAKN,IAGH,gBAAAO,EAAC,SAAA,EAAM,WAAU,oMACd,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAM,EAAC,QAAA,EAAK,WAAU,qIACb,UAAA;AAAA,MAAAf,KAAS,QACR,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIJ;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJC,KAAe,QACd,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIH;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GACF,IAvBsBQ;AAyB1B,CAAC;AACDZ,EAAS,cAAc;"}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { jsx as r, jsxs as n, Fragment as u } from "react/jsx-runtime";
|
|
2
|
+
import * as d from "react";
|
|
3
|
+
import { Dialog as a } from "@base-ui/react/dialog";
|
|
4
|
+
import { TimesIcon as b } from "@acronis-platform/icons-react/stroke-mono";
|
|
5
|
+
import { cva as g } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
|
|
6
|
+
import { cn as s } from "../../../lib/utils.js";
|
|
7
|
+
const x = g(
|
|
8
|
+
"fixed z-50 flex flex-col overflow-hidden bg-muted text-foreground shadow-lg duration-300 data-[open]:animate-in data-[closed]:animate-out",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
side: {
|
|
12
|
+
top: "inset-x-0 top-0 max-h-[80vh] border-b border-border data-[open]:slide-in-from-top data-[closed]:slide-out-to-top",
|
|
13
|
+
bottom: "inset-x-0 bottom-0 max-h-[80vh] border-t border-border data-[open]:slide-in-from-bottom data-[closed]:slide-out-to-bottom",
|
|
14
|
+
left: "inset-y-0 left-0 h-full w-3/4 border-r border-border data-[open]:slide-in-from-left data-[closed]:slide-out-to-left sm:max-w-md",
|
|
15
|
+
right: "inset-y-0 right-0 h-full w-3/4 border-l border-border data-[open]:slide-in-from-right data-[closed]:slide-out-to-right sm:max-w-md"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
defaultVariants: {
|
|
19
|
+
side: "right"
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
), j = a.Root, z = a.Trigger, F = a.Portal, H = a.Close, l = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
|
|
23
|
+
a.Backdrop,
|
|
24
|
+
{
|
|
25
|
+
ref: t,
|
|
26
|
+
className: s(
|
|
27
|
+
"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",
|
|
28
|
+
e
|
|
29
|
+
),
|
|
30
|
+
...o
|
|
31
|
+
}
|
|
32
|
+
));
|
|
33
|
+
l.displayName = "SheetOverlay";
|
|
34
|
+
const y = d.forwardRef(
|
|
35
|
+
({
|
|
36
|
+
className: e,
|
|
37
|
+
children: o,
|
|
38
|
+
side: t,
|
|
39
|
+
portal: m = !0,
|
|
40
|
+
portalContainer: f,
|
|
41
|
+
keepMounted: c,
|
|
42
|
+
...p
|
|
43
|
+
}, h) => {
|
|
44
|
+
const i = /* @__PURE__ */ n(u, { children: [
|
|
45
|
+
/* @__PURE__ */ r(l, {}),
|
|
46
|
+
/* @__PURE__ */ r(
|
|
47
|
+
a.Popup,
|
|
48
|
+
{
|
|
49
|
+
ref: h,
|
|
50
|
+
className: s(x({ side: t }), e),
|
|
51
|
+
...p,
|
|
52
|
+
children: o
|
|
53
|
+
}
|
|
54
|
+
)
|
|
55
|
+
] });
|
|
56
|
+
return m ? /* @__PURE__ */ r(a.Portal, { container: f, keepMounted: c, children: i }) : i;
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
y.displayName = "SheetContent";
|
|
60
|
+
const S = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
|
|
61
|
+
"div",
|
|
62
|
+
{
|
|
63
|
+
ref: t,
|
|
64
|
+
className: s(
|
|
65
|
+
"flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background px-5 py-4",
|
|
66
|
+
e
|
|
67
|
+
),
|
|
68
|
+
...o
|
|
69
|
+
}
|
|
70
|
+
));
|
|
71
|
+
S.displayName = "SheetHeader";
|
|
72
|
+
const v = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
|
|
73
|
+
"div",
|
|
74
|
+
{
|
|
75
|
+
ref: t,
|
|
76
|
+
className: s(
|
|
77
|
+
"flex h-16 shrink-0 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4",
|
|
78
|
+
e
|
|
79
|
+
),
|
|
80
|
+
...o
|
|
81
|
+
}
|
|
82
|
+
));
|
|
83
|
+
v.displayName = "SheetFooter";
|
|
84
|
+
const N = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r("div", { ref: t, className: s("flex-1 overflow-auto p-6", e), ...o }));
|
|
85
|
+
N.displayName = "SheetBody";
|
|
86
|
+
const w = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
|
|
87
|
+
a.Title,
|
|
88
|
+
{
|
|
89
|
+
ref: t,
|
|
90
|
+
className: s(
|
|
91
|
+
"flex-1 text-lg font-semibold leading-7 text-foreground",
|
|
92
|
+
e
|
|
93
|
+
),
|
|
94
|
+
...o
|
|
95
|
+
}
|
|
96
|
+
));
|
|
97
|
+
w.displayName = "SheetTitle";
|
|
98
|
+
const R = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
|
|
99
|
+
a.Description,
|
|
100
|
+
{
|
|
101
|
+
ref: t,
|
|
102
|
+
className: s("text-sm text-muted-foreground", e),
|
|
103
|
+
...o
|
|
104
|
+
}
|
|
105
|
+
));
|
|
106
|
+
R.displayName = "SheetDescription";
|
|
107
|
+
const C = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ n(
|
|
108
|
+
a.Close,
|
|
109
|
+
{
|
|
110
|
+
ref: t,
|
|
111
|
+
className: s(
|
|
112
|
+
"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",
|
|
113
|
+
e
|
|
114
|
+
),
|
|
115
|
+
...o,
|
|
116
|
+
children: [
|
|
117
|
+
/* @__PURE__ */ r(b, { size: 24 }),
|
|
118
|
+
/* @__PURE__ */ r("span", { className: "sr-only", children: "Close" })
|
|
119
|
+
]
|
|
120
|
+
}
|
|
121
|
+
));
|
|
122
|
+
C.displayName = "SheetCloseButton";
|
|
123
|
+
export {
|
|
124
|
+
j as Sheet,
|
|
125
|
+
N as SheetBody,
|
|
126
|
+
H as SheetClose,
|
|
127
|
+
C as SheetCloseButton,
|
|
128
|
+
y as SheetContent,
|
|
129
|
+
R as SheetDescription,
|
|
130
|
+
v as SheetFooter,
|
|
131
|
+
S as SheetHeader,
|
|
132
|
+
l as SheetOverlay,
|
|
133
|
+
F as SheetPortal,
|
|
134
|
+
w as SheetTitle,
|
|
135
|
+
z as SheetTrigger,
|
|
136
|
+
x as sheetVariants
|
|
137
|
+
};
|
|
138
|
+
//# sourceMappingURL=sheet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sheet.js","sources":["../../../../src/components/ui/sheet/sheet.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 `sheet`\n// (packages/ui-legacy/src/components/ui/sheet.tsx). A modal side panel — the\n// same Base UI Dialog primitive the `Dialog` component uses (keyboard, focus\n// trap, scroll lock, ARIA come from Base UI), but anchored to a screen edge with\n// a slide transition. In the Vue kit this was `Details`; it's re-exported under\n// `Details*` aliases for a 1:1 drop-in. No `--ui-sheet-*` token tier exists yet,\n// so this design-pending v1 mirrors the Dialog family's semantic theming:\n// • overlay -> var(--ui-background-overlay-primary)\n// • panel -> bg-muted = --ui-background-surface-secondary\n// • header / footer -> bg-background = --ui-background-surface-primary bars,\n// divided by border-border\n// • title -> text-foreground / description -> text-muted-foreground\n// • close -> text-muted-foreground → hover text-foreground, focus ring\n// var(--ui-focus-primary)\n// Enter/exit slide animations use `tw-animate-css` (imported in styles/index.css),\n// keyed to Base UI's data-[open] / data-[closed] state attributes. Reconcile\n// against the real design with `/figma-component Sheet <url> --update`\n// (Cyber-Compliance node 3442-31542) once the mockup is ready for dev.\n\nconst sheetVariants = cva(\n 'fixed z-50 flex flex-col overflow-hidden bg-muted text-foreground shadow-lg duration-300 data-[open]:animate-in data-[closed]:animate-out',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 max-h-[80vh] border-b border-border data-[open]:slide-in-from-top data-[closed]:slide-out-to-top',\n bottom:\n 'inset-x-0 bottom-0 max-h-[80vh] border-t border-border data-[open]:slide-in-from-bottom data-[closed]:slide-out-to-bottom',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[open]:slide-in-from-left data-[closed]:slide-out-to-left sm:max-w-md',\n right:\n 'inset-y-0 right-0 h-full w-3/4 border-l border-border data-[open]:slide-in-from-right data-[closed]:slide-out-to-right sm:max-w-md',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n }\n);\n\nconst Sheet = DialogPrimitive.Root;\n\nconst SheetTrigger = DialogPrimitive.Trigger;\n\nconst SheetPortal = DialogPrimitive.Portal;\n\nconst SheetClose = DialogPrimitive.Close;\n\nconst SheetOverlay = 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));\nSheetOverlay.displayName = 'SheetOverlay';\n\nexport interface SheetContentProps\n extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup>,\n VariantProps<typeof sheetVariants> {\n /** Screen edge the panel anchors to. Defaults to `right`. */\n side?: VariantProps<typeof sheetVariants>['side'];\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 `SheetPortal`, 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 SheetContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Popup>,\n SheetContentProps\n>(\n (\n {\n className,\n children,\n side,\n portal = true,\n portalContainer,\n keepMounted,\n ...props\n },\n ref\n ) => {\n const popup = (\n <>\n <SheetOverlay />\n <DialogPrimitive.Popup\n ref={ref}\n className={cn(sheetVariants({ side }), 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);\nSheetContent.displayName = 'SheetContent';\n\nconst SheetHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background px-5 py-4',\n className\n )}\n {...props}\n />\n));\nSheetHeader.displayName = 'SheetHeader';\n\nconst SheetFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex h-16 shrink-0 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4',\n className\n )}\n {...props}\n />\n));\nSheetFooter.displayName = 'SheetFooter';\n\nconst SheetBody = 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));\nSheetBody.displayName = 'SheetBody';\n\nconst SheetTitle = 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-lg font-semibold leading-7 text-foreground',\n className\n )}\n {...props}\n />\n));\nSheetTitle.displayName = 'SheetTitle';\n\nconst SheetDescription = 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));\nSheetDescription.displayName = 'SheetDescription';\n\nconst SheetCloseButton = 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));\nSheetCloseButton.displayName = 'SheetCloseButton';\n\nexport {\n Sheet,\n SheetTrigger,\n SheetPortal,\n SheetClose,\n SheetCloseButton,\n SheetOverlay,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetBody,\n SheetTitle,\n SheetDescription,\n sheetVariants,\n};\n"],"names":["sheetVariants","cva","Sheet","DialogPrimitive","SheetTrigger","SheetPortal","SheetClose","SheetOverlay","React","className","props","ref","jsx","cn","SheetContent","children","side","portal","portalContainer","keepMounted","popup","jsxs","Fragment","SheetHeader","SheetFooter","SheetBody","SheetTitle","SheetDescription","SheetCloseButton","TimesIcon"],"mappings":"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"}
|
|
@@ -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 }, s) => /* @__PURE__ */ l(
|
|
42
42
|
"tr",
|
|
43
43
|
{
|
|
44
|
-
ref:
|
|
44
|
+
ref: s,
|
|
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: s = !1, onSort: i, ...c }, d) => /* @__PURE__ */ l(
|
|
61
61
|
"th",
|
|
62
62
|
{
|
|
63
63
|
ref: d,
|
|
64
|
-
"aria-sort":
|
|
64
|
+
"aria-sort": s === "asc" ? "ascending" : s === "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",
|
|
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: i,
|
|
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: s })
|
|
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",
|
|
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
|
|
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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"}
|