bonprix-design-system 0.51.0 → 0.52.0

package/dist/assets/icons/minus-icon.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
-  <path d="M3 11.25h18v1.5H3v-1.5Z"/>
+  <path d="M21 11.55a.3.3 0 0 0-.3-.3H4.2a1.2 1.2 0 0 0-1.2 1.2.3.3 0 0 0 .3.3h16.5a1.2 1.2 0 0 0 1.2-1.2Z"/>
 </svg>

package/dist/index.d.ts

@@ -118,8 +118,6 @@ export declare interface AvailabilityProps {
     delivery: "available" | "available-soon" | "sold-out";
     /** Describes the current availability of the item. */
     children: string;
-    /** If set to `true` an additional message will be shown, which informs that the item is almost sold out. */
-    almostSoldOut?: boolean;
 }
 
 export declare const BadgeIconButton: FC<BadgeIconButtonProps>;
@@ -281,23 +279,23 @@ declare interface BaseProps_7 {
 declare interface BaseProps_8 {
     /** The visible label. **/
     label: string;
-    /** If `true`, the label will use the small variant. */
-    smallLabel?: boolean;
     /** If `true`, the switch will be disabled. */
     disabled?: boolean;
     /** If `true`, inverts the colors of the component. */
     inverted?: boolean;
+    /** Additional information about what this particular switch does. */
+    description?: string;
 }
 
 declare interface BaseProps_9 {
-    /** This property should contain all of the subcomponents of the Tabs component (Tabs.Item, Tabs.Content, Tabs.List). */
+    /** This property should contain all of the subcomponents of the TabGroup component (TabGroup.Item, TabGroup.Content, TabGroup.List). */
     children: ReactNode;
     /** The currently active tab. Should be used in conjunction with the `onChange` prop. */
     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?: TabsVariant;
+    /** Sets "the variant.  */
+    variant?: TabGroupVariant;
 }
 
 declare interface BasicProps {
@@ -355,12 +353,6 @@ export declare interface BottomSheetProps {
     ref?: default_2.Ref<HTMLDivElement>;
 }
 
-declare interface BoxTabsProps extends BaseProps_9 {
-    variant?: "box";
-    /** If true, the tab items will occupy the available width. */
-    fullWidth?: boolean;
-}
-
 export declare const Breadcrumb: FC<BreadcrumbProps>;
 
 export declare interface BreadcrumbProps {
@@ -640,11 +632,6 @@ declare interface ControlledSelectProps extends BaseProps_7 {
     onValueChange: (value: string) => void;
 }
 
-declare interface DefaultTabsProps extends BaseProps_9 {
-    variant?: "default";
-    fullWidth?: never;
-}
-
 export declare const Dialog: FC<DialogProps> & Subcomponents_3;
 
 export declare interface DialogProps {
@@ -707,6 +694,8 @@ declare interface HTMLInputAttributes {
     autoCorrect?: HTMLInputAutoCorrectAttribute;
     /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck" target="_blank">HTML spellcheck attribute.</a>  */
     spellCheck?: HTMLInputSpellCheckAttribute;
+    /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/minlength" target="_blank">HTML minLength attribute.</a>  */
+    minLength?: number;
     /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/maxlength" target="_blank">HTML maxlength attribute.</a>  */
     maxLength?: number;
     /** Callback, that is triggered on key down. */
@@ -1160,9 +1149,9 @@ declare interface Subcomponents_8 {
 }
 
 declare interface Subcomponents_9 {
-    Item: typeof TabItem;
-    Content: typeof TabContent;
-    List: typeof TabsList;
+    Item: typeof TabGroupItem;
+    Content: typeof TabGroupContent;
+    List: typeof TabGroupList;
 }
 
 declare type SubmitResetVariantProps = AsButton_2 & {
@@ -1174,22 +1163,33 @@ export declare const Switch: FC<SwitchProps>;
 
 export declare type SwitchProps = ControlledInputProps_3 | UncontrolledInputProps_3;
 
-declare const TabContent: FC<Props_12>;
+declare interface TabBoxProps extends BaseProps_9 {
+    variant?: "tab-box";
+    /** If true, the tab items will occupy the available width. */
+    fullWidth?: boolean;
+}
+
+export declare const TabGroup: FC<TabGroupProps> & Subcomponents_9;
 
-declare const TabItem: FC<Props_11>;
+declare const TabGroupContent: FC<Props_12>;
 
-export declare const Tabs: FC<TabsProps> & Subcomponents_9;
+declare const TabGroupItem: FC<Props_11>;
 
-declare const TabsList: FC<TabsListProps>;
+declare const TabGroupList: FC<TabGroupListProps>;
 
-declare interface TabsListProps {
-    /** Here, the Tabs.Item subcomponents should be placed. */
+declare interface TabGroupListProps {
+    /** Here, the TabGroup.Item subcomponents should be placed. */
     children: ReactNode;
 }
 
-export declare type TabsProps = BoxTabsProps | DefaultTabsProps;
+export declare type TabGroupProps = TabBoxProps | TabProps;
 
-declare type TabsVariant = "default" | "box";
+declare type TabGroupVariant = "tab" | "tab-box";
+
+declare interface TabProps extends BaseProps_9 {
+    variant?: "tab";
+    fullWidth?: never;
+}
 
 /** @type {import('tailwindcss').Config} */
 export declare const tailwindConfig: {
@@ -1202,6 +1202,53 @@ export declare const tailwindConfig: {
     darkMode: string[];
     content: string[];
     theme: {
+        spacing: {
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+            11: string;
+            12: string;
+            14: string;
+            16: string;
+            20: string;
+            24: string;
+            28: string;
+            32: string;
+            35: string;
+            36: string;
+            40: string;
+            44: string;
+            48: string;
+            50: string;
+            52: string;
+            56: string;
+            60: string;
+            64: string;
+            72: string;
+            75: string;
+            80: string;
+            96: string;
+            100: string;
+            150: string;
+            0.25: string;
+            0.5: string;
+            0.75: string;
+            1.25: string;
+            1.5: string;
+            2.5: string;
+            3.5: string;
+            6.5: string;
+            11.5: string;
+            17.5: string;
+        };
         extend: {
             fontFamily: {
                 bonprixRegular: string[];
@@ -1248,10 +1295,6 @@ export declare const tailwindConfig: {
                         width: string;
                     };
                 };
-                dummyAnimation: {
-                    from: {};
-                    to: {};
-                };
             };
             animation: {
                 slideLeft: string;
@@ -1259,128 +1302,10 @@ export declare const tailwindConfig: {
                 fadeIn: string;
                 fadeOut: string;
                 shrinkHorizontally: string;
-                dummyAnimation: string;
-            };
-            gap: {
-                0.25: string;
-                0.75: string;
-                1.25: string;
-                6.5: string;
-                11.5: string;
-                17.5: string;
-                35: string;
-                50: string;
-                75: string;
-                100: string;
-                150: string;
-            };
-            height: {
-                0.25: string;
-                0.75: string;
-                1.25: string;
-                6.5: string;
-                11.5: string;
-                17.5: string;
-                35: string;
-                50: string;
-                75: string;
-                100: string;
-                150: string;
-            };
-            margin: {
-                0.25: string;
-                0.75: string;
-                1.25: string;
-                6.5: string;
-                11.5: string;
-                17.5: string;
-                35: string;
-                50: string;
-                75: string;
-                100: string;
-                150: string;
-            };
-            maxHeight: {
-                0.25: string;
-                0.75: string;
-                1.25: string;
-                6.5: string;
-                11.5: string;
-                17.5: string;
-                35: string;
-                50: string;
-                75: string;
-                100: string;
-                150: string;
-            };
-            maxWidth: {
-                0.25: string;
-                0.75: string;
-                1.25: string;
-                6.5: string;
-                11.5: string;
-                17.5: string;
-                35: string;
-                50: string;
-                75: string;
-                100: string;
-                150: string;
-            };
-            minHeight: {
-                0.25: string;
-                0.75: string;
-                1.25: string;
-                6.5: string;
-                11.5: string;
-                17.5: string;
-                35: string;
-                50: string;
-                75: string;
-                100: string;
-                150: string;
-            };
-            minWidth: {
-                0.25: string;
-                0.75: string;
-                1.25: string;
-                6.5: string;
-                11.5: string;
-                17.5: string;
-                35: string;
-                50: string;
-                75: string;
-                100: string;
-                150: string;
             };
             opacity: {
                 32: string;
             };
-            padding: {
-                0.25: string;
-                0.75: string;
-                1.25: string;
-                6.5: string;
-                11.5: string;
-                17.5: string;
-                35: string;
-                50: string;
-                75: string;
-                100: string;
-                150: string;
-            };
-            width: {
-                0.25: string;
-                0.75: string;
-                1.25: string;
-                6.5: string;
-                11.5: string;
-                17.5: string;
-                35: string;
-                50: string;
-                75: string;
-                100: string;
-                150: string;
-            };
             inset: {
                 100: string;
             };
@@ -1401,41 +1326,53 @@ export declare const tailwindConfig: {
             transparent: string;
             current: string;
             inherit: string;
-            "clr-primary": string;
-            "clr-primary-inverse": string;
-            "clr-on-primary-high": string;
-            "clr-on-primary-high-inverse": string;
-            "clr-on-primary-mid": string;
-            "clr-on-primary-mid-inverse": string;
-            "clr-bg-main": string;
-            "clr-bg-main-inverse": string;
-            "clr-bg-main-light": string;
-            "clr-bg-main-light-inverse": string;
-            "clr-on-bg-high": string;
-            "clr-on-bg-high-inverse": string;
-            "clr-on-bg-mid": string;
-            "clr-on-bg-mid-inverse": string;
-            "clr-on-bg-low": string;
-            "clr-on-bg-low-inverse": string;
-            "clr-fg-error": string;
-            "clr-bg-error": string;
-            "clr-fg-alert": string;
-            "clr-bg-alert": string;
-            "clr-fg-success": string;
-            "clr-bg-success": string;
-            "clr-fg-info": string;
-            "clr-bg-info": string;
-            "clr-sale": string;
-            "clr-on-sale": string;
-            "clr-disabled": string;
-            "clr-disabled-inverse": string;
-            "clr-bg-disabled": string;
-            "clr-bg-disabled-inverse": string;
-            "clr-sustainable": string;
-            "clr-voucher": string;
-            "clr-black": string;
-            "clr-white": string;
-            "clr-bg-modal": string;
+            clr: {
+                black: string;
+                white: string;
+                "bg-modal": string;
+                "primary-transparent": string;
+                "on-bg-high-transparent": string;
+                primary: string;
+                "primary-inverse": string;
+                "on-primary": {
+                    high: string;
+                    "high-inverse": string;
+                    mid: string;
+                    "mid-inverse": string;
+                };
+                bg: {
+                    main: string;
+                    "main-inverse": string;
+                    "main-light": string;
+                    "main-light-inverse": string;
+                    error: string;
+                    alert: string;
+                    success: string;
+                    info: string;
+                    disabled: string;
+                    "disabled-inverse": string;
+                };
+                "on-bg": {
+                    high: string;
+                    "high-inverse": string;
+                    mid: string;
+                    "mid-inverse": string;
+                    low: string;
+                    "low-inverse": string;
+                };
+                fg: {
+                    error: string;
+                    alert: string;
+                    success: string;
+                    info: string;
+                };
+                voucher: string;
+                sale: string;
+                "on-sale": string;
+                disabled: string;
+                "disabled-inverse": string;
+                sustainable: string;
+            };
         };
     };
     safelist: string[];