@crisp-ui-kit/crisp 0.1.0

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

@@ -0,0 +1,57 @@
+import * as React from "react";
+import type { VariantProps } from "../../core";
+import { buttonRecipe } from "./button.recipe";
+export type ButtonProps = React.ComponentPropsWithoutRef<"button"> & VariantProps<typeof buttonRecipe> & {
+    asChild?: boolean;
+    /** Show a spinner, disable interaction, and set aria-busy. */
+    loading?: boolean;
+};
+export declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
+    intent: {
+        primary: string;
+        neutral: string;
+        danger: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    shape: {
+        text: string;
+        icon: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        intent: {
+            primary: string;
+            neutral: string;
+            danger: string;
+            ghost: string;
+        };
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        shape: {
+            text: string;
+            icon: string;
+        };
+    }>;
+    meta: {
+        primary: {
+            height: string;
+            borderRadius: string;
+            fontWeight: string;
+            fontSize: string;
+            background: string;
+            color: string;
+        };
+    };
+}> & {
+    asChild?: boolean;
+    /** Show a spinner, disable interaction, and set aria-busy. */
+    loading?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,63 @@
+declare const config: import("../..").RecipeConfig<{
+    intent: {
+        primary: string;
+        neutral: string;
+        danger: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    shape: {
+        text: string;
+        icon: string;
+    };
+}>;
+export declare const buttonRecipe: import("../..").RecipeFn<{
+    intent: {
+        primary: string;
+        neutral: string;
+        danger: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    shape: {
+        text: string;
+        icon: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        intent: {
+            primary: string;
+            neutral: string;
+            danger: string;
+            ghost: string;
+        };
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        shape: {
+            text: string;
+            icon: string;
+        };
+    }>;
+    meta: {
+        primary: {
+            height: string;
+            borderRadius: string;
+            fontWeight: string;
+            fontSize: string;
+            background: string;
+            color: string;
+        };
+    };
+};
+export default config;

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

@@ -0,0 +1,2 @@
+export { Button, type ButtonProps } from "./button";
+export { buttonRecipe } from "./button.recipe";

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

@@ -0,0 +1,20 @@
+import type * as React from "react";
+export type CalloutTone = "neutral" | "info" | "success" | "warning" | "danger";
+export type CalloutProps = {
+    tone?: CalloutTone;
+    /** Leading icon; defaults to a tone-appropriate one (pass `null` for none). */
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    /** Trailing action (e.g. a Button). */
+    action?: React.ReactNode;
+    className?: string;
+};
+/**
+ * An inline callout / banner — measured from Attio's info notices. `tone` tints
+ * the background and icon; pass a `title` and/or body `children`.
+ */
+export declare function Callout({ tone, icon, title, children, action, className, }: CalloutProps): React.JSX.Element;
+export declare namespace Callout {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+export { Callout, type CalloutProps, type CalloutTone } from "./callout";
+export { calloutRecipe } from "./callout.recipe";

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type CardProps = React.ComponentPropsWithoutRef<"div"> & {
+    /** Add a soft float shadow. */
+    raised?: boolean;
+    /** Add a hover affordance (for clickable cards). */
+    interactive?: boolean;
+};
+/** A bordered surface card. Compose with CardHeader / CardBody / CardFooter. */
+export declare const Card: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /** Add a soft float shadow. */
+    raised?: boolean;
+    /** Add a hover affordance (for clickable cards). */
+    interactive?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare function CardHeader({ children, icon, action, }: {
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+}): React.JSX.Element;
+export declare function CardBody({ children, className, }: {
+    children?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+export declare function CardFooter({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;

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

@@ -0,0 +1,21 @@
+declare const config: import("../..").RecipeConfig<{
+    raised: {
+        true: string;
+        false: string;
+    };
+    interactive: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const cardRecipe: import("../..").RecipeFn<{
+    raised: {
+        true: string;
+        false: string;
+    };
+    interactive: {
+        true: string;
+        false: string;
+    };
+}>;
+export default config;

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

@@ -0,0 +1,2 @@
+export { Card, CardBody, CardFooter, CardHeader, type CardProps } from "./card";
+export { cardRecipe } from "./card.recipe";

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+export type CheckboxProps = Omit<React.ComponentPropsWithoutRef<"input">, "type"> & {
+    /** Renders the mixed (dash) state — for a select-all that is partially on. */
+    indeterminate?: boolean;
+    asChild?: boolean;
+};
+/**
+ * A native `<input type="checkbox">` styled to Attio's grid checkbox (16px,
+ * r6, brand fill + white check). Native on purpose: keyboard, focus, and form
+ * semantics come for free. `indeterminate` is a DOM-only property, so it is
+ * applied via ref rather than an attribute.
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type"> & {
+    /** Renders the mixed (dash) state — for a select-all that is partially on. */
+    indeterminate?: boolean;
+    asChild?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,11 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const checkboxRecipe: import("../..").RecipeFn<{}> & {
+    config: import("../..").RecipeConfig<{}>;
+    meta: {
+        box: {
+            size: string;
+            borderRadius: string;
+        };
+    };
+};
+export default config;

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

@@ -0,0 +1,2 @@
+export { Checkbox, type CheckboxProps } from "./checkbox";
+export { checkboxRecipe } from "./checkbox.recipe";

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+export type ContextMenuOption = {
+    separator: true;
+} | {
+    separator?: false;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    shortcut?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+};
+export type ContextMenuProps = {
+    /** The area that opens the menu on right-click. */
+    children: React.ReactNode;
+    items: ContextMenuOption[];
+    className?: string;
+};
+/**
+ * A right-click context menu — the popover surface positioned at the cursor.
+ * Wrap the target; right-clicking it opens the menu (flipping at the viewport
+ * edges), closing on select, outside pointer-down, and Escape.
+ */
+export declare function ContextMenu({ children, items, className }: ContextMenuProps): React.JSX.Element;
+export declare namespace ContextMenu {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+export { ContextMenu, type ContextMenuOption, type ContextMenuProps, } from "./contextmenu";
+export { contextmenuRecipe } from "./contextmenu.recipe";

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+export type DatePickerProps = {
+    /** Controlled value. Omit to let the picker manage it (see defaultValue). */
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (date: Date) => void;
+    placeholder?: string;
+    /** `default` = outlined trigger; `ghost` = transparent (for table cells). */
+    variant?: "default" | "ghost";
+    /** Formats the trigger label (default: e.g. "Jun 3, 2026"). */
+    format?: (date: Date) => string;
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * A date field with a calendar popover — composes [Popover] with a month grid.
+ * Controlled via `value`/`onChange` or self-managed from `defaultValue`.
+ */
+export declare function DatePicker({ value, defaultValue, onChange, placeholder, variant, format, "aria-label": ariaLabel, className, }: DatePickerProps): React.JSX.Element;
+export declare namespace DatePicker {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+export { DatePicker, type DatePickerProps } from "./datepicker";
+export { datepickerRecipe } from "./datepicker.recipe";

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+export type DialogProps = {
+    /** Controlled open state. */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Header title; when set, the header (title + close button) renders. */
+    title?: React.ReactNode;
+    /** Leading icon shown before the title. */
+    icon?: React.ReactNode;
+    /** Content width in px (clamped to 90vw). */
+    width?: number;
+    "aria-label"?: string;
+    children?: React.ReactNode;
+};
+/**
+ * A modal dialog — composes Zag's dialog machine (focus trap, scroll lock,
+ * Escape / outside-click dismissal) with the measured Attio modal surface.
+ * Compose the body with `DialogBody` and actions with `DialogFooter`.
+ */
+export declare function Dialog({ open, onOpenChange, title, icon, width, "aria-label": ariaLabel, children, }: DialogProps): React.JSX.Element | null;
+export declare namespace Dialog {
+    var displayName: string;
+}
+export declare function DialogBody({ children, className, }: {
+    children?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+export declare function DialogFooter({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;

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

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

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

@@ -0,0 +1,2 @@
+export { Dialog, DialogBody, DialogFooter, type DialogProps } from "./dialog";
+export { dialogRecipe } from "./dialog.recipe";

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

@@ -0,0 +1,9 @@
+export type DividerProps = {
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+};
+/** A hairline separator over `borderSubtle`, horizontal or vertical. */
+export declare function Divider({ orientation, className, }: DividerProps): import("react").JSX.Element;
+export declare namespace Divider {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+export { Divider, type DividerProps } from "./divider";
+export { dividerRecipe } from "./divider.recipe";

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

@@ -0,0 +1,32 @@
+import type * as React from "react";
+export type DonutSlice = {
+    label: string;
+    value: number;
+    color?: string;
+};
+export type DonutChartProps = {
+    data: DonutSlice[];
+    /** Ring diameter in px (default 120). */
+    size?: number;
+    /** Ring thickness in px (default 14). */
+    thickness?: number;
+    /** Centre big value (default: the total, formatted). */
+    centerValue?: React.ReactNode;
+    /** Small caption under the centre value. */
+    centerCaption?: React.ReactNode;
+    /** Show the legend beside the ring (default true). */
+    legend?: boolean;
+    /** Formats slice + total values. */
+    format?: (n: number) => string;
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * A donut / ring chart — measured from Attio's Reports breakdown reports. SVG
+ * ring using the r=15.915 (circumference 100) trick so slices are percentages;
+ * a centred total and an optional legend. `role="img"` with a summary.
+ */
+export declare function DonutChart({ data, size, thickness, centerValue, centerCaption, legend, format, "aria-label": ariaLabel, className, }: DonutChartProps): React.JSX.Element;
+export declare namespace DonutChart {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+export { DonutChart, type DonutChartProps, type DonutSlice, } from "./donutchart";
+export { donutchartRecipe } from "./donutchart.recipe";

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type DrawerProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Which edge the sheet slides in from (default right). */
+    side?: "right" | "left";
+    title?: React.ReactNode;
+    icon?: React.ReactNode;
+    "aria-label"?: string;
+    children?: React.ReactNode;
+};
+/**
+ * A side sheet — composes Zag's dialog machine (focus trap, scroll lock,
+ * Escape / outside-click dismissal) with a panel that slides in from the edge.
+ * Compose the body with `DrawerBody` and actions with `DrawerFooter`.
+ */
+export declare function Drawer({ open, onOpenChange, side, title, icon, "aria-label": ariaLabel, children, }: DrawerProps): React.JSX.Element | null;
+export declare namespace Drawer {
+    var displayName: string;
+}
+export declare function DrawerBody({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export declare function DrawerFooter({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;

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

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

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

@@ -0,0 +1,2 @@
+export { Drawer, DrawerBody, DrawerFooter, type DrawerProps } from "./drawer";
+export { drawerRecipe } from "./drawer.recipe";

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

@@ -0,0 +1,19 @@
+import type * as React from "react";
+export type EmptyStateProps = {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** A primary action (e.g. a Button) shown below. */
+    action?: React.ReactNode;
+    /**
+     * `illustrated` shows a large icon on a dotted-grid backdrop; `page` is
+     * Attio's full-view empty state (ringed circle icon + 20px heading).
+     */
+    variant?: "default" | "illustrated" | "page";
+    className?: string;
+};
+/** A centred empty-state panel — icon, title, description, optional action. */
+export declare function EmptyState({ icon, title, description, action, variant, className, }: EmptyStateProps): React.JSX.Element;
+export declare namespace EmptyState {
+    var displayName: string;
+}

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

@@ -0,0 +1,15 @@
+declare const config: import("../..").RecipeConfig<{
+    variant: {
+        default: string;
+        illustrated: string;
+        page: string;
+    };
+}>;
+export declare const emptystateRecipe: import("../..").RecipeFn<{
+    variant: {
+        default: string;
+        illustrated: string;
+        page: string;
+    };
+}>;
+export default config;

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

@@ -0,0 +1,2 @@
+export { EmptyState, type EmptyStateProps } from "./emptystate";
+export { emptystateRecipe } from "./emptystate.recipe";

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type FormFieldProps = {
+    label: React.ReactNode;
+    /** `id` of the control — wires the label's `htmlFor`. */
+    htmlFor?: string;
+    /** Marks the field required (red asterisk). */
+    required?: boolean;
+    /** Shows a muted "(optional)" after the label. */
+    optional?: boolean;
+    /** Helper text under the control. */
+    description?: React.ReactNode;
+    /** Error message under the control (replaces description, coloured danger). */
+    error?: React.ReactNode;
+    /** The control (Input, Select, Textarea…). */
+    children: React.ReactNode;
+    className?: string;
+};
+/**
+ * A labelled form field — measured from Attio's Settings forms. A muted label
+ * above any control, with an optional description or error line below. When
+ * `error` is set, it replaces the description and gets `aria-describedby` wiring.
+ */
+export declare function FormField({ label, htmlFor, required, optional, description, error, children, className, }: FormFieldProps): React.JSX.Element;
+export declare namespace FormField {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+export { FormField, type FormFieldProps } from "./formfield";
+export { formfieldRecipe } from "./formfield.recipe";

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

@@ -0,0 +1,2 @@
+export { Input, type InputProps } from "./input";
+export { inputRecipe } from "./input.recipe";

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

@@ -0,0 +1,32 @@
+import * as React from "react";
+import type { VariantProps } from "../../core";
+import { inputRecipe } from "./input.recipe";
+export type InputProps = Omit<React.ComponentPropsWithoutRef<"input">, "size"> & VariantProps<typeof inputRecipe>;
+export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size"> & VariantProps<import("../..").RecipeFn<{
+    size: {
+        medium: string;
+        large: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        size: {
+            medium: string;
+            large: string;
+        };
+        invalid: {
+            true: string;
+            false: string;
+        };
+    }>;
+    meta: {
+        medium: {
+            height: string;
+            borderRadius: string;
+            fontSize: string;
+        };
+    };
+}> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,39 @@
+declare const config: import("../..").RecipeConfig<{
+    size: {
+        medium: string;
+        large: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const inputRecipe: import("../..").RecipeFn<{
+    size: {
+        medium: string;
+        large: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        size: {
+            medium: string;
+            large: string;
+        };
+        invalid: {
+            true: string;
+            false: string;
+        };
+    }>;
+    meta: {
+        medium: {
+            height: string;
+            borderRadius: string;
+            fontSize: string;
+        };
+    };
+};
+export default config;

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

@@ -0,0 +1,2 @@
+export { Kbd, type KbdProps } from "./kbd";
+export { kbdRecipe } from "./kbd.recipe";

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type KbdProps = React.ComponentPropsWithoutRef<"span"> & {
+    asChild?: boolean;
+};
+export declare const Kbd: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,12 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const kbdRecipe: import("../..").RecipeFn<{}> & {
+    config: import("../..").RecipeConfig<{}>;
+    meta: {
+        chip: {
+            height: string;
+            borderRadius: string;
+            fontSize: string;
+        };
+    };
+};
+export default config;

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

@@ -0,0 +1,2 @@
+export { LineChart, type LineChartProps, type LinePoint } from "./linechart";
+export { linechartRecipe } from "./linechart.recipe";