@telia/teddy 0.4.5 → 0.4.7

package/dist/components/flip-card/flip-card-back.cjs

@@ -9,7 +9,7 @@ const components_scrollArea_index = require("../scroll-area/index.cjs");
 const utils_composeRefs = require("../../utils/composeRefs.cjs");
 const BackContext = React.createContext({});
 const Back = React.forwardRef(
-  ({ className, variant, children, wrapperClassName, "aria-label": ariaLabel, ...props }, forwardRef) => {
+  ({ className, variant, bordered, children, wrapperClassName, "aria-label": ariaLabel, ...props }, forwardRef) => {
     const { flipped, backId, backRef } = React.useContext(components_flipCard_flipCardRoot.FlipContext);
     const ref = utils_composeRefs.useComposedRefs(forwardRef, backRef);
     const classesOuter = clsx(
@@ -20,7 +20,7 @@ const Back = React.forwardRef(
       wrapperClassName
     );
     const classesInner = clsx([components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__back-inner`]], className);
-    return /* @__PURE__ */ jsxRuntime.jsx(BackContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsx(components_card_index.Card, { variant, className: classesOuter, children: /* @__PURE__ */ jsxRuntime.jsx(components_scrollArea_index.ScrollArea, { viewPortClassName: components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__scroll-area-view-port`], children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(BackContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsx(components_card_index.Card, { variant, bordered, className: classesOuter, children: /* @__PURE__ */ jsxRuntime.jsx(components_scrollArea_index.ScrollArea, { viewPortClassName: components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__scroll-area-view-port`], children: /* @__PURE__ */ jsxRuntime.jsx(
       components_card_index.Card,
       {
         id: backId,

package/dist/components/flip-card/flip-card-back.js

@@ -7,7 +7,7 @@ import { ScrollArea } from "../scroll-area/index.js";
 import { useComposedRefs } from "../../utils/composeRefs.js";
 const BackContext = React__default.createContext({});
 const Back = React__default.forwardRef(
-  ({ className, variant, children, wrapperClassName, "aria-label": ariaLabel, ...props }, forwardRef) => {
+  ({ className, variant, bordered, children, wrapperClassName, "aria-label": ariaLabel, ...props }, forwardRef) => {
     const { flipped, backId, backRef } = useContext(FlipContext);
     const ref = useComposedRefs(forwardRef, backRef);
     const classesOuter = clsx(
@@ -18,7 +18,7 @@ const Back = React__default.forwardRef(
       wrapperClassName
     );
     const classesInner = clsx([styles[`${rootClassName}__back-inner`]], className);
-    return /* @__PURE__ */ jsx(BackContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(Card, { variant, className: classesOuter, children: /* @__PURE__ */ jsx(ScrollArea, { viewPortClassName: styles[`${rootClassName}__scroll-area-view-port`], children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(BackContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(Card, { variant, bordered, className: classesOuter, children: /* @__PURE__ */ jsx(ScrollArea, { viewPortClassName: styles[`${rootClassName}__scroll-area-view-port`], children: /* @__PURE__ */ jsx(
       Card,
       {
         id: backId,

package/dist/components/scroll-area/scroll-area-root.d.ts

@@ -10,6 +10,9 @@ export type RootProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitiv
      *  - `hidden`: The scrollbar will not be visible
      */
     variant?: Variant | undefined;
+    /**
+     * The scroll behavior of the scroll area
+     */
     scrollBehavior?: 'smooth' | 'auto';
     /**
      * To style the viewport, viewport is the inner container of the scroll area
@@ -38,6 +41,9 @@ export declare const Root: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimit
      *  - `hidden`: The scrollbar will not be visible
      */
     variant?: Variant | undefined;
+    /**
+     * The scroll behavior of the scroll area
+     */
     scrollBehavior?: "auto" | "smooth" | undefined;
     /**
      * To style the viewport, viewport is the inner container of the scroll area

package/dist/components/tabs/index.cjs

@@ -6,17 +6,16 @@ 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");
-components_tabs_tabsRoot.Root.displayName = "Tabs";
-components_tabs_tabsList.List.displayName = "Tabs.List";
-components_tabs_tabsTrigger.Trigger.displayName = "Tabs.Trigger";
-components_tabs_tabsContent.Content.displayName = "Tabs.Content";
-components_tabs_tabsScroll.Scroll.displayName = "Tabs.Scroll";
-components_tabs_tabsScrollButton.ScrollButton.displayName = "Tabs.ScrollButton";
-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
-});
+const Tabs = components_tabs_tabsRoot.Root;
+Tabs.displayName = "Tabs";
+Tabs.List = components_tabs_tabsList.List;
+Tabs.List.displayName = "Tabs.List";
+Tabs.Trigger = components_tabs_tabsTrigger.Trigger;
+Tabs.Trigger.displayName = "Tabs.Trigger";
+Tabs.Content = components_tabs_tabsContent.Content;
+Tabs.Content.displayName = "Tabs.Content";
+Tabs.Scroll = components_tabs_tabsScroll.Scroll;
+Tabs.Scroll.displayName = "Tabs.Scroll";
+Tabs.ScrollButton = components_tabs_tabsScrollButton.ScrollButton;
+Tabs.ScrollButton.displayName = "Tabs.ScrollButton";
 exports.Tabs = Tabs;

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

@@ -1,11 +1,51 @@
 import { RootProps } from './tabs-root';
-import { ListProps } from './tabs-list';
-import { TriggerProps } from './tabs-trigger';
-import { ContentProps } from './tabs-content';
-import { ScrollProps } from './tabs-scroll';
-import { ScrollButtonProps } from './tabs-scroll-button';
+import { List, ListProps } from './tabs-list';
+import { Trigger, TriggerProps } from './tabs-trigger';
+import { Content, ContentProps } from './tabs-content';
+import { Scroll, ScrollProps } from './tabs-scroll';
+import { ScrollButton, ScrollButtonProps } from './tabs-scroll-button';
 
-export declare const Tabs: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-tabs').TabsProps & import('react').RefAttributes<HTMLDivElement>, "ref">, "defaultValue" | "value" | "onValueChange" | "activationMode"> & {
+type TabsProps = {
+    Root: RootProps;
+    List: ListProps;
+    Trigger: TriggerProps;
+    Content: ContentProps;
+    Scroll: ScrollProps;
+    ScrollButton: ScrollButtonProps;
+};
+/**
+ * Tabs organize content into separate views where only one view can be visible at a time.
+ * They allow users to quickly navigate between related sections of content.
+ *
+ * @component
+ *
+ * @example
+ * // Basic usage
+ * <Tabs defaultValue="tab1">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="tab1">First Tab</Tabs.Trigger>
+ *     <Tabs.Trigger value="tab2">Second Tab</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="tab1">Content for first tab</Tabs.Content>
+ *   <Tabs.Content value="tab2">Content for second tab</Tabs.Content>
+ * </Tabs>
+ *
+ * @example
+ * // With scroll buttons, only needed if you need to override the default scrollbar behavior
+ * <Tabs>
+ *   <Tabs.Scroll>
+ *     <Tabs.ScrollButton direction="left" />
+ *     <Tabs.List>
+ *       <Tabs.Trigger value="tab1">First Tab</Tabs.Trigger>
+ *       <Tabs.Trigger value="tab2">Second Tab</Tabs.Trigger>
+ *     </Tabs.List>
+ *     <Tabs.ScrollButton direction="right" />
+ *   </Tabs.Scroll>
+ *   <Tabs.Content value="tab1">Content for first tab</Tabs.Content>
+ *   <Tabs.Content value="tab2">Content for second tab</Tabs.Content>
+ * </Tabs>
+ */
+declare const Tabs: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-tabs').TabsProps & import('react').RefAttributes<HTMLDivElement>, "ref">, "defaultValue" | "value" | "onValueChange" | "activationMode"> & {
     value?: string | undefined;
     onValueChange?: ((value: string) => void) | undefined;
     defaultValue?: string | undefined;
@@ -13,56 +53,70 @@ export declare const Tabs: import('react').ForwardRefExoticComponent<Omit<Omit<i
     fullWidth?: boolean | undefined;
     snapCenter?: boolean | undefined;
 } & import('react').RefAttributes<HTMLDivElement>> & {
-    List: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-tabs').TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref">, "loop"> & {
-        loop?: boolean | undefined;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-    Trigger: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-tabs').TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref">, "disabled" | "value"> & {
-        value: string;
-        disabled?: boolean | undefined;
-    } & import('react').RefAttributes<HTMLButtonElement>>;
-    Content: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-tabs').TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref">, "value"> & {
-        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" | "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;
-    } & {
-        asChild?: boolean | undefined;
-        loading?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        size?: "sm" | "md" | "lg" | 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;
-        "aria-label": string;
-    } & import('react').RefAttributes<HTMLButtonElement>, "ref"> | 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;
-    } & {
-        asChild?: boolean | undefined;
-        loading?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        size?: "sm" | "md" | "lg" | 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;
-        "aria-label"?: string | undefined;
-    } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "hidden"> & {
-        direction?: "left" | "right" | "up" | "down" | undefined;
-        hidden?: boolean | undefined;
-    } & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-};
-export type TabsProps = {
-    Root: RootProps;
-    List: ListProps;
-    Trigger: TriggerProps;
-    Content: ContentProps;
-    Scroll: ScrollProps;
-    ScrollButton: ScrollButtonProps;
+    /**
+     * Container for the tab triggers. Provides keyboard navigation and proper ARIA roles.
+     *
+     * @component
+     *
+     * @example
+     * <Tabs.List>
+     *   <Tabs.Trigger value="tab1">First Tab</Tabs.Trigger>
+     *   <Tabs.Trigger value="tab2">Second Tab</Tabs.Trigger>
+     * </Tabs.List>
+     */
+    List: typeof List;
+    /**
+     * The clickable element that toggles the visibility of the corresponding content.
+     * Must have a unique value prop that matches its paired Content component.
+     *
+     * @component
+     *
+     * @example
+     * <Tabs.Trigger value="tab1">First Tab</Tabs.Trigger>
+     */
+    Trigger: typeof Trigger;
+    /**
+     * The panel that contains the content for each tab.
+     * The value prop must match the corresponding Trigger.
+     *
+     * @component
+     *
+     * @example
+     * <Tabs.Content value="tab1">Content for first tab</Tabs.Content>
+     */
+    Content: typeof Content;
+    /**
+     * Container that provides horizontal scrolling for the tabs list when it overflows.
+     *
+     * @component
+     *
+     * @example
+     * <Tabs.Scroll>
+     *   <Tabs.ScrollButton direction="left" />
+     *   <Tabs.List>
+     *     <Tabs.Trigger value="tab1">First Tab</Tabs.Trigger>
+     *     <Tabs.Trigger value="tab2">Second Tab</Tabs.Trigger>
+     *   </Tabs.List>
+     *   <Tabs.ScrollButton direction="right" />
+     * </Tabs.Scroll>
+     */
+    Scroll: typeof Scroll;
+    /**
+     * Navigation button for scrolling through the tabs list when it overflows.
+     *
+     * @component
+     *
+     * @example
+     * <Tabs.Scroll>
+     *   <Tabs.ScrollButton direction="left" />
+     *   <Tabs.List>
+     *     <Tabs.Trigger value="tab1">First Tab</Tabs.Trigger>
+     *     <Tabs.Trigger value="tab2">Second Tab</Tabs.Trigger>
+     *   </Tabs.List>
+     *   <Tabs.ScrollButton direction="right" />
+     * </Tabs.Scroll>
+     */
+    ScrollButton: typeof ScrollButton;
 };
+export { Tabs };
+export type { TabsProps };

package/dist/components/tabs/index.js

@@ -4,19 +4,18 @@ import { Trigger } from "./tabs-trigger.js";
 import { Content } from "./tabs-content.js";
 import { Scroll } from "./tabs-scroll.js";
 import { ScrollButton } from "./tabs-scroll-button.js";
-Root.displayName = "Tabs";
-List.displayName = "Tabs.List";
-Trigger.displayName = "Tabs.Trigger";
-Content.displayName = "Tabs.Content";
-Scroll.displayName = "Tabs.Scroll";
-ScrollButton.displayName = "Tabs.ScrollButton";
-const Tabs = Object.assign(Root, {
-  List,
-  Trigger,
-  Content,
-  Scroll,
-  ScrollButton
-});
+const Tabs = Root;
+Tabs.displayName = "Tabs";
+Tabs.List = List;
+Tabs.List.displayName = "Tabs.List";
+Tabs.Trigger = Trigger;
+Tabs.Trigger.displayName = "Tabs.Trigger";
+Tabs.Content = Content;
+Tabs.Content.displayName = "Tabs.Content";
+Tabs.Scroll = Scroll;
+Tabs.Scroll.displayName = "Tabs.Scroll";
+Tabs.ScrollButton = ScrollButton;
+Tabs.ScrollButton.displayName = "Tabs.ScrollButton";
 export {
   Tabs
 };

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

@@ -2,9 +2,11 @@ import { default as React } from 'react';
 
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 export type ContentProps = Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, 'value'> & {
+    /** A unique value that associates the content with a trigger. */
     value: TabsPrimitive.TabsContentProps['value'];
 };
 /** Contains the content associated with each trigger.*/
 export declare const Content: React.ForwardRefExoticComponent<Omit<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref">, "value"> & {
+    /** A unique value that associates the content with a trigger. */
     value: TabsPrimitive.TabsContentProps['value'];
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -2,6 +2,9 @@ import { default as React } from 'react';
 
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 export declare const rootClassName = "teddy-tabs";
+/**
+ * The props for the Tabs Root component.
+ */
 export type RootProps = Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange' | 'activationMode'> & {
     /** The controlled value of the tab to activate. Should be used in conjunction with onValueChange. */
     value?: TabsPrimitive.TabsProps['value'];
@@ -9,6 +12,7 @@ export type RootProps = Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive
     onValueChange?: TabsPrimitive.TabsProps['onValueChange'];
     /** The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs. */
     defaultValue?: TabsPrimitive.TabsProps['defaultValue'];
+    /** Controls when tabs are activated. 'automatic' activates on focus, 'manual' activates on click. */
     activationMode?: TabsPrimitive.TabsProps['activationMode'];
     /** Makes the tabs span the full width of the container */
     fullWidth?: boolean;
@@ -18,10 +22,15 @@ export type RootProps = Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive
     snapCenter?: boolean;
 };
 type RootContextType = {
+    /** The currently active tab element */
     activeElement: HTMLButtonElement | null;
+    /** Function to set the active tab element */
     setActiveElement: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
+    /** Reference to the tabs list element */
     listElement: React.RefObject<HTMLDivElement>;
+    /** Whether to snap the tab to center on click */
     snapCenter: boolean;
+    /** The current tab value */
     value: string | undefined;
 };
 export declare const RootContext: React.Context<RootContextType | undefined>;
@@ -32,6 +41,7 @@ export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<TabsPrimiti
     onValueChange?: TabsPrimitive.TabsProps['onValueChange'];
     /** The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs. */
     defaultValue?: TabsPrimitive.TabsProps['defaultValue'];
+    /** Controls when tabs are activated. 'automatic' activates on focus, 'manual' activates on click. */
     activationMode?: TabsPrimitive.TabsProps['activationMode'];
     /** Makes the tabs span the full width of the container */
     fullWidth?: boolean | undefined;

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

@@ -7,7 +7,7 @@ const components_tabs_tabsScrollButton = require("./tabs-scroll-button.cjs");
 const ScrollContext = React.createContext(false);
 const Scroll = React.forwardRef(
   ({ children, ...props }, forwardRef) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(ScrollContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsxs(components_scrollArea_index.ScrollArea, { ...props, ref: forwardRef, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(ScrollContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsxs(components_scrollArea_index.ScrollArea, { variant: "button", ...props, ref: forwardRef, children: [
       /* @__PURE__ */ jsxRuntime.jsx(components_tabs_tabsScrollButton.ScrollButton, { direction: "left" }),
       /* @__PURE__ */ jsxRuntime.jsx(components_tabs_tabsScrollButton.ScrollButton, { direction: "right" }),
       children

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

@@ -5,7 +5,7 @@ import { ScrollButton } from "./tabs-scroll-button.js";
 const ScrollContext = React__default.createContext(false);
 const Scroll = React__default.forwardRef(
   ({ children, ...props }, forwardRef) => {
-    return /* @__PURE__ */ jsx(ScrollContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(ScrollArea, { ...props, ref: forwardRef, children: [
+    return /* @__PURE__ */ jsx(ScrollContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(ScrollArea, { variant: "button", ...props, ref: forwardRef, children: [
       /* @__PURE__ */ jsx(ScrollButton, { direction: "left" }),
       /* @__PURE__ */ jsx(ScrollButton, { direction: "right" }),
       children

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.4.5",
+  "version": "0.4.7",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"