@telia/teddy 0.0.21 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/dist/components/accordion/accordion-content.d.ts +5 -0
  2. package/dist/components/accordion/accordion-content.js +15 -0
  3. package/dist/components/accordion/accordion-header.d.ts +6 -0
  4. package/dist/components/accordion/accordion-header.js +16 -0
  5. package/dist/components/accordion/accordion-indicator.d.ts +5 -0
  6. package/dist/components/accordion/accordion-indicator.js +16 -0
  7. package/dist/components/accordion/accordion-item.d.ts +8 -0
  8. package/dist/components/accordion/accordion-item.js +15 -0
  9. package/dist/components/accordion/accordion-root.d.ts +15 -0
  10. package/dist/components/accordion/accordion-root.js +39 -0
  11. package/dist/components/accordion/accordion-title.d.ts +7 -0
  12. package/dist/components/accordion/accordion-title.js +15 -0
  13. package/dist/components/accordion/accordion-trigger.d.ts +12 -0
  14. package/dist/components/accordion/accordion-trigger.js +20 -0
  15. package/dist/components/accordion/index.d.ts +29 -2
  16. package/dist/components/accordion/index.js +15 -1
  17. package/dist/components/button/button.d.ts +1 -1
  18. package/dist/components/button/button.js +1 -1
  19. package/dist/components/card/card.d.ts +4 -4
  20. package/dist/components/chip/chip-indicator.d.ts +2 -2
  21. package/dist/components/chip/index.d.ts +2 -2
  22. package/dist/components/drawer/drawer-close.d.ts +15 -0
  23. package/dist/components/drawer/drawer-close.js +22 -0
  24. package/dist/components/drawer/drawer-content.d.ts +22 -0
  25. package/dist/components/drawer/drawer-content.js +25 -0
  26. package/dist/components/drawer/drawer-description.d.ts +9 -0
  27. package/dist/components/drawer/drawer-description.js +19 -0
  28. package/dist/components/drawer/drawer-footer.d.ts +8 -0
  29. package/dist/components/drawer/drawer-footer.js +16 -0
  30. package/dist/components/drawer/drawer-overlay.d.ts +13 -0
  31. package/dist/components/drawer/drawer-overlay.js +26 -0
  32. package/dist/components/drawer/drawer-root.d.ts +26 -0
  33. package/dist/components/drawer/drawer-root.js +11 -0
  34. package/dist/components/drawer/drawer-title.d.ts +9 -0
  35. package/dist/components/drawer/drawer-title.js +17 -0
  36. package/dist/components/drawer/drawer-trigger.d.ts +12 -0
  37. package/dist/components/drawer/drawer-trigger.js +10 -0
  38. package/dist/components/drawer/index.js +20 -0
  39. package/dist/components/index.d.ts +3 -0
  40. package/dist/components/index.js +7 -1
  41. package/dist/components/modal/modal.js +12 -9
  42. package/dist/components/navigation-menu/navigation-menu.d.ts +1 -1
  43. package/dist/components/notification/notification.d.ts +2 -2
  44. package/dist/components/scroll-area/index.d.ts +38 -0
  45. package/dist/components/scroll-area/index.js +9 -0
  46. package/dist/components/scroll-area/scroll-area-bar.d.ts +5 -0
  47. package/dist/components/scroll-area/scroll-area-bar.js +158 -0
  48. package/dist/components/scroll-area/scroll-area-button.d.ts +36 -0
  49. package/dist/components/scroll-area/scroll-area-button.js +11 -0
  50. package/dist/components/scroll-area/scroll-area-corner.d.ts +5 -0
  51. package/dist/components/scroll-area/scroll-area-corner.js +8 -0
  52. package/dist/components/scroll-area/scroll-area-item.d.ts +8 -0
  53. package/dist/components/scroll-area/scroll-area-item.js +41 -0
  54. package/dist/components/scroll-area/scroll-area-root.d.ts +21 -0
  55. package/dist/components/scroll-area/scroll-area-root.js +11 -0
  56. package/dist/components/scroll-area/scroll-area-thumb.d.ts +5 -0
  57. package/dist/components/scroll-area/scroll-area-thumb.js +8 -0
  58. package/dist/components/tabs/index.d.ts +59 -0
  59. package/dist/components/tabs/index.js +16 -0
  60. package/dist/components/tabs/tabs-content.d.ts +10 -0
  61. package/dist/components/tabs/tabs-content.js +15 -0
  62. package/dist/components/tabs/tabs-list.d.ts +16 -0
  63. package/dist/components/tabs/tabs-list.js +20 -0
  64. package/dist/components/tabs/tabs-root.d.ts +46 -0
  65. package/dist/components/tabs/tabs-root.js +41 -0
  66. package/dist/components/tabs/tabs-scroll-button.d.ts +27 -0
  67. package/dist/components/tabs/tabs-scroll-button.js +15 -0
  68. package/dist/components/tabs/tabs-scroll.d.ts +9 -0
  69. package/dist/components/tabs/tabs-scroll.js +22 -0
  70. package/dist/components/tabs/tabs-trigger.d.ts +16 -0
  71. package/dist/components/tabs/tabs-trigger.js +28 -0
  72. package/dist/components/text-field/text-field.d.ts +1 -1
  73. package/dist/components/toggle/toggle.d.ts +2 -2
  74. package/dist/drawer.module-B3QhrxH1.js +14 -0
  75. package/dist/main.js +7 -1
  76. package/dist/style.css +510 -244
  77. package/dist/utils/generate-styling/grid.d.ts +24 -24
  78. package/dist/utils/generate-styling/index.d.ts +16 -16
  79. package/dist/utils/generate-styling/util.d.ts +2 -2
  80. package/package.json +16 -13
  81. package/dist/components/accordion/accordion.d.ts +0 -61
  82. package/dist/components/accordion/accordion.js +0 -93
@@ -0,0 +1,21 @@
1
+ import { default as React } from 'react';
2
+
3
+ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
4
+ export declare const rootClassName = "teddy-scroll-area";
5
+ type Variant = 'scrollbar' | 'button';
6
+ export type RootProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
7
+ variant?: Variant;
8
+ };
9
+ type RootContextType = {
10
+ scrollRef: HTMLDivElement | null;
11
+ variant?: Variant;
12
+ hasScrollTop: boolean | null;
13
+ hasScrollBottom: boolean | null;
14
+ hasScrollLeft: boolean | null;
15
+ hasScrollRight: boolean | null;
16
+ };
17
+ export declare const RootContext: React.Context<RootContextType | undefined>;
18
+ export declare const Root: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
19
+ variant?: Variant | undefined;
20
+ } & React.RefAttributes<HTMLDivElement>>;
21
+ export {};
@@ -0,0 +1,11 @@
1
+ import "react/jsx-runtime";
2
+ import "react";
3
+ import "clsx";
4
+ import "@radix-ui/react-scroll-area";
5
+ import { R, a, r } from "./scroll-area-bar.js";
6
+ import "@radix-ui/react-slot";
7
+ export {
8
+ R as Root,
9
+ a as RootContext,
10
+ r as rootClassName
11
+ };
@@ -0,0 +1,5 @@
1
+ import { default as React } from 'react';
2
+
3
+ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
4
+ export type ThumbProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Thumb>;
5
+ export declare const Thumb: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaThumbProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,8 @@
1
+ import "react/jsx-runtime";
2
+ import "react";
3
+ import "clsx";
4
+ import "@radix-ui/react-scroll-area";
5
+ import { T } from "./scroll-area-bar.js";
6
+ export {
7
+ T as Thumb
8
+ };
@@ -0,0 +1,59 @@
1
+ import { RootProps } from './tabs-root';
2
+ import { ListProps } from './tabs-list';
3
+ import { TriggerProps } from './tabs-trigger';
4
+ import { ContentProps } from './tabs-content';
5
+ import { ScrollProps } from './tabs-scroll';
6
+ import { ScrollButtonProps } from './tabs-scroll-button';
7
+
8
+ export declare const Tabs: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-tabs').TabsProps & import('react').RefAttributes<HTMLDivElement>, "ref">, "defaultValue" | "value" | "onValueChange" | "activationMode"> & {
9
+ value?: string | undefined;
10
+ onValueChange?: ((value: string) => void) | undefined;
11
+ defaultValue?: string | undefined;
12
+ activationMode?: "manual" | "automatic" | undefined;
13
+ fullWidth?: boolean | undefined;
14
+ snapCenter?: boolean | undefined;
15
+ } & import('react').RefAttributes<HTMLDivElement>> & {
16
+ List: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-tabs').TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref">, "loop"> & {
17
+ loop?: boolean | undefined;
18
+ } & import('react').RefAttributes<HTMLDivElement>>;
19
+ Trigger: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-tabs').TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref">, "disabled" | "value"> & {
20
+ value: string;
21
+ disabled?: boolean | undefined;
22
+ } & import('react').RefAttributes<HTMLButtonElement>>;
23
+ Content: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-tabs').TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref">, "value"> & {
24
+ value: string;
25
+ } & import('react').RefAttributes<HTMLDivElement>>;
26
+ Scroll: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-scroll-area').ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
27
+ variant?: ("button" | "scrollbar") | undefined;
28
+ } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
29
+ 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/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 & {
30
+ asChild?: boolean | undefined;
31
+ loading?: boolean | undefined;
32
+ fullWidth?: boolean | undefined;
33
+ size?: "sm" | "md" | "lg" | undefined;
34
+ variant?: "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
35
+ } & {
36
+ iconOnly: true;
37
+ "aria-label": string;
38
+ } & 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/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 & {
39
+ asChild?: boolean | undefined;
40
+ loading?: boolean | undefined;
41
+ fullWidth?: boolean | undefined;
42
+ size?: "sm" | "md" | "lg" | undefined;
43
+ variant?: "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
44
+ } & {
45
+ iconOnly?: false | undefined;
46
+ "aria-label"?: string | undefined;
47
+ } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "hidden"> & {
48
+ direction?: "left" | "right" | "up" | "down" | undefined;
49
+ hidden?: boolean | undefined;
50
+ } & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
51
+ };
52
+ export type TabsProps = {
53
+ Root: RootProps;
54
+ List: ListProps;
55
+ Trigger: TriggerProps;
56
+ Content: ContentProps;
57
+ Scroll: ScrollProps;
58
+ ScrollButton: ScrollButtonProps;
59
+ };
@@ -0,0 +1,16 @@
1
+ import { Root } from "./tabs-root.js";
2
+ import { List } from "./tabs-list.js";
3
+ import { Trigger } from "./tabs-trigger.js";
4
+ import { Content } from "./tabs-content.js";
5
+ import { Scroll } from "./tabs-scroll.js";
6
+ import { ScrollButton } from "./tabs-scroll-button.js";
7
+ const Tabs = Object.assign(Root, {
8
+ List,
9
+ Trigger,
10
+ Content,
11
+ Scroll,
12
+ ScrollButton
13
+ });
14
+ export {
15
+ Tabs
16
+ };
@@ -0,0 +1,10 @@
1
+ import { default as React } from 'react';
2
+
3
+ import * as TabsPrimitive from '@radix-ui/react-tabs';
4
+ export type ContentProps = Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, 'value'> & {
5
+ value: TabsPrimitive.TabsContentProps['value'];
6
+ };
7
+ /** Contains the content associated with each trigger.*/
8
+ export declare const Content: React.ForwardRefExoticComponent<Omit<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref">, "value"> & {
9
+ value: TabsPrimitive.TabsContentProps['value'];
10
+ } & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,15 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import React__default from "react";
3
+ import * as TabsPrimitive from "@radix-ui/react-tabs";
4
+ import clsx from "clsx";
5
+ import { s as styles, rootClassName } from "./tabs-root.js";
6
+ const Content = React__default.forwardRef(
7
+ ({ className, ...props }, forwardRef) => {
8
+ const classes = clsx([styles[`${rootClassName}__content`]], className);
9
+ return /* @__PURE__ */ jsx(TabsPrimitive.Content, { ...props, ref: forwardRef, className: classes });
10
+ }
11
+ );
12
+ Content.displayName = "Content";
13
+ export {
14
+ Content
15
+ };
@@ -0,0 +1,16 @@
1
+ import { default as React } from 'react';
2
+
3
+ import * as TabsPrimitive from '@radix-ui/react-tabs';
4
+ export type ListProps = Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, 'loop'> & {
5
+ /** When true, keyboard navigation will loop from last tab to first, and vice versa.
6
+ * @default true
7
+ */
8
+ loop?: TabsPrimitive.TabsListProps['loop'];
9
+ };
10
+ /** Contains the triggers that are aligned along the edge of the active content.*/
11
+ export declare const List: React.ForwardRefExoticComponent<Omit<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref">, "loop"> & {
12
+ /** When true, keyboard navigation will loop from last tab to first, and vice versa.
13
+ * @default true
14
+ */
15
+ loop?: TabsPrimitive.TabsListProps['loop'];
16
+ } & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,20 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import React__default from "react";
3
+ import * as TabsPrimitive from "@radix-ui/react-tabs";
4
+ import clsx from "clsx";
5
+ import { s as styles, rootClassName } from "./tabs-root.js";
6
+ import { ScrollContext, Scroll } from "./tabs-scroll.js";
7
+ const List = React__default.forwardRef(
8
+ ({ className, ...props }, forwardRef) => {
9
+ const classes = clsx([styles[`${rootClassName}__list`]], className);
10
+ const scrollContext = React__default.useContext(ScrollContext);
11
+ if (!scrollContext) {
12
+ return /* @__PURE__ */ jsx(Scroll, { children: /* @__PURE__ */ jsx(TabsPrimitive.List, { ...props, ref: forwardRef, className: classes }) });
13
+ }
14
+ return /* @__PURE__ */ jsx(TabsPrimitive.List, { ...props, ref: forwardRef, className: classes });
15
+ }
16
+ );
17
+ List.displayName = "List";
18
+ export {
19
+ List
20
+ };
@@ -0,0 +1,46 @@
1
+ import { default as React } from 'react';
2
+
3
+ import * as TabsPrimitive from '@radix-ui/react-tabs';
4
+ export declare const rootClassName = "teddy-tabs";
5
+ export type RootProps = Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange' | 'activationMode'> & {
6
+ /** The controlled value of the tab to activate. Should be used in conjunction with onValueChange. */
7
+ value?: TabsPrimitive.TabsProps['value'];
8
+ /** Event handler called when the value changes. */
9
+ onValueChange?: TabsPrimitive.TabsProps['onValueChange'];
10
+ /** 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. */
11
+ defaultValue?: TabsPrimitive.TabsProps['defaultValue'];
12
+ activationMode?: TabsPrimitive.TabsProps['activationMode'];
13
+ /** Makes the tabs span the full width of the container */
14
+ fullWidth?: boolean;
15
+ /** Snaps the tab to center on click
16
+ * @default true
17
+ */
18
+ snapCenter?: boolean;
19
+ };
20
+ type ActiveElement = {
21
+ left: number;
22
+ width: number;
23
+ bottom: number;
24
+ };
25
+ type RootContextType = {
26
+ activeElement: ActiveElement | null;
27
+ setActiveElement: React.Dispatch<React.SetStateAction<ActiveElement | null>>;
28
+ snapCenter: boolean;
29
+ };
30
+ export declare const RootContext: React.Context<RootContextType | undefined>;
31
+ export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref">, "defaultValue" | "value" | "onValueChange" | "activationMode"> & {
32
+ /** The controlled value of the tab to activate. Should be used in conjunction with onValueChange. */
33
+ value?: TabsPrimitive.TabsProps['value'];
34
+ /** Event handler called when the value changes. */
35
+ onValueChange?: TabsPrimitive.TabsProps['onValueChange'];
36
+ /** 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. */
37
+ defaultValue?: TabsPrimitive.TabsProps['defaultValue'];
38
+ activationMode?: TabsPrimitive.TabsProps['activationMode'];
39
+ /** Makes the tabs span the full width of the container */
40
+ fullWidth?: boolean | undefined;
41
+ /** Snaps the tab to center on click
42
+ * @default true
43
+ */
44
+ snapCenter?: boolean | undefined;
45
+ } & React.RefAttributes<HTMLDivElement>>;
46
+ export {};
@@ -0,0 +1,41 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import React__default from "react";
3
+ import clsx from "clsx";
4
+ import * as TabsPrimitive from "@radix-ui/react-tabs";
5
+ const styles = {
6
+ "teddy-tabs__list": "_teddy-tabs__list_1sgsx_3",
7
+ "teddy-tabs--full-width": "_teddy-tabs--full-width_1sgsx_10",
8
+ "teddy-tabs__trigger": "_teddy-tabs__trigger_1sgsx_13",
9
+ "teddy-tabs__indicator": "_teddy-tabs__indicator_1sgsx_28",
10
+ "teddy-tabs__scroll-button": "_teddy-tabs__scroll-button_1sgsx_34"
11
+ };
12
+ const rootClassName = "teddy-tabs";
13
+ const RootContext = React__default.createContext(void 0);
14
+ const Root = React__default.forwardRef(
15
+ ({ className, fullWidth, snapCenter = true, ...props }, forwardRef) => {
16
+ const [activeElement, setActiveElement] = React__default.useState(null);
17
+ const classes = clsx(
18
+ [styles[`${rootClassName}`]],
19
+ { [styles[`${rootClassName}--full-width`]]: fullWidth },
20
+ className
21
+ );
22
+ return /* @__PURE__ */ jsx(
23
+ RootContext.Provider,
24
+ {
25
+ value: {
26
+ activeElement,
27
+ setActiveElement,
28
+ snapCenter
29
+ },
30
+ children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ...props, ref: forwardRef, className: classes })
31
+ }
32
+ );
33
+ }
34
+ );
35
+ Root.displayName = "Root";
36
+ export {
37
+ Root,
38
+ RootContext,
39
+ rootClassName,
40
+ styles as s
41
+ };
@@ -0,0 +1,27 @@
1
+ import { default as React } from 'react';
2
+ import { ScrollArea } from '../scroll-area';
3
+
4
+ export type ScrollButtonProps = React.ComponentPropsWithoutRef<typeof ScrollArea.Button>;
5
+ /** */
6
+ export declare const ScrollButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<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/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 & {
7
+ asChild?: boolean | undefined;
8
+ loading?: boolean | undefined;
9
+ fullWidth?: boolean | undefined;
10
+ size?: "sm" | "md" | "lg" | undefined;
11
+ variant?: "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
12
+ } & {
13
+ iconOnly: true;
14
+ "aria-label": string;
15
+ } & React.RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<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/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 & {
16
+ asChild?: boolean | undefined;
17
+ loading?: boolean | undefined;
18
+ fullWidth?: boolean | undefined;
19
+ size?: "sm" | "md" | "lg" | undefined;
20
+ variant?: "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
21
+ } & {
22
+ iconOnly?: false | undefined;
23
+ "aria-label"?: string | undefined;
24
+ } & React.RefAttributes<HTMLButtonElement>, "ref">, "hidden"> & {
25
+ direction?: "left" | "right" | "up" | "down" | undefined;
26
+ hidden?: boolean | undefined;
27
+ } & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,15 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import React__default from "react";
3
+ import clsx from "clsx";
4
+ import { s as styles, rootClassName } from "./tabs-root.js";
5
+ import { ScrollArea } from "../scroll-area/index.js";
6
+ const ScrollButton = React__default.forwardRef(
7
+ ({ className, ...props }, forwardRef) => {
8
+ const classes = clsx([styles[`${rootClassName}__scroll-button`]], className);
9
+ return /* @__PURE__ */ jsx(ScrollArea.Button, { variant: "text", ...props, className: classes, ref: forwardRef });
10
+ }
11
+ );
12
+ ScrollButton.displayName = "ScrollButton";
13
+ export {
14
+ ScrollButton
15
+ };
@@ -0,0 +1,9 @@
1
+ import { default as React } from 'react';
2
+ import { ScrollArea } from '../scroll-area';
3
+
4
+ export type ScrollProps = React.ComponentPropsWithoutRef<typeof ScrollArea>;
5
+ export declare const ScrollContext: React.Context<boolean>;
6
+ /** */
7
+ export declare const Scroll: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-scroll-area').ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
8
+ variant?: ("button" | "scrollbar") | undefined;
9
+ } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,22 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import React__default from "react";
3
+ import clsx from "clsx";
4
+ import { s as styles, rootClassName } from "./tabs-root.js";
5
+ import { ScrollArea } from "../scroll-area/index.js";
6
+ import { ScrollButton } from "./tabs-scroll-button.js";
7
+ const ScrollContext = React__default.createContext(false);
8
+ const Scroll = React__default.forwardRef(
9
+ ({ className, children, ...props }, forwardRef) => {
10
+ const classes = clsx([styles[`${rootClassName}__scroll`]], className);
11
+ return /* @__PURE__ */ jsx(ScrollContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(ScrollArea, { ...props, className: classes, ref: forwardRef, children: [
12
+ /* @__PURE__ */ jsx(ScrollButton, { direction: "left" }),
13
+ /* @__PURE__ */ jsx(ScrollButton, { direction: "right" }),
14
+ children
15
+ ] }) });
16
+ }
17
+ );
18
+ Scroll.displayName = "Scroll";
19
+ export {
20
+ Scroll,
21
+ ScrollContext
22
+ };
@@ -0,0 +1,16 @@
1
+ import { default as React } from 'react';
2
+
3
+ import * as TabsPrimitive from '@radix-ui/react-tabs';
4
+ export type TriggerProps = Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'value' | 'disabled'> & {
5
+ /** A unique value that associates the trigger with a content. */
6
+ value: TabsPrimitive.TabsTriggerProps['value'];
7
+ /** When true, prevents the user from interacting with the tab. */
8
+ disabled?: TabsPrimitive.TabsTriggerProps['disabled'];
9
+ };
10
+ /** The button that activates its associated content.*/
11
+ export declare const Trigger: React.ForwardRefExoticComponent<Omit<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref">, "disabled" | "value"> & {
12
+ /** A unique value that associates the trigger with a content. */
13
+ value: TabsPrimitive.TabsTriggerProps['value'];
14
+ /** When true, prevents the user from interacting with the tab. */
15
+ disabled?: TabsPrimitive.TabsTriggerProps['disabled'];
16
+ } & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,28 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import React__default from "react";
3
+ import * as TabsPrimitive from "@radix-ui/react-tabs";
4
+ import clsx from "clsx";
5
+ import { s as styles, rootClassName, RootContext } from "./tabs-root.js";
6
+ import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
7
+ import { ScrollArea } from "../scroll-area/index.js";
8
+ import { Button } from "../button/button.js";
9
+ const Trigger = React__default.forwardRef(
10
+ ({ className, ...props }, forwardRef) => {
11
+ const classes = clsx([styles[`${rootClassName}__trigger`]], className);
12
+ const context = React__default.useContext(RootContext);
13
+ function onClick() {
14
+ return composeEventHandlers(
15
+ props.onClick,
16
+ (e) => context == null ? void 0 : context.setActiveElement(e.currentTarget.getBoundingClientRect())
17
+ );
18
+ }
19
+ if (context == null ? void 0 : context.snapCenter) {
20
+ return /* @__PURE__ */ jsx(ScrollArea.Item, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ...props, onClick, ref: forwardRef, className: classes }) }) });
21
+ }
22
+ return /* @__PURE__ */ jsx(Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ...props, onClick, ref: forwardRef, className: classes }) });
23
+ }
24
+ );
25
+ Trigger.displayName = "Trigger";
26
+ export {
27
+ Trigger
28
+ };
@@ -74,7 +74,7 @@ export declare const TextField: React.ForwardRefExoticComponent<Omit<React.Detai
74
74
  */
75
75
  isRequired?: boolean | undefined;
76
76
  } & React.RefAttributes<HTMLDivElement>> & {
77
- Input: React.ForwardRefExoticComponent<Omit<import('../input').InputProps, "disabled" | "id" | "readOnly" | "required"> & React.RefAttributes<HTMLInputElement>>;
77
+ Input: React.ForwardRefExoticComponent<Omit<import('../input').InputProps, "id" | "disabled" | "readOnly" | "required"> & React.RefAttributes<HTMLInputElement>>;
78
78
  Label: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-label').LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
79
79
  disabled?: boolean | undefined;
80
80
  isRequired?: boolean | undefined;
@@ -29,8 +29,8 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHT
29
29
  Input: React.ForwardRefExoticComponent<ToggleInputProps & React.RefAttributes<HTMLButtonElement>>;
30
30
  Thumb: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchThumbProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
31
31
  Indicator: React.ForwardRefExoticComponent<Partial<Omit<React.SVGProps<SVGSVGElement> & {
32
- name: "key" | "search" | "split" | "link" | "add" | "reverse" | "infinite" | "radio" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "menu" | "map" | "summary" | "time" | "video" | "image" | "stop" | "download" | "alert" | "email" | "sync" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
33
- size?: ("sm" | "md" | "lg" | "xl" | "font" | "xxs" | "xs") | undefined;
32
+ name: "link" | "map" | "menu" | "search" | "summary" | "time" | "video" | "filter" | "image" | "stop" | "key" | "x" | "download" | "split" | "alert" | "radio" | "email" | "copy" | "add" | "reverse" | "infinite" | "visible" | "help" | "zoom-out" | "zoom" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "sync" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
33
+ size?: ("xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "font") | undefined;
34
34
  children?: React.ReactNode;
35
35
  }, "ref">> & React.RefAttributes<SVGSVGElement>>;
36
36
  };
@@ -0,0 +1,14 @@
1
+ const styles = {
2
+ "teddy-drawer__overlay": "_teddy-drawer__overlay_1sy9d_17",
3
+ "teddy-drawer__overlay--container": "_teddy-drawer__overlay--container_1sy9d_29",
4
+ "teddy-drawer__content": "_teddy-drawer__content_1sy9d_35",
5
+ "teddy-drawer__close--floating": "_teddy-drawer__close--floating_1sy9d_50",
6
+ "drawer-overlay-no-op": "_drawer-overlay-no-op_1sy9d_1",
7
+ "teddy-fade-in": "_teddy-fade-in_1sy9d_1",
8
+ "teddy-fade-out": "_teddy-fade-out_1sy9d_1",
9
+ "drawer-content-show": "_drawer-content-show_1sy9d_1",
10
+ "drawer-content-hide": "_drawer-content-hide_1sy9d_1"
11
+ };
12
+ export {
13
+ styles as s
14
+ };
package/dist/main.js CHANGED
@@ -1,3 +1,6 @@
1
+ import { ScrollArea } from "./components/scroll-area/index.js";
2
+ import { Tabs } from "./components/tabs/index.js";
3
+ import { Drawer } from "./components/drawer/index.js";
1
4
  import { Image } from "./components/image/image.js";
2
5
  import { Chip } from "./components/chip/index.js";
3
6
  import { Modal } from "./components/modal/modal.js";
@@ -9,7 +12,7 @@ import { Card } from "./components/card/card.js";
9
12
  import { Grid } from "./components/grid/grid.js";
10
13
  import { NavigationMenu } from "./components/navigation-menu/navigation-menu.js";
11
14
  import { Toggle } from "./components/toggle/toggle.js";
12
- import { Accordion } from "./components/accordion/accordion.js";
15
+ import { Accordion } from "./components/accordion/index.js";
13
16
  import { Link } from "./components/link/link.js";
14
17
  import { Badge } from "./components/badge/badge.js";
15
18
  import { Button } from "./components/button/button.js";
@@ -39,6 +42,7 @@ export {
39
42
  Button,
40
43
  Card,
41
44
  Chip,
45
+ Drawer,
42
46
  FieldErrorText,
43
47
  Flex,
44
48
  Grid,
@@ -54,7 +58,9 @@ export {
54
58
  NavigationMenu,
55
59
  Notification,
56
60
  RadioGroup,
61
+ ScrollArea,
57
62
  Spinner,
63
+ Tabs,
58
64
  Text,
59
65
  TextField,
60
66
  TextSpacing,