@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/components/ui/link/link.js

@@ -1,54 +1,34 @@
-import { jsxs as d, Fragment as x, jsx as m } from "react/jsx-runtime";
-import * as u from "react";
-import { mergeProps as g } from "@base-ui/react/merge-props";
-import { useRender as k } from "@base-ui/react/use-render";
-import { cva as b } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { SquareArrowUpRightIcon as p } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as f } from "../../../lib/utils.js";
-const h = b(
-  "inline-flex items-center gap-[var(--ui-link-global-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0 [text-decoration:var(--ui-link-global-text-decoration-idle)] hover:[text-decoration:var(--ui-link-global-text-decoration-hover)] active:[text-decoration:var(--ui-link-global-text-decoration-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] aria-disabled:pointer-events-none aria-disabled:[text-decoration:var(--ui-link-global-text-decoration-disabled)]",
-  {
-    variants: {
-      variant: {
-        normal: "text-[var(--ui-link-normal-text-color-idle)] [&_svg]:text-[var(--ui-link-normal-external-icon-color-idle)] hover:text-[var(--ui-link-normal-text-color-hover)] hover:[&_svg]:text-[var(--ui-link-normal-external-icon-color-hover)] active:text-[var(--ui-link-normal-text-color-active)] active:[&_svg]:text-[var(--ui-link-normal-external-icon-color-active)] aria-disabled:text-[var(--ui-link-normal-text-color-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-normal-external-icon-color-disabled)]",
-        // Text color only — no icon classes (the surface has no external icon) and no
-        // `aria-disabled:` color: Figma marks the disabled state unsupported on a
-        // backdrop ("disable state not supported onBackdrop") and the tier ships no
-        // `--ui-link-inverse-*-disabled` token to reference. `disabled` still renders
-        // the link inert; only its color stays at the idle value.
-        inverse: "text-[var(--ui-link-inverse-text-color-idle)] hover:text-[var(--ui-link-inverse-text-color-hover)] active:text-[var(--ui-link-inverse-text-color-active)]"
-      }
-    },
-    defaultVariants: {
-      variant: "normal"
-    }
-  }
-), _ = u.forwardRef(
-  ({ className: o, variant: i, external: t, disabled: a, href: n, children: l, render: s, ...v }, c) => {
-    const r = i === "inverse", e = a && !r;
-    return k({
-      render: s,
-      ref: c,
-      defaultTagName: "a",
-      props: g(
-        {
-          className: f(h({ variant: i }), o),
-          href: e ? void 0 : n,
-          "aria-disabled": e || void 0,
-          tabIndex: e ? -1 : void 0,
-          children: /* @__PURE__ */ d(x, { children: [
-            l,
-            t && !r && /* @__PURE__ */ m(p, { size: 16 })
-          ] })
-        },
-        v
-      )
-    });
-  }
-);
-_.displayName = "Link";
-export {
-  _ as Link,
-  h as linkVariants
-};
-//# sourceMappingURL=link.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import * as n from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { SquareArrowUpRightIcon as o } from "@acronis-platform/icons-react/stroke-mono";
+import { useRender as s } from "@base-ui/react/use-render";
+import { mergeProps as c } from "@base-ui/react/merge-props";
+//#region src/components/ui/link/link.tsx
+var l = t("inline-flex items-center gap-[var(--ui-link-global-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0 [text-decoration:var(--ui-link-global-text-decoration-idle)] hover:[text-decoration:var(--ui-link-global-text-decoration-hover)] active:[text-decoration:var(--ui-link-global-text-decoration-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] aria-disabled:pointer-events-none aria-disabled:[text-decoration:var(--ui-link-global-text-decoration-disabled)]", {
+	variants: { variant: {
+		normal: "text-[var(--ui-link-normal-text-color-idle)] [&_svg]:text-[var(--ui-link-normal-external-icon-color-idle)] hover:text-[var(--ui-link-normal-text-color-hover)] hover:[&_svg]:text-[var(--ui-link-normal-external-icon-color-hover)] active:text-[var(--ui-link-normal-text-color-active)] active:[&_svg]:text-[var(--ui-link-normal-external-icon-color-active)] aria-disabled:text-[var(--ui-link-normal-text-color-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-normal-external-icon-color-disabled)]",
+		inverse: "text-[var(--ui-link-inverse-text-color-idle)] hover:text-[var(--ui-link-inverse-text-color-hover)] active:text-[var(--ui-link-inverse-text-color-active)]"
+	} },
+	defaultVariants: { variant: "normal" }
+}), u = n.forwardRef(({ className: t, variant: n, external: u, disabled: d, href: f, children: p, render: m, ...h }, g) => {
+	let _ = n === "inverse", v = d && !_;
+	return s({
+		render: m,
+		ref: g,
+		defaultTagName: "a",
+		props: c({
+			className: e(l({ variant: n }), t),
+			href: v ? void 0 : f,
+			"aria-disabled": v || void 0,
+			tabIndex: v ? -1 : void 0,
+			children: /* @__PURE__ */ a(r, { children: [p, u && !_ && /* @__PURE__ */ i(o, { size: 16 })] })
+		}, h)
+	});
+});
+u.displayName = "Link";
+//#endregion
+export { u as Link, l as linkVariants };
+
+//# sourceMappingURL=link.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["../../../../src/components/ui/link/link.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';\nimport { SquareArrowUpRightIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"Link\" component set: an inline text link (semibold, 14/24) with\n// an optional trailing external-link icon (`external`). Themed by the `--ui-link-*`\n// tier, whose per-surface sets map to the Figma `background` variant — `normal` for\n// ordinary surfaces, `inverse` for links over a backdrop/scrim. Each state wires its\n// own text color (`--ui-link-<surface>-text-color-*`); on `normal` the external icon\n// gets its own color too (`--ui-link-normal-external-icon-color-*`, kept separate from\n// the text per the tier). Text decoration is shared across surfaces\n// (`--ui-link-global-text-decoration-*`; underline on hover only). Focus paints a 3px\n// `--ui-focus-primary` ring on both surfaces. Polymorphic via Base UI `useRender` —\n// pass `render` to render a router `Link` instead of the default `<a>`.\n//\n// Two things the `inverse` surface deliberately does NOT have, both per the Figma set,\n// and both therefore inert props there rather than half-applied ones:\n//   - No external icon: the `SquareArrowUpRight` layer exists only in the five\n//     `background=normal` variants, so `external` renders nothing — same as toggling\n//     Figma's `External` on an inverse instance. tokens-pd does emit\n//     `--ui-link-inverse-external-icon-color-*`, but the design never uses it, so it is\n//     left unreferenced rather than used to invent an icon.\n//   - No disabled state: the Figma set has only four enabled inverse variants and marks\n//     the fifth unsupported (\"disable state not supported onBackdrop\"), so `disabled` is\n//     discarded rather than applied without its color. Consumers that need an inert link\n//     on a backdrop should omit it instead.\n//\n// The Figma container has a fixed 32px height for grid alignment\n// (`--ui-link-global-container-height`); it is intentionally NOT applied here so the\n// link flows inline within prose.\nconst linkVariants = cva(\n  'inline-flex items-center gap-[var(--ui-link-global-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0 [text-decoration:var(--ui-link-global-text-decoration-idle)] hover:[text-decoration:var(--ui-link-global-text-decoration-hover)] active:[text-decoration:var(--ui-link-global-text-decoration-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] aria-disabled:pointer-events-none aria-disabled:[text-decoration:var(--ui-link-global-text-decoration-disabled)]',\n  {\n    variants: {\n      variant: {\n        normal:\n          'text-[var(--ui-link-normal-text-color-idle)] [&_svg]:text-[var(--ui-link-normal-external-icon-color-idle)] hover:text-[var(--ui-link-normal-text-color-hover)] hover:[&_svg]:text-[var(--ui-link-normal-external-icon-color-hover)] active:text-[var(--ui-link-normal-text-color-active)] active:[&_svg]:text-[var(--ui-link-normal-external-icon-color-active)] aria-disabled:text-[var(--ui-link-normal-text-color-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-normal-external-icon-color-disabled)]',\n        // Text color only — no icon classes (the surface has no external icon) and no\n        // `aria-disabled:` color: Figma marks the disabled state unsupported on a\n        // backdrop (\"disable state not supported onBackdrop\") and the tier ships no\n        // `--ui-link-inverse-*-disabled` token to reference. `disabled` still renders\n        // the link inert; only its color stays at the idle value.\n        inverse:\n          'text-[var(--ui-link-inverse-text-color-idle)] hover:text-[var(--ui-link-inverse-text-color-hover)] active:text-[var(--ui-link-inverse-text-color-active)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'normal',\n    },\n  }\n);\n\nexport interface LinkProps\n  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,\n    VariantProps<typeof linkVariants> {\n  /**\n   * Which surface the link sits on (Figma's `background`): `normal` for ordinary\n   * surfaces, `inverse` for a backdrop/scrim or other dark brand surface.\n   */\n  variant?: 'normal' | 'inverse';\n  /**\n   * Append a trailing external-link icon (e.g. for links that leave the app).\n   * Has no effect on `variant=\"inverse\"` — the design defines no external icon for\n   * links on a backdrop.\n   */\n  external?: boolean;\n  /**\n   * Render the link inert: disabled color, removed from the tab order, no navigation.\n   * Ignored entirely on `variant=\"inverse\"` — the design defines no disabled state on\n   * a backdrop, so the link renders exactly as an enabled one (still navigable and\n   * focusable). Omit the link, or use `variant=\"normal\"`, when you need it inert.\n   */\n  disabled?: boolean;\n  /**\n   * Replace the rendered `<a>` with another element or component (Base UI\n   * composition) — e.g. a router `Link`. Props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ className, variant, external, disabled, href, children, render, ...props }, ref) => {\n    // The `inverse` surface exists only in the four enabled Figma variants, so neither\n    // of the two props the design leaves out of it has any effect there: `disabled` is\n    // discarded outright (the link stays navigable, focusable and hoverable, with no\n    // `aria-disabled`) and `external` renders no icon.\n    const isInverse = variant === 'inverse';\n    const isDisabled = disabled && !isInverse;\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'a',\n      props: mergeProps<'a'>(\n        {\n          className: cn(linkVariants({ variant }), className),\n          href: isDisabled ? undefined : href,\n          'aria-disabled': isDisabled || undefined,\n          tabIndex: isDisabled ? -1 : undefined,\n          children: (\n            <>\n              {children}\n              {external && !isInverse && <SquareArrowUpRightIcon size={16} />}\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nLink.displayName = 'Link';\n\nexport { Link, linkVariants };\n"],"names":["linkVariants","cva","Link","React","className","variant","external","disabled","href","children","render","props","ref","isInverse","isDisabled","useRender","mergeProps","cn","jsxs","Fragment","jsx","SquareArrowUpRightIcon"],"mappings":";;;;;;;AAkCA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMF,SACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GA8BMC,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAAQ;AAKrF,UAAMC,IAAYR,MAAY,WACxBS,IAAaP,KAAY,CAACM;AAEhC,WAAOE,EAAU;AAAA,MACf,QAAAL;AAAA,MACA,KAAAE;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOI;AAAA,QACL;AAAA,UACE,WAAWC,EAAGjB,EAAa,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,UAClD,MAAMU,IAAa,SAAYN;AAAA,UAC/B,iBAAiBM,KAAc;AAAA,UAC/B,UAAUA,IAAa,KAAK;AAAA,UAC5B,UACE,gBAAAI,EAAAC,GAAA,EACG,UAAA;AAAA,YAAAV;AAAA,YACAH,KAAY,CAACO,KAAa,gBAAAO,EAACC,GAAA,EAAuB,MAAM,GAAA,CAAI;AAAA,UAAA,EAAA,CAC/D;AAAA,QAAA;AAAA,QAGJV;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAT,EAAK,cAAc;"}
+{"version":3,"file":"link.js","names":[],"sources":["../../../../src/components/ui/link/link.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';\nimport { SquareArrowUpRightIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"Link\" component set: an inline text link (semibold, 14/24) with\n// an optional trailing external-link icon (`external`). Themed by the `--ui-link-*`\n// tier, whose per-surface sets map to the Figma `background` variant — `normal` for\n// ordinary surfaces, `inverse` for links over a backdrop/scrim. Each state wires its\n// own text color (`--ui-link-<surface>-text-color-*`); on `normal` the external icon\n// gets its own color too (`--ui-link-normal-external-icon-color-*`, kept separate from\n// the text per the tier). Text decoration is shared across surfaces\n// (`--ui-link-global-text-decoration-*`; underline on hover only). Focus paints a 3px\n// `--ui-focus-primary` ring on both surfaces. Polymorphic via Base UI `useRender` —\n// pass `render` to render a router `Link` instead of the default `<a>`.\n//\n// Two things the `inverse` surface deliberately does NOT have, both per the Figma set,\n// and both therefore inert props there rather than half-applied ones:\n//   - No external icon: the `SquareArrowUpRight` layer exists only in the five\n//     `background=normal` variants, so `external` renders nothing — same as toggling\n//     Figma's `External` on an inverse instance. tokens-pd does emit\n//     `--ui-link-inverse-external-icon-color-*`, but the design never uses it, so it is\n//     left unreferenced rather than used to invent an icon.\n//   - No disabled state: the Figma set has only four enabled inverse variants and marks\n//     the fifth unsupported (\"disable state not supported onBackdrop\"), so `disabled` is\n//     discarded rather than applied without its color. Consumers that need an inert link\n//     on a backdrop should omit it instead.\n//\n// The Figma container has a fixed 32px height for grid alignment\n// (`--ui-link-global-container-height`); it is intentionally NOT applied here so the\n// link flows inline within prose.\nconst linkVariants = cva(\n  'inline-flex items-center gap-[var(--ui-link-global-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0 [text-decoration:var(--ui-link-global-text-decoration-idle)] hover:[text-decoration:var(--ui-link-global-text-decoration-hover)] active:[text-decoration:var(--ui-link-global-text-decoration-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] aria-disabled:pointer-events-none aria-disabled:[text-decoration:var(--ui-link-global-text-decoration-disabled)]',\n  {\n    variants: {\n      variant: {\n        normal:\n          'text-[var(--ui-link-normal-text-color-idle)] [&_svg]:text-[var(--ui-link-normal-external-icon-color-idle)] hover:text-[var(--ui-link-normal-text-color-hover)] hover:[&_svg]:text-[var(--ui-link-normal-external-icon-color-hover)] active:text-[var(--ui-link-normal-text-color-active)] active:[&_svg]:text-[var(--ui-link-normal-external-icon-color-active)] aria-disabled:text-[var(--ui-link-normal-text-color-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-normal-external-icon-color-disabled)]',\n        // Text color only — no icon classes (the surface has no external icon) and no\n        // `aria-disabled:` color: Figma marks the disabled state unsupported on a\n        // backdrop (\"disable state not supported onBackdrop\") and the tier ships no\n        // `--ui-link-inverse-*-disabled` token to reference. `disabled` still renders\n        // the link inert; only its color stays at the idle value.\n        inverse:\n          'text-[var(--ui-link-inverse-text-color-idle)] hover:text-[var(--ui-link-inverse-text-color-hover)] active:text-[var(--ui-link-inverse-text-color-active)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'normal',\n    },\n  }\n);\n\nexport interface LinkProps\n  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,\n    VariantProps<typeof linkVariants> {\n  /**\n   * Which surface the link sits on (Figma's `background`): `normal` for ordinary\n   * surfaces, `inverse` for a backdrop/scrim or other dark brand surface.\n   */\n  variant?: 'normal' | 'inverse';\n  /**\n   * Append a trailing external-link icon (e.g. for links that leave the app).\n   * Has no effect on `variant=\"inverse\"` — the design defines no external icon for\n   * links on a backdrop.\n   */\n  external?: boolean;\n  /**\n   * Render the link inert: disabled color, removed from the tab order, no navigation.\n   * Ignored entirely on `variant=\"inverse\"` — the design defines no disabled state on\n   * a backdrop, so the link renders exactly as an enabled one (still navigable and\n   * focusable). Omit the link, or use `variant=\"normal\"`, when you need it inert.\n   */\n  disabled?: boolean;\n  /**\n   * Replace the rendered `<a>` with another element or component (Base UI\n   * composition) — e.g. a router `Link`. Props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ className, variant, external, disabled, href, children, render, ...props }, ref) => {\n    // The `inverse` surface exists only in the four enabled Figma variants, so neither\n    // of the two props the design leaves out of it has any effect there: `disabled` is\n    // discarded outright (the link stays navigable, focusable and hoverable, with no\n    // `aria-disabled`) and `external` renders no icon.\n    const isInverse = variant === 'inverse';\n    const isDisabled = disabled && !isInverse;\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'a',\n      props: mergeProps<'a'>(\n        {\n          className: cn(linkVariants({ variant }), className),\n          href: isDisabled ? undefined : href,\n          'aria-disabled': isDisabled || undefined,\n          tabIndex: isDisabled ? -1 : undefined,\n          children: (\n            <>\n              {children}\n              {external && !isInverse && <SquareArrowUpRightIcon size={16} />}\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nLink.displayName = 'Link';\n\nexport { Link, linkVariants };\n"],"mappings":";;;;;;;;AAkCA,IAAM,IAAe,EACnB,8iBACA;CACE,UAAU,EACR,SAAS;EACP,QACE;EAMF,SACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CACF,GA8BM,IAAO,EAAM,YAChB,EAAE,cAAW,YAAS,aAAU,aAAU,SAAM,aAAU,WAAQ,GAAG,KAAS,MAAQ;CAKrF,IAAM,IAAY,MAAY,WACxB,IAAa,KAAY,CAAC;CAEhC,OAAO,EAAU;EACf;EACA;EACA,gBAAgB;EAChB,OAAO,EACL;GACE,WAAW,EAAG,EAAa,EAAE,WAAQ,CAAC,GAAG,CAAS;GAClD,MAAM,IAAa,KAAA,IAAY;GAC/B,iBAAiB,KAAc,KAAA;GAC/B,UAAU,IAAa,KAAK,KAAA;GAC5B,UACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,KAAY,CAAC,KAAa,kBAAC,GAAD,EAAwB,MAAM,GAAK,CAAA,CAC9D,EAAA,CAAA;EAEN,GACA,CACF;CACF,CAAC;AACH,CACF;AACA,EAAK,cAAc"}

package/dist/components/ui/loading/loading.js

@@ -1,79 +1,52 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import * as g from "react";
-import { cva as s } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { cn as e } from "../../../lib/utils.js";
-import { Spinner as u } from "../spinner/spinner.js";
-const m = s("inline-flex items-center", {
-  variants: {
-    variant: {
-      inline: "gap-[var(--ui-loading-inline-container-gap)]",
-      onSurfacePrimary: "flex-col justify-center gap-[var(--ui-loading-element-container-gap)] rounded-lg bg-[var(--ui-loading-element-container-color-primary)] px-[var(--ui-loading-element-container-padding-x)] py-[var(--ui-loading-element-container-padding-y)]",
-      onSurfaceSecondary: "flex-col justify-center gap-[var(--ui-loading-element-container-gap)] rounded-lg bg-[var(--ui-loading-element-container-color-secondary)] px-[var(--ui-loading-element-container-padding-x)] py-[var(--ui-loading-element-container-padding-y)]",
-      onScreen: "flex-col justify-center gap-[var(--ui-loading-screen-container-gap)] rounded-lg bg-[var(--ui-loading-screen-container-color)] px-[var(--ui-loading-screen-container-padding-x)] py-[var(--ui-loading-screen-container-padding-y)]"
-    }
-  },
-  defaultVariants: {
-    variant: "inline"
-  }
-}), p = {
-  inline: "sm",
-  onSurfacePrimary: "lg",
-  onSurfaceSecondary: "lg",
-  onScreen: "xl"
-}, v = {
-  inline: "text-[var(--ui-loading-inline-icon-color)]",
-  onSurfacePrimary: "text-[var(--ui-loading-element-icon-color)]",
-  onSurfaceSecondary: "text-[var(--ui-loading-element-icon-color)]",
-  onScreen: "text-[var(--ui-loading-screen-icon-color)]"
-}, f = {
-  inline: "text-[var(--ui-loading-inline-label-color)]",
-  onSurfacePrimary: "text-[var(--ui-loading-element-label-color)]",
-  onSurfaceSecondary: "text-[var(--ui-loading-element-label-color)]",
-  onScreen: "text-[var(--ui-loading-screen-label-color)]"
-}, x = g.forwardRef(
-  ({
-    className: o,
-    variant: l = "inline",
-    hasLabel: a = !0,
-    label: i = "Data is loading…",
-    ...t
-  }, c) => {
-    const n = l ?? "inline";
-    return /* @__PURE__ */ d(
-      "div",
-      {
-        ref: c,
-        role: "status",
-        "aria-label": a ? void 0 : i,
-        className: e(m({ variant: n }), o),
-        ...t,
-        children: [
-          /* @__PURE__ */ r(
-            u,
-            {
-              "aria-hidden": "true",
-              size: p[n],
-              className: e("shrink-0", v[n])
-            }
-          ),
-          a && /* @__PURE__ */ r(
-            "span",
-            {
-              className: e(
-                "whitespace-nowrap text-sm font-normal leading-6",
-                f[n]
-              ),
-              children: i
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-x.displayName = "Loading";
-export {
-  x as Loading,
-  m as loadingVariants
-};
-//# sourceMappingURL=loading.js.map
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { Spinner as n } from "../spinner/spinner.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/ui/loading/loading.tsx
+var o = t("inline-flex items-center", {
+	variants: { variant: {
+		inline: "gap-[var(--ui-loading-inline-container-gap)]",
+		onSurfacePrimary: "flex-col justify-center gap-[var(--ui-loading-element-container-gap)] rounded-lg bg-[var(--ui-loading-element-container-color-primary)] px-[var(--ui-loading-element-container-padding-x)] py-[var(--ui-loading-element-container-padding-y)]",
+		onSurfaceSecondary: "flex-col justify-center gap-[var(--ui-loading-element-container-gap)] rounded-lg bg-[var(--ui-loading-element-container-color-secondary)] px-[var(--ui-loading-element-container-padding-x)] py-[var(--ui-loading-element-container-padding-y)]",
+		onScreen: "flex-col justify-center gap-[var(--ui-loading-screen-container-gap)] rounded-lg bg-[var(--ui-loading-screen-container-color)] px-[var(--ui-loading-screen-container-padding-x)] py-[var(--ui-loading-screen-container-padding-y)]"
+	} },
+	defaultVariants: { variant: "inline" }
+}), s = {
+	inline: "sm",
+	onSurfacePrimary: "lg",
+	onSurfaceSecondary: "lg",
+	onScreen: "xl"
+}, c = {
+	inline: "text-[var(--ui-loading-inline-icon-color)]",
+	onSurfacePrimary: "text-[var(--ui-loading-element-icon-color)]",
+	onSurfaceSecondary: "text-[var(--ui-loading-element-icon-color)]",
+	onScreen: "text-[var(--ui-loading-screen-icon-color)]"
+}, l = {
+	inline: "text-[var(--ui-loading-inline-label-color)]",
+	onSurfacePrimary: "text-[var(--ui-loading-element-label-color)]",
+	onSurfaceSecondary: "text-[var(--ui-loading-element-label-color)]",
+	onScreen: "text-[var(--ui-loading-screen-label-color)]"
+}, u = r.forwardRef(({ className: t, variant: r = "inline", hasLabel: u = !0, label: d = "Data is loading…", ...f }, p) => {
+	let m = r ?? "inline";
+	return /* @__PURE__ */ a("div", {
+		ref: p,
+		role: "status",
+		"aria-label": u ? void 0 : d,
+		className: e(o({ variant: m }), t),
+		...f,
+		children: [/* @__PURE__ */ i(n, {
+			"aria-hidden": "true",
+			size: s[m],
+			className: e("shrink-0", c[m])
+		}), u && /* @__PURE__ */ i("span", {
+			className: e("whitespace-nowrap text-sm font-normal leading-6", l[m]),
+			children: d
+		})]
+	});
+});
+u.displayName = "Loading";
+//#endregion
+export { u as Loading, o as loadingVariants };
+
+//# sourceMappingURL=loading.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"loading.js","sources":["../../../../src/components/ui/loading/loading.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Spinner } from '../spinner';\n\n// A composite loading indicator (spinner + optional label) for four placement\n// contexts, themed by the `--ui-loading-*` tier. Distinct from the bare `Spinner`\n// primitive (which this component reuses for its icon and which stays an\n// internal-only primitive, not re-exported — see spinner.tsx): `Spinner` is a\n// leaf atom with no label/container of its own, still used as-is by `Toast`'s\n// small inline icon. `inline` sits flush in text flow; `onSurfacePrimary`/\n// `onSurfaceSecondary` are card-like chips for placing over a primary/secondary\n// app surface; `onScreen` is the higher-contrast dark chip for placing over\n// busy/photo/video surfaces. The icon is `aria-hidden` and the root carries\n// `role=\"status\"` so the (visible or, when `hasLabel` is false, only\n// `aria-label`'d) text is the single accessible announcement — avoids double\n// announcement against `Spinner`'s own built-in status role.\nconst loadingVariants = cva('inline-flex items-center', {\n  variants: {\n    variant: {\n      inline: 'gap-[var(--ui-loading-inline-container-gap)]',\n      onSurfacePrimary:\n        'flex-col justify-center gap-[var(--ui-loading-element-container-gap)] rounded-lg bg-[var(--ui-loading-element-container-color-primary)] px-[var(--ui-loading-element-container-padding-x)] py-[var(--ui-loading-element-container-padding-y)]',\n      onSurfaceSecondary:\n        'flex-col justify-center gap-[var(--ui-loading-element-container-gap)] rounded-lg bg-[var(--ui-loading-element-container-color-secondary)] px-[var(--ui-loading-element-container-padding-x)] py-[var(--ui-loading-element-container-padding-y)]',\n      onScreen:\n        'flex-col justify-center gap-[var(--ui-loading-screen-container-gap)] rounded-lg bg-[var(--ui-loading-screen-container-color)] px-[var(--ui-loading-screen-container-padding-x)] py-[var(--ui-loading-screen-container-padding-y)]',\n    },\n  },\n  defaultVariants: {\n    variant: 'inline',\n  },\n});\n\nconst spinnerSizeByVariant = {\n  inline: 'sm',\n  onSurfacePrimary: 'lg',\n  onSurfaceSecondary: 'lg',\n  onScreen: 'xl',\n} as const;\n\nconst iconColorClassByVariant: Record<string, string> = {\n  inline: 'text-[var(--ui-loading-inline-icon-color)]',\n  onSurfacePrimary: 'text-[var(--ui-loading-element-icon-color)]',\n  onSurfaceSecondary: 'text-[var(--ui-loading-element-icon-color)]',\n  onScreen: 'text-[var(--ui-loading-screen-icon-color)]',\n};\n\nconst labelClassByVariant: Record<string, string> = {\n  inline: 'text-[var(--ui-loading-inline-label-color)]',\n  onSurfacePrimary: 'text-[var(--ui-loading-element-label-color)]',\n  onSurfaceSecondary: 'text-[var(--ui-loading-element-label-color)]',\n  onScreen: 'text-[var(--ui-loading-screen-label-color)]',\n};\n\nexport interface LoadingProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof loadingVariants> {\n  /** Whether the label is rendered. When `false`, `label` is still exposed to assistive tech via `aria-label`. */\n  hasLabel?: boolean;\n  /** The loading message. */\n  label?: string;\n}\n\nconst Loading = React.forwardRef<HTMLDivElement, LoadingProps>(\n  (\n    {\n      className,\n      variant = 'inline',\n      hasLabel = true,\n      label = 'Data is loading…',\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedVariant = variant ?? 'inline';\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-label={hasLabel ? undefined : label}\n        className={cn(loadingVariants({ variant: resolvedVariant }), className)}\n        {...props}\n      >\n        <Spinner\n          aria-hidden=\"true\"\n          size={spinnerSizeByVariant[resolvedVariant]}\n          className={cn('shrink-0', iconColorClassByVariant[resolvedVariant])}\n        />\n        {hasLabel && (\n          <span\n            className={cn(\n              'whitespace-nowrap text-sm font-normal leading-6',\n              labelClassByVariant[resolvedVariant]\n            )}\n          >\n            {label}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\nLoading.displayName = 'Loading';\n\nexport { Loading, loadingVariants };\n"],"names":["loadingVariants","cva","spinnerSizeByVariant","iconColorClassByVariant","labelClassByVariant","Loading","React","className","variant","hasLabel","label","props","ref","resolvedVariant","jsxs","cn","jsx","Spinner"],"mappings":";;;;;AAkBA,MAAMA,IAAkBC,EAAI,4BAA4B;AAAA,EACtD,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,kBACE;AAAA,MACF,oBACE;AAAA,MACF,UACE;AAAA,IAAA;AAAA,EACJ;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAEKC,IAAuB;AAAA,EAC3B,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,UAAU;AACZ,GAEMC,IAAkD;AAAA,EACtD,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,UAAU;AACZ,GAEMC,IAA8C;AAAA,EAClD,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,UAAU;AACZ,GAYMC,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAkBL,KAAW;AACnC,WACE,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,MAAK;AAAA,QACL,cAAYH,IAAW,SAAYC;AAAA,QACnC,WAAWK,EAAGf,EAAgB,EAAE,SAASa,EAAA,CAAiB,GAAGN,CAAS;AAAA,QACrE,GAAGI;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAK;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,MAAMf,EAAqBW,CAAe;AAAA,cAC1C,WAAWE,EAAG,YAAYZ,EAAwBU,CAAe,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEnEJ,KACC,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACAX,EAAoBS,CAAe;AAAA,cAAA;AAAA,cAGpC,UAAAH;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAL,EAAQ,cAAc;"}
+{"version":3,"file":"loading.js","names":[],"sources":["../../../../src/components/ui/loading/loading.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Spinner } from '../spinner';\n\n// A composite loading indicator (spinner + optional label) for four placement\n// contexts, themed by the `--ui-loading-*` tier. Distinct from the bare `Spinner`\n// primitive (which this component reuses for its icon and which stays an\n// internal-only primitive, not re-exported — see spinner.tsx): `Spinner` is a\n// leaf atom with no label/container of its own, still used as-is by `Toast`'s\n// small inline icon. `inline` sits flush in text flow; `onSurfacePrimary`/\n// `onSurfaceSecondary` are card-like chips for placing over a primary/secondary\n// app surface; `onScreen` is the higher-contrast dark chip for placing over\n// busy/photo/video surfaces. The icon is `aria-hidden` and the root carries\n// `role=\"status\"` so the (visible or, when `hasLabel` is false, only\n// `aria-label`'d) text is the single accessible announcement — avoids double\n// announcement against `Spinner`'s own built-in status role.\nconst loadingVariants = cva('inline-flex items-center', {\n  variants: {\n    variant: {\n      inline: 'gap-[var(--ui-loading-inline-container-gap)]',\n      onSurfacePrimary:\n        'flex-col justify-center gap-[var(--ui-loading-element-container-gap)] rounded-lg bg-[var(--ui-loading-element-container-color-primary)] px-[var(--ui-loading-element-container-padding-x)] py-[var(--ui-loading-element-container-padding-y)]',\n      onSurfaceSecondary:\n        'flex-col justify-center gap-[var(--ui-loading-element-container-gap)] rounded-lg bg-[var(--ui-loading-element-container-color-secondary)] px-[var(--ui-loading-element-container-padding-x)] py-[var(--ui-loading-element-container-padding-y)]',\n      onScreen:\n        'flex-col justify-center gap-[var(--ui-loading-screen-container-gap)] rounded-lg bg-[var(--ui-loading-screen-container-color)] px-[var(--ui-loading-screen-container-padding-x)] py-[var(--ui-loading-screen-container-padding-y)]',\n    },\n  },\n  defaultVariants: {\n    variant: 'inline',\n  },\n});\n\nconst spinnerSizeByVariant = {\n  inline: 'sm',\n  onSurfacePrimary: 'lg',\n  onSurfaceSecondary: 'lg',\n  onScreen: 'xl',\n} as const;\n\nconst iconColorClassByVariant: Record<string, string> = {\n  inline: 'text-[var(--ui-loading-inline-icon-color)]',\n  onSurfacePrimary: 'text-[var(--ui-loading-element-icon-color)]',\n  onSurfaceSecondary: 'text-[var(--ui-loading-element-icon-color)]',\n  onScreen: 'text-[var(--ui-loading-screen-icon-color)]',\n};\n\nconst labelClassByVariant: Record<string, string> = {\n  inline: 'text-[var(--ui-loading-inline-label-color)]',\n  onSurfacePrimary: 'text-[var(--ui-loading-element-label-color)]',\n  onSurfaceSecondary: 'text-[var(--ui-loading-element-label-color)]',\n  onScreen: 'text-[var(--ui-loading-screen-label-color)]',\n};\n\nexport interface LoadingProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof loadingVariants> {\n  /** Whether the label is rendered. When `false`, `label` is still exposed to assistive tech via `aria-label`. */\n  hasLabel?: boolean;\n  /** The loading message. */\n  label?: string;\n}\n\nconst Loading = React.forwardRef<HTMLDivElement, LoadingProps>(\n  (\n    {\n      className,\n      variant = 'inline',\n      hasLabel = true,\n      label = 'Data is loading…',\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedVariant = variant ?? 'inline';\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-label={hasLabel ? undefined : label}\n        className={cn(loadingVariants({ variant: resolvedVariant }), className)}\n        {...props}\n      >\n        <Spinner\n          aria-hidden=\"true\"\n          size={spinnerSizeByVariant[resolvedVariant]}\n          className={cn('shrink-0', iconColorClassByVariant[resolvedVariant])}\n        />\n        {hasLabel && (\n          <span\n            className={cn(\n              'whitespace-nowrap text-sm font-normal leading-6',\n              labelClassByVariant[resolvedVariant]\n            )}\n          >\n            {label}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\nLoading.displayName = 'Loading';\n\nexport { Loading, loadingVariants };\n"],"mappings":";;;;;;AAkBA,IAAM,IAAkB,EAAI,4BAA4B;CACtD,UAAU,EACR,SAAS;EACP,QAAQ;EACR,kBACE;EACF,oBACE;EACF,UACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CAAC,GAEK,IAAuB;CAC3B,QAAQ;CACR,kBAAkB;CAClB,oBAAoB;CACpB,UAAU;AACZ,GAEM,IAAkD;CACtD,QAAQ;CACR,kBAAkB;CAClB,oBAAoB;CACpB,UAAU;AACZ,GAEM,IAA8C;CAClD,QAAQ;CACR,kBAAkB;CAClB,oBAAoB;CACpB,UAAU;AACZ,GAYM,IAAU,EAAM,YAElB,EACE,cACA,aAAU,UACV,cAAW,IACX,WAAQ,oBACR,GAAG,KAEL,MACG;CACH,IAAM,IAAkB,KAAW;CACnC,OACE,kBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY,IAAW,KAAA,IAAY;EACnC,WAAW,EAAG,EAAgB,EAAE,SAAS,EAAgB,CAAC,GAAG,CAAS;EACtE,GAAI;EALN,UAAA,CAOE,kBAAC,GAAD;GACE,eAAY;GACZ,MAAM,EAAqB;GAC3B,WAAW,EAAG,YAAY,EAAwB,EAAgB;EACnE,CAAA,GACA,KACC,kBAAC,QAAD;GACE,WAAW,EACT,mDACA,EAAoB,EACtB;GAEC,UAAA;EACG,CAAA,CAEL;;AAET,CACF;AACA,EAAQ,cAAc"}

package/dist/components/ui/meter/meter.js

@@ -1,93 +1,79 @@
-import { jsxs as n, jsx as e, Fragment as x } from "react/jsx-runtime";
-import * as p from "react";
-import { Meter as t } from "@base-ui/react/meter";
-import { cn as g } from "../../../lib/utils.js";
-import { Tooltip as k, TooltipTrigger as M, TooltipContent as w } from "../tooltip/tooltip.js";
-const y = (a) => a.toLocaleString(), T = p.forwardRef(
-  ({
-    className: a,
-    label: l,
-    value: o,
-    max: r = 100,
-    color: c,
-    valueFormatter: s = y,
-    showTooltip: i = !0,
-    tooltip: f,
-    defaultOpen: h,
-    ...b
-  }, m) => {
-    const d = r > 0 ? Math.round(o / r * 100) : 0, N = r > 0 ? r : 1, u = /* @__PURE__ */ n(
-      t.Root,
-      {
-        value: o,
-        max: N,
-        "aria-valuemax": r,
-        "aria-valuetext": `${s(o)} of ${s(r)} (${d}%)`,
-        tabIndex: i ? 0 : void 0,
-        className: g("flex w-full flex-col gap-1.5", a),
-        ...b,
-        children: [
-          /* @__PURE__ */ n("div", { className: "flex items-baseline justify-between gap-2 text-sm leading-none", children: [
-            /* @__PURE__ */ e(t.Label, { className: "truncate text-muted-foreground", children: l }),
-            /* @__PURE__ */ n("span", { className: "shrink-0 tabular-nums", children: [
-              /* @__PURE__ */ e("span", { className: "font-semibold text-foreground", children: s(o) }),
-              /* @__PURE__ */ n("span", { className: "text-muted-foreground", children: [
-                " · ",
-                d,
-                "%"
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ e(t.Track, { className: "h-2 w-full overflow-hidden rounded-full bg-input", children: /* @__PURE__ */ e(
-            t.Indicator,
-            {
-              className: "rounded-full",
-              style: { backgroundColor: c }
-            }
-          ) })
-        ]
-      }
-    );
-    return i ? /* @__PURE__ */ n(k, { defaultOpen: h, children: [
-      /* @__PURE__ */ e(
-        M,
-        {
-          ref: m,
-          render: u
-        }
-      ),
-      /* @__PURE__ */ e(
-        w,
-        {
-          className: g(
-            "border border-border bg-background text-foreground shadow-md",
-            !f && "flex items-center gap-2"
-          ),
-          children: f ?? /* @__PURE__ */ n(x, { children: [
-            /* @__PURE__ */ e(
-              "span",
-              {
-                className: "size-2.5 shrink-0 rounded-full",
-                style: { backgroundColor: c }
-              }
-            ),
-            /* @__PURE__ */ e("span", { className: "font-semibold", children: l }),
-            /* @__PURE__ */ n("span", { className: "text-muted-foreground", children: [
-              s(o),
-              " of ",
-              s(r),
-              " · ",
-              d,
-              "%"
-            ] })
-          ] })
-        }
-      )
-    ] }) : p.cloneElement(u, { ref: m });
-  }
-);
-T.displayName = "Meter";
-export {
-  T as Meter
-};
-//# sourceMappingURL=meter.js.map
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { Tooltip as t, TooltipContent as n, TooltipTrigger as r } from "../tooltip/tooltip.js";
+import * as i from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Meter as c } from "@base-ui/react/meter";
+//#region src/components/ui/meter/meter.tsx
+var l = (e) => e.toLocaleString(), u = i.forwardRef(({ className: u, label: d, value: f, max: p = 100, color: m, valueFormatter: h = l, showTooltip: g = !0, tooltip: _, defaultOpen: v, ...y }, b) => {
+	let x = p > 0 ? Math.round(f / p * 100) : 0, S = p > 0 ? p : 1, C = /* @__PURE__ */ s(c.Root, {
+		value: f,
+		max: S,
+		"aria-valuemax": p,
+		"aria-valuetext": `${h(f)} of ${h(p)} (${x}%)`,
+		tabIndex: g ? 0 : void 0,
+		className: e("flex w-full flex-col gap-1.5", u),
+		...y,
+		children: [/* @__PURE__ */ s("div", {
+			className: "flex items-baseline justify-between gap-2 text-sm leading-none",
+			children: [/* @__PURE__ */ o(c.Label, {
+				className: "truncate text-muted-foreground",
+				children: d
+			}), /* @__PURE__ */ s("span", {
+				className: "shrink-0 tabular-nums",
+				children: [/* @__PURE__ */ o("span", {
+					className: "font-semibold text-foreground",
+					children: h(f)
+				}), /* @__PURE__ */ s("span", {
+					className: "text-muted-foreground",
+					children: [
+						" · ",
+						x,
+						"%"
+					]
+				})]
+			})]
+		}), /* @__PURE__ */ o(c.Track, {
+			className: "h-2 w-full overflow-hidden rounded-full bg-input",
+			children: /* @__PURE__ */ o(c.Indicator, {
+				className: "rounded-full",
+				style: { backgroundColor: m }
+			})
+		})]
+	});
+	return g ? /* @__PURE__ */ s(t, {
+		defaultOpen: v,
+		children: [/* @__PURE__ */ o(r, {
+			ref: b,
+			render: C
+		}), /* @__PURE__ */ o(n, {
+			className: e("border border-border bg-background text-foreground shadow-md", !_ && "flex items-center gap-2"),
+			children: _ ?? /* @__PURE__ */ s(a, { children: [
+				/* @__PURE__ */ o("span", {
+					className: "size-2.5 shrink-0 rounded-full",
+					style: { backgroundColor: m }
+				}),
+				/* @__PURE__ */ o("span", {
+					className: "font-semibold",
+					children: d
+				}),
+				/* @__PURE__ */ s("span", {
+					className: "text-muted-foreground",
+					children: [
+						h(f),
+						" of ",
+						h(p),
+						" · ",
+						x,
+						"%"
+					]
+				})
+			] })
+		})]
+	}) : i.cloneElement(C, { ref: b });
+});
+u.displayName = "Meter";
+//#endregion
+export { u as Meter };
+
+//# sourceMappingURL=meter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"meter.js","sources":["../../../../src/components/ui/meter/meter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Meter as MeterPrimitive } from '@base-ui/react/meter';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A meter: a labelled bar showing a scalar value within a known range (a\n// fractional value / share), as opposed to `Progress` which tracks a task over\n// time — hence Base UI's Meter primitive (`role=\"meter\"`, mirroring the HTML\n// `<meter>` element). One row — label + `value · %` over a proportional track\n// bar — designed to be stacked into a ranked breakdown (a \"bar list\"). No new\n// tokens: the track reuses the shared `bg-input`, and the fill color is\n// caller-supplied per row (an existing `--ui-*` token); there is no chart\n// palette tier yet.\n\nconst defaultFormat = (value: number) => value.toLocaleString();\n\nexport interface MeterProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof MeterPrimitive.Root>,\n    'value' | 'color'\n  > {\n  /** Row label shown on the left. */\n  label: string;\n  /** The value this meter represents. */\n  value: number;\n  /** Upper bound of the range — the whole the value is a share of. */\n  max?: number;\n  /** Fill color for the bar — an existing semantic `--ui-*` token (or any CSS color). */\n  color: string;\n  /** Format the numeric value (label + tooltip). Defaults to `toLocaleString()`. */\n  valueFormatter?: (value: number) => string;\n  /** Show the hover tooltip (`label · value of max · %`). */\n  showTooltip?: boolean;\n  /**\n   * Custom tooltip content — replaces the default (dot + label + `value of max\n   * · %`) inside the same chart-style card. Ignored when `showTooltip` is false.\n   */\n  tooltip?: React.ReactNode;\n  /** Render with the tooltip initially open (Base UI `defaultOpen`). */\n  defaultOpen?: boolean;\n}\n\nconst Meter = React.forwardRef<HTMLDivElement, MeterProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      max = 100,\n      color,\n      valueFormatter = defaultFormat,\n      showTooltip = true,\n      tooltip,\n      defaultOpen,\n      ...props\n    },\n    ref\n  ) => {\n    const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n    // Base UI derives the indicator width from value/max; a non-positive max\n    // would divide by zero and leave the fill unspecified, so floor it at 1\n    // (value is 0 for a degenerate row → a 0% fill that matches `pct`).\n    const safeMax = max > 0 ? max : 1;\n\n    const root = (\n      <MeterPrimitive.Root\n        value={value}\n        max={safeMax}\n        // Base UI derives aria-valuemax from the (clamped) max prop; override it\n        // back to the real max so the numeric ARIA triad agrees with the\n        // aria-valuetext / visible text on a degenerate max<=0 row.\n        aria-valuemax={max}\n        aria-valuetext={`${valueFormatter(value)} of ${valueFormatter(max)} (${pct}%)`}\n        // When wrapped in a Tooltip the meter div is the trigger; make it\n        // focusable so keyboard users can open the tooltip (hover-only\n        // otherwise). Without a tooltip there's nothing to reveal on focus.\n        tabIndex={showTooltip ? 0 : undefined}\n        className={cn('flex w-full flex-col gap-1.5', className)}\n        {...props}\n      >\n        <div className=\"flex items-baseline justify-between gap-2 text-sm leading-none\">\n          <MeterPrimitive.Label className=\"truncate text-muted-foreground\">\n            {label}\n          </MeterPrimitive.Label>\n          <span className=\"shrink-0 tabular-nums\">\n            <span className=\"font-semibold text-foreground\">\n              {valueFormatter(value)}\n            </span>\n            <span className=\"text-muted-foreground\"> · {pct}%</span>\n          </span>\n        </div>\n        <MeterPrimitive.Track className=\"h-2 w-full overflow-hidden rounded-full bg-input\">\n          {/* Base UI sizes the indicator from value/max; we only theme it. */}\n          <MeterPrimitive.Indicator\n            className=\"rounded-full\"\n            style={{ backgroundColor: color }}\n          />\n        </MeterPrimitive.Track>\n      </MeterPrimitive.Root>\n    );\n\n    if (!showTooltip) {\n      return React.cloneElement(root, { ref });\n    }\n\n    return (\n      <Tooltip defaultOpen={defaultOpen}>\n        <TooltipTrigger\n          // Base UI's Trigger ref is typed to its default <button>; the trigger\n          // is the meter root (a div), so the runtime ref is that div.\n          ref={ref as React.Ref<HTMLButtonElement>}\n          render={root}\n        />\n        {/* Match the chart tooltip look (light card: border + surface + shadow),\n            not the default dark bubble — this is a data-viz widget. The consumer\n            can replace the inner content via `tooltip`. */}\n        <TooltipContent\n          className={cn(\n            'border border-border bg-background text-foreground shadow-md',\n            !tooltip && 'flex items-center gap-2'\n          )}\n        >\n          {tooltip ?? (\n            <>\n              <span\n                className=\"size-2.5 shrink-0 rounded-full\"\n                style={{ backgroundColor: color }}\n              />\n              <span className=\"font-semibold\">{label}</span>\n              <span className=\"text-muted-foreground\">\n                {valueFormatter(value)} of {valueFormatter(max)} · {pct}%\n              </span>\n            </>\n          )}\n        </TooltipContent>\n      </Tooltip>\n    );\n  }\n);\nMeter.displayName = 'Meter';\n\nexport { Meter };\n"],"names":["defaultFormat","value","Meter","React","className","label","max","color","valueFormatter","showTooltip","tooltip","defaultOpen","props","ref","pct","safeMax","root","jsxs","MeterPrimitive","cn","jsx","Tooltip","TooltipTrigger","TooltipContent","Fragment"],"mappings":";;;;;AAiBA,MAAMA,IAAgB,CAACC,MAAkBA,EAAM,eAAA,GA4BzCC,IAAQC,EAAM;AAAA,EAClB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAJ;AAAA,IACA,KAAAK,IAAM;AAAA,IACN,OAAAC;AAAA,IACA,gBAAAC,IAAiBR;AAAA,IACjB,aAAAS,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAMR,IAAM,IAAI,KAAK,MAAOL,IAAQK,IAAO,GAAG,IAAI,GAIlDS,IAAUT,IAAM,IAAIA,IAAM,GAE1BU,IACJ,gBAAAC;AAAA,MAACC,EAAe;AAAA,MAAf;AAAA,QACC,OAAAjB;AAAA,QACA,KAAKc;AAAA,QAIL,iBAAeT;AAAA,QACf,kBAAgB,GAAGE,EAAeP,CAAK,CAAC,OAAOO,EAAeF,CAAG,CAAC,KAAKQ,CAAG;AAAA,QAI1E,UAAUL,IAAc,IAAI;AAAA,QAC5B,WAAWU,EAAG,gCAAgCf,CAAS;AAAA,QACtD,GAAGQ;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,kEACb,UAAA;AAAA,YAAA,gBAAAG,EAACF,EAAe,OAAf,EAAqB,WAAU,kCAC7B,UAAAb,GACH;AAAA,YACA,gBAAAY,EAAC,QAAA,EAAK,WAAU,yBACd,UAAA;AAAA,cAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,iCACb,UAAAZ,EAAeP,CAAK,GACvB;AAAA,cACA,gBAAAgB,EAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA;AAAA,gBAAA;AAAA,gBAAIH;AAAA,gBAAI;AAAA,cAAA,EAAA,CAAC;AAAA,YAAA,EAAA,CACnD;AAAA,UAAA,GACF;AAAA,UACA,gBAAAM,EAACF,EAAe,OAAf,EAAqB,WAAU,oDAE9B,UAAA,gBAAAE;AAAA,YAACF,EAAe;AAAA,YAAf;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,iBAAiBX,EAAA;AAAA,YAAM;AAAA,UAAA,EAClC,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIJ,WAAKE,IAKH,gBAAAQ,EAACI,KAAQ,aAAAV,GACP,UAAA;AAAA,MAAA,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UAGC,KAAAT;AAAA,UACA,QAAQG;AAAA,QAAA;AAAA,MAAA;AAAA,MAKV,gBAAAI;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,WAAWJ;AAAA,YACT;AAAA,YACA,CAACT,KAAW;AAAA,UAAA;AAAA,UAGb,eACC,gBAAAO,EAAAO,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,iBAAiBb,EAAA;AAAA,cAAM;AAAA,YAAA;AAAA,YAElC,gBAAAa,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAf,GAAM;AAAA,YACvC,gBAAAY,EAAC,QAAA,EAAK,WAAU,yBACb,UAAA;AAAA,cAAAT,EAAeP,CAAK;AAAA,cAAE;AAAA,cAAKO,EAAeF,CAAG;AAAA,cAAE;AAAA,cAAIQ;AAAA,cAAI;AAAA,YAAA,EAAA,CAC1D;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ,GACF,IAjCOX,EAAM,aAAaa,GAAM,EAAE,KAAAH,GAAK;AAAA,EAmC3C;AACF;AACAX,EAAM,cAAc;"}
+{"version":3,"file":"meter.js","names":[],"sources":["../../../../src/components/ui/meter/meter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Meter as MeterPrimitive } from '@base-ui/react/meter';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A meter: a labelled bar showing a scalar value within a known range (a\n// fractional value / share), as opposed to `Progress` which tracks a task over\n// time — hence Base UI's Meter primitive (`role=\"meter\"`, mirroring the HTML\n// `<meter>` element). One row — label + `value · %` over a proportional track\n// bar — designed to be stacked into a ranked breakdown (a \"bar list\"). No new\n// tokens: the track reuses the shared `bg-input`, and the fill color is\n// caller-supplied per row (an existing `--ui-*` token); there is no chart\n// palette tier yet.\n\nconst defaultFormat = (value: number) => value.toLocaleString();\n\nexport interface MeterProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof MeterPrimitive.Root>,\n    'value' | 'color'\n  > {\n  /** Row label shown on the left. */\n  label: string;\n  /** The value this meter represents. */\n  value: number;\n  /** Upper bound of the range — the whole the value is a share of. */\n  max?: number;\n  /** Fill color for the bar — an existing semantic `--ui-*` token (or any CSS color). */\n  color: string;\n  /** Format the numeric value (label + tooltip). Defaults to `toLocaleString()`. */\n  valueFormatter?: (value: number) => string;\n  /** Show the hover tooltip (`label · value of max · %`). */\n  showTooltip?: boolean;\n  /**\n   * Custom tooltip content — replaces the default (dot + label + `value of max\n   * · %`) inside the same chart-style card. Ignored when `showTooltip` is false.\n   */\n  tooltip?: React.ReactNode;\n  /** Render with the tooltip initially open (Base UI `defaultOpen`). */\n  defaultOpen?: boolean;\n}\n\nconst Meter = React.forwardRef<HTMLDivElement, MeterProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      max = 100,\n      color,\n      valueFormatter = defaultFormat,\n      showTooltip = true,\n      tooltip,\n      defaultOpen,\n      ...props\n    },\n    ref\n  ) => {\n    const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n    // Base UI derives the indicator width from value/max; a non-positive max\n    // would divide by zero and leave the fill unspecified, so floor it at 1\n    // (value is 0 for a degenerate row → a 0% fill that matches `pct`).\n    const safeMax = max > 0 ? max : 1;\n\n    const root = (\n      <MeterPrimitive.Root\n        value={value}\n        max={safeMax}\n        // Base UI derives aria-valuemax from the (clamped) max prop; override it\n        // back to the real max so the numeric ARIA triad agrees with the\n        // aria-valuetext / visible text on a degenerate max<=0 row.\n        aria-valuemax={max}\n        aria-valuetext={`${valueFormatter(value)} of ${valueFormatter(max)} (${pct}%)`}\n        // When wrapped in a Tooltip the meter div is the trigger; make it\n        // focusable so keyboard users can open the tooltip (hover-only\n        // otherwise). Without a tooltip there's nothing to reveal on focus.\n        tabIndex={showTooltip ? 0 : undefined}\n        className={cn('flex w-full flex-col gap-1.5', className)}\n        {...props}\n      >\n        <div className=\"flex items-baseline justify-between gap-2 text-sm leading-none\">\n          <MeterPrimitive.Label className=\"truncate text-muted-foreground\">\n            {label}\n          </MeterPrimitive.Label>\n          <span className=\"shrink-0 tabular-nums\">\n            <span className=\"font-semibold text-foreground\">\n              {valueFormatter(value)}\n            </span>\n            <span className=\"text-muted-foreground\"> · {pct}%</span>\n          </span>\n        </div>\n        <MeterPrimitive.Track className=\"h-2 w-full overflow-hidden rounded-full bg-input\">\n          {/* Base UI sizes the indicator from value/max; we only theme it. */}\n          <MeterPrimitive.Indicator\n            className=\"rounded-full\"\n            style={{ backgroundColor: color }}\n          />\n        </MeterPrimitive.Track>\n      </MeterPrimitive.Root>\n    );\n\n    if (!showTooltip) {\n      return React.cloneElement(root, { ref });\n    }\n\n    return (\n      <Tooltip defaultOpen={defaultOpen}>\n        <TooltipTrigger\n          // Base UI's Trigger ref is typed to its default <button>; the trigger\n          // is the meter root (a div), so the runtime ref is that div.\n          ref={ref as React.Ref<HTMLButtonElement>}\n          render={root}\n        />\n        {/* Match the chart tooltip look (light card: border + surface + shadow),\n            not the default dark bubble — this is a data-viz widget. The consumer\n            can replace the inner content via `tooltip`. */}\n        <TooltipContent\n          className={cn(\n            'border border-border bg-background text-foreground shadow-md',\n            !tooltip && 'flex items-center gap-2'\n          )}\n        >\n          {tooltip ?? (\n            <>\n              <span\n                className=\"size-2.5 shrink-0 rounded-full\"\n                style={{ backgroundColor: color }}\n              />\n              <span className=\"font-semibold\">{label}</span>\n              <span className=\"text-muted-foreground\">\n                {valueFormatter(value)} of {valueFormatter(max)} · {pct}%\n              </span>\n            </>\n          )}\n        </TooltipContent>\n      </Tooltip>\n    );\n  }\n);\nMeter.displayName = 'Meter';\n\nexport { Meter };\n"],"mappings":";;;;;;;AAiBA,IAAM,KAAiB,MAAkB,EAAM,eAAe,GA4BxD,IAAQ,EAAM,YAEhB,EACE,cACA,UACA,UACA,SAAM,KACN,UACA,oBAAiB,GACjB,iBAAc,IACd,YACA,gBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAM,IAAM,IAAI,KAAK,MAAO,IAAQ,IAAO,GAAG,IAAI,GAIlD,IAAU,IAAM,IAAI,IAAM,GAE1B,IACJ,kBAAC,EAAe,MAAhB;EACS;EACP,KAAK;EAIL,iBAAe;EACf,kBAAgB,GAAG,EAAe,CAAK,EAAE,MAAM,EAAe,CAAG,EAAE,IAAI,EAAI;EAI3E,UAAU,IAAc,IAAI,KAAA;EAC5B,WAAW,EAAG,gCAAgC,CAAS;EACvD,GAAI;EAbN,UAAA,CAeE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,EAAe,OAAhB;IAAsB,WAAU;IAC7B,UAAA;GACmB,CAAA,GACtB,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KACb,UAAA,EAAe,CAAK;IACjB,CAAA,GACN,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MAAwC;MAAI;MAAI;KAAO;IACnD,CAAA,CAAA;GACH,CAAA,CAAA;EACL,CAAA,GAAA,kBAAC,EAAe,OAAhB;GAAsB,WAAU;GAE9B,UAAA,kBAAC,EAAe,WAAhB;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,EAAM;GACjC,CAAA;EACmB,CAAA,CACH;;CAOvB,OAJK,IAKH,kBAAC,GAAD;EAAsB;EAAtB,UAAA,CACE,kBAAC,GAAD;GAGO;GACL,QAAQ;EACT,CAAA,GAID,kBAAC,GAAD;GACE,WAAW,EACT,gEACA,CAAC,KAAW,yBACd;GAEC,UAAA,KACC,kBAAA,GAAA,EAAA,UAAA;IACE,kBAAC,QAAD;KACE,WAAU;KACV,OAAO,EAAE,iBAAiB,EAAM;IACjC,CAAA;IACD,kBAAC,QAAD;KAAM,WAAU;KAAiB,UAAA;IAAY,CAAA;IAC7C,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MACG,EAAe,CAAK;MAAE;MAAK,EAAe,CAAG;MAAE;MAAI;MAAI;KACpD;;GACN,EAAA,CAAA;EAEU,CAAA,CACT;MAjCF,EAAM,aAAa,GAAM,EAAE,OAAI,CAAC;AAmC3C,CACF;AACA,EAAM,cAAc"}