@crisp-ui-kit/crisp 0.1.0

package/dist/types/product/recordstable/recordstable.d.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+type IconType = React.ComponentType<{
+    size?: number;
+    strokeWidth?: number;
+}>;
+export type ColumnType = "entity" | "text" | "tags" | "number" | "url" | "date" | "currency" | "status" | "reference";
+export type StatusOption = {
+    value: string;
+    label: string;
+    color: string;
+};
+export type ReferenceOption = {
+    value: string;
+    label: string;
+    avatar?: string;
+};
+export type Column = {
+    key: string;
+    label: string;
+    type?: ColumnType;
+    icon?: IconType;
+    width?: number;
+    /** Currency symbol for `currency` columns (default "$"). */
+    symbol?: string;
+    /** Choices for a `status` column (each a coloured dot + label). */
+    options?: StatusOption[];
+    /** Choices for a `reference` column (a searchable record picker). */
+    refOptions?: ReferenceOption[];
+};
+export type EntityValue = {
+    name: string;
+    avatar?: string;
+};
+export type Row = {
+    id: string;
+} & Record<string, any>;
+export type RecordsTableProps = {
+    columns?: Column[];
+    rows?: Row[];
+    /** Controlled selection — omit for self-managed selection state. */
+    selectedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+    /** Show the toolbar's "New" button (hide it when the page provides its own). */
+    showNew?: boolean;
+    /** Called when a row's open (↗) button is pressed — opens a record panel. */
+    onOpenRecord?: (row: Row) => void;
+    /** Called when a row's entity name is clicked — navigate to its full record page. */
+    onOpenRecordPage?: (row: Row) => void;
+    className?: string;
+};
+export declare function tagTone(t: string): string;
+/**
+ * Attio-style record grid — fully featured. Toolbar (search / sort status /
+ * count / New), sticky checkbox + entity columns, 36px rows, typed cells,
+ * click-to-sort headers, column resize by dragging a header edge, inline cell
+ * editing (double-click a text/number/url/date cell), add-row and add-column,
+ * and a floating bulk-action bar (delete / deselect) when rows are selected.
+ * Selection can be controlled via `selectedIds`/`onSelectionChange`.
+ */
+export declare function RecordsTable({ columns: columnsProp, rows: rowsProp, selectedIds, onSelectionChange, showNew, onOpenRecord, onOpenRecordPage, className, }: RecordsTableProps): React.JSX.Element;
+export declare const defaultColumns: Column[];
+export declare const defaultRows: Row[];
+export {};

package/dist/types/product/recordstable/recordstable.recipe.d.ts

@@ -0,0 +1,11 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const recordstableRecipe: import("../..").RecipeFn<{}> & {
+    config: import("../..").RecipeConfig<{}>;
+    meta: {
+        row: {
+            height: string;
+            gridLine: string;
+        };
+    };
+};
+export default config;

package/dist/types/product/richtext/index.d.ts

@@ -0,0 +1,2 @@
+export { RichTextEditor, type RichTextEditorProps, type RichTextValue, } from "./richtext";
+export { richtextRecipe } from "./richtext.recipe";

package/dist/types/product/richtext/richtext.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export type RichTextValue = {
+    title: string;
+    html: string;
+};
+export type RichTextEditorProps = {
+    defaultTitle?: string;
+    /** Initial body HTML. */
+    defaultHtml?: string;
+    titlePlaceholder?: string;
+    placeholder?: string;
+    onChange?: (value: RichTextValue) => void;
+    className?: string;
+};
+/**
+ * A block rich-text editor — measured from Attio's Notes editor. A large title,
+ * a prose body (headings, lists, quote, marks, links), and a floating toolbar
+ * that appears over a text selection. Built on contentEditable, dependency-free.
+ * Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.
+ */
+export declare function RichTextEditor({ defaultTitle, defaultHtml, titlePlaceholder, placeholder, onChange, className, }: RichTextEditorProps): React.JSX.Element;
+export declare namespace RichTextEditor {
+    var displayName: string;
+}

package/dist/types/product/richtext/richtext.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const richtextRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/product/settingssection/index.d.ts

@@ -0,0 +1,2 @@
+export { SettingsSection, type SettingsSectionProps, } from "./settingssection";
+export { settingssectionRecipe } from "./settingssection.recipe";

package/dist/types/product/settingssection/settingssection.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+export type SettingsSectionProps = {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Trailing action on the title row (e.g. a Button). */
+    action?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+};
+/**
+ * A settings section — measured from Attio's Settings pages. A title + optional
+ * subtitle and trailing action, then a gapped stack of rows (pair with
+ * FormField). Compose several inside a settings content pane.
+ */
+export declare function SettingsSection({ title, description, action, children, className, }: SettingsSectionProps): React.JSX.Element;
+export declare namespace SettingsSection {
+    var displayName: string;
+}

package/dist/types/product/settingssection/settingssection.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const settingssectionRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/product/settingsshell/index.d.ts

@@ -0,0 +1,2 @@
+export { type SettingsNavGroup, type SettingsNavItem, SettingsShell, type SettingsShellProps, } from "./settingsshell";
+export { settingsshellRecipe } from "./settingsshell.recipe";

package/dist/types/product/settingsshell/settingsshell.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+export type SettingsNavItem = {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+};
+export type SettingsNavGroup = {
+    /** Group header (omit for an ungrouped block). */
+    label?: React.ReactNode;
+    items: SettingsNavItem[];
+};
+export type SettingsShellProps = {
+    /** Back-header title (default "Settings"). */
+    title?: React.ReactNode;
+    onBack?: () => void;
+    groups: SettingsNavGroup[];
+    activeItem: string;
+    onSelect: (id: string) => void;
+    /** Show the "Search settings…" filter (default true). */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** The content pane. */
+    children: React.ReactNode;
+    className?: string;
+};
+/**
+ * The Settings layout — measured from Attio's Settings. A left nav (back header,
+ * search, grouped items) beside a scrolling content pane. The search filters the
+ * nav by label. Fills the height its container gives it.
+ */
+export declare function SettingsShell({ title, onBack, groups, activeItem, onSelect, searchable, searchPlaceholder, children, className, }: SettingsShellProps): React.JSX.Element;
+export declare namespace SettingsShell {
+    var displayName: string;
+}

package/dist/types/product/settingsshell/settingsshell.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const settingsshellRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/product/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { Sidebar, type SidebarProps } from "./sidebar";
+export { sidebarRecipe } from "./sidebar.recipe";

package/dist/types/product/sidebar/sidebar.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type SidebarProps = React.ComponentPropsWithoutRef<"nav"> & {
+    asChild?: boolean;
+    /** Called when the collapse-panel button in the header is pressed. */
+    onToggleCollapse?: () => void;
+};
+export declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    asChild?: boolean;
+    /** Called when the collapse-panel button in the header is pressed. */
+    onToggleCollapse?: () => void;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/types/product/sidebar/sidebar.recipe.d.ts

@@ -0,0 +1,10 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const sidebarRecipe: import("../..").RecipeFn<{}> & {
+    config: import("../..").RecipeConfig<{}>;
+    meta: {
+        container: {
+            width: string;
+        };
+    };
+};
+export default config;

package/dist/types/product/tasklist/index.d.ts

@@ -0,0 +1,2 @@
+export { type Task, type TaskGroup, TaskList, type TaskListProps, } from "./tasklist";
+export { tasklistRecipe } from "./tasklist.recipe";

package/dist/types/product/tasklist/tasklist.d.ts

@@ -0,0 +1,36 @@
+import type * as React from "react";
+export type Task = {
+    id: string;
+    title: React.ReactNode;
+    done?: boolean;
+    /** Due-date label, e.g. "Due 5 days ago". */
+    due?: React.ReactNode;
+    /** Render the due date in red (overdue). */
+    overdue?: boolean;
+    /** Trailing meta (record chip, assignee avatar …), right-aligned. */
+    meta?: React.ReactNode;
+};
+export type TaskGroup = {
+    label: React.ReactNode;
+    tasks: Task[];
+};
+export type TaskListProps = {
+    /** Flat list of tasks (use `groups` for grouped sections). */
+    tasks?: Task[];
+    /** Grouped sections, each with a header + count. */
+    groups?: TaskGroup[];
+    /** Toggle handler (checkbox). */
+    onToggle?: (id: string, done: boolean) => void;
+    /** Empty-state text when there are no tasks. */
+    emptyLabel?: React.ReactNode;
+    className?: string;
+};
+/**
+ * A task list — measured from Attio's Tasks page. Optional group headers with a
+ * count, then rows of a round complete-checkbox + title + trailing meta.
+ * Completed rows strike through; overdue dates go red.
+ */
+export declare function TaskList({ tasks, groups, onToggle, emptyLabel, className, }: TaskListProps): React.JSX.Element;
+export declare namespace TaskList {
+    var displayName: string;
+}

package/dist/types/product/tasklist/tasklist.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const tasklistRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/product/trialbanner/index.d.ts

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

package/dist/types/product/trialbanner/trialbanner.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+export type TrialBannerProps = {
+    /** Leading icon. */
+    icon?: React.ReactNode;
+    /** The message (children). */
+    children: React.ReactNode;
+    /** Action label on the right; renders a small pill button (fires onAction). */
+    action?: React.ReactNode;
+    onAction?: () => void;
+    /** Tints the icon (default neutral). */
+    tone?: "neutral" | "warning" | "danger";
+    className?: string;
+};
+/**
+ * A compact trial / upgrade banner — measured from Attio's sidebar footer.
+ * Icon + message + an optional small action pill (soft-glow outlined button).
+ */
+export declare function TrialBanner({ icon, children, action, onAction, tone, className, }: TrialBannerProps): React.JSX.Element;
+export declare namespace TrialBanner {
+    var displayName: string;
+}

package/dist/types/product/trialbanner/trialbanner.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const trialbannerRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/product/viewtoggle/index.d.ts

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

package/dist/types/product/viewtoggle/viewtoggle.d.ts

@@ -0,0 +1,24 @@
+import type * as React from "react";
+export type ViewToggleOption<T extends string = string> = {
+    value: T;
+    /** Icon shown in the tile. */
+    icon: React.ReactNode;
+    /** Accessible label. */
+    label: string;
+};
+export type ViewToggleProps<T extends string = string> = {
+    options: ViewToggleOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * 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 declare function ViewToggle<T extends string = string>({ options, value, onChange, "aria-label": ariaLabel, className, }: ViewToggleProps<T>): React.JSX.Element;
+export declare namespace ViewToggle {
+    var displayName: string;
+}

package/dist/types/product/viewtoggle/viewtoggle.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const viewtoggleRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/tokens/contract.d.ts

@@ -0,0 +1,27 @@
+import type { MapLeafNodes } from "../core/types";
+export type Theme = "light" | "dark";
+export declare const contract: MapLeafNodes<{
+    bgBrandSolid: "brand600";
+    bgBrandSolidPressed: "brand700";
+    fgOnBrand: "white";
+    bgSurface: "gray00";
+    bgRaised: "gray50";
+    borderDefault: "line200";
+    borderSubtle: "line100";
+    fgPrimary: "gray900";
+    fgMuted: "gray400";
+    bgDanger: "red600";
+    bgSuccess: "green600";
+    bgWarning: "amber600";
+    bgOrange: "orange600";
+    bgCyan: "cyan600";
+    bgPurple: "purple600";
+    bgSidebar: "graySidebar";
+}, `var(--${string})`> & {
+    space: Record<"0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "8" | "px", `var(--${string})`>;
+    radius: Record<"2xl" | "full" | "lg" | "md" | "sm" | "xl", `var(--${string})`>;
+    size: Record<"header" | "icon" | "row" | "tableRow", `var(--${string})`>;
+    font: Record<"sans", `var(--${string})`>;
+    text: Record<"lg" | "md" | "sm" | "xl" | "xs", `var(--${string})`>;
+    weight: Record<"medium" | "regular" | "semibold", `var(--${string})`>;
+};

package/dist/types/tokens/index.d.ts

@@ -0,0 +1,5 @@
+export { contract, type Theme } from "./contract";
+export { palette } from "./palette";
+export { type FontKey, font, type RadiusKey, radius, type SizeKey, type SpaceKey, size, space, type TextKey, text, type WeightKey, weight, } from "./scale";
+export type { Tokens } from "./semantic";
+export { semantic } from "./semantic";

package/dist/types/tokens/palette.d.ts

@@ -0,0 +1,67 @@
+export declare const palette: {
+    readonly gray00: {
+        readonly light: "#ffffff";
+        readonly dark: "#0a0a0a";
+    };
+    readonly white: {
+        readonly light: "#ffffff";
+        readonly dark: "#ffffff";
+    };
+    readonly gray50: {
+        readonly light: "#f4f4f5";
+        readonly dark: "#101112";
+    };
+    readonly gray900: {
+        readonly light: "#101112";
+        readonly dark: "#f5f5f5";
+    };
+    readonly line200: {
+        readonly light: "#e4e4e7";
+        readonly dark: "#212224";
+    };
+    readonly line100: {
+        readonly light: "#eeeff1";
+        readonly dark: "#1c1d1f";
+    };
+    readonly gray400: {
+        readonly light: "#71717a";
+        readonly dark: "#9a9aa2";
+    };
+    readonly brand600: {
+        readonly light: "#266df0";
+        readonly dark: "#266df0";
+    };
+    readonly brand700: {
+        readonly light: "#1f5fd6";
+        readonly dark: "#1f5fd6";
+    };
+    readonly red600: {
+        readonly light: "#e5484d";
+        readonly dark: "#ff5a5f";
+    };
+    readonly green600: {
+        readonly light: "#1f9d57";
+        readonly dark: "#2ea968";
+    };
+    readonly amber600: {
+        readonly light: "#b5730f";
+        readonly dark: "#e0982a";
+    };
+    readonly orange600: {
+        readonly light: "#f97514";
+        readonly dark: "#f97514";
+    };
+    readonly cyan600: {
+        readonly light: "#00b9eb";
+        readonly dark: "#00b9eb";
+    };
+    readonly purple600: {
+        readonly light: "#9b69ff";
+        readonly dark: "#9b69ff";
+    };
+    readonly graySidebar: {
+        readonly light: "#fbfbfb";
+        readonly dark: "#0e0f10";
+    };
+};
+export type PaletteKey = keyof typeof palette;

package/dist/types/tokens/scale.d.ts

@@ -0,0 +1,48 @@
+export declare const space: {
+    readonly px: "1px";
+    readonly "0.5": "2px";
+    readonly "1": "4px";
+    readonly "1.5": "6px";
+    readonly "2": "8px";
+    readonly "2.5": "10px";
+    readonly "3": "12px";
+    readonly "4": "16px";
+    readonly "5": "20px";
+    readonly "6": "24px";
+    readonly "8": "32px";
+};
+export declare const radius: {
+    readonly sm: "6px";
+    readonly md: "8px";
+    readonly lg: "9px";
+    readonly xl: "12px";
+    readonly "2xl": "16px";
+    readonly full: "999px";
+};
+export declare const size: {
+    readonly icon: "16px";
+    readonly row: "28px";
+    readonly tableRow: "36px";
+    readonly header: "48px";
+};
+export declare const font: {
+    readonly sans: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif';
+};
+export declare const text: {
+    readonly xs: "11px";
+    readonly sm: "12px";
+    readonly md: "13px";
+    readonly lg: "14px";
+    readonly xl: "16px";
+};
+export declare const weight: {
+    readonly regular: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+};
+export type SpaceKey = keyof typeof space;
+export type RadiusKey = keyof typeof radius;
+export type SizeKey = keyof typeof size;
+export type FontKey = keyof typeof font;
+export type TextKey = keyof typeof text;
+export type WeightKey = keyof typeof weight;

package/dist/types/tokens/semantic.d.ts

@@ -0,0 +1,19 @@
+export declare const semantic: {
+    bgBrandSolid: "brand600";
+    bgBrandSolidPressed: "brand700";
+    fgOnBrand: "white";
+    bgSurface: "gray00";
+    bgRaised: "gray50";
+    borderDefault: "line200";
+    borderSubtle: "line100";
+    fgPrimary: "gray900";
+    fgMuted: "gray400";
+    bgDanger: "red600";
+    bgSuccess: "green600";
+    bgWarning: "amber600";
+    bgOrange: "orange600";
+    bgCyan: "cyan600";
+    bgPurple: "purple600";
+    bgSidebar: "graySidebar";
+};
+export type Tokens = typeof semantic;

package/dist/viewtoggle.css

@@ -0,0 +1,13 @@
+.viewtoggle {
+  display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; padding: 2px;
+    border-radius: var(--radius-lg); background: color-mix(in srgb, var(--fg-primary) 5%, transparent);
+    font-family: var(--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: var(--radius-md); background: none; color: var(--fg-muted);
+      cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
+    & .viewtoggle-tile:hover { color: var(--fg-primary); }
+    & .viewtoggle-tile[data-active] { background: var(--bg-surface); color: var(--fg-primary);
+      box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); }
+    & .viewtoggle-tile:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
+}

package/dist/viewtoggle.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface ViewtoggleVariants {
+
+}
+
+export declare const viewtoggleRecipe: RecipeFn<{  }>;

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@crisp-ui-kit/crisp",
+  "version": "0.1.0",
+  "description": "A lean React design system, measured pixel-for-pixel from Attio.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-moon/crisp.git"
+  },
+  "homepage": "https://github.com/your-moon/crisp#readme",
+  "keywords": [
+    "react",
+    "design-system",
+    "components",
+    "ui",
+    "ui-kit",
+    "attio",
+    "tokens"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build:css": "bun run build.mjs",
+    "build:js": "bun build ./index.ts --outdir dist --format esm --packages external",
+    "build:types": "tsc -p tsconfig.build.json",
+    "build": "bun run build:css && bun run build:js && bun run build:types",
+    "prepublishOnly": "bun run build",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check .",
+    "test": "bun test",
+    "spec": "bun build/spec-check.mjs"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "^1.1.5",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@zag-js/combobox": "^1.43.3",
+    "@zag-js/dialog": "^1.43.3",
+    "@zag-js/react": "^1.43.3",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.34.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.10",
+    "@happy-dom/global-registrator": "^20.11.6",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.6",
+    "@types/bun": "^1.4.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "happy-dom": "^20.11.6",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "^7.0.2"
+  }
+}