@telia/teddy 0.0.20 → 0.0.22
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.
- package/README.md +4 -6
- package/dist/components/accordion/accordion-content.d.ts +5 -0
- package/dist/components/accordion/accordion-content.js +15 -0
- package/dist/components/accordion/accordion-header.d.ts +6 -0
- package/dist/components/accordion/accordion-header.js +16 -0
- package/dist/components/accordion/accordion-indicator.d.ts +5 -0
- package/dist/components/accordion/accordion-indicator.js +16 -0
- package/dist/components/accordion/accordion-item.d.ts +8 -0
- package/dist/components/accordion/accordion-item.js +15 -0
- package/dist/components/accordion/accordion-root.d.ts +15 -0
- package/dist/components/accordion/accordion-root.js +39 -0
- package/dist/components/accordion/accordion-title.d.ts +7 -0
- package/dist/components/accordion/accordion-title.js +15 -0
- package/dist/components/accordion/accordion-trigger.d.ts +12 -0
- package/dist/components/accordion/accordion-trigger.js +20 -0
- package/dist/components/accordion/index.d.ts +29 -2
- package/dist/components/accordion/index.js +15 -1
- package/dist/components/badge/badge.js +1 -1
- package/dist/components/card/card.d.ts +1 -1
- package/dist/components/chip/chip-indicator.d.ts +2 -2
- package/dist/components/chip/chip-indicator.js +1 -1
- package/dist/components/chip/index.d.ts +2 -2
- package/dist/components/drawer/drawer-close.d.ts +15 -0
- package/dist/components/drawer/drawer-close.js +22 -0
- package/dist/components/drawer/drawer-content.d.ts +22 -0
- package/dist/components/drawer/drawer-content.js +25 -0
- package/dist/components/drawer/drawer-description.d.ts +9 -0
- package/dist/components/drawer/drawer-description.js +19 -0
- package/dist/components/drawer/drawer-footer.d.ts +8 -0
- package/dist/components/drawer/drawer-footer.js +16 -0
- package/dist/components/drawer/drawer-overlay.d.ts +13 -0
- package/dist/components/drawer/drawer-overlay.js +26 -0
- package/dist/components/drawer/drawer-root.d.ts +29 -0
- package/dist/components/drawer/drawer-root.js +11 -0
- package/dist/components/drawer/drawer-title.d.ts +9 -0
- package/dist/components/drawer/drawer-title.js +17 -0
- package/dist/components/drawer/drawer-trigger.d.ts +12 -0
- package/dist/components/drawer/drawer-trigger.js +10 -0
- package/dist/components/drawer/index.js +20 -0
- package/dist/components/field-error-text/field-error-text.js +1 -1
- package/dist/components/icon/icon.js +1 -1
- package/dist/components/icon/index.js +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +4 -2
- package/dist/components/input/input.js +1 -1
- package/dist/components/modal/modal.js +11 -10
- package/dist/components/navigation-menu/navigation-menu.d.ts +1 -1
- package/dist/components/notification/notification.d.ts +2 -2
- package/dist/components/notification/notification.js +1 -1
- package/dist/components/text-field/text-field.d.ts +1 -1
- package/dist/components/toggle/toggle.d.ts +2 -2
- package/dist/components/toggle/toggle.js +1 -1
- package/dist/drawer.module-B3QhrxH1.js +14 -0
- package/dist/main.js +4 -2
- package/dist/style.css +273 -172
- package/dist/utils/generate-styling/grid.d.ts +24 -24
- package/dist/utils/generate-styling/index.d.ts +16 -16
- package/dist/utils/generate-styling/util.d.ts +2 -2
- package/package.json +14 -13
- package/dist/components/accordion/accordion.d.ts +0 -61
- package/dist/components/accordion/accordion.js +0 -93
- /package/dist/assets/{5636ec8e4de58d64.svg → sprite.5636ec8e-teddy.svg} +0 -0
package/README.md
CHANGED
|
@@ -22,7 +22,10 @@ Teddy is built on a foundation of three core principles:
|
|
|
22
22
|
- **Accessibility**: With a commitment to inclusivity, accessibility is at the forefront of our design process. We aim
|
|
23
23
|
to make our components universally usable, adhering to WCAG guidelines and accessibility best practices.
|
|
24
24
|
|
|
25
|
-
##
|
|
25
|
+
## Contributing
|
|
26
|
+
|
|
27
|
+
We welcome contributions to Teddy! Whether you're improving existing components, adding new features, or enhancing
|
|
28
|
+
documentation, your input is invaluable. See our [`CONTRIBUTING.md`](/docs/CONTRIBUTING.md) for contribution guidelines.
|
|
26
29
|
|
|
27
30
|
To contribute to or utilize Teddy:
|
|
28
31
|
|
|
@@ -76,8 +79,3 @@ The `other` directory supports the development and documentation of Teddy.
|
|
|
76
79
|
- **Tokens**: Source files for design tokens that dictate the library's foundational styles.
|
|
77
80
|
- **SVG-Icons**: A collection of SVG files that are transformed into svg-sprite for the library. For more information,
|
|
78
81
|
[read the icon.md file](/docs/icons.md)
|
|
79
|
-
|
|
80
|
-
## Contributing
|
|
81
|
-
|
|
82
|
-
We welcome contributions to Teddy! Whether you're improving existing components, adding new features, or enhancing
|
|
83
|
-
documentation, your input is invaluable. See our [`CONTRIBUTING.md`](/docs/CONTRIBUTING.md) for contribution guidelines.
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
4
|
+
export type ContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
|
|
5
|
+
export declare const Content: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import React__default from "react";
|
|
4
|
+
import { s as styles, rootClassName } from "./accordion-root.js";
|
|
5
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
6
|
+
const Content = React__default.forwardRef(
|
|
7
|
+
({ className, children, ...props }, forwardRef) => {
|
|
8
|
+
const classes = clsx([styles[`${rootClassName}__content`]], className);
|
|
9
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Content, { ...props, ref: forwardRef, className: classes, children });
|
|
10
|
+
}
|
|
11
|
+
);
|
|
12
|
+
Content.displayName = "Content";
|
|
13
|
+
export {
|
|
14
|
+
Content
|
|
15
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
4
|
+
export type HeaderProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>;
|
|
5
|
+
/** Wraps an 'Accordion.Trigger'. Use the 'asChild' prop to update it to the appropriate heading level for your page.*/
|
|
6
|
+
export declare const Header: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionHeaderProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import React__default from "react";
|
|
4
|
+
import { s as styles, rootClassName } from "./accordion-root.js";
|
|
5
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
6
|
+
import { Heading } from "../heading/heading.js";
|
|
7
|
+
const Header = React__default.forwardRef(
|
|
8
|
+
({ className, children, ...props }, forwardRef) => {
|
|
9
|
+
const classes = clsx([styles[`${rootClassName}__header`]], className);
|
|
10
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { ...props, ref: forwardRef, asChild: true, className: classes, children: /* @__PURE__ */ jsx(Heading, { variant: "title-100", ...props.asChild ? { asChild: true } : { as: "h3" }, children }) });
|
|
11
|
+
}
|
|
12
|
+
);
|
|
13
|
+
Header.displayName = "Header";
|
|
14
|
+
export {
|
|
15
|
+
Header
|
|
16
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import React__default from "react";
|
|
4
|
+
import { s as styles, rootClassName } from "./accordion-root.js";
|
|
5
|
+
import "../../assets/sprite.5636ec8e-teddy.svg";
|
|
6
|
+
import { Icon } from "../icon/icon.js";
|
|
7
|
+
const Indicator = React__default.forwardRef(
|
|
8
|
+
({ className, children, ...props }, forwardRef) => {
|
|
9
|
+
const classes = clsx([styles[`${rootClassName}__indicator`]], className);
|
|
10
|
+
return /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, name: "chevron-down", ...props, ref: forwardRef, className: classes, children });
|
|
11
|
+
}
|
|
12
|
+
);
|
|
13
|
+
Indicator.displayName = "Indicator";
|
|
14
|
+
export {
|
|
15
|
+
Indicator
|
|
16
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
4
|
+
export type ItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
|
|
5
|
+
/**
|
|
6
|
+
* Contains all the parts of a collapsible section.
|
|
7
|
+
*/
|
|
8
|
+
export declare const Item: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import React__default from "react";
|
|
4
|
+
import { s as styles, rootClassName } from "./accordion-root.js";
|
|
5
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
6
|
+
const Item = React__default.forwardRef(
|
|
7
|
+
({ className, children, ...props }, forwardRef) => {
|
|
8
|
+
const classes = clsx([styles[`${rootClassName}__item`]], className);
|
|
9
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ...props, ref: forwardRef, className: classes, children });
|
|
10
|
+
}
|
|
11
|
+
);
|
|
12
|
+
Item.displayName = "Item";
|
|
13
|
+
export {
|
|
14
|
+
Item
|
|
15
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
4
|
+
export declare const rootClassName = "teddy-accordion";
|
|
5
|
+
/** -------------------------------------------------------------------------------------------------
|
|
6
|
+
* Root
|
|
7
|
+
* -----------------------------------------------------------------------------------------------*/
|
|
8
|
+
export type RootProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
|
|
9
|
+
variant?: 'default' | 'negative';
|
|
10
|
+
indented?: boolean;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* The Accordion component is used to render the root element.
|
|
14
|
+
*/
|
|
15
|
+
export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import React__default from "react";
|
|
4
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
5
|
+
const slideDown = "_slideDown_fs2mc_1";
|
|
6
|
+
const slideUp = "_slideUp_fs2mc_1";
|
|
7
|
+
const styles = {
|
|
8
|
+
"teddy-accordion--indented": "_teddy-accordion--indented_fs2mc_3",
|
|
9
|
+
"teddy-accordion__trigger": "_teddy-accordion__trigger_fs2mc_3",
|
|
10
|
+
"teddy-accordion__content": "_teddy-accordion__content_fs2mc_4",
|
|
11
|
+
"teddy-accordion--negative": "_teddy-accordion--negative_fs2mc_13",
|
|
12
|
+
"teddy-accordion__header": "_teddy-accordion__header_fs2mc_13",
|
|
13
|
+
"teddy-accordion__title": "_teddy-accordion__title_fs2mc_17",
|
|
14
|
+
"teddy-accordion__item": "_teddy-accordion__item_fs2mc_28",
|
|
15
|
+
"teddy-accordion": "_teddy-accordion_fs2mc_3",
|
|
16
|
+
"teddy-accordion__indicator": "_teddy-accordion__indicator_fs2mc_107",
|
|
17
|
+
slideDown,
|
|
18
|
+
slideUp
|
|
19
|
+
};
|
|
20
|
+
const rootClassName = "teddy-accordion";
|
|
21
|
+
const Root = React__default.forwardRef(
|
|
22
|
+
({ className, variant = "default", children, indented = false, ...props }, forwardRef) => {
|
|
23
|
+
const classes = clsx(
|
|
24
|
+
styles[rootClassName],
|
|
25
|
+
styles[`${rootClassName}--${variant}`],
|
|
26
|
+
{
|
|
27
|
+
[styles[`${rootClassName}--indented`]]: indented
|
|
28
|
+
},
|
|
29
|
+
className
|
|
30
|
+
);
|
|
31
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { ...props, ref: forwardRef, className: classes, children });
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
Root.displayName = "Root";
|
|
35
|
+
export {
|
|
36
|
+
Root,
|
|
37
|
+
rootClassName,
|
|
38
|
+
styles as s
|
|
39
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { HeadingProps } from '../heading';
|
|
3
|
+
|
|
4
|
+
export type TitleProps = Omit<HeadingProps['Root'], 'variant'> & {
|
|
5
|
+
variant?: HeadingProps['Root']['variant'];
|
|
6
|
+
} & (HeadingProps['AsChildProps'] | HeadingProps['AsProps']);
|
|
7
|
+
export declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import React__default from "react";
|
|
4
|
+
import { s as styles, rootClassName } from "./accordion-root.js";
|
|
5
|
+
import { Heading } from "../heading/heading.js";
|
|
6
|
+
const Title = React__default.forwardRef(
|
|
7
|
+
({ className, children, variant = "title-400", ...props }, forwardRef) => {
|
|
8
|
+
const classes = clsx([styles[`${rootClassName}__title`]], className);
|
|
9
|
+
return /* @__PURE__ */ jsx(Heading, { ...props, variant, ref: forwardRef, className: classes, children });
|
|
10
|
+
}
|
|
11
|
+
);
|
|
12
|
+
Title.displayName = "Title";
|
|
13
|
+
export {
|
|
14
|
+
Title
|
|
15
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
4
|
+
/** -------------------------------------------------------------------------------------------------
|
|
5
|
+
* Trigger
|
|
6
|
+
* -----------------------------------------------------------------------------------------------*/
|
|
7
|
+
export type TriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
|
|
8
|
+
hideIndicator?: boolean;
|
|
9
|
+
};
|
|
10
|
+
export declare const Trigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
11
|
+
hideIndicator?: boolean | undefined;
|
|
12
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import React__default from "react";
|
|
4
|
+
import { s as styles, rootClassName } from "./accordion-root.js";
|
|
5
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
6
|
+
import { Slottable } from "@radix-ui/react-slot";
|
|
7
|
+
import { Indicator } from "./accordion-indicator.js";
|
|
8
|
+
const Trigger = React__default.forwardRef(
|
|
9
|
+
({ className, children, hideIndicator, ...props }, forwardRef) => {
|
|
10
|
+
const classes = clsx([styles[`${rootClassName}__trigger`]], className);
|
|
11
|
+
return /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, { ...props, ref: forwardRef, className: classes, children: [
|
|
12
|
+
/* @__PURE__ */ jsx(Slottable, { children }),
|
|
13
|
+
!hideIndicator && /* @__PURE__ */ jsx(Indicator, {})
|
|
14
|
+
] });
|
|
15
|
+
}
|
|
16
|
+
);
|
|
17
|
+
Trigger.displayName = "Trigger";
|
|
18
|
+
export {
|
|
19
|
+
Trigger
|
|
20
|
+
};
|
|
@@ -1,2 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { RootProps } from './accordion-root';
|
|
2
|
+
import { TriggerProps } from './accordion-trigger';
|
|
3
|
+
import { ContentProps } from './accordion-content';
|
|
4
|
+
import { HeaderProps } from './accordion-header';
|
|
5
|
+
import { ItemProps } from './accordion-item';
|
|
6
|
+
import { IndicatorProps } from './accordion-indicator';
|
|
7
|
+
import { TitleProps } from './accordion-title';
|
|
8
|
+
|
|
9
|
+
declare const Accordion: import('react').ForwardRefExoticComponent<RootProps & import('react').RefAttributes<HTMLDivElement>> & {
|
|
10
|
+
Trigger: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-accordion').AccordionTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
11
|
+
hideIndicator?: boolean | undefined;
|
|
12
|
+
} & import('react').RefAttributes<HTMLButtonElement>>;
|
|
13
|
+
Content: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-accordion').AccordionContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
14
|
+
Header: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-accordion').AccordionHeaderProps & import('react').RefAttributes<HTMLHeadingElement>, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
|
|
15
|
+
Item: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-accordion').AccordionItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
16
|
+
Indicator: import('react').ForwardRefExoticComponent<Omit<Partial<import('..').IconProps>, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
|
|
17
|
+
Title: import('react').ForwardRefExoticComponent<TitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
|
|
18
|
+
};
|
|
19
|
+
type AccordionProps = {
|
|
20
|
+
Root: RootProps;
|
|
21
|
+
Trigger: TriggerProps;
|
|
22
|
+
Content: ContentProps;
|
|
23
|
+
Header: HeaderProps;
|
|
24
|
+
Item: ItemProps;
|
|
25
|
+
Indicator: IndicatorProps;
|
|
26
|
+
Title: TitleProps;
|
|
27
|
+
};
|
|
28
|
+
export { Accordion };
|
|
29
|
+
export type { AccordionProps };
|
|
@@ -1,4 +1,18 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Root } from "./accordion-root.js";
|
|
2
|
+
import { Trigger } from "./accordion-trigger.js";
|
|
3
|
+
import { Content } from "./accordion-content.js";
|
|
4
|
+
import { Header } from "./accordion-header.js";
|
|
5
|
+
import { Item } from "./accordion-item.js";
|
|
6
|
+
import { Indicator } from "./accordion-indicator.js";
|
|
7
|
+
import { Title } from "./accordion-title.js";
|
|
8
|
+
const Accordion = Object.assign(Root, {
|
|
9
|
+
Trigger,
|
|
10
|
+
Content,
|
|
11
|
+
Header,
|
|
12
|
+
Item,
|
|
13
|
+
Indicator,
|
|
14
|
+
Title
|
|
15
|
+
});
|
|
2
16
|
export {
|
|
3
17
|
Accordion
|
|
4
18
|
};
|
|
@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import clsx from "clsx";
|
|
3
3
|
import React__default from "react";
|
|
4
4
|
import { Slottable, Slot } from "@radix-ui/react-slot";
|
|
5
|
-
import "../../assets/
|
|
5
|
+
import "../../assets/sprite.5636ec8e-teddy.svg";
|
|
6
6
|
import { Icon } from "../icon/icon.js";
|
|
7
7
|
const styles = {
|
|
8
8
|
"teddy-badge": "_teddy-badge_sg6ab_1",
|
|
@@ -58,7 +58,7 @@ declare const Card: React.ForwardRefExoticComponent<RootProps & React.RefAttribu
|
|
|
58
58
|
Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
59
59
|
Illustration: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
60
60
|
/** The inset allows make the image bleed out to the edges */
|
|
61
|
-
inset?: "
|
|
61
|
+
inset?: "all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
|
|
62
62
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
63
63
|
Button: React.ForwardRefExoticComponent<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 & {
|
|
64
64
|
asChild?: boolean | undefined;
|
|
@@ -3,7 +3,7 @@ import { Icon } from '../icon';
|
|
|
3
3
|
|
|
4
4
|
export type IndicatorProps = Partial<React.ComponentPropsWithoutRef<typeof Icon>>;
|
|
5
5
|
export declare const Indicator: React.ForwardRefExoticComponent<Partial<Omit<React.SVGProps<SVGSVGElement> & {
|
|
6
|
-
name: "
|
|
7
|
-
size?: ("
|
|
6
|
+
name: "link" | "map" | "menu" | "search" | "summary" | "time" | "video" | "filter" | "image" | "stop" | "split" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "copy" | "dislike" | "download" | "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" | "visible" | "volume" | "zoom-out" | "zoom" | "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" | "email" | "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" | "add" | "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" | "infinite" | "job-search" | "key" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "radio" | "recycle" | "reservation" | "reverse" | "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" | "x" | "alert-filled" | "alert" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "help" | "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";
|
|
7
|
+
size?: ("font" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl") | undefined;
|
|
8
8
|
children?: React.ReactNode;
|
|
9
9
|
}, "ref">> & React.RefAttributes<SVGSVGElement>>;
|
|
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import React__default from "react";
|
|
3
3
|
import clsx from "clsx";
|
|
4
4
|
import { s as styles, rootClassName } from "./chip.js";
|
|
5
|
-
import "../../assets/
|
|
5
|
+
import "../../assets/sprite.5636ec8e-teddy.svg";
|
|
6
6
|
import { Icon } from "../icon/icon.js";
|
|
7
7
|
const Indicator = React__default.forwardRef(
|
|
8
8
|
({ className, ...props }, forwardRef) => {
|
|
@@ -5,8 +5,8 @@ import { ItemProps } from './chip-item';
|
|
|
5
5
|
export declare const Chip: import('react').ForwardRefExoticComponent<RootProps & import('react').RefAttributes<HTMLDivElement>> & {
|
|
6
6
|
Item: import('react').ForwardRefExoticComponent<ItemProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
7
7
|
Indicator: import('react').ForwardRefExoticComponent<Partial<Omit<import('react').SVGProps<SVGSVGElement> & {
|
|
8
|
-
name: "
|
|
9
|
-
size?: ("
|
|
8
|
+
name: "link" | "map" | "menu" | "search" | "summary" | "time" | "video" | "filter" | "image" | "stop" | "split" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "copy" | "dislike" | "download" | "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" | "visible" | "volume" | "zoom-out" | "zoom" | "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" | "email" | "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" | "add" | "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" | "infinite" | "job-search" | "key" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "radio" | "recycle" | "reservation" | "reverse" | "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" | "x" | "alert-filled" | "alert" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "help" | "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";
|
|
9
|
+
size?: ("font" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl") | undefined;
|
|
10
10
|
children?: import('react').ReactNode;
|
|
11
11
|
}, "ref">> & import('react').RefAttributes<SVGSVGElement>>;
|
|
12
12
|
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
import * as DrawerPrimitive from '@radix-ui/react-dialog';
|
|
4
|
+
/** -------------------------------------------------------------------------------------------------
|
|
5
|
+
* Close
|
|
6
|
+
* -----------------------------------------------------------------------------------------------*/
|
|
7
|
+
export type CloseProps = Omit<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close>, 'asChild' | 'children'> & ({
|
|
8
|
+
children: React.ReactElement;
|
|
9
|
+
slot: 'content';
|
|
10
|
+
} | {
|
|
11
|
+
['aria-label']: string;
|
|
12
|
+
slot: 'floating';
|
|
13
|
+
children?: never;
|
|
14
|
+
});
|
|
15
|
+
export declare const Close: React.ForwardRefExoticComponent<CloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import React__default from "react";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import * as DrawerPrimitive from "@radix-ui/react-dialog";
|
|
5
|
+
import { s as styles } from "../../drawer.module-B3QhrxH1.js";
|
|
6
|
+
import { rootClassName } from "./drawer-root.js";
|
|
7
|
+
import "../../assets/sprite.5636ec8e-teddy.svg";
|
|
8
|
+
import { Icon } from "../icon/icon.js";
|
|
9
|
+
import { Button } from "../button/button.js";
|
|
10
|
+
const Close = React__default.forwardRef(
|
|
11
|
+
({ className, ...props }, forwardedRef) => {
|
|
12
|
+
const classes = clsx([styles[`${rootClassName}__close`]], {
|
|
13
|
+
[styles[`${rootClassName}__close--floating`]]: props.slot === "floating",
|
|
14
|
+
className
|
|
15
|
+
});
|
|
16
|
+
return /* @__PURE__ */ jsx(DrawerPrimitive.Close, { ...props, className: classes, ref: forwardedRef, asChild: true, children: props.children || /* @__PURE__ */ jsx(Button, { variant: "tertiary-purple", iconOnly: true, "aria-label": props["aria-label"], children: /* @__PURE__ */ jsx(Icon, { name: "close" }) }) });
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
Close.displayName = "Close";
|
|
20
|
+
export {
|
|
21
|
+
Close
|
|
22
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
import * as DrawerPrimitive from '@radix-ui/react-dialog';
|
|
4
|
+
/** -------------------------------------------------------------------------------------------------
|
|
5
|
+
* Content
|
|
6
|
+
* -----------------------------------------------------------------------------------------------*/
|
|
7
|
+
export type ContentProps = Omit<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>, 'forceMount' | 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onEscapeKeyDown' | 'onPointerDownOutside' | 'onInteractOutside'> & {
|
|
8
|
+
forceMount?: DrawerPrimitive.DialogContentProps['forceMount'];
|
|
9
|
+
onOpenAutoFocus?: DrawerPrimitive.DialogContentProps['onOpenAutoFocus'];
|
|
10
|
+
onCloseAutoFocus?: DrawerPrimitive.DialogContentProps['onCloseAutoFocus'];
|
|
11
|
+
onEscapeKeyDown?: DrawerPrimitive.DialogContentProps['onEscapeKeyDown'];
|
|
12
|
+
onPointerDownOutside?: DrawerPrimitive.DialogContentProps['onPointerDownOutside'];
|
|
13
|
+
onInteractOutside?: DrawerPrimitive.DialogContentProps['onInteractOutside'];
|
|
14
|
+
};
|
|
15
|
+
export declare const Content: React.ForwardRefExoticComponent<Omit<Omit<DrawerPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref">, "forceMount" | "onEscapeKeyDown" | "onPointerDownOutside" | "onInteractOutside" | "onOpenAutoFocus" | "onCloseAutoFocus"> & {
|
|
16
|
+
forceMount?: DrawerPrimitive.DialogContentProps['forceMount'];
|
|
17
|
+
onOpenAutoFocus?: DrawerPrimitive.DialogContentProps['onOpenAutoFocus'];
|
|
18
|
+
onCloseAutoFocus?: DrawerPrimitive.DialogContentProps['onCloseAutoFocus'];
|
|
19
|
+
onEscapeKeyDown?: DrawerPrimitive.DialogContentProps['onEscapeKeyDown'];
|
|
20
|
+
onPointerDownOutside?: DrawerPrimitive.DialogContentProps['onPointerDownOutside'];
|
|
21
|
+
onInteractOutside?: DrawerPrimitive.DialogContentProps['onInteractOutside'];
|
|
22
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import React__default from "react";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import * as DrawerPrimitive from "@radix-ui/react-dialog";
|
|
5
|
+
import { s as styles } from "../../drawer.module-B3QhrxH1.js";
|
|
6
|
+
import { rootClassName } from "./drawer-root.js";
|
|
7
|
+
import { OverlayContext, Overlay } from "./drawer-overlay.js";
|
|
8
|
+
const InnerContent = React__default.forwardRef(
|
|
9
|
+
function InnerContent2({ children, className, ...props }, forwardedRef) {
|
|
10
|
+
const classes = clsx([styles[`${rootClassName}__content`]], className);
|
|
11
|
+
return /* @__PURE__ */ jsx(DrawerPrimitive.Content, { ...props, ref: forwardedRef, className: classes, children });
|
|
12
|
+
}
|
|
13
|
+
);
|
|
14
|
+
const Content = React__default.forwardRef(
|
|
15
|
+
({ forceMount, ...contentProps }, forwardedRef) => {
|
|
16
|
+
const hasOverlay = React__default.useContext(OverlayContext);
|
|
17
|
+
if (!hasOverlay)
|
|
18
|
+
return /* @__PURE__ */ jsx(Overlay, { forceMount, children: /* @__PURE__ */ jsx(InnerContent, { ref: forwardedRef, ...contentProps }) });
|
|
19
|
+
return /* @__PURE__ */ jsx(InnerContent, { ref: forwardedRef, ...contentProps });
|
|
20
|
+
}
|
|
21
|
+
);
|
|
22
|
+
Content.displayName = "Content";
|
|
23
|
+
export {
|
|
24
|
+
Content
|
|
25
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
import * as DrawerPrimitive from '@radix-ui/react-dialog';
|
|
4
|
+
/** -------------------------------------------------------------------------------------------------
|
|
5
|
+
* Description
|
|
6
|
+
* -----------------------------------------------------------------------------------------------*/
|
|
7
|
+
export declare const DescriptionContext: React.Context<boolean>;
|
|
8
|
+
export type DescriptionProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>;
|
|
9
|
+
export declare const Description: React.ForwardRefExoticComponent<Omit<DrawerPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import React__default from "react";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import * as DrawerPrimitive from "@radix-ui/react-dialog";
|
|
5
|
+
import { s as styles } from "../../drawer.module-B3QhrxH1.js";
|
|
6
|
+
import { rootClassName } from "./drawer-root.js";
|
|
7
|
+
import { Text } from "../text/text.js";
|
|
8
|
+
const DescriptionContext = React__default.createContext(false);
|
|
9
|
+
const Description = React__default.forwardRef(
|
|
10
|
+
({ className, children, ...rest }, forwardedRef) => {
|
|
11
|
+
const classes = clsx([styles[`${rootClassName}__description`]], className);
|
|
12
|
+
return /* @__PURE__ */ jsx(DrawerPrimitive.Description, { className: classes, ref: forwardedRef, ...rest, asChild: true, children: /* @__PURE__ */ jsx(Text, { children }) });
|
|
13
|
+
}
|
|
14
|
+
);
|
|
15
|
+
Description.displayName = "Description";
|
|
16
|
+
export {
|
|
17
|
+
Description,
|
|
18
|
+
DescriptionContext
|
|
19
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Flex } from '../flex';
|
|
3
|
+
|
|
4
|
+
/** -------------------------------------------------------------------------------------------------
|
|
5
|
+
* Footer
|
|
6
|
+
* -----------------------------------------------------------------------------------------------*/
|
|
7
|
+
export type FooterProps = React.ComponentPropsWithoutRef<typeof Flex>;
|
|
8
|
+
export declare const Footer: React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import React__default from "react";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import { s as styles } from "../../drawer.module-B3QhrxH1.js";
|
|
5
|
+
import { rootClassName } from "./drawer-root.js";
|
|
6
|
+
import { Flex } from "../flex/flex.js";
|
|
7
|
+
const Footer = React__default.forwardRef(
|
|
8
|
+
({ className, ...rest }, forwardedRef) => {
|
|
9
|
+
const classes = clsx([styles[`${rootClassName}__footer`]], className);
|
|
10
|
+
return /* @__PURE__ */ jsx(Flex, { mt: "auto", justify: "end", gap: "200", className: classes, ref: forwardedRef, ...rest });
|
|
11
|
+
}
|
|
12
|
+
);
|
|
13
|
+
Footer.displayName = "Footer";
|
|
14
|
+
export {
|
|
15
|
+
Footer
|
|
16
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
import * as DrawerPrimitive from '@radix-ui/react-dialog';
|
|
4
|
+
/** -------------------------------------------------------------------------------------------------
|
|
5
|
+
* Overlay
|
|
6
|
+
* -----------------------------------------------------------------------------------------------*/
|
|
7
|
+
export declare const OverlayContext: React.Context<boolean>;
|
|
8
|
+
export type OverlayProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
|
|
9
|
+
container?: React.ComponentProps<typeof DrawerPrimitive.Portal>['container'];
|
|
10
|
+
};
|
|
11
|
+
export declare const Overlay: React.ForwardRefExoticComponent<Omit<DrawerPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
12
|
+
container?: React.ComponentProps<typeof DrawerPrimitive.Portal>['container'];
|
|
13
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import React__default from "react";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import * as DrawerPrimitive from "@radix-ui/react-dialog";
|
|
5
|
+
import { s as styles } from "../../drawer.module-B3QhrxH1.js";
|
|
6
|
+
import { rootClassName } from "./drawer-root.js";
|
|
7
|
+
const OverlayContext = React__default.createContext(false);
|
|
8
|
+
const Overlay = React__default.forwardRef(
|
|
9
|
+
({ className, forceMount, container, ...rest }, forwardedRef) => {
|
|
10
|
+
const classes = clsx(
|
|
11
|
+
[
|
|
12
|
+
styles[`${rootClassName}__overlay`],
|
|
13
|
+
{
|
|
14
|
+
[styles[`${rootClassName}__overlay--container`]]: container
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
className
|
|
18
|
+
);
|
|
19
|
+
return /* @__PURE__ */ jsx(OverlayContext.Provider, { value: true, children: /* @__PURE__ */ jsx(DrawerPrimitive.Portal, { container, forceMount, children: /* @__PURE__ */ jsx(DrawerPrimitive.Overlay, { className: classes, ref: forwardedRef, ...rest }) }) });
|
|
20
|
+
}
|
|
21
|
+
);
|
|
22
|
+
Overlay.displayName = "Overlay";
|
|
23
|
+
export {
|
|
24
|
+
Overlay,
|
|
25
|
+
OverlayContext
|
|
26
|
+
};
|