@crisp-ui-kit/crisp 0.33.4 → 0.34.0

package/dist/tokens.css

@@ -121,87 +121,3 @@
   --crisp-weight-bold: 700;
   --crisp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
 }
-
-/* -----------------------------------------------------------------
- * Deprecated unprefixed aliases (issue #276) — SCHEDULED FOR REMOVAL in
- * the next major version. Prefer the --crisp-* custom property
- * above; these only forward to it so an existing override keeps working.
- * ----------------------------------------------------------------- */
-:root {
-  --bg-brand-solid: var(--crisp-bg-brand-solid);
-  --bg-brand-solid-pressed: var(--crisp-bg-brand-solid-pressed);
-  --fg-on-brand: var(--crisp-fg-on-brand);
-  --fg-on-tone: var(--crisp-fg-on-tone);
-  --bg-surface: var(--crisp-bg-surface);
-  --bg-raised: var(--crisp-bg-raised);
-  --border-default: var(--crisp-border-default);
-  --border-subtle: var(--crisp-border-subtle);
-  --ring-neutral: var(--crisp-ring-neutral);
-  --bg-tile-active: var(--crisp-bg-tile-active);
-  --shadow-tile-active: var(--crisp-shadow-tile-active);
-  --bg-overlay-frost: var(--crisp-bg-overlay-frost);
-  --shadow-overlay1: var(--crisp-shadow-overlay1);
-  --shadow-overlay2: var(--crisp-shadow-overlay2);
-  --shadow-overlay3: var(--crisp-shadow-overlay3);
-  --bg-popover: var(--crisp-bg-popover);
-  --ring-popover: var(--crisp-ring-popover);
-  --shadow-popover1: var(--crisp-shadow-popover1);
-  --shadow-popover2: var(--crisp-shadow-popover2);
-  --shadow-popover3: var(--crisp-shadow-popover3);
-  --fg-primary: var(--crisp-fg-primary);
-  --fg-muted: var(--crisp-fg-muted);
-  --bg-danger: var(--crisp-bg-danger);
-  --bg-danger-solid: var(--crisp-bg-danger-solid);
-  --stroke-field-focus: var(--crisp-stroke-field-focus);
-  --fg-disabled: var(--crisp-fg-disabled);
-  --bg-neutral-weak: var(--crisp-bg-neutral-weak);
-  --bg-neutral-inverted: var(--crisp-bg-neutral-inverted);
-  --fg-on-neutral-inverted: var(--crisp-fg-on-neutral-inverted);
-  --fg-neutral-subtle: var(--crisp-fg-neutral-subtle);
-  --fg-neutral-muted: var(--crisp-fg-neutral-muted);
-  --stroke-focus-ring: var(--crisp-stroke-focus-ring);
-  --bg-success: var(--crisp-bg-success);
-  --bg-warning: var(--crisp-bg-warning);
-  --bg-orange: var(--crisp-bg-orange);
-  --bg-cyan: var(--crisp-bg-cyan);
-  --bg-purple: var(--crisp-bg-purple);
-  --bg-sidebar: var(--crisp-bg-sidebar);
-  --bg-subtle: var(--crisp-bg-subtle);
-  --space-1: var(--crisp-space-1);
-  --space-2: var(--crisp-space-2);
-  --space-3: var(--crisp-space-3);
-  --space-4: var(--crisp-space-4);
-  --space-5: var(--crisp-space-5);
-  --space-6: var(--crisp-space-6);
-  --space-8: var(--crisp-space-8);
-  --space-px: var(--crisp-space-px);
-  --space-0-5: var(--crisp-space-0-5);
-  --space-1-5: var(--crisp-space-1-5);
-  --space-2-5: var(--crisp-space-2-5);
-  --radius-chip: var(--crisp-radius-chip);
-  --radius-sm: var(--crisp-radius-sm);
-  --radius-md: var(--crisp-radius-md);
-  --radius-lg: var(--crisp-radius-lg);
-  --radius-xl: var(--crisp-radius-xl);
-  --radius-2xl: var(--crisp-radius-2xl);
-  --radius-full: var(--crisp-radius-full);
-  --size-icon: var(--crisp-size-icon);
-  --size-chip: var(--crisp-size-chip);
-  --size-row: var(--crisp-size-row);
-  --size-menuRow: var(--crisp-size-menuRow);
-  --size-tableRow: var(--crisp-size-tableRow);
-  --size-tableHeader: var(--crisp-size-tableHeader);
-  --size-header: var(--crisp-size-header);
-  --size-calendarCell: var(--crisp-size-calendarCell);
-  --size-calendarPill: var(--crisp-size-calendarPill);
-  --text-xs: var(--crisp-text-xs);
-  --text-sm: var(--crisp-text-sm);
-  --text-md: var(--crisp-text-md);
-  --text-lg: var(--crisp-text-lg);
-  --text-xl: var(--crisp-text-xl);
-  --weight-regular: var(--crisp-weight-regular);
-  --weight-medium: var(--crisp-weight-medium);
-  --weight-semibold: var(--crisp-weight-semibold);
-  --weight-bold: var(--crisp-weight-bold);
-  --font-sans: var(--crisp-font-sans);
-}

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

@@ -1,3 +1,26 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const avatargroupRecipe: import("../..").RecipeFn<{}>;
+declare const spec: {
+    readonly name: "avatargroup";
+    readonly base: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+    };
+    readonly parts: [{
+        readonly slot: "member";
+        readonly selector: "& > *";
+        readonly decls: {
+            readonly marginInlineStart: `-var(--${string})`;
+            readonly boxShadow: `0 0 0 2px var(--${string})`;
+            readonly position: "relative";
+        };
+    }, {
+        readonly slot: "member";
+        readonly selector: "& > *:first-child";
+        readonly decls: {
+            readonly marginInlineStart: 0;
+        };
+    }];
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const avatargroupRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
 export default config;

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

@@ -1,5 +1,53 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const checkboxRecipe: import("../..").RecipeFn<{}> & {
-    config: import("../..").RecipeConfig<{}>;
+declare const spec: {
+    readonly name: "checkbox";
+    readonly base: {
+        readonly appearance: "none";
+        readonly WebkitAppearance: "none";
+        readonly boxSizing: "border-box";
+        readonly flexShrink: 0;
+        readonly margin: 0;
+        readonly width: "16px";
+        readonly height: "16px";
+        readonly border: "none";
+        readonly borderRadius: `var(--${string})`;
+        readonly background: `var(--${string})`;
+        readonly boxShadow: `inset 0 0 0 1px color-mix(in srgb, var(--${string}) 9%, transparent)`;
+        readonly cursor: "pointer";
+        readonly transition: "background-color .12s, box-shadow .12s";
+    };
+    readonly parts: [{
+        readonly selector: "&:hover";
+        readonly decls: {
+            readonly boxShadow: `inset 0 0 0 1px color-mix(in srgb, var(--${string}) 30%, transparent)`;
+        };
+    }, {
+        readonly selector: "&:checked, &:indeterminate";
+        readonly decls: {
+            readonly background: `var(--${string}) center / 10px no-repeat`;
+            readonly boxShadow: "none";
+        };
+    }, {
+        readonly selector: "&:checked";
+        readonly decls: {
+            backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E\")";
+        };
+    }, {
+        readonly selector: "&:indeterminate";
+        readonly decls: {
+            readonly backgroundImage: `linear-gradient(var(--${string}), var(--${string}))`;
+            readonly backgroundSize: "8px 2px";
+        };
+    }, {
+        readonly selector: "&:focus-visible";
+        readonly decls: {
+            readonly outline: `2px solid var(--${string})`;
+            readonly outlineOffset: "1px";
+        };
+    }];
 };
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const checkboxRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>> & {
+    config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+};
+export { spec };
 export default config;

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

@@ -1,5 +1,26 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const kbdRecipe: import("../..").RecipeFn<{}> & {
-    config: import("../..").RecipeConfig<{}>;
+declare const spec: {
+    readonly name: "kbd";
+    readonly base: {
+        readonly boxSizing: "border-box";
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: `var(--${string})`;
+        readonly minWidth: "20px";
+        readonly height: "20px";
+        readonly paddingInline: `var(--${string})`;
+        readonly borderRadius: `var(--${string})`;
+        readonly fontFamily: `var(--${string})`;
+        readonly fontSize: `var(--${string})`;
+        readonly fontWeight: `var(--${string})`;
+        readonly color: `color-mix(in srgb, var(--${string}) 50%, transparent)`;
+        readonly background: "transparent";
+        readonly boxShadow: `inset 0 0 0 1px color-mix(in srgb, var(--${string}) 6%, transparent)`;
+    };
 };
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const kbdRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>> & {
+    config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+};
+export { spec };
 export default config;

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

@@ -1,3 +1,20 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const skeletonRecipe: import("../..").RecipeFn<{}>;
+declare const spec: {
+    readonly name: "skeleton";
+    readonly globalCss: "@keyframes crisp-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }";
+    readonly base: {
+        readonly display: "block";
+        readonly background: `color-mix(in srgb, var(--${string}) 8%, transparent)`;
+        readonly borderRadius: `var(--${string})`;
+        readonly animation: "crisp-skeleton 1.4s ease-in-out infinite";
+    };
+    readonly parts: [{
+        readonly selector: "&[data-circle]";
+        readonly decls: {
+            borderRadius: `var(--${string})`;
+        };
+    }];
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const skeletonRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
 export default config;

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

@@ -1,3 +1,31 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const tooltipRecipe: import("../..").RecipeFn<{}>;
+declare const spec: {
+    readonly name: "tooltip";
+    readonly base: {
+        readonly position: "fixed";
+        readonly zIndex: 70;
+        readonly boxSizing: "border-box";
+        readonly pointerEvents: "none";
+        readonly maxWidth: "260px";
+        readonly padding: `var(--${string}) var(--${string})`;
+        readonly borderRadius: `var(--${string})`;
+        readonly background: "#20242c";
+        readonly color: "#fff";
+        readonly fontFamily: `var(--${string})`;
+        readonly fontSize: `var(--${string})`;
+        readonly fontWeight: `var(--${string})`;
+        readonly lineHeight: "1.45";
+        readonly boxShadow: "0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04)";
+        readonly opacity: 1;
+        readonly transition: "opacity 0.12s ease";
+    };
+    readonly parts: [{
+        readonly selector: "@starting-style";
+        readonly decls: {
+            readonly opacity: 0;
+        };
+    }];
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const tooltipRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
 export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.33.4",
+  "version": "0.34.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -413,6 +413,7 @@
     "build:css": "bun run build.mjs",
     "build:types": "tsc -p tsconfig.build.json",
     "build": "bun run build:css && bun run build:tokens && bun run build:esm && bun run build:cjs && bun run build:types",
+    "audit:docs": "bun scripts/audit-docs.mjs",
     "check:css": "bun scripts/check-css.mjs",
     "check:dist": "bun scripts/check-dist.mjs",
     "prepublishOnly": "bun run build && bun run check:dist && bun run check:css",