@bonprix-ds/react-dialog 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+import { default as default_2 } from 'react';
+import { ReactNode } from 'react';
+
+declare const Dialog: {
+    (props: DialogProps): default_2.JSX.Element;
+    displayName: string;
+    Title: {
+        ({ children }: DialogTitleProps): default_2.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ children }: DialogContentProps): default_2.JSX.Element;
+        displayName: string;
+    };
+    ButtonSection: {
+        ({ children }: DialogButtonSectionProps): default_2.JSX.Element;
+        displayName: string;
+    };
+    PrimaryButton: {
+        <C extends default_2.ElementType>({ children, component, ...props }: {
+            children: string;
+            component?: C | undefined;
+        } & Omit<default_2.ComponentProps<C>, "component">): default_2.JSX.Element;
+        displayName: string;
+    };
+    SecondaryButton: {
+        <C extends default_2.ElementType>({ children, component, ...props }: {
+            children: string;
+            component?: C | undefined;
+        } & Omit<default_2.ComponentProps<C>, "component">): default_2.JSX.Element;
+        displayName: string;
+    };
+};
+export default Dialog;
+
+declare interface DialogButtonSectionProps {
+    /** Primary and secondary buttons should be placed inside this section. */
+    children: ReactNode;
+}
+
+declare interface DialogContentProps {
+    /** The content to display in the dialog. */
+    children: ReactNode;
+}
+
+export declare interface DialogProps {
+    /** Controls the visibility of the dialog. Should be used in conjunction with `onClose`. */
+    isOpen: boolean;
+    /** Here, all of the subcomponents should be placed. */
+    children: ReactNode;
+    /** Callback function that is called when the dialog is supposed to be closed. Should be used in conjunction with `isOpen` property. */
+    onClose: () => void;
+    /** The z-index of the dialog. */
+    zIndex?: number;
+}
+
+declare interface DialogTitleProps {
+    /** The title to display in the dialog. */
+    children: string;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,2 @@
+import e from "./src/Dialog.js";
+export { e as default };

package/dist/src/Dialog.js

@@ -0,0 +1,10 @@
+import e, { ButtonSection as t, Content as n, PrimaryButton as r, SecondaryButton as i, Title as a } from "./DialogRoot.js";
+import "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/Dialog.tsx
+var s = (t) => /* @__PURE__ */ o(e, { ...t });
+s.displayName = "Dialog", s.Title = a, s.Content = n, s.ButtonSection = t, s.PrimaryButton = r, s.SecondaryButton = i;
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=Dialog.js.map

package/dist/src/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../src/Dialog.tsx"],"sourcesContent":["import React from \"react\";\n\nimport DialogRoot, { ButtonSection, Content, PrimaryButton, SecondaryButton, Title, type Props } from \"./DialogRoot\";\n\nexport type { Props } from \"./DialogRoot\";\n\nconst Dialog = (props: Props) => <DialogRoot {...props} />;\n\nDialog.displayName = \"Dialog\";\n\nDialog.Title = Title;\nDialog.Content = Content;\nDialog.ButtonSection = ButtonSection;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\n\nexport default Dialog;\n"],"mappings":";;;;AAMA,IAAM,KAAU,MAAiB,kBAAC,GAAD,EAAY,GAAI,EAAQ,CAAA;AAEzD,EAAO,cAAc,UAErB,EAAO,QAAQ,GACf,EAAO,UAAU,GACjB,EAAO,gBAAgB,GACvB,EAAO,gBAAgB,GACvB,EAAO,kBAAkB"}

package/dist/src/DialogRoot.js

@@ -0,0 +1,68 @@
+"use client";
+import "react";
+import e from "@bonprix-ds/react-button";
+import t from "@bonprix-ds/react-overlay";
+import { useInnerOpen as n } from "@bonprix-ds/utils";
+import { tv as r } from "tailwind-variants";
+import * as i from "@radix-ui/react-dialog";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/DialogRoot.tsx
+var o = r({ slots: {
+	title: "typography-bonprix-h4 text-clr-primary px-10",
+	wrapper: "flex flex-col gap-5 h-full",
+	scrollArea: "px-10 h-full scroll-area relative",
+	contentWrapper: "flex flex-col overflow-hidden",
+	buttonSection: "px-10 flex justify-center flex-wrap gap-3"
+} }), s = ({ isOpen: e, onClose: r, zIndex: i, children: s }) => {
+	let { wrapper: c } = o(), { innerOpen: l } = n(e);
+	return /* @__PURE__ */ a(t, {
+		isOpen: l,
+		onClose: r,
+		zIndex: i,
+		isDialog: !0,
+		componentName: "dialog",
+		children: /* @__PURE__ */ a("div", {
+			className: c(),
+			children: s
+		})
+	});
+}, c = ({ children: e }) => {
+	let { title: t } = o();
+	return /* @__PURE__ */ a(i.Title, {
+		className: t(),
+		children: e
+	});
+}, l = ({ children: e }) => {
+	let { scrollArea: t, contentWrapper: n } = o();
+	return /* @__PURE__ */ a("div", {
+		className: t(),
+		children: /* @__PURE__ */ a("div", {
+			className: n(),
+			children: e
+		})
+	});
+}, u = ({ children: e }) => {
+	let { buttonSection: t } = o();
+	return /* @__PURE__ */ a("div", {
+		className: t(),
+		children: e
+	});
+}, d = ({ children: t, component: n = "button", ...r }) => /* @__PURE__ */ a(e, {
+	component: n,
+	...r,
+	contentWidth: !0,
+	size: "large",
+	children: t
+}), f = ({ children: t, component: n = "button", ...r }) => /* @__PURE__ */ a(e, {
+	component: n,
+	...r,
+	contentWidth: !0,
+	variant: "secondary",
+	size: "large",
+	children: t
+});
+s.displayName = "Dialog", c.displayName = "Dialog.Title", l.displayName = "Dialog.Content", u.displayName = "Dialog.ButtonSection", d.displayName = "Dialog.PrimaryButton", f.displayName = "Dialog.SecondaryButton";
+//#endregion
+export { u as ButtonSection, l as Content, d as PrimaryButton, f as SecondaryButton, c as Title, s as default };
+
+//# sourceMappingURL=DialogRoot.js.map

package/dist/src/DialogRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogRoot.js","names":[],"sources":["../../src/DialogRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport Button from \"@bonprix-ds/react-button\";\nimport Overlay from \"@bonprix-ds/react-overlay\";\nimport { useInnerOpen } from \"@bonprix-ds/utils\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\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":";;;;;;;;;AASA,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

@@ -0,0 +1,53 @@
+{
+  "name": "@bonprix-ds/react-dialog",
+  "version": "1.0.0",
+  "description": "Dialog component, implemented in React, for the Bonprix Design System.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "module": "./dist/index.js",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bonprix/design-system.git",
+    "directory": "packages/react/dialog"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "1.1.23",
+    "@bonprix-ds/react-button": "1.0.0",
+    "@bonprix-ds/react-overlay": "1.0.0",
+    "@bonprix-ds/utils": "0.2.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-variants": "0.3.1"
+  },
+  "devDependencies": {
+    "vite": "8.2.2",
+    "@types/react": "19.2.18",
+    "@vitejs/plugin-react": "6.1.1",
+    "rollup-preserve-directives": "1.1.3",
+    "unplugin-dts": "1.0.3",
+    "@microsoft/api-extractor": "7.59.0"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}