@bonprix-ds/react-dialog 1.0.1 → 1.0.2
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/dist/index.d.ts +3 -62
- package/dist/src/Dialog.d.ts +34 -0
- package/dist/src/DialogRoot.d.ts +54 -0
- package/dist/src/DialogRoot.js +22 -22
- package/dist/src/DialogRoot.js.map +1 -1
- package/package.json +29 -28
package/dist/index.d.ts
CHANGED
|
@@ -1,62 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
declare const Dialog: {
|
|
5
|
-
(props: DialogProps): default_2.JSX.Element;
|
|
6
|
-
displayName: string;
|
|
7
|
-
Title: {
|
|
8
|
-
({ children }: DialogTitleProps): default_2.JSX.Element;
|
|
9
|
-
displayName: string;
|
|
10
|
-
};
|
|
11
|
-
Content: {
|
|
12
|
-
({ children }: DialogContentProps): default_2.JSX.Element;
|
|
13
|
-
displayName: string;
|
|
14
|
-
};
|
|
15
|
-
ButtonSection: {
|
|
16
|
-
({ children }: DialogButtonSectionProps): default_2.JSX.Element;
|
|
17
|
-
displayName: string;
|
|
18
|
-
};
|
|
19
|
-
PrimaryButton: {
|
|
20
|
-
<C extends default_2.ElementType>({ children, component, ...props }: {
|
|
21
|
-
children: string;
|
|
22
|
-
component?: C | undefined;
|
|
23
|
-
} & Omit<default_2.ComponentProps<C>, "component">): default_2.JSX.Element;
|
|
24
|
-
displayName: string;
|
|
25
|
-
};
|
|
26
|
-
SecondaryButton: {
|
|
27
|
-
<C extends default_2.ElementType>({ children, component, ...props }: {
|
|
28
|
-
children: string;
|
|
29
|
-
component?: C | undefined;
|
|
30
|
-
} & Omit<default_2.ComponentProps<C>, "component">): default_2.JSX.Element;
|
|
31
|
-
displayName: string;
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
export default Dialog;
|
|
35
|
-
|
|
36
|
-
export declare interface DialogButtonSectionProps {
|
|
37
|
-
/** Primary and secondary buttons should be placed inside this section. */
|
|
38
|
-
children: ReactNode;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
export declare interface DialogContentProps {
|
|
42
|
-
/** The content to display in the dialog. */
|
|
43
|
-
children: ReactNode;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export declare interface DialogProps {
|
|
47
|
-
/** Controls the visibility of the dialog. Should be used in conjunction with `onClose`. */
|
|
48
|
-
isOpen: boolean;
|
|
49
|
-
/** Here, all of the subcomponents should be placed. */
|
|
50
|
-
children: ReactNode;
|
|
51
|
-
/** Callback function that is called when the dialog is supposed to be closed. Should be used in conjunction with `isOpen` property. */
|
|
52
|
-
onClose: () => void;
|
|
53
|
-
/** The z-index of the dialog. */
|
|
54
|
-
zIndex?: number;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export declare interface DialogTitleProps {
|
|
58
|
-
/** The title to display in the dialog. */
|
|
59
|
-
children: string;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
export { }
|
|
1
|
+
export { default } from "./src/Dialog";
|
|
2
|
+
export type { Props as DialogProps } from "./src/Dialog";
|
|
3
|
+
export type { DialogButtonSectionProps, DialogContentProps, DialogTitleProps } from "./src/DialogRoot";
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type Props } from "./DialogRoot";
|
|
3
|
+
export type { Props } from "./DialogRoot";
|
|
4
|
+
declare const Dialog: {
|
|
5
|
+
(props: Props): React.JSX.Element;
|
|
6
|
+
displayName: string;
|
|
7
|
+
Title: {
|
|
8
|
+
({ children }: import("./DialogRoot").DialogTitleProps): React.JSX.Element;
|
|
9
|
+
displayName: string;
|
|
10
|
+
};
|
|
11
|
+
Content: {
|
|
12
|
+
({ children }: import("./DialogRoot").DialogContentProps): React.JSX.Element;
|
|
13
|
+
displayName: string;
|
|
14
|
+
};
|
|
15
|
+
ButtonSection: {
|
|
16
|
+
({ children }: import("./DialogRoot").DialogButtonSectionProps): React.JSX.Element;
|
|
17
|
+
displayName: string;
|
|
18
|
+
};
|
|
19
|
+
PrimaryButton: {
|
|
20
|
+
<C extends React.ElementType>({ children, component, ...props }: {
|
|
21
|
+
children: string;
|
|
22
|
+
component?: C | undefined;
|
|
23
|
+
} & Omit<React.ComponentProps<C>, "component">): React.JSX.Element;
|
|
24
|
+
displayName: string;
|
|
25
|
+
};
|
|
26
|
+
SecondaryButton: {
|
|
27
|
+
<C extends React.ElementType>({ children, component, ...props }: {
|
|
28
|
+
children: string;
|
|
29
|
+
component?: C | undefined;
|
|
30
|
+
} & Omit<React.ComponentProps<C>, "component">): React.JSX.Element;
|
|
31
|
+
displayName: string;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
export default Dialog;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React, { ComponentProps, ElementType, ReactNode } from "react";
|
|
2
|
+
export interface Props {
|
|
3
|
+
/** Controls the visibility of the dialog. Should be used in conjunction with `onClose`. */
|
|
4
|
+
isOpen: boolean;
|
|
5
|
+
/** Here, all of the subcomponents should be placed. */
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/** Callback function that is called when the dialog is supposed to be closed. Should be used in conjunction with `isOpen` property. */
|
|
8
|
+
onClose: () => void;
|
|
9
|
+
/** The z-index of the dialog. */
|
|
10
|
+
zIndex?: number;
|
|
11
|
+
}
|
|
12
|
+
export interface DialogTitleProps {
|
|
13
|
+
/** The title to display in the dialog. */
|
|
14
|
+
children: string;
|
|
15
|
+
}
|
|
16
|
+
export interface DialogContentProps {
|
|
17
|
+
/** The content to display in the dialog. */
|
|
18
|
+
children: ReactNode;
|
|
19
|
+
}
|
|
20
|
+
export interface DialogButtonSectionProps {
|
|
21
|
+
/** Primary and secondary buttons should be placed inside this section. */
|
|
22
|
+
children: ReactNode;
|
|
23
|
+
}
|
|
24
|
+
type DialogButtonProps<C extends ElementType> = {
|
|
25
|
+
/** The button text to render. */
|
|
26
|
+
children: string;
|
|
27
|
+
/** The semantic component to render the Button. Preferrably `"button"`. Native props will be passed to this component. */
|
|
28
|
+
component?: C;
|
|
29
|
+
} & Omit<ComponentProps<C>, "component">;
|
|
30
|
+
declare const DialogRoot: {
|
|
31
|
+
({ isOpen, onClose, zIndex, children }: Props): React.JSX.Element;
|
|
32
|
+
displayName: string;
|
|
33
|
+
};
|
|
34
|
+
export declare const Title: {
|
|
35
|
+
({ children }: DialogTitleProps): React.JSX.Element;
|
|
36
|
+
displayName: string;
|
|
37
|
+
};
|
|
38
|
+
export declare const Content: {
|
|
39
|
+
({ children }: DialogContentProps): React.JSX.Element;
|
|
40
|
+
displayName: string;
|
|
41
|
+
};
|
|
42
|
+
export declare const ButtonSection: {
|
|
43
|
+
({ children }: DialogButtonSectionProps): React.JSX.Element;
|
|
44
|
+
displayName: string;
|
|
45
|
+
};
|
|
46
|
+
export declare const PrimaryButton: {
|
|
47
|
+
<C extends ElementType>({ children, component, ...props }: DialogButtonProps<C>): React.JSX.Element;
|
|
48
|
+
displayName: string;
|
|
49
|
+
};
|
|
50
|
+
export declare const SecondaryButton: {
|
|
51
|
+
<C extends ElementType>({ children, component, ...props }: DialogButtonProps<C>): React.JSX.Element;
|
|
52
|
+
displayName: string;
|
|
53
|
+
};
|
|
54
|
+
export default DialogRoot;
|
package/dist/src/DialogRoot.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "react";
|
|
3
|
-
import e from "@
|
|
4
|
-
import t from "
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
3
|
+
import * as e from "@radix-ui/react-dialog";
|
|
4
|
+
import { tv as t } from "tailwind-variants";
|
|
5
|
+
import n from "@bonprix-ds/react-button";
|
|
6
|
+
import r from "@bonprix-ds/react-overlay";
|
|
7
|
+
import { useInnerOpen as i } from "@bonprix-ds/utils";
|
|
8
8
|
import { jsx as a } from "react/jsx-runtime";
|
|
9
9
|
//#region src/DialogRoot.tsx
|
|
10
|
-
var o =
|
|
10
|
+
var o = t({ slots: {
|
|
11
11
|
title: "typography-bonprix-h4 text-clr-primary px-10",
|
|
12
12
|
wrapper: "flex flex-col gap-5 h-full",
|
|
13
13
|
scrollArea: "px-10 h-full scroll-area relative",
|
|
14
14
|
contentWrapper: "flex flex-col overflow-hidden",
|
|
15
15
|
buttonSection: "px-10 flex justify-center flex-wrap gap-3"
|
|
16
|
-
} }), s = ({ isOpen: e, onClose:
|
|
17
|
-
let { wrapper: c } = o(), { innerOpen: l } =
|
|
18
|
-
return /* @__PURE__ */ a(
|
|
16
|
+
} }), s = ({ isOpen: e, onClose: t, zIndex: n, children: s }) => {
|
|
17
|
+
let { wrapper: c } = o(), { innerOpen: l } = i(e);
|
|
18
|
+
return /* @__PURE__ */ a(r, {
|
|
19
19
|
isOpen: l,
|
|
20
|
-
onClose:
|
|
21
|
-
zIndex:
|
|
20
|
+
onClose: t,
|
|
21
|
+
zIndex: n,
|
|
22
22
|
isDialog: !0,
|
|
23
23
|
componentName: "dialog",
|
|
24
24
|
children: /* @__PURE__ */ a("div", {
|
|
@@ -26,11 +26,11 @@ var o = r({ slots: {
|
|
|
26
26
|
children: s
|
|
27
27
|
})
|
|
28
28
|
});
|
|
29
|
-
}, c = ({ children:
|
|
30
|
-
let { title:
|
|
31
|
-
return /* @__PURE__ */ a(
|
|
32
|
-
className:
|
|
33
|
-
children:
|
|
29
|
+
}, c = ({ children: t }) => {
|
|
30
|
+
let { title: n } = o();
|
|
31
|
+
return /* @__PURE__ */ a(e.Title, {
|
|
32
|
+
className: n(),
|
|
33
|
+
children: t
|
|
34
34
|
});
|
|
35
35
|
}, l = ({ children: e }) => {
|
|
36
36
|
let { scrollArea: t, contentWrapper: n } = o();
|
|
@@ -47,19 +47,19 @@ var o = r({ slots: {
|
|
|
47
47
|
className: t(),
|
|
48
48
|
children: e
|
|
49
49
|
});
|
|
50
|
-
}, d = ({ children:
|
|
51
|
-
component:
|
|
50
|
+
}, d = ({ children: e, component: t = "button", ...r }) => /* @__PURE__ */ a(n, {
|
|
51
|
+
component: t,
|
|
52
52
|
...r,
|
|
53
53
|
contentWidth: !0,
|
|
54
54
|
size: "large",
|
|
55
|
-
children:
|
|
56
|
-
}), f = ({ children:
|
|
57
|
-
component:
|
|
55
|
+
children: e
|
|
56
|
+
}), f = ({ children: e, component: t = "button", ...r }) => /* @__PURE__ */ a(n, {
|
|
57
|
+
component: t,
|
|
58
58
|
...r,
|
|
59
59
|
contentWidth: !0,
|
|
60
60
|
variant: "secondary",
|
|
61
61
|
size: "large",
|
|
62
|
-
children:
|
|
62
|
+
children: e
|
|
63
63
|
});
|
|
64
64
|
s.displayName = "Dialog", c.displayName = "Dialog.Title", l.displayName = "Dialog.Content", u.displayName = "Dialog.ButtonSection", d.displayName = "Dialog.PrimaryButton", f.displayName = "Dialog.SecondaryButton";
|
|
65
65
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogRoot.js","names":[],"sources":["../../src/DialogRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport
|
|
1
|
+
{"version":3,"file":"DialogRoot.js","names":[],"sources":["../../src/DialogRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport Button from \"@bonprix-ds/react-button\";\nimport Overlay from \"@bonprix-ds/react-overlay\";\nimport { useInnerOpen } from \"@bonprix-ds/utils\";\n\nconst generateClasses = tv({\n slots: {\n title: \"typography-bonprix-h4 text-clr-primary px-10\",\n wrapper: \"flex flex-col gap-5 h-full\",\n scrollArea: \"px-10 h-full scroll-area relative\",\n contentWrapper: \"flex flex-col overflow-hidden\",\n buttonSection: \"px-10 flex justify-center flex-wrap gap-3\",\n },\n});\n\nexport interface Props {\n /** Controls the visibility of the dialog. Should be used in conjunction with `onClose`. */\n isOpen: boolean;\n /** Here, all of the subcomponents should be placed. */\n children: ReactNode;\n /** Callback function that is called when the dialog is supposed to be closed. Should be used in conjunction with `isOpen` property. */\n onClose: () => void;\n /** The z-index of the dialog. */\n zIndex?: number;\n}\n\nexport interface DialogTitleProps {\n /** The title to display in the dialog. */\n children: string;\n}\n\nexport interface DialogContentProps {\n /** The content to display in the dialog. */\n children: ReactNode;\n}\n\nexport interface DialogButtonSectionProps {\n /** Primary and secondary buttons should be placed inside this section. */\n children: ReactNode;\n}\n\ntype DialogButtonProps<C extends ElementType> = {\n /** The button text to render. */\n children: string;\n /** The semantic component to render the Button. Preferrably `\"button\"`. Native props will be passed to this component. */\n component?: C;\n} & Omit<ComponentProps<C>, \"component\">;\n\nconst DialogRoot = ({ isOpen, onClose, zIndex, children }: Props) => {\n const { wrapper } = generateClasses();\n const { innerOpen } = useInnerOpen(isOpen);\n\n return (\n <Overlay isOpen={innerOpen} onClose={onClose} zIndex={zIndex} isDialog componentName=\"dialog\">\n <div className={wrapper()}>{children}</div>\n </Overlay>\n );\n};\n\nexport const Title = ({ children }: DialogTitleProps) => {\n const { title } = generateClasses();\n\n return <DialogPrimitive.Title className={title()}>{children}</DialogPrimitive.Title>;\n};\n\nexport const Content = ({ children }: DialogContentProps) => {\n const { scrollArea, contentWrapper } = generateClasses();\n\n return (\n <div className={scrollArea()}>\n <div className={contentWrapper()}>{children}</div>\n </div>\n );\n};\n\nexport const ButtonSection = ({ children }: DialogButtonSectionProps) => {\n const { buttonSection } = generateClasses();\n\n return <div className={buttonSection()}>{children}</div>;\n};\n\nexport const PrimaryButton = <C extends ElementType>({ children, component = \"button\" as C, ...props }: DialogButtonProps<C>) => {\n const Component: ElementType = component;\n return (\n <Button component={Component} {...props} contentWidth size=\"large\">\n {children}\n </Button>\n );\n};\n\nexport const SecondaryButton = <C extends ElementType>({ children, component = \"button\" as C, ...props }: DialogButtonProps<C>) => {\n const Component: ElementType = component;\n return (\n <Button component={Component} {...props} contentWidth variant=\"secondary\" size=\"large\">\n {children}\n </Button>\n );\n};\n\nDialogRoot.displayName = \"Dialog\";\n\nTitle.displayName = \"Dialog.Title\";\n\nContent.displayName = \"Dialog.Content\";\n\nButtonSection.displayName = \"Dialog.ButtonSection\";\n\nPrimaryButton.displayName = \"Dialog.PrimaryButton\";\n\nSecondaryButton.displayName = \"Dialog.SecondaryButton\";\n\nexport default DialogRoot;\n"],"mappings":";;;;;;;;;AAUA,IAAM,IAAkB,EAAG,EACzB,OAAO;CACL,OAAO;CACP,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,eAAe;AACjB,EACF,CAAC,GAmCK,KAAc,EAAE,WAAQ,YAAS,WAAQ,kBAAsB;CACnE,IAAM,EAAE,eAAY,EAAgB,GAC9B,EAAE,iBAAc,EAAa,CAAM;CAEzC,OACE,kBAAC,GAAD;EAAS,QAAQ;EAAoB;EAAiB;EAAQ,UAAA;EAAS,eAAc;EACnF,UAAA,kBAAC,OAAD;GAAK,WAAW,EAAQ;GAAI;EAAc,CAAA;CACnC,CAAA;AAEb,GAEa,KAAS,EAAE,kBAAiC;CACvD,IAAM,EAAE,aAAU,EAAgB;CAElC,OAAO,kBAAC,EAAgB,OAAjB;EAAuB,WAAW,EAAM;EAAI;CAAgC,CAAA;AACrF,GAEa,KAAW,EAAE,kBAAmC;CAC3D,IAAM,EAAE,eAAY,sBAAmB,EAAgB;CAEvD,OACE,kBAAC,OAAD;EAAK,WAAW,EAAW;EACzB,UAAA,kBAAC,OAAD;GAAK,WAAW,EAAe;GAAI;EAAc,CAAA;CAC9C,CAAA;AAET,GAEa,KAAiB,EAAE,kBAAyC;CACvE,IAAM,EAAE,qBAAkB,EAAgB;CAE1C,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAc;EAAI;CAAc,CAAA;AACzD,GAEa,KAAwC,EAAE,aAAU,eAAY,UAAe,GAAG,QAG3F,kBAAC,GAAD;CAAmB;CAAW,GAAI;CAAO,cAAA;CAAa,MAAK;CACxD;AACK,CAAA,GAIC,KAA0C,EAAE,aAAU,eAAY,UAAe,GAAG,QAG7F,kBAAC,GAAD;CAAmB;CAAW,GAAI;CAAO,cAAA;CAAa,SAAQ;CAAY,MAAK;CAC5E;AACK,CAAA;AAIZ,EAAW,cAAc,UAEzB,EAAM,cAAc,gBAEpB,EAAQ,cAAc,kBAEtB,EAAc,cAAc,wBAE5B,EAAc,cAAc,wBAE5B,EAAgB,cAAc"}
|
package/package.json
CHANGED
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-dialog",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Dialog component, implemented in React, for the Bonprix Design System.",
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
"keywords": [],
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"author": "",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/bonprix/design-system.git",
|
|
11
|
+
"directory": "packages/react/dialog"
|
|
9
12
|
},
|
|
10
|
-
"
|
|
13
|
+
"files": [
|
|
14
|
+
"dist",
|
|
15
|
+
"!dist/tsconfig.tsbuildinfo",
|
|
16
|
+
"!dist/vite.config.d.ts",
|
|
17
|
+
"!dist/**/*.test.d.ts"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
11
20
|
"sideEffects": false,
|
|
21
|
+
"module": "./dist/index.js",
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
12
23
|
"exports": {
|
|
13
24
|
".": {
|
|
14
25
|
"import": "./dist/index.js",
|
|
@@ -16,36 +27,26 @@
|
|
|
16
27
|
"default": "./dist/index.js"
|
|
17
28
|
}
|
|
18
29
|
},
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
],
|
|
23
|
-
"keywords": [],
|
|
24
|
-
"author": "",
|
|
25
|
-
"license": "UNLICENSED",
|
|
26
|
-
"repository": {
|
|
27
|
-
"type": "git",
|
|
28
|
-
"url": "git+https://github.com/bonprix/design-system.git",
|
|
29
|
-
"directory": "packages/react/dialog"
|
|
30
|
+
"publishConfig": {
|
|
31
|
+
"access": "public",
|
|
32
|
+
"provenance": true
|
|
30
33
|
},
|
|
31
34
|
"dependencies": {
|
|
32
35
|
"@radix-ui/react-dialog": "1.1.23",
|
|
33
|
-
"@bonprix-ds/react-button": "1.1.
|
|
34
|
-
"@bonprix-ds/react-overlay": "1.0.
|
|
36
|
+
"@bonprix-ds/react-button": "1.1.1",
|
|
37
|
+
"@bonprix-ds/react-overlay": "1.0.2",
|
|
35
38
|
"@bonprix-ds/utils": "0.2.2"
|
|
36
39
|
},
|
|
37
|
-
"peerDependencies": {
|
|
38
|
-
"react": "^19.0.0",
|
|
39
|
-
"react-dom": "^19.0.0",
|
|
40
|
-
"tailwind-variants": "0.3.1"
|
|
41
|
-
},
|
|
42
40
|
"devDependencies": {
|
|
43
|
-
"
|
|
44
|
-
"@types/react": "19.2.18",
|
|
41
|
+
"@types/react": "19.3.0",
|
|
45
42
|
"@vitejs/plugin-react": "6.1.1",
|
|
46
43
|
"rollup-preserve-directives": "1.1.3",
|
|
47
|
-
"
|
|
48
|
-
|
|
44
|
+
"vite": "8.3.0"
|
|
45
|
+
},
|
|
46
|
+
"peerDependencies": {
|
|
47
|
+
"react": "^19.3.0",
|
|
48
|
+
"react-dom": "^19.3.0",
|
|
49
|
+
"tailwind-variants": "0.3.1"
|
|
49
50
|
},
|
|
50
51
|
"scripts": {
|
|
51
52
|
"build": "vite build"
|