npm - @acronis-platform/ui-react - Versions diffs - 0.25.2 → 0.28.0 - Mend

@acronis-platform/ui-react 0.25.2 → 0.28.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.

Files changed (21) hide show

package/dist/components/ui/{button-dropdown/button-dropdown.js → button-menu/button-menu.js} RENAMED Viewed

@@ -1,12 +1,12 @@
-import { jsxs as c, Fragment as d, jsx as b } from "react/jsx-runtime";
+import { jsxs as c, Fragment as b, jsx as d } from "react/jsx-runtime";
 import * as l from "react";
-import { mergeProps as s } from "@base-ui/react/merge-props";
-import { useRender as v } from "@base-ui/react/use-render";
+import { mergeProps as v } from "@base-ui/react/merge-props";
+import { useRender as s } from "@base-ui/react/use-render";
 import { ChevronUpIcon as m, ChevronDownIcon as p } from "@acronis-platform/icons-react/stroke-mono";
 import { cva as g } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { cn as y } from "../../../lib/utils.js";
-const f = g(
-  "inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-menu-global-icon-size)] [&_svg]:shrink-0",
+const h = g(
+  "inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-menu-global-icon-size)] [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -18,25 +18,25 @@ const f = g(
       variant: "primary"
     }
   }
-), h = l.forwardRef(
+), x = l.forwardRef(
   ({ className: r, variant: e, open: o, render: n, children: t, ...a }, i) => {
     const u = o ? m : p;
-    return v({
+    return s({
       render: n,
       ref: i,
       defaultTagName: "button",
-      props: s(
+      props: v(
         {
-          className: y(f({ variant: e, className: r })),
+          className: y(h({ variant: e, className: r })),
           "aria-expanded": o,
           // `data-open` drives the open (`*-active`) token switch via attribute
           // selectors; present only while open, and typed loosely because
           // React's button attribute map doesn't include arbitrary data-* keys
           // as literals.
           ...o ? { "data-open": "" } : {},
-          children: /* @__PURE__ */ c(d, { children: [
+          children: /* @__PURE__ */ c(b, { children: [
             t,
-            /* @__PURE__ */ b(u, {})
+            /* @__PURE__ */ d(u, {})
           ] })
         },
         a
@@ -44,9 +44,9 @@ const f = g(
     });
   }
 );
-h.displayName = "ButtonDropdown";
+x.displayName = "ButtonMenu";
 export {
-  h as ButtonDropdown,
-  f as buttonDropdownVariants
+  x as ButtonMenu,
+  h as buttonMenuVariants
 };
-//# sourceMappingURL=button-dropdown.js.map
+//# sourceMappingURL=button-menu.js.map

package/dist/components/ui/button-menu/button-menu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"button-menu.js","sources":["../../../../src/components/ui/button-menu/button-menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport {\n ChevronDownIcon,\n ChevronUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"ButtonMenu\" component: a Button-like trigger (label +\n// trailing chevron) that opens a menu. `variant` maps to the Figma `variant`\n// property (Primary / Secondary); the Figma `active` state is the **open** state\n// — the chevron flips down→up and the container takes its `*-active` colors. Each\n// interaction state wires the container fill, label, icon, and — for `secondary`\n// — the border to its own dedicated `--ui-button-menu-*` token from\n// @acronis-platform/tokens-pd. Every state is referenced explicitly (runtime\n// `var()` lookups: a brand override is only honored if the matching state token is\n// referenced). `primary` keeps a single label/icon color across states; only\n// `secondary` diverges them per state. Geometry — 32px height, 8px gap, 12px\n// padding-x, 4px radius, 64px min-width, 16px icon — comes from the\n// `--ui-button-menu-global-*` tokens. The open treatment is driven by the\n// `data-open` attribute (set from the `open` prop) and CSS `:active` for press\n// feedback; disabled uses the explicit disabled tokens (not opacity). Focus: the\n// Figma focus state is a 3px `--ui-focus-primary` ring flush to the button edge\n// (no offset) — `ring-[3px]`, no `ring-offset`.\nconst buttonMenuVariants = cva(\n 'inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-menu-global-icon-size)] [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n primary:\n 'bg-[var(--ui-button-menu-primary-container-color-idle)] text-[var(--ui-button-menu-primary-label-color)] [&_svg]:text-[var(--ui-button-menu-primary-icon-color)] hover:bg-[var(--ui-button-menu-primary-container-color-hover)] active:bg-[var(--ui-button-menu-primary-container-color-active)] data-[open]:bg-[var(--ui-button-menu-primary-container-color-active)] disabled:bg-[var(--ui-button-menu-primary-container-color-disabled)]',\n secondary:\n 'bg-[var(--ui-button-menu-secondary-container-color-idle)] text-[var(--ui-button-menu-secondary-label-color-idle)] border-[var(--ui-button-menu-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-menu-secondary-icon-color-idle)] hover:bg-[var(--ui-button-menu-secondary-container-color-hover)] hover:text-[var(--ui-button-menu-secondary-label-color-hover)] hover:border-[var(--ui-button-menu-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-hover)] active:bg-[var(--ui-button-menu-secondary-container-color-active)] active:text-[var(--ui-button-menu-secondary-label-color-active)] active:border-[var(--ui-button-menu-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] data-[open]:bg-[var(--ui-button-menu-secondary-container-color-active)] data-[open]:text-[var(--ui-button-menu-secondary-label-color-active)] data-[open]:border-[var(--ui-button-menu-secondary-container-border-color-active)] data-[open]:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] disabled:bg-[var(--ui-button-menu-secondary-container-color-disabled)] disabled:text-[var(--ui-button-menu-secondary-label-color-disabled)] disabled:border-[var(--ui-button-menu-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-disabled)]',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n }\n);\n\nexport interface ButtonMenuProps\n extends\n Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n VariantProps<typeof buttonMenuVariants> {\n /**\n * Whether the associated menu is open. Flips the trailing chevron\n * (down → up), applies the open (`*-active`) treatment, and reflects\n * `aria-expanded`. Control this in sync with the menu you trigger.\n */\n open?: boolean;\n /** Label content rendered before the chevron. */\n children?: React.ReactNode;\n /**\n * Replace the rendered `<button>` with another element or component\n * (Base UI composition). Accepts a React element or a render function —\n * the component's props and class names are merged onto it.\n */\n render?: useRender.RenderProp;\n}\n\n/**\n * A button that opens a dropdown menu: a label followed by a chevron that\n * points up while `open`. Pair it with the menu/popover it controls and keep\n * the `open` prop in sync.\n */\nconst ButtonMenu = React.forwardRef<HTMLButtonElement, ButtonMenuProps>(\n ({ className, variant, open, render, children, ...props }, ref) => {\n const Chevron = open ? ChevronUpIcon : ChevronDownIcon;\n return useRender({\n render,\n ref,\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(buttonMenuVariants({ variant, className })),\n 'aria-expanded': open,\n // `data-open` drives the open (`*-active`) token switch via attribute\n // selectors; present only while open, and typed loosely because\n // React's button attribute map doesn't include arbitrary data-* keys\n // as literals.\n ...(open ? ({ 'data-open': '' } as Record<string, string>) : {}),\n children: (\n <>\n {children}\n <Chevron />\n </>\n ),\n },\n props\n ),\n });\n }\n);\nButtonMenu.displayName = 'ButtonMenu';\n\nexport { ButtonMenu, buttonMenuVariants };\n"],"names":["buttonMenuVariants","cva","ButtonMenu","React","className","variant","open","render","children","props","ref","Chevron","ChevronUpIcon","ChevronDownIcon","useRender","mergeProps","cn","jsxs","Fragment"],"mappings":";;;;;;;AA2BA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GA2BMC,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AACjE,UAAMC,IAAUL,IAAOM,IAAgBC;AACvC,WAAOC,EAAU;AAAA,MACf,QAAAP;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOK;AAAA,QACL;AAAA,UACE,WAAWC,EAAGhB,EAAmB,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,UACxD,iBAAiBE;AAAA;AAAA;AAAA;AAAA;AAAA,UAKjB,GAAIA,IAAQ,EAAE,aAAa,GAAA,IAAkC,CAAA;AAAA,UAC7D,UACE,gBAAAW,EAAAC,GAAA,EACG,UAAA;AAAA,YAAAV;AAAA,8BACAG,GAAA,CAAA,CAAQ;AAAA,UAAA,EAAA,CACX;AAAA,QAAA;AAAA,QAGJF;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAP,EAAW,cAAc;"}

package/dist/components/ui/card-filter/card-filter.js ADDED Viewed

@@ -0,0 +1,63 @@
+import { jsxs as i, Fragment as v, jsx as l } from "react/jsx-runtime";
+import * as g from "react";
+import { mergeProps as m } from "@base-ui/react/merge-props";
+import { useRender as p } from "@base-ui/react/use-render";
+import { cva as x } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as o } from "../../../lib/utils.js";
+const h = x(
+  "inline-flex w-[224px] min-h-[var(--ui-card-filter-global-container-height)] flex-col items-start rounded-[var(--ui-card-filter-global-container-border-radius)] border-[length:var(--ui-card-filter-global-container-border-width)] border-solid border-[color:var(--ui-card-filter-global-border-color-idle)] bg-[var(--ui-card-filter-global-container-color-idle)] px-[var(--ui-card-filter-global-container-padding-x)] py-[var(--ui-card-filter-global-container-padding-y)] transition-colors",
+  {
+    variants: {
+      variant: {
+        static: "",
+        "static-empty": "",
+        clickable: "cursor-pointer outline-none hover:border-[color:var(--ui-card-filter-global-border-color-hover)] hover:bg-[var(--ui-card-filter-global-container-color-hover)] active:border-[color:var(--ui-card-filter-global-border-color-active)] active:bg-[var(--ui-card-filter-global-container-color-active)] focus-visible:border-[color:var(--ui-card-filter-global-border-color-focused)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]"
+      }
+    },
+    defaultVariants: {
+      variant: "static"
+    }
+  }
+), y = {
+  static: "text-[var(--ui-card-filter-static-value-color-idle)]",
+  "static-empty": "text-[var(--ui-card-filter-static-value-color-disabled)]",
+  clickable: "text-[var(--ui-card-filter-clickable-value-color)]"
+}, k = g.forwardRef(
+  ({ className: t, variant: r = "static", label: c, value: s, icon: d, render: n, ...b }, u) => {
+    const a = r === "static-empty", e = r === "clickable", f = a ? "–" : s;
+    return p({
+      render: n,
+      ref: u,
+      defaultTagName: e ? "button" : "div",
+      props: m(
+        {
+          className: o(h({ variant: r }), t),
+          ...e ? { type: "button" } : {},
+          children: /* @__PURE__ */ i(v, { children: [
+            /* @__PURE__ */ l("span", { className: "text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]", children: c }),
+            /* @__PURE__ */ i("span", { className: "flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0", children: [
+              !a && d,
+              /* @__PURE__ */ l(
+                "span",
+                {
+                  className: o(
+                    "text-2xl font-semibold leading-8",
+                    y[r ?? "static"]
+                  ),
+                  children: f
+                }
+              )
+            ] })
+          ] })
+        },
+        b
+      )
+    });
+  }
+);
+k.displayName = "CardFilter";
+export {
+  k as CardFilter,
+  h as cardFilterVariants
+};
+//# sourceMappingURL=card-filter.js.map

package/dist/components/ui/card-filter/card-filter.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"card-filter.js","sources":["../../../../src/components/ui/card-filter/card-filter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"CardFilter\" component: a compact stat/filter card — a caption\n// `label` above a content row (optional `icon` + a large `value`). `variant` maps\n// to the Figma `variant` property:\n// • `static` — non-interactive; value in `--ui-card-filter-static-value-color-idle`.\n// • `static-empty` — non-interactive placeholder; no icon, an em-dash value in\n// `--ui-card-filter-static-value-color-disabled`.\n// • `clickable` — interactive (renders a <button>); value in\n// `--ui-card-filter-clickable-value-color`, plus hover / active /\n// focus-visible treatments.\n// Per the Figma constraint (\"if an element is not clickable, it cannot have a state\n// other than Idle\") only `clickable` carries the hover / active / focus state\n// classes — `static` / `static-empty` stay idle. Geometry (224px width, 64px min\n// height, 8px radius, 16/8px padding, 8px content gap, 1px border) and every state\n// color come from the `--ui-card-filter-*` tokens. Focus: a 3px `--ui-focus-primary`\n// ring flush to the edge (no offset), matching the rest of the library.\nconst cardFilterVariants = cva(\n 'inline-flex w-[224px] min-h-[var(--ui-card-filter-global-container-height)] flex-col items-start rounded-[var(--ui-card-filter-global-container-border-radius)] border-[length:var(--ui-card-filter-global-container-border-width)] border-solid border-[color:var(--ui-card-filter-global-border-color-idle)] bg-[var(--ui-card-filter-global-container-color-idle)] px-[var(--ui-card-filter-global-container-padding-x)] py-[var(--ui-card-filter-global-container-padding-y)] transition-colors',\n {\n variants: {\n variant: {\n static: '',\n 'static-empty': '',\n clickable:\n 'cursor-pointer outline-none hover:border-[color:var(--ui-card-filter-global-border-color-hover)] hover:bg-[var(--ui-card-filter-global-container-color-hover)] active:border-[color:var(--ui-card-filter-global-border-color-active)] active:bg-[var(--ui-card-filter-global-container-color-active)] focus-visible:border-[color:var(--ui-card-filter-global-border-color-focused)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n },\n },\n defaultVariants: {\n variant: 'static',\n },\n }\n);\n\n// The value color is the one token that varies by variant rather than by state.\nconst valueColorClass: Record<\n NonNullable<VariantProps<typeof cardFilterVariants>['variant']>,\n string\n> = {\n static: 'text-[var(--ui-card-filter-static-value-color-idle)]',\n 'static-empty': 'text-[var(--ui-card-filter-static-value-color-disabled)]',\n clickable: 'text-[var(--ui-card-filter-clickable-value-color)]',\n};\n\nexport interface CardFilterProps\n extends\n Omit<React.HTMLAttributes<HTMLElement>, 'children'>,\n VariantProps<typeof cardFilterVariants> {\n /** Caption shown above the value. */\n label?: React.ReactNode;\n /** The large value. Ignored for `variant=\"static-empty\"` (shows an em-dash). */\n value?: React.ReactNode;\n /** Optional leading icon (16px) rendered before the value. Hidden for `static-empty`. */\n icon?: React.ReactNode;\n /**\n * Replace the rendered element (`<button>` for `clickable`, otherwise `<div>`)\n * with another element or component (Base UI composition) — e.g. a router link\n * for a clickable filter. The component's props and class names are merged onto it.\n */\n render?: useRender.RenderProp;\n}\n\n/**\n * A compact stat/filter card: a label, an optional icon, and a prominent value.\n * Use `variant=\"clickable\"` for a filter the user can activate (renders a button);\n * `static` / `static-empty` are presentational.\n */\nconst CardFilter = React.forwardRef<HTMLElement, CardFilterProps>(\n (\n { className, variant = 'static', label, value, icon, render, ...props },\n ref\n ) => {\n const isEmpty = variant === 'static-empty';\n const isClickable = variant === 'clickable';\n const displayValue = isEmpty ? '–' : value;\n\n return useRender({\n render,\n ref,\n defaultTagName: isClickable ? 'button' : 'div',\n props: mergeProps<'button'>(\n {\n className: cn(cardFilterVariants({ variant }), className),\n ...(isClickable ? { type: 'button' as const } : {}),\n children: (\n <>\n <span className=\"text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]\">\n {label}\n </span>\n <span className=\"flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0\">\n {!isEmpty && icon}\n <span\n className={cn(\n 'text-2xl font-semibold leading-8',\n valueColorClass[variant ?? 'static']\n )}\n >\n {displayValue}\n </span>\n </span>\n </>\n ),\n },\n props\n ),\n });\n }\n);\nCardFilter.displayName = 'CardFilter';\n\nexport { CardFilter, cardFilterVariants };\n"],"names":["cardFilterVariants","cva","valueColorClass","CardFilter","React","className","variant","label","value","icon","render","props","ref","isEmpty","isClickable","displayValue","useRender","mergeProps","cn","jsxs","Fragment","jsx"],"mappings":";;;;;;AAsBA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAGMC,IAGF;AAAA,EACF,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,WAAW;AACb,GAyBMC,IAAaC,EAAM;AAAA,EACvB,CACE,EAAE,WAAAC,GAAW,SAAAC,IAAU,UAAU,OAAAC,GAAO,OAAAC,GAAO,MAAAC,GAAM,QAAAC,GAAQ,GAAGC,EAAA,GAChEC,MACG;AACH,UAAMC,IAAUP,MAAY,gBACtBQ,IAAcR,MAAY,aAC1BS,IAAeF,IAAU,MAAML;AAErC,WAAOQ,EAAU;AAAA,MACf,QAAAN;AAAA,MACA,KAAAE;AAAA,MACA,gBAAgBE,IAAc,WAAW;AAAA,MACzC,OAAOG;AAAA,QACL;AAAA,UACE,WAAWC,EAAGlB,EAAmB,EAAE,SAAAM,EAAA,CAAS,GAAGD,CAAS;AAAA,UACxD,GAAIS,IAAc,EAAE,MAAM,SAAA,IAAsB,CAAA;AAAA,UAChD,UACE,gBAAAK,EAAAC,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,iFACb,UAAAd,GACH;AAAA,YACA,gBAAAY,EAAC,QAAA,EAAK,WAAU,oGACb,UAAA;AAAA,cAAA,CAACN,KAAWJ;AAAA,cACb,gBAAAY;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH;AAAA,oBACT;AAAA,oBACAhB,EAAgBI,KAAW,QAAQ;AAAA,kBAAA;AAAA,kBAGpC,UAAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,EAAA,CACF;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,QAGJJ;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAR,EAAW,cAAc;"}

package/dist/components/ui/input-text/input-text.js ADDED Viewed

@@ -0,0 +1,87 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import * as m from "react";
+import { TimesIcon as j } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as c } from "../../../lib/utils.js";
+import { Input as C } from "../input/input.js";
+const T = m.forwardRef(
+  ({
+    className: g,
+    id: v,
+    label: i,
+    required: u,
+    description: b,
+    error: a,
+    clearable: f,
+    onClear: h,
+    disabled: e,
+    value: r,
+    ...I
+  }, N) => {
+    const y = m.useId(), l = v ?? y, p = `${l}-message`, o = a != null && a !== "", w = r != null && r !== "", d = !!f && w && !e, n = o ? a : b, x = n != null && n !== "";
+    return /* @__PURE__ */ s("div", { className: "flex w-full min-w-[var(--ui-input-text-global-container-width-min)] flex-col gap-[var(--ui-input-text-global-container-gap)]", children: [
+      i != null && i !== "" && /* @__PURE__ */ s(
+        "label",
+        {
+          htmlFor: l,
+          className: c(
+            "flex gap-[var(--ui-input-text-global-container-label-gap)] text-sm leading-4",
+            e ? "text-[var(--ui-input-text-global-label-color-disabled)]" : "text-[var(--ui-input-text-global-label-color-idle)]"
+          ),
+          children: [
+            i,
+            u && /* @__PURE__ */ t(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "text-[var(--ui-input-text-global-required-color)]",
+                children: "*"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ s("div", { className: "relative", children: [
+        /* @__PURE__ */ t(
+          C,
+          {
+            ref: N,
+            id: l,
+            disabled: e,
+            value: r,
+            "aria-invalid": o || void 0,
+            "aria-required": u || void 0,
+            "aria-describedby": x ? p : void 0,
+            className: c(d && "pr-9", g),
+            ...I
+          }
+        ),
+        d && /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: h,
+            "aria-label": "Clear",
+            className: "absolute right-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-4 -translate-y-1/2 items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] text-[var(--ui-input-text-global-clear-icon-color)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
+            children: /* @__PURE__ */ t(j, {})
+          }
+        )
+      ] }),
+      x && /* @__PURE__ */ t(
+        "p",
+        {
+          id: p,
+          className: c(
+            "text-xs leading-4",
+            o ? "text-[var(--ui-input-text-error-msg-error-color)]" : e ? "text-[var(--ui-input-text-normal-description-color-disabled)]" : "text-[var(--ui-input-text-normal-description-color-idle)]"
+          ),
+          children: n
+        }
+      )
+    ] });
+  }
+);
+T.displayName = "InputText";
+export {
+  T as InputText
+};
+//# sourceMappingURL=input-text.js.map

package/dist/components/ui/input-text/input-text.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"input-text.js","sources":["../../../../src/components/ui/input-text/input-text.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Input } from '../input';\n\n// Mirrors the Figma \"InputText\" component: a full single-line text field built\n// around the bare `Input` primitive (themed by the `--ui-input-text-*` tier). It\n// adds the field furniture: an optional `label` (with an optional `required` `*`),\n// an optional clear (✕) button, and an optional `description` or `error` message\n// below. Passing `error` switches the field to its error treatment — the box gets\n// the red error border (via the input's `aria-invalid` styling) and the red error\n// message replaces the description. The clear button appears only while `clearable`\n// is set and the (controlled) field has a value, and calls `onClear`. Colors come\n// from the `--ui-input-text-*` tokens — label/required/description/error/clear — so\n// brand overrides are honored; the clear button uses a 3px `--ui-focus-primary` ring.\nexport interface InputTextProps\n extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children'> {\n /** Field label, rendered above the input. */\n label?: React.ReactNode;\n /** Marks the field required — appends a `*` after the label. */\n required?: boolean;\n /** Helper text below the input. Hidden while `error` is set. */\n description?: React.ReactNode;\n /**\n * Error message below the input. Its presence switches the field to the error\n * treatment (red box border + red message).\n */\n error?: React.ReactNode;\n /** Show a clear (✕) button while the (controlled) field has a value. */\n clearable?: boolean;\n /** Called when the clear button is activated. */\n onClear?: () => void;\n}\n\nconst InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n (\n {\n className,\n id,\n label,\n required,\n description,\n error,\n clearable,\n onClear,\n disabled,\n value,\n ...props\n },\n ref\n ) => {\n const reactId = React.useId();\n const inputId = id ?? reactId;\n const messageId = `${inputId}-message`;\n\n const hasError = error != null && error !== '';\n const hasValue = value != null && value !== '';\n const showClear = Boolean(clearable) && hasValue && !disabled;\n const message = hasError ? error : description;\n const hasMessage = message != null && message !== '';\n\n return (\n <div className=\"flex w-full min-w-[var(--ui-input-text-global-container-width-min)] flex-col gap-[var(--ui-input-text-global-container-gap)]\">\n {label != null && label !== '' && (\n <label\n htmlFor={inputId}\n className={cn(\n 'flex gap-[var(--ui-input-text-global-container-label-gap)] text-sm leading-4',\n disabled\n ? 'text-[var(--ui-input-text-global-label-color-disabled)]'\n : 'text-[var(--ui-input-text-global-label-color-idle)]'\n )}\n >\n {label}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-text-global-required-color)]\"\n >\n *\n </span>\n )}\n </label>\n )}\n\n <div className=\"relative\">\n <Input\n ref={ref}\n id={inputId}\n disabled={disabled}\n value={value}\n aria-invalid={hasError || undefined}\n aria-required={required || undefined}\n aria-describedby={hasMessage ? messageId : undefined}\n className={cn(showClear && 'pr-9', className)}\n {...props}\n />\n {showClear && (\n <button\n type=\"button\"\n onClick={onClear}\n aria-label=\"Clear\"\n className=\"absolute right-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-4 -translate-y-1/2 items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] text-[var(--ui-input-text-global-clear-icon-color)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0\"\n >\n <TimesIcon />\n </button>\n )}\n </div>\n\n {hasMessage && (\n <p\n id={messageId}\n className={cn(\n 'text-xs leading-4',\n hasError\n ? 'text-[var(--ui-input-text-error-msg-error-color)]'\n : disabled\n ? 'text-[var(--ui-input-text-normal-description-color-disabled)]'\n : 'text-[var(--ui-input-text-normal-description-color-idle)]'\n )}\n >\n {message}\n </p>\n )}\n </div>\n );\n }\n);\nInputText.displayName = 'InputText';\n\nexport { InputText };\n"],"names":["InputText","React","className","id","label","required","description","error","clearable","onClear","disabled","value","props","ref","reactId","inputId","messageId","hasError","hasValue","showClear","message","hasMessage","jsxs","cn","jsx","Input","TimesIcon"],"mappings":";;;;;AAmCA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUb,EAAM,MAAA,GAChBc,IAAUZ,KAAMW,GAChBE,IAAY,GAAGD,CAAO,YAEtBE,IAAWV,KAAS,QAAQA,MAAU,IACtCW,IAAWP,KAAS,QAAQA,MAAU,IACtCQ,IAAY,EAAQX,KAAcU,KAAY,CAACR,GAC/CU,IAAUH,IAAWV,IAAQD,GAC7Be,IAAaD,KAAW,QAAQA,MAAY;AAElD,WACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,gIACZ,UAAA;AAAA,MAAAlB,KAAS,QAAQA,MAAU,MAC1B,gBAAAkB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASP;AAAA,UACT,WAAWQ;AAAA,YACT;AAAA,YACAb,IACI,4DACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAN;AAAA,YACAC,KACC,gBAAAmB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAKN,gBAAAF,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAZ;AAAA,YACA,IAAIE;AAAA,YACJ,UAAAL;AAAA,YACA,OAAAC;AAAA,YACA,gBAAcM,KAAY;AAAA,YAC1B,iBAAeZ,KAAY;AAAA,YAC3B,oBAAkBgB,IAAaL,IAAY;AAAA,YAC3C,WAAWO,EAAGJ,KAAa,QAAQjB,CAAS;AAAA,YAC3C,GAAGU;AAAA,UAAA;AAAA,QAAA;AAAA,QAELO,KACC,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAASf;AAAA,YACT,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,4BAACiB,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,GAEJ;AAAA,MAECL,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIR;AAAA,UACJ,WAAWO;AAAA,YACT;AAAA,YACAN,IACI,sDACAP,IACE,kEACA;AAAA,UAAA;AAAA,UAGP,UAAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AACApB,EAAU,cAAc;"}

package/dist/index.js CHANGED Viewed

@@ -1,22 +1,24 @@
 import { cn as a } from "./lib/utils.js";
 import { Avatar as t, AvatarFallback as i, AvatarGroup as n, AvatarImage as d, avatarVariants as S } from "./components/ui/avatar/avatar.js";
-import { Breadcrumb as m, BreadcrumbEllipsis as c, BreadcrumbItem as u, BreadcrumbLink as p, BreadcrumbList as l, BreadcrumbPage as y, BreadcrumbSeparator as x } from "./components/ui/breadcrumb/breadcrumb.js";
-import { Button as f, buttonVariants as g } from "./components/ui/button/button.js";
-import { ButtonDropdown as P, buttonDropdownVariants as M } from "./components/ui/button-dropdown/button-dropdown.js";
-import { Checkbox as T } from "./components/ui/checkbox/checkbox.js";
-import { Radio as V, RadioGroup as v } from "./components/ui/radio/radio.js";
-import { Input as A } from "./components/ui/input/input.js";
-import { InputTextArea as h } from "./components/ui/input-text-area/input-text-area.js";
-import { Search as k } from "./components/ui/search/search.js";
-import { SearchGlobal as z } from "./components/ui/search-global/search-global.js";
-import { Select as F, SelectContent as H, SelectGroup as D, SelectGroupLabel as j, SelectItem as q, SelectTrigger as J, SelectValue as K } from "./components/ui/select/select.js";
-import { ResizableHandle as O, ResizablePanel as Q, ResizablePanelGroup as U } from "./components/ui/resizable/resizable.js";
-import { SidebarPrimary as X, SidebarPrimaryCollapseTrigger as Y, SidebarPrimaryContent as Z, SidebarPrimaryFooter as _, SidebarPrimaryHeader as $, SidebarPrimaryMenu as rr, SidebarPrimaryMenuItem as er, SidebarPrimaryMenuItemExtras as ar, SidebarPrimarySection as or, sidebarPrimaryMenuItemVariants as tr } from "./components/ui/sidebar-primary/sidebar-primary.js";
-import { SidebarSecondary as nr, SidebarSecondaryCollapseTrigger as dr, SidebarSecondaryCollapsedBreadcrumb as Sr, SidebarSecondaryContent as br, SidebarSecondaryFooter as mr, SidebarSecondaryHeader as cr, SidebarSecondaryMenu as ur, SidebarSecondaryMenuItem as pr, SidebarSecondaryMenuItemExtras as lr, SidebarSecondaryMenuSub as yr, SidebarSecondaryMenuSubContent as xr, SidebarSecondaryMenuSubItem as sr, SidebarSecondaryMenuSubTrigger as fr, SidebarSecondarySection as gr, SidebarSecondarySectionLabel as Ir, sidebarSecondaryMenuItemVariants as Pr } from "./components/ui/sidebar-secondary/sidebar-secondary.js";
-import { ButtonIcon as Br, buttonIconVariants as Tr } from "./components/ui/button-icon/button-icon.js";
-import { Switch as Vr } from "./components/ui/switch/switch.js";
-import { Tooltip as Gr, TooltipContent as Ar, TooltipProvider as Rr, TooltipTrigger as hr } from "./components/ui/tooltip/tooltip.js";
-import { Tag as kr, tagVariants as wr } from "./components/ui/tag/tag.js";
+import { Breadcrumb as m, BreadcrumbEllipsis as c, BreadcrumbItem as u, BreadcrumbLink as p, BreadcrumbList as l, BreadcrumbPage as x, BreadcrumbSeparator as y } from "./components/ui/breadcrumb/breadcrumb.js";
+import { Button as s, buttonVariants as I } from "./components/ui/button/button.js";
+import { ButtonMenu as M, buttonMenuVariants as P } from "./components/ui/button-menu/button-menu.js";
+import { CardFilter as B, cardFilterVariants as C } from "./components/ui/card-filter/card-filter.js";
+import { Checkbox as v } from "./components/ui/checkbox/checkbox.js";
+import { Radio as A, RadioGroup as F } from "./components/ui/radio/radio.js";
+import { Input as h } from "./components/ui/input/input.js";
+import { InputText as k } from "./components/ui/input-text/input-text.js";
+import { InputTextArea as E } from "./components/ui/input-text-area/input-text-area.js";
+import { Search as w } from "./components/ui/search/search.js";
+import { SearchGlobal as q } from "./components/ui/search-global/search-global.js";
+import { Select as J, SelectContent as K, SelectGroup as N, SelectGroupLabel as O, SelectItem as Q, SelectTrigger as U, SelectValue as W } from "./components/ui/select/select.js";
+import { ResizableHandle as Y, ResizablePanel as Z, ResizablePanelGroup as _ } from "./components/ui/resizable/resizable.js";
+import { SidebarPrimary as rr, SidebarPrimaryCollapseTrigger as er, SidebarPrimaryContent as ar, SidebarPrimaryFooter as or, SidebarPrimaryHeader as tr, SidebarPrimaryMenu as ir, SidebarPrimaryMenuItem as nr, SidebarPrimaryMenuItemExtras as dr, SidebarPrimarySection as Sr, sidebarPrimaryMenuItemVariants as br } from "./components/ui/sidebar-primary/sidebar-primary.js";
+import { SidebarSecondary as cr, SidebarSecondaryCollapseTrigger as ur, SidebarSecondaryCollapsedBreadcrumb as pr, SidebarSecondaryContent as lr, SidebarSecondaryFooter as xr, SidebarSecondaryHeader as yr, SidebarSecondaryMenu as fr, SidebarSecondaryMenuItem as sr, SidebarSecondaryMenuItemExtras as Ir, SidebarSecondaryMenuSub as gr, SidebarSecondaryMenuSubContent as Mr, SidebarSecondaryMenuSubItem as Pr, SidebarSecondaryMenuSubTrigger as Tr, SidebarSecondarySection as Br, SidebarSecondarySectionLabel as Cr, sidebarSecondaryMenuItemVariants as Vr } from "./components/ui/sidebar-secondary/sidebar-secondary.js";
+import { ButtonIcon as Gr, buttonIconVariants as Ar } from "./components/ui/button-icon/button-icon.js";
+import { Switch as Rr } from "./components/ui/switch/switch.js";
+import { Tooltip as Lr, TooltipContent as kr, TooltipProvider as zr, TooltipTrigger as Er } from "./components/ui/tooltip/tooltip.js";
+import { Tag as wr, tagVariants as jr } from "./components/ui/tag/tag.js";
 export {
   t as Avatar,
   i as AvatarFallback,
@@ -27,65 +29,68 @@ export {
   u as BreadcrumbItem,
   p as BreadcrumbLink,
   l as BreadcrumbList,
-  y as BreadcrumbPage,
-  x as BreadcrumbSeparator,
-  f as Button,
-  P as ButtonDropdown,
-  Br as ButtonIcon,
-  T as Checkbox,
-  A as Input,
-  h as InputTextArea,
-  V as Radio,
-  v as RadioGroup,
-  O as ResizableHandle,
-  Q as ResizablePanel,
-  U as ResizablePanelGroup,
-  k as Search,
-  z as SearchGlobal,
-  F as Select,
-  H as SelectContent,
-  D as SelectGroup,
-  j as SelectGroupLabel,
-  q as SelectItem,
-  J as SelectTrigger,
-  K as SelectValue,
-  X as SidebarPrimary,
-  Y as SidebarPrimaryCollapseTrigger,
-  Z as SidebarPrimaryContent,
-  _ as SidebarPrimaryFooter,
-  $ as SidebarPrimaryHeader,
-  rr as SidebarPrimaryMenu,
-  er as SidebarPrimaryMenuItem,
-  ar as SidebarPrimaryMenuItemExtras,
-  or as SidebarPrimarySection,
-  nr as SidebarSecondary,
-  dr as SidebarSecondaryCollapseTrigger,
-  Sr as SidebarSecondaryCollapsedBreadcrumb,
-  br as SidebarSecondaryContent,
-  mr as SidebarSecondaryFooter,
-  cr as SidebarSecondaryHeader,
-  ur as SidebarSecondaryMenu,
-  pr as SidebarSecondaryMenuItem,
-  lr as SidebarSecondaryMenuItemExtras,
-  yr as SidebarSecondaryMenuSub,
-  xr as SidebarSecondaryMenuSubContent,
-  sr as SidebarSecondaryMenuSubItem,
-  fr as SidebarSecondaryMenuSubTrigger,
-  gr as SidebarSecondarySection,
-  Ir as SidebarSecondarySectionLabel,
-  Vr as Switch,
-  kr as Tag,
-  Gr as Tooltip,
-  Ar as TooltipContent,
-  Rr as TooltipProvider,
-  hr as TooltipTrigger,
+  x as BreadcrumbPage,
+  y as BreadcrumbSeparator,
+  s as Button,
+  Gr as ButtonIcon,
+  M as ButtonMenu,
+  B as CardFilter,
+  v as Checkbox,
+  h as Input,
+  k as InputText,
+  E as InputTextArea,
+  A as Radio,
+  F as RadioGroup,
+  Y as ResizableHandle,
+  Z as ResizablePanel,
+  _ as ResizablePanelGroup,
+  w as Search,
+  q as SearchGlobal,
+  J as Select,
+  K as SelectContent,
+  N as SelectGroup,
+  O as SelectGroupLabel,
+  Q as SelectItem,
+  U as SelectTrigger,
+  W as SelectValue,
+  rr as SidebarPrimary,
+  er as SidebarPrimaryCollapseTrigger,
+  ar as SidebarPrimaryContent,
+  or as SidebarPrimaryFooter,
+  tr as SidebarPrimaryHeader,
+  ir as SidebarPrimaryMenu,
+  nr as SidebarPrimaryMenuItem,
+  dr as SidebarPrimaryMenuItemExtras,
+  Sr as SidebarPrimarySection,
+  cr as SidebarSecondary,
+  ur as SidebarSecondaryCollapseTrigger,
+  pr as SidebarSecondaryCollapsedBreadcrumb,
+  lr as SidebarSecondaryContent,
+  xr as SidebarSecondaryFooter,
+  yr as SidebarSecondaryHeader,
+  fr as SidebarSecondaryMenu,
+  sr as SidebarSecondaryMenuItem,
+  Ir as SidebarSecondaryMenuItemExtras,
+  gr as SidebarSecondaryMenuSub,
+  Mr as SidebarSecondaryMenuSubContent,
+  Pr as SidebarSecondaryMenuSubItem,
+  Tr as SidebarSecondaryMenuSubTrigger,
+  Br as SidebarSecondarySection,
+  Cr as SidebarSecondarySectionLabel,
+  Rr as Switch,
+  wr as Tag,
+  Lr as Tooltip,
+  kr as TooltipContent,
+  zr as TooltipProvider,
+  Er as TooltipTrigger,
   S as avatarVariants,
-  M as buttonDropdownVariants,
-  Tr as buttonIconVariants,
-  g as buttonVariants,
+  Ar as buttonIconVariants,
+  P as buttonMenuVariants,
+  I as buttonVariants,
+  C as cardFilterVariants,
   a as cn,
-  tr as sidebarPrimaryMenuItemVariants,
-  Pr as sidebarSecondaryMenuItemVariants,
-  wr as tagVariants
+  br as sidebarPrimaryMenuItemVariants,
+  Vr as sidebarSecondaryMenuItemVariants,
+  jr as tagVariants
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}