@acronis-platform/ui-react 3.0.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acronis-platform/ui-react",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/acronis/uikit.git",
@@ -24,7 +24,9 @@
       "import": "./dist/react.js",
       "types": "./dist/react.d.ts"
     },
-    "./styles": "./dist/ui-react.css"
+    "./styles": "./dist/ui-react.css",
+    "./llms.txt": "./dist/llms.txt",
+    "./llms/*": "./dist/llms/*"
   },
   "files": [
     "dist",
@@ -60,6 +62,9 @@
   },
   "devDependencies": {
     "@figma/code-connect": "1.4.8",
+    "@types/js-yaml": "4.0.9",
+    "js-yaml": "4.1.1",
+    "tsx": "^4.20.0",
     "@playwright/test": "1.60.0",
     "@tanstack/react-virtual": "3.13.12",
     "react": "19.2.6",
@@ -106,7 +111,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "vite build -c vite.lib.config.ts",
+    "build": "vite build -c vite.lib.config.ts && tsx scripts/generate-llms.ts",
+    "build:llms": "tsx scripts/generate-llms.ts",
     "dev": "vite build -c vite.lib.config.ts --watch",
     "clean": "rm -rf dist storybook-static node_modules/.vite *.tsbuildinfo",
     "typecheck": "tsc --noEmit",

package/dist/components/ui/app-shell/app-shell.js

@@ -1,75 +0,0 @@
-import { jsx as p } from "react/jsx-runtime";
-import * as r from "react";
-import { cn as o } from "../../../lib/utils.js";
-const s = r.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ p(
-  "div",
-  {
-    ref: l,
-    "data-slot": "app-shell",
-    className: o("flex min-h-screen w-full bg-background", e),
-    ...a
-  }
-));
-s.displayName = "AppShell";
-const d = r.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ p(
-  "aside",
-  {
-    ref: l,
-    "data-slot": "app-shell-sidebar",
-    className: o("flex shrink-0", e),
-    ...a
-  }
-));
-d.displayName = "AppShellSidebar";
-const t = r.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ p(
-  "div",
-  {
-    ref: l,
-    "data-slot": "app-shell-body",
-    className: o("flex min-w-0 flex-1 flex-col", e),
-    ...a
-  }
-));
-t.displayName = "AppShellBody";
-const f = r.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ p(
-  "header",
-  {
-    ref: l,
-    "data-slot": "app-shell-header",
-    className: o(
-      "sticky top-0 z-10 flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background px-6",
-      e
-    ),
-    ...a
-  }
-));
-f.displayName = "AppShellHeader";
-const i = r.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ p(
-  "main",
-  {
-    ref: l,
-    "data-slot": "app-shell-main",
-    className: o("flex-1 overflow-auto", e),
-    ...a
-  }
-));
-i.displayName = "AppShellMain";
-const h = r.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ p(
-  "footer",
-  {
-    ref: l,
-    "data-slot": "app-shell-footer",
-    className: o("shrink-0 border-t border-border bg-background px-6 py-4", e),
-    ...a
-  }
-));
-h.displayName = "AppShellFooter";
-export {
-  s as AppShell,
-  t as AppShellBody,
-  h as AppShellFooter,
-  f as AppShellHeader,
-  i as AppShellMain,
-  d as AppShellSidebar
-};
-//# sourceMappingURL=app-shell.js.map

package/dist/components/ui/app-shell/app-shell.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-shell.js","sources":["../../../../src/components/ui/app-shell/app-shell.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The full-page application scaffold from the Figma App Shell (node 2782-1495):\n// a left sidebar column (holds SidebarPrimary, optionally a secondary menu) beside\n// a body column of a sticky header over the scrolling main content. Layout-only\n// — the rich parts come from SidebarPrimary / SidebarSecondary placed inside\n// these slots. Surfaces use the shared `--ui-*` tokens (bg-background /\n// border-border; a bare `border` is transparent in ui-react, so borders name\n// `border-border`).\n\nconst AppShell = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell\"\n    className={cn('flex min-h-screen w-full bg-background', className)}\n    {...props}\n  />\n));\nAppShell.displayName = 'AppShell';\n\nconst AppShellSidebar = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <aside\n    ref={ref}\n    data-slot=\"app-shell-sidebar\"\n    className={cn('flex shrink-0', className)}\n    {...props}\n  />\n));\nAppShellSidebar.displayName = 'AppShellSidebar';\n\nconst AppShellBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell-body\"\n    className={cn('flex min-w-0 flex-1 flex-col', className)}\n    {...props}\n  />\n));\nAppShellBody.displayName = 'AppShellBody';\n\nconst AppShellHeader = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <header\n    ref={ref}\n    data-slot=\"app-shell-header\"\n    className={cn(\n      'sticky top-0 z-10 flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background px-6',\n      className\n    )}\n    {...props}\n  />\n));\nAppShellHeader.displayName = 'AppShellHeader';\n\nconst AppShellMain = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <main\n    ref={ref}\n    data-slot=\"app-shell-main\"\n    className={cn('flex-1 overflow-auto', className)}\n    {...props}\n  />\n));\nAppShellMain.displayName = 'AppShellMain';\n\nconst AppShellFooter = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <footer\n    ref={ref}\n    data-slot=\"app-shell-footer\"\n    className={cn('shrink-0 border-t border-border bg-background px-6 py-4', className)}\n    {...props}\n  />\n));\nAppShellFooter.displayName = 'AppShellFooter';\n\nexport {\n  AppShell,\n  AppShellSidebar,\n  AppShellBody,\n  AppShellHeader,\n  AppShellMain,\n  AppShellFooter,\n};\n"],"names":["AppShell","React","className","props","ref","jsx","cn","AppShellSidebar","AppShellBody","AppShellHeader","AppShellMain","AppShellFooter"],"mappings":";;;AAYA,MAAMA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,0CAA0CJ,CAAS;AAAA,IAChE,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAS,cAAc;AAEvB,MAAMO,IAAkBN,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,iBAAiBJ,CAAS;AAAA,IACvC,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAgB,cAAc;AAE9B,MAAMC,IAAeP,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,gCAAgCJ,CAAS;AAAA,IACtD,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAa,cAAc;AAE3B,MAAMC,IAAiBR,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAc;AAE7B,MAAMC,IAAeT,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,wBAAwBJ,CAAS;AAAA,IAC9C,GAAGC;AAAA,EAAA;AACN,CACD;AACDO,EAAa,cAAc;AAE3B,MAAMC,IAAiBV,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,2DAA2DJ,CAAS;AAAA,IACjF,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAe,cAAc;"}

package/dist/components/ui/auth-layout/auth-layout.js

@@ -1,56 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as r from "react";
-import { cn as u } from "../../../lib/utils.js";
-const s = r.forwardRef(({ className: t, ...a }, o) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: o,
-    "data-slot": "auth-layout",
-    className: u(
-      "flex min-h-screen w-full items-center justify-center bg-background p-4",
-      t
-    ),
-    ...a
-  }
-));
-s.displayName = "AuthLayout";
-const d = r.forwardRef(({ className: t, ...a }, o) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: o,
-    "data-slot": "auth-layout-card",
-    className: u(
-      "w-full max-w-sm rounded-lg border border-border bg-background p-6 shadow-sm",
-      t
-    ),
-    ...a
-  }
-));
-d.displayName = "AuthLayoutCard";
-const l = r.forwardRef(({ className: t, ...a }, o) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: o,
-    "data-slot": "auth-layout-logo",
-    className: u("mb-6 flex justify-center", t),
-    ...a
-  }
-));
-l.displayName = "AuthLayoutLogo";
-const m = r.forwardRef(({ className: t, ...a }, o) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: o,
-    "data-slot": "auth-layout-footer",
-    className: u("mt-6 text-center text-sm text-muted-foreground", t),
-    ...a
-  }
-));
-m.displayName = "AuthLayoutFooter";
-export {
-  s as AuthLayout,
-  d as AuthLayoutCard,
-  m as AuthLayoutFooter,
-  l as AuthLayoutLogo
-};
-//# sourceMappingURL=auth-layout.js.map

package/dist/components/ui/auth-layout/auth-layout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"auth-layout.js","sources":["../../../../src/components/ui/auth-layout/auth-layout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// A centered card layout for auth flows (sign-in / sign-up / forgot-password /\n// 2FA), reconciled with the Main-menu-improvements Figma (node 4906-362342).\n// Ported from `@acronis-platform`'s `auth-layout`. Token fixes vs legacy: the card\n// uses `bg-background` (legacy `bg-card` isn't bridged in ui-react) and a named\n// `border-border` (a bare `border` is transparent here).\n//\n// Anatomy:\n//   AuthLayout (full-page centered)\n//     AuthLayoutCard (centered surface card)\n//       AuthLayoutLogo (top brand slot)\n//       …children (title + form)…\n//       AuthLayoutFooter (bottom links)\n\nconst AuthLayout = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"auth-layout\"\n    className={cn(\n      'flex min-h-screen w-full items-center justify-center bg-background p-4',\n      className\n    )}\n    {...props}\n  />\n));\nAuthLayout.displayName = 'AuthLayout';\n\nconst AuthLayoutCard = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"auth-layout-card\"\n    className={cn(\n      'w-full max-w-sm rounded-lg border border-border bg-background p-6 shadow-sm',\n      className\n    )}\n    {...props}\n  />\n));\nAuthLayoutCard.displayName = 'AuthLayoutCard';\n\nconst AuthLayoutLogo = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"auth-layout-logo\"\n    className={cn('mb-6 flex justify-center', className)}\n    {...props}\n  />\n));\nAuthLayoutLogo.displayName = 'AuthLayoutLogo';\n\nconst AuthLayoutFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"auth-layout-footer\"\n    className={cn('mt-6 text-center text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nAuthLayoutFooter.displayName = 'AuthLayoutFooter';\n\nexport { AuthLayout, AuthLayoutCard, AuthLayoutLogo, AuthLayoutFooter };\n"],"names":["AuthLayout","React","className","props","ref","jsx","cn","AuthLayoutCard","AuthLayoutLogo","AuthLayoutFooter"],"mappings":";;;AAiBA,MAAMA,IAAaC,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAW,cAAc;AAEzB,MAAMO,IAAiBN,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAe,cAAc;AAE7B,MAAMC,IAAiBP,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,4BAA4BJ,CAAS;AAAA,IAClD,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAe,cAAc;AAE7B,MAAMC,IAAmBR,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,kDAAkDJ,CAAS;AAAA,IACxE,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAiB,cAAc;"}

package/dist/components/ui/collapsible/collapsible.js

@@ -1,22 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as i from "react";
-import { Collapsible as o } from "@base-ui/react/collapsible";
-import { cn as s } from "../../../lib/utils.js";
-const d = o.Root, C = o.Trigger, r = i.forwardRef(({ className: t, ...e }, l) => /* @__PURE__ */ a(
-  o.Panel,
-  {
-    ref: l,
-    className: s(
-      "overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
-      t
-    ),
-    ...e
-  }
-));
-r.displayName = "CollapsibleContent";
-export {
-  d as Collapsible,
-  r as CollapsibleContent,
-  C as CollapsibleTrigger
-};
-//# sourceMappingURL=collapsible.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"collapsible.js","sources":["../../../../src/components/ui/collapsible/collapsible.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `collapsible`. A thin wrapper over\n// Base UI's Collapsible — a disclosure: a trigger toggles a height-animating panel.\n// No colors of its own (it's the primitive behind Accordion and the sidebars).\nconst Collapsible = CollapsiblePrimitive.Root;\n\nconst CollapsibleTrigger = CollapsiblePrimitive.Trigger;\n\nconst CollapsibleContent = React.forwardRef<\n  React.ElementRef<typeof CollapsiblePrimitive.Panel>,\n  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Panel>\n>(({ className, ...props }, ref) => (\n  <CollapsiblePrimitive.Panel\n    ref={ref}\n    className={cn(\n      'overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0',\n      className\n    )}\n    {...props}\n  />\n));\nCollapsibleContent.displayName = 'CollapsibleContent';\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"names":["Collapsible","CollapsiblePrimitive","CollapsibleTrigger","CollapsibleContent","React","className","props","ref","jsx","cn"],"mappings":";;;;AAUA,MAAMA,IAAcC,EAAqB,MAEnCC,IAAqBD,EAAqB,SAE1CE,IAAqBC,EAAM,WAG/B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACP,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAmB,cAAc;"}

package/dist/src/components/ui/app-shell/app-shell.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-declare const AppShell: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const AppShellSidebar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-declare const AppShellBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const AppShellHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-declare const AppShellMain: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-declare const AppShellFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-export { AppShell, AppShellSidebar, AppShellBody, AppShellHeader, AppShellMain, AppShellFooter, };

package/dist/src/components/ui/app-shell/index.d.ts

@@ -1 +0,0 @@
-export { AppShell, AppShellSidebar, AppShellBody, AppShellHeader, AppShellMain, AppShellFooter, } from './app-shell';

package/dist/src/components/ui/auth-layout/auth-layout.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-declare const AuthLayout: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const AuthLayoutCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const AuthLayoutLogo: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const AuthLayoutFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export { AuthLayout, AuthLayoutCard, AuthLayoutLogo, AuthLayoutFooter };

package/dist/src/components/ui/auth-layout/index.d.ts

@@ -1 +0,0 @@
-export { AuthLayout, AuthLayoutCard, AuthLayoutLogo, AuthLayoutFooter, } from './auth-layout';

package/dist/src/components/ui/collapsible/collapsible.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-declare const Collapsible: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/src/components/ui/collapsible/index.d.ts

@@ -1 +0,0 @@
-export { Collapsible, CollapsibleTrigger, CollapsibleContent, } from './collapsible';

package/dist/src/components/ui/label/label.docs.d.ts

@@ -1,10 +0,0 @@
-import type * as React from 'react';
-/** Props for `Label` — a caption for a form control. */
-export interface LabelProps {
-    /** The `id` of the control this label captions; clicking focuses it. */
-    htmlFor?: string;
-    /** Extra classes merged onto the label. */
-    className?: string;
-    /** The label text. */
-    children?: React.ReactNode;
-}