@acronis-platform/ui-react 0.46.0 → 0.50.0

package/dist/components/ui/field/field.js

@@ -0,0 +1,189 @@
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import { Field as r } from "@base-ui/react/field";
+import { cva as n } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as l } from "../../../lib/utils.js";
+import { Separator as d } from "../separator/separator.js";
+import { labelClassName as s } from "../label/label.js";
+const f = n(
+  "group/field flex w-full gap-3 data-[invalid]:text-[var(--ui-text-on-status-danger)]",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+        horizontal: "flex-row items-center [&>[data-slot=field-label]]:flex-auto",
+        responsive: "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto"
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+function v({ className: e, orientation: t = "vertical", ...o }) {
+  return /* @__PURE__ */ a(
+    r.Root,
+    {
+      "data-slot": "field",
+      "data-orientation": t,
+      className: l(f({ orientation: t }), e),
+      ...o
+    }
+  );
+}
+function b({ className: e, ...t }) {
+  return /* @__PURE__ */ a(
+    r.Label,
+    {
+      "data-slot": "field-label",
+      className: l(
+        s,
+        "flex w-fit items-center gap-2 leading-snug group-data-[disabled]/field:opacity-50",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function N({ className: e, ...t }) {
+  return /* @__PURE__ */ a(
+    r.Control,
+    {
+      "data-slot": "field-control",
+      className: l(e),
+      ...t
+    }
+  );
+}
+function F({ className: e, ...t }) {
+  return /* @__PURE__ */ a(
+    r.Description,
+    {
+      "data-slot": "field-description",
+      className: l(
+        "text-sm font-normal leading-normal text-muted-foreground",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-[var(--ui-background-brand-secondary)]",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function w({ className: e, ...t }) {
+  return /* @__PURE__ */ a(
+    r.Error,
+    {
+      "data-slot": "field-error",
+      className: l(
+        "text-sm font-normal text-[var(--ui-text-on-status-danger)]",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function y({ className: e, ...t }) {
+  return /* @__PURE__ */ a(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: l(
+        "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function h({
+  className: e,
+  variant: t = "legend",
+  ...o
+}) {
+  return /* @__PURE__ */ a(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": t,
+      className: l(
+        "mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm",
+        e
+      ),
+      ...o
+    }
+  );
+}
+function k({ className: e, ...t }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: l(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 [&>[data-slot=field-group]]:gap-4",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function C({ className: e, ...t }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: l(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function L({ className: e, ...t }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "field-title",
+      className: l(
+        "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled]/field:opacity-50",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function S({ children: e, className: t, ...o }) {
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!e,
+      className: l("relative -my-2 h-5 text-sm", t),
+      ...o,
+      children: [
+        /* @__PURE__ */ a(d, { className: "absolute inset-0 top-1/2" }),
+        e && /* @__PURE__ */ a(
+          "span",
+          {
+            "data-slot": "field-separator-content",
+            className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+            children: e
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  v as Field,
+  C as FieldContent,
+  N as FieldControl,
+  F as FieldDescription,
+  w as FieldError,
+  k as FieldGroup,
+  b as FieldLabel,
+  h as FieldLegend,
+  S as FieldSeparator,
+  y as FieldSet,
+  L as FieldTitle
+};
+//# sourceMappingURL=field.js.map

package/dist/components/ui/field/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sources":["../../../../src/components/ui/field/field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Field as FieldPrimitive } from '@base-ui/react/field';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { labelClassName } from '../label';\nimport { Separator } from '../separator';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `field`\n// (packages/ui-legacy/src/components/ui/field.tsx), rebuilt on Base UI's `Field`\n// primitive. `Field` (Root) / `FieldLabel` / `FieldControl` / `FieldDescription` /\n// `FieldError` auto-wire the label↔control↔description↔error associations and\n// expose Base UI's validity state — no manual `htmlFor`/`id`/`aria-*`. The\n// structural parts (`FieldSet`, `FieldLegend`, `FieldGroup`, `FieldContent`,\n// `FieldTitle`, `FieldSeparator`) are styled markup (Base UI has no equivalent).\n// Field pairs with the *bare* controls — `InputBox`, `Checkbox`, `Switch`,\n// `RadioGroup` — not the self-contained `InputText`/`InputSearch` fields.\n\nconst fieldVariants = cva(\n  'group/field flex w-full gap-3 data-[invalid]:text-[var(--ui-text-on-status-danger)]',\n  {\n    variants: {\n      orientation: {\n        vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',\n        horizontal:\n          'flex-row items-center [&>[data-slot=field-label]]:flex-auto',\n        responsive:\n          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto',\n      },\n    },\n    defaultVariants: {\n      orientation: 'vertical',\n    },\n  }\n);\n\nexport interface FieldProps\n  extends Omit<React.ComponentProps<typeof FieldPrimitive.Root>, 'className'>,\n    VariantProps<typeof fieldVariants> {\n  className?: string;\n}\n\nfunction Field({ className, orientation = 'vertical', ...props }: FieldProps) {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldLabelProps\n  extends Omit<React.ComponentProps<typeof FieldPrimitive.Label>, 'className'> {\n  className?: string;\n}\n\nfunction FieldLabel({ className, ...props }: FieldLabelProps) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        labelClassName,\n        'flex w-fit items-center gap-2 leading-snug group-data-[disabled]/field:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldControlProps\n  extends Omit<React.ComponentProps<typeof FieldPrimitive.Control>, 'className'> {\n  className?: string;\n}\n\n// Thin wrapper over Base UI's Field.Control — usually used with `render` to wire\n// a bare ui-react control (e.g. `<FieldControl render={<InputBox />} />`), which\n// receives the field's id / aria-describedby / name automatically.\nfunction FieldControl({ className, ...props }: FieldControlProps) {\n  return (\n    <FieldPrimitive.Control\n      data-slot=\"field-control\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldDescriptionProps\n  extends Omit<\n    React.ComponentProps<typeof FieldPrimitive.Description>,\n    'className'\n  > {\n  className?: string;\n}\n\nfunction FieldDescription({ className, ...props }: FieldDescriptionProps) {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={cn(\n        'text-sm font-normal leading-normal text-muted-foreground',\n        '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-[var(--ui-background-brand-secondary)]',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldErrorProps\n  extends Omit<React.ComponentProps<typeof FieldPrimitive.Error>, 'className'> {\n  className?: string;\n}\n\nfunction FieldError({ className, ...props }: FieldErrorProps) {\n  return (\n    <FieldPrimitive.Error\n      data-slot=\"field-error\"\n      className={cn(\n        'text-sm font-normal text-[var(--ui-text-on-status-danger)]',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        'flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldLegendProps extends React.ComponentProps<'legend'> {\n  variant?: 'legend' | 'label';\n}\n\nfunction FieldLegend({\n  className,\n  variant = 'legend',\n  ...props\n}: FieldLegendProps) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        'mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        'group/field-group @container/field-group flex w-full flex-col gap-7 [&>[data-slot=field-group]]:gap-4',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-title\"\n      className={cn(\n        'flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled]/field:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldSeparatorProps extends React.ComponentProps<'div'> {\n  children?: React.ReactNode;\n}\n\nfunction FieldSeparator({ children, className, ...props }: FieldSeparatorProps) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn('relative -my-2 h-5 text-sm', className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          data-slot=\"field-separator-content\"\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldControl,\n  FieldDescription,\n  FieldError,\n  FieldSet,\n  FieldLegend,\n  FieldGroup,\n  FieldContent,\n  FieldTitle,\n  FieldSeparator,\n};\n"],"names":["fieldVariants","cva","Field","className","orientation","props","jsx","FieldPrimitive","cn","FieldLabel","labelClassName","FieldControl","FieldDescription","FieldError","FieldSet","FieldLegend","variant","FieldGroup","FieldContent","FieldTitle","FieldSeparator","children","jsxs","Separator"],"mappings":";;;;;;AAoBA,MAAMA,IAAgBC;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,UAAU;AAAA,QACV,YACE;AAAA,QACF,YACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ;AAQA,SAASC,EAAM,EAAE,WAAAC,GAAW,aAAAC,IAAc,YAAY,GAAGC,KAAqB;AAC5E,SACE,gBAAAC;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,oBAAkBH;AAAA,MAClB,WAAWI,EAAGR,EAAc,EAAE,aAAAI,EAAA,CAAa,GAAGD,CAAS;AAAA,MACtD,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAASI,EAAW,EAAE,WAAAN,GAAW,GAAGE,KAA0B;AAC5D,SACE,gBAAAC;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACTE;AAAA,QACA;AAAA,QACAP;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AAUA,SAASM,EAAa,EAAE,WAAAR,GAAW,GAAGE,KAA4B;AAChE,SACE,gBAAAC;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAGL,CAAS;AAAA,MACtB,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AAUA,SAASO,EAAiB,EAAE,WAAAT,GAAW,GAAGE,KAAgC;AACxE,SACE,gBAAAC;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAASQ,EAAW,EAAE,WAAAV,GAAW,GAAGE,KAA0B;AAC5D,SACE,gBAAAC;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASS,EAAS,EAAE,WAAAX,GAAW,GAAGE,KAA2C;AAC3E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWE;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AAMA,SAASU,EAAY;AAAA,EACnB,WAAAZ;AAAA,EACA,SAAAa,IAAU;AAAA,EACV,GAAGX;AACL,GAAqB;AACnB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAcU;AAAA,MACd,WAAWR;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASY,EAAW,EAAE,WAAAd,GAAW,GAAGE,KAAsC;AACxE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWE;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASa,EAAa,EAAE,WAAAf,GAAW,GAAGE,KAAsC;AAC1E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWE;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASc,EAAW,EAAE,WAAAhB,GAAW,GAAGE,KAAsC;AACxE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWE;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AAMA,SAASe,EAAe,EAAE,UAAAC,GAAU,WAAAlB,GAAW,GAAGE,KAA8B;AAC9E,SACE,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc,CAAC,CAACD;AAAA,MAChB,WAAWb,EAAG,8BAA8BL,CAAS;AAAA,MACpD,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAC,EAACiB,GAAA,EAAU,WAAU,2BAAA,CAA2B;AAAA,QAC/CF,KACC,gBAAAf;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAET,UAAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/ui/form/form.js

@@ -0,0 +1,16 @@
+import { jsx as m } from "react/jsx-runtime";
+import { Form as f } from "@base-ui/react/form";
+import { cn as l } from "../../../lib/utils.js";
+function a({ className: o, ...r }) {
+  return /* @__PURE__ */ m(
+    f,
+    {
+      className: l("flex w-full flex-col gap-6", o),
+      ...r
+    }
+  );
+}
+export {
+  a as Form
+};
+//# sourceMappingURL=form.js.map

package/dist/components/ui/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sources":["../../../../src/components/ui/form/form.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Form as FormPrimitive,\n  type FormProps as BaseFormProps,\n} from '@base-ui/react/form';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `form`\n// (packages/ui-legacy/src/components/ui/form.tsx), rebuilt on Base UI's Form.\n// The legacy form was a react-hook-form wrapper (FormProvider/Controller); this\n// version drops that dependency and coordinates the ui-react `Field`s directly via\n// Base UI's native form: it collects values by each Field's `name`, runs their\n// validation on submit (or per `validationMode`), surfaces server `errors` keyed\n// by field name, and calls `onFormSubmit(values)` only when all fields are valid.\nexport interface FormProps<\n  FormValues extends Record<string, unknown> = Record<string, unknown>,\n> extends Omit<BaseFormProps<FormValues>, 'className'> {\n  className?: string;\n}\n\nfunction Form<\n  FormValues extends Record<string, unknown> = Record<string, unknown>,\n>({ className, ...props }: FormProps<FormValues>) {\n  return (\n    <FormPrimitive\n      className={cn('flex w-full flex-col gap-6', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Form };\n"],"names":["Form","className","props","jsx","FormPrimitive","cn"],"mappings":";;;AAsBA,SAASA,EAEP,EAAE,WAAAC,GAAW,GAAGC,KAAgC;AAChD,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAG,8BAA8BJ,CAAS;AAAA,MACpD,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/ui/skeleton/skeleton.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as m } from "../../../lib/utils.js";
+const s = t.forwardRef(
+  ({ className: e, ...a }, o) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: o,
+      "data-slot": "skeleton",
+      className: m(
+        "animate-pulse rounded-md bg-[var(--ui-background-surface-active)]",
+        e
+      ),
+      ...a
+    }
+  )
+);
+s.displayName = "Skeleton";
+export {
+  s as Skeleton
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/components/ui/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sources":["../../../../src/components/ui/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `skeleton`\n// (packages/ui-legacy/src/components/ui/skeleton.tsx). A pulsing placeholder box\n// for loading states — no Base UI primitive, just a styled `<div>`. The legacy\n// `bg-muted` (--ui-background-surface-secondary) is near-white and nearly\n// invisible on a white surface, so the fill uses the more visible\n// `--ui-background-surface-active` gray (still subtle in dark). Shape and size\n// come from the caller's className.\nexport type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"skeleton\"\n      className={cn(\n        'animate-pulse rounded-md bg-[var(--ui-background-surface-active)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nSkeleton.displayName = 'Skeleton';\n\nexport { Skeleton };\n"],"names":["Skeleton","React","className","props","ref","jsx","cn"],"mappings":";;;AAaA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACV,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAH,EAAS,cAAc;"}