@crisp-ui-kit/crisp 0.1.0 → 0.5.0

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

@@ -1,11 +1,96 @@
 import * as React from "react";
+import type { AvatarProps } from "../../components/avatar";
+type IconProps = {
+    className?: string;
+};
+/** A row in the main nav, or in a section's item list (Chats, etc). */
+export type SidebarNavItem = {
+    label: string;
+    /** 16px icon component, rendered `<Icon />`. */
+    icon: React.ComponentType<IconProps>;
+    active?: boolean;
+    trailing?: React.ReactNode;
+};
+/** A row in the Records section — rendered as a tinted 20px glyph avatar. */
+export type SidebarRecordItem = {
+    label: string;
+    tone: NonNullable<AvatarProps["tone"]>;
+    /** 12px glyph, rendered `<Glyph />` inside the tone avatar. */
+    glyph: React.ComponentType;
+};
+/** The workspace switcher at the top of the sidebar. */
+export type SidebarWorkspace = {
+    name: string;
+    /** Avatar initial/letter. */
+    avatarLabel: string;
+    avatarTone?: NonNullable<AvatarProps["tone"]>;
+};
+/** A collapsible section built from nav-item rows (main nav shape is used, less the divider). */
+export type SidebarSection = {
+    label: string;
+    items: SidebarNavItem[];
+};
+/** The Records section — same shape as SidebarSection but with glyph-avatar rows. */
+export type SidebarRecordsSection = {
+    label: string;
+    items: SidebarRecordItem[];
+};
+/** The Lists section — has no item list of its own, just the "+ New list" affordance. */
+export type SidebarListsSection = {
+    label: string;
+    newListLabel: string;
+};
+/** Footer copy: the onboarding pill, the invite row, and the trial banner. */
+export type SidebarFooter = {
+    gettingStartedLabel: string;
+    inviteLabel: string;
+    trialText: string;
+    trialActionLabel: string;
+};
 export type SidebarProps = React.ComponentPropsWithoutRef<"nav"> & {
     asChild?: boolean;
     /** Called when the collapse-panel button in the header is pressed. */
     onToggleCollapse?: () => void;
+    /** Workspace switcher content. Defaults to the measured Attio workspace. */
+    workspace?: SidebarWorkspace;
+    /** Main nav rows (Home, Tasks, …). Defaults to the measured Attio nav. */
+    items?: SidebarNavItem[];
+    /** The Records section (label + glyph-avatar rows). */
+    recordsSection?: SidebarRecordsSection;
+    /** The Lists section (label + "new list" affordance label). */
+    listsSection?: SidebarListsSection;
+    /** The Chats section (label + nav-item rows). */
+    chatsSection?: SidebarSection;
+    /** Footer copy (onboarding pill, invite row, trial banner). */
+    footer?: SidebarFooter;
 };
+/** The measured Attio workspace switcher — the default `workspace` prop. */
+export declare const ATTIO_SIDEBAR_WORKSPACE: SidebarWorkspace;
+/** The measured Attio main nav — the default `items` prop. */
+export declare const ATTIO_SIDEBAR_ITEMS: SidebarNavItem[];
+/** The measured Attio Records section — the default `recordsSection` prop. */
+export declare const ATTIO_SIDEBAR_RECORDS_SECTION: SidebarRecordsSection;
+/** The measured Attio Lists section — the default `listsSection` prop. */
+export declare const ATTIO_SIDEBAR_LISTS_SECTION: SidebarListsSection;
+/** The measured Attio Chats section — the default `chatsSection` prop. */
+export declare const ATTIO_SIDEBAR_CHATS_SECTION: SidebarSection;
+/** The measured Attio footer copy — the default `footer` prop. */
+export declare const ATTIO_SIDEBAR_FOOTER: SidebarFooter;
 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;
+    /** Workspace switcher content. Defaults to the measured Attio workspace. */
+    workspace?: SidebarWorkspace;
+    /** Main nav rows (Home, Tasks, …). Defaults to the measured Attio nav. */
+    items?: SidebarNavItem[];
+    /** The Records section (label + glyph-avatar rows). */
+    recordsSection?: SidebarRecordsSection;
+    /** The Lists section (label + "new list" affordance label). */
+    listsSection?: SidebarListsSection;
+    /** The Chats section (label + nav-item rows). */
+    chatsSection?: SidebarSection;
+    /** Footer copy (onboarding pill, invite row, trial banner). */
+    footer?: SidebarFooter;
 } & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -8,6 +8,18 @@ export declare const contract: MapLeafNodes<{
     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";

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

@@ -23,6 +23,54 @@ export declare const palette: {
         readonly light: "#eeeff1";
         readonly dark: "#1c1d1f";
     };
+    readonly ringNeutral: {
+        readonly light: "transparent";
+        readonly dark: "#212224";
+    };
+    readonly tileActive: {
+        readonly light: "#ffffff";
+        readonly dark: "#101112";
+    };
+    readonly tileActiveShadow: {
+        readonly light: "rgba(0,0,0,0.04)";
+        readonly dark: "rgba(0,0,0,0)";
+    };
+    readonly overlayFrost: {
+        readonly light: "#ffffff";
+        readonly dark: "#1c1d1f";
+    };
+    readonly shadowOverlay1: {
+        readonly light: "rgba(28,40,64,0.12)";
+        readonly dark: "rgba(0,0,0,0.48)";
+    };
+    readonly shadowOverlay2: {
+        readonly light: "rgba(28,40,64,0.16)";
+        readonly dark: "rgba(0,0,0,0.64)";
+    };
+    readonly shadowOverlay3: {
+        readonly light: "rgba(28,40,64,0.16)";
+        readonly dark: "rgba(0,0,0,0)";
+    };
+    readonly popoverBg: {
+        readonly light: "#ffffff";
+        readonly dark: "#17181a";
+    };
+    readonly ringPopover: {
+        readonly light: "rgba(0,0,0,0)";
+        readonly dark: "#212224";
+    };
+    readonly shadowPopover1: {
+        readonly light: "rgba(28,40,64,0.04)";
+        readonly dark: "rgba(0,0,0,0.16)";
+    };
+    readonly shadowPopover2: {
+        readonly light: "rgba(28,40,64,0.12)";
+        readonly dark: "rgba(0,0,0,0.24)";
+    };
+    readonly shadowPopover3: {
+        readonly light: "rgba(24,41,75,0.16)";
+        readonly dark: "rgba(0,0,0,0.32)";
+    };
     readonly gray400: {
         readonly light: "#71717a";
         readonly dark: "#9a9aa2";

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

@@ -6,6 +6,18 @@ export declare const semantic: {
     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";

package/dist/viewtoggle.css

@@ -7,7 +7,7 @@
       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[data-active] { background: var(--bg-tile-active); color: var(--fg-primary);
+      box-shadow: 0 1px 2px -1px var(--shadow-tile-active); }
     & .viewtoggle-tile:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.1.0",
+  "version": "0.5.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -21,15 +21,264 @@
     "attio",
     "tokens"
   ],
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/esm/index.js"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./base.css": "./dist/base.css",
+    "./accordion": {
+      "types": "./dist/types/components/accordion/index.d.ts",
+      "import": "./dist/esm/components/accordion/index.js"
+    },
+    "./avatar": {
+      "types": "./dist/types/components/avatar/index.d.ts",
+      "import": "./dist/esm/components/avatar/index.js"
+    },
+    "./avatargroup": {
+      "types": "./dist/types/components/avatargroup/index.d.ts",
+      "import": "./dist/esm/components/avatargroup/index.js"
+    },
+    "./badge": {
+      "types": "./dist/types/components/badge/index.d.ts",
+      "import": "./dist/esm/components/badge/index.js"
+    },
+    "./barchart": {
+      "types": "./dist/types/components/barchart/index.d.ts",
+      "import": "./dist/esm/components/barchart/index.js"
+    },
+    "./breadcrumb": {
+      "types": "./dist/types/components/breadcrumb/index.d.ts",
+      "import": "./dist/esm/components/breadcrumb/index.js"
+    },
+    "./bulkbar": {
+      "types": "./dist/types/components/bulkbar/index.d.ts",
+      "import": "./dist/esm/components/bulkbar/index.js"
+    },
+    "./button": {
+      "types": "./dist/types/components/button/index.d.ts",
+      "import": "./dist/esm/components/button/index.js"
+    },
+    "./callout": {
+      "types": "./dist/types/components/callout/index.d.ts",
+      "import": "./dist/esm/components/callout/index.js"
+    },
+    "./card": {
+      "types": "./dist/types/components/card/index.d.ts",
+      "import": "./dist/esm/components/card/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/types/components/checkbox/index.d.ts",
+      "import": "./dist/esm/components/checkbox/index.js"
+    },
+    "./contextmenu": {
+      "types": "./dist/types/components/contextmenu/index.d.ts",
+      "import": "./dist/esm/components/contextmenu/index.js"
+    },
+    "./datatable": {
+      "types": "./dist/types/components/datatable/index.d.ts",
+      "import": "./dist/esm/components/datatable/index.js"
+    },
+    "./datepicker": {
+      "types": "./dist/types/components/datepicker/index.d.ts",
+      "import": "./dist/esm/components/datepicker/index.js"
+    },
+    "./dialog": {
+      "types": "./dist/types/components/dialog/index.d.ts",
+      "import": "./dist/esm/components/dialog/index.js"
+    },
+    "./divider": {
+      "types": "./dist/types/components/divider/index.d.ts",
+      "import": "./dist/esm/components/divider/index.js"
+    },
+    "./donutchart": {
+      "types": "./dist/types/components/donutchart/index.d.ts",
+      "import": "./dist/esm/components/donutchart/index.js"
+    },
+    "./drawer": {
+      "types": "./dist/types/components/drawer/index.d.ts",
+      "import": "./dist/esm/components/drawer/index.js"
+    },
+    "./emptystate": {
+      "types": "./dist/types/components/emptystate/index.d.ts",
+      "import": "./dist/esm/components/emptystate/index.js"
+    },
+    "./formfield": {
+      "types": "./dist/types/components/formfield/index.d.ts",
+      "import": "./dist/esm/components/formfield/index.js"
+    },
+    "./input": {
+      "types": "./dist/types/components/input/index.d.ts",
+      "import": "./dist/esm/components/input/index.js"
+    },
+    "./kbd": {
+      "types": "./dist/types/components/kbd/index.d.ts",
+      "import": "./dist/esm/components/kbd/index.js"
+    },
+    "./linechart": {
+      "types": "./dist/types/components/linechart/index.d.ts",
+      "import": "./dist/esm/components/linechart/index.js"
+    },
+    "./menu": {
+      "types": "./dist/types/components/menu/index.d.ts",
+      "import": "./dist/esm/components/menu/index.js"
+    },
+    "./multiselect": {
+      "types": "./dist/types/components/multiselect/index.d.ts",
+      "import": "./dist/esm/components/multiselect/index.js"
+    },
+    "./popover": {
+      "types": "./dist/types/components/popover/index.d.ts",
+      "import": "./dist/esm/components/popover/index.js"
+    },
+    "./progress": {
+      "types": "./dist/types/components/progress/index.d.ts",
+      "import": "./dist/esm/components/progress/index.js"
+    },
+    "./radiogroup": {
+      "types": "./dist/types/components/radiogroup/index.d.ts",
+      "import": "./dist/esm/components/radiogroup/index.js"
+    },
+    "./segmented": {
+      "types": "./dist/types/components/segmented/index.d.ts",
+      "import": "./dist/esm/components/segmented/index.js"
+    },
+    "./select": {
+      "types": "./dist/types/components/select/index.d.ts",
+      "import": "./dist/esm/components/select/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/types/components/skeleton/index.d.ts",
+      "import": "./dist/esm/components/skeleton/index.js"
+    },
+    "./spinner": {
+      "types": "./dist/types/components/spinner/index.d.ts",
+      "import": "./dist/esm/components/spinner/index.js"
+    },
+    "./stagebar": {
+      "types": "./dist/types/components/stagebar/index.d.ts",
+      "import": "./dist/esm/components/stagebar/index.js"
+    },
+    "./statcard": {
+      "types": "./dist/types/components/statcard/index.d.ts",
+      "import": "./dist/esm/components/statcard/index.js"
+    },
+    "./switch": {
+      "types": "./dist/types/components/switch/index.d.ts",
+      "import": "./dist/esm/components/switch/index.js"
+    },
+    "./table": {
+      "types": "./dist/types/components/table/index.d.ts",
+      "import": "./dist/esm/components/table/index.js"
+    },
+    "./tabletoolbar": {
+      "types": "./dist/types/components/tabletoolbar/index.d.ts",
+      "import": "./dist/esm/components/tabletoolbar/index.js"
+    },
+    "./tabs": {
+      "types": "./dist/types/components/tabs/index.d.ts",
+      "import": "./dist/esm/components/tabs/index.js"
+    },
+    "./textarea": {
+      "types": "./dist/types/components/textarea/index.d.ts",
+      "import": "./dist/esm/components/textarea/index.js"
+    },
+    "./toast": {
+      "types": "./dist/types/components/toast/index.d.ts",
+      "import": "./dist/esm/components/toast/index.js"
+    },
+    "./tooltip": {
+      "types": "./dist/types/components/tooltip/index.d.ts",
+      "import": "./dist/esm/components/tooltip/index.js"
+    },
+    "./appshell": {
+      "types": "./dist/types/product/appshell/index.d.ts",
+      "import": "./dist/esm/product/appshell/index.js"
+    },
+    "./board": {
+      "types": "./dist/types/product/board/index.d.ts",
+      "import": "./dist/esm/product/board/index.js"
+    },
+    "./command": {
+      "types": "./dist/types/product/command/index.d.ts",
+      "import": "./dist/esm/product/command/index.js"
+    },
+    "./entitycard": {
+      "types": "./dist/types/product/entitycard/index.d.ts",
+      "import": "./dist/esm/product/entitycard/index.js"
+    },
+    "./flowcanvas": {
+      "types": "./dist/types/product/flowcanvas/index.d.ts",
+      "import": "./dist/esm/product/flowcanvas/index.js"
+    },
+    "./inbox": {
+      "types": "./dist/types/product/inbox/index.d.ts",
+      "import": "./dist/esm/product/inbox/index.js"
+    },
+    "./listpage": {
+      "types": "./dist/types/product/listpage/index.d.ts",
+      "import": "./dist/esm/product/listpage/index.js"
+    },
+    "./navitem": {
+      "types": "./dist/types/product/navitem/index.d.ts",
+      "import": "./dist/esm/product/navitem/index.js"
+    },
+    "./onboarding": {
+      "types": "./dist/types/product/onboarding/index.d.ts",
+      "import": "./dist/esm/product/onboarding/index.js"
+    },
+    "./recordpage": {
+      "types": "./dist/types/product/recordpage/index.d.ts",
+      "import": "./dist/esm/product/recordpage/index.js"
+    },
+    "./recordpanel": {
+      "types": "./dist/types/product/recordpanel/index.d.ts",
+      "import": "./dist/esm/product/recordpanel/index.js"
+    },
+    "./recordstable": {
+      "types": "./dist/types/product/recordstable/index.d.ts",
+      "import": "./dist/esm/product/recordstable/index.js"
+    },
+    "./richtext": {
+      "types": "./dist/types/product/richtext/index.d.ts",
+      "import": "./dist/esm/product/richtext/index.js"
+    },
+    "./settingssection": {
+      "types": "./dist/types/product/settingssection/index.d.ts",
+      "import": "./dist/esm/product/settingssection/index.js"
+    },
+    "./settingsshell": {
+      "types": "./dist/types/product/settingsshell/index.d.ts",
+      "import": "./dist/esm/product/settingsshell/index.js"
+    },
+    "./sidebar": {
+      "types": "./dist/types/product/sidebar/index.d.ts",
+      "import": "./dist/esm/product/sidebar/index.js"
+    },
+    "./tasklist": {
+      "types": "./dist/types/product/tasklist/index.d.ts",
+      "import": "./dist/esm/product/tasklist/index.js"
+    },
+    "./trialbanner": {
+      "types": "./dist/types/product/trialbanner/index.d.ts",
+      "import": "./dist/esm/product/trialbanner/index.js"
+    },
+    "./viewtoggle": {
+      "types": "./dist/types/product/viewtoggle/index.d.ts",
+      "import": "./dist/esm/product/viewtoggle/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/types/tokens/index.d.ts",
+      "import": "./dist/esm/tokens/index.js"
+    },
+    "./core": {
+      "types": "./dist/types/core/index.d.ts",
+      "import": "./dist/esm/core/index.js"
+    }
   },
   "files": [
     "dist",
@@ -38,14 +287,15 @@
   ],
   "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",
+    "build": "bun run build:css && bun run build:esm && bun run build:types",
+    "check:dist": "bun scripts/check-dist.mjs",
+    "prepublishOnly": "bun run build && bun run check:dist",
     "typecheck": "tsc --noEmit",
     "lint": "biome check .",
     "test": "bun test",
-    "spec": "bun build/spec-check.mjs"
+    "spec": "bun build/spec-check.mjs",
+    "build:esm": "tsc -p tsconfig.esm.json && bun scripts/fix-esm-extensions.mjs"
   },
   "peerDependencies": {
     "react": ">=18",