@etus/ui 0.4.0-beta.1 → 0.4.0-beta.11

package/dist/chunk-GL56KIFL.js

@@ -0,0 +1,79 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sectionVariants = cva(
+  [
+    "rounded-[var(--section-root-radius)]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-background",
+        muted: "bg-muted/30",
+        elevated: "bg-card shadow-md",
+        bordered: "border border-border"
+      },
+      size: {
+        sm: "p-[var(--section-size-sm-padding)]",
+        default: "p-[var(--section-size-default-padding)]",
+        lg: "p-[var(--section-size-lg-padding)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Section({
+  variant,
+  size,
+  title,
+  description,
+  footer,
+  className,
+  children,
+  ...props
+}) {
+  const hasHeader = title ?? description;
+  const generatedId = React.useId();
+  const titleId = title ? generatedId : void 0;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      className: cn(sectionVariants({ variant, size }), className),
+      "data-slot": "section",
+      ...props,
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs("header", { className: "mb-4 space-y-1", "data-slot": "section-header", children: [
+          title && /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "text-lg font-medium leading-none tracking-tight",
+              "data-slot": "section-title",
+              id: titleId,
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-sm text-muted-foreground",
+              "data-slot": "section-description",
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { "data-slot": "section-content", children }),
+        footer && /* @__PURE__ */ jsx("footer", { className: "mt-4 pt-4 border-t", "data-slot": "section-footer", children: footer })
+      ]
+    }
+  );
+}
+
+export { Section, sectionVariants };
+//# sourceMappingURL=chunk-GL56KIFL.js.map
+//# sourceMappingURL=chunk-GL56KIFL.js.map

package/dist/chunk-GL56KIFL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Section/Section.variants.ts","../src/components/layout/Section/Section.tsx"],"names":[],"mappings":";;;;;AAMO,IAAM,eAAA,GAAkB,GAAA;AAAA,EAC7B;AAAA,IACE;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,eAAA;AAAA,QACT,KAAA,EAAO,aAAA;AAAA,QACP,QAAA,EAAU,mBAAA;AAAA,QACV,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,oCAAA;AAAA,QACJ,OAAA,EAAS,yCAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;ACtBA,SAAS,OAAA,CAAQ;AAAA,EACf,OAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,YAAY,KAAA,IAAS,WAAA;AAC3B,EAAA,MAAM,cAAoB,KAAA,CAAA,KAAA,EAAM;AAChC,EAAA,MAAM,OAAA,GAAU,QAAQ,WAAA,GAAc,MAAA;AAEtC,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAW,GAAG,eAAA,CAAgB,EAAE,SAAS,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MAC3D,WAAA,EAAU,SAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,oBACC,IAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,gBAAA,EAAiB,aAAU,gBAAA,EAC1C,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,iDAAA;AAAA,cACV,WAAA,EAAU,eAAA;AAAA,cACV,EAAA,EAAI,OAAA;AAAA,cAEH,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED,WAAA,oBACC,GAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,+BAAA;AAAA,cACV,WAAA,EAAU,qBAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA;AACH,SAAA,EAEJ,CAAA;AAAA,wBAEF,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,iBAAA,EAAmB,QAAA,EAAS,CAAA;AAAA,QAC1C,0BACC,GAAA,CAAC,QAAA,EAAA,EAAO,WAAU,oBAAA,EAAqB,WAAA,EAAU,kBAC9C,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-GL56KIFL.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Section variant styles\n * Layout component for grouping related content in semantic sections\n */\nexport const sectionVariants = cva(\n  [\n    \"rounded-[var(--section-root-radius)]\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-background\",\n        muted: \"bg-muted/30\",\n        elevated: \"bg-card shadow-md\",\n        bordered: \"border border-border\",\n      },\n      size: {\n        sm: \"p-[var(--section-size-sm-padding)]\",\n        default: \"p-[var(--section-size-default-padding)]\",\n        lg: \"p-[var(--section-size-lg-padding)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport type SectionVariantProps = VariantProps<typeof sectionVariants>\n","import type { SectionProps } from \"./Section.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { sectionVariants } from \"./Section.variants\"\n\nfunction Section({\n  variant,\n  size,\n  title,\n  description,\n  footer,\n  className,\n  children,\n  ...props\n}: SectionProps) {\n  const hasHeader = title ?? description\n  const generatedId = React.useId()\n  const titleId = title ? generatedId : undefined\n\n  return (\n    <section\n      aria-labelledby={titleId}\n      className={cn(sectionVariants({ variant, size }), className)}\n      data-slot=\"section\"\n      {...props}\n    >\n      {hasHeader && (\n        <header className=\"mb-4 space-y-1\" data-slot=\"section-header\">\n          {title && (\n            <h2\n              className=\"text-lg font-medium leading-none tracking-tight\"\n              data-slot=\"section-title\"\n              id={titleId}\n            >\n              {title}\n            </h2>\n          )}\n          {description && (\n            <p\n              className=\"text-sm text-muted-foreground\"\n              data-slot=\"section-description\"\n            >\n              {description}\n            </p>\n          )}\n        </header>\n      )}\n      <div data-slot=\"section-content\">{children}</div>\n      {footer && (\n        <footer className=\"mt-4 pt-4 border-t\" data-slot=\"section-footer\">\n          {footer}\n        </footer>\n      )}\n    </section>\n  )\n}\n\nexport { Section }\n"]}

package/dist/chunk-GPW57XOW.js

@@ -0,0 +1,80 @@
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-7ZJ32KRQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var trackerContainerVariants = cva(
+  "flex w-full items-center",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var trackerBlockVariants = cva(
+  "h-full flex-1 rounded-xs transition-colors first:rounded-l-md last:rounded-r-md",
+  {
+    variants: {
+      clickable: {
+        true: "cursor-pointer hover:opacity-80",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      clickable: false
+    }
+  }
+);
+function Tracker({
+  className,
+  data,
+  defaultColor = "var(--muted)",
+  gap = 1,
+  onClick,
+  ...props
+}) {
+  const isClickable = Boolean(onClick);
+  const renderBlock = (block, index) => {
+    const blockElement = /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": typeof block.tooltip === "string" ? block.tooltip : void 0,
+        className: cn(trackerBlockVariants({ clickable: isClickable })),
+        role: isClickable ? "button" : void 0,
+        style: { backgroundColor: block.color ?? defaultColor },
+        tabIndex: isClickable ? 0 : void 0,
+        onClick: isClickable ? () => onClick?.(block, index) : void 0,
+        onKeyDown: isClickable ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.(block, index);
+          }
+        } : void 0
+      },
+      block.key ?? index
+    );
+    if (!block.tooltip) return blockElement;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: blockElement }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: block.tooltip })
+    ] }, block.key ?? index);
+  };
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        gap: `${String(gap)}px`,
+        height: "24px"
+      },
+      className: cn(trackerContainerVariants(), className),
+      "data-slot": "tracker",
+      ...props,
+      children: data.map((block, index) => renderBlock(block, index))
+    }
+  ) });
+}
+Tracker.displayName = "Tracker";
+
+export { Tracker };
+//# sourceMappingURL=chunk-GPW57XOW.js.map
+//# sourceMappingURL=chunk-GPW57XOW.js.map

package/dist/chunk-GPW57XOW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Tracker/Tracker.variants.ts","../src/components/data-display/Tracker/Tracker.tsx"],"names":[],"mappings":";;;;;;AAEO,IAAM,wBAAA,GAA2B,GAAA;AAAA,EACtC,0BAAA;AAAA,EACA;AAAA,IACE,UAAU,EAAC;AAAA,IACX,iBAAiB;AAAC;AAEtB,CAAA;AAEO,IAAM,oBAAA,GAAuB,GAAA;AAAA,EAClC,iFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,SAAA,EAAW;AAAA,QACT,IAAA,EAAM,iCAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,SAAA,EAAW;AAAA;AACb;AAEJ,CAAA;ACmBO,SAAS,OAAA,CAAQ;AAAA,EACtB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA,GAAe,cAAA;AAAA,EACf,GAAA,GAAM,CAAA;AAAA,EACN,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,WAAA,GAAc,QAAQ,OAAO,CAAA;AAEnC,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,EAAyB,KAAA,KAAkB;AAC9D,IAAA,MAAM,YAAA,mBACJ,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEC,cAAY,OAAO,KAAA,CAAM,OAAA,KAAY,QAAA,GAAW,MAAM,OAAA,GAAU,MAAA;AAAA,QAChE,WAAW,EAAA,CAAG,oBAAA,CAAqB,EAAE,SAAA,EAAW,WAAA,EAAa,CAAC,CAAA;AAAA,QAC9D,IAAA,EAAM,cAAc,QAAA,GAAW,MAAA;AAAA,QAE/B,KAAA,EAAO,EAAE,eAAA,EAAiB,KAAA,CAAM,SAAS,YAAA,EAAa;AAAA,QACtD,QAAA,EAAU,cAAc,CAAA,GAAI,MAAA;AAAA,QAC5B,SAAS,WAAA,GAAc,MAAM,OAAA,GAAU,KAAA,EAAO,KAAK,CAAA,GAAI,MAAA;AAAA,QACvD,SAAA,EACE,WAAA,GACI,CAAC,CAAA,KAAM;AACL,UAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,CAAA,CAAE,QAAQ,GAAA,EAAK;AACtC,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,OAAA,GAAU,OAAO,KAAK,CAAA;AAAA,UACxB;AAAA,QACF,CAAA,GACA;AAAA,OAAA;AAAA,MAhBD,MAAM,GAAA,IAAO;AAAA,KAkBpB;AAGF,IAAA,IAAI,CAAC,KAAA,CAAM,OAAA,EAAS,OAAO,YAAA;AAE3B,IAAA,4BACG,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACpB,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,sBACA,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,KAAA,CAAM,OAAA,EAAQ;AAAA,KAAA,EAAA,EAJnB,KAAA,CAAM,OAAO,KAK3B,CAAA;AAAA,EAEJ,CAAA;AAEA,EAAA,2BACG,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,GAAA,EAAK,CAAA,EAAG,MAAA,CAAO,GAAG,CAAC,CAAA,EAAA,CAAA;AAAA,QACnB,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,wBAAA,EAAyB,EAAG,SAAS,CAAA;AAAA,MACnD,WAAA,EAAU,SAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,IAAA,CAAK,IAAI,CAAC,KAAA,EAAO,UAAU,WAAA,CAAY,KAAA,EAAO,KAAK,CAAC;AAAA;AAAA,GACvD,EACF,CAAA;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-GPW57XOW.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const trackerContainerVariants = cva(\n  \"flex w-full items-center\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const trackerBlockVariants = cva(\n  \"h-full flex-1 rounded-xs transition-colors first:rounded-l-md last:rounded-r-md\",\n  {\n    variants: {\n      clickable: {\n        true: \"cursor-pointer hover:opacity-80\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      clickable: false,\n    },\n  }\n)\n","\"use client\"\n\nimport type { TrackerBlockData, TrackerProps } from \"./Tracker.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../../feedback/Tooltip\"\nimport {\n  trackerBlockVariants,\n  trackerContainerVariants,\n} from \"./Tracker.variants\"\n\n/**\n * Tracker - Status visualization component\n *\n * Displays a series of colored blocks to represent status over time.\n * Commonly used for uptime monitoring, availability indicators,\n * or any time-series status data.\n *\n * @example\n * ```tsx\n * const data = [\n *   { color: \"var(--success)\", tooltip: \"Jan 1 - Operational\" },\n *   { color: \"var(--success)\", tooltip: \"Jan 2 - Operational\" },\n *   { color: \"var(--warning)\", tooltip: \"Jan 3 - Degraded\" },\n *   { color: \"var(--success)\", tooltip: \"Jan 4 - Operational\" },\n *   { color: \"var(--destructive)\", tooltip: \"Jan 5 - Outage\" },\n * ]\n *\n * <Tracker data={data} />\n * ```\n *\n * @example\n * ```tsx\n * // With click handler\n * <Tracker\n *   data={data}\n *   onClick={(block, index) => console.log(`Clicked block ${index}`)}\n * />\n * ```\n */\nexport function Tracker({\n  className,\n  data,\n  defaultColor = \"var(--muted)\",\n  gap = 1,\n  onClick,\n  ...props\n}: TrackerProps) {\n  const isClickable = Boolean(onClick)\n\n  const renderBlock = (block: TrackerBlockData, index: number) => {\n    const blockElement = (\n      <div\n        key={block.key ?? index}\n        aria-label={typeof block.tooltip === \"string\" ? block.tooltip : undefined}\n        className={cn(trackerBlockVariants({ clickable: isClickable }))}\n        role={isClickable ? \"button\" : undefined}\n        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Defensive: color is optional in TrackerBlock\n        style={{ backgroundColor: block.color ?? defaultColor }}\n        tabIndex={isClickable ? 0 : undefined}\n        onClick={isClickable ? () => onClick?.(block, index) : undefined}\n        onKeyDown={\n          isClickable\n            ? (e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault()\n                  onClick?.(block, index)\n                }\n              }\n            : undefined\n        }\n      />\n    )\n\n    if (!block.tooltip) return blockElement\n\n    return (\n      <Tooltip key={block.key ?? index}>\n        <TooltipTrigger asChild>\n          {blockElement}\n        </TooltipTrigger>\n        <TooltipContent>{block.tooltip}</TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  return (\n    <TooltipProvider>\n      <div\n        style={{\n          gap: `${String(gap)}px`,\n          height: \"24px\",\n        }}\n        className={cn(trackerContainerVariants(), className)}\n        data-slot=\"tracker\"\n        {...props}\n      >\n        {data.map((block, index) => renderBlock(block, index))}\n      </div>\n    </TooltipProvider>\n  )\n}\n\nTracker.displayName = \"Tracker\"\n"]}

package/dist/chunk-H4ANCFZG.js

@@ -0,0 +1,233 @@
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-7ZJ32KRQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var categoryBarContainerVariants = cva(
+  "w-full",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var categoryBarVariants = cva(
+  "relative flex w-full overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        xs: "h-1",
+        sm: "h-2",
+        md: "h-3",
+        lg: "h-4"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var categoryBarSegmentVariants = cva(
+  "transition-all duration-300",
+  {
+    variants: {
+      clickable: {
+        true: "cursor-pointer hover:opacity-80",
+        false: ""
+      },
+      animated: {
+        true: "",
+        false: "!transition-none"
+      }
+    },
+    defaultVariants: {
+      clickable: false,
+      animated: true
+    }
+  }
+);
+var categoryBarLabelsVariants = cva(
+  "mt-2 flex justify-between gap-2",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var categoryBarLabelItemVariants = cva(
+  "flex items-center gap-1.5 text-sm",
+  {
+    variants: {
+      clickable: {
+        true: "cursor-pointer hover:opacity-80",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      clickable: false
+    }
+  }
+);
+var categoryBarLabelDotVariants = cva(
+  "h-2 w-2 shrink-0 rounded-full",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var categoryBarMarkerVariants = cva(
+  "absolute top-0 h-full w-0.5 bg-foreground",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var DEFAULT_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)"
+];
+function defaultValueFormatter(value) {
+  return value.toLocaleString();
+}
+function CategoryBar({
+  className,
+  colors = DEFAULT_COLORS,
+  data,
+  markerValue,
+  onClick,
+  showAnimation = true,
+  showLabels = true,
+  showTooltip = true,
+  size = "md",
+  valueFormatter = defaultValueFormatter,
+  ...props
+}) {
+  const total = React.useMemo(
+    () => data.reduce((sum, item) => sum + item.value, 0),
+    [data]
+  );
+  const segments = React.useMemo(() => {
+    let cumulativePercent = 0;
+    return data.map((item, index) => {
+      const percent = total > 0 ? item.value / total * 100 : 0;
+      const segment = {
+        ...item,
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Defensive: color is optional in CategoryBarItem
+        color: item.color ?? colors[index % colors.length],
+        percent,
+        startPercent: cumulativePercent
+      };
+      cumulativePercent += percent;
+      return segment;
+    });
+  }, [data, total, colors]);
+  const isClickable = Boolean(onClick);
+  const markerPosition = React.useMemo(() => {
+    if (markerValue === void 0 || total === 0) return;
+    return markerValue / total * 100;
+  }, [markerValue, total]);
+  const renderSegment = (segment, index) => {
+    const segmentElement = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          categoryBarSegmentVariants({
+            animated: showAnimation,
+            clickable: isClickable
+          })
+        ),
+        style: {
+          backgroundColor: segment.color,
+          width: `${String(segment.percent)}%`
+        },
+        "aria-label": `${segment.name}: ${valueFormatter(segment.value)}`,
+        role: isClickable ? "button" : void 0,
+        tabIndex: isClickable ? 0 : void 0,
+        onClick: isClickable ? () => onClick?.(segment, index) : void 0,
+        onKeyDown: isClickable ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.(segment, index);
+          }
+        } : void 0
+      },
+      segment.key
+    );
+    if (!showTooltip) return segmentElement;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: segmentElement }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-2 w-2 rounded-full",
+              style: { backgroundColor: segment.color }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: segment.name })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
+          valueFormatter(segment.value),
+          " (",
+          segment.percent.toFixed(1),
+          "%)"
+        ] })
+      ] }) })
+    ] }, segment.key);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(categoryBarContainerVariants(), className),
+      "data-slot": "category-bar",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: categoryBarVariants({ size }), children: [
+          segments.map((segment, index) => renderSegment(segment, index)),
+          markerPosition !== void 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: categoryBarMarkerVariants(),
+              style: { left: `${String(markerPosition)}%` }
+            }
+          )
+        ] }) }),
+        showLabels && /* @__PURE__ */ jsx("div", { className: categoryBarLabelsVariants(), children: segments.map((segment, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(categoryBarLabelItemVariants({ clickable: isClickable })),
+            role: isClickable ? "button" : void 0,
+            tabIndex: isClickable ? 0 : void 0,
+            onClick: isClickable ? () => onClick?.(segment, index) : void 0,
+            onKeyDown: isClickable ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick?.(segment, index);
+              }
+            } : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: categoryBarLabelDotVariants(),
+                  style: { backgroundColor: segment.color }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: segment.name }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: valueFormatter(segment.value) })
+            ]
+          },
+          segment.key
+        )) })
+      ]
+    }
+  );
+}
+CategoryBar.displayName = "CategoryBar";
+
+export { CategoryBar };
+//# sourceMappingURL=chunk-H4ANCFZG.js.map
+//# sourceMappingURL=chunk-H4ANCFZG.js.map

package/dist/chunk-H4ANCFZG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/CategoryBar/CategoryBar.variants.ts","../src/components/data-display/CategoryBar/CategoryBar.tsx"],"names":[],"mappings":"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","file":"chunk-H4ANCFZG.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const categoryBarContainerVariants = cva(\n  \"w-full\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const categoryBarVariants = cva(\n  \"relative flex w-full overflow-hidden rounded-full\",\n  {\n    variants: {\n      size: {\n        xs: \"h-1\",\n        sm: \"h-2\",\n        md: \"h-3\",\n        lg: \"h-4\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const categoryBarSegmentVariants = cva(\n  \"transition-all duration-300\",\n  {\n    variants: {\n      clickable: {\n        true: \"cursor-pointer hover:opacity-80\",\n        false: \"\",\n      },\n      animated: {\n        true: \"\",\n        false: \"!transition-none\",\n      },\n    },\n    defaultVariants: {\n      clickable: false,\n      animated: true,\n    },\n  }\n)\n\nexport const categoryBarLabelsVariants = cva(\n  \"mt-2 flex justify-between gap-2\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const categoryBarLabelItemVariants = cva(\n  \"flex items-center gap-1.5 text-sm\",\n  {\n    variants: {\n      clickable: {\n        true: \"cursor-pointer hover:opacity-80\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      clickable: false,\n    },\n  }\n)\n\nexport const categoryBarLabelDotVariants = cva(\n  \"h-2 w-2 shrink-0 rounded-full\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const categoryBarMarkerVariants = cva(\n  \"absolute top-0 h-full w-0.5 bg-foreground\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n","\"use client\"\n\nimport type { CategoryBarDataItem, CategoryBarProps } from \"./CategoryBar.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../../feedback/Tooltip\"\nimport {\n  categoryBarContainerVariants,\n  categoryBarLabelDotVariants,\n  categoryBarLabelItemVariants,\n  categoryBarLabelsVariants,\n  categoryBarMarkerVariants,\n  categoryBarSegmentVariants,\n  categoryBarVariants,\n} from \"./CategoryBar.variants\"\n\n/**\n * Default colors for categories\n */\nconst DEFAULT_COLORS = [\n  \"var(--chart-1)\",\n  \"var(--chart-2)\",\n  \"var(--chart-3)\",\n  \"var(--chart-4)\",\n  \"var(--chart-5)\",\n]\n\n/**\n * Default value formatter\n */\nfunction defaultValueFormatter(value: number): string {\n  return value.toLocaleString()\n}\n\n/**\n * CategoryBar - Segmented bar showing proportional categories\n *\n * Displays categories as horizontal segments proportional to their values.\n * Similar to a pie chart but in a horizontal bar format. Ideal for showing\n * composition or breakdown of a total.\n *\n * @example\n * ```tsx\n * const data = [\n *   { key: \"completed\", name: \"Completed\", value: 45, color: \"var(--chart-1)\" },\n *   { key: \"in-progress\", name: \"In Progress\", value: 30, color: \"var(--chart-2)\" },\n *   { key: \"pending\", name: \"Pending\", value: 25, color: \"var(--chart-3)\" },\n * ]\n *\n * <CategoryBar data={data} />\n * ```\n *\n * @example\n * ```tsx\n * // With marker and custom formatter\n * <CategoryBar\n *   data={data}\n *   markerValue={75}\n *   valueFormatter={(v) => `${v}%`}\n *   size=\"lg\"\n * />\n * ```\n */\nexport function CategoryBar({\n  className,\n  colors = DEFAULT_COLORS,\n  data,\n  markerValue,\n  onClick,\n  showAnimation = true,\n  showLabels = true,\n  showTooltip = true,\n  size = \"md\",\n  valueFormatter = defaultValueFormatter,\n  ...props\n}: CategoryBarProps) {\n  // Calculate total and percentages\n  const total = React.useMemo(\n    () => data.reduce((sum, item) => sum + item.value, 0),\n    [data]\n  )\n\n  const segments = React.useMemo(() => {\n    let cumulativePercent = 0\n    return data.map((item, index) => {\n      const percent = total > 0 ? (item.value / total) * 100 : 0\n      const segment = {\n        ...item,\n        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Defensive: color is optional in CategoryBarItem\n        color: item.color ?? colors[index % colors.length],\n        percent,\n        startPercent: cumulativePercent,\n      }\n      // eslint-disable-next-line react-hooks/immutability -- Safe: building cumulative value within useMemo callback\n      cumulativePercent += percent\n      return segment\n    })\n  }, [data, total, colors])\n\n  const isClickable = Boolean(onClick)\n\n  // Calculate marker position\n  const markerPosition = React.useMemo(() => {\n    if (markerValue === undefined || total === 0) return\n    return (markerValue / total) * 100\n  }, [markerValue, total])\n\n  const renderSegment = (\n    segment: CategoryBarDataItem & { percent: number; startPercent: number },\n    index: number\n  ) => {\n    const segmentElement = (\n      <div\n        key={segment.key}\n        className={cn(\n          categoryBarSegmentVariants({\n            animated: showAnimation,\n            clickable: isClickable,\n          })\n        )}\n        style={{\n          backgroundColor: segment.color,\n          width: `${String(segment.percent)}%`,\n        }}\n        aria-label={`${segment.name}: ${valueFormatter(segment.value)}`}\n        role={isClickable ? \"button\" : undefined}\n        tabIndex={isClickable ? 0 : undefined}\n        onClick={isClickable ? () => onClick?.(segment, index) : undefined}\n        onKeyDown={\n          isClickable\n            ? (e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault()\n                  onClick?.(segment, index)\n                }\n              }\n            : undefined\n        }\n      />\n    )\n\n    if (!showTooltip) return segmentElement\n\n    return (\n      <Tooltip key={segment.key}>\n        <TooltipTrigger asChild>\n          {segmentElement}\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <div className=\"flex items-center gap-2\">\n              <div\n                className=\"h-2 w-2 rounded-full\"\n                style={{ backgroundColor: segment.color }}\n              />\n              <span className=\"font-medium\">{segment.name}</span>\n            </div>\n            <div className=\"text-muted-foreground\">\n              {valueFormatter(segment.value)} ({segment.percent.toFixed(1)}%)\n            </div>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  return (\n    <div\n      className={cn(categoryBarContainerVariants(), className)}\n      data-slot=\"category-bar\"\n      {...props}\n    >\n      <TooltipProvider>\n        <div className={categoryBarVariants({ size })}>\n          {segments.map((segment, index) => renderSegment(segment, index))}\n\n          {markerPosition !== undefined && (\n            <div\n              className={categoryBarMarkerVariants()}\n              style={{ left: `${String(markerPosition)}%` }}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n\n      {showLabels && (\n        <div className={categoryBarLabelsVariants()}>\n          {segments.map((segment, index) => (\n            <div\n              key={segment.key}\n              className={cn(categoryBarLabelItemVariants({ clickable: isClickable }))}\n              role={isClickable ? \"button\" : undefined}\n              tabIndex={isClickable ? 0 : undefined}\n              onClick={isClickable ? () => onClick?.(segment, index) : undefined}\n              onKeyDown={\n                isClickable\n                  ? (e) => {\n                      if (e.key === \"Enter\" || e.key === \" \") {\n                        e.preventDefault()\n                        onClick?.(segment, index)\n                      }\n                    }\n                  : undefined\n              }\n            >\n              <div\n                className={categoryBarLabelDotVariants()}\n                style={{ backgroundColor: segment.color }}\n              />\n              <span className=\"text-muted-foreground\">{segment.name}</span>\n              <span className=\"font-medium\">{valueFormatter(segment.value)}</span>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nCategoryBar.displayName = \"CategoryBar\"\n"]}

package/dist/chunk-H5N3VPBG.js

@@ -0,0 +1,153 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var toolbarVariants = cva(
+  [
+    // Base styles
+    "flex items-center gap-[var(--toolbar-root-gap)] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "rounded-[var(--toolbar-root-radius)] border border-[color:var(--toolbar-root-border)] bg-[color:var(--toolbar-root-background)] p-[var(--toolbar-root-padding)]",
+        floating: "rounded-[var(--toolbar-root-radius)] border border-[color:var(--toolbar-root-border)] bg-popover p-[var(--toolbar-root-padding)] shadow-lg",
+        sticky: "border-b border-[color:var(--toolbar-root-border)] bg-[color:var(--toolbar-root-background)] px-[var(--toolbar-root-padding-x)] py-[var(--toolbar-root-padding-y)]",
+        minimal: "gap-1"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var toolbarButtonVariants = cva([
+  // Base styles
+  "inline-flex items-center justify-center rounded-[var(--toolbar-button-radius)] h-[var(--toolbar-button-height)] px-[var(--toolbar-button-padding-x)]",
+  // Colors
+  "text-foreground",
+  "hover:bg-accent hover:text-accent-foreground",
+  // Focus styles
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  // Disabled
+  "disabled:pointer-events-none disabled:opacity-50",
+  // Transition
+  "transition-colors",
+  // SVG styles
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+]);
+var toolbarGroupVariants = cva([
+  "flex items-center gap-0.5"
+]);
+var toolbarToggleGroupVariants = cva([
+  "flex items-center gap-0.5"
+]);
+var toolbarToggleItemVariants = cva([
+  // Base styles
+  "inline-flex items-center justify-center rounded-sm p-2",
+  // Colors
+  "text-foreground",
+  "hover:bg-accent hover:text-accent-foreground",
+  // Active state
+  "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  // Focus styles
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  // Disabled
+  "disabled:pointer-events-none disabled:opacity-50",
+  // Transition
+  "transition-colors",
+  // SVG styles
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+]);
+var toolbarSeparatorVariants = cva([
+  "mx-2 h-6 w-px self-center bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=horizontal]:mx-0 data-[orientation=horizontal]:my-2"
+]);
+var toolbarLinkVariants = cva([
+  // Base styles
+  "inline-flex items-center justify-center rounded-sm p-2",
+  // Colors
+  "text-foreground",
+  "hover:bg-accent hover:text-accent-foreground",
+  // Focus styles
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  // Transition
+  "transition-colors",
+  // SVG styles
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+]);
+function Toolbar({ className, variant = "default", ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Root,
+    {
+      className: cn(toolbarVariants({ variant }), className),
+      "data-slot": "toolbar",
+      ...props
+    }
+  );
+}
+function ToolbarButton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Button,
+    {
+      className: cn(toolbarButtonVariants(), className),
+      "data-slot": "toolbar-button",
+      ...props
+    }
+  );
+}
+function ToolbarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(toolbarGroupVariants(), className),
+      "data-slot": "toolbar-group",
+      role: "group",
+      ...props
+    }
+  );
+}
+function ToolbarToggleGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.ToggleGroup,
+    {
+      className: cn(toolbarToggleGroupVariants(), className),
+      "data-slot": "toolbar-toggle-group",
+      ...props
+    }
+  );
+}
+function ToolbarToggleItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.ToggleItem,
+    {
+      className: cn(toolbarToggleItemVariants(), className),
+      "data-slot": "toolbar-toggle-item",
+      ...props
+    }
+  );
+}
+function ToolbarSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Separator,
+    {
+      className: cn(toolbarSeparatorVariants(), className),
+      "data-slot": "toolbar-separator",
+      ...props
+    }
+  );
+}
+function ToolbarLink({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Link,
+    {
+      className: cn(toolbarLinkVariants(), className),
+      "data-slot": "toolbar-link",
+      ...props
+    }
+  );
+}
+
+export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarLink, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, toolbarButtonVariants, toolbarGroupVariants, toolbarLinkVariants, toolbarSeparatorVariants, toolbarToggleGroupVariants, toolbarToggleItemVariants, toolbarVariants };
+//# sourceMappingURL=chunk-H5N3VPBG.js.map
+//# sourceMappingURL=chunk-H5N3VPBG.js.map

package/dist/chunk-H5N3VPBG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Toolbar/Toolbar.variants.ts","../src/components/navigation/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","file":"chunk-H5N3VPBG.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Toolbar root variant styles\n */\nexport const toolbarVariants = cva(\n  [\n    // Base styles\n    \"flex items-center gap-[var(--toolbar-root-gap)] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"rounded-[var(--toolbar-root-radius)] border border-[color:var(--toolbar-root-border)] bg-[color:var(--toolbar-root-background)] p-[var(--toolbar-root-padding)]\",\n        floating: \"rounded-[var(--toolbar-root-radius)] border border-[color:var(--toolbar-root-border)] bg-popover p-[var(--toolbar-root-padding)] shadow-lg\",\n        sticky: \"border-b border-[color:var(--toolbar-root-border)] bg-[color:var(--toolbar-root-background)] px-[var(--toolbar-root-padding-x)] py-[var(--toolbar-root-padding-y)]\",\n        minimal: \"gap-1\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * Toolbar button variant styles\n */\nexport const toolbarButtonVariants = cva([\n  // Base styles\n  \"inline-flex items-center justify-center rounded-[var(--toolbar-button-radius)] h-[var(--toolbar-button-height)] px-[var(--toolbar-button-padding-x)]\",\n  // Colors\n  \"text-foreground\",\n  \"hover:bg-accent hover:text-accent-foreground\",\n  // Focus styles\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n  // Disabled\n  \"disabled:pointer-events-none disabled:opacity-50\",\n  // Transition\n  \"transition-colors\",\n  // SVG styles\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n])\n\n/**\n * Toolbar group variant styles\n *\n * Generic grouping wrapper that keeps related controls visually tight,\n * mirroring the spacing of the toggle group without its toggle semantics.\n */\nexport const toolbarGroupVariants = cva([\n  \"flex items-center gap-0.5\",\n])\n\n/**\n * Toolbar toggle group variant styles\n */\nexport const toolbarToggleGroupVariants = cva([\n  \"flex items-center gap-0.5\",\n])\n\n/**\n * Toolbar toggle item variant styles\n */\nexport const toolbarToggleItemVariants = cva([\n  // Base styles\n  \"inline-flex items-center justify-center rounded-sm p-2\",\n  // Colors\n  \"text-foreground\",\n  \"hover:bg-accent hover:text-accent-foreground\",\n  // Active state\n  \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  // Focus styles\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n  // Disabled\n  \"disabled:pointer-events-none disabled:opacity-50\",\n  // Transition\n  \"transition-colors\",\n  // SVG styles\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n])\n\n/**\n * Toolbar separator variant styles\n *\n * The vertical divider is a fixed 24px (`h-6`) centered hairline (DES-1237 —\n * era `self-stretch`, que acompanhava a altura do item). The horizontal variant\n * (vertical toolbars) stays a full-width hairline.\n */\nexport const toolbarSeparatorVariants = cva([\n  \"mx-2 h-6 w-px self-center bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=horizontal]:mx-0 data-[orientation=horizontal]:my-2\",\n])\n\n/**\n * Toolbar link variant styles\n */\nexport const toolbarLinkVariants = cva([\n  // Base styles\n  \"inline-flex items-center justify-center rounded-sm p-2\",\n  // Colors\n  \"text-foreground\",\n  \"hover:bg-accent hover:text-accent-foreground\",\n  // Focus styles\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n  // Transition\n  \"transition-colors\",\n  // SVG styles\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n])\n","\"use client\"\n\nimport type {\n  ToolbarButtonProps,\n  ToolbarGroupProps,\n  ToolbarLinkProps,\n  ToolbarProps,\n  ToolbarSeparatorProps,\n  ToolbarToggleGroupProps,\n  ToolbarToggleItemProps,\n} from \"./Toolbar.types\"\n\nimport * as ToolbarPrimitive from \"@radix-ui/react-toolbar\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  toolbarButtonVariants,\n  toolbarGroupVariants,\n  toolbarLinkVariants,\n  toolbarSeparatorVariants,\n  toolbarToggleGroupVariants,\n  toolbarToggleItemVariants,\n  toolbarVariants,\n} from \"./Toolbar.variants\"\n\n/**\n * Toolbar - Root container for toolbar components.\n *\n * A horizontal bar of actions and controls for the current content.\n * Provides quick access to common functionality like text formatting,\n * zoom, alignment, and other contextual operations.\n *\n * @example\n * <Toolbar>\n *   <ToolbarToggleGroup type=\"multiple\">\n *     <ToolbarToggleItem value=\"bold\">Bold</ToolbarToggleItem>\n *     <ToolbarToggleItem value=\"italic\">Italic</ToolbarToggleItem>\n *   </ToolbarToggleGroup>\n *   <ToolbarSeparator />\n *   <ToolbarButton>Action</ToolbarButton>\n * </Toolbar>\n */\nfunction Toolbar({ className, variant = \"default\", ...props }: ToolbarProps) {\n  return (\n    <ToolbarPrimitive.Root\n      className={cn(toolbarVariants({ variant }), className)}\n      data-slot=\"toolbar\"\n      {...props}\n    />\n  )\n}\n\n/**\n * ToolbarButton - Button for toolbar actions.\n *\n * Used for non-toggle actions within the toolbar.\n */\nfunction ToolbarButton({ className, ...props }: ToolbarButtonProps) {\n  return (\n    <ToolbarPrimitive.Button\n      className={cn(toolbarButtonVariants(), className)}\n      data-slot=\"toolbar-button\"\n      {...props}\n    />\n  )\n}\n\n/**\n * ToolbarGroup - Generic grouping wrapper for related toolbar items.\n *\n * Use to visually cluster a set of buttons, links, or toggle groups as a\n * single unit. Unlike ToolbarToggleGroup it carries no selection semantics —\n * it is a plain `role=\"group\"` container for composition.\n */\nfunction ToolbarGroup({ className, ...props }: ToolbarGroupProps) {\n  return (\n    <div\n      className={cn(toolbarGroupVariants(), className)}\n      data-slot=\"toolbar-group\"\n      role=\"group\"\n      {...props}\n    />\n  )\n}\n\n/**\n * ToolbarToggleGroup - Container for toggle items.\n *\n * Groups toggle items for single or multiple selection.\n */\nfunction ToolbarToggleGroup({ className, ...props }: ToolbarToggleGroupProps) {\n  return (\n    <ToolbarPrimitive.ToggleGroup\n      className={cn(toolbarToggleGroupVariants(), className)}\n      data-slot=\"toolbar-toggle-group\"\n      {...props}\n    />\n  )\n}\n\n/**\n * ToolbarToggleItem - Individual toggle item within a toggle group.\n *\n * Represents a selectable option that can be toggled on/off.\n */\nfunction ToolbarToggleItem({ className, ...props }: ToolbarToggleItemProps) {\n  return (\n    <ToolbarPrimitive.ToggleItem\n      className={cn(toolbarToggleItemVariants(), className)}\n      data-slot=\"toolbar-toggle-item\"\n      {...props}\n    />\n  )\n}\n\n/**\n * ToolbarSeparator - Visual separator between toolbar groups.\n *\n * Provides visual division between groups of related actions.\n */\nfunction ToolbarSeparator({ className, ...props }: ToolbarSeparatorProps) {\n  return (\n    <ToolbarPrimitive.Separator\n      className={cn(toolbarSeparatorVariants(), className)}\n      data-slot=\"toolbar-separator\"\n      {...props}\n    />\n  )\n}\n\n/**\n * ToolbarLink - Link element within the toolbar.\n *\n * Renders an accessible link styled to match toolbar items.\n */\nfunction ToolbarLink({ className, ...props }: ToolbarLinkProps) {\n  return (\n    <ToolbarPrimitive.Link\n      className={cn(toolbarLinkVariants(), className)}\n      data-slot=\"toolbar-link\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Toolbar,\n  ToolbarButton,\n  ToolbarGroup,\n  ToolbarLink,\n  ToolbarSeparator,\n  ToolbarToggleGroup,\n  ToolbarToggleItem,\n}\n"]}