@bonprix-ds/react-side-navigation 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import { ComponentProps } from 'react';
+import { default as default_2 } from 'react';
+import { ElementType } from 'react';
+import { IconType } from '@bonprix-ds/react-icon';
+import { ReactNode } from 'react';
+import { TitleLevel } from '@bonprix-ds/utils';
+
+declare interface NavigationTitle {
+    title: string;
+    hideTitle?: boolean;
+    titleLevel?: TitleLevel;
+}
+
+declare const SideNavigation: {
+    (props: SideNavigationProps): default_2.JSX.Element;
+    displayName: string;
+    Section: {
+        ({ children, title, hideTitle, titleLevel }: SideNavigationSectionProps): default_2.JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        <C extends ElementType>({ children, icon, active, component, ...props }: SideNavigationItemProps<C>): default_2.JSX.Element;
+        displayName: string;
+    };
+};
+export default SideNavigation;
+
+declare interface SideNavigationItemBaseProps {
+    /** The text content of the list item. */
+    children: string;
+    /** The icon to display in front of the list item. */
+    icon?: IconType;
+    /** Should be set to `true`, if the current page is equal to the link in this item. */
+    active?: boolean;
+}
+
+declare type SideNavigationItemProps<C extends ElementType> = SideNavigationItemBaseProps & {
+    /** The semantic component to render the Link. Preferrably `"a"`, `"button"` or something like `Link` from NextJS. Native props will be passed to this component. */
+    component?: C;
+} & Omit<ComponentProps<C>, keyof SideNavigationItemBaseProps | "component">;
+
+export declare interface SideNavigationProps extends NavigationTitle {
+    children: ReactNode;
+}
+
+declare interface SideNavigationSectionProps extends NavigationTitle {
+    children: ReactNode;
+}
+
+export { }

package/dist/index.js

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

package/dist/src/SideNavigation.js

@@ -0,0 +1,44 @@
+import e from "./SideNavigationRoot.js";
+import t from "@bonprix-ds/react-icon";
+import n from "@bonprix-ds/react-typography";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SideNavigation.tsx
+var a = ({ children: e, title: t, hideTitle: a = !1, titleLevel: o = "h4" }) => /* @__PURE__ */ i("li", {
+	"aria-label": a ? t : void 0,
+	className: "pb-3 border-b border-clr-bg-main-light last:border-none flex flex-col gap-3",
+	children: [!a && /* @__PURE__ */ r(n, {
+		variant: "h6",
+		component: o,
+		color: "on-bg-mid",
+		children: t
+	}), /* @__PURE__ */ r("ul", {
+		className: "flex flex-col gap-3 ps-1",
+		children: e
+	})]
+});
+a.displayName = "SideNavigation.Section";
+var o = ({ children: e, icon: n, active: a, component: o = "a", ...s }) => {
+	let c = o, l = [
+		"typography-input-text text-clr-on-bg-high flex items-center gap-3 px-1 py-2",
+		"no-underline hover:underline underline-offset-[30%]",
+		"focus-visible:outline outline-clr-on-bg-high outline-offset-2 outline-2 radius-2 rounded-sm",
+		"aria-current-page:underline aria-current-page:decoration-[15%]"
+	].join(" ");
+	return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ i(c, {
+		...s,
+		className: l,
+		"aria-current": a ? "page" : void 0,
+		children: [n && /* @__PURE__ */ r(t, {
+			variant: n,
+			className: "h-5 w-5 fill-clr-on-bg-high"
+		}), /* @__PURE__ */ r("span", { children: e })]
+	}) });
+};
+o.displayName = "SideNavigation.Item";
+var s = (t) => /* @__PURE__ */ r(e, { ...t });
+s.displayName = "SideNavigation", s.Section = a, s.Item = o;
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=SideNavigation.js.map

package/dist/src/SideNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigation.js","names":[],"sources":["../../src/SideNavigation.tsx"],"sourcesContent":["import Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\n\nimport SideNavigationRoot, { type NavigationTitle, type SideNavigationProps } from \"./SideNavigationRoot\";\n\nexport type { SideNavigationProps } from \"./SideNavigationRoot\";\n\ninterface SideNavigationSectionProps extends NavigationTitle {\n  children: ReactNode;\n}\n\nconst SideNavigationSection = ({ children, title, hideTitle = false, titleLevel = \"h4\" }: SideNavigationSectionProps) => {\n  return (\n    <li aria-label={hideTitle ? title : undefined} className=\"pb-3 border-b border-clr-bg-main-light last:border-none flex flex-col gap-3\">\n      {!hideTitle && (\n        <Typography variant=\"h6\" component={titleLevel} color=\"on-bg-mid\">\n          {title}\n        </Typography>\n      )}\n      <ul className=\"flex flex-col gap-3 ps-1\">{children}</ul>\n    </li>\n  );\n};\n\nSideNavigationSection.displayName = \"SideNavigation.Section\";\n\ninterface SideNavigationItemBaseProps {\n  /** The text content of the list item. */\n  children: string;\n  /** The icon to display in front of the list item. */\n  icon?: IconType;\n  /** Should be set to `true`, if the current page is equal to the link in this item. */\n  active?: boolean;\n}\n\ntype SideNavigationItemProps<C extends ElementType> = SideNavigationItemBaseProps & {\n  /** The semantic component to render the Link. Preferrably `\"a\"`, `\"button\"` or something like `Link` from NextJS. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof SideNavigationItemBaseProps | \"component\">;\n\nconst SideNavigationItem = <C extends ElementType>({\n  children,\n  icon,\n  active,\n  component = \"a\" as C,\n  ...props\n}: SideNavigationItemProps<C>) => {\n  const Component: ElementType = component;\n  const classNames = [\n    \"typography-input-text text-clr-on-bg-high flex items-center gap-3 px-1 py-2\",\n    \"no-underline hover:underline underline-offset-[30%]\",\n    \"focus-visible:outline outline-clr-on-bg-high outline-offset-2 outline-2 radius-2 rounded-sm\",\n    \"aria-current-page:underline aria-current-page:decoration-[15%]\",\n  ].join(\" \");\n  return (\n    <li>\n      <Component {...props} className={classNames} aria-current={active ? \"page\" : undefined}>\n        {icon && <Icon variant={icon} className=\"h-5 w-5 fill-clr-on-bg-high\" />}\n        <span>{children}</span>\n      </Component>\n    </li>\n  );\n};\n\nSideNavigationItem.displayName = \"SideNavigation.Item\";\n\nconst SideNavigation = (props: SideNavigationProps) => <SideNavigationRoot {...props} />;\n\nSideNavigation.displayName = \"SideNavigation\";\n\nSideNavigation.Section = SideNavigationSection;\nSideNavigation.Item = SideNavigationItem;\n\nexport default SideNavigation;\n"],"mappings":";;;;;;AAYA,IAAM,KAAyB,EAAE,aAAU,UAAO,eAAY,IAAO,gBAAa,WAE9E,kBAAC,MAAD;CAAI,cAAY,IAAY,IAAQ,KAAA;CAAW,WAAU;CAAzD,UAAA,CACG,CAAC,KACA,kBAAC,GAAD;EAAY,SAAQ;EAAK,WAAW;EAAY,OAAM;EACnD,UAAA;CACS,CAAA,GAEd,kBAAC,MAAD;EAAI,WAAU;EAA4B;CAAa,CAAA,CACrD;;AAIR,EAAsB,cAAc;AAgBpC,IAAM,KAA6C,EACjD,aACA,SACA,WACA,eAAY,KACZ,GAAG,QAC6B;CAChC,IAAM,IAAyB,GACzB,IAAa;EACjB;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;EAAW,GAAI;EAAO,WAAW;EAAY,gBAAc,IAAS,SAAS,KAAA;EAA7E,UAAA,CACG,KAAQ,kBAAC,GAAD;GAAM,SAAS;GAAM,WAAU;EAA+B,CAAA,GACvE,kBAAC,QAAD,EAAO,YAAe,CAAA,CACb;CACT,CAAA,EAAA,CAAA;AAER;AAEA,EAAmB,cAAc;AAEjC,IAAM,KAAkB,MAA+B,kBAAC,GAAD,EAAoB,GAAI,EAAQ,CAAA;AAEvF,EAAe,cAAc,kBAE7B,EAAe,UAAU,GACzB,EAAe,OAAO"}

package/dist/src/SideNavigationRoot.js

@@ -0,0 +1,28 @@
+"use client";
+import e from "@bonprix-ds/react-typography";
+import "react";
+import { useBreakpointDown as t } from "@bonprix-ds/utils";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/SideNavigationRoot.tsx
+var i = ({ children: i, title: a, hideTitle: o = !1, titleLevel: s = "h3" }) => t("m") ? null : /* @__PURE__ */ r("nav", {
+	...o ? { "aria-label": a } : { "aria-labelledby": "side-navigation-header" },
+	className: "preflight pt-6 ps-6 pe-2 bg-clr-bg-main h-screen overflow-auto min-w-[18.75rem] max-w-[31.25rem] w-fit",
+	"data-bpds": "side-navigation",
+	children: [!o && /* @__PURE__ */ n("div", {
+		className: "pt-3 pb-6",
+		children: /* @__PURE__ */ n(e, {
+			variant: "bonprix-h4",
+			component: s,
+			id: "side-navigation-header",
+			children: a
+		})
+	}), /* @__PURE__ */ n("ul", {
+		className: "flex flex-col gap-3",
+		children: i
+	})]
+});
+i.displayName = "SideNavigation";
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=SideNavigationRoot.js.map

package/dist/src/SideNavigationRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationRoot.js","names":[],"sources":["../../src/SideNavigationRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport Typography from \"@bonprix-ds/react-typography\";\nimport type { TitleLevel } from \"@bonprix-ds/utils\";\nimport { useBreakpointDown } from \"@bonprix-ds/utils\";\nimport React, { ReactNode } from \"react\";\n\nexport interface NavigationTitle {\n  title: string;\n  hideTitle?: boolean;\n  titleLevel?: TitleLevel;\n}\n\nexport interface SideNavigationProps extends NavigationTitle {\n  children: ReactNode;\n}\n\nconst SideNavigationRoot = ({ children, title, hideTitle = false, titleLevel = \"h3\" }: SideNavigationProps) => {\n  if (useBreakpointDown(\"m\")) return null;\n  const labelAttribute = hideTitle ? { \"aria-label\": title } : { \"aria-labelledby\": \"side-navigation-header\" };\n  return (\n    <nav\n      {...labelAttribute}\n      className=\"preflight pt-6 ps-6 pe-2 bg-clr-bg-main h-screen overflow-auto min-w-[18.75rem] max-w-[31.25rem] w-fit\"\n      data-bpds=\"side-navigation\"\n    >\n      {!hideTitle && (\n        <div className=\"pt-3 pb-6\">\n          <Typography variant=\"bonprix-h4\" component={titleLevel} id=\"side-navigation-header\">\n            {title}\n          </Typography>\n        </div>\n      )}\n      <ul className=\"flex flex-col gap-3\">{children}</ul>\n    </nav>\n  );\n};\n\nSideNavigationRoot.displayName = \"SideNavigation\";\n\nexport default SideNavigationRoot;\n"],"mappings":";;;;;;AAiBA,IAAM,KAAsB,EAAE,aAAU,UAAO,eAAY,IAAO,gBAAa,WACzE,EAAkB,GAAG,IAAU,OAGjC,kBAAC,OAAD;CACE,GAHmB,IAAY,EAAE,cAAc,EAAM,IAAI,EAAE,mBAAmB,yBAAyB;CAIvG,WAAU;CACV,aAAU;CAHZ,UAAA,CAKG,CAAC,KACA,kBAAC,OAAD;EAAK,WAAU;EACb,UAAA,kBAAC,GAAD;GAAY,SAAQ;GAAa,WAAW;GAAY,IAAG;GACxD,UAAA;EACS,CAAA;CACT,CAAA,GAEP,kBAAC,MAAD;EAAI,WAAU;EAAuB;CAAa,CAAA,CAC/C;;AAIT,EAAmB,cAAc"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@bonprix-ds/react-side-navigation",
+  "version": "1.0.0",
+  "description": "SideNavigation 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/side-navigation"
+  },
+  "dependencies": {
+    "@bonprix-ds/react-icon": "1.1.3",
+    "@bonprix-ds/utils": "0.2.1",
+    "@bonprix-ds/react-typography": "1.0.4"
+  },
+  "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"
+  }
+}