bonprix-design-system 0.48.0 → 0.49.0-beta.2

package/dist/index.d.ts

@@ -42,21 +42,21 @@ export declare interface AlertProps {
 }
 
 declare interface Anchor {
-    /** Standard HTML attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel">MDN, Attributes - rel</a>. Only usable when the property `link` is set to `true`.  */
-    rel?: ValidRel;
-    /** Standard HTML attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href">MDN, Anchor Element - href</a>. Only usable when the property `link` is set to `true`. */
+    /** Standard HTML attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel">MDN, Attributes - rel</a>. Only usable with the anchor element.  */
+    rel?: string;
+    /** Standard HTML attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href">MDN, Anchor Element - href</a>. Only usable with the anchor element. */
     href: string;
-    /** Standard HTML attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#target>MDN, Anchor Element - target</a>. Only usable when the property `link` is set to `true`.  */
+    /** Standard HTML attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#target>MDN, Anchor Element - target</a>. Only usable with the anchor element.  */
     target?: "_blank" | "_self" | "_parent" | "_top";
 }
 
 declare interface AsButton extends BaseProps {
-    link?: false;
+    link?: never;
     onClick: (event: default_2.MouseEvent<HTMLButtonElement>) => void;
 }
 
 declare interface AsButton_2 extends BaseProps_2 {
-    link?: false;
+    link?: never;
     /** If `true`, the button will be disabled and thus not interactable. Only usable when the property `link` is set to `false`.  */
     disabled?: boolean;
     /** If `true`, a loading spinner will be shown instead of the content. Only usable when the property `link` is set to `false`. */
@@ -68,7 +68,7 @@ declare interface AsButton_2 extends BaseProps_2 {
 declare interface AsButton_3 extends BaseProps_4 {
     /** Standard HTML attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type">MDN, Button Element - type</a>. */
     type?: ButtonTypeAttribute;
-    link?: false;
+    link?: never;
     /** If `true`, the button will be disabled and thus not interactable. Only usable when the property `link` is set to `false`.  */
     disabled?: boolean;
     /** If `true`, a loading spinner will be shown instead of the content. Only usable when the property `link` is set to `false`. */
@@ -94,6 +94,9 @@ declare interface AsLink extends BaseProps, Anchor {
 declare interface AsLink_2 extends BaseProps_2, Anchor {
     /** If `true`, an anchor element will be rendered instead of a button. Also, link-specific properties `href`, `rel`and `target` will be available. Button-specific properties are not usable. */
     link: true;
+    /**  Callback, which is triggered when the link is clicked. */
+    onClick?: (event: default_2.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    type?: never;
 }
 
 declare interface AsLink_3 extends BaseProps_4, Anchor {
@@ -356,11 +359,11 @@ export declare const breakpoints: Breakpoints;
 
 export declare const Button: FC<ButtonProps>;
 
-export declare type ButtonProps = SubmitResetVariantProps | ButtonVariantProps;
+export declare type ButtonProps = AsLink_2 | SubmitResetVariantProps | ButtonVariantProps;
 
 declare type ButtonTypeAttribute = "button" | "submit" | "reset";
 
-declare type ButtonVariantProps = FinalBaseProps & {
+declare type ButtonVariantProps = AsButton_2 & {
     /**  Callback, which is triggered when the button is activated. */
     onClick: (event: default_2.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     /** Standard HTML attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type">MDN, Button Element - type</a>. */
@@ -407,6 +410,41 @@ export declare interface CarouselProps {
     disableDrag?: boolean;
 }
 
+export declare const CarouselV2: FC<CarouselV2Props> & SubComponents;
+
+export declare interface CarouselV2Props {
+    /** The content of the carousel. Here, all of the subcomponents should be placed. */
+    children: ReactNode;
+    /** Sets a visual header for the carousel. */
+    title: string;
+    /** Defines the level of the used header element. */
+    titleLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /** Amount of slides that will be visible at the same time, thus building a page. */
+    perPage?: number | ResponsiveNumber;
+    /** Amount of slides to move per arrow icon button click. */
+    perMove?: number | ResponsiveNumber;
+    /** If true, the carousel will rewind to the beginning when reaching the end or going to end when going before the first slide. */
+    rewind?: boolean;
+    /** If set to `true`, the primary variant of icon buttons will be used to achieve a high contrast. */
+    buttonsContrast?: boolean;
+    /** The padding at the right side of the page in pixels. Can be used to implement the so-called "scroll hint" */
+    padding?: number;
+    /** Callback function that is called when the slide changes. */
+    onMove?: () => void;
+    /** Manages the behavior of the arrow icon buttons. */
+    showArrows?: "always" | "hover" | "never";
+    /** The gap between slides in pixels. */
+    gap?: number;
+    /** If set to `true`, the color of the arrow buttons will be inverted. */
+    invertButtons?: boolean;
+    /** If set to `true`, the horizontal padding for the arrow buttons will be removed. */
+    disableHorizontalPadding?: boolean;
+    /** Moves to a certain page imperatively. It's a one-time operation and is not supposed to fully control Carousel from the outside. */
+    moveToPage?: number;
+    /** Can be used if a title already exists on the page. Do not use both `title`and `aria-labelledby`. */
+    "aria-labelledby"?: string;
+}
+
 export declare const Checkbox: FC<CheckboxProps>;
 
 export declare const CheckboxGroup: FC<CheckboxGroupProps> & Subcomponents_2;
@@ -588,8 +626,6 @@ export declare interface DialogProps {
     zIndex?: number;
 }
 
-declare type FinalBaseProps = AsLink_2 | AsButton_2;
-
 export declare const Grid: FC<GridProps> & {
     Item: typeof GridItem;
 };
@@ -620,7 +656,11 @@ declare interface GridItemProps {
 export declare interface GridProps {
     /** A place where Grid.Item components should be added. */
     children: ReactNode;
-    /** If set to `true`, the grid will not have gutters between items. */
+    /** Classes for the Grid wrapper element. Intended mainly for customize gap size. */
+    className?: string;
+    /** If set to `true`, the grid will not have gutters between items.
+     * @deprecated Use `className="gap-x-0"` instead.
+     */
     disableGutters?: boolean;
 }
 
@@ -773,6 +813,8 @@ export declare const PasswordField: FC<PasswordFieldProps>;
 
 export declare type PasswordFieldProps = ControlledInputProps_4 | UncontrolledInputProps_4;
 
+declare const PositionIndicator: FC;
+
 export declare const Price: FC<PriceProps>;
 
 export declare type PriceProps = RegularProps | SaleProps | BestProps | TopDealProps | NoPriceProps;
@@ -905,6 +947,8 @@ export declare interface RemovedItemPlaceholderProps {
     onClick: () => void;
 }
 
+declare type ResponsiveNumber = Partial<Record<Breakpoint, number>>;
+
 declare interface SaleProps extends TwoPriceProps {
     variant: "sale";
 }
@@ -982,6 +1026,20 @@ export declare interface SideSheetProps {
     zIndex?: number;
 }
 
+declare const Slide: FC<SlideProps>;
+
+declare interface SlideProps {
+    children: ReactNode;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}
+
+declare const Slides: FC<SlidesProps>;
+
+declare interface SlidesProps {
+    children: ReactNode;
+}
+
 declare interface SourceSetMapper {
     s?: string;
     m?: string;
@@ -1015,6 +1073,12 @@ export declare interface StepNaviProps {
 
 declare const StepNaviStep: FC<Props_10>;
 
+declare interface SubComponents {
+    Slide: typeof Slide;
+    PositionIndicator: typeof PositionIndicator;
+    Slides: typeof Slides;
+}
+
 declare interface Subcomponents {
     Slide: typeof SplideSlide;
 }
@@ -1059,7 +1123,7 @@ declare interface Subcomponents_9 {
     List: typeof TabsList;
 }
 
-declare type SubmitResetVariantProps = FinalBaseProps & {
+declare type SubmitResetVariantProps = AsButton_2 & {
     onClick?: (event: default_2.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     type?: "submit" | "reset";
 };
@@ -1088,8 +1152,12 @@ export declare interface TabsProps {
     activeTab: string;
     /** Callback function that is called when the active tab changes. */
     onChange: (value: string) => void;
+    /** Sets "TabBox" or "Tabs" variants. "Tabs" is the old regular Tabs while "TabBox" changes visuals, allow stacking tabs and removes max-width of each Tab.Item. */
+    variant?: TabsVariantType;
 }
 
+declare type TabsVariantType = "TabBox" | "Tabs";
+
 /** @type {import('tailwindcss').Config} */
 export declare const tailwindConfig: {
     corePlugins: {
@@ -1562,8 +1630,6 @@ export declare const useExperimentalBreakpointDown: (bp: Breakpoint) => boolean
 
 export declare const useExperimentalBreakpointUp: (bp: Breakpoint) => boolean;
 
-declare type ValidRel = "alternate" | "author" | "bookmark" | "canonical" | "external" | "help" | "license" | "next" | "nofollow" | "noreferrer" | "noopener" | "prev" | "search" | "tag";
-
 declare const values: readonly ["primary", "secondary"];
 
 declare type VariantValue = (typeof values)[number];