@godxjp/ui 20.0.0 → 20.1.0

package/dist/components/data-display/descriptions.d.ts

@@ -1,8 +1,14 @@
 import * as React from "react";
 import type { DescriptionsLayoutProp } from "../../props/vocabulary/interaction.prop.js";
+import type { DescriptionsColumnProp, DescriptionsItemsProp, DescriptionsSpanProp } from "../../props/vocabulary/data.prop.js";
 export type { DescriptionsLayoutProp };
 export interface DescriptionsProps {
-    columns?: 1 | 2 | 3;
+    /**
+     * Column count. A plain `1 | 2 | 3` keeps this library's own responsive ladder exactly as it
+     * was; any other number, or antd's `{ sm, md, lg, xl }` responsive object, drives the
+     * token-published grid instead (antd `column`).
+     */
+    columns?: DescriptionsColumnProp;
     /** Label placement within each item. Default `vertical` (label over value). */
     layout?: DescriptionsLayoutProp;
     /**
@@ -10,19 +16,34 @@ export interface DescriptionsProps {
      * it there would read as a mistake, exactly like `Form`'s own contract.
      */
     labelAlign?: "start" | "end";
+    /**
+     * Draw the grid as a bordered table (antd `bordered`): an outer frame, a rule between every
+     * cell, and a shaded label cell. Colour and rhythm come from the `--descriptions-*` tokens.
+     */
+    bordered?: boolean;
+    /**
+     * Declarative items (antd `items`) — an alternative to composing `Descriptions.Item` children.
+     * Both work; `items` renders first, then any children after it.
+     */
+    items?: DescriptionsItemsProp;
     className?: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
-export declare function Descriptions({ columns, layout, labelAlign, className, children, }: DescriptionsProps): React.JSX.Element;
+export declare function Descriptions({ columns, layout, labelAlign, bordered, items, className, children, }: DescriptionsProps): React.JSX.Element;
 export declare namespace Descriptions {
-    var Item: ({ label, mono, span, className, children, }: DescriptionsItemProps) => React.JSX.Element;
+    export { DescriptionsItem as Item };
 }
 export interface DescriptionsItemProps {
     label: React.ReactNode;
     /** Use mono spacing for IDs, paths, JSON. */
     mono?: boolean;
-    /** Span full row(s) when value is long. */
-    span?: 2 | 3;
+    /**
+     * Span full row(s) when the value is long. `2` / `3` keep the ladder they have always painted;
+     * `"filled"` takes the whole remaining row (antd), and a responsive `{ sm, md, lg, xl }` object
+     * spans a different number of columns per step.
+     */
+    span?: DescriptionsSpanProp;
     className?: string;
     children: React.ReactNode;
 }
+declare function DescriptionsItem({ label, mono, span, className, children }: DescriptionsItemProps): React.JSX.Element;

package/dist/components/data-display/descriptions.js

@@ -4,45 +4,85 @@ import * as React from "react";
 import { cn } from "../../lib/utils.js";
 const DescriptionsLayoutContext = React.createContext({
   layout: "vertical",
-  labelAlign: "start"
+  labelAlign: "start",
+  bordered: false
 });
+const BREAKPOINT_LADDER = ["sm", "md", "lg", "xl"];
+function responsiveVars(name, base, steps) {
+  const vars = { [`${name}-base`]: base };
+  for (const step of BREAKPOINT_LADDER) {
+    const value = steps[step];
+    if (value !== void 0) vars[`${name}-${step}`] = value;
+  }
+  return vars;
+}
+const LEGACY_COLUMN_CLASS = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+};
 function Descriptions({
   columns = 2,
   layout = "vertical",
   labelAlign = "start",
+  bordered = false,
+  items,
   className,
   children
 }) {
-  const colsClass = columns === 1 ? "grid-cols-1" : columns === 3 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-1 sm:grid-cols-2";
-  const context = React.useMemo(() => ({ layout, labelAlign }), [layout, labelAlign]);
-  return /* @__PURE__ */ jsx(DescriptionsLayoutContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+  const legacyColumns = typeof columns === "number" ? LEGACY_COLUMN_CLASS[columns] : void 0;
+  const responsiveColumns = legacyColumns === void 0 ? typeof columns === "number" ? { sm: Math.min(columns, 2), lg: columns } : columns : void 0;
+  const context = React.useMemo(
+    () => ({ layout, labelAlign, bordered }),
+    [layout, labelAlign, bordered]
+  );
+  return /* @__PURE__ */ jsx(DescriptionsLayoutContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
     "dl",
     {
       "data-slot": "descriptions",
-      "data-columns": columns,
+      "data-columns": typeof columns === "number" ? columns : void 0,
+      "data-columns-responsive": responsiveColumns ? "" : void 0,
+      "data-bordered": bordered ? "" : void 0,
+      style: responsiveColumns ? responsiveVars("--descriptions-column-count", 1, responsiveColumns) : void 0,
       className: cn(
         "grid gap-x-[var(--descriptions-column-gap)] gap-y-[var(--descriptions-row-gap)]",
-        colsClass,
+        legacyColumns,
         className
       ),
-      children
+      children: [
+        items?.map((item, index) => /* @__PURE__ */ jsx(
+          DescriptionsItem,
+          {
+            label: item.label,
+            mono: item.mono,
+            span: item.span,
+            className: item.className,
+            children: item.children ?? item.value
+          },
+          item.key ?? index
+        )),
+        children
+      ]
     }
   ) });
 }
-Descriptions.Item = function DescriptionsItem({
-  label,
-  mono,
-  span,
-  className,
-  children
-}) {
+const LEGACY_SPAN_CLASS = {
+  2: "sm:col-span-2",
+  3: "sm:col-span-2 lg:col-span-3"
+};
+function DescriptionsItem({ label, mono, span, className, children }) {
   const { layout, labelAlign } = React.useContext(DescriptionsLayoutContext);
-  const spanClass = span === 2 ? "sm:col-span-2" : span === 3 ? "sm:col-span-2 lg:col-span-3" : "";
+  const legacySpan = typeof span === "number" ? LEGACY_SPAN_CLASS[span] : void 0;
+  const responsiveSpan = span !== void 0 && span !== "filled" && legacySpan === void 0 ? typeof span === "number" ? { sm: span } : span : void 0;
   const endAlignedLabel = layout === "horizontal" && labelAlign === "end";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "descriptions-item",
+      "data-layout": layout,
+      "data-span": span === "filled" ? "filled" : void 0,
+      "data-span-responsive": responsiveSpan ? "" : void 0,
+      style: responsiveSpan ? responsiveVars("--descriptions-item-span", 1, responsiveSpan) : void 0,
       className: cn(
         layout === "horizontal" ? (
           // Label beside value — a token-aligned label column so the values line up. The
@@ -54,7 +94,7 @@ Descriptions.Item = function DescriptionsItem({
           // FormField / Form so the label→value gap is consistent everywhere.
           "grid gap-[var(--field-label-gap)]"
         ),
-        spanClass,
+        legacySpan,
         className
       ),
       children: [
@@ -86,7 +126,8 @@ Descriptions.Item = function DescriptionsItem({
       ]
     }
   );
-};
+}
+Descriptions.Item = DescriptionsItem;
 export {
   Descriptions
 };

package/dist/components/data-display/index.d.ts

@@ -41,3 +41,5 @@ export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious
 export type { CarouselApi } from "./carousel.js";
 export { PermissionMatrix } from "./permission-matrix.js";
 export type { PermissionMatrixGrantsProp, PermissionMatrixPermissionProp, PermissionMatrixProp, PermissionMatrixProps, PermissionMatrixRoleProp, } from "./permission-matrix.js";
+export { RangeTimeline } from "./range-timeline.js";
+export type { RangeTimelineProps, RangeTimelineRow } from "./range-timeline.js";

package/dist/components/data-display/index.js

@@ -54,6 +54,7 @@ import {
   useCarousel
 } from "./carousel.js";
 import { PermissionMatrix } from "./permission-matrix.js";
+import { RangeTimeline } from "./range-timeline.js";
 export {
   Accordion,
   AccordionContent,
@@ -102,6 +103,7 @@ export {
   Progress,
   Prose,
   QrCode,
+  RangeTimeline,
   ScrollArea,
   ScrollBar,
   ServiceCatalogCta,

package/dist/components/data-display/list-row.d.ts

@@ -13,7 +13,16 @@ export type ListRowDensity = ListRowDensityProp;
  * justify-between border-b …">`.
  */
 export interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** Render element — `div` (default) or `li` when the parent is a `<ul>`/`<ol>`. */
+    /**
+     * Render element — `div` (default) or `li` when the parent is a `<ul>`/`<ol>`.
+     *
+     * With `asChild`, the child owns the row element, so `as` steps out and becomes the
+     * LIST ITEM around it: `<li data-slot="list-row-item"><a data-slot="list-row">`. That is
+     * the only reading under which both props can hold at once, and it is the shape a list
+     * of links needs — the alternative, wrapping the row yourself, moves every row into a
+     * wrapper of its own and the row-to-row divider (keyed on `:not(:last-child)` among
+     * siblings) stops matching entirely.
+     */
     as?: "div" | "li";
     /** Use the supplied link as the entire row. Do not nest interactive trailing controls. */
     asChild?: boolean;

package/dist/components/data-display/list-row.js

@@ -22,6 +22,7 @@ const ListRow = React.forwardRef(
     ...props
   }, ref) => {
     const { t } = useTranslation();
+    const item = asChild && as !== "div" ? as : null;
     const Comp = asChild ? Slot : as;
     const truncate = overflow !== "wrap";
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -33,7 +34,7 @@ const ListRow = React.forwardRef(
       ] }),
       trailing != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-trailing", children: trailing }) : null
     ] });
-    return /* @__PURE__ */ jsx(
+    const row = /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
@@ -47,6 +48,11 @@ const ListRow = React.forwardRef(
         children: asChild && React.isValidElement(children) ? React.cloneElement(children, void 0, content) : content
       }
     );
+    if (item === null) {
+      return row;
+    }
+    const Item = item;
+    return /* @__PURE__ */ jsx(Item, { "data-slot": "list-row-item", children: row });
   }
 );
 ListRow.displayName = "ListRow";

package/dist/components/data-display/popover.d.ts

@@ -69,6 +69,6 @@ interface PopoverContentProps extends React.ComponentPropsWithRef<"div">, Popove
 }
 export declare function PopoverContent({ className, style, children, ref, flush, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, onOpenAutoFocus, onCloseAutoFocus, ...props }: PopoverContentProps): React.JSX.Element;
 export declare const PopoverHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
-export declare const PopoverTitle: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
-export declare const PopoverDescription: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => React.JSX.Element;
+export declare const PopoverTitle: ({ className, id, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const PopoverDescription: ({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => React.JSX.Element;
 export {};

package/dist/components/data-display/popover.js

@@ -48,6 +48,11 @@ function Popover({
   const triggerRef = React.useRef(null);
   const anchorRef = React.useRef(null);
   const contentId = React.useId();
+  const titleId = React.useId();
+  const descriptionId = React.useId();
+  const triggerId = React.useId();
+  const [hasTitle, registerTitle] = React.useState(false);
+  const [hasDescription, registerDescription] = React.useState(false);
   const isOpen = open ?? uncontrolledOpen;
   const setOpen = React.useCallback(
     (next) => {
@@ -67,9 +72,27 @@ function Popover({
       triggerRef,
       anchorRef,
       anchored,
-      setAnchored
+      setAnchored,
+      titleId,
+      descriptionId,
+      hasTitle,
+      hasDescription,
+      registerTitle,
+      registerDescription,
+      triggerId
     }),
-    [isOpen, setOpen, contentId, modal, anchored]
+    [
+      isOpen,
+      setOpen,
+      contentId,
+      modal,
+      anchored,
+      titleId,
+      descriptionId,
+      hasTitle,
+      hasDescription,
+      triggerId
+    ]
   );
   return /* @__PURE__ */ jsx(PopoverRootContext.Provider, { value, children });
 }
@@ -83,6 +106,7 @@ function PopoverTrigger({ asChild, onClick, ref, ...props }) {
       "data-slot": "popover-trigger",
       "aria-haspopup": "dialog",
       "aria-expanded": root.open,
+      id: props.id ?? root.triggerId,
       "aria-controls": root.open ? root.contentId : void 0,
       "data-state": root.open ? "open" : "closed",
       ...props,
@@ -186,6 +210,8 @@ function PopoverContent({
             "data-state": isExiting ? "closed" : "open",
             "data-flush": flush ? "" : void 0,
             ...props,
+            "aria-labelledby": props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : root.hasTitle ? root.titleId : root.triggerId),
+            "aria-describedby": props["aria-describedby"] ?? (root.hasDescription ? root.descriptionId : void 0),
             ref: mergeRefs(ref, racRef, contentRef),
             className: cn(
               "ui-popover-content origin-[var(--radix-popover-content-transform-origin)]",
@@ -213,18 +239,42 @@ function PopoverContent({
   );
 }
 const PopoverHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "popover-header", className: cn("ui-popover-header", className), ...props });
-const PopoverTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "popover-title", className: cn("font-medium", className), ...props });
+const PopoverTitle = ({ className, id, ...props }) => {
+  const root = usePopoverRoot("PopoverTitle");
+  React.useEffect(() => {
+    root.registerTitle(true);
+    return () => root.registerTitle(false);
+  }, [root]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "popover-title",
+      id: id ?? root.titleId,
+      className: cn("font-medium", className),
+      ...props
+    }
+  );
+};
 const PopoverDescription = ({
   className,
+  id,
   ...props
-}) => /* @__PURE__ */ jsx(
-  "p",
-  {
-    "data-slot": "popover-description",
-    className: cn("text-muted-foreground", className),
-    ...props
-  }
-);
+}) => {
+  const root = usePopoverRoot("PopoverDescription");
+  React.useEffect(() => {
+    root.registerDescription(true);
+    return () => root.registerDescription(false);
+  }, [root]);
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "popover-description",
+      id: id ?? root.descriptionId,
+      className: cn("text-muted-foreground", className),
+      ...props
+    }
+  );
+};
 export {
   Popover,
   PopoverAnchor,

package/dist/components/data-display/range-timeline.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+export type RangeTimelineRow = {
+    id: string;
+    label: React.ReactNode;
+    start: number;
+    end: number;
+    startLabel: string;
+    endLabel: string;
+};
+export type RangeTimelineProps = React.HTMLAttributes<HTMLElement> & {
+    label: string;
+    columns: {
+        label: string;
+        units: number;
+    }[];
+    bands?: {
+        label: string;
+        units: number;
+    }[];
+    rows: RangeTimelineRow[];
+    today?: number | null;
+    onRangeChange?: (id: string, edge: "start" | "end", delta: number) => void;
+};
+/** A horizontal range axis. Units and labels are data; the design system owns all geometry. */
+export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    label: string;
+    columns: {
+        label: string;
+        units: number;
+    }[];
+    bands?: {
+        label: string;
+        units: number;
+    }[];
+    rows: RangeTimelineRow[];
+    today?: number | null;
+    onRangeChange?: (id: string, edge: "start" | "end", delta: number) => void;
+} & React.RefAttributes<HTMLElement>>;

package/dist/components/data-display/range-timeline.js

@@ -0,0 +1,161 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { GripVertical } from "lucide-react";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { cn } from "../../lib/utils.js";
+const RangeTimeline = React.forwardRef(
+  function RangeTimeline2({ label, columns, bands, rows, today, onRangeChange, className, ...props }, ref) {
+    const { t } = useTranslation();
+    const units = Math.max(
+      1,
+      columns.reduce((sum, column) => sum + column.units, 0)
+    );
+    const track = React.useRef(null);
+    const drag = React.useRef(null);
+    const [preview, setPreview] = React.useState(null);
+    const deltaAt = (x) => drag.current ? Math.round((x - drag.current.x) * units * drag.current.direction / drag.current.width) : 0;
+    const cancel = () => {
+      drag.current = null;
+      setPreview(null);
+    };
+    const complete = (event) => {
+      const current = drag.current;
+      if (!current) return;
+      const row = rows.find((row2) => row2.id === current.id);
+      const delta = deltaAt(event.clientX);
+      cancel();
+      if (!row) return;
+      const bounded = current.edge === "start" ? Math.min(delta, row.end - row.start) : Math.max(delta, row.start - row.end);
+      if (bounded) onRangeChange?.(row.id, current.edge, bounded);
+    };
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ...props,
+        ref,
+        className: cn("ui-range-timeline", className),
+        "aria-label": label,
+        tabIndex: 0,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "ui-range-timeline-canvas",
+            style: { "--range-timeline-columns": Math.max(1, columns.length) },
+            children: [
+              bands && bands.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
+                /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", children: bands.map((band, index) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "ui-range-timeline-column",
+                    style: { flex: band.units },
+                    children: /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", children: band.label })
+                  },
+                  index
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
+                /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: /* @__PURE__ */ jsx(Text, { weight: "bold", children: label }) }),
+                /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", ref: track, children: columns.map((column, index) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "ui-range-timeline-column",
+                    style: { flex: column.units },
+                    children: /* @__PURE__ */ jsx(Text, { size: "xs", children: column.label })
+                  },
+                  index
+                )) })
+              ] }),
+              rows.map((row) => {
+                const delta = preview?.id === row.id ? preview.delta : 0;
+                const start = Math.min(row.end, row.start + (preview?.edge === "start" ? delta : 0));
+                const end = Math.max(row.start, row.end + (preview?.edge === "end" ? delta : 0));
+                const left = Math.max(0, start), right = Math.min(units, end + 1);
+                return /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-row", children: [
+                  /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: row.label }),
+                  /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
+                    today != null && today >= 0 && today < units && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "ui-range-timeline-today",
+                        style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
+                      }
+                    ),
+                    right <= left && /* @__PURE__ */ jsx(Text, { tone: "muted", children: t("rangeTimeline.outsideRange") }),
+                    right > left && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "ui-range-timeline-bar",
+                        style: {
+                          insetInlineStart: `${left / units * 100}%`,
+                          inlineSize: `${(right - left) / units * 100}%`
+                        },
+                        children: onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
+                          (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
+                        ).map((edge) => /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "icon-xs",
+                            className: "ui-range-timeline-handle",
+                            "data-edge": edge,
+                            "aria-label": edge === "start" ? row.startLabel : row.endLabel,
+                            onPointerDown: (event) => {
+                              const width = track.current?.getBoundingClientRect().width ?? 0;
+                              if (!width || event.button !== 0) return;
+                              event.currentTarget.setPointerCapture(event.pointerId);
+                              drag.current = {
+                                id: row.id,
+                                edge,
+                                x: event.clientX,
+                                width,
+                                direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+                              };
+                            },
+                            onPointerMove: (event) => {
+                              if (drag.current)
+                                setPreview({
+                                  id: drag.current.id,
+                                  edge: drag.current.edge,
+                                  delta: deltaAt(event.clientX)
+                                });
+                            },
+                            onPointerUp: complete,
+                            onPointerCancel: cancel,
+                            onLostPointerCapture: cancel,
+                            onKeyDown: (event) => {
+                              if (event.key === "Escape") {
+                                cancel();
+                                return;
+                              }
+                              const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+                              if (!step) return;
+                              event.preventDefault();
+                              const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+                              const delta2 = step * direction;
+                              if (edge === "start" ? row.start + delta2 <= row.end : row.end + delta2 >= row.start)
+                                onRangeChange(row.id, edge, delta2);
+                            },
+                            children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+                          },
+                          edge
+                        ))
+                      }
+                    )
+                  ] })
+                ] }, row.id);
+              })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  RangeTimeline
+};

package/dist/components/data-display/scroll-area.js

@@ -113,7 +113,16 @@ function useBottomAnchor(viewport, enabled, offset, onAnchoredChange) {
   }, [viewport, enabled, offset]);
 }
 const ScrollArea = React.forwardRef(
-  ({ className, children, viewportRef, anchor = "none", anchorOffset, onAnchoredChange, ...props }, ref) => {
+  ({
+    className,
+    children,
+    viewportRef,
+    anchor = "none",
+    anchorOffset,
+    onAnchoredChange,
+    orientation = "vertical",
+    ...props
+  }, ref) => {
     const [viewport, setViewport] = React.useState(null);
     const attachViewport = React.useCallback(
       (node) => {
@@ -139,11 +148,13 @@ const ScrollArea = React.forwardRef(
               tabIndex: 0,
               "data-slot": "scroll-area-viewport",
               "data-anchor": anchor,
+              "data-orientation": orientation,
               className: "size-full rounded-[inherit]",
               children
             }
           ),
-          /* @__PURE__ */ jsx(ScrollBar, {}),
+          orientation !== "horizontal" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
+          orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
           /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
         ]
       }