@acronis-platform/ui-react 0.44.0 → 0.45.0

package/dist/components/ui/description-list/description-list.js

@@ -0,0 +1,54 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as r from "react";
+import { cn as a } from "../../../lib/utils.js";
+const o = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t("dl", { ref: i, className: a("w-full", s), ...e }));
+o.displayName = "DescriptionList";
+const c = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: i,
+    className: a(
+      // `px-6` insets the content while the `border-t` divider stays full-bleed
+      // (the Figma card look). Override the padding via className when the
+      // surrounding container already pads (e.g. `-mx-6` inside a padded body).
+      "grid grid-cols-[var(--description-list-label,14rem)_minmax(0,1fr)] gap-x-4 border-t border-border px-6 py-3 text-sm leading-6",
+      s
+    ),
+    ...e
+  }
+));
+c.displayName = "DescriptionListItem";
+const n = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t("dt", { ref: i, className: a("text-foreground", s), ...e }));
+n.displayName = "DescriptionListLabel";
+const p = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t(
+  "dd",
+  {
+    ref: i,
+    className: a(
+      "flex min-w-0 items-start gap-2 text-foreground [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
+      s
+    ),
+    ...e
+  }
+));
+p.displayName = "DescriptionListValue";
+const d = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t("p", { ref: i, className: a("text-muted-foreground", s), ...e }));
+d.displayName = "DescriptionListValueDescription";
+const l = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: i,
+    className: a("flex flex-wrap items-center gap-4", s),
+    ...e
+  }
+));
+l.displayName = "DescriptionListActions";
+export {
+  o as DescriptionList,
+  l as DescriptionListActions,
+  c as DescriptionListItem,
+  n as DescriptionListLabel,
+  p as DescriptionListValue,
+  d as DescriptionListValueDescription
+};
+//# sourceMappingURL=description-list.js.map

package/dist/components/ui/description-list/description-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description-list.js","sources":["../../../../src/components/ui/description-list/description-list.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// A key/value data list — rows of `label → value`, where the value can be plain\n// text, a status (leading icon + value + a muted description), or action links.\n// Built from the Figma \"Service status\" design (Cyber-Compliance node\n// 3001-20448). Semantic HTML: a `<dl>` of `<div>`-grouped `<dt>`/`<dd>` rows.\n// No `--ui-description-list-*` tier — it composes the shared semantic tokens:\n//   • label / value      -> text-foreground (--ui-text-on-surface-primary)\n//   • description         -> text-muted-foreground (--ui-text-on-surface-secondary)\n//   • row divider         -> border-border (--ui-border-on-surface-border)\n//   • status icon color   -> caller-provided (--ui-text-on-status-*)\n//   • action links        -> compose the `Link` component\n// The 2-column row grid uses a fixed label column (overridable per item via\n// className / the `--description-list-label` custom property).\n\nconst DescriptionList = React.forwardRef<\n  HTMLDListElement,\n  React.HTMLAttributes<HTMLDListElement>\n>(({ className, ...props }, ref) => (\n  <dl ref={ref} className={cn('w-full', className)} {...props} />\n));\nDescriptionList.displayName = 'DescriptionList';\n\nconst DescriptionListItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      // `px-6` insets the content while the `border-t` divider stays full-bleed\n      // (the Figma card look). Override the padding via className when the\n      // surrounding container already pads (e.g. `-mx-6` inside a padded body).\n      'grid grid-cols-[var(--description-list-label,14rem)_minmax(0,1fr)] gap-x-4 border-t border-border px-6 py-3 text-sm leading-6',\n      className\n    )}\n    {...props}\n  />\n));\nDescriptionListItem.displayName = 'DescriptionListItem';\n\nconst DescriptionListLabel = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <dt ref={ref} className={cn('text-foreground', className)} {...props} />\n));\nDescriptionListLabel.displayName = 'DescriptionListLabel';\n\nconst DescriptionListValue = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <dd\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-start gap-2 text-foreground [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0',\n      className\n    )}\n    {...props}\n  />\n));\nDescriptionListValue.displayName = 'DescriptionListValue';\n\nconst DescriptionListValueDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p ref={ref} className={cn('text-muted-foreground', className)} {...props} />\n));\nDescriptionListValueDescription.displayName = 'DescriptionListValueDescription';\n\nconst DescriptionListActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-wrap items-center gap-4', className)}\n    {...props}\n  />\n));\nDescriptionListActions.displayName = 'DescriptionListActions';\n\nexport {\n  DescriptionList,\n  DescriptionListItem,\n  DescriptionListLabel,\n  DescriptionListValue,\n  DescriptionListValueDescription,\n  DescriptionListActions,\n};\n"],"names":["DescriptionList","React","className","props","ref","cn","DescriptionListItem","jsx","DescriptionListLabel","DescriptionListValue","DescriptionListValueDescription","DescriptionListActions"],"mappings":";;;AAiBA,MAAMA,IAAkBC,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,MAAA,EAAG,KAAAA,GAAU,WAAWC,EAAG,UAAUH,CAAS,GAAI,GAAGC,GAAO,CAC9D;AACDH,EAAgB,cAAc;AAE9B,MAAMM,IAAsBL,EAAM,WAGhC,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAG;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAH;AAAA,IACA,WAAWC;AAAA;AAAA;AAAA;AAAA,MAIT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDG,EAAoB,cAAc;AAElC,MAAME,IAAuBP,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,MAAA,EAAG,KAAAA,GAAU,WAAWC,EAAG,mBAAmBH,CAAS,GAAI,GAAGC,GAAO,CACvE;AACDK,EAAqB,cAAc;AAEnC,MAAMC,IAAuBR,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAG;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAH;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAqB,cAAc;AAEnC,MAAMC,IAAkCT,EAAM,WAG5C,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,KAAA,EAAE,KAAAA,GAAU,WAAWC,EAAG,yBAAyBH,CAAS,GAAI,GAAGC,GAAO,CAC5E;AACDO,EAAgC,cAAc;AAE9C,MAAMC,IAAyBV,EAAM,WAGnC,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAG;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAH;AAAA,IACA,WAAWC,EAAG,qCAAqCH,CAAS;AAAA,IAC3D,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAuB,cAAc;"}

package/dist/components/ui/sheet/sheet-details.js

@@ -0,0 +1,80 @@
+import { jsxs as l, jsx as e, Fragment as S } from "react/jsx-runtime";
+import { Sheet as g, SheetTrigger as D, SheetContent as x, SheetHeader as N, SheetTitle as E, SheetCloseButton as L, SheetBody as T, SheetFooter as b } from "./sheet.js";
+import { Spinner as j } from "../spinner/spinner.js";
+import { Empty as w, EmptyHeader as B, EmptyTitle as v, EmptyDescription as C } from "../empty/empty.js";
+import { DescriptionList as F, DescriptionListItem as H, DescriptionListLabel as I, DescriptionListValue as V } from "../description-list/description-list.js";
+function k({
+  contentState: t,
+  properties: i,
+  children: n,
+  emptyTitle: h,
+  emptyDescription: d,
+  errorTitle: m,
+  errorDescription: s
+}) {
+  if (t === "loading")
+    return /* @__PURE__ */ e("div", { className: "flex h-40 items-center justify-center", children: /* @__PURE__ */ e(j, {}) });
+  if (t === "empty" || t === "error") {
+    const r = t === "error";
+    return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ l(B, { children: [
+      /* @__PURE__ */ e(v, { children: r ? m ?? "Something went wrong" : h ?? "Nothing to show" }),
+      /* @__PURE__ */ e(C, { children: r ? s ?? "The details could not be loaded." : d ?? "There are no details to display yet." })
+    ] }) });
+  }
+  return n ? /* @__PURE__ */ e(S, { children: n }) : i != null && i.length ? /* @__PURE__ */ e(
+    F,
+    {
+      className: "-mx-6",
+      style: { "--description-list-label": "9rem" },
+      children: i.map((r, o) => /* @__PURE__ */ l(H, { children: [
+        /* @__PURE__ */ e(I, { className: "text-muted-foreground", children: r.label }),
+        /* @__PURE__ */ e(V, { className: "font-medium", children: r.value })
+      ] }, o))
+    }
+  ) : null;
+}
+function q({
+  open: t,
+  defaultOpen: i,
+  onOpenChange: n,
+  title: h,
+  side: d = "right",
+  contentState: m = "content",
+  properties: s,
+  children: r,
+  actions: o,
+  trigger: c,
+  emptyTitle: a,
+  emptyDescription: u,
+  errorTitle: f,
+  errorDescription: y,
+  portalContainer: p
+}) {
+  return /* @__PURE__ */ l(g, { open: t, defaultOpen: i, onOpenChange: n, children: [
+    c ? /* @__PURE__ */ e(D, { render: c }) : null,
+    /* @__PURE__ */ l(x, { side: d, portalContainer: p, children: [
+      /* @__PURE__ */ l(N, { children: [
+        /* @__PURE__ */ e(E, { children: h }),
+        /* @__PURE__ */ e(L, {})
+      ] }),
+      /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(
+        k,
+        {
+          contentState: m,
+          properties: s,
+          emptyTitle: a,
+          emptyDescription: u,
+          errorTitle: f,
+          errorDescription: y,
+          children: r
+        }
+      ) }),
+      o ? /* @__PURE__ */ e(b, { children: o }) : null
+    ] })
+  ] });
+}
+q.displayName = "SheetDetails";
+export {
+  q as SheetDetails
+};
+//# sourceMappingURL=sheet-details.js.map

package/dist/components/ui/sheet/sheet-details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-details.js","sources":["../../../../src/components/ui/sheet/sheet-details.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionList,\n  DescriptionListItem,\n  DescriptionListLabel,\n  DescriptionListValue,\n} from '../description-list';\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from '../empty';\nimport { Spinner } from '../spinner';\nimport {\n  Sheet,\n  SheetBody,\n  SheetCloseButton,\n  type SheetContentProps,\n  SheetContent,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from './sheet';\n\n// `SheetDetails` is the preset for the `sheet-detail-panel` usage pattern — the\n// \"easy path that IS the pattern\". It bakes a right-anchored Sheet's header\n// (title + close), a body that switches by `contentState`\n// (loading → Spinner, empty/error → Empty, else a key/value property list or\n// custom children), and an optional footer of actions — so consumers don't\n// re-assemble (or hand-roll) the recipe. For anything outside the recipe, compose\n// the `Sheet*` parts directly. (React composition of the Vue kit's `Details`.)\n\nexport interface SheetDetailsProperty {\n  label: React.ReactNode;\n  value: React.ReactNode;\n}\n\nexport type SheetDetailsContentState = 'content' | 'loading' | 'empty' | 'error';\n\nexport interface SheetDetailsProps {\n  /** Controlled open state. Pair with `onOpenChange`. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Fires when the sheet opens or closes. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  /** Panel title (header). Also the accessible name. */\n  title: React.ReactNode;\n  /** Edge the panel anchors to. Defaults to `right`. */\n  side?: SheetContentProps['side'];\n  /** Which body view to show. Defaults to `content`. */\n  contentState?: SheetDetailsContentState;\n  /** Key/value rows rendered as the body in the `content` state (unless `children`). */\n  properties?: SheetDetailsProperty[];\n  /** Custom body for the `content` state — overrides `properties`. */\n  children?: React.ReactNode;\n  /** Footer action(s). Omit for no footer. */\n  actions?: React.ReactNode;\n  /** Optional trigger element (rendered via the Sheet trigger's `render`). */\n  trigger?: React.ReactElement;\n  /** Empty-state copy (`contentState=\"empty\"`). */\n  emptyTitle?: React.ReactNode;\n  emptyDescription?: React.ReactNode;\n  /** Error-state copy (`contentState=\"error\"`). */\n  errorTitle?: React.ReactNode;\n  errorDescription?: React.ReactNode;\n  /** Portal container (shadow-root mount for isolated previews). */\n  portalContainer?: SheetContentProps['portalContainer'];\n}\n\nfunction SheetDetailsBody({\n  contentState,\n  properties,\n  children,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n}: Pick<\n  SheetDetailsProps,\n  | 'contentState'\n  | 'properties'\n  | 'children'\n  | 'emptyTitle'\n  | 'emptyDescription'\n  | 'errorTitle'\n  | 'errorDescription'\n>) {\n  if (contentState === 'loading') {\n    return (\n      <div className=\"flex h-40 items-center justify-center\">\n        <Spinner />\n      </div>\n    );\n  }\n  if (contentState === 'empty' || contentState === 'error') {\n    const isError = contentState === 'error';\n    return (\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>\n            {isError\n              ? (errorTitle ?? 'Something went wrong')\n              : (emptyTitle ?? 'Nothing to show')}\n          </EmptyTitle>\n          <EmptyDescription>\n            {isError\n              ? (errorDescription ?? 'The details could not be loaded.')\n              : (emptyDescription ?? 'There are no details to display yet.')}\n          </EmptyDescription>\n        </EmptyHeader>\n      </Empty>\n    );\n  }\n  if (children) return <>{children}</>;\n  if (properties?.length) {\n    // Render through DescriptionList. `-mx-6` cancels the SheetBody padding so\n    // the row dividers go full-bleed while the content stays aligned at the\n    // panel's 24px inset; the label column is tightened for the narrow panel.\n    return (\n      <DescriptionList\n        className=\"-mx-6\"\n        style={{ '--description-list-label': '9rem' } as React.CSSProperties}\n      >\n        {properties.map((p, i) => (\n          <DescriptionListItem key={i}>\n            <DescriptionListLabel className=\"text-muted-foreground\">\n              {p.label}\n            </DescriptionListLabel>\n            <DescriptionListValue className=\"font-medium\">\n              {p.value}\n            </DescriptionListValue>\n          </DescriptionListItem>\n        ))}\n      </DescriptionList>\n    );\n  }\n  return null;\n}\n\nfunction SheetDetails({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  side = 'right',\n  contentState = 'content',\n  properties,\n  children,\n  actions,\n  trigger,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n  portalContainer,\n}: SheetDetailsProps) {\n  return (\n    <Sheet open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {trigger ? <SheetTrigger render={trigger} /> : null}\n      <SheetContent side={side} portalContainer={portalContainer}>\n        <SheetHeader>\n          <SheetTitle>{title}</SheetTitle>\n          <SheetCloseButton />\n        </SheetHeader>\n        <SheetBody>\n          <SheetDetailsBody\n            contentState={contentState}\n            properties={properties}\n            emptyTitle={emptyTitle}\n            emptyDescription={emptyDescription}\n            errorTitle={errorTitle}\n            errorDescription={errorDescription}\n          >\n            {children}\n          </SheetDetailsBody>\n        </SheetBody>\n        {actions ? <SheetFooter>{actions}</SheetFooter> : null}\n      </SheetContent>\n    </Sheet>\n  );\n}\nSheetDetails.displayName = 'SheetDetails';\n\nexport { SheetDetails };\n"],"names":["SheetDetailsBody","contentState","properties","children","emptyTitle","emptyDescription","errorTitle","errorDescription","jsx","Spinner","isError","Empty","jsxs","EmptyHeader","EmptyTitle","EmptyDescription","Fragment","DescriptionList","p","i","DescriptionListItem","DescriptionListLabel","DescriptionListValue","SheetDetails","open","defaultOpen","onOpenChange","title","side","actions","trigger","portalContainer","Sheet","SheetTrigger","SheetContent","SheetHeader","SheetTitle","SheetCloseButton","SheetBody","SheetFooter"],"mappings":";;;;;AAyEA,SAASA,EAAiB;AAAA,EACxB,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AACF,GASG;AACD,MAAIN,MAAiB;AACnB,6BACG,OAAA,EAAI,WAAU,yCACb,UAAA,gBAAAO,EAACC,KAAQ,GACX;AAGJ,MAAIR,MAAiB,WAAWA,MAAiB,SAAS;AACxD,UAAMS,IAAUT,MAAiB;AACjC,WACE,gBAAAO,EAACG,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACM,GAAA,EACE,UAAAJ,IACIJ,KAAc,yBACdF,KAAc,mBACrB;AAAA,wBACCW,GAAA,EACE,UAAAL,IACIH,KAAoB,qCACpBF,KAAoB,uCAAA,CAC3B;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAEJ;AACA,SAAIF,IAAiB,gBAAAK,EAAAQ,GAAA,EAAG,UAAAb,EAAA,CAAS,IAC7BD,KAAA,QAAAA,EAAY,SAKZ,gBAAAM;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,4BAA4B,OAAA;AAAA,MAEpC,YAAW,IAAI,CAACC,GAAGC,wBACjBC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAZ,EAACa,GAAA,EAAqB,WAAU,yBAC7B,UAAAH,EAAE,OACL;AAAA,QACA,gBAAAV,EAACc,GAAA,EAAqB,WAAU,eAC7B,YAAE,MAAA,CACL;AAAA,MAAA,EAAA,GANwBH,CAO1B,CACD;AAAA,IAAA;AAAA,EAAA,IAIA;AACT;AAEA,SAASI,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAA3B,IAAe;AAAA,EACf,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAA0B;AAAA,EACA,SAAAC;AAAA,EACA,YAAA1B;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAwB;AACF,GAAsB;AACpB,SACE,gBAAAnB,EAACoB,GAAA,EAAM,MAAAR,GAAY,aAAAC,GAA0B,cAAAC,GAC1C,UAAA;AAAA,IAAAI,IAAU,gBAAAtB,EAACyB,GAAA,EAAa,QAAQH,EAAA,CAAS,IAAK;AAAA,IAC/C,gBAAAlB,EAACsB,GAAA,EAAa,MAAAN,GAAY,iBAAAG,GACxB,UAAA;AAAA,MAAA,gBAAAnB,EAACuB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAA3B,EAAC4B,KAAY,UAAAT,EAAA,CAAM;AAAA,0BAClBU,GAAA,CAAA,CAAiB;AAAA,MAAA,GACpB;AAAA,wBACCC,GAAA,EACC,UAAA,gBAAA9B;AAAA,QAACR;AAAA,QAAA;AAAA,UACC,cAAAC;AAAA,UACA,YAAAC;AAAA,UACA,YAAAE;AAAA,UACA,kBAAAC;AAAA,UACA,YAAAC;AAAA,UACA,kBAAAC;AAAA,UAEC,UAAAJ;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACC0B,IAAU,gBAAArB,EAAC+B,GAAA,EAAa,UAAAV,EAAA,CAAQ,IAAiB;AAAA,IAAA,EAAA,CACpD;AAAA,EAAA,GACF;AAEJ;AACAN,EAAa,cAAc;"}