@crisp-ui-kit/crisp 0.2.0 → 0.5.0

package/dist/esm/product/tasklist/tasklist.recipe.js

@@ -0,0 +1,35 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A task list — measured from Attio's Tasks page: optional group headers, then
+// rows of a round complete-checkbox + title + trailing meta (due date, record,
+// assignee). Completed rows strike through; overdue due-dates go red.
+const config = defineRecipe({
+    name: "tasklist",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .tasklist-group { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 36px; padding: 0 ${c.space["2"]}; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .tasklist-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; color: ${c.fgMuted}; }
+
+    & .tasklist-row { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 52px; padding: 0 ${c.space["2"]}; border-top: 1px solid ${c.borderSubtle}; }
+    & .tasklist-row:first-child { border-top: none; }
+
+    & .tasklist-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${c.radius.full}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
+    & .tasklist-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 30%, transparent); }
+    & .tasklist-check:checked { background: ${c.bgBrandSolid} center / 10px no-repeat; box-shadow: none; background-image: 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"); }
+    & .tasklist-check:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+
+    & .tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .tasklist-row[data-done] .tasklist-title { color: ${c.fgMuted}; text-decoration: line-through; }
+
+    & .tasklist-meta { display: inline-flex; align-items: center; gap: ${c.space["3"]}; flex-shrink: 0; }
+    & .tasklist-due { font-size: ${c.text.lg}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .tasklist-due[data-overdue] { color: ${c.bgDanger}; }
+
+    & .tasklist-empty { padding: ${c.space["4"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const tasklistRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/trialbanner/index.js

@@ -0,0 +1,2 @@
+export { TrialBanner } from "./trialbanner.js";
+export { trialbannerRecipe } from "./trialbanner.recipe.js";

package/dist/esm/product/trialbanner/trialbanner.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { trialbannerRecipe } from "./trialbanner.recipe.js";
+/**
+ * A compact trial / upgrade banner — measured from Attio's sidebar footer.
+ * Icon + message + an optional small action pill (soft-glow outlined button).
+ */
+export function TrialBanner({ icon, children, action, onAction, tone = "neutral", className, }) {
+    return (_jsxs("div", { className: trialbannerRecipe({ className }), "data-tone": tone === "neutral" ? undefined : tone, children: [icon != null && _jsx("span", { className: "trialbanner-icon", children: icon }), _jsx("span", { className: "trialbanner-msg", children: children }), action != null && (_jsx("button", { type: "button", className: "trialbanner-action", onClick: onAction, children: action }))] }));
+}
+TrialBanner.displayName = "TrialBanner";

package/dist/esm/product/trialbanner/trialbanner.recipe.js

@@ -0,0 +1,29 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A compact trial / upgrade banner — measured from Attio's sidebar footer: an
+// icon + a message on the left and a small action pill on the right, in a 28px
+// row. The action uses Attio's soft-glow outlined-button shadow.
+const config = defineRecipe({
+    name: "trialbanner",
+    base: `display: flex; align-items: center; gap: ${c.space["1.5"]}; box-sizing: border-box; min-height: 28px;
+    padding: 0 ${c.space["1"]}; border-radius: ${c.radius.lg}; font-family: ${c.font.sans};
+    font-size: ${c.text.lg}; color: ${c.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .trialbanner-icon { display: inline-flex; flex-shrink: 0; color: ${c.fgMuted}; }
+    & .trialbanner-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .trialbanner-action { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: 20px; flex-shrink: 0;
+      padding: 0 ${c.space["1.5"]}; margin: 0; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface};
+      box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
+      font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary};
+      white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .trialbanner-action:hover { background: ${c.bgRaised}; }
+
+    &[data-tone="warning"] .trialbanner-icon { color: ${c.bgWarning}; }
+    &[data-tone="danger"] .trialbanner-icon { color: ${c.bgDanger}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const trialbannerRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/viewtoggle/index.js

@@ -0,0 +1,2 @@
+export { ViewToggle, } from "./viewtoggle.js";
+export { viewtoggleRecipe } from "./viewtoggle.recipe.js";

package/dist/esm/product/viewtoggle/viewtoggle.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { viewtoggleRecipe } from "./viewtoggle.recipe.js";
+/**
+ * A compact icon toggle — measured from Attio's list/grid switch. A padded track
+ * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
+ * grid) or any small mutually-exclusive icon choice.
+ */
+export function ViewToggle({ options, value, onChange, "aria-label": ariaLabel, className, }) {
+    return (_jsx("div", { className: viewtoggleRecipe({ className }), role: "group", "aria-label": ariaLabel, children: options.map((o) => (_jsx("button", { type: "button", className: "viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => onChange(o.value), children: o.icon }, o.value))) }));
+}
+ViewToggle.displayName = "ViewToggle";

package/dist/esm/product/viewtoggle/viewtoggle.recipe.js

@@ -0,0 +1,24 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A compact icon toggle — measured from Attio's list/grid switch: a 28px track
+// (radius 10, ~5% ink) padded 2px, holding 24px icon tiles (radius 8). The
+// selected tile gets a raised surface with a soft shadow.
+const config = defineRecipe({
+    name: "viewtoggle",
+    base: `display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; padding: 2px;
+    border-radius: ${c.radius.lg}; background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent);
+    font-family: ${c.font.sans};
+
+    & .viewtoggle-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
+      padding: 0; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted};
+      cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
+    & .viewtoggle-tile:hover { color: ${c.fgPrimary}; }
+    & .viewtoggle-tile[data-active] { background: ${c.bgTileActive}; color: ${c.fgPrimary};
+      box-shadow: 0 1px 2px -1px ${c.shadowTileActive}; }
+    & .viewtoggle-tile:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const viewtoggleRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/tokens/contract.js

@@ -0,0 +1,18 @@
+import { font as fontScale, radius as radiusScale, size as sizeScale, space as spaceScale, text as textScale, weight as weightScale, } from "./scale.js";
+import { semantic } from "./semantic.js";
+const kebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+const toVar = (key) => `var(--${kebab(key)})`;
+// dots aren't valid in a CSS custom-property name → "2.5" becomes "2-5"
+const scaleVar = (prefix, key) => `var(--${prefix}-${key.replace(/\./g, "-")})`;
+const mapScale = (prefix, scale) => Object.fromEntries(Object.keys(scale).map((k) => [k, scaleVar(prefix, k)]));
+const colors = Object.fromEntries(Object.keys(semantic).map((k) => [k, toVar(k)]));
+// contract = color tokens (theme-flipping) + the dimensional scale
+// (theme-invariant). Recipes read everything through this one import.
+export const contract = Object.assign(colors, {
+    space: mapScale("space", spaceScale),
+    radius: mapScale("radius", radiusScale),
+    size: mapScale("size", sizeScale),
+    font: mapScale("font", fontScale),
+    text: mapScale("text", textScale),
+    weight: mapScale("weight", weightScale),
+});

package/dist/esm/tokens/index.js

@@ -0,0 +1,4 @@
+export { contract } from "./contract.js";
+export { palette } from "./palette.js";
+export { font, radius, size, space, text, weight, } from "./scale.js";
+export { semantic } from "./semantic.js";

package/dist/esm/tokens/palette.js

@@ -0,0 +1,30 @@
+export const palette = {
+    gray00: { light: "#ffffff", dark: "#0a0a0a" },
+    white: { light: "#ffffff", dark: "#ffffff" },
+    gray50: { light: "#f4f4f5", dark: "#101112" },
+    gray900: { light: "#101112", dark: "#f5f5f5" },
+    line200: { light: "#e4e4e7", dark: "#212224" },
+    line100: { light: "#eeeff1", dark: "#1c1d1f" },
+    ringNeutral: { light: "transparent", dark: "#212224" },
+    tileActive: { light: "#ffffff", dark: "#101112" },
+    tileActiveShadow: { light: "rgba(0,0,0,0.04)", dark: "rgba(0,0,0,0)" },
+    overlayFrost: { light: "#ffffff", dark: "#1c1d1f" },
+    shadowOverlay1: { light: "rgba(28,40,64,0.12)", dark: "rgba(0,0,0,0.48)" },
+    shadowOverlay2: { light: "rgba(28,40,64,0.16)", dark: "rgba(0,0,0,0.64)" },
+    shadowOverlay3: { light: "rgba(28,40,64,0.16)", dark: "rgba(0,0,0,0)" },
+    popoverBg: { light: "#ffffff", dark: "#17181a" },
+    ringPopover: { light: "rgba(0,0,0,0)", dark: "#212224" },
+    shadowPopover1: { light: "rgba(28,40,64,0.04)", dark: "rgba(0,0,0,0.16)" },
+    shadowPopover2: { light: "rgba(28,40,64,0.12)", dark: "rgba(0,0,0,0.24)" },
+    shadowPopover3: { light: "rgba(24,41,75,0.16)", dark: "rgba(0,0,0,0.32)" },
+    gray400: { light: "#71717a", dark: "#9a9aa2" },
+    brand600: { light: "#266df0", dark: "#266df0" },
+    brand700: { light: "#1f5fd6", dark: "#1f5fd6" },
+    red600: { light: "#e5484d", dark: "#ff5a5f" },
+    green600: { light: "#1f9d57", dark: "#2ea968" },
+    amber600: { light: "#b5730f", dark: "#e0982a" },
+    orange600: { light: "#f97514", dark: "#f97514" },
+    cyan600: { light: "#00b9eb", dark: "#00b9eb" },
+    purple600: { light: "#9b69ff", dark: "#9b69ff" },
+    graySidebar: { light: "#fbfbfb", dark: "#0e0f10" },
+};

package/dist/esm/tokens/scale.js

@@ -0,0 +1,60 @@
+// Dimensional scale — the single source of raw px for spacing, radius, and
+// component sizing. Theme-invariant (identical in light/dark), so it is emitted
+// once into :root, unlike the color tokens which flip per theme.
+//
+// Derived by measuring the live Attio app (not taste): its spacing is a
+// 2px-granular / 4px-base scale — the values 1,2,4,6,8,10,12,16 account for
+// nearly every gap/pad/margin in the sidebar. Radii cluster at 6/8/9 + a pill.
+// Recipes MUST reference these through the contract (`c.space[...]`), never a
+// literal px — this file is the only exception.
+// Spacing: gaps, padding, margins. Keys follow the Tailwind step convention
+// (0.5 = half a 4px step = 2px) so the numbers stay legible to consumers.
+export const space = {
+    px: "1px", // hairline — the 1px gap between rows in a dense nav list
+    "0.5": "2px",
+    "1": "4px",
+    "1.5": "6px",
+    "2": "8px",
+    "2.5": "10px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px", // overlay / empty-state padding
+};
+// Corner radius. sm/md/lg are the three Attio uses on stacked surfaces
+// (inputs, rows, tiles); full is the pill.
+export const radius = {
+    sm: "6px", // chips, badges
+    md: "8px", // inputs, search box
+    lg: "9px", // rows, tiles, list items
+    xl: "12px", // overlay items (command rows)
+    "2xl": "16px", // overlay panels (command surface)
+    full: "999px", // pills
+};
+// Component sizing — recurring measured dimensions that are neither spacing nor
+// radius (row height, header height, the nav icon box).
+export const size = {
+    icon: "16px", // nav / control glyph box
+    row: "28px", // nav item · search · control height
+    tableRow: "36px", // data-grid row height
+    header: "48px", // workspace-switcher header height
+};
+// Typography — Attio's UI runs entirely on Inter. Sizes measured in the sidebar
+// collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);
+// weights are 400/500/600 with 500 the UI default.
+export const font = {
+    sans: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif',
+};
+export const text = {
+    xs: "11px",
+    sm: "12px",
+    md: "13px",
+    lg: "14px", // default body / nav-label size
+    xl: "16px",
+};
+export const weight = {
+    regular: "400",
+    medium: "500", // default UI weight
+    semibold: "600",
+};

package/dist/esm/tokens/semantic.js

@@ -0,0 +1,30 @@
+export const semantic = {
+    bgBrandSolid: "brand600",
+    bgBrandSolidPressed: "brand700",
+    fgOnBrand: "white",
+    bgSurface: "gray00",
+    bgRaised: "gray50",
+    borderDefault: "line200",
+    borderSubtle: "line100",
+    ringNeutral: "ringNeutral",
+    bgTileActive: "tileActive",
+    shadowTileActive: "tileActiveShadow",
+    bgOverlayFrost: "overlayFrost",
+    shadowOverlay1: "shadowOverlay1",
+    shadowOverlay2: "shadowOverlay2",
+    shadowOverlay3: "shadowOverlay3",
+    bgPopover: "popoverBg",
+    ringPopover: "ringPopover",
+    shadowPopover1: "shadowPopover1",
+    shadowPopover2: "shadowPopover2",
+    shadowPopover3: "shadowPopover3",
+    fgPrimary: "gray900",
+    fgMuted: "gray400",
+    bgDanger: "red600",
+    bgSuccess: "green600",
+    bgWarning: "amber600",
+    bgOrange: "orange600",
+    bgCyan: "cyan600",
+    bgPurple: "purple600",
+    bgSidebar: "graySidebar",
+};

package/dist/menu.css

@@ -6,8 +6,8 @@
     & .menu-content {
       position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-px);
       min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--space-1);
-      border-radius: var(--radius-xl); background: var(--bg-surface);
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
+      border-radius: var(--radius-xl); background: var(--bg-popover);
+      box-shadow: inset 0 0 0 1px var(--ring-popover), 0 0 0 1px var(--shadow-popover1), 0 4px 8px -4px var(--shadow-popover2), 0 4px 12px -2px var(--shadow-popover3);
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
     & .menu-content[data-align="end"] { transform-origin: top right; }

package/dist/multiselect.css

@@ -6,7 +6,7 @@
     & .multiselect-trigger {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--space-1); width: 100%; min-width: 0; min-height: 32px;
       margin: 0; padding: var(--space-0-5) var(--space-1-5) var(--space-0-5) var(--space-2);
-      border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
+      border: none; border-radius: var(--radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 7%, transparent);
       font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); cursor: pointer; text-align: left;
       transition: background-color .12s ease, box-shadow .12s ease;
     }
@@ -21,8 +21,8 @@
     & .multiselect-listbox {
       position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-px);
       max-height: 300px; overflow-y: auto; padding: var(--space-1);
-      border-radius: var(--radius-xl); background: var(--bg-surface);
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
+      border-radius: var(--radius-xl); background: var(--bg-popover);
+      box-shadow: inset 0 0 0 1px var(--ring-popover), 0 0 0 1px var(--shadow-popover1), 0 4px 8px -4px var(--shadow-popover2), 0 4px 12px -2px var(--shadow-popover3);
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
     & .multiselect-listbox[data-up] { transform-origin: bottom left; }

package/dist/popover.css

@@ -1,6 +1,6 @@
 .popover {
   display: contents; font-family: var(--font-sans);
-    & .popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--space-1); border-radius: var(--radius-xl); background: var(--bg-raised); color: var(--fg-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 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: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--space-1); border-radius: var(--radius-xl); background: var(--bg-popover); color: var(--fg-primary); box-shadow: inset 0 0 0 1px var(--ring-popover), 0 0 0 1px var(--shadow-popover1), 0 4px 8px -4px var(--shadow-popover2), 0 4px 12px -2px var(--shadow-popover3); opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .popover-content[data-align="end"] { transform-origin: top right; }
     & .popover-content[data-up] { transform-origin: bottom left; }
 }

package/dist/recordpage.css

@@ -12,7 +12,7 @@
     & .recordpage-crumb-sep { color: var(--fg-muted); font-size: var(--text-lg); }
     & .recordpage-crumb-name { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .recordpage-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-1); }
-    & .recordpage-action { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; padding: 0 var(--space-2) 0 var(--space-1-5); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); cursor: pointer; white-space: nowrap; }
+    & .recordpage-action { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; padding: 0 var(--space-2) 0 var(--space-1-5); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); cursor: pointer; white-space: nowrap; }
     & .recordpage-action:hover { background: var(--bg-raised); }
     & .recordpage-action--ghost { box-shadow: none; color: var(--fg-muted); }
     & .recordpage-action--icon { width: 28px; padding: 0; justify-content: center; box-shadow: none; color: var(--fg-muted); }
@@ -33,10 +33,10 @@
     & .recordpage-entity-iconbtn:hover { background: var(--bg-raised); color: var(--fg-primary); }
     & .recordpage-entity-iconbtn[data-active] svg { color: #f5b83d; fill: #f5b83d; }
     & .recordpage-quickactions { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1) var(--space-3); }
-    & .recordpage-compose { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; padding: 0 var(--space-4) 0 var(--space-3); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .recordpage-compose { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; padding: 0 var(--space-4) 0 var(--space-3); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .recordpage-compose:hover { background: var(--bg-raised); }
     & .recordpage-compose svg { flex-shrink: 0; color: var(--fg-muted); }
-    & .recordpage-quickbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--fg-muted); cursor: pointer; transition: background-color .12s, color .12s; }
+    & .recordpage-quickbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--fg-muted); cursor: pointer; transition: background-color .12s, color .12s; }
     & .recordpage-quickbtn:hover { background: var(--bg-raised); color: var(--fg-primary); }
     & .recordpage-section { padding-top: var(--space-2); }
     & .recordpage-section-title { font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: -0.12px; color: color-mix(in srgb, var(--fg-primary) 63%, transparent); padding: var(--space-1); }
@@ -100,7 +100,7 @@
     & .recordpage-section-head .recordpage-section-title { padding: 0; }
     & .recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fg-primary) 6%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-muted); }
     & .recordpage-section-spacer { flex: 1; }
-    & .recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 var(--space-1-5); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--fg-primary); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
+    & .recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 var(--space-1-5); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--fg-primary); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
     & .recordpage-addbtn:hover { background: var(--bg-raised); }
     & .recordpage-addbtn svg { flex-shrink: 0; }
 
@@ -108,7 +108,7 @@
     & .recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); }
     & .recordpage-composer textarea::placeholder { color: var(--fg-muted); }
     & .recordpage-composer-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-1-5); }
-    & .recordpage-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-2-5); margin: 0; border: none; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); background: var(--bg-surface); color: var(--fg-primary); }
+    & .recordpage-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-2-5); margin: 0; border: none; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); background: var(--bg-surface); color: var(--fg-primary); }
     & .recordpage-btn:hover { background: var(--bg-raised); }
     & .recordpage-btn--primary { box-shadow: none; background: var(--bg-brand-solid); color: var(--fg-on-brand); }
     & .recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }

package/dist/recordstable.css

@@ -16,7 +16,7 @@
     & .recordstable-tool--ghost { box-shadow: none; background: color-mix(in srgb, var(--fg-primary) 3%, transparent); color: var(--fg-muted); }
     & .recordstable-tool--ghost:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); }
     & .recordstable-toolgroup { position: relative; display: inline-flex; }
-    & .recordstable-menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 30; min-width: 232px; padding: var(--space-1); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); display: flex; flex-direction: column; gap: var(--space-px); transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
+    & .recordstable-menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 30; min-width: 232px; padding: var(--space-1); border-radius: var(--radius-lg); background: var(--bg-popover); box-shadow: inset 0 0 0 1px var(--ring-popover), 0 0 0 1px var(--shadow-popover1), 0 4px 8px -4px var(--shadow-popover2), 0 4px 12px -2px var(--shadow-popover3); display: flex; flex-direction: column; gap: var(--space-px); transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
     & .recordstable-menu { @starting-style { opacity: 0; transform: scale(0.96); } }
     & .recordstable-ctx { z-index: 60; }
     & .recordstable-th[data-drop] { box-shadow: inset 2px 0 0 var(--bg-brand-solid); }
@@ -36,7 +36,7 @@
     & .recordstable-sort-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); cursor: pointer; transition: background-color .12s, color .12s; }
     & .recordstable-sort-remove:hover { background: var(--bg-raised); color: var(--fg-primary); }
     & .recordstable-sort-addrow { display: flex; padding: var(--space-0-5) 0; }
-    & .recordstable-sort-add { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; padding: 0 var(--space-2) 0 var(--space-1-5); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--fg-primary); cursor: pointer; transition: background-color .12s; }
+    & .recordstable-sort-add { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; padding: 0 var(--space-2) 0 var(--space-1-5); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--fg-primary); cursor: pointer; transition: background-color .12s; }
     & .recordstable-sort-add:hover { background: var(--bg-raised); }
     & .recordstable-sort-add svg { flex-shrink: 0; color: var(--fg-muted); }
     & .recordstable-sort-foot { display: flex; padding: var(--space-1-5) var(--space-1) var(--space-0-5); }
@@ -96,8 +96,8 @@
     & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
 
     /* add-column header */
-    & .recordstable-addcol { width: 44px; min-width: 44px; }
-    & .recordstable-addcol button { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: none; background: none; color: var(--fg-muted); cursor: pointer; }
+    & .recordstable-addcol { min-width: 44px; }
+    & .recordstable-addcol button { display: flex; align-items: center; justify-content: center; width: 44px; height: 100%; border: none; background: none; color: var(--fg-muted); cursor: pointer; }
     & .recordstable-addcol button:hover { background: var(--bg-raised); color: var(--fg-primary); }
 
     /* cells */

package/dist/select.css

@@ -1,12 +1,12 @@
 .select {
   
-    position: relative; display: inline-flex; width: 100%; font-family: var(--font-sans);
+    position: relative; display: inline-flex; font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
     & .select-trigger {
       box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-1-5);
       height: 32px; width: 100%; min-width: 0; margin: 0; padding: 0 var(--space-1-5) 0 var(--space-2);
-      border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
+      border: none; border-radius: var(--radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 7%, transparent);
       font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); cursor: pointer;
       transition: background-color .12s ease, box-shadow .12s ease;
     }
@@ -21,8 +21,8 @@
     & .select-listbox {
       position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-px);
       max-height: 280px; overflow-y: auto; padding: var(--space-1);
-      border-radius: var(--radius-xl); background: var(--bg-surface);
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
+      border-radius: var(--radius-xl); background: var(--bg-popover);
+      box-shadow: inset 0 0 0 1px var(--ring-popover), 0 0 0 1px var(--shadow-popover1), 0 4px 8px -4px var(--shadow-popover2), 0 4px 12px -2px var(--shadow-popover3);
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
     & .select-listbox[data-up] { transform-origin: bottom; }
@@ -54,3 +54,9 @@
         & .select-trigger[data-open], & .select-trigger:focus-visible { background: transparent; box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
       
 }
+.select--width_full {
+  width: 100%;
+}
+.select--width_auto {
+  width: auto;
+}

package/dist/select.d.ts

@@ -2,6 +2,7 @@ import type { RecipeFn } from "../core/types";
 
 export interface SelectVariants {
   variant?: "default" | "ghost";
+  width?: "full" | "auto";
 }
 
-export declare const selectRecipe: RecipeFn<{ variant: { default: string; ghost: string } }>;
+export declare const selectRecipe: RecipeFn<{ variant: { default: string; ghost: string }; width: { full: string; auto: string } }>;

package/dist/sidebar.css

@@ -1,3 +1,3 @@
 .sidebar {
-  box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--bg-sidebar); border-right: 1px solid var(--border-subtle); padding: var(--space-2); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; & .sidebar-section { display: flex; flex-direction: column; gap: var(--space-px); margin-top: var(--space-2); } & .sidebar-section[data-collapsed] { display: none; } & .sidebar-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); padding: var(--space-1-5) var(--space-2) var(--space-0-5); } & .sidebar-section-header { display: flex; align-items: center; gap: var(--space-1); width: 100%; margin: 0; border: none; background: none; padding: var(--space-1-5) var(--space-2) var(--space-0-5); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); cursor: pointer; } & .sidebar-section-header svg { flex-shrink: 0; transition: transform .15s ease; } & .sidebar-section-header[data-collapsed] svg { transform: rotate(-90deg); } & .sidebar-ws { display: flex; align-items: center; gap: var(--space-2); height: var(--size-header); padding: 0 var(--space-2); border-radius: var(--radius-lg); cursor: pointer; transition: background-color 0.16s; } & .sidebar-ws:hover { background: color-mix(in srgb, var(--fg-primary) 5%, transparent); } & .sidebar-ws-name { font-size: var(--text-lg); font-weight: var(--weight-semibold); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .sidebar-ws-collapse { margin-left: auto; } & .sidebar-searchrow { display: flex; align-items: center; gap: var(--space-1-5); margin-top: var(--space-2-5); padding-right: var(--space-2); } & .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-0-5); } & .sidebar-trial { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1-5) var(--space-2); font-size: var(--text-sm); color: var(--fg-muted); } & .sidebar-search { box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); height: var(--size-row); margin: 0; padding: 0 var(--space-1) 0 var(--space-2); border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--fg-muted); font-family: inherit; font-size: var(--text-lg); text-align: left; cursor: pointer; transition: background-color 0.14s; } & .sidebar-search:hover { background: var(--bg-raised); } & .sidebar-search-label { flex: 1; color: var(--fg-primary); font-weight: var(--weight-medium); } & .sidebar-search-kbd { margin-left: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 8%, transparent); color: color-mix(in srgb, var(--fg-primary) 50%, transparent); font-size: var(--text-xs); } & .sidebar-pill { border-radius: var(--radius-full); align-self: center; width: auto; height: 32px; padding-inline: var(--space-4); } & .sidebar-divider { height: 0; border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-2) calc(-1 * var(--space-2)) 0; } & .sidebar-newlist { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--size-row); border-radius: var(--radius-md); border: 1px dashed var(--border-default); background: transparent; color: var(--fg-muted); font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; } & .sidebar-newlist:hover { background: var(--bg-raised); color: var(--fg-primary); }
+  box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--bg-sidebar); border-right: 1px solid var(--border-subtle); padding: var(--space-2); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; & .sidebar-section { display: flex; flex-direction: column; gap: var(--space-px); margin-top: var(--space-2); } & .sidebar-section[data-collapsed] { display: none; } & .sidebar-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); padding: var(--space-1-5) var(--space-2) var(--space-0-5); } & .sidebar-section-header { display: flex; align-items: center; gap: var(--space-1); width: 100%; margin: 0; border: none; background: none; padding: var(--space-1-5) var(--space-2) var(--space-0-5); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); cursor: pointer; } & .sidebar-section-header svg { flex-shrink: 0; transition: transform .15s ease; } & .sidebar-section-header[data-collapsed] svg { transform: rotate(-90deg); } & .sidebar-ws { display: flex; align-items: center; gap: var(--space-2); height: var(--size-header); padding: 0 var(--space-2); border-radius: var(--radius-lg); cursor: pointer; transition: background-color 0.16s; } & .sidebar-ws:hover { background: color-mix(in srgb, var(--fg-primary) 5%, transparent); } & .sidebar-ws-name { font-size: var(--text-lg); font-weight: var(--weight-semibold); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .sidebar-ws-collapse { margin-left: auto; } & .sidebar-searchrow { display: flex; align-items: center; gap: var(--space-1-5); margin-top: var(--space-2-5); padding-right: var(--space-2); } & .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-0-5); } & .sidebar-trial { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1-5) var(--space-2); font-size: var(--text-sm); color: var(--fg-muted); } & .sidebar-search { box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); height: var(--size-row); margin: 0; padding: 0 var(--space-1) 0 var(--space-2); border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--fg-muted); font-family: inherit; font-size: var(--text-lg); text-align: left; cursor: pointer; transition: background-color 0.14s; } & .sidebar-search:hover { background: var(--bg-raised); } & .sidebar-search-label { flex: 1; color: var(--fg-primary); font-weight: var(--weight-medium); } & .sidebar-search-kbd { margin-left: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 8%, transparent); color: color-mix(in srgb, var(--fg-primary) 50%, transparent); font-size: var(--text-xs); } & .sidebar-pill { border-radius: var(--radius-full); align-self: center; width: auto; height: 32px; padding-inline: var(--space-4); } & .sidebar-divider { height: 0; border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-2) calc(-1 * var(--space-2)) 0; } & .sidebar-newlist { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--size-row); border-radius: var(--radius-md); border: 1px dashed var(--border-default); background: transparent; color: var(--fg-muted); font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; } & .sidebar-newlist:hover { background: var(--bg-raised); color: var(--fg-primary); }
 }

package/dist/statcard.css

@@ -11,3 +11,9 @@
     & .statcard-delta[data-trend="down"] { background: color-mix(in srgb, var(--bg-danger) 15%, transparent); color: color-mix(in srgb, var(--bg-danger) 80%, var(--fg-primary)); }
     & .statcard-delta[data-trend="flat"] { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-muted); }
 }
+.statcard--card_true {
+  padding: var(--space-4); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle);
+}
+.statcard--card_false {
+  
+}

package/dist/statcard.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface StatcardVariants {
-
+  card?: boolean;
 }
 
-export declare const statcardRecipe: RecipeFn<{  }>;
+export declare const statcardRecipe: RecipeFn<{ card: { true: string; false: string } }>;