@crisp-ui-kit/crisp 0.1.0

package/dist/switch.css

@@ -0,0 +1,12 @@
+.switch {
+  
+    display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0;
+    border: none; border-radius: var(--radius-full); background: color-mix(in srgb, var(--fg-primary) 9%, transparent);
+    cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
+    & .switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: var(--radius-full); background: #fff; transition: transform .2s ease; }
+    &[data-checked] { background: var(--bg-brand-solid); }
+    &[data-checked] .switch-thumb { transform: translateX(8px); }
+    &:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 2px; }
+    &:disabled { opacity: 0.5; cursor: not-allowed; }
+  
+}

package/dist/switch.d.ts

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

package/dist/tabs.css

@@ -0,0 +1,19 @@
+.tabs {
+  
+    display: flex; flex-direction: column; min-height: 0; font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .tabs-list { position: relative; display: flex; align-items: center; gap: var(--space-1); height: 40px; flex-shrink: 0; box-shadow: inset 0 -1px 0 var(--border-subtle); }
+    & .tabs-leading { display: inline-flex; align-items: center; margin-right: var(--space-1); }
+    & .tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; margin: 0; padding: 0 var(--space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.14px; color: var(--fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
+    & .tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); color: var(--fg-primary); }
+    & .tabs-tab[data-selected] { color: var(--fg-primary); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--border-subtle); }
+    & .tabs-tab:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
+    & .tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fg-primary) 6%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-muted); }
+    & .tabs-tab[data-selected] .tabs-tab-badge { color: var(--fg-primary); }
+    & .tabs-indicator { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .tabs-panel { flex: 1; min-height: 0; }
+    & .tabs-panel:focus-visible { outline: none; }
+  
+}

package/dist/tabs.d.ts

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

package/dist/tasklist.css

@@ -0,0 +1,24 @@
+.tasklist {
+  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .tasklist-group { display: flex; align-items: center; gap: var(--space-1-5); height: 36px; padding: 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-muted); }
+    & .tasklist-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fg-primary) 6%, transparent); font-size: var(--text-xs); color: var(--fg-muted); }
+
+    & .tasklist-row { display: flex; align-items: center; gap: var(--space-2-5); height: 52px; padding: 0 var(--space-2); border-top: 1px solid var(--border-subtle); }
+    & .tasklist-row:first-child { border-top: none; }
+
+    & .tasklist-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
+    & .tasklist-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 30%, transparent); }
+    & .tasklist-check:checked { background: var(--bg-brand-solid) center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
+    & .tasklist-check:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
+
+    & .tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); }
+    & .tasklist-row[data-done] .tasklist-title { color: var(--fg-muted); text-decoration: line-through; }
+
+    & .tasklist-meta { display: inline-flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
+    & .tasklist-due { font-size: var(--text-lg); color: var(--fg-muted); white-space: nowrap; }
+    & .tasklist-due[data-overdue] { color: var(--bg-danger); }
+
+    & .tasklist-empty { padding: var(--space-4) var(--space-2); text-align: center; font-size: var(--text-md); color: var(--fg-muted); }
+}

package/dist/tasklist.d.ts

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

package/dist/textarea.css

@@ -0,0 +1,20 @@
+.textarea {
+  
+    position: relative; display: block; width: 100%; font-family: var(--font-sans);
+
+    & .textarea-field {
+      box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
+      margin: 0; padding: var(--space-1-5) var(--space-2-5); border: none; border-radius: var(--radius-md);
+      background: var(--bg-surface); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
+      font-family: inherit; font-size: var(--text-lg); line-height: 20px; color: var(--fg-primary);
+      outline: none; transition: box-shadow .15s ease;
+      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    }
+    & .textarea-field::placeholder { color: var(--fg-muted); }
+    & .textarea-field:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
+    & .textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
+    &[data-counted] .textarea-field { padding-bottom: var(--space-5); }
+    & .textarea-count { position: absolute; right: var(--space-2-5); bottom: var(--space-1-5); font-size: var(--text-sm); color: var(--fg-muted); pointer-events: none; }
+    & .textarea-count[data-over] { color: var(--bg-danger); }
+  
+}

package/dist/textarea.d.ts

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

package/dist/toast.css

@@ -0,0 +1,17 @@
+.toast {
+  display: contents; font-family: var(--font-sans);
+    & .toast-viewport { position: fixed; z-index: 80; right: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); width: 360px; max-width: calc(100vw - var(--space-8)); pointer-events: none; }
+    & .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-2-5); box-sizing: border-box; padding: var(--space-3); border-radius: var(--radius-xl); background: var(--bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--fg-muted); }
+    & .toast[data-tone="info"] .toast-icon { color: var(--bg-brand-solid); }
+    & .toast[data-tone="success"] .toast-icon { color: var(--bg-success); }
+    & .toast[data-tone="warning"] .toast-icon { color: var(--bg-warning); }
+    & .toast[data-tone="danger"] .toast-icon { color: var(--bg-danger); }
+    & .toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .toast-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--fg-primary); }
+    & .toast-desc { font-size: var(--text-md); color: var(--fg-muted); }
+    & .toast-action { align-self: flex-start; margin-top: var(--space-1-5); height: 24px; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; }
+    & .toast-action:hover { background: color-mix(in srgb, var(--fg-primary) 10%, transparent); }
+    & .toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); cursor: pointer; }
+    & .toast-close:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); }
+}

package/dist/toast.d.ts

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

package/dist/tokens.css

@@ -0,0 +1,70 @@
+:root {
+  --bg-brand-solid: #266df0;
+  --bg-brand-solid-pressed: #1f5fd6;
+  --fg-on-brand: #ffffff;
+  --bg-surface: #ffffff;
+  --bg-raised: #f4f4f5;
+  --border-default: #e4e4e7;
+  --border-subtle: #eeeff1;
+  --fg-primary: #101112;
+  --fg-muted: #71717a;
+  --bg-danger: #e5484d;
+  --bg-success: #1f9d57;
+  --bg-warning: #b5730f;
+  --bg-orange: #f97514;
+  --bg-cyan: #00b9eb;
+  --bg-purple: #9b69ff;
+  --bg-sidebar: #fbfbfb;
+}
+
+[data-theme="dark"] {
+  --bg-brand-solid: #266df0;
+  --bg-brand-solid-pressed: #1f5fd6;
+  --fg-on-brand: #ffffff;
+  --bg-surface: #0a0a0a;
+  --bg-raised: #101112;
+  --border-default: #212224;
+  --border-subtle: #1c1d1f;
+  --fg-primary: #f5f5f5;
+  --fg-muted: #9a9aa2;
+  --bg-danger: #ff5a5f;
+  --bg-success: #2ea968;
+  --bg-warning: #e0982a;
+  --bg-orange: #f97514;
+  --bg-cyan: #00b9eb;
+  --bg-purple: #9b69ff;
+  --bg-sidebar: #0e0f10;
+}
+
+:root {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-px: 1px;
+  --space-0-5: 2px;
+  --space-1-5: 6px;
+  --space-2-5: 10px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 9px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-full: 999px;
+  --size-icon: 16px;
+  --size-row: 28px;
+  --size-tableRow: 36px;
+  --size-header: 48px;
+  --text-xs: 11px;
+  --text-sm: 12px;
+  --text-md: 13px;
+  --text-lg: 14px;
+  --text-xl: 16px;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+}

package/dist/tooltip.css

@@ -0,0 +1,3 @@
+.tooltip {
+  position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: #20242c; color: #fff; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--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; }
+}

package/dist/tooltip.d.ts

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

package/dist/trialbanner.css

@@ -0,0 +1,18 @@
+.trialbanner {
+  display: flex; align-items: center; gap: var(--space-1-5); box-sizing: border-box; min-height: 28px;
+    padding: 0 var(--space-1); border-radius: var(--radius-lg); font-family: var(--font-sans);
+    font-size: var(--text-lg); color: var(--fg-primary);
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .trialbanner-icon { display: inline-flex; flex-shrink: 0; color: var(--fg-muted); }
+    & .trialbanner-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .trialbanner-action { display: inline-flex; align-items: center; gap: var(--space-1); height: 20px; flex-shrink: 0;
+      padding: 0 var(--space-1-5); margin: 0; border: none; border-radius: var(--radius-sm); background: var(--bg-surface);
+      box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
+      font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-primary);
+      white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .trialbanner-action:hover { background: var(--bg-raised); }
+
+    &[data-tone="warning"] .trialbanner-icon { color: var(--bg-warning); }
+    &[data-tone="danger"] .trialbanner-icon { color: var(--bg-danger); }
+}

package/dist/trialbanner.d.ts

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

package/dist/types/components/accordion/accordion.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export type AccordionItemData = {
+    value: string;
+    title: React.ReactNode;
+    content: React.ReactNode;
+};
+export type AccordionProps = {
+    items: AccordionItemData[];
+    /** Allow multiple panels open at once (default: single). */
+    multiple?: boolean;
+    /** Initially open value(s). */
+    defaultValue?: string | string[];
+    className?: string;
+};
+/**
+ * A collapsible section list — measured from Attio's sidebar groups. Single or
+ * multiple open; panels animate their height (grid-rows 0fr->1fr). Headers are
+ * buttons with `aria-expanded` / `aria-controls`.
+ */
+export declare function Accordion({ items, multiple, defaultValue, className, }: AccordionProps): React.JSX.Element;
+export declare namespace Accordion {
+    var displayName: string;
+}

package/dist/types/components/accordion/accordion.recipe.d.ts

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

package/dist/types/components/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion, type AccordionItemData, type AccordionProps, } from "./accordion";
+export { accordionRecipe } from "./accordion.recipe";

package/dist/types/components/avatar/avatar.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+import type { VariantProps } from "../../core";
+import { avatarRecipe } from "./avatar.recipe";
+export type AvatarProps = Omit<React.ComponentPropsWithoutRef<"span">, "color"> & VariantProps<typeof avatarRecipe> & {
+    asChild?: boolean;
+};
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "color"> & VariantProps<import("../..").RecipeFn<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    shape: {
+        circle: string;
+        rounded: string;
+    };
+    tone: {
+        neutral: string;
+        brand: string;
+        orange: string;
+        cyan: string;
+        purple: string;
+        green: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        shape: {
+            circle: string;
+            rounded: string;
+        };
+        tone: {
+            neutral: string;
+            brand: string;
+            orange: string;
+            cyan: string;
+            purple: string;
+            green: string;
+        };
+    }>;
+    meta: {
+        lg: {
+            height: string;
+            fontSize: string;
+            fontWeight: string;
+        };
+    };
+}> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/types/components/avatar/avatar.recipe.d.ts

@@ -0,0 +1,69 @@
+declare const config: import("../..").RecipeConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    shape: {
+        circle: string;
+        rounded: string;
+    };
+    tone: {
+        neutral: string;
+        brand: string;
+        orange: string;
+        cyan: string;
+        purple: string;
+        green: string;
+    };
+}>;
+export declare const avatarRecipe: import("../..").RecipeFn<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    shape: {
+        circle: string;
+        rounded: string;
+    };
+    tone: {
+        neutral: string;
+        brand: string;
+        orange: string;
+        cyan: string;
+        purple: string;
+        green: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        shape: {
+            circle: string;
+            rounded: string;
+        };
+        tone: {
+            neutral: string;
+            brand: string;
+            orange: string;
+            cyan: string;
+            purple: string;
+            green: string;
+        };
+    }>;
+    meta: {
+        lg: {
+            height: string;
+            fontSize: string;
+            fontWeight: string;
+        };
+    };
+};
+export default config;

package/dist/types/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar, type AvatarProps } from "./avatar";
+export { avatarRecipe } from "./avatar.recipe";

package/dist/types/components/avatargroup/avatargroup.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { type AvatarProps } from "../avatar/avatar";
+export type AvatarGroupProps = {
+    /** Avatar elements to stack, in order (left on the outside). */
+    children: React.ReactNode;
+    /** Show at most this many, then a "+N" overflow chip. */
+    max?: number;
+    /** Size of the overflow chip; match your avatars' size. */
+    size?: AvatarProps["size"];
+    className?: string;
+    "aria-label"?: string;
+};
+/**
+ * A stack of overlapping avatars with an optional "+N" overflow chip — measured
+ * from Attio's team / member rows. Pass `<Avatar>` children; each is ringed in
+ * the surface colour so it reads against its neighbour.
+ */
+export declare function AvatarGroup({ children, max, size, className, "aria-label": ariaLabel, }: AvatarGroupProps): React.JSX.Element;
+export declare namespace AvatarGroup {
+    var displayName: string;
+}

package/dist/types/components/avatargroup/avatargroup.recipe.d.ts

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

package/dist/types/components/avatargroup/index.d.ts

@@ -0,0 +1,2 @@
+export { AvatarGroup, type AvatarGroupProps } from "./avatargroup";
+export { avatargroupRecipe } from "./avatargroup.recipe";

package/dist/types/components/badge/badge.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import type { VariantProps } from "../../core";
+import { badgeRecipe } from "./badge.recipe";
+export type BadgeProps = React.ComponentPropsWithoutRef<"span"> & VariantProps<typeof badgeRecipe> & {
+    asChild?: boolean;
+    /** Show a leading status dot in the tone colour (e.g. "● Enabled"). */
+    dot?: boolean;
+};
+export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
+    tone: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    variant: {
+        soft: string;
+        solid: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        tone: {
+            neutral: string;
+            brand: string;
+            success: string;
+            warning: string;
+            danger: string;
+        };
+        size: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+        variant: {
+            soft: string;
+            solid: string;
+        };
+    }>;
+    meta: {
+        medium: {
+            height: string;
+            borderRadius: string;
+            fontSize: string;
+            fontWeight: string;
+        };
+    };
+}> & {
+    asChild?: boolean;
+    /** Show a leading status dot in the tone colour (e.g. "● Enabled"). */
+    dot?: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/types/components/badge/badge.recipe.d.ts

@@ -0,0 +1,64 @@
+declare const config: import("../..").RecipeConfig<{
+    tone: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    variant: {
+        soft: string;
+        solid: string;
+    };
+}>;
+export declare const badgeRecipe: import("../..").RecipeFn<{
+    tone: {
+        neutral: string;
+        brand: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    variant: {
+        soft: string;
+        solid: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        tone: {
+            neutral: string;
+            brand: string;
+            success: string;
+            warning: string;
+            danger: string;
+        };
+        size: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+        variant: {
+            soft: string;
+            solid: string;
+        };
+    }>;
+    meta: {
+        medium: {
+            height: string;
+            borderRadius: string;
+            fontSize: string;
+            fontWeight: string;
+        };
+    };
+};
+export default config;

package/dist/types/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge, type BadgeProps } from "./badge";
+export { badgeRecipe } from "./badge.recipe";

package/dist/types/components/barchart/barchart.d.ts

@@ -0,0 +1,30 @@
+import type * as React from "react";
+export type BarDatum = {
+    label: string;
+    value: number;
+};
+export type BarChartProps = {
+    data: BarDatum[];
+    /** Overall height in px (default 240). */
+    height?: number;
+    /** Force the axis maximum; otherwise a "nice" max is derived. */
+    max?: number;
+    /** Number of value gridlines/ticks (default 5, includes 0). */
+    ticks?: number;
+    /** Bar colour (default brand). */
+    color?: string;
+    /** Formats axis ticks and bar values. */
+    format?: (n: number) => string;
+    /** Category-axis title, shown centred below the labels. */
+    xAxisTitle?: React.ReactNode;
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * A responsive bar chart — measured from Attio's Reports dashboard. Pure CSS, so
+ * it scales with its container. Renders `role="img"` with an accessible summary.
+ */
+export declare function BarChart({ data, height, max, ticks, color, format, xAxisTitle, "aria-label": ariaLabel, className, }: BarChartProps): React.JSX.Element;
+export declare namespace BarChart {
+    var displayName: string;
+}

package/dist/types/components/barchart/barchart.recipe.d.ts

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

package/dist/types/components/barchart/index.d.ts

@@ -0,0 +1,2 @@
+export { BarChart, type BarChartProps, type BarDatum } from "./barchart";
+export { barchartRecipe } from "./barchart.recipe";

package/dist/types/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export type BreadcrumbItem = {
+    label: React.ReactNode;
+    href?: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+};
+export type BreadcrumbProps = {
+    items: BreadcrumbItem[];
+    /** Separator between items (default a chevron). */
+    separator?: React.ReactNode;
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * A breadcrumb trail — measured from Attio's record-page nav. The last item is
+ * marked `aria-current="page"`; earlier items render as links or buttons.
+ */
+export declare function Breadcrumb({ items, separator, "aria-label": ariaLabel, className, }: BreadcrumbProps): React.JSX.Element;
+export declare namespace Breadcrumb {
+    var displayName: string;
+}

package/dist/types/components/breadcrumb/breadcrumb.recipe.d.ts

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

package/dist/types/components/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, } from "./breadcrumb";
+export { breadcrumbRecipe } from "./breadcrumb.recipe";