@telia/teddy 0.4.4 → 0.4.5

package/dist/components/scroll-area/scroll-area-thumb.cjs

@@ -1,8 +1,253 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("react/jsx-runtime");
-require("react");
-require("clsx");
-require("@radix-ui/react-scroll-area");
-const components_scrollArea_scrollAreaBar = require("./scroll-area-bar.cjs");
-exports.Thumb = components_scrollArea_scrollAreaBar.Thumb;
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const ScrollAreaPrimitive = require("@radix-ui/react-scroll-area");
+const components_button_button = require("../button/button.cjs");
+const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs");
+require("../../assets/sprite.1321fab0-teddy.svg");
+const components_icon_icon = require("../icon/icon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const ScrollAreaPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(ScrollAreaPrimitive);
+const styles = {
+  "teddy-scroll-area": "_teddy-scroll-area_1r6mf_1",
+  "teddy-scroll-area__viewport": "_teddy-scroll-area__viewport_1r6mf_5",
+  "teddy-scroll-area__scrollbar": "_teddy-scroll-area__scrollbar_1r6mf_11",
+  "teddy-scroll-area__scrollbar--hidden": "_teddy-scroll-area__scrollbar--hidden_1r6mf_32",
+  "teddy-scroll-area__thumb": "_teddy-scroll-area__thumb_1r6mf_45",
+  "teddy-scroll-area__corner": "_teddy-scroll-area__corner_1r6mf_62",
+  "teddy-scroll-area__button": "_teddy-scroll-area__button_1r6mf_65",
+  "teddy-scroll-area__button--hidden": "_teddy-scroll-area__button--hidden_1r6mf_93"
+};
+const Thumb = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__thumb`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Thumb.displayName = "Thumb";
+const Scrollbar = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const context = React.useContext(RootContext);
+    const classes = clsx(
+      [styles[`${rootClassName}__scrollbar`]],
+      {
+        [styles[`${rootClassName}__scrollbar--hidden`]]: (context == null ? void 0 : context.variant) === "button"
+      },
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaScrollbar, { ...props, ref: forwardRef, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx(Thumb, {}) });
+  }
+);
+Scrollbar.displayName = "Scrollbar";
+const Corner = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__corner`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Corner.displayName = "Corner";
+const directionToAriaLabel = {
+  up: "Scroll opp",
+  down: "Scroll ned",
+  left: "Scroll til venstre",
+  right: "Scroll til høyre"
+};
+const directionToIconName = {
+  up: "chevron-up",
+  down: "chevron-down",
+  left: "chevron-left",
+  right: "chevron-right"
+};
+const Button = React.forwardRef(
+  ({ className, hidden, direction = "right", children, ...props }, forwardRef) => {
+    const scrollAreaContext = React.useContext(RootContext);
+    const shouldBeHidden = hidden ?? (direction === "up" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollTop) || direction === "down" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollBottom) || direction === "left" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollLeft) || direction === "right" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollRight));
+    const buttonClasses = clsx(
+      styles[`${rootClassName}__button`],
+      {
+        [styles[`${rootClassName}__button--hidden`]]: shouldBeHidden
+      },
+      className
+    );
+    const handleButtonClick = utils_composeEventHandlers.composeEventHandlers(props.onClick, (event) => {
+      if (event.defaultPrevented)
+        return;
+      const scrollAreaElement = scrollAreaContext == null ? void 0 : scrollAreaContext.scrollRef;
+      if (!scrollAreaElement)
+        return;
+      const scrollableItems = Array.from(scrollAreaElement.querySelectorAll("[data-in-view]"));
+      const isHorizontalScroll = direction === "left" || direction === "right";
+      const scrollProperty = isHorizontalScroll ? "left" : "top";
+      const isScrollingBackward = direction === "left" || direction === "up";
+      const currentScrollPosition = isHorizontalScroll ? scrollAreaElement.scrollLeft : scrollAreaElement.scrollTop;
+      const viewportSize = isHorizontalScroll ? scrollAreaElement.clientWidth : scrollAreaElement.clientHeight;
+      const scrollButtonSize = isHorizontalScroll ? event.currentTarget.offsetWidth : event.currentTarget.offsetHeight;
+      const visibleAreaStart = currentScrollPosition + (isScrollingBackward ? scrollButtonSize : 0);
+      const visibleAreaEnd = currentScrollPosition + viewportSize - (!isScrollingBackward ? scrollButtonSize : 0);
+      const getItemBounds = (item) => {
+        const itemStart = isHorizontalScroll ? item.offsetLeft : item.offsetTop;
+        const itemEnd = itemStart + (isHorizontalScroll ? item.offsetWidth : item.offsetHeight);
+        return { itemStart, itemEnd };
+      };
+      const isItemFullyVisible = (item) => {
+        const { itemStart, itemEnd } = getItemBounds(item);
+        return itemStart >= visibleAreaStart && itemEnd <= visibleAreaEnd;
+      };
+      const fullyVisibleItemIndices = scrollableItems.map((item, index) => {
+        const isInView = item.getAttribute("data-in-view") === "true";
+        const isFullyVisible = isItemFullyVisible(item);
+        return isInView && isFullyVisible ? index : -1;
+      }).filter((index) => index !== -1);
+      const userPrefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const scrollBehavior = userPrefersReducedMotion ? "auto" : (scrollAreaContext == null ? void 0 : scrollAreaContext.scrollBehavior) ?? "smooth";
+      function calculateScrollAmount() {
+        if (fullyVisibleItemIndices.length <= 0) {
+          const defaultScrollAmount = viewportSize - scrollButtonSize * 2;
+          return isScrollingBackward ? currentScrollPosition - defaultScrollAmount : currentScrollPosition + defaultScrollAmount;
+        }
+        const isRightToLeft = scrollAreaContext == null ? void 0 : scrollAreaContext.isRtl;
+        const effectiveBackwardDirection = isRightToLeft ? !isScrollingBackward : isScrollingBackward;
+        const referenceItemIndex = effectiveBackwardDirection ? fullyVisibleItemIndices[0] : fullyVisibleItemIndices[fullyVisibleItemIndices.length - 1];
+        const targetItemIndex = effectiveBackwardDirection ? referenceItemIndex > 0 ? referenceItemIndex - 1 : referenceItemIndex : referenceItemIndex < scrollableItems.length - 1 ? referenceItemIndex + 1 : referenceItemIndex;
+        const targetItem = scrollableItems[targetItemIndex];
+        const { itemStart, itemEnd } = getItemBounds(targetItem);
+        const targetItemSize = itemEnd - itemStart;
+        return isScrollingBackward ? itemStart + targetItemSize - viewportSize + scrollButtonSize : itemStart - scrollButtonSize;
+      }
+      const newScrollPosition = calculateScrollAmount();
+      scrollAreaElement.scrollTo({
+        [scrollProperty]: newScrollPosition,
+        behavior: scrollBehavior
+      });
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components_button_button.Button,
+      {
+        iconOnly: true,
+        variant: "primary",
+        "aria-label": directionToAriaLabel[direction],
+        "data-direction": direction,
+        tabIndex: shouldBeHidden ? -1 : void 0,
+        ...props,
+        onClick: handleButtonClick,
+        ref: forwardRef,
+        className: buttonClasses,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: directionToIconName[direction] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+const rootClassName = "teddy-scroll-area";
+const RootContext = React.createContext(void 0);
+function isScrollable(element) {
+  if (!element)
+    return null;
+  const buffer = 1;
+  const scrollLeft = element.scrollLeft;
+  const scrollWidth = element.scrollWidth;
+  const offsetWidth = element.offsetWidth;
+  const maxScrollLeft = scrollWidth - offsetWidth;
+  const isRtl = getComputedStyle(element).direction === "rtl";
+  let left;
+  let right;
+  if (isRtl) {
+    const normalizedScrollLeft = Math.abs(scrollLeft);
+    left = normalizedScrollLeft < maxScrollLeft - buffer;
+    right = normalizedScrollLeft > buffer;
+  } else {
+    left = scrollLeft > buffer;
+    right = scrollLeft < maxScrollLeft - buffer;
+  }
+  const scrollTop = element.scrollTop;
+  const maxScrollTop = element.scrollHeight - element.offsetHeight;
+  const top = scrollTop > buffer;
+  const bottom = scrollTop < maxScrollTop - buffer;
+  return {
+    left,
+    right,
+    top,
+    bottom
+  };
+}
+const Root = React.forwardRef(
+  ({ className, variant, scrollBehavior = "smooth", viewPortClassName, barClassName, children, ...props }, forwardRef) => {
+    const [scrollRef, setScrollRef] = React.useState(null);
+    const [hasScroll, setHasScroll] = React.useState(null);
+    const initialScrollable = isScrollable(scrollRef);
+    const hasScrollLeft = hasScroll ? hasScroll.left : initialScrollable == null ? void 0 : initialScrollable.left;
+    const hasScrollRight = hasScroll ? hasScroll.right : initialScrollable == null ? void 0 : initialScrollable.right;
+    const hasScrollTop = hasScroll ? hasScroll.top : initialScrollable == null ? void 0 : initialScrollable.top;
+    const hasScrollBottom = hasScroll ? hasScroll.bottom : initialScrollable == null ? void 0 : initialScrollable.bottom;
+    const hasScrollHorizontal = hasScrollLeft || hasScrollRight;
+    const hasScrollVertical = hasScrollTop || hasScrollBottom;
+    function handleScroll(e) {
+      const target = e.currentTarget;
+      setHasScroll(isScrollable(target));
+    }
+    const classes = clsx([styles[`${rootClassName}`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RootContext.Provider,
+      {
+        value: {
+          scrollRef,
+          variant,
+          hasScrollTop,
+          hasScrollBottom,
+          hasScrollLeft,
+          hasScrollRight,
+          scrollBehavior,
+          isRtl: props.dir === "rtl"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ScrollAreaPrimitive__namespace.Root, { ...props, ref: forwardRef, className: classes, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ScrollAreaPrimitive__namespace.Viewport,
+            {
+              onScroll: handleScroll,
+              ref: setScrollRef,
+              className: clsx([styles[`${rootClassName}__viewport`]], viewPortClassName),
+              children
+            }
+          ),
+          variant !== "hidden" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Scrollbar, { orientation: "vertical", className: barClassName }),
+            /* @__PURE__ */ jsxRuntime.jsx(Scrollbar, { orientation: "horizontal", className: barClassName })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Corner, {}),
+          variant === "button" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            hasScrollVertical && /* @__PURE__ */ jsxRuntime.jsx(Button, { direction: "up", hidden: !hasScrollTop }),
+            hasScrollVertical && /* @__PURE__ */ jsxRuntime.jsx(Button, { direction: "down", hidden: !hasScrollBottom }),
+            hasScrollHorizontal && /* @__PURE__ */ jsxRuntime.jsx(Button, { direction: "left", hidden: !hasScrollLeft }),
+            hasScrollHorizontal && /* @__PURE__ */ jsxRuntime.jsx(Button, { direction: "right", hidden: !hasScrollRight })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+Root.displayName = "Root";
+exports.Button = Button;
+exports.Corner = Corner;
+exports.Root = Root;
+exports.RootContext = RootContext;
+exports.Scrollbar = Scrollbar;
+exports.Thumb = Thumb;
+exports.rootClassName = rootClassName;
+exports.styles = styles;

package/dist/components/scroll-area/scroll-area-thumb.js

@@ -1,8 +1,236 @@
-import "react/jsx-runtime";
-import "react";
-import "clsx";
-import "@radix-ui/react-scroll-area";
-import { T } from "./scroll-area-bar.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { Button as Button$1 } from "../button/button.js";
+import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
+import "../../assets/sprite.1321fab0-teddy.svg";
+import { Icon } from "../icon/icon.js";
+const styles = {
+  "teddy-scroll-area": "_teddy-scroll-area_1r6mf_1",
+  "teddy-scroll-area__viewport": "_teddy-scroll-area__viewport_1r6mf_5",
+  "teddy-scroll-area__scrollbar": "_teddy-scroll-area__scrollbar_1r6mf_11",
+  "teddy-scroll-area__scrollbar--hidden": "_teddy-scroll-area__scrollbar--hidden_1r6mf_32",
+  "teddy-scroll-area__thumb": "_teddy-scroll-area__thumb_1r6mf_45",
+  "teddy-scroll-area__corner": "_teddy-scroll-area__corner_1r6mf_62",
+  "teddy-scroll-area__button": "_teddy-scroll-area__button_1r6mf_65",
+  "teddy-scroll-area__button--hidden": "_teddy-scroll-area__button--hidden_1r6mf_93"
+};
+const Thumb = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__thumb`]], className);
+    return /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Thumb.displayName = "Thumb";
+const Scrollbar = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const context = React__default.useContext(RootContext);
+    const classes = clsx(
+      [styles[`${rootClassName}__scrollbar`]],
+      {
+        [styles[`${rootClassName}__scrollbar--hidden`]]: (context == null ? void 0 : context.variant) === "button"
+      },
+      className
+    );
+    return /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ...props, ref: forwardRef, className: classes, children: /* @__PURE__ */ jsx(Thumb, {}) });
+  }
+);
+Scrollbar.displayName = "Scrollbar";
+const Corner = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__corner`]], className);
+    return /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Corner.displayName = "Corner";
+const directionToAriaLabel = {
+  up: "Scroll opp",
+  down: "Scroll ned",
+  left: "Scroll til venstre",
+  right: "Scroll til høyre"
+};
+const directionToIconName = {
+  up: "chevron-up",
+  down: "chevron-down",
+  left: "chevron-left",
+  right: "chevron-right"
+};
+const Button = React__default.forwardRef(
+  ({ className, hidden, direction = "right", children, ...props }, forwardRef) => {
+    const scrollAreaContext = React__default.useContext(RootContext);
+    const shouldBeHidden = hidden ?? (direction === "up" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollTop) || direction === "down" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollBottom) || direction === "left" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollLeft) || direction === "right" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollRight));
+    const buttonClasses = clsx(
+      styles[`${rootClassName}__button`],
+      {
+        [styles[`${rootClassName}__button--hidden`]]: shouldBeHidden
+      },
+      className
+    );
+    const handleButtonClick = composeEventHandlers(props.onClick, (event) => {
+      if (event.defaultPrevented)
+        return;
+      const scrollAreaElement = scrollAreaContext == null ? void 0 : scrollAreaContext.scrollRef;
+      if (!scrollAreaElement)
+        return;
+      const scrollableItems = Array.from(scrollAreaElement.querySelectorAll("[data-in-view]"));
+      const isHorizontalScroll = direction === "left" || direction === "right";
+      const scrollProperty = isHorizontalScroll ? "left" : "top";
+      const isScrollingBackward = direction === "left" || direction === "up";
+      const currentScrollPosition = isHorizontalScroll ? scrollAreaElement.scrollLeft : scrollAreaElement.scrollTop;
+      const viewportSize = isHorizontalScroll ? scrollAreaElement.clientWidth : scrollAreaElement.clientHeight;
+      const scrollButtonSize = isHorizontalScroll ? event.currentTarget.offsetWidth : event.currentTarget.offsetHeight;
+      const visibleAreaStart = currentScrollPosition + (isScrollingBackward ? scrollButtonSize : 0);
+      const visibleAreaEnd = currentScrollPosition + viewportSize - (!isScrollingBackward ? scrollButtonSize : 0);
+      const getItemBounds = (item) => {
+        const itemStart = isHorizontalScroll ? item.offsetLeft : item.offsetTop;
+        const itemEnd = itemStart + (isHorizontalScroll ? item.offsetWidth : item.offsetHeight);
+        return { itemStart, itemEnd };
+      };
+      const isItemFullyVisible = (item) => {
+        const { itemStart, itemEnd } = getItemBounds(item);
+        return itemStart >= visibleAreaStart && itemEnd <= visibleAreaEnd;
+      };
+      const fullyVisibleItemIndices = scrollableItems.map((item, index) => {
+        const isInView = item.getAttribute("data-in-view") === "true";
+        const isFullyVisible = isItemFullyVisible(item);
+        return isInView && isFullyVisible ? index : -1;
+      }).filter((index) => index !== -1);
+      const userPrefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const scrollBehavior = userPrefersReducedMotion ? "auto" : (scrollAreaContext == null ? void 0 : scrollAreaContext.scrollBehavior) ?? "smooth";
+      function calculateScrollAmount() {
+        if (fullyVisibleItemIndices.length <= 0) {
+          const defaultScrollAmount = viewportSize - scrollButtonSize * 2;
+          return isScrollingBackward ? currentScrollPosition - defaultScrollAmount : currentScrollPosition + defaultScrollAmount;
+        }
+        const isRightToLeft = scrollAreaContext == null ? void 0 : scrollAreaContext.isRtl;
+        const effectiveBackwardDirection = isRightToLeft ? !isScrollingBackward : isScrollingBackward;
+        const referenceItemIndex = effectiveBackwardDirection ? fullyVisibleItemIndices[0] : fullyVisibleItemIndices[fullyVisibleItemIndices.length - 1];
+        const targetItemIndex = effectiveBackwardDirection ? referenceItemIndex > 0 ? referenceItemIndex - 1 : referenceItemIndex : referenceItemIndex < scrollableItems.length - 1 ? referenceItemIndex + 1 : referenceItemIndex;
+        const targetItem = scrollableItems[targetItemIndex];
+        const { itemStart, itemEnd } = getItemBounds(targetItem);
+        const targetItemSize = itemEnd - itemStart;
+        return isScrollingBackward ? itemStart + targetItemSize - viewportSize + scrollButtonSize : itemStart - scrollButtonSize;
+      }
+      const newScrollPosition = calculateScrollAmount();
+      scrollAreaElement.scrollTo({
+        [scrollProperty]: newScrollPosition,
+        behavior: scrollBehavior
+      });
+    });
+    return /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        iconOnly: true,
+        variant: "primary",
+        "aria-label": directionToAriaLabel[direction],
+        "data-direction": direction,
+        tabIndex: shouldBeHidden ? -1 : void 0,
+        ...props,
+        onClick: handleButtonClick,
+        ref: forwardRef,
+        className: buttonClasses,
+        children: children || /* @__PURE__ */ jsx(Icon, { name: directionToIconName[direction] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+const rootClassName = "teddy-scroll-area";
+const RootContext = React__default.createContext(void 0);
+function isScrollable(element) {
+  if (!element)
+    return null;
+  const buffer = 1;
+  const scrollLeft = element.scrollLeft;
+  const scrollWidth = element.scrollWidth;
+  const offsetWidth = element.offsetWidth;
+  const maxScrollLeft = scrollWidth - offsetWidth;
+  const isRtl = getComputedStyle(element).direction === "rtl";
+  let left;
+  let right;
+  if (isRtl) {
+    const normalizedScrollLeft = Math.abs(scrollLeft);
+    left = normalizedScrollLeft < maxScrollLeft - buffer;
+    right = normalizedScrollLeft > buffer;
+  } else {
+    left = scrollLeft > buffer;
+    right = scrollLeft < maxScrollLeft - buffer;
+  }
+  const scrollTop = element.scrollTop;
+  const maxScrollTop = element.scrollHeight - element.offsetHeight;
+  const top = scrollTop > buffer;
+  const bottom = scrollTop < maxScrollTop - buffer;
+  return {
+    left,
+    right,
+    top,
+    bottom
+  };
+}
+const Root = React__default.forwardRef(
+  ({ className, variant, scrollBehavior = "smooth", viewPortClassName, barClassName, children, ...props }, forwardRef) => {
+    const [scrollRef, setScrollRef] = React__default.useState(null);
+    const [hasScroll, setHasScroll] = React__default.useState(null);
+    const initialScrollable = isScrollable(scrollRef);
+    const hasScrollLeft = hasScroll ? hasScroll.left : initialScrollable == null ? void 0 : initialScrollable.left;
+    const hasScrollRight = hasScroll ? hasScroll.right : initialScrollable == null ? void 0 : initialScrollable.right;
+    const hasScrollTop = hasScroll ? hasScroll.top : initialScrollable == null ? void 0 : initialScrollable.top;
+    const hasScrollBottom = hasScroll ? hasScroll.bottom : initialScrollable == null ? void 0 : initialScrollable.bottom;
+    const hasScrollHorizontal = hasScrollLeft || hasScrollRight;
+    const hasScrollVertical = hasScrollTop || hasScrollBottom;
+    function handleScroll(e) {
+      const target = e.currentTarget;
+      setHasScroll(isScrollable(target));
+    }
+    const classes = clsx([styles[`${rootClassName}`]], className);
+    return /* @__PURE__ */ jsx(
+      RootContext.Provider,
+      {
+        value: {
+          scrollRef,
+          variant,
+          hasScrollTop,
+          hasScrollBottom,
+          hasScrollLeft,
+          hasScrollRight,
+          scrollBehavior,
+          isRtl: props.dir === "rtl"
+        },
+        children: /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ...props, ref: forwardRef, className: classes, children: [
+          /* @__PURE__ */ jsx(
+            ScrollAreaPrimitive.Viewport,
+            {
+              onScroll: handleScroll,
+              ref: setScrollRef,
+              className: clsx([styles[`${rootClassName}__viewport`]], viewPortClassName),
+              children
+            }
+          ),
+          variant !== "hidden" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Scrollbar, { orientation: "vertical", className: barClassName }),
+            /* @__PURE__ */ jsx(Scrollbar, { orientation: "horizontal", className: barClassName })
+          ] }),
+          /* @__PURE__ */ jsx(Corner, {}),
+          variant === "button" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            hasScrollVertical && /* @__PURE__ */ jsx(Button, { direction: "up", hidden: !hasScrollTop }),
+            hasScrollVertical && /* @__PURE__ */ jsx(Button, { direction: "down", hidden: !hasScrollBottom }),
+            hasScrollHorizontal && /* @__PURE__ */ jsx(Button, { direction: "left", hidden: !hasScrollLeft }),
+            hasScrollHorizontal && /* @__PURE__ */ jsx(Button, { direction: "right", hidden: !hasScrollRight })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+Root.displayName = "Root";
 export {
-  T as Thumb
+  Button as B,
+  Corner as C,
+  Root as R,
+  Scrollbar as S,
+  Thumb,
+  RootContext as a,
+  rootClassName as r,
+  styles as s
 };

package/dist/components/tabs/index.d.ts

@@ -24,8 +24,10 @@ export declare const Tabs: import('react').ForwardRefExoticComponent<Omit<Omit<i
         value: string;
     } & import('react').RefAttributes<HTMLDivElement>>;
     Scroll: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-scroll-area').ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-        variant?: ("button" | "scrollbar") | undefined;
+        variant?: ("button" | "hidden" | "scrollbar") | undefined;
         scrollBehavior?: "auto" | "smooth" | undefined;
+        viewPortClassName?: string | undefined;
+        barClassName?: string | undefined;
     } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     ScrollButton: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/radius').RadiusProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
         display?: import('../../utils/generate-styling').DisplayChildren | undefined;
@@ -34,7 +36,7 @@ export declare const Tabs: import('react').ForwardRefExoticComponent<Omit<Omit<i
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
         borderStyle?: ("default" | "dashed") | undefined;
     } & {
         iconOnly: true;
@@ -46,7 +48,7 @@ export declare const Tabs: import('react').ForwardRefExoticComponent<Omit<Omit<i
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
         borderStyle?: ("default" | "dashed") | undefined;
     } & {
         iconOnly?: false | undefined;

package/dist/components/tabs/tabs-scroll-button.d.ts

@@ -10,7 +10,7 @@ export declare const ScrollButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     borderStyle?: ("default" | "dashed") | undefined;
 } & {
     iconOnly: true;
@@ -22,7 +22,7 @@ export declare const ScrollButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     borderStyle?: ("default" | "dashed") | undefined;
 } & {
     iconOnly?: false | undefined;

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

@@ -5,6 +5,8 @@ export type ScrollProps = React.ComponentPropsWithoutRef<typeof ScrollArea>;
 export declare const ScrollContext: React.Context<boolean>;
 /** */
 export declare const Scroll: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-scroll-area').ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    variant?: ("button" | "scrollbar") | undefined;
+    variant?: ("button" | "hidden" | "scrollbar") | undefined;
     scrollBehavior?: "auto" | "smooth" | undefined;
+    viewPortClassName?: string | undefined;
+    barClassName?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/text-field/index.d.ts

@@ -35,7 +35,7 @@ export declare const TextField: import('react').ForwardRefExoticComponent<Omit<i
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
         borderStyle?: ("default" | "dashed") | undefined;
     } & {
         iconOnly: true;
@@ -47,7 +47,7 @@ export declare const TextField: import('react').ForwardRefExoticComponent<Omit<i
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
         borderStyle?: ("default" | "dashed") | undefined;
     } & {
         iconOnly?: false | undefined;

package/dist/components/text-field/text-field-button.d.ts

@@ -11,7 +11,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     borderStyle?: ("default" | "dashed") | undefined;
 } & {
     iconOnly: true;
@@ -23,7 +23,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     borderStyle?: ("default" | "dashed") | undefined;
 } & {
     iconOnly?: false | undefined;