@bonprix-ds/react-wrapper-button 0.0.0-stage → 1.1.0

package/dist/index.js

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

package/dist/no-styles.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Button.js

@@ -0,0 +1,60 @@
+import e from "./ButtonRegistration.js";
+import { isValidElement as t } from "react";
+import { IconSlot as n } from "@bonprix-ds/react-icon";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/Button.tsx
+var a = "h-4 w-4 fill-current", o = (e) => {
+	if (typeof e == "string") return e;
+	if (!t(e)) return;
+	let { type: n, props: r } = e;
+	if (typeof n == "function" && "variant" in n && typeof n.variant == "string") return n.variant;
+	if (n !== "svg") return;
+	let i = r["data-bpds-variant"];
+	return typeof i == "string" ? i : void 0;
+}, s = ({ component: t = "button", children: s, variant: c = "primary", size: l = "medium", icon: u, iconPosition: d = "start", contentWidth: f = !1, loading: p = !1, disabled: m = !1, ...h }) => {
+	let g = t, { type: _, href: v, onClick: y, tabIndex: b, ...x } = h, S = t === "button", C = t === "a", w = m || p, T = S ? {
+		type: _ ?? "button",
+		disabled: m || void 0,
+		"aria-disabled": p ? "true" : void 0
+	} : {
+		href: C && m ? void 0 : v,
+		role: C && m ? "link" : void 0,
+		"aria-disabled": w ? "true" : void 0,
+		tabIndex: !C && m ? -1 : b
+	}, E = /* @__PURE__ */ r(n, {
+		icon: u,
+		className: a
+	});
+	return /* @__PURE__ */ i("bpds-button", {
+		className: "preflight",
+		variant: c,
+		size: l,
+		loading: p ? "true" : "false",
+		"content-width": f ? "true" : "false",
+		children: [/* @__PURE__ */ i(g, {
+			...x,
+			...T,
+			onClick: w ? void 0 : y,
+			"data-bpds": "button",
+			"data-bpds-variant": c,
+			"data-bpds-size": l,
+			"data-bpds-content-width": f,
+			"data-bpds-icon": o(u),
+			children: [
+				d === "start" && E,
+				s,
+				d === "end" && E,
+				p && /* @__PURE__ */ r("span", {
+					"data-bpds-button-status": !0,
+					role: "status",
+					children: "Lade..."
+				})
+			]
+		}), /* @__PURE__ */ r(e, {})]
+	});
+};
+s.displayName = "Button";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=Button.js.map

package/dist/src/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["ButtonRegistration","ICON_CLASSES","iconName","icon","isValidElement","type","variant","props","Button","Component","component","nativeProps","isButton","isLink","unavailable","disabled","loading","controlProps","href","tabIndex","iconSlot","IconSlot","contentWidth","onClick","size","iconPosition","children"],"sources":["../../src/Button.tsx"],"sourcesContent":["import React, { isValidElement, type ComponentProps, type ElementType } from \"react\";\n\nimport type { ButtonBaseProps } from \"@bonprix-ds/react-button\";\nimport { IconSlot, type IconOrElement } from \"@bonprix-ds/react-icon\";\n\nimport ButtonRegistration from \"./ButtonRegistration\";\n\ninterface BaseProps extends ButtonBaseProps {\n  /** If `true`, the component cannot be used. A link (`component=\"a\"`) loses its `href`; a custom `component` keeps it and leaves the tab order. */\n  disabled?: boolean;\n}\n\nexport type Props<C extends ElementType = \"button\"> = BaseProps & {\n  /** The semantic component to render the Button. Preferrably `\"button\"`, `\"a\"` or something like `Link` from NextJS. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"component\">;\n\ninterface ControlProps {\n  type?: \"button\" | \"submit\" | \"reset\";\n  href?: unknown;\n  onClick?: unknown;\n  tabIndex?: number;\n}\n\n// The Tailwind preset makes `Icon`'s own size and fill `!important`, so the stylesheet cannot\n// change them. `twMerge` inside `Icon` replaces them with these.\nconst ICON_CLASSES = \"h-4 w-4 fill-current\";\n\n// `data-bpds-icon` reads the same whether the consumer passes the name, the icon component (its type carries\n// the name as a static `variant`) or an `<svg>` a Server Component already rendered from it (`data-bpds-variant`).\n// Same rule as `BaseButton` from DESY-1714, so selectors such as `[data-bpds-icon=\"closer\"]` match both Buttons.\nconst iconName = (icon: IconOrElement | undefined): string | undefined => {\n  if (typeof icon === \"string\") return icon;\n  if (!isValidElement(icon)) return undefined;\n  const { type, props } = icon;\n  if (typeof type === \"function\" && \"variant\" in type && typeof type.variant === \"string\") return type.variant;\n  if (type !== \"svg\") return undefined;\n  const variant = (props as { \"data-bpds-variant\"?: unknown })[\"data-bpds-variant\"];\n  return typeof variant === \"string\" ? variant : undefined;\n};\n\n// No \"use client\" here: a Server Component has to be able to pass a component such as Next's `Link`.\n// `ButtonRegistration` is rendered rather than only imported, which puts its client reference into the\n// RSC payload, so the browser loads the stylesheet and registers the element.\nconst Button = <C extends ElementType = \"button\">({\n  component = \"button\" as C,\n  children,\n  variant = \"primary\",\n  size = \"medium\",\n  icon,\n  iconPosition = \"start\",\n  contentWidth = false,\n  loading = false,\n  disabled = false,\n  ...props\n}: Props<C>) => {\n  const Component: ElementType = component;\n  const { type, href, onClick, tabIndex, ...nativeProps } = props as ControlProps;\n  const isButton = component === \"button\";\n  const isLink = component === \"a\";\n  const unavailable = disabled || loading;\n\n  const controlProps = isButton\n    ? { type: type ?? \"button\", disabled: disabled || undefined, \"aria-disabled\": loading ? \"true\" : undefined }\n    : {\n        href: isLink && disabled ? undefined : href,\n        role: isLink && disabled ? \"link\" : undefined,\n        \"aria-disabled\": unavailable ? \"true\" : undefined,\n        tabIndex: !isLink && disabled ? -1 : tabIndex,\n      };\n\n  const iconSlot = <IconSlot icon={icon} className={ICON_CLASSES} />;\n\n  return (\n    <bpds-button\n      className=\"preflight\"\n      variant={variant}\n      size={size}\n      loading={loading ? \"true\" : \"false\"}\n      content-width={contentWidth ? \"true\" : \"false\"}\n    >\n      <Component\n        {...nativeProps}\n        {...controlProps}\n        onClick={unavailable ? undefined : onClick}\n        data-bpds=\"button\"\n        data-bpds-variant={variant}\n        data-bpds-size={size}\n        data-bpds-content-width={contentWidth}\n        data-bpds-icon={iconName(icon)}\n      >\n        {iconPosition === \"start\" && iconSlot}\n        {children}\n        {iconPosition === \"end\" && iconSlot}\n        {loading && (\n          <span data-bpds-button-status role=\"status\">\n            Lade...\n          </span>\n        )}\n      </Component>\n      <ButtonRegistration />\n    </bpds-button>\n  );\n};\n\nButton.displayName = \"Button\";\n\nexport default Button;\n"],"mappings":";;;;;AA0BA,IAAMC,IAAe,wBAKfC,KAAY,MAAwD;CACxE,IAAI,OAAOC,KAAS,UAAU,OAAOA;CACrC,IAAI,CAACC,EAAeD,CAAI,GAAG;CAC3B,IAAM,EAAE,SAAM,aAAUA;CACxB,IAAI,OAAOE,KAAS,cAAc,aAAaA,KAAQ,OAAOA,EAAK,WAAY,UAAU,OAAOA,EAAK;CACrG,IAAIA,MAAS,OAAO;CACpB,IAAMC,IAAWC,EAA4C;CAC7D,OAAO,OAAOD,KAAY,WAAWA,IAAU,KAAA;AACjD,GAKME,KAA4C,EAChD,eAAY,UACZ,aACA,aAAU,WACV,UAAO,UACP,SACA,kBAAe,SACf,kBAAe,IACf,aAAU,IACV,cAAW,IACX,GAAGD,QACW;CACd,IAAME,IAAyBC,GACzB,EAAE,SAAM,SAAM,YAAS,aAAU,GAAGC,MAAgBJ,GACpDK,IAAWF,MAAc,UACzBG,IAASH,MAAc,KACvBI,IAAcC,KAAYC,GAE1BC,IAAeL,IACjB;EAAE,MAAMP,KAAQ;EAAU,UAAUU,KAAY,KAAA;EAAW,iBAAiBC,IAAU,SAAS,KAAA;CAAU,IACzG;EACE,MAAMH,KAAUE,IAAW,KAAA,IAAYG;EACvC,MAAML,KAAUE,IAAW,SAAS,KAAA;EACpC,iBAAiBD,IAAc,SAAS,KAAA;EACxC,UAAU,CAACD,KAAUE,IAAW,KAAKI;CACvC,GAEEC,IAAW,kBAACC,GAAD;EAAgB;EAAM,WAAWpB;CAAe,CAAA;CAEjE,OACE,kBAAC,eAAD;EACE,WAAU;EACD;EACH;EACN,SAASe,IAAU,SAAS;EAC5B,iBAAeM,IAAe,SAAS;EALzC,UAAA,CAOE,kBAACb,GAAD;GACE,GAAIE;GACJ,GAAIM;GACJ,SAASH,IAAc,KAAA,IAAYS;GACnC,aAAU;GACV,qBAAmBjB;GACnB,kBAAgBkB;GAChB,2BAAyBF;GACzB,kBAAgBpB,EAASC,CAAI;GAR/B,UAAA;IAUGsB,MAAiB,WAAWL;IAC5BM;IACAD,MAAiB,SAASL;IAC1BJ,KACC,kBAAC,QAAD;KAAM,2BAAA;KAAwB,MAAK;KAAS,UAAA;IAEtC,CAAA;GAEC;EACX,CAAA,GAAA,kBAAChB,GAAD,CAAqB,CAAA,CACV;;AAEjB;AAEA,EAAO,cAAc"}

package/dist/src/ButtonRegistration.js

@@ -0,0 +1,11 @@
+"use client";
+import "#styles";
+//#region src/ButtonRegistration.tsx
+typeof window < "u" && import("@bonprix-ds/bpds-button").then(({ Button: e }) => {
+	customElements.get("bpds-button") || customElements.define("bpds-button", e);
+});
+var e = () => null;
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ButtonRegistration.js.map

package/dist/src/ButtonRegistration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonRegistration.js","names":["ButtonElement","ButtonRegistration"],"sources":["../../src/ButtonRegistration.tsx"],"sourcesContent":["\"use client\";\n\nimport \"@bonprix-ds/bpds-button/button.css\";\n\n// The element class is loaded lazily and only in the browser: `class X extends HTMLElement` is\n// evaluated at module scope, and `HTMLElement` does not exist in Node. The registry check sits inside\n// the callback because the tag can be taken during the await, and `define` throws on a duplicate name.\nif (typeof window !== \"undefined\") {\n  void import(\"@bonprix-ds/bpds-button\").then(({ Button: ButtonElement }) => {\n    if (!customElements.get(\"bpds-button\")) customElements.define(\"bpds-button\", ButtonElement);\n  });\n}\n\nconst ButtonRegistration = () => null;\n\nexport default ButtonRegistration;\n"],"mappings":";;;AAOI,OAAO,SAAW,OACpB,OAAY,0BAA0B,CAAC,MAAM,EAAE,QAAQA,QAAoB;CACzE,AAAK,eAAe,IAAI,aAAa,KAAG,eAAe,OAAO,eAAeA,CAAa;AAC5F,CAAC;AAGH,IAAMC,UAA2B"}

package/dist/styles.js

@@ -0,0 +1 @@
+import "@bonprix-ds/bpds-button/button.css";

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@bonprix-ds/react-wrapper-button",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.1.0",
+  "description": "Button component, implemented as a React wrapper around bpds-button, for the Bonprix Design System.",
+  "keywords": [],
+  "license": "UNLICENSED",
+  "author": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bonprix/design-system.git",
+    "directory": "packages/react-wrappers/button"
+  },
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "!dist/vite.config.d.ts",
+    "!dist/**/*.test.d.ts"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "./dist/styles.js"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "imports": {
+    "#styles": {
+      "browser": "./dist/styles.js",
+      "default": "./dist/no-styles.js"
+    }
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@bonprix-ds/bpds-button": "1.1.0",
+    "@bonprix-ds/utils": "0.5.0",
+    "@bonprix-ds/react-icon": "1.3.1",
+    "@bonprix-ds/react-button": "1.1.4"
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "vite": "8.3.2",
+    "@bonprix-ds/vite-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.