@crisp-ui-kit/crisp 0.2.0 → 0.7.0

package/dist/esm/components/tooltip/tooltip.js

@@ -0,0 +1,59 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { tooltipRecipe } from "./tooltip.recipe.js";
+/**
+ * A hover/focus tooltip — a dark hint chip measured from Attio. Wraps its
+ * trigger in an inline element, shows after `delay` on pointer-enter / focus,
+ * and hides on leave / blur / Escape. The bubble is portaled and positioned
+ * above the trigger (flipping below near the top edge).
+ */
+export function Tooltip({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, }) {
+    const triggerRef = React.useRef(null);
+    const timer = React.useRef(undefined);
+    const [pos, setPos] = React.useState(null);
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? internalOpen;
+    const setOpen = React.useCallback((next) => {
+        if (openProp === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    // Measuring is separate from opening, so a controlled consumer that flips
+    // `open` gets placed against the trigger exactly as a hover would.
+    React.useLayoutEffect(() => {
+        if (!open) {
+            setPos(null);
+            return;
+        }
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const r = el.getBoundingClientRect();
+        const below = side === "bottom" || r.top < 48;
+        setPos({
+            left: Math.round(r.left + r.width / 2),
+            top: Math.round(below ? r.bottom + 6 : r.top - 6),
+            below,
+        });
+    }, [open, side]);
+    const openAfterDelay = () => {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(true), delay);
+    };
+    const close = () => {
+        clearTimeout(timer.current);
+        setOpen(false);
+    };
+    React.useEffect(() => () => clearTimeout(timer.current), []);
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: triggerRef, style: { display: "inline-flex" }, onPointerEnter: openAfterDelay, onPointerLeave: close, onFocusCapture: openAfterDelay, onBlurCapture: close, onKeyDown: (e) => e.key === "Escape" && close(), children: children }), open &&
+                pos != null &&
+                createPortal(_jsx("div", { role: "tooltip", className: tooltipRecipe(), style: {
+                        left: pos.left,
+                        top: pos.top,
+                        transform: pos.below
+                            ? "translate(-50%, 0)"
+                            : "translate(-50%, -100%)",
+                    }, children: content }), document.body)] }));
+}
+Tooltip.displayName = "Tooltip";

package/dist/esm/components/tooltip/tooltip.recipe.js

@@ -0,0 +1,13 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The floating bubble for a Tooltip — Attio's dark hint chip. Applied to the
+// portaled bubble itself (not a wrapper), so its styles survive the portal.
+const config = defineRecipe({
+    name: "tooltip",
+    base: `position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: ${c.space["1"]} ${c.space["2"]}; border-radius: ${c.radius.sm}; background: #20242c; color: #fff; font-family: ${c.font.sans}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease; @starting-style { opacity: 0; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const tooltipRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/components/wheelpicker/index.js

@@ -0,0 +1,2 @@
+export { WheelPicker, } from "./wheelpicker.js";
+export { wheelpickerRecipe } from "./wheelpicker.recipe.js";

package/dist/esm/components/wheelpicker/wheelpicker.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { wheelpickerRecipe } from "./wheelpicker.recipe.js";
+const ITEM_HEIGHT = { small: 36, medium: 44 };
+/**
+ * A scroll-snapping wheel, measured from seed-design. Each column snaps its
+ * rows to a centred selection band; the momentum is the browser's own, because
+ * the column is an ordinary scroll container with `scroll-snap-type: y
+ * mandatory` rather than a JavaScript animation.
+ *
+ * Keyboard: each column is a `listbox` that takes focus, with ↑/↓ moving the
+ * selection, Home/End jumping to the ends, and a visible ring on the selected
+ * row for keyboard focus only.
+ */
+export function WheelPicker({ columns, value: valueProp, defaultValue, onValueChange, size = "medium", className, ...rest }) {
+    const firstOf = React.useCallback(() => Object.fromEntries(columns.map((c) => [c.key, c.options[0]?.value ?? ""])), [columns]);
+    const [internal, setInternal] = React.useState(() => ({ ...firstOf(), ...defaultValue }));
+    const value = valueProp ?? internal;
+    const itemHeight = ITEM_HEIGHT[size];
+    // the listbox owns focus and points at the active row with
+    // aria-activedescendant; options are not individually tabbable, which is the
+    // ARIA listbox pattern and what lets ↑/↓ work without focus leaving the column
+    const baseId = React.useId();
+    const optionId = (colKey, value) => `${baseId}-${colKey}-${value}`;
+    const refs = React.useRef(new Map());
+    // set while a programmatic scroll is settling, so the scroll handler does not
+    // read a half-finished position and report a selection nobody picked
+    const settling = React.useRef(new Set());
+    const commit = (key, next) => {
+        if (value[key] === next)
+            return;
+        const merged = { ...value, [key]: next };
+        if (valueProp === undefined)
+            setInternal(merged);
+        onValueChange?.(merged);
+    };
+    const scrollTo = React.useCallback((key, index, behavior) => {
+        const el = refs.current.get(key);
+        if (!el || index < 0)
+            return;
+        settling.current.add(key);
+        el.scrollTo({ top: index * itemHeight, behavior });
+        // a smooth scroll has no completion event; one frame past the animation
+        // is enough for the snap to land
+        setTimeout(() => settling.current.delete(key), behavior === "smooth" ? 300 : 0);
+    }, [itemHeight]);
+    // keep each column parked on its selected row, including on first paint
+    React.useEffect(() => {
+        for (const col of columns) {
+            const i = col.options.findIndex((o) => o.value === value[col.key]);
+            scrollTo(col.key, i, "auto");
+        }
+    }, [columns, value, scrollTo]);
+    const onScroll = (col) => {
+        if (settling.current.has(col.key))
+            return;
+        const el = refs.current.get(col.key);
+        if (!el)
+            return;
+        const i = Math.round(el.scrollTop / itemHeight);
+        const opt = col.options[Math.max(0, Math.min(i, col.options.length - 1))];
+        if (opt)
+            commit(col.key, opt.value);
+    };
+    const onKeyDown = (e, col) => {
+        const i = col.options.findIndex((o) => o.value === value[col.key]);
+        const go = (next) => {
+            e.preventDefault();
+            const clamped = Math.max(0, Math.min(next, col.options.length - 1));
+            const opt = col.options[clamped];
+            if (!opt)
+                return;
+            commit(col.key, opt.value);
+            scrollTo(col.key, clamped, "smooth");
+        };
+        if (e.key === "ArrowDown")
+            go(i + 1);
+        else if (e.key === "ArrowUp")
+            go(i - 1);
+        else if (e.key === "Home")
+            go(0);
+        else if (e.key === "End")
+            go(col.options.length - 1);
+    };
+    return (_jsxs("div", { className: wheelpickerRecipe({ size, className }), ...rest, children: [_jsx("div", { className: "wheelpicker-indicator", "aria-hidden": "true" }), _jsx("div", { className: "wheelpicker-fog", children: _jsx("div", { className: "wheelpicker-columns", children: columns.map((col) => (_jsx("div", { role: "listbox", "aria-label": col.label, "aria-activedescendant": optionId(col.key, value[col.key] ?? ""), tabIndex: 0, className: "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 (_jsx("div", { id: optionId(col.key, opt.value), role: "option", "aria-selected": selected, "data-selected": selected ? "" : undefined, className: "wheelpicker-item", onClick: () => {
+                                    commit(col.key, opt.value);
+                                    scrollTo(col.key, col.options.indexOf(opt), "smooth");
+                                }, children: opt.label }, opt.value));
+                        }) }, col.key))) }) })] }));
+}
+WheelPicker.displayName = "WheelPicker";

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

@@ -0,0 +1,92 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// seed-design's wheel picker, measured from @seed-design/css.
+//
+// The wheel physics are CSS, not JavaScript: each column is a scroll container
+// with `scroll-snap-type: y mandatory` and items that snap centred, so the
+// browser's own momentum and rubber-banding do the work. Half a viewport of
+// padding above and below is what lets the first and last item reach the
+// centre band.
+//
+//                    small    medium
+//   viewport height   180px    220px
+//   item height        36px     44px
+//   font / line       20/27    26/35
+//   fog max height    108px    132px
+//   centre offset      72px     88px   ((viewport - item) / 2)
+const config = defineRecipe({
+    name: "wheelpicker",
+    base: `
+    position: relative; box-sizing: border-box; width: 100%; overflow: hidden;
+    background: ${c.bgSurface}; font-family: ${c.font.sans};
+
+    /* the band the selected row sits in; behind the items, never hit-tested */
+    & .wheelpicker-indicator {
+      position: absolute; z-index: 0; inset-inline: ${c.space["4"]}; top: 50%;
+      transform: translateY(-50%); border-radius: ${c.radius.md};
+      background: ${c.bgNeutralWeak}; pointer-events: none;
+    }
+
+    /* 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 {
+      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)),
+        transparent 100%
+      );
+    }
+    & .wheelpicker-columns { display: flex; width: 100%; height: 100%; justify-content: center; }
+
+    & .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);
+    }
+    & .wheelpicker-column::-webkit-scrollbar { display: none; }
+
+    & .wheelpicker-item {
+      display: flex; align-items: center; justify-content: center;
+      scroll-snap-align: center; user-select: none; white-space: nowrap;
+      padding-inline: ${c.space["4"]}; color: ${c.fgDisabled};
+      background: none; border: none; font: inherit; cursor: pointer;
+    }
+    & .wheelpicker-item[data-selected] { color: ${c.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] {
+      outline: 2px solid ${c.strokeFocusRing}; outline-offset: -2px;
+      border-radius: ${c.radius.md};
+    }
+  `,
+    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; }
+      `,
+            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; }
+      `,
+        },
+    },
+    defaultVariants: { size: "medium" },
+    compoundVariants: [],
+});
+export const wheelpickerRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: { medium: { height: "220px", itemHeight: "44px" } },
+});
+export default config;

package/dist/esm/core/cx.js

@@ -0,0 +1 @@
+export { default as cx } from "clsx";

package/dist/esm/core/define.js

@@ -0,0 +1,3 @@
+export function defineRecipe(config) {
+    return config;
+}

package/dist/esm/core/index.js

@@ -0,0 +1,4 @@
+export { cx } from "./cx.js";
+export { defineRecipe } from "./define.js";
+export { Primitive } from "./primitive.js";
+export { resolveRecipe } from "./resolve.js";

package/dist/esm/core/primitive.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+const NODES = ["button", "div", "span", "a", "input", "p"];
+export const Primitive = NODES.reduce((acc, node) => {
+    const Component = React.forwardRef(({ asChild, ...props }, ref) => {
+        const Comp = asChild ? Slot : node;
+        return _jsx(Comp, { ref: ref, ...props });
+    });
+    Component.displayName = `Primitive.${node}`;
+    acc[node] = Component;
+    return acc;
+}, {});

package/dist/esm/core/resolve.js

@@ -0,0 +1,41 @@
+import { cx } from "./cx.js";
+const falsyToString = (v) => typeof v === "boolean" ? `${v}` : v === 0 ? "0" : v;
+export function resolveRecipe(config) {
+    const { name, base, variants, defaultVariants, compoundVariants } = config;
+    return (props) => {
+        const classes = [];
+        if (base)
+            classes.push(name);
+        if (variants) {
+            for (const variant of Object.keys(variants)) {
+                const variantProp = props?.[variant];
+                if (variantProp === null)
+                    continue;
+                const defaultProp = defaultVariants?.[variant];
+                const key = falsyToString(variantProp) ?? falsyToString(defaultProp);
+                if (key == null)
+                    continue;
+                if (variants[variant]?.[key] !== undefined) {
+                    classes.push(`${name}--${variant}_${key}`);
+                }
+            }
+            const withoutUndefined = props
+                ? Object.fromEntries(Object.entries(props).filter(([, v]) => v !== undefined))
+                : {};
+            const merged = {
+                ...defaultVariants,
+                ...withoutUndefined,
+            };
+            compoundVariants?.forEach((cv, i) => {
+                const matches = Object.entries(cv).every(([k, val]) => k === "css"
+                    ? true
+                    : Array.isArray(val)
+                        ? val.includes(merged[k])
+                        : merged[k] === val);
+                if (matches)
+                    classes.push(`${name}--compound_${i}`);
+            });
+        }
+        return cx(classes, props?.class, props?.className);
+    };
+}

package/dist/esm/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.js

@@ -0,0 +1,76 @@
+// Public API barrel for @crisp-ui-kit/crisp — generated: re-exports every
+// component, the design tokens, and the recipe core. Consumers also import the
+// stylesheet once:  import "@crisp-ui-kit/crisp/styles.css";
+// primitives (components/)
+export * from "./components/accordion/index.js";
+export * from "./components/avatar/index.js";
+export * from "./components/avatargroup/index.js";
+export * from "./components/badge/index.js";
+export * from "./components/barchart/index.js";
+export * from "./components/breadcrumb/index.js";
+export * from "./components/bulkbar/index.js";
+export * from "./components/button/index.js";
+export * from "./components/callout/index.js";
+export * from "./components/card/index.js";
+export * from "./components/checkbox/index.js";
+export * from "./components/columncalc/index.js";
+export * from "./components/contextmenu/index.js";
+export * from "./components/datatable/index.js";
+export * from "./components/datepicker/index.js";
+export * from "./components/datepickerfield/index.js";
+export * from "./components/dialog/index.js";
+export * from "./components/divider/index.js";
+export * from "./components/donutchart/index.js";
+export * from "./components/drawer/index.js";
+export * from "./components/emptystate/index.js";
+export * from "./components/formfield/index.js";
+export * from "./components/input/index.js";
+export * from "./components/kbd/index.js";
+export * from "./components/linechart/index.js";
+export * from "./components/menu/index.js";
+export * from "./components/multiselect/index.js";
+export * from "./components/popover/index.js";
+export * from "./components/progress/index.js";
+export * from "./components/radiogroup/index.js";
+export * from "./components/resizablepanel/index.js";
+export * from "./components/segmented/index.js";
+export * from "./components/select/index.js";
+export * from "./components/skeleton/index.js";
+export * from "./components/spinner/index.js";
+export * from "./components/stagebar/index.js";
+export * from "./components/statcard/index.js";
+export * from "./components/switch/index.js";
+export * from "./components/table/index.js";
+export * from "./components/tabletoolbar/index.js";
+export * from "./components/tabs/index.js";
+export * from "./components/textarea/index.js";
+export * from "./components/toast/index.js";
+export * from "./components/tooltip/index.js";
+export * from "./components/wheelpicker/index.js";
+export * from "./core/index.js";
+// product surfaces (product/) — faithful, pixel-measured rebuilds of specific
+// Attio 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.
+export * from "./product/appshell/index.js";
+export * from "./product/authshell/index.js";
+export * from "./product/board/index.js";
+export * from "./product/command/index.js";
+export * from "./product/entitycard/index.js";
+export * from "./product/flowcanvas/index.js";
+export * from "./product/inbox/index.js";
+export * from "./product/listpage/index.js";
+export * from "./product/navitem/index.js";
+export * from "./product/onboarding/index.js";
+export * from "./product/recordpage/index.js";
+export * from "./product/recordpanel/index.js";
+export * from "./product/recordstable/index.js";
+export * from "./product/richtext/index.js";
+export * from "./product/settingssection/index.js";
+export * from "./product/settingsshell/index.js";
+export * from "./product/sidebar/index.js";
+export * from "./product/tasklist/index.js";
+export * from "./product/trialbanner/index.js";
+export * from "./product/viewtoggle/index.js";
+// design tokens + recipe core (for building custom components)
+export * from "./tokens/index.js";

package/dist/esm/product/appshell/appshell.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelLeft } from "lucide-react";
+import * as React from "react";
+import { appshellRecipe } from "./appshell.recipe.js";
+/**
+ * App-shell layout with a collapsible + resizable sidebar, mirroring Attio's
+ * window: drag the sidebar's right edge to resize, press the sidebar's
+ * collapse button to slide it away (a floating button brings it back). The
+ * sidebar pane clips rather than squishing, so its content never reflows.
+ */
+export function AppShell({ sidebar, children, width: widthProp, defaultWidth = 275, onWidthChange, collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, minWidth = 220, maxWidth = 350, className, expandLabel = "Expand sidebar", ...rest }) {
+    const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);
+    const collapsed = collapsedProp ?? internalCollapsed;
+    const setCollapsed = (next) => {
+        onCollapsedChange?.(next);
+        if (collapsedProp === undefined)
+            setInternalCollapsed(next);
+    };
+    const [internalWidth, setInternalWidth] = React.useState(defaultWidth);
+    // Live width while the pointer is down, so a controlled shell still tracks
+    // the drag instead of waiting for the parent to echo each move back.
+    const [dragWidth, setDragWidth] = React.useState(null);
+    const width = dragWidth ?? widthProp ?? internalWidth;
+    const [dragging, setDragging] = React.useState(false);
+    const startResize = (e) => {
+        e.preventDefault();
+        const startX = e.clientX;
+        const startW = width;
+        // Attio only enters the drag state once the pointer has actually moved — a
+        // click on the handle is not a drag, so the blue bar must not flash on press.
+        let moved = false;
+        let last = startW;
+        const prevSelect = document.body.style.userSelect;
+        const prevCursor = document.body.style.cursor;
+        document.body.style.userSelect = "none";
+        document.body.style.cursor = "col-resize";
+        const onMove = (ev) => {
+            if (!moved) {
+                moved = true;
+                setDragging(true);
+            }
+            const w = Math.round(Math.min(maxWidth, Math.max(minWidth, startW + (ev.clientX - startX))));
+            setDragWidth(w);
+            last = w;
+        };
+        const onUp = () => {
+            setDragging(false);
+            setDragWidth(null);
+            if (last !== startW) {
+                onWidthChange?.(last);
+                if (widthProp === undefined)
+                    setInternalWidth(last);
+            }
+            document.body.style.userSelect = prevSelect;
+            document.body.style.cursor = prevCursor;
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+    };
+    const toggleCollapse = () => setCollapsed(!collapsed);
+    return (_jsxs("div", { className: appshellRecipe({ className }), ...rest, children: [_jsxs("div", { className: "appshell-side", "data-collapsed": collapsed ? "" : undefined, style: {
+                    width: collapsed ? 0 : width,
+                    transition: dragging ? "none" : "width .14s ease",
+                }, children: [_jsx("div", { className: "appshell-side-inner", style: { width }, children: sidebar(toggleCollapse) }), !collapsed && (_jsx("div", { className: "appshell-resize", "data-dragging": dragging ? "" : undefined, "aria-hidden": "true", onPointerDown: startResize }))] }), _jsxs("div", { className: "appshell-main", children: [collapsed && (_jsx("button", { type: "button", className: "appshell-expand", "aria-label": expandLabel, onClick: () => setCollapsed(false), children: _jsx(PanelLeft, { size: 15, strokeWidth: 1.75 }) })), children] })] }));
+}
+AppShell.displayName = "AppShell";

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

@@ -0,0 +1,27 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// App-shell layout: a collapsible + resizable sidebar pane next to a main pane,
+// mirroring how Attio's window works. The sidebar pane clips (never squishes)
+// when collapsing, and a drag handle on its edge resizes it.
+const config = defineRecipe({
+    name: "appshell",
+    base: `
+    display: flex; height: 100%; width: 100%; overflow: hidden; background: ${c.bgSurface}; font-family: ${c.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; right: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .appshell-resize::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: ${c.borderSubtle}; transition: background-color .16s, height .16s; }
+    & .appshell-resize:hover::after, & .appshell-resize[data-dragging]::after { width: 2px; background: ${c.bgBrandSolid}; }
+    & .appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
+    & .appshell-expand { position: absolute; top: ${c.space["2"]}; inset-inline-start: ${c.space["2"]}; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: ${c.size.row}; height: ${c.size.row}; padding: 0; border: none; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; background: ${c.bgSurface}; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .appshell-expand:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const appshellRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: { sidebar: { defaultWidth: "275px" } },
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { AppShell } from "./appshell.js";
+export { appshellRecipe } from "./appshell.recipe.js";

package/dist/esm/product/authshell/authshell.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { authshellRecipe } from "./authshell.recipe.js";
+/**
+ * The Attio welcome/auth layout (app.attio.com/welcome/*) — measured live.
+ * A centered page frame: an optional top progress bar, a logo, a two-pane
+ * card (the form + an optional product preview, hidden under 1200px), and
+ * a footer. Auth-surface Input/FormField/Button treatment (flatter fields,
+ * 36px buttons) applies automatically to those crisp components when
+ * rendered as `children` — see authshell.recipe.ts.
+ */
+export function AuthShell({ progress, logo, title, children, preview, footer, className, ...rest }) {
+    const hasProgress = typeof progress === "number";
+    const pct = hasProgress
+        ? Math.round(Math.max(0, Math.min(1, progress)) * 100)
+        : 0;
+    return (_jsxs("div", { className: authshellRecipe({ className }), ...rest, children: [hasProgress && (_jsx("div", { className: "authshell-progress", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx("div", { className: "authshell-progress-fill", style: { width: `${pct}%` } }) })), logo != null && _jsx("div", { className: "authshell-logo", children: logo }), _jsxs("div", { className: "authshell-card", children: [_jsx("div", { className: "authshell-pane", children: _jsxs("div", { className: "authshell-body", children: [title != null && _jsx("div", { className: "authshell-title", children: title }), _jsx("div", { className: "authshell-form", children: children })] }) }), preview != null && _jsx("div", { className: "authshell-preview", children: preview })] }), footer != null && _jsx("div", { className: "authshell-footer", children: footer })] }));
+}
+AuthShell.displayName = "AuthShell";

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

@@ -0,0 +1,64 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// Attio's welcome/auth surface (app.attio.com/welcome/*) — measured live,
+// 2026-09-15. A centered page frame holding a two-pane card: the form on the
+// left, an optional product preview on the right, with an optional top
+// progress bar and a footer under the card. Every value below is measured
+// from the live app, EXCEPT the 1200px preview-hiding breakpoint (called out
+// at the container query below) — Attio drops the pane in JS somewhere between a
+// measured 954px and 1393px viewport width, so 1200px is chosen, not measured.
+const config = defineRecipe({
+    name: "authshell",
+    base: `min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative;
+    background: ${c.bgSurface}; font-family: ${c.font.sans}; font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: ${c.borderDefault}; }
+    & .authshell-progress-fill { height: 2px; background: ${c.fgPrimary}; border-radius: 4px; transition: width .2s; }
+
+    & .authshell-logo { margin-top: ${c.space["8"]}; height: 24px; display: flex; align-items: center; }
+
+    & .authshell-card { margin-top: ${c.space["6"]}; display: flex; height: 692px; border-radius: 20px; border: 1px solid ${c.borderSubtle}; overflow: hidden; }
+
+    & .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: ${c.bgSubtle}; border-inline-start: 1px solid color-mix(in srgb, ${c.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, ${c.bgSubtle} 0%, transparent) 0%, ${c.bgSubtle} 100%); pointer-events: none; }
+
+    & .authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: ${c.space["8"]}; align-items: center; }
+
+    & .authshell-title { font-size: 20px; line-height: 24px; font-weight: ${c.weight.semibold}; letter-spacing: -0.4px; color: ${c.fgPrimary}; align-self: stretch; }
+
+    & .authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
+
+    & .authshell-footer { margin-top: ${c.space["6"]}; display: flex; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.sm}; line-height: 16px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .authshell-footer a { color: inherit; font-weight: ${c.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
+       crisp's Input / FormField / Button and gets the auth treatment for free. */
+    & .authshell-body .formfield-label { font-size: ${c.text.sm}; line-height: 16px; font-weight: ${c.weight.medium}; letter-spacing: -0.12px; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); padding-inline-start: ${c.space["1"]}; }
+    & .authshell-body .formfield { gap: ${c.space["1"]}; }
+    & .authshell-body .input { height: 34px; padding-inline: ${c.space["2.5"]}; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
+    & .authshell-body .input:focus { box-shadow: inset 0 0 0 1px ${c.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: ${c.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); }
+
+    /* Attio drops the preview pane in JS on narrow viewports (measured: two
+       panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
+       that bracket, not a measured value. A CONTAINER query, not a media
+       query: the shell is embedded in the docs inside an ~800px column, where
+       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; } }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const authshellRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { AuthShell } from "./authshell.js";
+export { authshellRecipe } from "./authshell.recipe.js";