bonprix-design-system 0.70.0 → 0.71.0

package/dist/components/BottomSheet/BottomSheet.js

@@ -1,171 +1,10 @@
-"use client";
-import e from "../Buttons/Button/index.js";
-import t from "../../hooks/useInnerOpen.js";
-import { backdrop as n } from "../../utils/tailwindVariants.js";
-import r from "./BottomSheetContext.js";
-import i from "./useConsumeBottomSheet.js";
-import a from "./useCreateBottomSheet.js";
-import o from "@bonprix-ds/react-icon-button";
-import { useId as s } from "react";
-import { tv as c } from "tailwind-variants";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "@bonprix-ds/react-typography";
-import { ZIndexContext as f, usePrefersReducedMotion as p } from "@bonprix-ds/utils";
-import { Sheet as m } from "react-modal-sheet";
+import e, { ButtonSection as t, Content as n, PrimaryButton as r, SecondaryButton as i, Title as a } from "./BottomSheetRoot.js";
+import "react";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/components/BottomSheet/BottomSheet.tsx
-var h = c({
-	slots: {
-		root: "preflight block",
-		container: "shadow-none rounded-none bg-clr-bg-modal max-h-[calc(100%-4rem)]",
-		header: "px-4 py-3",
-		titleAndIcons: "flex gap-2 items-center touch-pan-down",
-		contentWrapper: "flex flex-col w-full",
-		content: [
-			"typography-body1 text-clr-primary",
-			"*:flex *:-mx-0.5 *:px-0.5",
-			"*:min-h-0"
-		],
-		dragHandleContainer: "h-6 flex justify-center items-center shrink-0",
-		dragHandle: "h-1 w-8 rounded-full bg-clr-on-bg-low",
-		backdrop: n(),
-		scrollArea: "scroll-area relative"
-	},
-	variants: { disableHorizontalPadding: {
-		false: { scrollArea: "px-4" },
-		true: ""
-	} }
-}), g = ({ children: e, isOpen: n, onClose: i, onBack: o, zIndex: c = 9999, ref: d }) => {
-	let g = p(), { root: _, container: v, dragHandleContainer: y, dragHandle: b, content: x, contentWrapper: S, backdrop: C } = h(), { isShown: w, scrollRef: T, scrollPosition: E } = a({ isOpen: n }), D = E === "middle" || E === "bottom", { innerOpen: O } = t(w), k = s();
-	return /* @__PURE__ */ u(m, {
-		isOpen: O,
-		onClose: i,
-		className: _(),
-		detent: "content",
-		"data-bpds": "bottom-sheet",
-		prefersReducedMotion: g,
-		style: {
-			"--touch-action": D ? "initial" : "pan-down",
-			pointerEvents: void 0,
-			visibility: O ? "visible" : "hidden",
-			zIndex: c
-		},
-		role: "dialog",
-		avoidKeyboard: !1,
-		"aria-labelledby": k,
-		children: [/* @__PURE__ */ u(m.Container, {
-			className: v(),
-			ref: d,
-			style: { pointerEvents: void 0 },
-			children: [/* @__PURE__ */ l(m.Header, {
-				unstyled: !0,
-				className: y(),
-				children: /* @__PURE__ */ l(m.DragIndicator, {
-					unstyled: !0,
-					className: b()
-				})
-			}), /* @__PURE__ */ l(f.Provider, {
-				value: c,
-				children: /* @__PURE__ */ l(r.Provider, {
-					value: {
-						scrollRef: T,
-						scrollPosition: E,
-						onClose: i,
-						onBack: o,
-						titleId: k
-					},
-					children: /* @__PURE__ */ l(m.Content, {
-						className: x(),
-						disableScroll: !0,
-						disableDrag: D,
-						style: { paddingBottom: "max(var(--keyboard-inset-height, 0rem), var(--app-safe-area-inset-bottom, 1rem))" },
-						children: /* @__PURE__ */ l("div", {
-							className: S(),
-							children: e
-						})
-					})
-				})
-			})]
-		}), /* @__PURE__ */ l(m.Backdrop, {
-			"aria-label": "Bottom Sheet schließen",
-			onTap: i,
-			className: C()
-		})]
-	});
-};
-g.displayName = "BottomSheet", g.Title = ({ children: e, subline: t, level: n = "h3" }) => {
-	let { onBack: r, onClose: a, titleId: s } = i(), { header: c, titleAndIcons: f } = h();
-	return /* @__PURE__ */ u("div", {
-		className: c(),
-		children: [/* @__PURE__ */ u("div", {
-			className: f(),
-			children: [
-				r && /* @__PURE__ */ l(o, {
-					onClick: r,
-					icon: "arrow-left",
-					label: "Zurück",
-					variant: "tertiary",
-					size: "small"
-				}),
-				/* @__PURE__ */ l(d, {
-					variant: "bonprix-h6",
-					component: n,
-					className: "grow line-clamp-2",
-					id: s,
-					children: e
-				}),
-				/* @__PURE__ */ l(o, {
-					onClick: a,
-					icon: "closer",
-					label: "Schließen",
-					variant: "tertiary",
-					size: "small"
-				})
-			]
-		}), t && /* @__PURE__ */ l(d, { children: t })]
-	});
-}, g.Content = ({ children: e, disableHorizontalPadding: t = !1 }) => {
-	let { scrollRef: n } = i(), { scrollArea: r } = h({ disableHorizontalPadding: t });
-	return /* @__PURE__ */ l("div", {
-		ref: n,
-		className: r(),
-		"data-bpds-disable-horizontal-padding": t,
-		tabIndex: 0,
-		children: e
-	});
-}, g.ButtonSection = ({ children: e }) => /* @__PURE__ */ l("div", {
-	className: "button-section w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down",
-	children: e
-}), g.PrimaryButton = ({ children: t, icon: n, iconPosition: r, loading: a, component: o = "button", ...s }) => {
-	let c = o, { onClick: u, type: d = "button", ...f } = s, { onClose: p } = i(), m = (e) => {
-		u?.(e), p();
-	};
-	return /* @__PURE__ */ l(e, {
-		component: c,
-		...f,
-		variant: "primary",
-		onClick: m,
-		type: d,
-		icon: n,
-		iconPosition: r,
-		size: "large",
-		loading: a,
-		children: t
-	});
-}, g.SecondaryButton = ({ children: t, icon: n, iconPosition: r, component: a = "button", ...o }) => {
-	let s = a, { onClose: c } = i();
-	return /* @__PURE__ */ l(e, {
-		component: s,
-		...o,
-		variant: "secondary",
-		type: "button",
-		onClick: c,
-		icon: n,
-		iconPosition: r,
-		size: "large",
-		children: t
-	});
-};
+var s = (t) => /* @__PURE__ */ o(e, { ...t });
+s.displayName = "BottomSheet", s.Title = a, s.Content = n, s.ButtonSection = t, s.PrimaryButton = r, s.SecondaryButton = i;
 //#endregion
-export { g as default };
+export { s as default };
 
 //# sourceMappingURL=BottomSheet.js.map

package/dist/components/BottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport { TitleLevel, usePrefersReducedMotion, ZIndexContext } from \"@bonprix-ds/utils\";\nimport React, { ComponentProps, ElementType, FC, ReactNode, RefObject, useId } from \"react\";\nimport { Sheet } from \"react-modal-sheet\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Button } from \"@components/Buttons\";\nimport { useInnerOpen } from \"@hooks\";\nimport { backdrop } from \"@utils/tailwindVariants\";\n\nimport BottomSheetContext from \"./BottomSheetContext\";\nimport useConsumeBottomSheet from \"./useConsumeBottomSheet\";\nimport useCreateBottomSheet from \"./useCreateBottomSheet\";\n\nconst generateClasses = tv({\n  slots: {\n    root: \"preflight block\",\n    container: \"shadow-none rounded-none bg-clr-bg-modal max-h-[calc(100%-4rem)]\",\n    header: \"px-4 py-3\",\n    titleAndIcons: \"flex gap-2 items-center touch-pan-down\",\n    contentWrapper: \"flex flex-col w-full\",\n    content: [\n      \"typography-body1 text-clr-primary\",\n      // scroller must be a flexbox to fix scrollbar\n      // scroller needs some padding to not cut off the focus-ring\n      \"*:flex *:-mx-0.5 *:px-0.5\",\n      // scroller must set min-h-0 in order to make scrolling work inside our flex context\n      \"*:min-h-0\",\n    ],\n    dragHandleContainer: \"h-6 flex justify-center items-center shrink-0\",\n    dragHandle: \"h-1 w-8 rounded-full bg-clr-on-bg-low\",\n    backdrop: backdrop(),\n    scrollArea: \"scroll-area relative\",\n  },\n  variants: {\n    disableHorizontalPadding: {\n      false: { scrollArea: \"px-4\" },\n      true: \"\",\n    },\n  },\n});\n\ninterface SheetProps {\n  /** All of the subcomponents should be placed inside this property. */\n  children: ReactNode;\n  /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */\n  isOpen: boolean;\n  /** Callback function, that is triggered when the sheet is attempted to be closed.\n   *\n   * It will be called in following cases:\n   * - Click on backdrop\n   * - Swipe down to close\n   * - Click on \"close\" icon button in the upper-right corner\n   * - Click on any button (PrimaryButton or SecondaryButton)\n   *\n   * Should be used in conjunction with `isOpen`. */\n  onClose: () => void;\n  /** Callback to execute when clicking back icon. */\n  onBack?: () => void;\n  /** The z-index of the sheet.. */\n  zIndex?: number;\n}\n\ninterface SheetTitleProps {\n  /** The text content. */\n  children: string;\n  /** An optional subline that is displayed right below the title. */\n  subline?: string;\n  /** The heading level for the title. */\n  level?: TitleLevel;\n}\n\ninterface SheetButtonSectionProps {\n  /** Primary and secondary buttons should be placed inside this section. */\n  children: ReactNode;\n}\n\ninterface SheetContentProps {\n  /** The content of the content section. */\n  children: ReactNode;\n  /** If `true`, the horizontal padding around the content will be removed. */\n  disableHorizontalPadding?: boolean;\n}\n\ninterface SheetButtonBaseProps {\n  /** The label of the button. */\n  children: string;\n  /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n  icon?: IconType;\n  /** The position of the icon relative to the content. */\n  iconPosition?: \"start\" | \"end\";\n}\n\nexport type SheetButtonProps<C extends ElementType> = SheetButtonBaseProps & {\n  /** The semantic component to render the Button. Preferrably `\"button\"`. Defaults to `\"button\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof SheetButtonBaseProps | \"component\">;\n\ntype SheetPrimaryButtonProps<C extends ElementType> = SheetButtonProps<C> & {\n  /** If `true`, a loading spinner will be shown instead of the content. */\n  loading?: boolean;\n};\n\ninterface SheetSubcomponents {\n  Title: typeof Title;\n  Content: typeof Content;\n  ButtonSection: typeof ButtonSection;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n}\n\nexport interface Props extends SheetProps {\n  /** A reference to the root element of the sheet. */\n  ref?: RefObject<HTMLDivElement>;\n}\n\nconst BottomSheet: FC<Props> & SheetSubcomponents = ({ children, isOpen, onClose, onBack, zIndex = 9999, ref }) => {\n  // TODO: add aria-modal = true once we implemented the dialog pattern fully and i.e. manage the focus\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { root, container, dragHandleContainer, dragHandle, content, contentWrapper, backdrop } = generateClasses();\n  const { isShown, scrollRef, scrollPosition } = useCreateBottomSheet({ isOpen });\n\n  // When \"middle\" or \"bottom\", dragging is disabled to allow for regular scrolling.\n  // When at \"top\", we need to enable drag to close. When `undefined`, the element is not scrollable and can be dragged, too.\n  const disableDrag = scrollPosition === \"middle\" || scrollPosition === \"bottom\";\n\n  const { innerOpen } = useInnerOpen(isShown);\n\n  const titleId = useId();\n\n  return (\n    <Sheet\n      isOpen={innerOpen}\n      onClose={onClose}\n      className={root()}\n      detent=\"content\"\n      data-bpds=\"bottom-sheet\"\n      prefersReducedMotion={prefersReducedMotion}\n      style={{\n        // @ts-expect-error setting custom properties is not recognized by React.CSSProperties\n        // This is consumed by the inner ScrollArea to fix drag to close.\n        \"--touch-action\": disableDrag ? \"initial\" : \"pan-down\",\n        // We remove `pointer-events` handling from the library because it interfers with a lot of things like opened Selects that wouldn't close etc.\n        pointerEvents: undefined,\n        // When removing react-modal-sheet's pointerEvents handling, we need to adjust visibility because we can no longer rely on `pointer-events: none` being set on the wrapper that spans the whole page even when closed.\n        visibility: innerOpen ? \"visible\" : \"hidden\",\n        zIndex: zIndex,\n      }}\n      role=\"dialog\"\n      avoidKeyboard={false}\n      aria-labelledby={titleId}\n    >\n      {/* We remove `pointer-events` handling from the library because it interfers with a lot of things like opened Selects that wouldn't close etc. */}\n      <Sheet.Container className={container()} ref={ref} style={{ pointerEvents: undefined }}>\n        <Sheet.Header unstyled className={dragHandleContainer()}>\n          <Sheet.DragIndicator unstyled className={dragHandle()} />\n        </Sheet.Header>\n        <ZIndexContext.Provider value={zIndex}>\n          <BottomSheetContext.Provider value={{ scrollRef, scrollPosition, onClose, onBack, titleId }}>\n            <Sheet.Content\n              className={content()}\n              // disable default scrolling\n              disableScroll\n              // Dragging is still managed by `Sheet.Content` so we control it here\n              disableDrag={disableDrag}\n              // Apply keyboard height as padding bottom to keep content above the keyboard\n              style={{ paddingBottom: \"max(var(--keyboard-inset-height, 0rem), var(--app-safe-area-inset-bottom, 1rem))\" }}\n            >\n              <div className={contentWrapper()}>{children}</div>\n            </Sheet.Content>\n          </BottomSheetContext.Provider>\n        </ZIndexContext.Provider>\n      </Sheet.Container>\n      {/* TODO: Deactivate the animation, when the user prefers reduced motion: https://github.com/Temzasse/react-modal-sheet/issues/227 */}\n      <Sheet.Backdrop aria-label=\"Bottom Sheet schließen\" onTap={onClose} className={backdrop()} />\n    </Sheet>\n  );\n};\n\nexport default BottomSheet;\n\nconst Title = ({ children, subline, level = \"h3\" }: SheetTitleProps) => {\n  const { onBack, onClose, titleId } = useConsumeBottomSheet();\n  const { header, titleAndIcons } = generateClasses();\n  return (\n    <div className={header()}>\n      <div className={titleAndIcons()}>\n        {onBack && <IconButton onClick={onBack} icon=\"arrow-left\" label=\"Zurück\" variant=\"tertiary\" size=\"small\" />}\n        <Typography variant=\"bonprix-h6\" component={level} className=\"grow line-clamp-2\" id={titleId}>\n          {children}\n        </Typography>\n        <IconButton onClick={onClose} icon=\"closer\" label=\"Schließen\" variant=\"tertiary\" size=\"small\" />\n      </div>\n      {subline && <Typography>{subline}</Typography>}\n    </div>\n  );\n};\n\nconst Content = ({ children, disableHorizontalPadding = false }: SheetContentProps) => {\n  const { scrollRef: setScrollRef } = useConsumeBottomSheet();\n  const { scrollArea } = generateClasses({ disableHorizontalPadding });\n  return (\n    <div ref={setScrollRef} className={scrollArea()} data-bpds-disable-horizontal-padding={disableHorizontalPadding} tabIndex={0}>\n      {children}\n    </div>\n  );\n};\n\nconst ButtonSection = ({ children }: SheetButtonSectionProps) => {\n  return <div className=\"button-section w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down\">{children}</div>;\n};\n\nconst PrimaryButton = <C extends ElementType>({\n  children,\n  icon,\n  iconPosition,\n  loading,\n  component = \"button\" as C,\n  ...props\n}: SheetPrimaryButtonProps<C>) => {\n  const Component: ElementType = component;\n  const { onClick, type = \"button\", ...otherProps } = props;\n  const { onClose } = useConsumeBottomSheet();\n  const handleClick = (event: React.MouseEvent) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    onClick?.(event);\n    onClose();\n  };\n  return (\n    <Button\n      component={Component}\n      {...otherProps}\n      variant=\"primary\"\n      onClick={handleClick}\n      type={type}\n      icon={icon}\n      iconPosition={iconPosition}\n      size=\"large\"\n      loading={loading}\n    >\n      {children}\n    </Button>\n  );\n};\n\nconst SecondaryButton = <C extends ElementType>({\n  children,\n  icon,\n  iconPosition,\n  component = \"button\" as C,\n  ...props\n}: SheetButtonProps<C>) => {\n  const Component: ElementType = component;\n  const { onClose } = useConsumeBottomSheet();\n  return (\n    <Button\n      component={Component}\n      {...props}\n      variant=\"secondary\"\n      type=\"button\"\n      onClick={onClose}\n      icon={icon}\n      iconPosition={iconPosition}\n      size=\"large\"\n    >\n      {children}\n    </Button>\n  );\n};\n\nBottomSheet.displayName = \"BottomSheet\";\n\nBottomSheet.Title = Title;\nBottomSheet.Content = Content;\nBottomSheet.ButtonSection = ButtonSection;\nBottomSheet.PrimaryButton = PrimaryButton;\nBottomSheet.SecondaryButton = SecondaryButton;\n"],"mappings":"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"}
+{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import React from \"react\";\n\nimport BottomSheetRoot, { ButtonSection, Content, PrimaryButton, SecondaryButton, Title, type Props } from \"./BottomSheetRoot\";\n\nexport type { Props, SheetButtonProps } from \"./BottomSheetRoot\";\n\nconst BottomSheet = (props: Props) => <BottomSheetRoot {...props} />;\n\nBottomSheet.displayName = \"BottomSheet\";\n\nBottomSheet.Title = Title;\nBottomSheet.Content = Content;\nBottomSheet.ButtonSection = ButtonSection;\nBottomSheet.PrimaryButton = PrimaryButton;\nBottomSheet.SecondaryButton = SecondaryButton;\n\nexport default BottomSheet;\n"],"mappings":";;;;AAMA,IAAM,KAAe,MAAiB,kBAAC,GAAD,EAAiB,GAAI,EAAQ,CAAA;AAEnE,EAAY,cAAc,eAE1B,EAAY,QAAQ,GACpB,EAAY,UAAU,GACtB,EAAY,gBAAgB,GAC5B,EAAY,gBAAgB,GAC5B,EAAY,kBAAkB"}

package/dist/components/BottomSheet/BottomSheetRoot.js

@@ -0,0 +1,171 @@
+"use client";
+import e from "../Buttons/Button/index.js";
+import t from "../../hooks/useInnerOpen.js";
+import { backdrop as n } from "../../utils/tailwindVariants.js";
+import r from "./BottomSheetContext.js";
+import i from "./useConsumeBottomSheet.js";
+import a from "./useCreateBottomSheet.js";
+import o from "@bonprix-ds/react-icon-button";
+import { useId as s } from "react";
+import { tv as c } from "tailwind-variants";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import d from "@bonprix-ds/react-typography";
+import { ZIndexContext as f, usePrefersReducedMotion as p } from "@bonprix-ds/utils";
+import { Sheet as m } from "react-modal-sheet";
+//#region src/components/BottomSheet/BottomSheetRoot.tsx
+var h = c({
+	slots: {
+		root: "preflight block",
+		container: "shadow-none rounded-none bg-clr-bg-modal max-h-[calc(100%-4rem)]",
+		header: "px-4 py-3",
+		titleAndIcons: "flex gap-2 items-center touch-pan-down",
+		contentWrapper: "flex flex-col w-full",
+		content: [
+			"typography-body1 text-clr-primary",
+			"*:flex *:-mx-0.5 *:px-0.5",
+			"*:min-h-0"
+		],
+		dragHandleContainer: "h-6 flex justify-center items-center shrink-0",
+		dragHandle: "h-1 w-8 rounded-full bg-clr-on-bg-low",
+		backdrop: n(),
+		scrollArea: "scroll-area relative"
+	},
+	variants: { disableHorizontalPadding: {
+		false: { scrollArea: "px-4" },
+		true: ""
+	} }
+}), g = ({ children: e, isOpen: n, onClose: i, onBack: o, zIndex: c = 9999, ref: d }) => {
+	let g = p(), { root: _, container: v, dragHandleContainer: y, dragHandle: b, content: x, contentWrapper: S, backdrop: C } = h(), { isShown: w, scrollRef: T, scrollPosition: E } = a({ isOpen: n }), D = E === "middle" || E === "bottom", { innerOpen: O } = t(w), k = s();
+	return /* @__PURE__ */ u(m, {
+		isOpen: O,
+		onClose: i,
+		className: _(),
+		detent: "content",
+		"data-bpds": "bottom-sheet",
+		prefersReducedMotion: g,
+		style: {
+			"--touch-action": D ? "initial" : "pan-down",
+			pointerEvents: void 0,
+			visibility: O ? "visible" : "hidden",
+			zIndex: c
+		},
+		role: "dialog",
+		avoidKeyboard: !1,
+		"aria-labelledby": k,
+		children: [/* @__PURE__ */ u(m.Container, {
+			className: v(),
+			ref: d,
+			style: { pointerEvents: void 0 },
+			children: [/* @__PURE__ */ l(m.Header, {
+				unstyled: !0,
+				className: y(),
+				children: /* @__PURE__ */ l(m.DragIndicator, {
+					unstyled: !0,
+					className: b()
+				})
+			}), /* @__PURE__ */ l(f.Provider, {
+				value: c,
+				children: /* @__PURE__ */ l(r.Provider, {
+					value: {
+						scrollRef: T,
+						scrollPosition: E,
+						onClose: i,
+						onBack: o,
+						titleId: k
+					},
+					children: /* @__PURE__ */ l(m.Content, {
+						className: x(),
+						disableScroll: !0,
+						disableDrag: D,
+						style: { paddingBottom: "max(var(--keyboard-inset-height, 0rem), var(--app-safe-area-inset-bottom, 1rem))" },
+						children: /* @__PURE__ */ l("div", {
+							className: S(),
+							children: e
+						})
+					})
+				})
+			})]
+		}), /* @__PURE__ */ l(m.Backdrop, {
+			"aria-label": "Bottom Sheet schließen",
+			onTap: i,
+			className: C()
+		})]
+	});
+}, _ = ({ children: e, subline: t, level: n = "h3" }) => {
+	let { onBack: r, onClose: a, titleId: s } = i(), { header: c, titleAndIcons: f } = h();
+	return /* @__PURE__ */ u("div", {
+		className: c(),
+		children: [/* @__PURE__ */ u("div", {
+			className: f(),
+			children: [
+				r && /* @__PURE__ */ l(o, {
+					onClick: r,
+					icon: "arrow-left",
+					label: "Zurück",
+					variant: "tertiary",
+					size: "small"
+				}),
+				/* @__PURE__ */ l(d, {
+					variant: "bonprix-h6",
+					component: n,
+					className: "grow line-clamp-2",
+					id: s,
+					children: e
+				}),
+				/* @__PURE__ */ l(o, {
+					onClick: a,
+					icon: "closer",
+					label: "Schließen",
+					variant: "tertiary",
+					size: "small"
+				})
+			]
+		}), t && /* @__PURE__ */ l(d, { children: t })]
+	});
+}, v = ({ children: e, disableHorizontalPadding: t = !1 }) => {
+	let { scrollRef: n } = i(), { scrollArea: r } = h({ disableHorizontalPadding: t });
+	return /* @__PURE__ */ l("div", {
+		ref: n,
+		className: r(),
+		"data-bpds-disable-horizontal-padding": t,
+		tabIndex: 0,
+		children: e
+	});
+}, y = ({ children: e }) => /* @__PURE__ */ l("div", {
+	className: "button-section w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down",
+	children: e
+}), b = ({ children: t, icon: n, iconPosition: r, loading: a, component: o = "button", ...s }) => {
+	let c = o, { onClick: u, type: d = "button", ...f } = s, { onClose: p } = i(), m = (e) => {
+		u?.(e), p();
+	};
+	return /* @__PURE__ */ l(e, {
+		component: c,
+		...f,
+		variant: "primary",
+		onClick: m,
+		type: d,
+		icon: n,
+		iconPosition: r,
+		size: "large",
+		loading: a,
+		children: t
+	});
+}, x = ({ children: t, icon: n, iconPosition: r, component: a = "button", ...o }) => {
+	let s = a, { onClose: c } = i();
+	return /* @__PURE__ */ l(e, {
+		component: s,
+		...o,
+		variant: "secondary",
+		type: "button",
+		onClick: c,
+		icon: n,
+		iconPosition: r,
+		size: "large",
+		children: t
+	});
+};
+g.displayName = "BottomSheet";
+//#endregion
+export { y as ButtonSection, v as Content, b as PrimaryButton, x as SecondaryButton, _ as Title, g as default };
+
+//# sourceMappingURL=BottomSheetRoot.js.map

package/dist/components/BottomSheet/BottomSheetRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetRoot.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheetRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport { TitleLevel, usePrefersReducedMotion, ZIndexContext } from \"@bonprix-ds/utils\";\nimport React, { ComponentProps, ElementType, ReactNode, RefObject, useId } from \"react\";\nimport { Sheet } from \"react-modal-sheet\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Button } from \"@components/Buttons\";\nimport { useInnerOpen } from \"@hooks\";\nimport { backdrop } from \"@utils/tailwindVariants\";\n\nimport BottomSheetContext from \"./BottomSheetContext\";\nimport useConsumeBottomSheet from \"./useConsumeBottomSheet\";\nimport useCreateBottomSheet from \"./useCreateBottomSheet\";\n\nconst generateClasses = tv({\n  slots: {\n    root: \"preflight block\",\n    container: \"shadow-none rounded-none bg-clr-bg-modal max-h-[calc(100%-4rem)]\",\n    header: \"px-4 py-3\",\n    titleAndIcons: \"flex gap-2 items-center touch-pan-down\",\n    contentWrapper: \"flex flex-col w-full\",\n    content: [\n      \"typography-body1 text-clr-primary\",\n      // scroller must be a flexbox to fix scrollbar\n      // scroller needs some padding to not cut off the focus-ring\n      \"*:flex *:-mx-0.5 *:px-0.5\",\n      // scroller must set min-h-0 in order to make scrolling work inside our flex context\n      \"*:min-h-0\",\n    ],\n    dragHandleContainer: \"h-6 flex justify-center items-center shrink-0\",\n    dragHandle: \"h-1 w-8 rounded-full bg-clr-on-bg-low\",\n    backdrop: backdrop(),\n    scrollArea: \"scroll-area relative\",\n  },\n  variants: {\n    disableHorizontalPadding: {\n      false: { scrollArea: \"px-4\" },\n      true: \"\",\n    },\n  },\n});\n\ninterface SheetProps {\n  /** All of the subcomponents should be placed inside this property. */\n  children: ReactNode;\n  /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */\n  isOpen: boolean;\n  /** Callback function, that is triggered when the sheet is attempted to be closed.\n   *\n   * It will be called in following cases:\n   * - Click on backdrop\n   * - Swipe down to close\n   * - Click on \"close\" icon button in the upper-right corner\n   * - Click on any button (PrimaryButton or SecondaryButton)\n   *\n   * Should be used in conjunction with `isOpen`. */\n  onClose: () => void;\n  /** Callback to execute when clicking back icon. */\n  onBack?: () => void;\n  /** The z-index of the sheet.. */\n  zIndex?: number;\n}\n\nexport interface SheetTitleProps {\n  /** The text content. */\n  children: string;\n  /** An optional subline that is displayed right below the title. */\n  subline?: string;\n  /** The heading level for the title. */\n  level?: TitleLevel;\n}\n\nexport interface SheetButtonSectionProps {\n  /** Primary and secondary buttons should be placed inside this section. */\n  children: ReactNode;\n}\n\nexport interface SheetContentProps {\n  /** The content of the content section. */\n  children: ReactNode;\n  /** If `true`, the horizontal padding around the content will be removed. */\n  disableHorizontalPadding?: boolean;\n}\n\nexport interface SheetButtonBaseProps {\n  /** The label of the button. */\n  children: string;\n  /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n  icon?: IconType;\n  /** The position of the icon relative to the content. */\n  iconPosition?: \"start\" | \"end\";\n}\n\nexport type SheetButtonProps<C extends ElementType> = SheetButtonBaseProps & {\n  /** The semantic component to render the Button. Preferrably `\"button\"`. Defaults to `\"button\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof SheetButtonBaseProps | \"component\">;\n\ntype SheetPrimaryButtonProps<C extends ElementType> = SheetButtonProps<C> & {\n  /** If `true`, a loading spinner will be shown instead of the content. */\n  loading?: boolean;\n};\n\nexport interface Props extends SheetProps {\n  /** A reference to the root element of the sheet. */\n  ref?: RefObject<HTMLDivElement>;\n}\n\nconst BottomSheetRoot = ({ children, isOpen, onClose, onBack, zIndex = 9999, ref }: Props) => {\n  // TODO: add aria-modal = true once we implemented the dialog pattern fully and i.e. manage the focus\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { root, container, dragHandleContainer, dragHandle, content, contentWrapper, backdrop } = generateClasses();\n  const { isShown, scrollRef, scrollPosition } = useCreateBottomSheet({ isOpen });\n\n  // When \"middle\" or \"bottom\", dragging is disabled to allow for regular scrolling.\n  // When at \"top\", we need to enable drag to close. When `undefined`, the element is not scrollable and can be dragged, too.\n  const disableDrag = scrollPosition === \"middle\" || scrollPosition === \"bottom\";\n\n  const { innerOpen } = useInnerOpen(isShown);\n\n  const titleId = useId();\n\n  return (\n    <Sheet\n      isOpen={innerOpen}\n      onClose={onClose}\n      className={root()}\n      detent=\"content\"\n      data-bpds=\"bottom-sheet\"\n      prefersReducedMotion={prefersReducedMotion}\n      style={{\n        // @ts-expect-error setting custom properties is not recognized by React.CSSProperties\n        // This is consumed by the inner ScrollArea to fix drag to close.\n        \"--touch-action\": disableDrag ? \"initial\" : \"pan-down\",\n        // We remove `pointer-events` handling from the library because it interfers with a lot of things like opened Selects that wouldn't close etc.\n        pointerEvents: undefined,\n        // When removing react-modal-sheet's pointerEvents handling, we need to adjust visibility because we can no longer rely on `pointer-events: none` being set on the wrapper that spans the whole page even when closed.\n        visibility: innerOpen ? \"visible\" : \"hidden\",\n        zIndex: zIndex,\n      }}\n      role=\"dialog\"\n      avoidKeyboard={false}\n      aria-labelledby={titleId}\n    >\n      {/* We remove `pointer-events` handling from the library because it interfers with a lot of things like opened Selects that wouldn't close etc. */}\n      <Sheet.Container className={container()} ref={ref} style={{ pointerEvents: undefined }}>\n        <Sheet.Header unstyled className={dragHandleContainer()}>\n          <Sheet.DragIndicator unstyled className={dragHandle()} />\n        </Sheet.Header>\n        <ZIndexContext.Provider value={zIndex}>\n          <BottomSheetContext.Provider value={{ scrollRef, scrollPosition, onClose, onBack, titleId }}>\n            <Sheet.Content\n              className={content()}\n              // disable default scrolling\n              disableScroll\n              // Dragging is still managed by `Sheet.Content` so we control it here\n              disableDrag={disableDrag}\n              // Apply keyboard height as padding bottom to keep content above the keyboard\n              style={{ paddingBottom: \"max(var(--keyboard-inset-height, 0rem), var(--app-safe-area-inset-bottom, 1rem))\" }}\n            >\n              <div className={contentWrapper()}>{children}</div>\n            </Sheet.Content>\n          </BottomSheetContext.Provider>\n        </ZIndexContext.Provider>\n      </Sheet.Container>\n      {/* TODO: Deactivate the animation, when the user prefers reduced motion: https://github.com/Temzasse/react-modal-sheet/issues/227 */}\n      <Sheet.Backdrop aria-label=\"Bottom Sheet schließen\" onTap={onClose} className={backdrop()} />\n    </Sheet>\n  );\n};\n\nexport default BottomSheetRoot;\n\nexport const Title = ({ children, subline, level = \"h3\" }: SheetTitleProps) => {\n  const { onBack, onClose, titleId } = useConsumeBottomSheet();\n  const { header, titleAndIcons } = generateClasses();\n  return (\n    <div className={header()}>\n      <div className={titleAndIcons()}>\n        {onBack && <IconButton onClick={onBack} icon=\"arrow-left\" label=\"Zurück\" variant=\"tertiary\" size=\"small\" />}\n        <Typography variant=\"bonprix-h6\" component={level} className=\"grow line-clamp-2\" id={titleId}>\n          {children}\n        </Typography>\n        <IconButton onClick={onClose} icon=\"closer\" label=\"Schließen\" variant=\"tertiary\" size=\"small\" />\n      </div>\n      {subline && <Typography>{subline}</Typography>}\n    </div>\n  );\n};\n\nexport const Content = ({ children, disableHorizontalPadding = false }: SheetContentProps) => {\n  const { scrollRef: setScrollRef } = useConsumeBottomSheet();\n  const { scrollArea } = generateClasses({ disableHorizontalPadding });\n  return (\n    <div ref={setScrollRef} className={scrollArea()} data-bpds-disable-horizontal-padding={disableHorizontalPadding} tabIndex={0}>\n      {children}\n    </div>\n  );\n};\n\nexport const ButtonSection = ({ children }: SheetButtonSectionProps) => {\n  return <div className=\"button-section w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down\">{children}</div>;\n};\n\nexport const PrimaryButton = <C extends ElementType>({\n  children,\n  icon,\n  iconPosition,\n  loading,\n  component = \"button\" as C,\n  ...props\n}: SheetPrimaryButtonProps<C>) => {\n  const Component: ElementType = component;\n  const { onClick, type = \"button\", ...otherProps } = props;\n  const { onClose } = useConsumeBottomSheet();\n  const handleClick = (event: React.MouseEvent) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    onClick?.(event);\n    onClose();\n  };\n  return (\n    <Button\n      component={Component}\n      {...otherProps}\n      variant=\"primary\"\n      onClick={handleClick}\n      type={type}\n      icon={icon}\n      iconPosition={iconPosition}\n      size=\"large\"\n      loading={loading}\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport const SecondaryButton = <C extends ElementType>({\n  children,\n  icon,\n  iconPosition,\n  component = \"button\" as C,\n  ...props\n}: SheetButtonProps<C>) => {\n  const Component: ElementType = component;\n  const { onClose } = useConsumeBottomSheet();\n  return (\n    <Button\n      component={Component}\n      {...props}\n      variant=\"secondary\"\n      type=\"button\"\n      onClick={onClose}\n      icon={icon}\n      iconPosition={iconPosition}\n      size=\"large\"\n    >\n      {children}\n    </Button>\n  );\n};\n\nBottomSheetRoot.displayName = \"BottomSheet\";\n"],"mappings":"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"}

package/dist/components/Carousel/Carousel.js

@@ -1,100 +1,11 @@
-"use client";
-import e from "./CarouselArrow.js";
+import e from "./CarouselRoot.js";
+import t from "./CarouselSlide.js";
 import "react";
-import { tv as t } from "tailwind-variants";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Splide as i, SplideSlide as a, SplideTrack as o } from "@splidejs/react-splide";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/components/Carousel/Carousel.tsx
-var s = t({
-	slots: {
-		root: "",
-		buttons: "",
-		paginationClass: "splide__pagination flex gap-1 absolute start-0 end-0 bottom-2 px-4 py-0 z-1",
-		page: [
-			"splide__pagination__page block p-0 relative bg-clr-on-bg-low w-3 h-0.25 m-0 opacity-100 border-none rounded-none transform-none transition-all",
-			"[&.is-active]:bg-clr-black [&.is-active]:h-1",
-			"after:content-[''] after:absolute after:start-0 after:-mt-1 after:h-2 after:w-3 after:cursor-pointer [&.is-active]:after:content-[]"
-		]
-	},
-	variants: { showArrows: {
-		always: "",
-		hover: {
-			root: "group/crsl",
-			buttons: "hidden group-hover/crsl:flex"
-		},
-		never: ""
-	} }
-}), c = ({ children: t, label: a, perPage: c = 1, perMove: l = 1, rewind: u = !1, buttonsContrast: d = !1, invertButtons: f = !1, focus: p, gap: m = 20, showArrows: h = "always", pagination: g = !0, onMove: _, padding: v, disableHorizontalPadding: y = !1, start: b = 0, disableDrag: x = !1, paginationRef: S }) => {
-	let { root: C, buttons: w, paginationClass: T, page: E } = s({ showArrows: h }), D = {
-		perPage: c,
-		perMove: l,
-		type: u ? "loop" : "slide",
-		focus: p,
-		gap: m,
-		arrows: h !== "never",
-		pagination: g,
-		padding: v,
-		start: b,
-		lazyLoad: "nearby",
-		classes: { page: E() },
-		i18n: {
-			prev: "vorherige Ansicht",
-			next: "nächste Ansicht",
-			first: "erste Ansicht",
-			last: "letzte Ansicht",
-			slideX: "gehe zu Ansicht %s",
-			pageX: "gehe zu Seite %s",
-			play: "starte Wiedergabe",
-			pause: "pausiere Wiedergabe",
-			carousel: "carousel",
-			select: "wähle eine Ansicht aus",
-			slide: "slide",
-			slideLabel: "%s von %s"
-		},
-		drag: !x
-	};
-	return /* @__PURE__ */ r(i, {
-		"aria-label": a,
-		options: D,
-		hasTrack: !1,
-		onMove: (e, t, n) => _?.(t, n),
-		"data-bpds": "carousel",
-		"data-bpds-per-page": c,
-		"data-bpds-per-move": l,
-		"data-bpds-rewind": u,
-		"data-bpds-buttons-contrast": d,
-		"data-bpds-invert-buttons": f,
-		"data-bpds-disable-horizontal-padding": y,
-		"data-bpds-gap": m,
-		"data-bpds-padding": v,
-		"data-bpds-pagination": g,
-		"data-bpds-show-arrows": h,
-		className: C(),
-		children: [
-			/* @__PURE__ */ r("div", {
-				className: `splide__arrows ${w()}`,
-				children: [/* @__PURE__ */ n(e, {
-					invertButtons: f,
-					position: "left",
-					buttonsContrast: d,
-					disableHorizontalPadding: y
-				}), /* @__PURE__ */ n(e, {
-					invertButtons: f,
-					position: "right",
-					buttonsContrast: d,
-					disableHorizontalPadding: y
-				})]
-			}),
-			/* @__PURE__ */ n(o, { children: t }),
-			/* @__PURE__ */ n("ul", {
-				className: T(),
-				ref: S
-			})
-		]
-	});
-};
-c.displayName = "Carousel", c.Slide = a, a.displayName = "Carousel.Slide";
+var r = (t) => /* @__PURE__ */ n(e, { ...t });
+r.displayName = "Carousel", r.Slide = t;
 //#endregion
-export { c as default };
+export { r as default };
 
 //# sourceMappingURL=Carousel.js.map

package/dist/components/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport React, { ComponentPropsWithoutRef, FC, ReactElement, Ref } from \"react\";\nimport { tv } from \"tailwind-variants\";\n// @ts-expect-error: Splide does not export its types correctly and hasn't been maintained for a few years now, so we are not expecting that to change. This component will be replaced soon, so we'll not take effort to fix or patch this.\nimport { Options, Splide, SplideSlide, SplideTrack } from \"@splidejs/react-splide\";\n\nimport CarouselArrow from \"./CarouselArrow\";\n\nconst generateClasses = tv({\n  slots: {\n    root: \"\",\n    buttons: \"\",\n    paginationClass: \"splide__pagination flex gap-1 absolute start-0 end-0 bottom-2 px-4 py-0 z-1\",\n    page: [\n      \"splide__pagination__page block p-0 relative bg-clr-on-bg-low w-3 h-0.25 m-0 opacity-100 border-none rounded-none transform-none transition-all\",\n      \"[&.is-active]:bg-clr-black [&.is-active]:h-1\",\n      \"after:content-[''] after:absolute after:start-0 after:-mt-1 after:h-2 after:w-3 after:cursor-pointer [&.is-active]:after:content-[]\",\n    ],\n  },\n  variants: {\n    showArrows: {\n      always: \"\",\n      hover: {\n        root: \"group/crsl\",\n        buttons: \"hidden group-hover/crsl:flex\",\n      },\n      never: \"\",\n    },\n  },\n});\n\ninterface Subcomponents {\n  Slide: typeof SplideSlide;\n}\n\ntype SlideElement = ReactElement<ComponentPropsWithoutRef<typeof SplideSlide>, typeof SplideSlide>;\n\nexport interface Props {\n  /** The content of the carousel. Here, Carousel.Slide subcomponents should be placed. */\n  children: SlideElement | SlideElement[];\n  /** Sets accessible label with help of `aria-label`. */\n  label: string;\n  /** Amount of slides to show per page. */\n  perPage?: number;\n  /** Amount of slides to move on each transition. */\n  perMove?: number;\n  /** If set to `true`, the carousel will loop back to the first slide after reaching the last one. */\n  rewind?: boolean;\n  /** If set to `true`, the primary variant of icon buttons will be used to achieve a high contrast. */\n  buttonsContrast?: boolean;\n  /** If set to `true`, the color of the arrow buttons will be inverted. */\n  invertButtons?: boolean;\n  /** If set to `true`, the horizontal padding for the arrow buttons will be removed. */\n  disableHorizontalPadding?: boolean;\n  /** Determines which slide should be active if there are multiple slides in a page */\n  focus?: number | \"center\";\n  /** The gap between the slides in pixels. */\n  gap?: number;\n  /** Manages the behavior of the arrow icon buttons. */\n  showArrows?: \"always\" | \"hover\" | \"never\";\n  /** Toggles the visibility of page indicators. */\n  pagination?: boolean;\n  /** Callback function that is called when the slide changes. */\n  onMove?: (destIndex: number, prevIndex: number) => void;\n  /** Sets padding left/right or top/bottom of the carousel. The CSS format is acceptable */\n  padding?: Options[\"padding\"];\n  /** The index of the initial slide to be displayed */\n  start?: number;\n  /** If `true`, disables dragging/swiping between slides. Can be used to control touch events and implement further gestures like pinch/zoom. */\n  disableDrag?: boolean;\n  /** Ref to the pagination element. Can be used to control pagination from outside of the Carousel component. */\n  paginationRef?: Ref<HTMLUListElement>;\n}\n\ntype SplideProps = ComponentPropsWithoutRef<typeof Splide>;\ntype SplideOptions = SplideProps[\"options\"];\n\nconst Carousel: FC<Props> & Subcomponents = ({\n  children,\n  label,\n  perPage = 1,\n  perMove = 1,\n  rewind = false,\n  buttonsContrast = false,\n  invertButtons = false,\n  focus,\n  gap = 20,\n  showArrows = \"always\",\n  pagination = true,\n  onMove,\n  padding,\n  disableHorizontalPadding = false,\n  start = 0,\n  disableDrag = false,\n  paginationRef,\n}) => {\n  const { root, buttons, paginationClass, page } = generateClasses({ showArrows });\n\n  const options: SplideOptions = {\n    perPage,\n    perMove,\n    type: rewind ? \"loop\" : \"slide\",\n    focus,\n    gap,\n    arrows: showArrows !== \"never\",\n    pagination,\n    padding,\n    start,\n    lazyLoad: \"nearby\",\n    classes: { page: page() },\n    i18n: {\n      prev: \"vorherige Ansicht\",\n      next: \"nächste Ansicht\",\n      first: \"erste Ansicht\",\n      last: \"letzte Ansicht\",\n      slideX: \"gehe zu Ansicht %s\",\n      pageX: \"gehe zu Seite %s\",\n      play: \"starte Wiedergabe\",\n      pause: \"pausiere Wiedergabe\",\n      carousel: \"carousel\",\n      select: \"wähle eine Ansicht aus\",\n      slide: \"slide\",\n      slideLabel: \"%s von %s\",\n    },\n    drag: !disableDrag,\n  };\n\n  return (\n    <Splide\n      aria-label={label}\n      options={options}\n      hasTrack={false}\n      onMove={(_slide: unknown, destIndex: number, prevIndex: number) => onMove?.(destIndex, prevIndex)}\n      data-bpds=\"carousel\"\n      data-bpds-per-page={perPage}\n      data-bpds-per-move={perMove}\n      data-bpds-rewind={rewind}\n      data-bpds-buttons-contrast={buttonsContrast}\n      data-bpds-invert-buttons={invertButtons}\n      data-bpds-disable-horizontal-padding={disableHorizontalPadding}\n      data-bpds-gap={gap}\n      data-bpds-padding={padding}\n      data-bpds-pagination={pagination}\n      data-bpds-show-arrows={showArrows}\n      className={root()}\n    >\n      <div className={`splide__arrows ${buttons()}`}>\n        <CarouselArrow\n          invertButtons={invertButtons}\n          position=\"left\"\n          buttonsContrast={buttonsContrast}\n          disableHorizontalPadding={disableHorizontalPadding}\n        />\n        <CarouselArrow\n          invertButtons={invertButtons}\n          position=\"right\"\n          buttonsContrast={buttonsContrast}\n          disableHorizontalPadding={disableHorizontalPadding}\n        />\n      </div>\n      <SplideTrack>{children}</SplideTrack>\n      <ul className={paginationClass()} ref={paginationRef} />\n    </Splide>\n  );\n};\n\nCarousel.displayName = \"Carousel\";\n\nCarousel.Slide = SplideSlide;\n// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\nSplideSlide.displayName = \"Carousel.Slide\";\n\nexport default Carousel;\n"],"mappings":";;;;;;;AAUA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,MAAM;EACN,SAAS;EACT,iBAAiB;EACjB,MAAM;GACJ;GACA;GACA;EACF;CACF;CACA,UAAU,EACR,YAAY;EACV,QAAQ;EACR,OAAO;GACL,MAAM;GACN,SAAS;EACX;EACA,OAAO;CACT,EACF;AACF,CAAC,GAgDK,KAAuC,EAC3C,aACA,UACA,aAAU,GACV,aAAU,GACV,YAAS,IACT,qBAAkB,IAClB,mBAAgB,IAChB,UACA,SAAM,IACN,gBAAa,UACb,gBAAa,IACb,WACA,YACA,8BAA2B,IAC3B,WAAQ,GACR,iBAAc,IACd,uBACI;CACJ,IAAM,EAAE,SAAM,YAAS,oBAAiB,YAAS,EAAgB,EAAE,cAAW,CAAC,GAEzE,IAAyB;EAC7B;EACA;EACA,MAAM,IAAS,SAAS;EACxB;EACA;EACA,QAAQ,MAAe;EACvB;EACA;EACA;EACA,UAAU;EACV,SAAS,EAAE,MAAM,EAAK,EAAE;EACxB,MAAM;GACJ,MAAM;GACN,MAAM;GACN,OAAO;GACP,MAAM;GACN,QAAQ;GACR,OAAO;GACP,MAAM;GACN,OAAO;GACP,UAAU;GACV,QAAQ;GACR,OAAO;GACP,YAAY;EACd;EACA,MAAM,CAAC;CACT;CAEA,OACE,kBAAC,GAAD;EACE,cAAY;EACH;EACT,UAAU;EACV,SAAS,GAAiB,GAAmB,MAAsB,IAAS,GAAW,CAAS;EAChG,aAAU;EACV,sBAAoB;EACpB,sBAAoB;EACpB,oBAAkB;EAClB,8BAA4B;EAC5B,4BAA0B;EAC1B,wCAAsC;EACtC,iBAAe;EACf,qBAAmB;EACnB,wBAAsB;EACtB,yBAAuB;EACvB,WAAW,EAAK;EAhBlB,UAAA;GAkBE,kBAAC,OAAD;IAAK,WAAW,kBAAkB,EAAQ;IAA1C,UAAA,CACE,kBAAC,GAAD;KACiB;KACf,UAAS;KACQ;KACS;IAC3B,CAAA,GACD,kBAAC,GAAD;KACiB;KACf,UAAS;KACQ;KACS;IAC3B,CAAA,CACE;;GACL,kBAAC,GAAD,EAAc,YAAsB,CAAA;GACpC,kBAAC,MAAD;IAAI,WAAW,EAAgB;IAAG,KAAK;GAAgB,CAAA;EACjD;;AAEZ;AAEA,EAAS,cAAc,YAEvB,EAAS,QAAQ,GAEjB,EAAY,cAAc"}
+{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React from \"react\";\n\nimport CarouselRoot, { type Props } from \"./CarouselRoot\";\nimport CarouselSlide from \"./CarouselSlide\";\n\nexport type { Props } from \"./CarouselRoot\";\n\nconst Carousel = (props: Props) => <CarouselRoot {...props} />;\n\nCarousel.displayName = \"Carousel\";\n\nCarousel.Slide = CarouselSlide;\n\nexport default Carousel;\n"],"mappings":";;;;;AAOA,IAAM,KAAY,MAAiB,kBAAC,GAAD,EAAc,GAAI,EAAQ,CAAA;AAE7D,EAAS,cAAc,YAEvB,EAAS,QAAQ"}

package/dist/components/Carousel/CarouselArrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselArrow.js","names":[],"sources":["../../../src/components/Carousel/CarouselArrow.tsx"],"sourcesContent":["import { BaseButton } from \"@bonprix-ds/internal-components\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  slots: {\n    wrapper: \"z-[1] absolute top-1/2 transform -translate-y-1/2\",\n    button: \"disabled:hidden\",\n  },\n  variants: {\n    position: {\n      left: {\n        wrapper: \"start-3\",\n        button: \"splide__arrow--prev\",\n      },\n      right: {\n        wrapper: \"end-3\",\n        button: \"splide__arrow--next\",\n      },\n    },\n    disableHorizontalPadding: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      disableHorizontalPadding: true,\n      position: \"left\",\n      class: {\n        wrapper: \"start-0\",\n      },\n    },\n    {\n      disableHorizontalPadding: true,\n      position: \"right\",\n      class: {\n        wrapper: \"end-0\",\n      },\n    },\n  ],\n});\n\ninterface Props {\n  position: \"left\" | \"right\";\n  buttonsContrast: boolean;\n  invertButtons: boolean;\n  disableHorizontalPadding: boolean;\n}\n\nconst CarouselArrow: React.FC<Props> = ({ position, buttonsContrast, invertButtons, disableHorizontalPadding }) => {\n  const isLeftArrow = position === \"left\" ? true : false;\n  const icon = isLeftArrow ? \"arrow-left\" : \"arrow-right\";\n  const label = isLeftArrow ? \"Previous Page\" : \"Next Page\";\n  const variant = buttonsContrast ? \"primary\" : \"tertiary\";\n  const { wrapper, button } = generateClasses({ position, disableHorizontalPadding });\n\n  return (\n    <span className={wrapper()}>\n      <BaseButton type=\"button\" className={button()} variant={variant} icon={icon} componentName=\"icon-button\" inverted={invertButtons}>\n        {label}\n      </BaseButton>\n    </span>\n  );\n};\n\nexport default CarouselArrow;\n"],"mappings":";;;;;AAIA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,SAAS;EACT,QAAQ;CACV;CACA,UAAU;EACR,UAAU;GACR,MAAM;IACJ,SAAS;IACT,QAAQ;GACV;GACA,OAAO;IACL,SAAS;IACT,QAAQ;GACV;EACF;EACA,0BAA0B;GACxB,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB,CAChB;EACE,0BAA0B;EAC1B,UAAU;EACV,OAAO,EACL,SAAS,UACX;CACF,GACA;EACE,0BAA0B;EAC1B,UAAU;EACV,OAAO,EACL,SAAS,QACX;CACF,CACF;AACF,CAAC,GASK,KAAkC,EAAE,aAAU,oBAAiB,kBAAe,kCAA+B;CACjH,IAAM,IAAc,MAAa,QAC3B,IAAO,IAAc,eAAe,eACpC,IAAQ,IAAc,kBAAkB,aACxC,IAAU,IAAkB,YAAY,YACxC,EAAE,YAAS,cAAW,EAAgB;EAAE;EAAU;CAAyB,CAAC;CAElF,OACE,kBAAC,QAAD;EAAM,WAAW,EAAQ;EACvB,UAAA,kBAAC,GAAD;GAAY,MAAK;GAAS,WAAW,EAAO;GAAY;GAAe;GAAM,eAAc;GAAc,UAAU;GAChH,UAAA;EACS,CAAA;CACR,CAAA;AAEV"}
+{"version":3,"file":"CarouselArrow.js","names":[],"sources":["../../../src/components/Carousel/CarouselArrow.tsx"],"sourcesContent":["import { BaseButton } from \"@bonprix-ds/internal-components\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  slots: {\n    wrapper: \"z-[1] absolute top-1/2 transform -translate-y-1/2\",\n    button: \"disabled:hidden\",\n  },\n  variants: {\n    position: {\n      left: {\n        wrapper: \"start-3\",\n        button: \"splide__arrow--prev\",\n      },\n      right: {\n        wrapper: \"end-3\",\n        button: \"splide__arrow--next\",\n      },\n    },\n    disableHorizontalPadding: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      disableHorizontalPadding: true,\n      position: \"left\",\n      class: {\n        wrapper: \"start-0\",\n      },\n    },\n    {\n      disableHorizontalPadding: true,\n      position: \"right\",\n      class: {\n        wrapper: \"end-0\",\n      },\n    },\n  ],\n});\n\ninterface Props {\n  position: \"left\" | \"right\";\n  buttonsContrast: boolean;\n  invertButtons: boolean;\n  disableHorizontalPadding: boolean;\n}\n\nconst CarouselArrow = ({ position, buttonsContrast, invertButtons, disableHorizontalPadding }: Props) => {\n  const isLeftArrow = position === \"left\" ? true : false;\n  const icon = isLeftArrow ? \"arrow-left\" : \"arrow-right\";\n  const label = isLeftArrow ? \"Previous Page\" : \"Next Page\";\n  const variant = buttonsContrast ? \"primary\" : \"tertiary\";\n  const { wrapper, button } = generateClasses({ position, disableHorizontalPadding });\n\n  return (\n    <span className={wrapper()}>\n      <BaseButton type=\"button\" className={button()} variant={variant} icon={icon} componentName=\"icon-button\" inverted={invertButtons}>\n        {label}\n      </BaseButton>\n    </span>\n  );\n};\n\nexport default CarouselArrow;\n"],"mappings":";;;;;AAIA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,SAAS;EACT,QAAQ;CACV;CACA,UAAU;EACR,UAAU;GACR,MAAM;IACJ,SAAS;IACT,QAAQ;GACV;GACA,OAAO;IACL,SAAS;IACT,QAAQ;GACV;EACF;EACA,0BAA0B;GACxB,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB,CAChB;EACE,0BAA0B;EAC1B,UAAU;EACV,OAAO,EACL,SAAS,UACX;CACF,GACA;EACE,0BAA0B;EAC1B,UAAU;EACV,OAAO,EACL,SAAS,QACX;CACF,CACF;AACF,CAAC,GASK,KAAiB,EAAE,aAAU,oBAAiB,kBAAe,kCAAsC;CACvG,IAAM,IAAc,MAAa,QAC3B,IAAO,IAAc,eAAe,eACpC,IAAQ,IAAc,kBAAkB,aACxC,IAAU,IAAkB,YAAY,YACxC,EAAE,YAAS,cAAW,EAAgB;EAAE;EAAU;CAAyB,CAAC;CAElF,OACE,kBAAC,QAAD;EAAM,WAAW,EAAQ;EACvB,UAAA,kBAAC,GAAD;GAAY,MAAK;GAAS,WAAW,EAAO;GAAY;GAAe;GAAM,eAAc;GAAc,UAAU;GAChH,UAAA;EACS,CAAA;CACR,CAAA;AAEV"}

package/dist/components/Carousel/CarouselRoot.js

@@ -0,0 +1,100 @@
+"use client";
+import e from "./CarouselArrow.js";
+import "react";
+import { tv as t } from "tailwind-variants";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Splide as i, SplideTrack as a } from "@splidejs/react-splide";
+//#region src/components/Carousel/CarouselRoot.tsx
+var o = t({
+	slots: {
+		root: "",
+		buttons: "",
+		paginationClass: "splide__pagination flex gap-1 absolute start-0 end-0 bottom-2 px-4 py-0 z-1",
+		page: [
+			"splide__pagination__page block p-0 relative bg-clr-on-bg-low w-3 h-0.25 m-0 opacity-100 border-none rounded-none transform-none transition-all",
+			"[&.is-active]:bg-clr-black [&.is-active]:h-1",
+			"after:content-[''] after:absolute after:start-0 after:-mt-1 after:h-2 after:w-3 after:cursor-pointer [&.is-active]:after:content-[]"
+		]
+	},
+	variants: { showArrows: {
+		always: "",
+		hover: {
+			root: "group/crsl",
+			buttons: "hidden group-hover/crsl:flex"
+		},
+		never: ""
+	} }
+}), s = ({ children: t, label: s, perPage: c = 1, perMove: l = 1, rewind: u = !1, buttonsContrast: d = !1, invertButtons: f = !1, focus: p, gap: m = 20, showArrows: h = "always", pagination: g = !0, onMove: _, padding: v, disableHorizontalPadding: y = !1, start: b = 0, disableDrag: x = !1, paginationRef: S }) => {
+	let { root: C, buttons: w, paginationClass: T, page: E } = o({ showArrows: h }), D = {
+		perPage: c,
+		perMove: l,
+		type: u ? "loop" : "slide",
+		focus: p,
+		gap: m,
+		arrows: h !== "never",
+		pagination: g,
+		padding: v,
+		start: b,
+		lazyLoad: "nearby",
+		classes: { page: E() },
+		i18n: {
+			prev: "vorherige Ansicht",
+			next: "nächste Ansicht",
+			first: "erste Ansicht",
+			last: "letzte Ansicht",
+			slideX: "gehe zu Ansicht %s",
+			pageX: "gehe zu Seite %s",
+			play: "starte Wiedergabe",
+			pause: "pausiere Wiedergabe",
+			carousel: "carousel",
+			select: "wähle eine Ansicht aus",
+			slide: "slide",
+			slideLabel: "%s von %s"
+		},
+		drag: !x
+	};
+	return /* @__PURE__ */ r(i, {
+		"aria-label": s,
+		options: D,
+		hasTrack: !1,
+		onMove: (e, t, n) => _?.(t, n),
+		"data-bpds": "carousel",
+		"data-bpds-per-page": c,
+		"data-bpds-per-move": l,
+		"data-bpds-rewind": u,
+		"data-bpds-buttons-contrast": d,
+		"data-bpds-invert-buttons": f,
+		"data-bpds-disable-horizontal-padding": y,
+		"data-bpds-gap": m,
+		"data-bpds-padding": v,
+		"data-bpds-pagination": g,
+		"data-bpds-show-arrows": h,
+		className: C(),
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: `splide__arrows ${w()}`,
+				children: [/* @__PURE__ */ n(e, {
+					invertButtons: f,
+					position: "left",
+					buttonsContrast: d,
+					disableHorizontalPadding: y
+				}), /* @__PURE__ */ n(e, {
+					invertButtons: f,
+					position: "right",
+					buttonsContrast: d,
+					disableHorizontalPadding: y
+				})]
+			}),
+			/* @__PURE__ */ n(a, { children: t }),
+			/* @__PURE__ */ n("ul", {
+				className: T(),
+				ref: S
+			})
+		]
+	});
+};
+s.displayName = "Carousel";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=CarouselRoot.js.map