@epilot/volt-ui-experimental-griffel 0.1.0-experiment.1

package/dist/components/scroll-overflow/scroll-overflow.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+export type UseScrollOverflowOptions = {
+    /** Scroll distance per step in pixels. Default: 200 */
+    scrollStep?: number;
+    /** Scroll orientation. Default: "horizontal" */
+    orientation?: "horizontal" | "vertical";
+};
+export type UseScrollOverflowReturn = {
+    /** Ref to attach to the scroll container (Base UI Viewport) */
+    scrollRef: React.RefObject<HTMLDivElement | null>;
+    /** Whether the content overflows the container */
+    hasOverflow: boolean;
+    /** Whether there is hidden content before the visible area (left or top) */
+    canScrollStart: boolean;
+    /** Whether there is hidden content after the visible area (right or bottom) */
+    canScrollEnd: boolean;
+    /** Scroll toward the start (left or up) by scrollStep */
+    scrollToStart: () => void;
+    /** Scroll toward the end (right or down) by scrollStep */
+    scrollToEnd: () => void;
+};
+export declare function useScrollOverflow(options?: UseScrollOverflowOptions): UseScrollOverflowReturn;
+export type ScrollOverflowProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root> & UseScrollOverflowOptions & {
+    /** Show navigation arrow buttons on edges. Default: false */
+    arrows?: boolean;
+    /** Show gradient fade indicators on edges. Default: true */
+    gradients?: boolean;
+    /** Gradient width in pixels. Default: 40 */
+    gradientWidth?: number;
+    /** Gradient base color (CSS value). Should match the parent background. Default: "var(--volt-body)" */
+    gradientColor?: string;
+    /** Show inset shadow on overflow edges. Default: true */
+    shadow?: boolean;
+    /** Show a styled scrollbar track. Default: false */
+    scrollbar?: boolean;
+};
+export declare const ScrollOverflow: React.ForwardRefExoticComponent<Omit<ScrollOverflowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-overflow/scroll-overflow.js

@@ -0,0 +1,485 @@
+import { jsxs as E, jsx as l } from "react/jsx-runtime";
+import * as d from "react";
+import { Root as N, Viewport as T, Scrollbar as M, Thumb as O } from "../../node_modules/@radix-ui/react-scroll-area/dist/index.js";
+import { shorthands as w } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as s } from "../../renderer/contract.js";
+import { makeVoltStyles as F } from "../../styles/make-styles.js";
+import { grayA8 as A, accentA8 as W, grayA12 as j, gray1 as G, radiusMd as K, radiusSm as Z } from "../../tokens/index.js";
+import { mergeClasses as h } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+function B() {
+  return typeof window > "u" || !window.matchMedia || window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
+}
+function $(c = {}) {
+  const { scrollStep: m = 200, orientation: H = "horizontal" } = c, f = d.useRef(null), [g, p] = d.useState(!1), [b, x] = d.useState(!1), [C, S] = d.useState(!1), a = H === "horizontal", u = d.useCallback(() => {
+    const r = f.current;
+    if (r)
+      if (a) {
+        const e = Math.round(r.scrollLeft), n = r.scrollWidth, i = r.clientWidth;
+        p(n > i), x(e > 0), S(e + i < n - 1);
+      } else {
+        const e = Math.round(r.scrollTop), n = r.scrollHeight, i = r.clientHeight;
+        p(n > i), x(e > 0), S(e + i < n - 1);
+      }
+  }, [a]);
+  d.useEffect(() => {
+    const r = f.current;
+    if (!r) return;
+    u();
+    let e = null;
+    if (typeof ResizeObserver < "u") {
+      e = new ResizeObserver(() => {
+        u();
+      }), e.observe(r);
+      for (const n of r.children)
+        e.observe(n);
+    }
+    return r.addEventListener("scroll", u, { passive: !0 }), () => {
+      e == null || e.disconnect(), r.removeEventListener("scroll", u);
+    };
+  }, [u]);
+  const y = d.useCallback(() => {
+    var r;
+    (r = f.current) == null || r.scrollBy({
+      [a ? "left" : "top"]: -m,
+      behavior: B()
+    });
+  }, [m, a]), o = d.useCallback(() => {
+    var r;
+    (r = f.current) == null || r.scrollBy({
+      [a ? "left" : "top"]: m,
+      behavior: B()
+    });
+  }, [m, a]);
+  return {
+    scrollRef: f,
+    hasOverflow: g,
+    canScrollStart: b,
+    canScrollEnd: C,
+    scrollToStart: y,
+    scrollToEnd: o
+  };
+}
+const U = (c) => /* @__PURE__ */ l(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    ...c,
+    children: /* @__PURE__ */ l("path", { d: "M 8.86 10.51 C 8.94 10.51 9.02 10.49 9.08 10.43 C 9.14 10.38 9.17 10.3 9.17 10.21 V 5.79 C 9.17 5.7 9.14 5.62 9.08 5.57 C 9.01 5.51 8.94 5.49 8.86 5.49 C 8.84 5.49 8.77 5.52 8.65 5.58 L 6.55 7.68 C 6.5 7.73 6.47 7.78 6.44 7.83 C 6.42 7.88 6.41 7.94 6.41 8 C 6.41 8.06 6.42 8.12 6.44 8.17 C 6.47 8.22 6.5 8.27 6.55 8.32 L 8.65 10.42 C 8.68 10.45 8.71 10.47 8.75 10.49 C 8.78 10.51 8.82 10.51 8.86 10.51 Z" })
+  }
+), P = (c) => /* @__PURE__ */ l(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    ...c,
+    children: /* @__PURE__ */ l("path", { d: "M7.14 10.51C7.06 10.51 6.98 10.49 6.92 10.43C6.86 10.38 6.83 10.3 6.83 10.21V5.79C6.83 5.7 6.86 5.62 6.92 5.57C6.99 5.51 7.06 5.49 7.14 5.49C7.16 5.49 7.23 5.52 7.35 5.58L9.45 7.68C9.5 7.73 9.53 7.78 9.56 7.83C9.58 7.88 9.59 7.94 9.59 8C9.59 8.06 9.58 8.12 9.56 8.17C9.53 8.22 9.5 8.27 9.45 8.32L7.35 10.42C7.32 10.45 7.29 10.47 7.25 10.49C7.22 10.51 7.18 10.51 7.14 10.51Z" })
+  }
+), _ = (c) => /* @__PURE__ */ l(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    ...c,
+    children: /* @__PURE__ */ l("path", { d: "M5.49 7.14C5.49 7.06 5.51 6.98 5.57 6.92C5.62 6.86 5.7 6.83 5.79 6.83H10.21C10.3 6.83 10.38 6.86 10.43 6.92C10.49 6.99 10.51 7.06 10.51 7.14C10.51 7.16 10.48 7.23 10.42 7.35L8.32 9.45C8.27 9.5 8.22 9.53 8.17 9.56C8.12 9.58 8.06 9.59 8 9.59C7.94 9.59 7.88 9.58 7.83 9.56C7.78 9.53 7.73 9.5 7.68 9.45L5.58 7.35C5.55 7.32 5.53 7.29 5.51 7.25C5.49 7.22 5.49 7.18 5.49 7.14Z" })
+  }
+), q = (c) => /* @__PURE__ */ l(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    ...c,
+    children: /* @__PURE__ */ l("path", { d: "M10.51 8.86C10.51 8.94 10.49 9.02 10.43 9.08C10.38 9.14 10.3 9.17 10.21 9.17H5.79C5.7 9.17 5.62 9.14 5.57 9.08C5.51 9.01 5.49 8.94 5.49 8.86C5.49 8.84 5.52 8.77 5.58 8.65L7.68 6.55C7.73 6.5 7.78 6.47 7.83 6.44C7.88 6.42 7.94 6.41 8 6.41C8.06 6.41 8.12 6.42 8.17 6.44C8.22 6.47 8.27 6.5 8.32 6.55L10.42 8.65C10.45 8.68 10.47 8.71 10.49 8.75C10.51 8.78 10.51 8.82 10.51 8.86Z" })
+  }
+), J = F({
+  container: {
+    position: "relative",
+    display: "flex"
+  },
+  containerHorizontal: {
+    alignItems: "center"
+  },
+  containerVertical: {
+    flexDirection: "column"
+  },
+  fade: {
+    position: "absolute",
+    zIndex: 10,
+    pointerEvents: "none"
+  },
+  fadeHorizontalStart: {
+    left: 0,
+    top: 0,
+    bottom: 0
+  },
+  fadeHorizontalEnd: {
+    right: 0,
+    top: 0,
+    bottom: 0
+  },
+  fadeVerticalStart: {
+    top: 0,
+    left: 0,
+    right: 0
+  },
+  fadeVerticalEnd: {
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  shadowHorizontalStart: {
+    boxShadow: "inset 8px 0 6px -6px rgba(0,0,0,0.08)"
+  },
+  shadowHorizontalEnd: {
+    boxShadow: "inset -8px 0 6px -6px rgba(0,0,0,0.08)"
+  },
+  shadowVerticalStart: {
+    boxShadow: "inset 0 8px 6px -6px rgba(0,0,0,0.08)"
+  },
+  shadowVerticalEnd: {
+    boxShadow: "inset 0 -8px 6px -6px rgba(0,0,0,0.08)"
+  },
+  arrowButton: {
+    position: "absolute",
+    zIndex: 20,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    ...w.borderStyle("none"),
+    ...w.borderWidth(0),
+    ...w.padding(0)
+  },
+  arrowHorizontalStart: {
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: "1.5rem"
+  },
+  arrowHorizontalEnd: {
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: "1.5rem"
+  },
+  arrowVerticalStart: {
+    top: 0,
+    left: 0,
+    right: 0,
+    height: "1.5rem"
+  },
+  arrowVerticalEnd: {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: "1.5rem"
+  },
+  arrowBadge: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: A,
+    ...w.borderRadius(Z),
+    backdropFilter: "blur(4px)",
+    color: G,
+    ":hover": {
+      backgroundColor: j
+    }
+  },
+  arrowIcon: {
+    width: "1rem",
+    height: "1rem"
+  },
+  scrollAreaRoot: {
+    ...w.overflow("hidden"),
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%"
+  },
+  scrollAreaRootHorizontal: {
+    minWidth: 0
+  },
+  scrollAreaRootVertical: {
+    minHeight: 0,
+    display: "flex",
+    flexDirection: "column"
+  },
+  scrollAreaRootScrollbarHorizontal: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  scrollAreaRootScrollbarVertical: {
+    display: "flex",
+    flexDirection: "row"
+  },
+  viewport: {
+    ...w.borderRadius(K),
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineOffset: "2px",
+      outlineStyle: "solid",
+      outlineColor: W
+    }
+  },
+  viewportHorizontal: {
+    "& > div": {
+      display: "flex",
+      flexDirection: "row"
+    }
+  },
+  viewportVertical: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    minHeight: 0
+  },
+  viewportFlex: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%"
+  },
+  scrollbar: {
+    position: "relative",
+    display: "flex",
+    touchAction: "none",
+    userSelect: "none",
+    ...w.padding("1px"),
+    transitionProperty: "color, background-color, border-color",
+    transitionDuration: "150ms"
+  },
+  scrollbarHidden: {
+    display: "none"
+  },
+  scrollbarHorizontal: {
+    height: "0.5rem",
+    flexDirection: "column"
+  },
+  scrollbarVertical: {
+    width: "0.5rem",
+    flexDirection: "row"
+  },
+  thumb: {
+    position: "relative",
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    ...w.borderRadius("9999px"),
+    backgroundColor: A
+  }
+}), eo = d.forwardRef(function({
+  className: m,
+  children: H,
+  arrows: f = !1,
+  gradients: g = !0,
+  gradientWidth: p = 40,
+  gradientColor: b = "var(--volt-body)",
+  shadow: x = !0,
+  scrollbar: C = !1,
+  scrollStep: S,
+  orientation: a = "horizontal",
+  ...u
+}, y) {
+  const o = J(), {
+    scrollRef: r,
+    hasOverflow: e,
+    canScrollStart: n,
+    canScrollEnd: i,
+    scrollToStart: z,
+    scrollToEnd: V
+  } = $({ scrollStep: S, orientation: a }), t = a === "horizontal", I = (v) => {
+    var k, R;
+    if (v.target !== v.currentTarget) return;
+    const D = t ? "ArrowLeft" : "ArrowUp", L = t ? "ArrowRight" : "ArrowDown";
+    switch (v.key) {
+      case D:
+        v.preventDefault(), z();
+        break;
+      case L:
+        v.preventDefault(), V();
+        break;
+      case "Home":
+        v.preventDefault(), (k = r.current) == null || k.scrollTo({
+          [t ? "left" : "top"]: 0,
+          behavior: "smooth"
+        });
+        break;
+      case "End":
+        v.preventDefault(), (R = r.current) == null || R.scrollTo({
+          [t ? "left" : "top"]: t ? r.current.scrollWidth : r.current.scrollHeight,
+          behavior: "smooth"
+        });
+        break;
+    }
+  };
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      ref: y,
+      "data-slot": "scroll-overflow",
+      [s]: "scroll-overflow",
+      "data-orientation": a,
+      "data-has-overflow": e || void 0,
+      "data-can-scroll-start": n || void 0,
+      "data-can-scroll-end": i || void 0,
+      className: h(
+        o.container,
+        t ? o.containerHorizontal : o.containerVertical,
+        m
+      ),
+      children: [
+        g && n && /* @__PURE__ */ l(
+          "div",
+          {
+            "data-slot": "scroll-overflow-fade-start",
+            [s]: "scroll-overflow-fade-start",
+            "aria-hidden": "true",
+            className: h(
+              o.fade,
+              t ? o.fadeHorizontalStart : o.fadeVerticalStart,
+              x && (t ? o.shadowHorizontalStart : o.shadowVerticalStart)
+            ),
+            style: t ? {
+              width: p,
+              background: `linear-gradient(to right, ${b}, transparent)`
+            } : {
+              height: p,
+              background: `linear-gradient(to bottom, ${b}, transparent)`
+            }
+          }
+        ),
+        f && n && /* @__PURE__ */ l(
+          "button",
+          {
+            "data-slot": "scroll-overflow-arrow-start",
+            [s]: "scroll-overflow-arrow-start",
+            type: "button",
+            tabIndex: -1,
+            "aria-label": t ? "Scroll left" : "Scroll up",
+            onClick: z,
+            className: h(
+              o.arrowButton,
+              t ? o.arrowHorizontalStart : o.arrowVerticalStart
+            ),
+            children: /* @__PURE__ */ l(
+              "span",
+              {
+                "data-slot": "scroll-overflow-arrow-icon",
+                [s]: "scroll-overflow-arrow-icon",
+                className: o.arrowBadge,
+                children: t ? /* @__PURE__ */ l(U, { className: o.arrowIcon }) : /* @__PURE__ */ l(_, { className: o.arrowIcon })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ E(
+          N,
+          {
+            "data-slot": "scroll-overflow-root",
+            type: "scroll",
+            [s]: "scroll-overflow-root",
+            className: h(
+              o.scrollAreaRoot,
+              t ? o.scrollAreaRootHorizontal : o.scrollAreaRootVertical,
+              C && (t ? o.scrollAreaRootScrollbarHorizontal : o.scrollAreaRootScrollbarVertical)
+            ),
+            ...u,
+            children: [
+              /* @__PURE__ */ l(
+                T,
+                {
+                  ref: r,
+                  "data-slot": "scroll-overflow-viewport",
+                  [s]: "scroll-overflow-viewport",
+                  tabIndex: e ? 0 : void 0,
+                  onKeyDown: I,
+                  className: h(
+                    o.viewport,
+                    t && o.viewportHorizontal,
+                    C && o.viewportFlex,
+                    !t && o.viewportVertical
+                  ),
+                  children: H
+                }
+              ),
+              /* @__PURE__ */ l(
+                M,
+                {
+                  forceMount: !0,
+                  orientation: a,
+                  "data-slot": "scroll-overflow-scrollbar",
+                  [s]: "scroll-overflow-scrollbar",
+                  className: h(
+                    C ? o.scrollbar : o.scrollbarHidden,
+                    t ? o.scrollbarHorizontal : o.scrollbarVertical
+                  ),
+                  children: /* @__PURE__ */ l(
+                    O,
+                    {
+                      "data-slot": "scroll-overflow-thumb",
+                      [s]: "scroll-overflow-thumb",
+                      className: o.thumb
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        g && i && /* @__PURE__ */ l(
+          "div",
+          {
+            "data-slot": "scroll-overflow-fade-end",
+            [s]: "scroll-overflow-fade-end",
+            "aria-hidden": "true",
+            className: h(
+              o.fade,
+              t ? o.fadeHorizontalEnd : o.fadeVerticalEnd,
+              x && (t ? o.shadowHorizontalEnd : o.shadowVerticalEnd)
+            ),
+            style: t ? {
+              width: p,
+              background: `linear-gradient(to left, ${b}, transparent)`
+            } : {
+              height: p,
+              background: `linear-gradient(to top, ${b}, transparent)`
+            }
+          }
+        ),
+        f && i && /* @__PURE__ */ l(
+          "button",
+          {
+            "data-slot": "scroll-overflow-arrow-end",
+            [s]: "scroll-overflow-arrow-end",
+            type: "button",
+            tabIndex: -1,
+            "aria-label": t ? "Scroll right" : "Scroll down",
+            onClick: V,
+            className: h(
+              o.arrowButton,
+              t ? o.arrowHorizontalEnd : o.arrowVerticalEnd
+            ),
+            children: /* @__PURE__ */ l(
+              "span",
+              {
+                "data-slot": "scroll-overflow-arrow-icon",
+                [s]: "scroll-overflow-arrow-icon",
+                className: o.arrowBadge,
+                children: t ? /* @__PURE__ */ l(P, { className: o.arrowIcon }) : /* @__PURE__ */ l(q, { className: o.arrowIcon })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  eo as ScrollOverflow,
+  $ as useScrollOverflow
+};
+//# sourceMappingURL=scroll-overflow.js.map

package/dist/components/scroll-overflow/scroll-overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-overflow.js","sources":["../../../src/components/scroll-overflow/scroll-overflow.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nexport type UseScrollOverflowOptions = {\n  /** Scroll distance per step in pixels. Default: 200 */\n  scrollStep?: number\n  /** Scroll orientation. Default: \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nexport type UseScrollOverflowReturn = {\n  /** Ref to attach to the scroll container (Base UI Viewport) */\n  scrollRef: React.RefObject<HTMLDivElement | null>\n  /** Whether the content overflows the container */\n  hasOverflow: boolean\n  /** Whether there is hidden content before the visible area (left or top) */\n  canScrollStart: boolean\n  /** Whether there is hidden content after the visible area (right or bottom) */\n  canScrollEnd: boolean\n  /** Scroll toward the start (left or up) by scrollStep */\n  scrollToStart: () => void\n  /** Scroll toward the end (right or down) by scrollStep */\n  scrollToEnd: () => void\n}\n\nfunction getScrollBehavior(): ScrollBehavior {\n  if (typeof window === \"undefined\" || !window.matchMedia) return \"auto\"\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n    ? \"auto\"\n    : \"smooth\"\n}\n\nexport function useScrollOverflow(\n  options: UseScrollOverflowOptions = {}\n): UseScrollOverflowReturn {\n  const { scrollStep = 200, orientation = \"horizontal\" } = options\n  const scrollRef = React.useRef<HTMLDivElement | null>(null)\n  const [hasOverflow, setHasOverflow] = React.useState(false)\n  const [canScrollStart, setCanScrollStart] = React.useState(false)\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false)\n\n  const isHorizontal = orientation === \"horizontal\"\n\n  const updateScrollState = React.useCallback(() => {\n    const el = scrollRef.current\n    if (!el) return\n\n    if (isHorizontal) {\n      const scrollLeft = Math.round(el.scrollLeft)\n      const scrollWidth = el.scrollWidth\n      const clientWidth = el.clientWidth\n\n      setHasOverflow(scrollWidth > clientWidth)\n      setCanScrollStart(scrollLeft > 0)\n      setCanScrollEnd(scrollLeft + clientWidth < scrollWidth - 1)\n    } else {\n      const scrollTop = Math.round(el.scrollTop)\n      const scrollHeight = el.scrollHeight\n      const clientHeight = el.clientHeight\n\n      setHasOverflow(scrollHeight > clientHeight)\n      setCanScrollStart(scrollTop > 0)\n      setCanScrollEnd(scrollTop + clientHeight < scrollHeight - 1)\n    }\n  }, [isHorizontal])\n\n  React.useEffect(() => {\n    const el = scrollRef.current\n    if (!el) return\n\n    updateScrollState()\n\n    let observer: ResizeObserver | null = null\n    if (typeof ResizeObserver !== \"undefined\") {\n      observer = new ResizeObserver(() => {\n        updateScrollState()\n      })\n      observer.observe(el)\n      for (const child of el.children) {\n        observer.observe(child)\n      }\n    }\n\n    el.addEventListener(\"scroll\", updateScrollState, { passive: true })\n\n    return () => {\n      observer?.disconnect()\n      el.removeEventListener(\"scroll\", updateScrollState)\n    }\n  }, [updateScrollState])\n\n  const scrollToStartFn = React.useCallback(() => {\n    scrollRef.current?.scrollBy({\n      [isHorizontal ? \"left\" : \"top\"]: -scrollStep,\n      behavior: getScrollBehavior(),\n    })\n  }, [scrollStep, isHorizontal])\n\n  const scrollToEndFn = React.useCallback(() => {\n    scrollRef.current?.scrollBy({\n      [isHorizontal ? \"left\" : \"top\"]: scrollStep,\n      behavior: getScrollBehavior(),\n    })\n  }, [scrollStep, isHorizontal])\n\n  return {\n    scrollRef,\n    hasOverflow,\n    canScrollStart,\n    canScrollEnd,\n    scrollToStart: scrollToStartFn,\n    scrollToEnd: scrollToEndFn,\n  }\n}\n\nconst ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M 8.86 10.51 C 8.94 10.51 9.02 10.49 9.08 10.43 C 9.14 10.38 9.17 10.3 9.17 10.21 V 5.79 C 9.17 5.7 9.14 5.62 9.08 5.57 C 9.01 5.51 8.94 5.49 8.86 5.49 C 8.84 5.49 8.77 5.52 8.65 5.58 L 6.55 7.68 C 6.5 7.73 6.47 7.78 6.44 7.83 C 6.42 7.88 6.41 7.94 6.41 8 C 6.41 8.06 6.42 8.12 6.44 8.17 C 6.47 8.22 6.5 8.27 6.55 8.32 L 8.65 10.42 C 8.68 10.45 8.71 10.47 8.75 10.49 C 8.78 10.51 8.82 10.51 8.86 10.51 Z\" />\n  </svg>\n)\n\nconst ChevronRightIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M7.14 10.51C7.06 10.51 6.98 10.49 6.92 10.43C6.86 10.38 6.83 10.3 6.83 10.21V5.79C6.83 5.7 6.86 5.62 6.92 5.57C6.99 5.51 7.06 5.49 7.14 5.49C7.16 5.49 7.23 5.52 7.35 5.58L9.45 7.68C9.5 7.73 9.53 7.78 9.56 7.83C9.58 7.88 9.59 7.94 9.59 8C9.59 8.06 9.58 8.12 9.56 8.17C9.53 8.22 9.5 8.27 9.45 8.32L7.35 10.42C7.32 10.45 7.29 10.47 7.25 10.49C7.22 10.51 7.18 10.51 7.14 10.51Z\" />\n  </svg>\n)\n\nconst ChevronUpIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M5.49 7.14C5.49 7.06 5.51 6.98 5.57 6.92C5.62 6.86 5.7 6.83 5.79 6.83H10.21C10.3 6.83 10.38 6.86 10.43 6.92C10.49 6.99 10.51 7.06 10.51 7.14C10.51 7.16 10.48 7.23 10.42 7.35L8.32 9.45C8.27 9.5 8.22 9.53 8.17 9.56C8.12 9.58 8.06 9.59 8 9.59C7.94 9.59 7.88 9.58 7.83 9.56C7.78 9.53 7.73 9.5 7.68 9.45L5.58 7.35C5.55 7.32 5.53 7.29 5.51 7.25C5.49 7.22 5.49 7.18 5.49 7.14Z\" />\n  </svg>\n)\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M10.51 8.86C10.51 8.94 10.49 9.02 10.43 9.08C10.38 9.14 10.3 9.17 10.21 9.17H5.79C5.7 9.17 5.62 9.14 5.57 9.08C5.51 9.01 5.49 8.94 5.49 8.86C5.49 8.84 5.52 8.77 5.58 8.65L7.68 6.55C7.73 6.5 7.78 6.47 7.83 6.44C7.88 6.42 7.94 6.41 8 6.41C8.06 6.41 8.12 6.42 8.17 6.44C8.22 6.47 8.27 6.5 8.32 6.55L10.42 8.65C10.45 8.68 10.47 8.71 10.49 8.75C10.51 8.78 10.51 8.82 10.51 8.86Z\" />\n  </svg>\n)\n\nconst useStyles = makeVoltStyles({\n  container: {\n    position: \"relative\",\n    display: \"flex\",\n  },\n  containerHorizontal: {\n    alignItems: \"center\",\n  },\n  containerVertical: {\n    flexDirection: \"column\",\n  },\n  fade: {\n    position: \"absolute\",\n    zIndex: 10,\n    pointerEvents: \"none\",\n  },\n  fadeHorizontalStart: {\n    left: 0,\n    top: 0,\n    bottom: 0,\n  },\n  fadeHorizontalEnd: {\n    right: 0,\n    top: 0,\n    bottom: 0,\n  },\n  fadeVerticalStart: {\n    top: 0,\n    left: 0,\n    right: 0,\n  },\n  fadeVerticalEnd: {\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n  shadowHorizontalStart: {\n    boxShadow: \"inset 8px 0 6px -6px rgba(0,0,0,0.08)\",\n  },\n  shadowHorizontalEnd: {\n    boxShadow: \"inset -8px 0 6px -6px rgba(0,0,0,0.08)\",\n  },\n  shadowVerticalStart: {\n    boxShadow: \"inset 0 8px 6px -6px rgba(0,0,0,0.08)\",\n  },\n  shadowVerticalEnd: {\n    boxShadow: \"inset 0 -8px 6px -6px rgba(0,0,0,0.08)\",\n  },\n  arrowButton: {\n    position: \"absolute\",\n    zIndex: 20,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    ...shorthands.padding(0),\n  },\n  arrowHorizontalStart: {\n    left: 0,\n    top: 0,\n    bottom: 0,\n    width: \"1.5rem\",\n  },\n  arrowHorizontalEnd: {\n    right: 0,\n    top: 0,\n    bottom: 0,\n    width: \"1.5rem\",\n  },\n  arrowVerticalStart: {\n    top: 0,\n    left: 0,\n    right: 0,\n    height: \"1.5rem\",\n  },\n  arrowVerticalEnd: {\n    bottom: 0,\n    left: 0,\n    right: 0,\n    height: \"1.5rem\",\n  },\n  arrowBadge: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    backgroundColor: tokens.grayA8,\n    ...shorthands.borderRadius(tokens.radiusSm),\n    backdropFilter: \"blur(4px)\",\n    color: tokens.gray1,\n    \":hover\": {\n      backgroundColor: tokens.grayA12,\n    },\n  },\n  arrowIcon: {\n    width: \"1rem\",\n    height: \"1rem\",\n  },\n  scrollAreaRoot: {\n    ...shorthands.overflow(\"hidden\"),\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  scrollAreaRootHorizontal: {\n    minWidth: 0,\n  },\n  scrollAreaRootVertical: {\n    minHeight: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  scrollAreaRootScrollbarHorizontal: {\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  scrollAreaRootScrollbarVertical: {\n    display: \"flex\",\n    flexDirection: \"row\",\n  },\n  viewport: {\n    ...shorthands.borderRadius(tokens.radiusMd),\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  viewportHorizontal: {\n    \"& > div\": {\n      display: \"flex\",\n      flexDirection: \"row\",\n    },\n  },\n  viewportVertical: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minHeight: 0,\n  },\n  viewportFlex: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  scrollbar: {\n    position: \"relative\",\n    display: \"flex\",\n    touchAction: \"none\",\n    userSelect: \"none\",\n    ...shorthands.padding(\"1px\"),\n    transitionProperty: \"color, background-color, border-color\",\n    transitionDuration: \"150ms\",\n  },\n  scrollbarHidden: {\n    display: \"none\",\n  },\n  scrollbarHorizontal: {\n    height: \"0.5rem\",\n    flexDirection: \"column\",\n  },\n  scrollbarVertical: {\n    width: \"0.5rem\",\n    flexDirection: \"row\",\n  },\n  thumb: {\n    position: \"relative\",\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: tokens.grayA8,\n  },\n})\n\nexport type ScrollOverflowProps = React.ComponentProps<\n  typeof ScrollAreaPrimitive.Root\n> &\n  UseScrollOverflowOptions & {\n    /** Show navigation arrow buttons on edges. Default: false */\n    arrows?: boolean\n    /** Show gradient fade indicators on edges. Default: true */\n    gradients?: boolean\n    /** Gradient width in pixels. Default: 40 */\n    gradientWidth?: number\n    /** Gradient base color (CSS value). Should match the parent background. Default: \"var(--volt-body)\" */\n    gradientColor?: string\n    /** Show inset shadow on overflow edges. Default: true */\n    shadow?: boolean\n    /** Show a styled scrollbar track. Default: false */\n    scrollbar?: boolean\n  }\n\nexport const ScrollOverflow = React.forwardRef<\n  HTMLDivElement,\n  ScrollOverflowProps\n>(function ScrollOverflow(\n  {\n    className,\n    children,\n    arrows = false,\n    gradients = true,\n    gradientWidth = 40,\n    gradientColor = \"var(--volt-body)\",\n    shadow = true,\n    scrollbar = false,\n    scrollStep,\n    orientation = \"horizontal\",\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    scrollRef,\n    hasOverflow,\n    canScrollStart,\n    canScrollEnd,\n    scrollToStart,\n    scrollToEnd,\n  } = useScrollOverflow({ scrollStep, orientation })\n\n  const isHorizontal = orientation === \"horizontal\"\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    // Only handle when the viewport itself is focused, not children\n    if (e.target !== e.currentTarget) return\n\n    const prevKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\"\n    const nextKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\"\n\n    switch (e.key) {\n      case prevKey:\n        e.preventDefault()\n        scrollToStart()\n        break\n      case nextKey:\n        e.preventDefault()\n        scrollToEnd()\n        break\n      case \"Home\":\n        e.preventDefault()\n        scrollRef.current?.scrollTo({\n          [isHorizontal ? \"left\" : \"top\"]: 0,\n          behavior: \"smooth\",\n        })\n        break\n      case \"End\":\n        e.preventDefault()\n        scrollRef.current?.scrollTo({\n          [isHorizontal ? \"left\" : \"top\"]: isHorizontal\n            ? scrollRef.current.scrollWidth\n            : scrollRef.current.scrollHeight,\n          behavior: \"smooth\",\n        })\n        break\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"scroll-overflow\"\n      {...{ [SLOT_ATTR]: \"scroll-overflow\" }}\n      data-orientation={orientation}\n      data-has-overflow={hasOverflow || undefined}\n      data-can-scroll-start={canScrollStart || undefined}\n      data-can-scroll-end={canScrollEnd || undefined}\n      className={mergeClasses(\n        styles.container,\n        isHorizontal ? styles.containerHorizontal : styles.containerVertical,\n        className\n      )}\n    >\n      {/* Start gradient + shadow */}\n      {gradients && canScrollStart && (\n        <div\n          data-slot=\"scroll-overflow-fade-start\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-fade-start\" }}\n          aria-hidden=\"true\"\n          className={mergeClasses(\n            styles.fade,\n            isHorizontal\n              ? styles.fadeHorizontalStart\n              : styles.fadeVerticalStart,\n            shadow &&\n              (isHorizontal\n                ? styles.shadowHorizontalStart\n                : styles.shadowVerticalStart)\n          )}\n          style={\n            isHorizontal\n              ? {\n                  width: gradientWidth,\n                  background: `linear-gradient(to right, ${gradientColor}, transparent)`,\n                }\n              : {\n                  height: gradientWidth,\n                  background: `linear-gradient(to bottom, ${gradientColor}, transparent)`,\n                }\n          }\n        />\n      )}\n\n      {/* Start arrow button */}\n      {arrows && canScrollStart && (\n        <button\n          data-slot=\"scroll-overflow-arrow-start\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-start\" }}\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isHorizontal ? \"Scroll left\" : \"Scroll up\"}\n          onClick={scrollToStart}\n          className={mergeClasses(\n            styles.arrowButton,\n            isHorizontal\n              ? styles.arrowHorizontalStart\n              : styles.arrowVerticalStart\n          )}\n        >\n          <span\n            data-slot=\"scroll-overflow-arrow-icon\"\n            {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-icon\" }}\n            className={styles.arrowBadge}\n          >\n            {isHorizontal ? (\n              <ChevronLeftIcon className={styles.arrowIcon} />\n            ) : (\n              <ChevronUpIcon className={styles.arrowIcon} />\n            )}\n          </span>\n        </button>\n      )}\n\n      {/* Radix ScrollArea */}\n      <ScrollAreaPrimitive.Root\n        data-slot=\"scroll-overflow-root\"\n        type=\"scroll\"\n        {...{ [SLOT_ATTR]: \"scroll-overflow-root\" }}\n        className={mergeClasses(\n          styles.scrollAreaRoot,\n          isHorizontal\n            ? styles.scrollAreaRootHorizontal\n            : styles.scrollAreaRootVertical,\n          scrollbar &&\n            (isHorizontal\n              ? styles.scrollAreaRootScrollbarHorizontal\n              : styles.scrollAreaRootScrollbarVertical)\n        )}\n        {...props}\n      >\n        <ScrollAreaPrimitive.Viewport\n          ref={scrollRef}\n          data-slot=\"scroll-overflow-viewport\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-viewport\" }}\n          tabIndex={hasOverflow ? 0 : undefined}\n          onKeyDown={handleKeyDown}\n          className={mergeClasses(\n            styles.viewport,\n            isHorizontal && styles.viewportHorizontal,\n            scrollbar && styles.viewportFlex,\n            !isHorizontal && styles.viewportVertical\n          )}\n        >\n          {children}\n        </ScrollAreaPrimitive.Viewport>\n\n        <ScrollAreaPrimitive.Scrollbar\n          forceMount\n          orientation={orientation}\n          data-slot=\"scroll-overflow-scrollbar\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-scrollbar\" }}\n          className={mergeClasses(\n            scrollbar ? styles.scrollbar : styles.scrollbarHidden,\n            isHorizontal ? styles.scrollbarHorizontal : styles.scrollbarVertical\n          )}\n        >\n          <ScrollAreaPrimitive.Thumb\n            data-slot=\"scroll-overflow-thumb\"\n            {...{ [SLOT_ATTR]: \"scroll-overflow-thumb\" }}\n            className={styles.thumb}\n          />\n        </ScrollAreaPrimitive.Scrollbar>\n      </ScrollAreaPrimitive.Root>\n\n      {/* End gradient + shadow */}\n      {gradients && canScrollEnd && (\n        <div\n          data-slot=\"scroll-overflow-fade-end\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-fade-end\" }}\n          aria-hidden=\"true\"\n          className={mergeClasses(\n            styles.fade,\n            isHorizontal ? styles.fadeHorizontalEnd : styles.fadeVerticalEnd,\n            shadow &&\n              (isHorizontal\n                ? styles.shadowHorizontalEnd\n                : styles.shadowVerticalEnd)\n          )}\n          style={\n            isHorizontal\n              ? {\n                  width: gradientWidth,\n                  background: `linear-gradient(to left, ${gradientColor}, transparent)`,\n                }\n              : {\n                  height: gradientWidth,\n                  background: `linear-gradient(to top, ${gradientColor}, transparent)`,\n                }\n          }\n        />\n      )}\n\n      {/* End arrow button */}\n      {arrows && canScrollEnd && (\n        <button\n          data-slot=\"scroll-overflow-arrow-end\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-end\" }}\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isHorizontal ? \"Scroll right\" : \"Scroll down\"}\n          onClick={scrollToEnd}\n          className={mergeClasses(\n            styles.arrowButton,\n            isHorizontal ? styles.arrowHorizontalEnd : styles.arrowVerticalEnd\n          )}\n        >\n          <span\n            data-slot=\"scroll-overflow-arrow-icon\"\n            {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-icon\" }}\n            className={styles.arrowBadge}\n          >\n            {isHorizontal ? (\n              <ChevronRightIcon className={styles.arrowIcon} />\n            ) : (\n              <ChevronDownIcon className={styles.arrowIcon} />\n            )}\n          </span>\n        </button>\n      )}\n    </div>\n  )\n})\n"],"names":["getScrollBehavior","useScrollOverflow","options","scrollStep","orientation","scrollRef","React","hasOverflow","setHasOverflow","canScrollStart","setCanScrollStart","canScrollEnd","setCanScrollEnd","isHorizontal","updateScrollState","el","scrollLeft","scrollWidth","clientWidth","scrollTop","scrollHeight","clientHeight","observer","child","scrollToStartFn","_a","scrollToEndFn","ChevronLeftIcon","props","jsx","ChevronRightIcon","ChevronUpIcon","ChevronDownIcon","useStyles","makeVoltStyles","shorthands","tokens.grayA8","tokens.radiusSm","tokens.gray1","tokens.grayA12","tokens.radiusMd","tokens.accentA8","ScrollOverflow","className","children","arrows","gradients","gradientWidth","gradientColor","shadow","scrollbar","ref","styles","scrollToStart","scrollToEnd","handleKeyDown","e","prevKey","nextKey","_b","jsxs","SLOT_ATTR","mergeClasses","ScrollAreaPrimitive.Root","ScrollAreaPrimitive.Viewport","ScrollAreaPrimitive.Scrollbar","ScrollAreaPrimitive.Thumb"],"mappings":"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"}

package/dist/components/segmented-control/segmented-control.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+export type SegmentedControlLayout = "hug" | "equal" | "stretch";
+export type SegmentedControlProps = React.ComponentProps<typeof RadioGroupPrimitive.Root> & {
+    layout?: SegmentedControlLayout;
+};
+export type SegmentedControlItemProps = React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
+    icon?: React.ReactNode;
+};
+export declare const SegmentedControl: React.ForwardRefExoticComponent<Omit<SegmentedControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<SegmentedControlItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;