@crisp-ui-kit/crisp 0.2.0 → 0.7.0

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

@@ -0,0 +1,134 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WheelPicker = WheelPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const wheelpicker_recipe_1 = require("./wheelpicker.recipe");
+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.
+ */
+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 ((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) => {
+                            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: () => {
+                                    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/cjs/components/wheelpicker/wheelpicker.recipe.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wheelpickerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "wheelpicker",
+    base: `
+    position: relative; box-sizing: border-box; width: 100%; overflow: hidden;
+    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 {
+      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;
+    }
+
+    /* 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: ${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}; }
+
+    /* 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 ${tokens_1.contract.strokeFocusRing}; outline-offset: -2px;
+      border-radius: ${tokens_1.contract.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: [],
+});
+exports.wheelpickerRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+    meta: { medium: { height: "220px", itemHeight: "44px" } },
+});
+exports.default = config;

package/dist/cjs/core/cx.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cx = void 0;
+var clsx_1 = require("clsx");
+Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return __importDefault(clsx_1).default; } });

package/dist/cjs/core/define.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineRecipe = defineRecipe;
+function defineRecipe(config) {
+    return config;
+}

package/dist/cjs/core/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveRecipe = exports.Primitive = exports.defineRecipe = exports.cx = void 0;
+var cx_1 = require("./cx");
+Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
+var define_1 = require("./define");
+Object.defineProperty(exports, "defineRecipe", { enumerable: true, get: function () { return define_1.defineRecipe; } });
+var primitive_1 = require("./primitive");
+Object.defineProperty(exports, "Primitive", { enumerable: true, get: function () { return primitive_1.Primitive; } });
+var resolve_1 = require("./resolve");
+Object.defineProperty(exports, "resolveRecipe", { enumerable: true, get: function () { return resolve_1.resolveRecipe; } });

package/dist/cjs/core/primitive.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primitive = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_slot_1 = require("@radix-ui/react-slot");
+const React = __importStar(require("react"));
+const NODES = ["button", "div", "span", "a", "input", "p"];
+exports.Primitive = NODES.reduce((acc, node) => {
+    const Component = React.forwardRef(({ asChild, ...props }, ref) => {
+        const Comp = asChild ? react_slot_1.Slot : node;
+        return (0, jsx_runtime_1.jsx)(Comp, { ref: ref, ...props });
+    });
+    Component.displayName = `Primitive.${node}`;
+    acc[node] = Component;
+    return acc;
+}, {});

package/dist/cjs/core/resolve.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveRecipe = resolveRecipe;
+const cx_1 = require("./cx");
+const falsyToString = (v) => typeof v === "boolean" ? `${v}` : v === 0 ? "0" : v;
+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 (0, cx_1.cx)(classes, props?.class, props?.className);
+    };
+}

package/dist/cjs/core/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/index.js

@@ -0,0 +1,92 @@
+"use strict";
+// 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";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// primitives (components/)
+__exportStar(require("./components/accordion"), exports);
+__exportStar(require("./components/avatar"), exports);
+__exportStar(require("./components/avatargroup"), exports);
+__exportStar(require("./components/badge"), exports);
+__exportStar(require("./components/barchart"), exports);
+__exportStar(require("./components/breadcrumb"), exports);
+__exportStar(require("./components/bulkbar"), exports);
+__exportStar(require("./components/button"), exports);
+__exportStar(require("./components/callout"), exports);
+__exportStar(require("./components/card"), exports);
+__exportStar(require("./components/checkbox"), exports);
+__exportStar(require("./components/columncalc"), exports);
+__exportStar(require("./components/contextmenu"), exports);
+__exportStar(require("./components/datatable"), exports);
+__exportStar(require("./components/datepicker"), exports);
+__exportStar(require("./components/datepickerfield"), exports);
+__exportStar(require("./components/dialog"), exports);
+__exportStar(require("./components/divider"), exports);
+__exportStar(require("./components/donutchart"), exports);
+__exportStar(require("./components/drawer"), exports);
+__exportStar(require("./components/emptystate"), exports);
+__exportStar(require("./components/formfield"), exports);
+__exportStar(require("./components/input"), exports);
+__exportStar(require("./components/kbd"), exports);
+__exportStar(require("./components/linechart"), exports);
+__exportStar(require("./components/menu"), exports);
+__exportStar(require("./components/multiselect"), exports);
+__exportStar(require("./components/popover"), exports);
+__exportStar(require("./components/progress"), exports);
+__exportStar(require("./components/radiogroup"), exports);
+__exportStar(require("./components/resizablepanel"), exports);
+__exportStar(require("./components/segmented"), exports);
+__exportStar(require("./components/select"), exports);
+__exportStar(require("./components/skeleton"), exports);
+__exportStar(require("./components/spinner"), exports);
+__exportStar(require("./components/stagebar"), exports);
+__exportStar(require("./components/statcard"), exports);
+__exportStar(require("./components/switch"), exports);
+__exportStar(require("./components/table"), exports);
+__exportStar(require("./components/tabletoolbar"), exports);
+__exportStar(require("./components/tabs"), exports);
+__exportStar(require("./components/textarea"), exports);
+__exportStar(require("./components/toast"), exports);
+__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
+// 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);
+__exportStar(require("./product/authshell"), exports);
+__exportStar(require("./product/board"), exports);
+__exportStar(require("./product/command"), exports);
+__exportStar(require("./product/entitycard"), exports);
+__exportStar(require("./product/flowcanvas"), exports);
+__exportStar(require("./product/inbox"), exports);
+__exportStar(require("./product/listpage"), exports);
+__exportStar(require("./product/navitem"), exports);
+__exportStar(require("./product/onboarding"), exports);
+__exportStar(require("./product/recordpage"), exports);
+__exportStar(require("./product/recordpanel"), exports);
+__exportStar(require("./product/recordstable"), exports);
+__exportStar(require("./product/richtext"), exports);
+__exportStar(require("./product/settingssection"), exports);
+__exportStar(require("./product/settingsshell"), exports);
+__exportStar(require("./product/sidebar"), exports);
+__exportStar(require("./product/tasklist"), exports);
+__exportStar(require("./product/trialbanner"), exports);
+__exportStar(require("./product/viewtoggle"), exports);
+// design tokens + recipe core (for building custom components)
+__exportStar(require("./tokens"), exports);

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

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

@@ -0,0 +1,104 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppShell = AppShell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const appshell_recipe_1 = require("./appshell.recipe");
+/**
+ * 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.
+ */
+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 ((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: {
+                    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, { size: 15, strokeWidth: 1.75 }) })), children] })] }));
+}
+AppShell.displayName = "AppShell";

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appshellRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (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; 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: ${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}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.appshellRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+    meta: { sidebar: { defaultWidth: "275px" } },
+});
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appshellRecipe = exports.AppShell = void 0;
+var appshell_1 = require("./appshell");
+Object.defineProperty(exports, "AppShell", { enumerable: true, get: function () { return appshell_1.AppShell; } });
+var appshell_recipe_1 = require("./appshell.recipe");
+Object.defineProperty(exports, "appshellRecipe", { enumerable: true, get: function () { return appshell_recipe_1.appshellRecipe; } });

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthShell = AuthShell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const authshell_recipe_1 = require("./authshell.recipe");
+/**
+ * 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.
+ */
+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 ((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 })] }));
+}
+AuthShell.displayName = "AuthShell";