pixelize-design-library 2.4.2 → 3.0.0

package/dist/Theme/chakra/common.web.d.ts

@@ -1,7 +1,3 @@
-/**
- * Web (Chakra) assembly of the pure primitives. `config.cssVarPrefix` is a Chakra
- * concern, which is why this assembly lives here and not in `tokens/`.
- */
 declare const common: {
     lineHeights: {
         normal: string;
@@ -136,6 +132,10 @@ declare const common: {
         inner: string;
         none: string;
         darkLg: string;
+        card: string;
+        float: string;
+        dialog: string;
+        sheet: string;
     };
     radii: {
         none: string;
@@ -159,6 +159,7 @@ declare const common: {
         overlay: number;
         modal: number;
         popover: number;
+        popoverNested: number;
         skipLink: number;
         toast: number;
         tooltip: number;

package/dist/Theme/chakra/common.web.js

@@ -1,10 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const primitives_1 = require("../tokens/primitives");
-/**
- * Web (Chakra) assembly of the pure primitives. `config.cssVarPrefix` is a Chakra
- * concern, which is why this assembly lives here and not in `tokens/`.
- */
 const common = {
     lineHeights: primitives_1.lineHeights,
     letterSpacings: primitives_1.letterSpacings,
@@ -15,9 +11,7 @@ const common = {
     radii: primitives_1.radii,
     zIndices: primitives_1.zIndices,
     config: {
-        // Chakra's default, and it must stay that way. A custom prefix silently breaks every
-        // `var(--chakra-colors-*)` an app writes in plain CSS: the variable simply does not
-        // exist, so the fallback (usually #fff) wins and the surface renders white in dark mode.
+        // NOTE: must stay "chakra" — a custom prefix breaks every var(--chakra-colors-*) an app writes in plain CSS.
         cssVarPrefix: "chakra",
     },
 };

package/dist/Theme/chakra/componentStyles.d.ts

@@ -10,14 +10,27 @@ declare const $alertBg: {
 export declare const componentStyles: {
     Alert: {
         baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("title" | "container" | "icon" | "spinner" | "description")[];
+            keys: ("container" | "icon" | "spinner" | "title" | "description")[];
         }> | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("title" | "container" | "icon" | "spinner" | "description")[];
+                keys: ("container" | "icon" | "spinner" | "title" | "description")[];
             }>;
         } | undefined;
         variants?: {
+            subtle: ({ theme, colorScheme }: StyleFunctionProps) => {
+                container: {
+                    borderRadius: string;
+                    color?: undefined;
+                };
+            } | {
+                container: {
+                    [$alertBg.variable]: string;
+                    [$alertFg.variable]: string;
+                    color: string;
+                    borderRadius: string;
+                };
+            };
             solid: ({ theme, colorScheme }: StyleFunctionProps) => {
                 container: {
                     [$alertBg.variable]: string;
@@ -27,10 +40,10 @@ export declare const componentStyles: {
         } | undefined;
         defaultProps?: {
             size?: string | number | undefined;
-            variant?: "solid" | undefined;
+            variant?: "solid" | "subtle" | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("title" | "container" | "icon" | "spinner" | "description")[];
+        parts: ("container" | "icon" | "spinner" | "title" | "description")[];
     };
     Checkbox: ComponentStyleConfig;
     Radio: import("@chakra-ui/react").ComponentSingleStyleConfig;
@@ -41,23 +54,113 @@ export declare const componentStyles: {
     Textarea: ComponentStyleConfig;
     NumberInput: ComponentStyleConfig;
     Badge: import("@chakra-ui/react").ComponentSingleStyleConfig;
+    Card: {
+        baseStyle?: (({ theme }: StyleFunctionProps) => {
+            container: {
+                [x: string]: string | {
+                    paddingTop: number;
+                };
+                color: string;
+                "& > .chakra-card__header + .chakra-card__body, & > .chakra-card__body + .chakra-card__footer": {
+                    paddingTop: number;
+                };
+            };
+            header: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+            };
+        }) | undefined;
+        sizes?: {
+            sm: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+            md: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+            lg: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+        } | undefined;
+        variants?: {
+            outline: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+            elevated: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+        } | undefined;
+        defaultProps?: {
+            size?: "sm" | "md" | "lg" | undefined;
+            variant?: "elevated" | "outline" | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("header" | "container" | "body" | "footer")[];
+    };
     FormError: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Drawer: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             dialog: {
-                [x: string]: string;
                 bg: string;
                 color: string;
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            overlay: {
+                bg: string;
+                backdropFilter: string;
+            };
+            header: {
+                px: number;
+                py: number;
+                pe: number;
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                color: string;
+                borderBottomWidth: string;
+                borderBottomStyle: string;
+                borderBottomColor: string;
+            };
+            closeButton: {
+                top: number;
+                insetEnd: number;
+            };
+            body: {
+                px: number;
+                py: number;
+            };
+            footer: {
+                px: number;
+                py: number;
+                display: string;
+                justifyContent: string;
+                gap: number;
+                borderTopWidth: string;
+                borderTopStyle: string;
+                borderTopColor: string;
             };
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -65,19 +168,32 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+        parts: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
     };
     Menu: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             list: {
-                [x: string]: string;
+                borderRadius: "xl";
+                boxShadow: "md";
                 bg: string;
                 color: string;
                 borderWidth: string;
                 borderStyle: string;
                 borderColor: string;
             };
+            divider: {
+                opacity?: number | undefined;
+                borderColor: string;
+            };
             item: {
+                color: string;
+                minH: string;
+                px: string;
+                py: string;
+                mx: string;
+                width: string;
+                fontSize: string;
+                borderRadius: "md";
                 bg: string;
                 _focus: {
                     [x: string]: string;
@@ -95,16 +211,23 @@ export declare const componentStyles: {
                     [x: string]: string;
                     bg: string;
                 };
+                "&[aria-checked=true]": {
+                    color: string;
+                    fontWeight: number;
+                    "& .chakra-menu__icon-wrapper": {
+                        color: string;
+                    };
+                };
             };
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+                keys: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+                keys: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -112,24 +235,62 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+        parts: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
     };
     Modal: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             dialog: {
-                [x: string]: string;
                 bg: string;
+                borderRadius: string;
                 color: string;
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            overlay: {
+                bg: string;
+                backdropFilter: string;
+            };
+            header: {
+                px: number;
+                py: number;
+                pe: number;
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                color: string;
+                borderBottomWidth: string;
+                borderBottomStyle: string;
+                borderBottomColor: string;
+            };
+            closeButton: {
+                top: number;
+                insetEnd: number;
+            };
+            body: {
+                px: number;
+                py: number;
+            };
+            footer: {
+                px: number;
+                py: number;
+                display: string;
+                justifyContent: string;
+                gap: number;
+                borderTopWidth: string;
+                borderTopStyle: string;
+                borderTopColor: string;
             };
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -137,12 +298,13 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+        parts: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
     };
     Popover: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             content: {
-                [x: string]: string;
+                borderRadius: "xl";
+                boxShadow: "md";
                 bg: string;
                 color: string;
                 borderWidth: string;
@@ -152,12 +314,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
+                keys: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
+                keys: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -165,7 +327,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
+        parts: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
     };
     Slider: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -176,94 +338,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
-            }>;
-        } | undefined;
-        variants?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
-            }>;
-        } | undefined;
-        defaultProps?: {
-            size?: string | number | undefined;
-            variant?: string | number | undefined;
-            colorScheme?: string | undefined;
-        } | undefined;
-        parts: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
-    };
-    Switch: {
-        baseStyle?: (({ theme }: StyleFunctionProps) => {
-            thumb: {
-                [x: string]: string;
-                bg: string;
-            };
-        }) | undefined;
-        sizes?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("label" | "track" | "container" | "thumb")[];
-            }>;
-        } | undefined;
-        variants?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("label" | "track" | "container" | "thumb")[];
-            }>;
-        } | undefined;
-        defaultProps?: {
-            size?: string | number | undefined;
-            variant?: string | number | undefined;
-            colorScheme?: string | undefined;
-        } | undefined;
-        parts: ("label" | "track" | "container" | "thumb")[];
-    };
-    Tabs: {
-        baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
-        }> | undefined;
-        sizes?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
-            }>;
-        } | undefined;
-        variants?: {
-            enclosed: ({ theme }: StyleFunctionProps) => {
-                tab: {
-                    _selected: {
-                        [x: string]: string;
-                    };
-                };
-            };
-            "enclosed-colored": ({ theme }: StyleFunctionProps) => {
-                tab: {
-                    _selected: {
-                        [x: string]: string;
-                    };
-                };
-            };
-        } | undefined;
-        defaultProps?: {
-            size?: string | number | undefined;
-            variant?: "enclosed" | "enclosed-colored" | undefined;
-            colorScheme?: string | undefined;
-        } | undefined;
-        parts: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
-    };
-    Avatar: {
-        baseStyle?: (({ theme }: StyleFunctionProps) => {
-            badge: {
-                [x: string]: string;
-            };
-            container: {
-                [x: string]: string;
-            };
-        }) | undefined;
-        sizes?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
+                keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
+                keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -271,7 +351,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("group" | "label" | "container" | "badge" | "excessLabel")[];
+        parts: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
     };
     Skeleton: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Tooltip: import("@chakra-ui/react").ComponentSingleStyleConfig;