@crisp-ui-kit/crisp 0.31.5 → 0.32.0

package/dist/cjs/components/tabs/tabs.recipe.js

@@ -15,18 +15,18 @@ const config = (0, core_1.defineRecipe)({
     display: flex; flex-direction: column; min-height: 0; font-family: ${tokens_1.contract.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .tabs-list { position: relative; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; flex-shrink: 0; }
-    & .tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${tokens_1.contract.space["1"]}; }
-    & .tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
-    & .tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
-    & .tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
-    & .tabs-tab[data-selected] { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSubtle}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; }
-    & .tabs-tab:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
-    & .tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
-    & .tabs-tab[data-selected] .tabs-tab-badge { color: ${tokens_1.contract.fgPrimary}; }
-    & .tabs-indicator { position: absolute; bottom: calc(-1 * ${tokens_1.contract.space["2"]}); left: 0; height: 1px; background: ${tokens_1.contract.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
-    & .tabs-panel { flex: 1; min-height: 0; }
-    & .tabs-panel:focus-visible { outline: none; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; flex-shrink: 0; }
+    & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${tokens_1.contract.space["1"]}; }
+    & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
+    & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-tabs-tab[data-selected] { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSubtle}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; }
+    & .crisp-tabs-tab:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
+    & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * ${tokens_1.contract.space["2"]}); left: 0; height: 1px; background: ${tokens_1.contract.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-panel { flex: 1; min-height: 0; }
+    & .crisp-tabs-panel:focus-visible { outline: none; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/cjs/components/textarea/textarea.js

@@ -47,10 +47,10 @@ exports.Textarea = React.forwardRef(({ showCount, maxLength, className, wrapperC
     const [count, setCount] = React.useState(initial);
     const len = value !== undefined ? String(value).length : count;
     const counted = showCount && maxLength != null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, textarea_recipe_1.textareaRecipe)({ className: wrapperClassName }), "data-counted": counted ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("span", { className: "textarea-wrap", children: (0, jsx_runtime_1.jsx)("textarea", { ref: ref, className: `textarea-field${className ? ` ${className}` : ""}`, maxLength: maxLength, value: value, defaultValue: defaultValue, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, textarea_recipe_1.textareaRecipe)({ className: wrapperClassName }), "data-counted": counted ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-textarea-wrap", children: (0, jsx_runtime_1.jsx)("textarea", { ref: ref, className: `crisp-textarea-field${className ? ` ${className}` : ""}`, maxLength: maxLength, value: value, defaultValue: defaultValue, onChange: (e) => {
                         if (value === undefined)
                             setCount(e.target.value.length);
                         onChange?.(e);
-                    }, ...props }) }), counted && ((0, jsx_runtime_1.jsxs)("span", { className: "textarea-count", "data-over": len > (maxLength ?? 0) ? "" : undefined, "aria-hidden": "true", children: [len, " / ", maxLength] }))] }));
+                    }, ...props }) }), counted && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-textarea-count", "data-over": len > (maxLength ?? 0) ? "" : undefined, "aria-hidden": "true", children: [len, " / ", maxLength] }))] }));
 });
 exports.Textarea.displayName = "Textarea";

package/dist/cjs/components/textarea/textarea.recipe.js

@@ -11,7 +11,7 @@ const config = (0, core_1.defineRecipe)({
     base: `
     position: relative; display: block; width: 100%; font-family: ${tokens_1.contract.font.sans};
 
-    & .textarea-field {
+    & .crisp-textarea-field {
       box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
       margin: 0; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md};
       background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field};
@@ -19,24 +19,24 @@ const config = (0, core_1.defineRecipe)({
       outline: none; transition: box-shadow .15s ease;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     }
-    & .textarea-field::placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-textarea-field::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
 
     /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
        overlay that is present-but-transparent at rest, so focusing never
        shifts the box, animating only its colour. */
-    & .textarea-wrap { position: relative; display: block; }
-    & .textarea-wrap::after {
+    & .crisp-textarea-wrap { position: relative; display: block; }
+    & .crisp-textarea-wrap::after {
       content: ""; position: absolute; inset: 0; border-radius: ${tokens_1.contract.radius.md};
       border: 2px solid transparent; transition: border-color .1s ease;
       pointer-events: none;
     }
-    & .textarea-wrap:focus-within::after { border-color: ${tokens_1.contract.strokeFieldFocus}; }
-    &[data-invalid] .textarea-wrap::after { border-color: ${tokens_1.contract.bgDanger}; }
-    &[data-invalid] .textarea-wrap:focus-within::after { border-color: ${tokens_1.contract.bgDanger}; }
-    &[data-counted] .textarea-field { padding-bottom: ${tokens_1.contract.space["5"]}; }
-    & .textarea-count { position: absolute; inset-inline-end: ${tokens_1.contract.space["2.5"]}; bottom: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
-    & .textarea-count[data-over] { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-textarea-wrap:focus-within::after { border-color: ${tokens_1.contract.strokeFieldFocus}; }
+    &[data-invalid] .crisp-textarea-wrap::after { border-color: ${tokens_1.contract.bgDanger}; }
+    &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: ${tokens_1.contract.bgDanger}; }
+    &[data-counted] .crisp-textarea-field { padding-bottom: ${tokens_1.contract.space["5"]}; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: ${tokens_1.contract.space["2.5"]}; bottom: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
+    & .crisp-textarea-count[data-over] { color: ${tokens_1.contract.bgDanger}; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/cjs/components/toast/toast.js

@@ -49,10 +49,10 @@ const ICONS = {
 };
 function ToastCard({ item, onClose, dismissLabel, }) {
     const Icon = ICONS[item.tone ?? "info"];
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "toast", "data-tone": item.tone ?? "info", children: [(0, jsx_runtime_1.jsx)("span", { className: "toast-icon", children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "toast-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "toast-title", children: item.title }), item.description != null && ((0, jsx_runtime_1.jsx)("div", { className: "toast-desc", children: item.description })), item.action && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "toast-action", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-toast", "data-tone": item.tone ?? "info", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-toast-icon", children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-toast-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-toast-title", children: item.title }), item.description != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-toast-desc", children: item.description })), item.action && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-toast-action", onClick: () => {
                             item.action?.onClick();
                             onClose();
-                        }, children: item.action.label }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "toast-close", "aria-label": dismissLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 2, "aria-hidden": "true" }) })] }));
+                        }, children: item.action.label }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-toast-close", "aria-label": dismissLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 2, "aria-hidden": "true" }) })] }));
 }
 /**
  * Wrap your app in a `ToastProvider`, then call `useToast().toast({...})` from
@@ -70,7 +70,7 @@ function ToastProvider({ children, duration = 4000, dismissLabel = "Dismiss", re
     // the stack, which is the only sensible place left.
     const viewportRef = React.useRef(null);
     const cameFrom = React.useRef(null);
-    const focusAfterDismiss = (0, core_1.useFocusAfterRemoval)(viewportRef, ".toast-close", cameFrom);
+    const focusAfterDismiss = (0, core_1.useFocusAfterRemoval)(viewportRef, ".crisp-toast-close", cameFrom);
     // Tracked from the document, not from the viewport's own focus event: a
     // focusin's relatedTarget is the element LOSING focus, which browsers fill
     // in and happy-dom does not, and either way it is only right when focus
@@ -108,7 +108,7 @@ function ToastProvider({ children, duration = 4000, dismissLabel = "Dismiss", re
         return () => map.forEach(clearTimeout);
     }, []);
     const api = React.useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
-    return ((0, jsx_runtime_1.jsxs)(ToastContext.Provider, { value: api, children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, toast_recipe_1.toastRecipe)(), children: (0, jsx_runtime_1.jsx)("div", { ref: viewportRef, className: "toast-viewport", role: "region", "aria-label": regionLabel, "aria-live": "polite", "aria-atomic": "false", children: items.map((t, i) => ((0, jsx_runtime_1.jsx)(ToastCard, { item: t, onClose: () => {
+    return ((0, jsx_runtime_1.jsxs)(ToastContext.Provider, { value: api, children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, toast_recipe_1.toastRecipe)(), children: (0, jsx_runtime_1.jsx)("div", { ref: viewportRef, className: "crisp-toast-viewport", role: "region", "aria-label": regionLabel, "aria-live": "polite", "aria-atomic": "false", children: items.map((t, i) => ((0, jsx_runtime_1.jsx)(ToastCard, { item: t, onClose: () => {
                             focusAfterDismiss(i);
                             dismiss(t.id);
                         }, dismissLabel: dismissLabel }, t.id))) }) })] }));

package/dist/cjs/components/toast/toast.recipe.js

@@ -9,20 +9,20 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "toast",
     base: `display: contents; font-family: ${tokens_1.contract.font.sans};
-    & .toast-viewport { position: fixed; z-index: 80; inset-inline-end: ${tokens_1.contract.space["4"]}; bottom: ${tokens_1.contract.space["4"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; width: 360px; max-width: calc(100vw - ${tokens_1.contract.space["8"]}); pointer-events: none; }
-    & .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2.5"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgRaised}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
-    & .toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${tokens_1.contract.fgMuted}; }
-    & .toast[data-tone="info"] .toast-icon { color: ${tokens_1.contract.bgBrandSolid}; }
-    & .toast[data-tone="success"] .toast-icon { color: ${tokens_1.contract.bgSuccess}; }
-    & .toast[data-tone="warning"] .toast-icon { color: ${tokens_1.contract.bgWarning}; }
-    & .toast[data-tone="danger"] .toast-icon { color: ${tokens_1.contract.bgDanger}; }
-    & .toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-    & .toast-title { font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
-    & .toast-desc { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
-    & .toast-action { align-self: flex-start; margin-top: ${tokens_1.contract.space["1.5"]}; height: 24px; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
-    & .toast-action:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 10%, transparent); }
-    & .toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
-    & .toast-close:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }`,
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: ${tokens_1.contract.space["4"]}; bottom: ${tokens_1.contract.space["4"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; width: 360px; max-width: calc(100vw - ${tokens_1.contract.space["8"]}); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2.5"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgRaised}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: ${tokens_1.contract.bgSuccess}; }
+    & .crisp-toast[data-tone="warning"] .crisp-toast-icon { color: ${tokens_1.contract.bgWarning}; }
+    & .crisp-toast[data-tone="danger"] .crisp-toast-icon { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .crisp-toast-title { font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-toast-desc { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-toast-action { align-self: flex-start; margin-top: ${tokens_1.contract.space["1.5"]}; height: 24px; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
+    & .crisp-toast-action:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 10%, transparent); }
+    & .crisp-toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-toast-close:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/components/wheelpicker/wheelpicker.js

@@ -124,14 +124,14 @@ function WheelPicker({ columns, value: valueProp, defaultValue, onValueChange, s
         else if (e.key === "End")
             go(col.options.length - 1);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, wheelpicker_recipe_1.wheelpickerRecipe)({ size, className }), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "wheelpicker-indicator", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: "wheelpicker-fog", children: (0, jsx_runtime_1.jsx)("div", { className: "wheelpicker-columns", children: columns.map((col) => ((0, jsx_runtime_1.jsx)("div", { role: "listbox", "aria-label": col.label, "aria-activedescendant": optionId(col.key, value[col.key] ?? ""), tabIndex: 0, className: "wheelpicker-column", ref: (el) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, wheelpicker_recipe_1.wheelpickerRecipe)({ size, className }), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-wheelpicker-indicator", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-wheelpicker-fog", children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-wheelpicker-columns", children: columns.map((col) => ((0, jsx_runtime_1.jsx)("div", { role: "listbox", "aria-label": col.label, "aria-activedescendant": optionId(col.key, value[col.key] ?? ""), tabIndex: 0, className: "crisp-wheelpicker-column", ref: (el) => {
                             if (el)
                                 refs.current.set(col.key, el);
                             else
                                 refs.current.delete(col.key);
                         }, onScroll: () => onScroll(col), onKeyDown: (e) => onKeyDown(e, col), children: col.options.map((opt) => {
                             const selected = opt.value === value[col.key];
-                            return ((0, jsx_runtime_1.jsx)("div", { id: optionId(col.key, opt.value), role: "option", "aria-selected": selected, "data-selected": selected ? "" : undefined, className: "wheelpicker-item", onClick: () => {
+                            return ((0, jsx_runtime_1.jsx)("div", { id: optionId(col.key, opt.value), role: "option", "aria-selected": selected, "data-selected": selected ? "" : undefined, className: "crisp-wheelpicker-item", onClick: () => {
                                     commit(col.key, opt.value);
                                     scrollTo(col.key, col.options.indexOf(opt), glide);
                                 }, children: opt.label }, opt.value));

package/dist/cjs/components/wheelpicker/wheelpicker.recipe.js

@@ -24,7 +24,7 @@ const config = (0, core_1.defineRecipe)({
     background: ${tokens_1.contract.bgSurface}; font-family: ${tokens_1.contract.font.sans};
 
     /* the band the selected row sits in; behind the items, never hit-tested */
-    & .wheelpicker-indicator {
+    & .crisp-wheelpicker-indicator {
       position: absolute; z-index: 0; inset-inline: ${tokens_1.contract.space["4"]}; top: 50%;
       transform: translateY(-50%); border-radius: ${tokens_1.contract.radius.md};
       background: ${tokens_1.contract.bgNeutralWeak}; pointer-events: none;
@@ -32,39 +32,39 @@ const config = (0, core_1.defineRecipe)({
 
     /* fades the rows furthest from the centre, so the column reads as a wheel
        rather than a list. 40% of the viewport, capped, top and bottom. */
-    & .wheelpicker-fog {
+    & .crisp-wheelpicker-fog {
       position: relative; z-index: 1; height: 100%; overflow: hidden;
       mask-image: linear-gradient(
         to bottom,
         transparent 0,
-        #000 var(--wheelpicker-fog),
-        #000 calc(100% - var(--wheelpicker-fog)),
+        #000 var(--crisp-wheelpicker-fog),
+        #000 calc(100% - var(--crisp-wheelpicker-fog)),
         transparent 100%
       );
     }
-    & .wheelpicker-columns { display: flex; width: 100%; height: 100%; justify-content: center; }
+    & .crisp-wheelpicker-columns { display: flex; width: 100%; height: 100%; justify-content: center; }
 
-    & .wheelpicker-column {
+    & .crisp-wheelpicker-column {
       box-sizing: border-box; flex: 0 0 auto; width: max-content; height: 100%;
       overflow-x: hidden; overflow-y: auto;
       overscroll-behavior-y: contain; overscroll-behavior-x: none;
       scroll-snap-type: y mandatory; touch-action: pan-y;
       scrollbar-width: none; -ms-overflow-style: none; outline: none;
-      padding-block: var(--wheelpicker-offset);
+      padding-block: var(--crisp-wheelpicker-offset);
     }
-    & .wheelpicker-column::-webkit-scrollbar { display: none; }
+    & .crisp-wheelpicker-column::-webkit-scrollbar { display: none; }
 
-    & .wheelpicker-item {
+    & .crisp-wheelpicker-item {
       display: flex; align-items: center; justify-content: center;
       scroll-snap-align: center; user-select: none; white-space: nowrap;
       padding-inline: ${tokens_1.contract.space["4"]}; color: ${tokens_1.contract.fgDisabled};
       background: none; border: none; font: inherit; cursor: pointer;
     }
-    & .wheelpicker-item[data-selected] { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-wheelpicker-item[data-selected] { color: ${tokens_1.contract.fgPrimary}; }
 
     /* the ring is drawn on the SELECTED row, and only for keyboard focus:
        a pointer user has just tapped the row they meant and does not need it */
-    & .wheelpicker-column:focus-visible .wheelpicker-item[data-selected] {
+    & .crisp-wheelpicker-column:focus-visible .crisp-wheelpicker-item[data-selected] {
       outline: 2px solid ${tokens_1.contract.strokeFocusRing}; outline-offset: -2px;
       border-radius: ${tokens_1.contract.radius.md};
     }
@@ -72,16 +72,16 @@ const config = (0, core_1.defineRecipe)({
     variants: {
         size: {
             small: `
-        height: 180px; --wheelpicker-offset: 72px;
-        --wheelpicker-fog: min(40%, 108px);
-        & .wheelpicker-indicator { height: 36px; }
-        & .wheelpicker-item { height: 36px; min-height: 36px; font-size: 20px; line-height: 27px; }
+        height: 180px; --crisp-wheelpicker-offset: 72px;
+        --crisp-wheelpicker-fog: min(40%, 108px);
+        & .crisp-wheelpicker-indicator { height: 36px; }
+        & .crisp-wheelpicker-item { height: 36px; min-height: 36px; font-size: 20px; line-height: 27px; }
       `,
             medium: `
-        height: 220px; --wheelpicker-offset: 88px;
-        --wheelpicker-fog: min(40%, 132px);
-        & .wheelpicker-indicator { height: 44px; }
-        & .wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
+        height: 220px; --crisp-wheelpicker-offset: 88px;
+        --crisp-wheelpicker-fog: min(40%, 132px);
+        & .crisp-wheelpicker-indicator { height: 44px; }
+        & .crisp-wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
       `,
         },
     },

package/dist/cjs/core/dialog-description.js

@@ -4,7 +4,7 @@ exports.withDescribedBy = withDescribedBy;
 /**
  * Zag's dialog machine always advertises a description: `getContentProps()`
  * returns an `aria-describedby` pointing at the id of a description element.
- * crisp renders no such element — Attio's modals have a title and a body, no
+ * crisp renders no such element — the measured modals have a title and a body, no
  * description line — so the reference dangles, and a dangling id is not a
  * relationship a screen reader can follow.
  *

package/dist/cjs/core/namespace.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VAR_PREFIX = exports.CLASS_PREFIX = void 0;
+// The single source of truth for crisp's CSS namespace (issue #276).
+//
+// Every class and custom property the stylesheet puts into a consumer's
+// GLOBAL scope goes through one of these two prefixes. Classes are generated
+// in two places that must agree byte-for-byte — `build/generate-recipes.mjs`
+// (the CSS selectors) and `core/resolve.ts` (the runtime `className` string) —
+// and custom properties in two more — `build/generate-tokens.mjs` (the `:root`
+// declarations) and `tokens/contract.ts` (the `var(--…)` references recipes
+// read them through). All four import CLASS_PREFIX/VAR_PREFIX from here;
+// nothing else hardcodes "crisp-".
+exports.CLASS_PREFIX = "crisp-";
+// Applied after the leading "--" a custom property always starts with, e.g.
+// `--${VAR_PREFIX}bg-surface` -> `--crisp-bg-surface`.
+exports.VAR_PREFIX = "crisp-";

package/dist/cjs/core/resolve.js

@@ -2,13 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveRecipe = resolveRecipe;
 const cx_1 = require("./cx");
+const namespace_1 = require("./namespace");
 const falsyToString = (v) => typeof v === "boolean" ? `${v}` : v === 0 ? "0" : v;
 function resolveRecipe(config) {
     const { name, base, variants, defaultVariants, compoundVariants } = config;
+    const prefixedName = `${namespace_1.CLASS_PREFIX}${name}`;
     return (props) => {
         const classes = [];
         if (base)
-            classes.push(name);
+            classes.push(prefixedName);
         if (variants) {
             for (const variant of Object.keys(variants)) {
                 const variantProp = props?.[variant];
@@ -19,7 +21,7 @@ function resolveRecipe(config) {
                 if (key == null)
                     continue;
                 if (variants[variant]?.[key] !== undefined) {
-                    classes.push(`${name}--${variant}_${key}`);
+                    classes.push(`${prefixedName}--${variant}_${key}`);
                 }
             }
             const withoutUndefined = props
@@ -36,7 +38,7 @@ function resolveRecipe(config) {
                         ? val.includes(merged[k])
                         : merged[k] === val);
                 if (matches)
-                    classes.push(`${name}--compound_${i}`);
+                    classes.push(`${prefixedName}--compound_${i}`);
             });
         }
         return (0, cx_1.cx)(classes, props?.class, props?.className);

package/dist/cjs/index.js

@@ -70,7 +70,7 @@ __exportStar(require("./components/tooltip"), exports);
 __exportStar(require("./components/wheelpicker"), exports);
 __exportStar(require("./core"), exports);
 // product surfaces (product/) — faithful, pixel-measured rebuilds of specific
-// Attio screens (Sidebar, RecordsTable, RecordPage, Inbox, …). Use them as-is
+// product screens (Sidebar, RecordsTable, RecordPage, Inbox, …). Use them as-is
 // or as composition references for your own data; `components/` above holds
 // the generic primitives (Table, DataTable, Button, …) to build your own UI from.
 __exportStar(require("./product/appshell"), exports);

package/dist/cjs/product/appshell/appshell.js

@@ -102,9 +102,9 @@ function AppShell({ sidebar, children, width: widthProp, defaultWidth = 275, onW
         window.addEventListener("pointerup", onUp);
     };
     const toggleCollapse = () => setCollapsed(!collapsed);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, appshell_recipe_1.appshellRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "appshell-side", "data-collapsed": collapsed ? "" : undefined, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, appshell_recipe_1.appshellRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-appshell-side", "data-collapsed": collapsed ? "" : undefined, style: {
                     width: collapsed ? 0 : width,
                     transition: dragging ? "none" : "width .14s ease",
-                }, children: [(0, jsx_runtime_1.jsx)("div", { className: "appshell-side-inner", style: { width }, children: sidebar(toggleCollapse) }), !collapsed && ((0, jsx_runtime_1.jsx)("div", { className: "appshell-resize", "data-dragging": dragging ? "" : undefined, "aria-hidden": "true", onPointerDown: startResize }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "appshell-main", children: [collapsed && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "appshell-expand", "aria-label": expandLabel, onClick: () => setCollapsed(false), children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) })), children] })] }));
+                }, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-appshell-side-inner", style: { width }, children: sidebar(toggleCollapse) }), !collapsed && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-appshell-resize", "data-dragging": dragging ? "" : undefined, "aria-hidden": "true", onPointerDown: startResize }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-appshell-main", children: [collapsed && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-appshell-expand", "aria-label": expandLabel, onClick: () => setCollapsed(false), children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) })), children] })] }));
 }
 AppShell.displayName = "AppShell";

package/dist/cjs/product/appshell/appshell.recipe.js

@@ -10,14 +10,14 @@ const config = (0, core_1.defineRecipe)({
     name: "appshell",
     base: `
     display: flex; height: 100%; width: 100%; overflow: hidden; background: ${tokens_1.contract.bgSurface}; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
-    & .appshell-side-inner { height: 100%; }
-    & .appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .appshell-resize::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 1px; height: 100%; background: ${tokens_1.contract.borderSubtle}; transition: background-color .16s, height .16s; }
-    & .appshell-resize:hover::after, & .appshell-resize[data-dragging]::after { width: 2px; background: ${tokens_1.contract.bgBrandSolid}; }
-    & .appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
-    & .appshell-expand { position: absolute; top: ${tokens_1.contract.space["2"]}; inset-inline-start: ${tokens_1.contract.space["2"]}; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: ${tokens_1.contract.size.row}; height: ${tokens_1.contract.size.row}; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }
-    & .appshell-expand:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
+    & .crisp-appshell-side-inner { height: 100%; }
+    & .crisp-appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .crisp-appshell-resize::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 1px; height: 100%; background: ${tokens_1.contract.borderSubtle}; transition: background-color .16s, height .16s; }
+    & .crisp-appshell-resize:hover::after, & .crisp-appshell-resize[data-dragging]::after { width: 2px; background: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
+    & .crisp-appshell-expand { position: absolute; top: ${tokens_1.contract.space["2"]}; inset-inline-start: ${tokens_1.contract.space["2"]}; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: ${tokens_1.contract.size.row}; height: ${tokens_1.contract.size.row}; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .crisp-appshell-expand:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
   
     ${core_1.rtlFlipCss}
   `,

package/dist/cjs/product/authshell/authshell.js

@@ -16,6 +16,6 @@ function AuthShell({ progress, logo, title, children, preview, footer, className
     const pct = hasProgress
         ? Math.round(Math.max(0, Math.min(1, progress)) * 100)
         : 0;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, authshell_recipe_1.authshellRecipe)({ className }), ...rest, children: [hasProgress && ((0, jsx_runtime_1.jsx)("div", { className: "authshell-progress", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, children: (0, jsx_runtime_1.jsx)("div", { className: "authshell-progress-fill", style: { width: `${pct}%` } }) })), logo != null && (0, jsx_runtime_1.jsx)("div", { className: "authshell-logo", children: logo }), (0, jsx_runtime_1.jsxs)("div", { className: "authshell-card", children: [(0, jsx_runtime_1.jsx)("div", { className: "authshell-pane", children: (0, jsx_runtime_1.jsxs)("div", { className: "authshell-body", children: [title != null && (0, jsx_runtime_1.jsx)("div", { className: "authshell-title", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "authshell-form", children: children })] }) }), preview != null && (0, jsx_runtime_1.jsx)("div", { className: "authshell-preview", children: preview })] }), footer != null && (0, jsx_runtime_1.jsx)("div", { className: "authshell-footer", children: footer })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, authshell_recipe_1.authshellRecipe)({ className }), ...rest, children: [hasProgress && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-progress", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-progress-fill", style: { width: `${pct}%` } }) })), logo != null && (0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-logo", children: logo }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-authshell-card", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-pane", children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-authshell-body", children: [title != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-title", children: title })), (0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-form", children: children })] }) }), preview != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-preview", children: preview }))] }), footer != null && (0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-footer", children: footer })] }));
 }
 AuthShell.displayName = "AuthShell";

package/dist/cjs/product/authshell/authshell.recipe.js

@@ -16,40 +16,40 @@ const config = (0, core_1.defineRecipe)({
     background: ${tokens_1.contract.bgSurface}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgPrimary};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: ${tokens_1.contract.borderDefault}; }
-    & .authshell-progress-fill { height: 2px; background: ${tokens_1.contract.fgPrimary}; border-radius: 4px; transition: width .2s; }
+    & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: ${tokens_1.contract.borderDefault}; }
+    & .crisp-authshell-progress-fill { height: 2px; background: ${tokens_1.contract.fgPrimary}; border-radius: 4px; transition: width .2s; }
 
-    & .authshell-logo { margin-top: ${tokens_1.contract.space["8"]}; height: 24px; display: flex; align-items: center; }
+    & .crisp-authshell-logo { margin-top: ${tokens_1.contract.space["8"]}; height: 24px; display: flex; align-items: center; }
 
-    & .authshell-card { margin-top: ${tokens_1.contract.space["6"]}; display: flex; height: 692px; border-radius: 20px; border: 1px solid ${tokens_1.contract.borderSubtle}; overflow: hidden; }
+    & .crisp-authshell-card { margin-top: ${tokens_1.contract.space["6"]}; display: flex; height: 692px; border-radius: 20px; border: 1px solid ${tokens_1.contract.borderSubtle}; overflow: hidden; }
 
-    & .authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
+    & .crisp-authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
 
-    & .authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: ${tokens_1.contract.bgSubtle}; border-inline-start: 1px solid color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
-    & .authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, ${tokens_1.contract.bgSubtle} 0%, transparent) 0%, ${tokens_1.contract.bgSubtle} 100%); pointer-events: none; }
+    & .crisp-authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: ${tokens_1.contract.bgSubtle}; border-inline-start: 1px solid color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
+    & .crisp-authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, ${tokens_1.contract.bgSubtle} 0%, transparent) 0%, ${tokens_1.contract.bgSubtle} 100%); pointer-events: none; }
 
-    & .authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["8"]}; align-items: center; }
+    & .crisp-authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["8"]}; align-items: center; }
 
-    & .authshell-title { font-size: 20px; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.4px; color: ${tokens_1.contract.fgPrimary}; align-self: stretch; }
+    & .crisp-authshell-title { font-size: 20px; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.4px; color: ${tokens_1.contract.fgPrimary}; align-self: stretch; }
 
-    & .authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
+    & .crisp-authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
 
-    & .authshell-footer { margin-top: ${tokens_1.contract.space["6"]}; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; line-height: 16px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
-    & .authshell-footer a { color: inherit; font-weight: ${tokens_1.contract.weight.medium}; text-decoration: underline; }
+    & .crisp-authshell-footer { margin-top: ${tokens_1.contract.space["6"]}; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; line-height: 16px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .crisp-authshell-footer a { color: inherit; font-weight: ${tokens_1.contract.weight.medium}; text-decoration: underline; }
 
     /* Auth-surface control treatment: flatter than the in-app chrome — a plain
        hairline ring instead of elevation.field's soft glow, and a 36px (not
-       40px) submit. Scoped to .authshell-body so a consumer keeps using
+       40px) submit. Scoped to .crisp-authshell-body so a consumer keeps using
        crisp's Input / FormField / Button and gets the auth treatment for free. */
-    & .authshell-body .formfield-label { font-size: ${tokens_1.contract.text.sm}; line-height: 16px; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.12px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); padding-inline-start: ${tokens_1.contract.space["1"]}; }
-    & .authshell-body .formfield { gap: ${tokens_1.contract.space["1"]}; }
-    & .authshell-body .input { height: 34px; padding-inline: ${tokens_1.contract.space["2.5"]}; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
-    & .authshell-body .input:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-authshell-body .crisp-formfield-label { font-size: ${tokens_1.contract.text.sm}; line-height: 16px; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.12px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); padding-inline-start: ${tokens_1.contract.space["1"]}; }
+    & .crisp-authshell-body .crisp-formfield { gap: ${tokens_1.contract.space["1"]}; }
+    & .crisp-authshell-body .crisp-input { height: 34px; padding-inline: ${tokens_1.contract.space["2.5"]}; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
+    & .crisp-authshell-body .crisp-input:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
     /* Same three-layer brand shadow as Button's primary intent, but the auth
        button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not
        the in-app button's rgba(255,255,255,0.07) highlight. */
-    & .authshell-body .button { height: 36px; padding-inline: ${tokens_1.contract.space["3"]}; border-radius: 10px; }
-    & .authshell-body .button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
+    & .crisp-authshell-body .crisp-button { height: 36px; padding-inline: ${tokens_1.contract.space["3"]}; border-radius: 10px; }
+    & .crisp-authshell-body .crisp-button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
 
     /* The preview pane drops out in JS on narrow viewports (measured: two
        panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
@@ -58,7 +58,7 @@ const config = (0, core_1.defineRecipe)({
        a viewport query would keep the 1130px card and overflow it. Asking the
        shell's own width is what "there isn't room for the preview" means. */
     container-type: inline-size;
-    @container (max-width: 1200px) { & .authshell-preview { display: none; } }`,
+    @container (max-width: 1200px) { & .crisp-authshell-preview { display: none; } }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/product/board/board.js

@@ -86,7 +86,7 @@ function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLa
     };
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, board_recipe_1.boardRecipe)({ className }), ...rest, children: [columns.map((col) => {
                 const colCards = cards.filter((c) => c.columnId === col.id);
-                return ((0, jsx_runtime_1.jsxs)("div", { className: "board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
                         if (!dragId)
                             return;
                         e.preventDefault();
@@ -101,7 +101,7 @@ function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLa
                             move(dragId, col.id);
                         setDragId(null);
                         setOverCol(null);
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "board-col-header", children: [col.accent && ((0, jsx_runtime_1.jsx)("span", { className: "board-col-dot", style: { background: col.accent } })), (0, jsx_runtime_1.jsx)("span", { className: "board-col-title", children: col.title }), (0, jsx_runtime_1.jsx)("span", { className: "board-col-count", children: colCards.length }), onNewCard && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => ((0, jsx_runtime_1.jsx)("div", { className: "board-card", role: "listitem", 
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-col-header", children: [col.accent && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-dot", style: { background: col.accent } })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-title", children: col.title }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-count", children: colCards.length }), onNewCard && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => ((0, jsx_runtime_1.jsx)("div", { className: "crisp-board-card", role: "listitem", 
                                     // biome-ignore lint/a11y/noNoninteractiveTabindex: the rule assumes a listitem cannot be operated. This one carries the board's only keyboard path to move a card, so it has to be reachable by Tab
                                     tabIndex: 0, "aria-label": getCardLabel?.(card), "data-card-id": card.id, draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
                                         setDragId(null);
@@ -120,6 +120,6 @@ function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLa
                                         if (delta && moveByKey(card, delta))
                                             e.preventDefault();
                                     }, children: renderCard(card) }, card.id)))] })] }, col.id));
-            }), (0, jsx_runtime_1.jsx)("div", { className: "board-live", role: "status", "aria-live": "polite", children: announcement })] }));
+            }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-board-live", role: "status", "aria-live": "polite", children: announcement })] }));
 }
 Board.displayName = "Board";

package/dist/cjs/product/board/board.recipe.js

@@ -9,24 +9,24 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "board",
     base: `display: flex; gap: ${tokens_1.contract.space["3"]}; height: 100%; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]}; overflow-x: auto; align-items: flex-start; font-family: ${tokens_1.contract.font.sans};
-    & .board-col { display: flex; flex-direction: column; width: 280px; flex-shrink: 0; max-height: 100%; box-sizing: border-box; }
-    & .board-col-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 36px; padding: 0 ${tokens_1.contract.space["1"]}; flex-shrink: 0; }
-    & .board-col-dot { width: 9px; height: 9px; border-radius: ${tokens_1.contract.radius.full}; flex-shrink: 0; }
-    & .board-col-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
-    & .board-col-count { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
-    & .board-col-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
-    & .board-col-add:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
-    & .board-col-body { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; flex: 1; min-height: 48px; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.lg}; overflow-y: auto; transition: background 0.12s; }
-    & .board-col[data-over] .board-col-body { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 30%, transparent); }
-    & .board-newcard { display: flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; height: 32px; flex-shrink: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
-    & .board-newcard:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent); color: ${tokens_1.contract.fgPrimary}; }
-    & .board-card { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}, 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
-    & .board-card:active { cursor: grabbing; }
-    & .board-card[data-dragging] { opacity: 0.4; }
-    & .board-card:focus { outline: none; }
-    & .board-card:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
+    & .crisp-board-col { display: flex; flex-direction: column; width: 280px; flex-shrink: 0; max-height: 100%; box-sizing: border-box; }
+    & .crisp-board-col-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 36px; padding: 0 ${tokens_1.contract.space["1"]}; flex-shrink: 0; }
+    & .crisp-board-col-dot { width: 9px; height: 9px; border-radius: ${tokens_1.contract.radius.full}; flex-shrink: 0; }
+    & .crisp-board-col-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-board-col-count { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-board-col-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-board-col-add:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-board-col-body { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; flex: 1; min-height: 48px; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.lg}; overflow-y: auto; transition: background 0.12s; }
+    & .crisp-board-col[data-over] .crisp-board-col-body { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 30%, transparent); }
+    & .crisp-board-newcard { display: flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; height: 32px; flex-shrink: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
+    & .crisp-board-newcard:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-board-card { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}, 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
+    & .crisp-board-card:active { cursor: grabbing; }
+    & .crisp-board-card[data-dragging] { opacity: 0.4; }
+    & .crisp-board-card:focus { outline: none; }
+    & .crisp-board-card:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
     /* announced, never drawn */
-    & .board-live {
+    & .crisp-board-live {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }`,

package/dist/cjs/product/command/command.js

@@ -257,9 +257,9 @@ function Command({ open, onOpenChange, items = exports.defaultCommandItems, plac
     };
     if (!dlg.open)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, command_recipe_1.commandRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...dlg.getBackdropProps(), className: "command-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...dlg.getPositionerProps(), className: "command-positioner", children: (0, jsx_runtime_1.jsx)("div", { ...rest, ...(0, core_1.withDescribedBy)(dlg.getContentProps(), describedBy), className: (0, core_1.cx)("command-content", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "command-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "command-control", children: [(0, jsx_runtime_1.jsx)("label", { ...combo.getLabelProps(), className: "command-srlabel", children: ariaLabel }), (0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, ...combo.getInputProps(), className: "command-input", placeholder: placeholder })] }), (0, jsx_runtime_1.jsx)("div", { ...combo.getContentProps(), className: "command-list", children: filteredItems.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "command-empty", children: emptyLabel })) : (filteredItems.map((item, i) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, command_recipe_1.commandRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...dlg.getBackdropProps(), className: "crisp-command-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...dlg.getPositionerProps(), className: "crisp-command-positioner", children: (0, jsx_runtime_1.jsx)("div", { ...rest, ...(0, core_1.withDescribedBy)(dlg.getContentProps(), describedBy), className: (0, core_1.cx)("crisp-command-content", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-command-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-command-control", children: [(0, jsx_runtime_1.jsx)("label", { ...combo.getLabelProps(), className: "crisp-command-srlabel", children: ariaLabel }), (0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, ...combo.getInputProps(), className: "crisp-command-input", placeholder: placeholder })] }), (0, jsx_runtime_1.jsx)("div", { ...combo.getContentProps(), className: "crisp-command-list", children: filteredItems.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-command-empty", children: emptyLabel })) : (filteredItems.map((item, i) => {
                                         const Icon = item.icon;
                                         const showGroup = item.group && item.group !== filteredItems[i - 1]?.group;
-                                        return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [showGroup && ((0, jsx_runtime_1.jsx)("div", { className: "command-group-label", "aria-hidden": "true", children: item.group })), (0, jsx_runtime_1.jsxs)("div", { ...combo.getItemProps({ item }), className: "command-item", children: [(0, jsx_runtime_1.jsx)(Icon, {}), (0, jsx_runtime_1.jsx)("span", { className: "command-item-label", children: item.label }), item.shortcut && ((0, jsx_runtime_1.jsx)("span", { className: "command-item-shortcut", children: item.shortcut.map((key) => ((0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: key }, key))) }))] })] }, item.id));
-                                    })) }), (0, jsx_runtime_1.jsxs)("div", { className: "command-footer", children: [(0, jsx_runtime_1.jsxs)("span", { className: "command-footer-nav", children: [(0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: "\u2191" }), (0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: "\u2193" }), navigateLabel] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "command-footer-action", disabled: !highlightedItem, onClick: () => runItem(highlightedItem), children: [(0, jsx_runtime_1.jsx)("span", { className: "command-footer-action-label", children: highlightedItem?.label ?? selectLabel }), (0, jsx_runtime_1.jsx)("span", { className: "command-footer-key", children: "\u21B5" })] })] })] }) }) })] }) }));
+                                        return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [showGroup && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-command-group-label", "aria-hidden": "true", children: item.group })), (0, jsx_runtime_1.jsxs)("div", { ...combo.getItemProps({ item }), className: "crisp-command-item", children: [(0, jsx_runtime_1.jsx)(Icon, {}), (0, jsx_runtime_1.jsx)("span", { className: "crisp-command-item-label", children: item.label }), item.shortcut && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-command-item-shortcut", children: item.shortcut.map((key) => ((0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: key }, key))) }))] })] }, item.id));
+                                    })) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-command-footer", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-command-footer-nav", children: [(0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: "\u2191" }), (0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: "\u2193" }), navigateLabel] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-command-footer-action", disabled: !highlightedItem, onClick: () => runItem(highlightedItem), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-command-footer-action-label", children: highlightedItem?.label ?? selectLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-command-footer-key", children: "\u21B5" })] })] })] }) }) })] }) }));
 }