@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-BQMQULAC.js

@@ -0,0 +1,37 @@
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from './chunk-7I6KK6QE.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, Radar } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function RadarChart({
+  className,
+  config,
+  data,
+  dataKeys,
+  angleKey = "subject",
+  showGrid = true,
+  showDots = true,
+  fillOpacity = 0.3,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ChartContainer, { className: cn("aspect-square", className), config, ...props, children: /* @__PURE__ */ jsxs(RadarChart$1, { data, children: [
+    showGrid && /* @__PURE__ */ jsx(PolarGrid, {}),
+    /* @__PURE__ */ jsx(PolarAngleAxis, { dataKey: angleKey }),
+    /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    dataKeys.map((key) => /* @__PURE__ */ jsx(
+      Radar,
+      {
+        dataKey: key,
+        dot: showDots ? { r: 3 } : false,
+        fill: `var(--color-${key})`,
+        fillOpacity,
+        stroke: `var(--color-${key})`
+      },
+      key
+    ))
+  ] }) });
+}
+
+export { RadarChart };
+//# sourceMappingURL=chunk-BQMQULAC.js.map
+//# sourceMappingURL=chunk-BQMQULAC.js.map

package/dist/chunk-BQMQULAC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/RadarChart/RadarChart.tsx"],"names":["RechartsRadarChart"],"mappings":";;;;;AAcA,SAAS,UAAA,CAAW;AAAA,EAClB,SAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,SAAA;AAAA,EACX,QAAA,GAAW,IAAA;AAAA,EACX,QAAA,GAAW,IAAA;AAAA,EACX,WAAA,GAAc,GAAA;AAAA,EACd,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,SAAA,EAAW,EAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EAAG,MAAA,EAAiB,GAAG,KAAA,EAC7E,QAAA,kBAAA,IAAA,CAACA,YAAA,EAAA,EAAmB,IAAA,EACjB,QAAA,EAAA;AAAA,IAAA,QAAA,wBAAa,SAAA,EAAA,EAAU,CAAA;AAAA,oBACxB,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAS,QAAA,EAAU,CAAA;AAAA,oBACnC,GAAA,CAAC,YAAA,EAAA,EAAa,OAAA,kBAAS,GAAA,CAAC,uBAAoB,CAAA,EAAI,CAAA;AAAA,IAC/C,QAAA,CAAS,GAAA,CAAI,CAAC,GAAA,qBACb,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEC,OAAA,EAAS,GAAA;AAAA,QACT,GAAA,EAAK,QAAA,GAAW,EAAE,CAAA,EAAG,GAAE,GAAI,KAAA;AAAA,QAC3B,IAAA,EAAM,eAAe,GAAG,CAAA,CAAA,CAAA;AAAA,QACxB,WAAA;AAAA,QACA,MAAA,EAAQ,eAAe,GAAG,CAAA,CAAA;AAAA,OAAA;AAAA,MALrB;AAAA,KAOR;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ","file":"chunk-BQMQULAC.js","sourcesContent":["\"use client\"\n\nimport type { RadarChartProps } from \"./RadarChart.types\"\n\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  Radar,\n  RadarChart as RechartsRadarChart,\n} from \"recharts\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { ChartContainer, ChartTooltip, ChartTooltipContent } from \"../Chart\"\n\nfunction RadarChart({\n  className,\n  config,\n  data,\n  dataKeys,\n  angleKey = \"subject\",\n  showGrid = true,\n  showDots = true,\n  fillOpacity = 0.3,\n  ...props\n}: RadarChartProps) {\n  return (\n    <ChartContainer className={cn(\"aspect-square\", className)} config={config} {...props}>\n      <RechartsRadarChart data={data}>\n        {showGrid && <PolarGrid />}\n        <PolarAngleAxis dataKey={angleKey} />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        {dataKeys.map((key) => (\n          <Radar\n            key={key}\n            dataKey={key}\n            dot={showDots ? { r: 3 } : false}\n            fill={`var(--color-${key})`}\n            fillOpacity={fillOpacity}\n            stroke={`var(--color-${key})`}\n          />\n        ))}\n      </RechartsRadarChart>\n    </ChartContainer>\n  )\n}\n\nexport { RadarChart }\n"]}

package/dist/chunk-BWGZKU3I.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-BWGZKU3I.js.map
+//# sourceMappingURL=chunk-BWGZKU3I.js.map

package/dist/chunk-BWGZKU3I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-BWGZKU3I.js"}

package/dist/chunk-CKD4UBV6.js

@@ -0,0 +1,138 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var folderStackVariants = cva(
+  "relative flex-shrink-0 [&_[data-slot='folder-stack-tile']]:absolute [&_[data-slot='folder-stack-tile']]:bg-[color:var(--tint,theme(colors.neutral.200))] [&_[data-slot='folder-stack-tile']]:transition-colors",
+  {
+    variants: {
+      size: {
+        xs: "w-[var(--folder-stack-size-xs-width)] h-[var(--folder-stack-size-xs-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-xs-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-xs-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-xs-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-xs-outline-width)]",
+        sm: "w-[var(--folder-stack-size-sm-width)] h-[var(--folder-stack-size-sm-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-sm-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-sm-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-sm-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-sm-outline-width)]",
+        default: "w-[var(--folder-stack-size-default-width)] h-[var(--folder-stack-size-default-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-default-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-default-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-default-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-default-outline-width)]",
+        lg: "w-[var(--folder-stack-size-lg-width)] h-[var(--folder-stack-size-lg-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-lg-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-lg-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-lg-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-lg-outline-width)]",
+        xl: "w-[var(--folder-stack-size-xl-width)] h-[var(--folder-stack-size-xl-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-xl-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-xl-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-xl-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-xl-outline-width)]"
+      },
+      interactive: {
+        true: "cursor-pointer transition-transform hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[color:var(--ring)] motion-reduce:transition-none motion-reduce:hover:scale-100",
+        false: ""
+      },
+      active: {
+        true: "ring-2 ring-[color:var(--folder-stack-interactive-active-ring-color,var(--primary))] ring-offset-2 ring-offset-[color:var(--background)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      interactive: false,
+      active: false
+    }
+  }
+);
+var folderStackTilePositions = {
+  xs: [
+    { left: "1px", top: "0" },
+    { left: "11px", top: "0" },
+    { left: "1px", top: "10px" },
+    { left: "11px", top: "10px" }
+  ],
+  sm: [
+    { left: "1px", top: "0" },
+    { left: "15px", top: "0" },
+    { left: "1px", top: "13px" },
+    { left: "15px", top: "13px" }
+  ],
+  default: [
+    { left: "0", top: "0" },
+    { left: "18px", top: "0" },
+    { left: "0", top: "22px" },
+    { left: "18px", top: "22px" }
+  ],
+  lg: [
+    { left: "0", top: "0" },
+    { left: "28px", top: "0" },
+    { left: "0", top: "30px" },
+    { left: "28px", top: "30px" }
+  ],
+  xl: [
+    { left: "0", top: "0" },
+    { left: "36px", top: "0" },
+    { left: "0", top: "38px" },
+    { left: "36px", top: "38px" }
+  ]
+};
+function FolderStack({
+  tints,
+  size = "default",
+  interactive = false,
+  active = false,
+  className,
+  "aria-label": ariaLabel,
+  onClick,
+  ...props
+}) {
+  const sizeKey = size ?? "default";
+  const positions = folderStackTilePositions[sizeKey];
+  const slots = Array.from({ length: 4 }, (_, i) => tints[i] ?? null);
+  const handleClick = React.useCallback(
+    (event) => {
+      if (!interactive) return;
+      onClick?.(event, { tints, timestamp: Date.now() });
+    },
+    [interactive, onClick, tints]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (!interactive) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onClick?.(
+          event,
+          { tints, timestamp: Date.now() }
+        );
+      }
+    },
+    [interactive, onClick, tints]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        folderStackVariants({ size, interactive, active }),
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-pressed": interactive && active ? true : void 0,
+      "data-active": active || void 0,
+      "data-empty": slots.every((s) => s === null) || void 0,
+      "data-size": size,
+      "data-slot": "folder-stack",
+      role: interactive ? "button" : "img",
+      tabIndex: interactive ? 0 : void 0,
+      onClick: interactive ? handleClick : void 0,
+      onKeyDown: interactive ? handleKeyDown : void 0,
+      ...props,
+      children: slots.map((tint, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            ...positions[i],
+            "--tint": tint ?? "var(--folder-stack-empty-bg, var(--muted))"
+          },
+          "aria-hidden": "true",
+          className: "outline outline-[color:var(--folder-stack-outline-color,var(--background))]",
+          "data-empty": tint === null || void 0,
+          "data-position": i,
+          "data-slot": "folder-stack-tile"
+        },
+        `folder-stack-tile-${String(i)}`
+      ))
+    }
+  );
+}
+FolderStack.displayName = "FolderStack";
+
+export { FolderStack, folderStackVariants };
+//# sourceMappingURL=chunk-CKD4UBV6.js.map
+//# sourceMappingURL=chunk-CKD4UBV6.js.map

package/dist/chunk-CKD4UBV6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/FolderStack/FolderStack.variants.ts","../src/components/primitives/FolderStack/FolderStack.tsx"],"names":[],"mappings":"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","file":"chunk-CKD4UBV6.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const folderStackVariants = cva(\n  \"relative flex-shrink-0 [&_[data-slot='folder-stack-tile']]:absolute [&_[data-slot='folder-stack-tile']]:bg-[color:var(--tint,theme(colors.neutral.200))] [&_[data-slot='folder-stack-tile']]:transition-colors\",\n  {\n    variants: {\n      size: {\n        xs: \"w-[var(--folder-stack-size-xs-width)] h-[var(--folder-stack-size-xs-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-xs-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-xs-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-xs-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-xs-outline-width)]\",\n        sm: \"w-[var(--folder-stack-size-sm-width)] h-[var(--folder-stack-size-sm-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-sm-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-sm-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-sm-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-sm-outline-width)]\",\n        default:\n          \"w-[var(--folder-stack-size-default-width)] h-[var(--folder-stack-size-default-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-default-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-default-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-default-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-default-outline-width)]\",\n        lg: \"w-[var(--folder-stack-size-lg-width)] h-[var(--folder-stack-size-lg-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-lg-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-lg-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-lg-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-lg-outline-width)]\",\n        xl: \"w-[var(--folder-stack-size-xl-width)] h-[var(--folder-stack-size-xl-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-xl-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-xl-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-xl-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-xl-outline-width)]\",\n      },\n      interactive: {\n        true: \"cursor-pointer transition-transform hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[color:var(--ring)] motion-reduce:transition-none motion-reduce:hover:scale-100\",\n        false: \"\",\n      },\n      active: {\n        true: \"ring-2 ring-[color:var(--folder-stack-interactive-active-ring-color,var(--primary))] ring-offset-2 ring-offset-[color:var(--background)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      interactive: false,\n      active: false,\n    },\n  },\n)\n\n/** Tile positions per size — top-left, top-right, bottom-left, bottom-right.\n * Returned as inline styles so each tile can be positioned absolutely without\n * exploding the className surface. Values derived from prototype `dam.css`. */\nexport const folderStackTilePositions: Record<\n  \"default\" | \"lg\" | \"sm\" | \"xl\" | \"xs\",\n  { left: string; top: string }[]\n> = {\n  xs: [\n    { left: \"1px\", top: \"0\" },\n    { left: \"11px\", top: \"0\" },\n    { left: \"1px\", top: \"10px\" },\n    { left: \"11px\", top: \"10px\" },\n  ],\n  sm: [\n    { left: \"1px\", top: \"0\" },\n    { left: \"15px\", top: \"0\" },\n    { left: \"1px\", top: \"13px\" },\n    { left: \"15px\", top: \"13px\" },\n  ],\n  default: [\n    { left: \"0\", top: \"0\" },\n    { left: \"18px\", top: \"0\" },\n    { left: \"0\", top: \"22px\" },\n    { left: \"18px\", top: \"22px\" },\n  ],\n  lg: [\n    { left: \"0\", top: \"0\" },\n    { left: \"28px\", top: \"0\" },\n    { left: \"0\", top: \"30px\" },\n    { left: \"28px\", top: \"30px\" },\n  ],\n  xl: [\n    { left: \"0\", top: \"0\" },\n    { left: \"36px\", top: \"0\" },\n    { left: \"0\", top: \"38px\" },\n    { left: \"36px\", top: \"38px\" },\n  ],\n}\n","import type { FolderStackProps } from \"./FolderStack.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { folderStackTilePositions, folderStackVariants } from \"./FolderStack.variants\"\n\n/**\n * FolderStack — 2×2 tile preview of folder contents.\n *\n * Renders 4 absolute-positioned tiles tinted with the colors passed in `tints`.\n * Excess tints are ignored; missing slots get a neutral empty fill. Used as\n * leading slot in file-tree rows, inside FolderCards, and as the visual for\n * ShortcutCard/Item nav targets.\n *\n * @example\n * <FolderStack tints={[\"#f97316\", \"#19e699\", \"#a78bfa\", \"#3b82f6\"]} aria-label=\"Folder with 12 files\" />\n *\n * @example\n * <FolderStack tints={collectTints(folder)} size=\"default\" interactive onClick={navigate} aria-label={folder.name} />\n */\nfunction FolderStack({\n  tints,\n  size = \"default\",\n  interactive = false,\n  active = false,\n  className,\n  \"aria-label\": ariaLabel,\n  onClick,\n  ...props\n}: FolderStackProps) {\n  const sizeKey = (size ?? \"default\")\n  const positions = folderStackTilePositions[sizeKey]\n\n  // Pad to exactly 4 entries — extra tints discarded, missing slots stay empty.\n  const slots = Array.from({ length: 4 }, (_, i) => tints[i] ?? null)\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (!interactive) return\n      onClick?.(event, { tints, timestamp: Date.now() })\n    },\n    [interactive, onClick, tints],\n  )\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!interactive) return\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault()\n        onClick?.(\n          event as unknown as React.MouseEvent<HTMLDivElement>,\n          { tints, timestamp: Date.now() },\n        )\n      }\n    },\n    [interactive, onClick, tints],\n  )\n\n  return (\n    <div\n      className={cn(\n        folderStackVariants({ size, interactive, active }),\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-pressed={interactive && active ? true : undefined}\n      data-active={active || undefined}\n      data-empty={slots.every((s) => s === null) || undefined}\n      data-size={size}\n      data-slot=\"folder-stack\"\n      role={interactive ? \"button\" : \"img\"}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={interactive ? handleClick : undefined}\n      onKeyDown={interactive ? handleKeyDown : undefined}\n      {...props}\n    >\n      {slots.map((tint, i) => (\n        <span\n          key={`folder-stack-tile-${String(i)}`}\n          style={\n            {\n              ...positions[i],\n              \"--tint\": tint ?? \"var(--folder-stack-empty-bg, var(--muted))\",\n            } as React.CSSProperties\n          }\n          aria-hidden=\"true\"\n          className=\"outline outline-[color:var(--folder-stack-outline-color,var(--background))]\"\n          data-empty={tint === null || undefined}\n          data-position={i}\n          data-slot=\"folder-stack-tile\"\n        />\n      ))}\n    </div>\n  )\n}\n\nFolderStack.displayName = \"FolderStack\"\n\nexport { FolderStack, folderStackVariants }\n"]}

package/dist/chunk-CNRV2IGH.js

@@ -0,0 +1,111 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var scrollAreaVariants = cva(["relative", "overflow-hidden"]);
+var scrollAreaViewportVariants = cva([
+  "size-full rounded-[inherit]",
+  "overflow-auto",
+  "transition-[color,box-shadow] outline-none",
+  "focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-1"
+]);
+var scrollBarVariants = cva(
+  ["flex touch-none select-none transition-colors"],
+  {
+    variants: {
+      /**
+       * Orientation of the scrollbar
+       * - vertical: Vertical scrollbar on the right
+       * - horizontal: Horizontal scrollbar at the bottom
+       */
+      orientation: {
+        vertical: "h-full w-[var(--scroll-bar-width-default)] border-l border-l-transparent p-px",
+        horizontal: "h-[var(--scroll-bar-width-default)] w-full flex-col border-t border-t-transparent p-px"
+      },
+      /**
+       * Size of the scrollbar
+       * - default: Standard scrollbar size (2.5 = 10px)
+       * - thin: Thinner scrollbar (1.5 = 6px)
+       * - wide: Wider scrollbar (3.5 = 14px)
+       */
+      size: {
+        default: "",
+        thin: "",
+        wide: ""
+      }
+    },
+    compoundVariants: [
+      // Vertical size variants
+      { orientation: "vertical", size: "thin", class: "w-[var(--scroll-bar-width-thin)]" },
+      { orientation: "vertical", size: "wide", class: "w-[var(--scroll-bar-width-wide)]" },
+      // Horizontal size variants
+      { orientation: "horizontal", size: "thin", class: "h-[var(--scroll-bar-width-thin)]" },
+      { orientation: "horizontal", size: "wide", class: "h-[var(--scroll-bar-width-wide)]" }
+    ],
+    defaultVariants: {
+      orientation: "vertical",
+      size: "default"
+    }
+  }
+);
+var scrollBarThumbVariants = cva([
+  "bg-[color:var(--scroll-bar-thumb-bg)] relative flex-1 rounded-full"
+]);
+var scrollAreaCornerVariants = cva(["bg-transparent"]);
+function ScrollArea({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      className: cn(scrollAreaVariants(), className),
+      "data-slot": "scroll-area",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            className: cn(scrollAreaViewportVariants()),
+            "data-slot": "scroll-area-viewport",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Corner,
+          {
+            className: cn(scrollAreaCornerVariants())
+          }
+        )
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  size,
+  ...props
+}) {
+  const resolvedOrientation = orientation ?? "vertical";
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      className: cn(scrollBarVariants({ orientation: resolvedOrientation, size }), className),
+      "data-slot": "scroll-area-scrollbar",
+      orientation: resolvedOrientation,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          className: cn(scrollBarThumbVariants()),
+          "data-slot": "scroll-area-thumb"
+        }
+      )
+    }
+  );
+}
+
+export { ScrollArea, ScrollBar, scrollAreaCornerVariants, scrollAreaVariants, scrollAreaViewportVariants, scrollBarThumbVariants, scrollBarVariants };
+//# sourceMappingURL=chunk-CNRV2IGH.js.map
+//# sourceMappingURL=chunk-CNRV2IGH.js.map

package/dist/chunk-CNRV2IGH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ScrollArea/ScrollArea.variants.ts","../src/components/layout/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"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","file":"chunk-CNRV2IGH.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * ScrollArea root variant styles\n * Container for scrollable content\n */\nexport const scrollAreaVariants = cva([\"relative\", \"overflow-hidden\"])\n\n/**\n * ScrollArea viewport variant styles\n * The scrollable content container\n */\nexport const scrollAreaViewportVariants = cva([\n  \"size-full rounded-[inherit]\",\n  \"overflow-auto\",\n  \"transition-[color,box-shadow] outline-none\",\n  \"focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-1\",\n])\n\n/**\n * ScrollBar variant styles\n * The scrollbar track with size and visibility variants\n */\nexport const scrollBarVariants = cva(\n  [\"flex touch-none select-none transition-colors\"],\n  {\n    variants: {\n      /**\n       * Orientation of the scrollbar\n       * - vertical: Vertical scrollbar on the right\n       * - horizontal: Horizontal scrollbar at the bottom\n       */\n      orientation: {\n        vertical: \"h-full w-[var(--scroll-bar-width-default)] border-l border-l-transparent p-px\",\n        horizontal: \"h-[var(--scroll-bar-width-default)] w-full flex-col border-t border-t-transparent p-px\",\n      },\n      /**\n       * Size of the scrollbar\n       * - default: Standard scrollbar size (2.5 = 10px)\n       * - thin: Thinner scrollbar (1.5 = 6px)\n       * - wide: Wider scrollbar (3.5 = 14px)\n       */\n      size: {\n        default: \"\",\n        thin: \"\",\n        wide: \"\",\n      },\n    },\n    compoundVariants: [\n      // Vertical size variants\n      { orientation: \"vertical\", size: \"thin\", class: \"w-[var(--scroll-bar-width-thin)]\" },\n      { orientation: \"vertical\", size: \"wide\", class: \"w-[var(--scroll-bar-width-wide)]\" },\n      // Horizontal size variants\n      { orientation: \"horizontal\", size: \"thin\", class: \"h-[var(--scroll-bar-width-thin)]\" },\n      { orientation: \"horizontal\", size: \"wide\", class: \"h-[var(--scroll-bar-width-wide)]\" },\n    ],\n    defaultVariants: {\n      orientation: \"vertical\",\n      size: \"default\",\n    },\n  }\n)\n\n/**\n * ScrollBar thumb variant styles\n * The draggable part of the scrollbar\n */\nexport const scrollBarThumbVariants = cva([\n  \"bg-[color:var(--scroll-bar-thumb-bg)] relative flex-1 rounded-full\",\n])\n\n/**\n * ScrollArea corner variant styles\n * Corner element when both scrollbars are visible\n */\nexport const scrollAreaCornerVariants = cva([\"bg-transparent\"])\n\nexport type ScrollAreaVariantProps = VariantProps<typeof scrollAreaVariants>\nexport type ScrollAreaViewportVariantProps = VariantProps<\n  typeof scrollAreaViewportVariants\n>\nexport type ScrollBarVariantProps = VariantProps<typeof scrollBarVariants>\nexport type ScrollBarThumbVariantProps = VariantProps<\n  typeof scrollBarThumbVariants\n>\n","\"use client\"\n\nimport type { ScrollAreaProps, ScrollBarProps } from \"./ScrollArea.types\"\n\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  scrollAreaCornerVariants,\n  scrollAreaVariants,\n  scrollAreaViewportVariants,\n  scrollBarThumbVariants,\n  scrollBarVariants,\n} from \"./ScrollArea.variants\"\n\nfunction ScrollArea({ className, children, ...props }: ScrollAreaProps) {\n  return (\n    <ScrollAreaPrimitive.Root\n      className={cn(scrollAreaVariants(), className)}\n      data-slot=\"scroll-area\"\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className={cn(scrollAreaViewportVariants())}\n        data-slot=\"scroll-area-viewport\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner\n        className={cn(scrollAreaCornerVariants())}\n      />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  size,\n  ...props\n}: ScrollBarProps) {\n  // Ensure orientation is never null (CVA allows null, Radix expects undefined)\n  const resolvedOrientation = orientation ?? \"vertical\"\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      className={cn(scrollBarVariants({ orientation: resolvedOrientation, size }), className)}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={resolvedOrientation}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        className={cn(scrollBarThumbVariants())}\n        data-slot=\"scroll-area-thumb\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n"]}