@alfadocs/ui-kit-debug 0.66.0 → 0.67.1

package/dist/_chunks/{scroll-area-BWqCkEGz.js → scroll-area-5wNK0Cyz.js}

@@ -1,6 +1,6 @@
 import { jsx as s, jsxs as g } from "react/jsx-runtime";
 import { forwardRef as v, useRef as z } from "react";
-import * as o from "@radix-ui/react-scroll-area";
+import * as r from "@radix-ui/react-scroll-area";
 import { c as b } from "./index-D2ZczOXr.js";
 import { u as p } from "./use-direction-Dp8h70PP.js";
 const u = b(
@@ -40,75 +40,85 @@ const u = b(
     // forced-color-adjust: auto so forced-colors paint ButtonFace/ButtonText
     "ds:[forced-color-adjust:auto]",
     // hit area extension via ::before for touch pointers (must be absolute)
-    'ds:before:absolute ds:before:content-[""] ds:before:inset-inline-[calc((var(--min-target-size)-100%)/-2)]',
-    "ds:before:inset-block-[calc((var(--min-target-size)-100%)/-2)]"
+    'ds:before:absolute ds:before:content-[""] ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)]',
+    "ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)]"
   ].join(" ")
-), w = (r) => r === "auto" || r === void 0 ? "hover" : r, S = {
+), w = (o) => o === "auto" || o === void 0 ? "hover" : o, S = {
   vertical: "ds:overflow-y-auto",
   horizontal: "ds:overflow-x-auto",
   both: "ds:overflow-auto"
 }, m = v(
   ({
-    orientation: r = "vertical",
+    orientation: o = "vertical",
     size: e = "md",
-    type: i = "auto",
-    className: l,
+    type: l = "auto",
+    className: i,
     children: t,
     scrollHideDelay: n,
     ...d
   }, c) => {
     const a = z(null), h = p(a);
     return /* @__PURE__ */ g(
-      o.Root,
+      r.Root,
       {
         ref: a,
-        type: w(i),
+        type: w(l),
         dir: h,
         scrollHideDelay: n,
         "data-component": "scroll-area",
         className: [
           "ds:relative ds:overflow-hidden",
           "ds:min-w-0 ds:min-h-0",
-          l
+          i
         ].filter(Boolean).join(" "),
         ...d,
         children: [
           /* @__PURE__ */ s(
-            o.Viewport,
+            r.Viewport,
             {
               ref: c,
               tabIndex: 0,
               className: [
                 "ds:h-full ds:w-full ds:rounded-[inherit]",
+                // Radix wraps the viewport content in an inline
+                // `display:table; min-width:100%` div that grows to the content's
+                // MAX-content width. In a vertical-only scroll area the Root's
+                // overflow-x is hidden, so anything wider than the viewport is
+                // silently CLIPPED — not scrollable (seen in the AiToolsRail inbox
+                // panel once accessible-mode type pushed content past the panel
+                // width). Forcing that wrapper to `block` makes content wrap to the
+                // viewport width instead. Horizontal / both keep the table wrapper
+                // so they can still scroll on the x-axis.
+                o === "vertical" ? "ds:[&>div]:!block" : "",
                 // keyboard focus ring on the scroll container
                 "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
                 "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
                 "ds:forced-colors:focus-visible:outline-[Highlight]"
-              ].join(" "),
+              ].filter(Boolean).join(" "),
               children: t
             }
           ),
-          (r === "vertical" || r === "both") && // forceMount keeps the element in the DOM so CSS opacity transition
+          (o === "vertical" || o === "both") && // forceMount keeps the element in the DOM so CSS opacity transition
           // can animate the show/hide instead of mount/unmount snapping.
           /* @__PURE__ */ s(
-            o.Scrollbar,
+            r.Scrollbar,
             {
               forceMount: !0,
               orientation: "vertical",
               className: u({ size: e }),
-              children: /* @__PURE__ */ s(o.Thumb, { className: f() })
+              children: /* @__PURE__ */ s(r.Thumb, { className: f() })
             }
           ),
-          (r === "horizontal" || r === "both") && /* @__PURE__ */ s(
-            o.Scrollbar,
+          (o === "horizontal" || o === "both") && /* @__PURE__ */ s(
+            r.Scrollbar,
             {
               forceMount: !0,
               orientation: "horizontal",
               className: u({ size: e }),
-              children: /* @__PURE__ */ s(o.Thumb, { className: f() })
+              children: /* @__PURE__ */ s(r.Thumb, { className: f() })
             }
           ),
-          /* @__PURE__ */ s(o.Corner, {})
+          /* @__PURE__ */ s(r.Corner, {})
         ]
       }
     );
@@ -116,24 +126,24 @@ const u = b(
 );
 m.displayName = "RadixScrollArea";
 const x = v(
-  (r, e) => {
+  (o, e) => {
     const {
-      orientation: i = "vertical",
-      type: l = "auto",
+      orientation: l = "vertical",
+      type: i = "auto",
       className: t,
       children: n,
       scrollHideDelay: d,
       size: c,
       ...a
-    } = r;
-    return l === "native" ? /* @__PURE__ */ s(
+    } = o;
+    return i === "native" ? /* @__PURE__ */ s(
       "div",
       {
         ref: e,
         "data-component": "scroll-area",
         tabIndex: 0,
         className: [
-          S[i],
+          S[l],
           "ds:min-w-0 ds:min-h-0",
           "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
           "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
@@ -143,17 +153,17 @@ const x = v(
         ...a,
         children: n
       }
-    ) : /* @__PURE__ */ s(m, { ref: e, ...r });
+    ) : /* @__PURE__ */ s(m, { ref: e, ...o });
   }
 );
 x.displayName = "ScrollArea";
-const R = o.Root, T = o.Viewport, V = o.Scrollbar, H = o.Thumb, B = o.Corner;
+const R = r.Root, T = r.Viewport, V = r.Scrollbar, B = r.Thumb, H = r.Corner;
 export {
   x as S,
-  B as a,
+  H as a,
   R as b,
   V as c,
-  H as d,
+  B as d,
   T as e
 };
-//# sourceMappingURL=scroll-area-BWqCkEGz.js.map
+//# sourceMappingURL=scroll-area-5wNK0Cyz.js.map

package/dist/_chunks/scroll-area-5wNK0Cyz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-5wNK0Cyz.js","sources":["../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["import { forwardRef, useRef, type ComponentPropsWithoutRef } from 'react';\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useDirection } from '../_shared/use-direction';\n\nconst scrollbarVariants = cva(\n  [\n    'ds:flex ds:touch-none ds:select-none',\n    // Fade in/out based on Radix data-state (requires forceMount on Scrollbar).\n    // Default opacity is 1 because ScrollAreaScrollbarVisible (type='always')\n    // never sets data-state at all — only hover/scroll/auto set data-state=\"hidden\".\n    'ds:transition-opacity ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n    'ds:data-[state=hidden]:opacity-0',\n    // Orientation-specific sizing + padding so thumb floats away from the frame edge\n    'ds:data-[orientation=vertical]:w-[var(--scrollbar-size)] ds:data-[orientation=vertical]:p-[var(--scrollbar-padding)]',\n    'ds:data-[orientation=horizontal]:h-[var(--scrollbar-size)] ds:data-[orientation=horizontal]:flex-col ds:data-[orientation=horizontal]:p-[var(--scrollbar-padding)]',\n    'ds:bg-[var(--scrollbar-track)]',\n    // forced-colors: 1px border keeps the track visible when background flattens\n    'ds:forced-colors:border ds:forced-colors:border-[ButtonText]',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'ds:[--scrollbar-size:var(--scrollbar-size-sm)]',\n        md: 'ds:[--scrollbar-size:var(--scrollbar-size-md)]',\n        lg: 'ds:[--scrollbar-size:var(--scrollbar-size-lg)]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\nconst thumbVariants = cva(\n  [\n    'ds:relative ds:flex-1',\n    'ds:rounded-[var(--radius-full)]',\n    'ds:bg-[var(--scrollbar-thumb)]',\n    'ds:hover:bg-[var(--scrollbar-thumb-hover)]',\n    'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n    // forced-color-adjust: auto so forced-colors paint ButtonFace/ButtonText\n    'ds:[forced-color-adjust:auto]',\n    // hit area extension via ::before for touch pointers (must be absolute)\n    'ds:before:absolute ds:before:content-[\"\"] ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)]',\n    'ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)]',\n  ].join(' '),\n);\n\nexport interface ScrollAreaProps\n  extends\n    Omit<ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>, 'type'>,\n    VariantProps<typeof scrollbarVariants> {\n  orientation?: 'vertical' | 'horizontal' | 'both';\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * `auto`   — scrollbar fades in on pointer-enter, fades out after `--scrollbar-fade-delay` (default).\n   * `always` — scrollbar always visible; use for data tables.\n   * `scroll` — scrollbar visible only while scrolling.\n   * `hover`  — alias for `auto` (Radix hover mode).\n   * `native` — skips the custom scrollbar entirely; the OS renders its own.\n   *            Use for virtualised lists (AG Grid, @tanstack/react-virtual).\n   */\n  type?: 'auto' | 'always' | 'scroll' | 'hover' | 'native';\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst radixType = (\n  type: ScrollAreaProps['type'],\n): ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>['type'] => {\n  if (type === 'auto' || type === undefined) return 'hover';\n  return type as Exclude<\n    ScrollAreaProps['type'],\n    'auto' | 'native' | undefined\n  >;\n};\n\nconst nativeOverflow: Record<\n  NonNullable<ScrollAreaProps['orientation']>,\n  string\n> = {\n  vertical: 'ds:overflow-y-auto',\n  horizontal: 'ds:overflow-x-auto',\n  both: 'ds:overflow-auto',\n};\n\nconst RadixScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      orientation = 'vertical',\n      size = 'md',\n      type = 'auto',\n      className,\n      children,\n      scrollHideDelay,\n      ...props\n    },\n    ref,\n  ) => {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const dir = useDirection(rootRef);\n    return (\n      <ScrollAreaPrimitive.Root\n        ref={rootRef}\n        type={radixType(type)}\n        dir={dir}\n        scrollHideDelay={scrollHideDelay}\n        data-component=\"scroll-area\"\n        className={[\n          'ds:relative ds:overflow-hidden',\n          'ds:min-w-0 ds:min-h-0',\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      >\n        <ScrollAreaPrimitive.Viewport\n          ref={ref}\n          // axe's `scrollable-region-focusable` rule requires any element\n          // with overflow to be reachable via keyboard. Radix's Viewport\n          // is the scroll container; mark it focusable (tabIndex=0) so\n          // arrow / Home / End keys can drive it.\n          tabIndex={0}\n          className={[\n            'ds:h-full ds:w-full ds:rounded-[inherit]',\n            // Radix wraps the viewport content in an inline\n            // `display:table; min-width:100%` div that grows to the content's\n            // MAX-content width. In a vertical-only scroll area the Root's\n            // overflow-x is hidden, so anything wider than the viewport is\n            // silently CLIPPED — not scrollable (seen in the AiToolsRail inbox\n            // panel once accessible-mode type pushed content past the panel\n            // width). Forcing that wrapper to `block` makes content wrap to the\n            // viewport width instead. Horizontal / both keep the table wrapper\n            // so they can still scroll on the x-axis.\n            orientation === 'vertical' ? 'ds:[&>div]:!block' : '',\n            // keyboard focus ring on the scroll container\n            'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n            'ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n            'ds:forced-colors:focus-visible:outline-[Highlight]',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {children}\n        </ScrollAreaPrimitive.Viewport>\n\n        {(orientation === 'vertical' || orientation === 'both') && (\n          // forceMount keeps the element in the DOM so CSS opacity transition\n          // can animate the show/hide instead of mount/unmount snapping.\n          <ScrollAreaPrimitive.Scrollbar\n            forceMount\n            orientation=\"vertical\"\n            className={scrollbarVariants({ size })}\n          >\n            <ScrollAreaPrimitive.Thumb className={thumbVariants()} />\n          </ScrollAreaPrimitive.Scrollbar>\n        )}\n\n        {(orientation === 'horizontal' || orientation === 'both') && (\n          <ScrollAreaPrimitive.Scrollbar\n            forceMount\n            orientation=\"horizontal\"\n            className={scrollbarVariants({ size })}\n          >\n            <ScrollAreaPrimitive.Thumb className={thumbVariants()} />\n          </ScrollAreaPrimitive.Scrollbar>\n        )}\n\n        <ScrollAreaPrimitive.Corner />\n      </ScrollAreaPrimitive.Root>\n    );\n  },\n);\n\nRadixScrollArea.displayName = 'RadixScrollArea';\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (props, ref) => {\n    const {\n      orientation = 'vertical',\n      type = 'auto',\n      className,\n      children,\n      scrollHideDelay: _scrollHideDelay,\n      size: _size,\n      ...rest\n    } = props;\n    if (type === 'native') {\n      return (\n        <div\n          ref={ref}\n          data-component=\"scroll-area\"\n          // Native scroll containers are not focusable by default — axe's\n          // scrollable-region-focusable rule fires unless the user marks them\n          // explicitly tabbable so keyboard users can scroll with arrows.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n          tabIndex={0}\n          className={[\n            nativeOverflow[orientation],\n            'ds:min-w-0 ds:min-h-0',\n            'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n            'ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n            'ds:forced-colors:focus-visible:outline-[Highlight]',\n            className,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...rest}\n        >\n          {children}\n        </div>\n      );\n    }\n    return <RadixScrollArea ref={ref} {...props} />;\n  },\n);\n\nScrollArea.displayName = 'ScrollArea';\n\n// Re-export Radix parts for advanced composition\nexport const ScrollAreaRoot = ScrollAreaPrimitive.Root;\nexport const ScrollAreaViewport = ScrollAreaPrimitive.Viewport;\nexport const ScrollAreaScrollbar = ScrollAreaPrimitive.Scrollbar;\nexport const ScrollAreaThumb = ScrollAreaPrimitive.Thumb;\nexport const ScrollAreaCorner = ScrollAreaPrimitive.Corner;\n"],"names":["scrollbarVariants","cva","thumbVariants","radixType","type","nativeOverflow","RadixScrollArea","forwardRef","orientation","size","className","children","scrollHideDelay","props","ref","rootRef","useRef","dir","useDirection","jsxs","ScrollAreaPrimitive","jsx","ScrollArea","_scrollHideDelay","_size","rest","ScrollAreaRoot","ScrollAreaViewport","ScrollAreaScrollbar","ScrollAreaThumb","ScrollAreaCorner"],"mappings":"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"}