@crisp-ui-kit/crisp 0.32.1 → 0.33.1

package/dist/types/components/badge/badge.d.ts

@@ -7,39 +7,39 @@ export type BadgeProps = React.ComponentPropsWithoutRef<"span"> & VariantProps<t
     dot?: boolean;
 };
 export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
-    tone: {
-        neutral: string;
-        brand: string;
-        success: string;
-        warning: string;
-        danger: string;
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
     };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
+    readonly size: {
+        readonly small: string;
+        readonly medium: string;
+        readonly large: string;
     };
-    variant: {
-        soft: string;
-        solid: string;
+    readonly variant: {
+        readonly soft: string;
+        readonly solid: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
-        tone: {
-            neutral: string;
-            brand: string;
-            success: string;
-            warning: string;
-            danger: string;
+        readonly tone: {
+            readonly neutral: string;
+            readonly brand: string;
+            readonly success: string;
+            readonly warning: string;
+            readonly danger: string;
         };
-        size: {
-            small: string;
-            medium: string;
-            large: string;
+        readonly size: {
+            readonly small: string;
+            readonly medium: string;
+            readonly large: string;
         };
-        variant: {
-            soft: string;
-            solid: string;
+        readonly variant: {
+            readonly soft: string;
+            readonly solid: string;
         };
     }>;
 }> & {

package/dist/types/components/badge/badge.recipe.d.ts

@@ -1,56 +1,180 @@
+declare const spec: {
+    readonly name: "badge";
+    readonly base: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: `var(--${string})`;
+        readonly fontFamily: `var(--${string})`;
+        readonly fontWeight: `var(--${string})`;
+        readonly letterSpacing: "-0.1px";
+        readonly whiteSpace: "nowrap";
+    };
+    readonly parts: [{
+        readonly slot: "dot";
+        readonly selector: "& .crisp-badge-dot";
+        readonly decls: {
+            readonly width: "6px";
+            readonly height: "6px";
+            readonly flexShrink: 0;
+            readonly borderRadius: `var(--${string})`;
+            readonly background: "currentColor";
+        };
+    }];
+    readonly variants: {
+        readonly tone: {
+            readonly neutral: {
+                readonly background: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly boxShadow: `inset 0 0 0 1px var(--${string})`;
+            };
+            readonly brand: {
+                background: string;
+                color: `var(--${string})`;
+                boxShadow: string;
+            };
+            readonly success: {
+                background: string;
+                color: `var(--${string})`;
+                boxShadow: string;
+            };
+            readonly warning: {
+                background: string;
+                color: `var(--${string})`;
+                boxShadow: string;
+            };
+            readonly danger: {
+                background: string;
+                color: `var(--${string})`;
+                boxShadow: string;
+            };
+        };
+        readonly size: {
+            readonly small: {
+                readonly height: "16px";
+                readonly paddingInline: `var(--${string})`;
+                readonly fontSize: `var(--${string})`;
+                readonly borderRadius: `var(--${string})`;
+            };
+            readonly medium: {
+                readonly height: "20px";
+                readonly paddingInline: `var(--${string})`;
+                readonly fontSize: `var(--${string})`;
+                readonly borderRadius: `var(--${string})`;
+            };
+            readonly large: {
+                readonly height: `var(--${string})`;
+                readonly paddingInline: "9px";
+                readonly fontSize: `var(--${string})`;
+                readonly borderRadius: `var(--${string})`;
+            };
+        };
+        readonly variant: {
+            soft: {};
+            solid: {};
+        };
+    };
+    readonly defaultVariants: {
+        readonly tone: "neutral";
+        readonly size: "medium";
+        readonly variant: "soft";
+    };
+    readonly compoundVariants: [{
+        readonly variant: "solid";
+        readonly tone: "brand";
+        readonly decls: {
+            readonly background: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly boxShadow: "none";
+        };
+    }, {
+        readonly variant: "solid";
+        readonly tone: "success";
+        readonly decls: {
+            readonly background: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly boxShadow: "none";
+        };
+    }, {
+        readonly variant: "solid";
+        readonly tone: "warning";
+        readonly decls: {
+            readonly background: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly boxShadow: "none";
+        };
+    }, {
+        readonly variant: "solid";
+        readonly tone: "danger";
+        readonly decls: {
+            readonly background: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly boxShadow: "none";
+        };
+    }, {
+        readonly variant: "solid";
+        readonly tone: "neutral";
+        readonly decls: {
+            readonly background: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly boxShadow: "none";
+        };
+    }];
+};
 declare const config: import("../..").RecipeConfig<{
-    tone: {
-        neutral: string;
-        brand: string;
-        success: string;
-        warning: string;
-        danger: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-    variant: {
-        soft: string;
-        solid: string;
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+    };
+    readonly size: {
+        readonly small: string;
+        readonly medium: string;
+        readonly large: string;
+    };
+    readonly variant: {
+        readonly soft: string;
+        readonly solid: string;
     };
 }>;
 export declare const badgeRecipe: import("../..").RecipeFn<{
-    tone: {
-        neutral: string;
-        brand: string;
-        success: string;
-        warning: string;
-        danger: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-    variant: {
-        soft: string;
-        solid: string;
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+    };
+    readonly size: {
+        readonly small: string;
+        readonly medium: string;
+        readonly large: string;
+    };
+    readonly variant: {
+        readonly soft: string;
+        readonly solid: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
-        tone: {
-            neutral: string;
-            brand: string;
-            success: string;
-            warning: string;
-            danger: string;
-        };
-        size: {
-            small: string;
-            medium: string;
-            large: string;
-        };
-        variant: {
-            soft: string;
-            solid: string;
+        readonly tone: {
+            readonly neutral: string;
+            readonly brand: string;
+            readonly success: string;
+            readonly warning: string;
+            readonly danger: string;
+        };
+        readonly size: {
+            readonly small: string;
+            readonly medium: string;
+            readonly large: string;
+        };
+        readonly variant: {
+            readonly soft: string;
+            readonly solid: string;
         };
     }>;
 };
+export { spec };
 export default config;

package/dist/types/components/button/button.d.ts

@@ -7,45 +7,45 @@ export type ButtonProps = React.ComponentPropsWithoutRef<"button"> & VariantProp
     loading?: boolean;
 };
 export declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
-    intent: {
-        primary: string;
-        neutral: string;
-        danger: string;
-        ghost: string;
+    readonly intent: {
+        readonly primary: string;
+        readonly neutral: string;
+        readonly danger: string;
+        readonly ghost: string;
     };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
+    readonly size: {
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
     };
-    shape: {
-        text: string;
-        icon: string;
+    readonly shape: {
+        readonly text: string;
+        readonly icon: string;
     };
-    touchTarget: {
-        true: string;
-        false: string;
+    readonly touchTarget: {
+        readonly true: string;
+        readonly false: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
-        intent: {
-            primary: string;
-            neutral: string;
-            danger: string;
-            ghost: string;
+        readonly intent: {
+            readonly primary: string;
+            readonly neutral: string;
+            readonly danger: string;
+            readonly ghost: string;
         };
-        size: {
-            sm: string;
-            md: string;
-            lg: string;
+        readonly size: {
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
         };
-        shape: {
-            text: string;
-            icon: string;
+        readonly shape: {
+            readonly text: string;
+            readonly icon: string;
         };
-        touchTarget: {
-            true: string;
-            false: string;
+        readonly touchTarget: {
+            readonly true: string;
+            readonly false: string;
         };
     }>;
 }> & {

package/dist/types/components/button/button.recipe.d.ts

@@ -1,65 +1,213 @@
+declare const spec: {
+    readonly name: "button";
+    readonly base: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: `var(--${string})`;
+        readonly fontFamily: `var(--${string})`;
+        readonly fontWeight: `var(--${string})`;
+        readonly letterSpacing: "-0.14px";
+        readonly lineHeight: "20px";
+        readonly whiteSpace: "nowrap";
+        readonly border: "none";
+        readonly cursor: "pointer";
+        readonly transition: "background-color .2s, box-shadow .2s, color .2s";
+    };
+    readonly parts: [{
+        readonly selector: "&:disabled";
+        readonly decls: {
+            readonly opacity: 0.5;
+            readonly cursor: "not-allowed";
+        };
+    }];
+    readonly variants: {
+        readonly intent: {
+            readonly primary: {
+                readonly decls: {
+                    readonly background: `var(--${string})`;
+                    readonly color: `var(--${string})`;
+                    readonly boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)";
+                };
+                readonly parts: [{
+                    readonly selector: "&:hover";
+                    readonly decls: {
+                        background: `var(--${string})`;
+                    };
+                }, {
+                    readonly selector: "&:active";
+                    readonly decls: {
+                        background: `var(--${string})`;
+                    };
+                }];
+            };
+            readonly neutral: {
+                readonly decls: {
+                    background: `var(--${string})`;
+                    color: `var(--${string})`;
+                    boxShadow: `inset 0 0 0 1px var(--${string}), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`;
+                };
+                readonly parts: [{
+                    readonly selector: "&:hover";
+                    readonly decls: {
+                        background: `var(--${string})`;
+                    };
+                }];
+            };
+            readonly danger: {
+                readonly decls: {
+                    readonly background: `var(--${string})`;
+                    readonly color: `var(--${string})`;
+                    readonly boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)";
+                };
+                readonly parts: [{
+                    readonly selector: "&:hover";
+                    readonly decls: {
+                        readonly filter: "brightness(0.96)";
+                    };
+                }, {
+                    readonly selector: "&:active";
+                    readonly decls: {
+                        readonly filter: "brightness(0.92)";
+                    };
+                }];
+            };
+            readonly ghost: {
+                readonly decls: {
+                    readonly background: "transparent";
+                    readonly color: `var(--${string})`;
+                    readonly boxShadow: "none";
+                };
+                readonly parts: [{
+                    readonly selector: "&:hover";
+                    readonly decls: {
+                        background: `var(--${string})`;
+                        color: `var(--${string})`;
+                    };
+                }];
+            };
+        };
+        readonly size: {
+            readonly sm: {
+                readonly height: "24px";
+                readonly paddingInline: `var(--${string})`;
+                readonly fontSize: `var(--${string})`;
+                readonly borderRadius: `var(--${string})`;
+            };
+            readonly md: {
+                readonly height: "28px";
+                readonly paddingInline: `var(--${string})`;
+                readonly fontSize: `var(--${string})`;
+                readonly borderRadius: `var(--${string})`;
+            };
+            readonly lg: {
+                readonly height: "40px";
+                readonly paddingInline: "14px";
+                readonly fontSize: `var(--${string})`;
+                readonly borderRadius: "10px";
+            };
+        };
+        readonly shape: {
+            readonly text: {};
+            readonly icon: {
+                readonly paddingInline: 0;
+                readonly aspectRatio: "1 / 1";
+            };
+        };
+        readonly touchTarget: {
+            readonly true: {
+                readonly decls: {
+                    readonly position: "relative";
+                };
+                readonly parts: [{
+                    readonly slot: "hitArea";
+                    readonly selector: "&::after";
+                    readonly decls: {
+                        readonly content: "\"\"";
+                        readonly position: "absolute";
+                        readonly top: "50%";
+                        readonly left: "50%";
+                        readonly transform: "translate(-50%, -50%)";
+                        readonly width: "100%";
+                        readonly height: "100%";
+                        readonly minWidth: "44px";
+                        readonly minHeight: "44px";
+                    };
+                }];
+            };
+            readonly false: {};
+        };
+    };
+    readonly defaultVariants: {
+        readonly intent: "primary";
+        readonly size: "md";
+        readonly shape: "text";
+        readonly touchTarget: false;
+    };
+};
 declare const config: import("../..").RecipeConfig<{
-    intent: {
-        primary: string;
-        neutral: string;
-        danger: string;
-        ghost: string;
+    readonly intent: {
+        readonly primary: string;
+        readonly neutral: string;
+        readonly danger: string;
+        readonly ghost: string;
     };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
+    readonly size: {
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
     };
-    shape: {
-        text: string;
-        icon: string;
+    readonly shape: {
+        readonly text: string;
+        readonly icon: string;
     };
-    touchTarget: {
-        true: string;
-        false: string;
+    readonly touchTarget: {
+        readonly true: string;
+        readonly false: string;
     };
 }>;
 export declare const buttonRecipe: import("../..").RecipeFn<{
-    intent: {
-        primary: string;
-        neutral: string;
-        danger: string;
-        ghost: string;
+    readonly intent: {
+        readonly primary: string;
+        readonly neutral: string;
+        readonly danger: string;
+        readonly ghost: string;
     };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
+    readonly size: {
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
     };
-    shape: {
-        text: string;
-        icon: string;
+    readonly shape: {
+        readonly text: string;
+        readonly icon: string;
     };
-    touchTarget: {
-        true: string;
-        false: string;
+    readonly touchTarget: {
+        readonly true: string;
+        readonly false: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
-        intent: {
-            primary: string;
-            neutral: string;
-            danger: string;
-            ghost: string;
+        readonly intent: {
+            readonly primary: string;
+            readonly neutral: string;
+            readonly danger: string;
+            readonly ghost: string;
         };
-        size: {
-            sm: string;
-            md: string;
-            lg: string;
+        readonly size: {
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
         };
-        shape: {
-            text: string;
-            icon: string;
+        readonly shape: {
+            readonly text: string;
+            readonly icon: string;
         };
-        touchTarget: {
-            true: string;
-            false: string;
+        readonly touchTarget: {
+            readonly true: string;
+            readonly false: string;
         };
     }>;
 };
+export { spec };
 export default config;

package/dist/types/components/divider/divider.recipe.d.ts

@@ -1,3 +1,27 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const dividerRecipe: import("../..").RecipeFn<{}>;
+declare const spec: {
+    readonly name: "divider";
+    readonly base: {
+        readonly flexShrink: 0;
+        readonly border: "none";
+        readonly margin: 0;
+        readonly background: `var(--${string})`;
+    };
+    readonly parts: [{
+        readonly selector: "&[data-orientation=\"horizontal\"]";
+        readonly decls: {
+            readonly width: "100%";
+            readonly height: "1px";
+        };
+    }, {
+        readonly selector: "&[data-orientation=\"vertical\"]";
+        readonly decls: {
+            readonly width: "1px";
+            readonly alignSelf: "stretch";
+            readonly minHeight: "1em";
+        };
+    }];
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const dividerRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
 export default config;