@telia/teddy 0.0.24 → 0.0.25

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

@@ -0,0 +1,175 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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.5636ec8e-teddy.svg");
+const components_icon_icon = require("../icon/icon.cjs");
+const reactSlot = require("@radix-ui/react-slot");
+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_1o8ft_3",
+  "teddy-scroll-area__viewport": "_teddy-scroll-area__viewport_1o8ft_7",
+  "teddy-scroll-area__scrollbar": "_teddy-scroll-area__scrollbar_1o8ft_12",
+  "teddy-scroll-area__scrollbar--hidden": "_teddy-scroll-area__scrollbar--hidden_1o8ft_33",
+  "teddy-scroll-area__thumb": "_teddy-scroll-area__thumb_1o8ft_46",
+  "teddy-scroll-area__corner": "_teddy-scroll-area__corner_1o8ft_63",
+  "teddy-scroll-area__button": "_teddy-scroll-area__button_1o8ft_66",
+  "teddy-scroll-area__button--hidden": "_teddy-scroll-area__button--hidden_1o8ft_94"
+};
+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) !== "scrollbar"
+      },
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Scrollbar, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Scrollbar.displayName = "Scrollbar";
+const Thumb = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__thumb`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Thumb, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Thumb.displayName = "Thumb";
+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 Button = React.forwardRef(
+  ({ className, hidden, direction, children, ...props }, forwardRef) => {
+    const context = React.useContext(RootContext);
+    const internalHidden = hidden ?? (direction === "up" && !(context == null ? void 0 : context.hasScrollTop) || direction === "down" && !(context == null ? void 0 : context.hasScrollBottom) || direction === "left" && !(context == null ? void 0 : context.hasScrollLeft) || direction === "right" && !(context == null ? void 0 : context.hasScrollRight));
+    const classes = clsx(
+      [styles[`${rootClassName}__button`]],
+      {
+        [styles[`${rootClassName}__button--hidden`]]: internalHidden
+      },
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components_button_button.Button,
+      {
+        iconOnly: true,
+        variant: "primary",
+        "aria-label": direction === "down" ? "Scroll ned" : direction === "up" ? "Scroll opp" : direction === "left" ? "Scroll venstre" : "Scroll høyre",
+        "data-direction": direction,
+        tabIndex: internalHidden ? -1 : void 0,
+        ...props,
+        onClick: utils_composeEventHandlers.composeEventHandlers(props.onClick, (e) => {
+          var _a, _b;
+          if (e.defaultPrevented)
+            return;
+          const scroll = (_a = context == null ? void 0 : context.scrollRef) == null ? void 0 : _a.getBoundingClientRect();
+          const scrollDirection = direction === "up" || direction === "left" ? -1 : 1;
+          const scrollAxis = direction === "up" || direction === "down" ? "top" : "left";
+          const scrollAmount = ((direction === "up" || direction === "down" ? scroll == null ? void 0 : scroll.height : scroll == null ? void 0 : scroll.width) || 0) * 0.7;
+          (_b = context == null ? void 0 : context.scrollRef) == null ? void 0 : _b.scrollBy({
+            [scrollAxis]: scrollAmount * scrollDirection,
+            behavior: "smooth"
+          });
+        }),
+        ref: forwardRef,
+        className: classes,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(
+          components_icon_icon.Icon,
+          {
+            name: direction === "down" ? "chevron-down" : direction === "up" ? "chevron-up" : direction === "left" ? "chevron-left" : "chevron-right"
+          }
+        )
+      }
+    );
+  }
+);
+components_button_button.Button.displayName = "Button";
+const rootClassName = "teddy-scroll-area";
+const RootContext = React.createContext(void 0);
+const Root = React.forwardRef(
+  ({ className, variant, children, ...props }, forwardRef) => {
+    const [scrollRef, setScrollRef] = React.useState(null);
+    const [hasScroll, setHasScroll] = React.useState(null);
+    const initialHasScrollLeft = scrollRef ? scrollRef.scrollLeft > 0 : null;
+    const initialHasScrollRight = scrollRef ? scrollRef.scrollLeft < scrollRef.scrollWidth - scrollRef.clientWidth : null;
+    const initialHasScrollTop = scrollRef ? scrollRef.scrollTop > 0 : null;
+    const initialHasScrollBottom = scrollRef ? scrollRef.scrollTop < scrollRef.scrollHeight - scrollRef.clientHeight : null;
+    const hasScrollLeft = hasScroll ? hasScroll.left : initialHasScrollLeft;
+    const hasScrollRight = hasScroll ? hasScroll.right : initialHasScrollRight;
+    const hasScrollTop = hasScroll ? hasScroll.top : initialHasScrollTop;
+    const hasScrollBottom = hasScroll ? hasScroll.bottom : initialHasScrollBottom;
+    const hasScrollHorizontal = hasScrollLeft || hasScrollRight;
+    const hasScrollVertical = hasScrollTop || hasScrollBottom;
+    const classes = clsx([styles[`${rootClassName}`]], className);
+    function handleScroll(e) {
+      const target = e.currentTarget;
+      setHasScroll({
+        left: target.scrollLeft > 0,
+        right: target.scrollLeft < target.scrollWidth - target.clientWidth,
+        top: target.scrollTop > 0,
+        bottom: target.scrollTop < target.scrollHeight - target.clientHeight
+      });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RootContext.Provider,
+      {
+        value: { scrollRef, variant, hasScrollTop, hasScrollBottom, hasScrollLeft, hasScrollRight },
+        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`]]),
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(Thumb, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Scrollbar, { orientation: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsx(Thumb, {}) }),
+          /* @__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-bar.js

@@ -8,14 +8,14 @@ import "../../assets/sprite.5636ec8e-teddy.svg";
 import { Icon } from "../icon/icon.js";
 import { Slottable } from "@radix-ui/react-slot";
 const styles = {
-  "teddy-scroll-area": "_teddy-scroll-area_1swny_3",
-  "teddy-scroll-area__viewport": "_teddy-scroll-area__viewport_1swny_7",
-  "teddy-scroll-area__scrollbar": "_teddy-scroll-area__scrollbar_1swny_12",
-  "teddy-scroll-area__scrollbar--hidden": "_teddy-scroll-area__scrollbar--hidden_1swny_33",
-  "teddy-scroll-area__thumb": "_teddy-scroll-area__thumb_1swny_46",
-  "teddy-scroll-area__corner": "_teddy-scroll-area__corner_1swny_63",
-  "teddy-scroll-area__button": "_teddy-scroll-area__button_1swny_66",
-  "teddy-scroll-area__button--hidden": "_teddy-scroll-area__button--hidden_1swny_90"
+  "teddy-scroll-area": "_teddy-scroll-area_1o8ft_3",
+  "teddy-scroll-area__viewport": "_teddy-scroll-area__viewport_1o8ft_7",
+  "teddy-scroll-area__scrollbar": "_teddy-scroll-area__scrollbar_1o8ft_12",
+  "teddy-scroll-area__scrollbar--hidden": "_teddy-scroll-area__scrollbar--hidden_1o8ft_33",
+  "teddy-scroll-area__thumb": "_teddy-scroll-area__thumb_1o8ft_46",
+  "teddy-scroll-area__corner": "_teddy-scroll-area__corner_1o8ft_63",
+  "teddy-scroll-area__button": "_teddy-scroll-area__button_1o8ft_66",
+  "teddy-scroll-area__button--hidden": "_teddy-scroll-area__button--hidden_1o8ft_94"
 };
 const Scrollbar = React__default.forwardRef(
   ({ className, ...props }, forwardRef) => {

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("react/jsx-runtime");
+require("react");
+require("clsx");
+const components_scrollArea_scrollAreaBar = require("./scroll-area-bar.cjs");
+require("../button/button.cjs");
+require("../../utils/composeEventHandlers.cjs");
+require("../../assets/sprite.5636ec8e-teddy.svg");
+require("../icon/icon.cjs");
+exports.Button = components_scrollArea_scrollAreaBar.Button;

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

@@ -0,0 +1,8 @@
+"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.Corner = components_scrollArea_scrollAreaBar.Corner;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_scrollArea_scrollAreaBar = require("./scroll-area-bar.cjs");
+const reactSlot = require("@radix-ui/react-slot");
+const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs");
+const Item = React.forwardRef(
+  ({ className, asChild, ...props }, forwardRef) => {
+    const classes = clsx([components_scrollArea_scrollAreaBar.styles[`${components_scrollArea_scrollAreaBar.rootClassName}__item`]], className);
+    const Comp = asChild ? reactSlot.Slot : "div";
+    const context = React.useContext(components_scrollArea_scrollAreaBar.RootContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ...props,
+        onClick: utils_composeEventHandlers.composeEventHandlers(props.onClick, (e) => {
+          var _a, _b;
+          if (e.defaultPrevented)
+            return;
+          const scroll = (_a = context == null ? void 0 : context.scrollRef) == null ? void 0 : _a.getBoundingClientRect();
+          const item = e.currentTarget.getBoundingClientRect();
+          const scrollViewVerticalCenter = ((scroll == null ? void 0 : scroll.top) || 0) + ((scroll == null ? void 0 : scroll.height) || 0) / 2;
+          const itemVerticalCenter = ((item == null ? void 0 : item.top) || 0) + ((item == null ? void 0 : item.height) || 0) / 2;
+          const scrollViewHorizontalCenter = ((scroll == null ? void 0 : scroll.left) || 0) + ((scroll == null ? void 0 : scroll.width) || 0) / 2;
+          const itemHorizontalCenter = ((item == null ? void 0 : item.left) || 0) + ((item == null ? void 0 : item.width) || 0) / 2;
+          const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+          (_b = context == null ? void 0 : context.scrollRef) == null ? void 0 : _b.scrollBy({
+            top: itemVerticalCenter - scrollViewVerticalCenter,
+            left: itemHorizontalCenter - scrollViewHorizontalCenter,
+            behavior: hasReducedMotion ? "auto" : "smooth"
+          });
+        }),
+        ref: forwardRef,
+        className: classes
+      }
+    );
+  }
+);
+Item.displayName = "Item";
+exports.Item = Item;

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

@@ -23,10 +23,11 @@ const Item = React__default.forwardRef(
           const itemVerticalCenter = ((item == null ? void 0 : item.top) || 0) + ((item == null ? void 0 : item.height) || 0) / 2;
           const scrollViewHorizontalCenter = ((scroll == null ? void 0 : scroll.left) || 0) + ((scroll == null ? void 0 : scroll.width) || 0) / 2;
           const itemHorizontalCenter = ((item == null ? void 0 : item.left) || 0) + ((item == null ? void 0 : item.width) || 0) / 2;
+          const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
           (_b = context == null ? void 0 : context.scrollRef) == null ? void 0 : _b.scrollBy({
             top: itemVerticalCenter - scrollViewVerticalCenter,
             left: itemHorizontalCenter - scrollViewHorizontalCenter,
-            behavior: "smooth"
+            behavior: hasReducedMotion ? "auto" : "smooth"
           });
         }),
         ref: forwardRef,

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

@@ -0,0 +1,11 @@
+"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");
+require("@radix-ui/react-slot");
+exports.Root = components_scrollArea_scrollAreaBar.Root;
+exports.RootContext = components_scrollArea_scrollAreaBar.RootContext;
+exports.rootClassName = components_scrollArea_scrollAreaBar.rootClassName;

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

@@ -0,0 +1,8 @@
+"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;

package/dist/components/spinner/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_spinner_spinner = require("./spinner.cjs");
+exports.Spinner = components_spinner_spinner.Spinner;

package/dist/components/spinner/spinner.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const React = require("react");
+const dash = "_dash_ywden_1";
+const rotate = "_rotate_ywden_1";
+const styles = {
+  "teddy-spinner--xxs": "_teddy-spinner--xxs_ywden_1",
+  "teddy-spinner--xs": "_teddy-spinner--xs_ywden_5",
+  "teddy-spinner--sm": "_teddy-spinner--sm_ywden_9",
+  "teddy-spinner--md": "_teddy-spinner--md_ywden_13",
+  "teddy-spinner--lg": "_teddy-spinner--lg_ywden_18",
+  "teddy-spinner__circle": "_teddy-spinner__circle_ywden_23",
+  dash,
+  rotate,
+  "teddy-spinner__circle--disabled": "_teddy-spinner__circle--disabled_ywden_33",
+  "teddy-spinner__circle--negative": "_teddy-spinner__circle--negative_ywden_36",
+  "teddy-spinner__circle--negative-disabled": "_teddy-spinner__circle--negative-disabled_ywden_39"
+};
+const rootClassName = "teddy-spinner";
+const SPINNER_VARIANT = {
+  PRIMARY: "primary",
+  DISABLED: "disabled",
+  NEGATIVE: "negative",
+  NEGATIVE_DISABLED: "negative-disabled"
+};
+const SPINNER_SIZE = {
+  XXS: "xxs",
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+const Spinner = React.forwardRef(
+  ({ size = SPINNER_SIZE.SM, variant = SPINNER_VARIANT.PRIMARY, className, ...props }, forwardRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        ...props,
+        viewBox: "0 0 50 50",
+        className: clsx([styles[rootClassName], styles[`${rootClassName}--${size}`], className]),
+        ref: forwardRef,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            className: clsx(styles[`${rootClassName}__circle`], styles[`${rootClassName}__circle--${variant}`]),
+            cx: "25",
+            cy: "25",
+            r: "20"
+          }
+        )
+      }
+    );
+  }
+);
+exports.Spinner = Spinner;

package/dist/components/tabs/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_tabs_tabsRoot = require("./tabs-root.cjs");
+const components_tabs_tabsList = require("./tabs-list.cjs");
+const components_tabs_tabsTrigger = require("./tabs-trigger.cjs");
+const components_tabs_tabsContent = require("./tabs-content.cjs");
+const components_tabs_tabsScroll = require("./tabs-scroll.cjs");
+const components_tabs_tabsScrollButton = require("./tabs-scroll-button.cjs");
+const Tabs = Object.assign(components_tabs_tabsRoot.Root, {
+  List: components_tabs_tabsList.List,
+  Trigger: components_tabs_tabsTrigger.Trigger,
+  Content: components_tabs_tabsContent.Content,
+  Scroll: components_tabs_tabsScroll.Scroll,
+  ScrollButton: components_tabs_tabsScrollButton.ScrollButton
+});
+exports.Tabs = Tabs;

package/dist/components/tabs/tabs-content.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const TabsPrimitive = require("@radix-ui/react-tabs");
+const clsx = require("clsx");
+const components_tabs_tabsRoot = require("./tabs-root.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 TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
+const Content = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([components_tabs_tabsRoot.styles[`${components_tabs_tabsRoot.rootClassName}__content`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Content, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Content.displayName = "Content";
+exports.Content = Content;

package/dist/components/tabs/tabs-list.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const TabsPrimitive = require("@radix-ui/react-tabs");
+const clsx = require("clsx");
+const components_tabs_tabsRoot = require("./tabs-root.cjs");
+const components_tabs_tabsScroll = require("./tabs-scroll.cjs");
+const utils_composeRefs = require("../../utils/composeRefs.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 TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
+const List = React.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx([components_tabs_tabsRoot.styles[`${components_tabs_tabsRoot.rootClassName}__list`]], className);
+    const scrollContext = React.useContext(components_tabs_tabsScroll.ScrollContext);
+    const rootContext = React.useContext(components_tabs_tabsRoot.RootContext);
+    if (!scrollContext) {
+      return /* @__PURE__ */ jsxRuntime.jsx(components_tabs_tabsScroll.Scroll, { children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.List, { ...props, ref: utils_composeRefs.composeRefs(forwardRef, rootContext == null ? void 0 : rootContext.listElement), className: classes, children }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.List, { ...props, ref: utils_composeRefs.composeRefs(forwardRef, rootContext == null ? void 0 : rootContext.listElement), className: classes, children });
+  }
+);
+List.displayName = "List";
+exports.List = List;

package/dist/components/tabs/tabs-list.js

@@ -2,16 +2,18 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import clsx from "clsx";
-import { s as styles, rootClassName } from "./tabs-root.js";
+import { s as styles, rootClassName, RootContext } from "./tabs-root.js";
 import { ScrollContext, Scroll } from "./tabs-scroll.js";
+import { composeRefs } from "../../utils/composeRefs.js";
 const List = React__default.forwardRef(
-  ({ className, ...props }, forwardRef) => {
+  ({ className, children, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}__list`]], className);
     const scrollContext = React__default.useContext(ScrollContext);
+    const rootContext = React__default.useContext(RootContext);
     if (!scrollContext) {
-      return /* @__PURE__ */ jsx(Scroll, { children: /* @__PURE__ */ jsx(TabsPrimitive.List, { ...props, ref: forwardRef, className: classes }) });
+      return /* @__PURE__ */ jsx(Scroll, { children: /* @__PURE__ */ jsx(TabsPrimitive.List, { ...props, ref: composeRefs(forwardRef, rootContext == null ? void 0 : rootContext.listElement), className: classes, children }) });
     }
-    return /* @__PURE__ */ jsx(TabsPrimitive.List, { ...props, ref: forwardRef, className: classes });
+    return /* @__PURE__ */ jsx(TabsPrimitive.List, { ...props, ref: composeRefs(forwardRef, rootContext == null ? void 0 : rootContext.listElement), className: classes, children });
   }
 );
 List.displayName = "List";

package/dist/components/tabs/tabs-root.cjs

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const TabsPrimitive = require("@radix-ui/react-tabs");
+const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
+const utils_composeEventHandlers = require("../../utils/composeEventHandlers.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 TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
+const styles = {
+  "teddy-tabs__list": "_teddy-tabs__list_1finq_3",
+  "teddy-tabs--full-width": "_teddy-tabs--full-width_1finq_30",
+  "teddy-tabs__trigger": "_teddy-tabs__trigger_1finq_33",
+  "teddy-tabs__scroll-button": "_teddy-tabs__scroll-button_1finq_48"
+};
+const rootClassName = "teddy-tabs";
+const RootContext = React.createContext(void 0);
+const Root = React.forwardRef(
+  ({ className, onValueChange, fullWidth, snapCenter = true, ...props }, forwardRef) => {
+    const [activeElement, setActiveElement] = React.useState(null);
+    const listElement = React.useRef(null);
+    const [value, setValue] = reactUseControllableState.useControllableState({
+      prop: props.value,
+      onChange: onValueChange,
+      defaultProp: props.defaultValue
+    });
+    const classes = clsx(
+      [styles[`${rootClassName}`]],
+      { [styles[`${rootClassName}--full-width`]]: fullWidth },
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RootContext.Provider,
+      {
+        value: {
+          activeElement,
+          setActiveElement,
+          snapCenter,
+          value,
+          listElement
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          TabsPrimitive__namespace.Root,
+          {
+            ...props,
+            onValueChange: utils_composeEventHandlers.composeEventHandlers(setValue, onValueChange),
+            ref: forwardRef,
+            className: classes
+          }
+        )
+      }
+    );
+  }
+);
+Root.displayName = "Root";
+exports.Root = Root;
+exports.RootContext = RootContext;
+exports.rootClassName = rootClassName;
+exports.styles = styles;

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

@@ -17,15 +17,12 @@ export type RootProps = Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive
      */
     snapCenter?: boolean;
 };
-type ActiveElement = {
-    left: number;
-    width: number;
-    bottom: number;
-};
 type RootContextType = {
-    activeElement: ActiveElement | null;
-    setActiveElement: React.Dispatch<React.SetStateAction<ActiveElement | null>>;
+    activeElement: HTMLButtonElement | null;
+    setActiveElement: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
+    listElement: React.RefObject<HTMLDivElement>;
     snapCenter: boolean;
+    value: string | undefined;
 };
 export declare const RootContext: React.Context<RootContextType | undefined>;
 export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref">, "defaultValue" | "value" | "onValueChange" | "activationMode"> & {

package/dist/components/tabs/tabs-root.js

@@ -2,18 +2,25 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
 const styles = {
-  "teddy-tabs__list": "_teddy-tabs__list_1sgsx_3",
-  "teddy-tabs--full-width": "_teddy-tabs--full-width_1sgsx_10",
-  "teddy-tabs__trigger": "_teddy-tabs__trigger_1sgsx_13",
-  "teddy-tabs__indicator": "_teddy-tabs__indicator_1sgsx_28",
-  "teddy-tabs__scroll-button": "_teddy-tabs__scroll-button_1sgsx_34"
+  "teddy-tabs__list": "_teddy-tabs__list_1finq_3",
+  "teddy-tabs--full-width": "_teddy-tabs--full-width_1finq_30",
+  "teddy-tabs__trigger": "_teddy-tabs__trigger_1finq_33",
+  "teddy-tabs__scroll-button": "_teddy-tabs__scroll-button_1finq_48"
 };
 const rootClassName = "teddy-tabs";
 const RootContext = React__default.createContext(void 0);
 const Root = React__default.forwardRef(
-  ({ className, fullWidth, snapCenter = true, ...props }, forwardRef) => {
+  ({ className, onValueChange, fullWidth, snapCenter = true, ...props }, forwardRef) => {
     const [activeElement, setActiveElement] = React__default.useState(null);
+    const listElement = React__default.useRef(null);
+    const [value, setValue] = useControllableState({
+      prop: props.value,
+      onChange: onValueChange,
+      defaultProp: props.defaultValue
+    });
     const classes = clsx(
       [styles[`${rootClassName}`]],
       { [styles[`${rootClassName}--full-width`]]: fullWidth },
@@ -25,9 +32,19 @@ const Root = React__default.forwardRef(
         value: {
           activeElement,
           setActiveElement,
-          snapCenter
+          snapCenter,
+          value,
+          listElement
         },
-        children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ...props, ref: forwardRef, className: classes })
+        children: /* @__PURE__ */ jsx(
+          TabsPrimitive.Root,
+          {
+            ...props,
+            onValueChange: composeEventHandlers(setValue, onValueChange),
+            ref: forwardRef,
+            className: classes
+          }
+        )
       }
     );
   }

package/dist/components/tabs/tabs-scroll-button.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_tabs_tabsRoot = require("./tabs-root.cjs");
+const components_scrollArea_index = require("../scroll-area/index.cjs");
+const ScrollButton = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([components_tabs_tabsRoot.styles[`${components_tabs_tabsRoot.rootClassName}__scroll-button`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(components_scrollArea_index.ScrollArea.Button, { variant: "text", ...props, className: classes, ref: forwardRef });
+  }
+);
+ScrollButton.displayName = "ScrollButton";
+exports.ScrollButton = ScrollButton;