@crisp-ui-kit/crisp 0.57.1 → 0.57.2

package/dist/tokens.json

@@ -19,7 +19,9 @@
       "ringSwitch": "#d9dade",
       "bgTileActive": "#ffffff",
       "shadowTileActive": "rgba(0,0,0,0.04)",
-      "bgScrim": "rgba(0,0,0,0.25)",
+      "bgScrim": "rgba(0,0,0,0.45)",
+      "bgOverlayStrong": "#00000074",
+      "strokeGroupDivider": "#00000010",
       "fgAlertDescription": "rgba(0,0,0,0.63)",
       "bgOverlayFrost": "#ffffff",
       "shadowOverlay1": "rgba(28,40,64,0.12)",
@@ -90,6 +92,8 @@
       "bgTileActive": "#101112",
       "shadowTileActive": "rgba(0,0,0,0)",
       "bgScrim": "rgba(0,0,0,0.55)",
+      "bgOverlayStrong": "#00000074",
+      "strokeGroupDivider": "#ffffff17",
       "fgAlertDescription": "rgba(255,255,255,0.6)",
       "bgOverlayFrost": "#1c1d1f",
       "shadowOverlay1": "rgba(0,0,0,0.48)",
@@ -158,7 +162,9 @@
       "ringBrandSoft": "#d6e5ff",
       "tileActive": "#ffffff",
       "tileActiveShadow": "rgba(0,0,0,0.04)",
-      "bgScrim": "rgba(0,0,0,0.25)",
+      "bgScrim": "rgba(0,0,0,0.45)",
+      "bgOverlayStrong": "#00000074",
+      "strokeGroupDivider": "#00000010",
       "fgAlertDescription": "rgba(0,0,0,0.63)",
       "overlayFrost": "#ffffff",
       "shadowOverlay1": "rgba(28,40,64,0.12)",
@@ -225,6 +231,8 @@
       "tileActive": "#101112",
       "tileActiveShadow": "rgba(0,0,0,0)",
       "bgScrim": "rgba(0,0,0,0.55)",
+      "bgOverlayStrong": "#00000074",
+      "strokeGroupDivider": "#ffffff17",
       "fgAlertDescription": "rgba(255,255,255,0.6)",
       "overlayFrost": "#1c1d1f",
       "shadowOverlay1": "rgba(0,0,0,0.48)",
@@ -291,13 +299,14 @@
   },
   "radius": {
     "xs": 4,
-    "chip": 7,
+    "chip": 999,
     "sm": 6,
     "md": 8,
     "lg": 9,
     "xl": 12,
     "2xl": 16,
     "3xl": 20,
+    "4xl": 24,
     "full": 999
   },
   "size": {
@@ -321,6 +330,14 @@
     "lg": 14,
     "xl": 16
   },
+  "tracking": {
+    "18": -0.36,
+    "20": -0.4,
+    "24": -0.48,
+    "26": -0.52,
+    "28": -0.56,
+    "32": -0.64
+  },
   "font": {
     "sans": "\"VK Sans Display\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
   },

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+/**
+ * Root props land on the SHEET SURFACE — the element carrying `role="dialog"`
+ * — same reasoning as Dialog/Drawer (#223).
+ */
+export type BottomSheetProps = Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children"> & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Title alignment (default "left"). seed's own two header layouts. */
+    headerAlign?: "left" | "center";
+    /** Show the corner close button (default true when `title` is set). */
+    showCloseButton?: boolean;
+    "aria-label"?: string;
+    /** aria-label on the close button (default "Close"). */
+    closeLabel?: string;
+    children?: React.ReactNode;
+};
+/**
+ * A mobile bottom sheet — composes Zag's dialog machine (focus trap, scroll
+ * lock, Escape / outside-click dismissal) with a panel that slides up from
+ * the bottom edge. Compose the body with `BottomSheetBody` and actions with
+ * `BottomSheetFooter`.
+ */
+export declare function BottomSheet({ open, onOpenChange, title, description, headerAlign, showCloseButton, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, "aria-describedby": describedBy, ...rest }: BottomSheetProps): React.JSX.Element | null;
+export declare namespace BottomSheet {
+    var displayName: string;
+}
+export declare function BottomSheetBody({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export declare function BottomSheetFooter({ children, }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;

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

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

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

@@ -0,0 +1,2 @@
+export { BottomSheet, BottomSheetBody, BottomSheetFooter, type BottomSheetProps, } from "./bottomsheet";
+export { bottomsheetRecipe } from "./bottomsheet.recipe";

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

@@ -20,6 +20,11 @@ declare const spec: {
             readonly opacity: 0.5;
             readonly cursor: "not-allowed";
         };
+    }, {
+        readonly selector: "&:active";
+        readonly decls: {
+            readonly transform: "scale(0.98)";
+        };
     }];
     readonly variants: {
         readonly intent: {
@@ -27,7 +32,7 @@ declare const spec: {
                 readonly decls: {
                     readonly background: `var(--${string})`;
                     readonly color: `var(--${string})`;
-                    readonly boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)";
+                    readonly boxShadow: "none";
                 };
                 readonly parts: [{
                     readonly selector: "&:hover";
@@ -43,9 +48,9 @@ declare const spec: {
             };
             readonly neutral: {
                 readonly decls: {
-                    background: `var(--${string})`;
-                    color: `var(--${string})`;
-                    boxShadow: `inset 0 0 0 1px var(--${string}), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`;
+                    readonly background: `var(--${string})`;
+                    readonly color: `var(--${string})`;
+                    readonly boxShadow: "none";
                 };
                 readonly parts: [{
                     readonly selector: "&:hover";
@@ -58,7 +63,7 @@ declare const spec: {
                 readonly decls: {
                     readonly background: `var(--${string})`;
                     readonly color: `var(--${string})`;
-                    readonly boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)";
+                    readonly boxShadow: "none";
                 };
                 readonly parts: [{
                     readonly selector: "&:hover";
@@ -117,7 +122,7 @@ declare const spec: {
                 readonly height: "40px";
                 readonly paddingInline: "14px";
                 readonly fontSize: `var(--${string})`;
-                readonly borderRadius: "10px";
+                readonly borderRadius: `var(--${string})`;
             };
         };
         readonly shape: {

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

@@ -8,23 +8,22 @@ declare const spec: {
         readonly margin: 0;
         readonly width: "16px";
         readonly height: "16px";
-        readonly border: "none";
+        readonly border: `1px solid var(--${string})`;
         readonly borderRadius: `var(--${string})`;
         readonly background: `var(--${string})`;
-        readonly boxShadow: `inset 0 0 0 1px color-mix(in srgb, var(--${string}) 9%, transparent)`;
         readonly cursor: "pointer";
-        readonly transition: "background-color .12s, box-shadow .12s";
+        readonly transition: "background-color .12s, border-color .12s";
     };
     readonly parts: [{
         readonly selector: "&:hover";
         readonly decls: {
-            readonly boxShadow: `inset 0 0 0 1px color-mix(in srgb, var(--${string}) 30%, transparent)`;
+            readonly borderColor: `color-mix(in srgb, var(--${string}) 30%, transparent)`;
         };
     }, {
         readonly selector: "&:checked, &:indeterminate";
         readonly decls: {
             readonly background: `var(--${string}) center / 10px no-repeat`;
-            readonly boxShadow: "none";
+            readonly borderColor: "transparent";
         };
     }, {
         readonly selector: "&:checked";
@@ -43,6 +42,30 @@ declare const spec: {
             readonly outline: `2px solid var(--${string})`;
             readonly outlineOffset: "1px";
         };
+    }, {
+        readonly selector: "&:disabled";
+        readonly decls: {
+            readonly background: `var(--${string})`;
+            readonly borderColor: `var(--${string})`;
+            readonly cursor: "not-allowed";
+        };
+    }, {
+        readonly selector: "&:checked:disabled, &:indeterminate:disabled";
+        readonly decls: {
+            readonly background: `var(--${string}) center / 10px no-repeat`;
+            readonly borderColor: `var(--${string})`;
+        };
+    }, {
+        readonly selector: "&:checked:disabled";
+        readonly decls: {
+            backgroundImage: "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\")";
+        };
+    }, {
+        readonly selector: "&:indeterminate:disabled";
+        readonly decls: {
+            readonly backgroundImage: `linear-gradient(var(--${string}), var(--${string}))`;
+            readonly backgroundSize: "8px 2px";
+        };
     }];
 };
 declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;

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

@@ -29,6 +29,12 @@ export type ChipProps = React.ComponentPropsWithoutRef<"span"> & VariantProps<ty
  * an inline ×) — so `Chip` has no `onRemove`/remove button yet. Add one once
  * that surface can be measured; don't guess the icon, its hit target, or its
  * spacing from the label.
+ *
+ * `appearance` (`"filled"` default | `"outline"`) and `selected` separate
+ * three visual roles crisp/#907's study found conflated: a filled chip reads
+ * as a status/value (not clickable), an outline chip reads as actionable (a
+ * tag or filter you can tap), and `selected` overrides either to a dark fill
+ * once tapped — see `chip.recipe.ts` for the structural reference.
  */
 export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
     readonly truncate: {
@@ -45,6 +51,14 @@ export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHT
         readonly cyan: string;
         readonly orange: string;
     };
+    readonly appearance: {
+        readonly filled: string;
+        readonly outline: string;
+    };
+    readonly selected: {
+        readonly true: string;
+        readonly false: string;
+    };
 }> & {
     config: import("../..").RecipeConfig<{
         readonly truncate: {
@@ -61,6 +75,14 @@ export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHT
             readonly cyan: string;
             readonly orange: string;
         };
+        readonly appearance: {
+            readonly filled: string;
+            readonly outline: string;
+        };
+        readonly selected: {
+            readonly true: string;
+            readonly false: string;
+        };
     }>;
 }> & {
     asChild?: boolean;

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

@@ -73,10 +73,34 @@ declare const spec: {
                 boxShadow: string;
             };
         };
+        readonly appearance: {
+            readonly filled: {};
+            readonly outline: {
+                readonly background: "transparent";
+            };
+        };
+        readonly selected: {
+            readonly true: {
+                readonly background: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly boxShadow: "none";
+            };
+            readonly false: {};
+        };
     };
+    readonly compoundVariants: [{
+        readonly tone: "neutral";
+        readonly appearance: "outline";
+        readonly selected: false;
+        readonly decls: {
+            readonly boxShadow: `inset 0 0 0 1px var(--${string})`;
+        };
+    }];
     readonly defaultVariants: {
         readonly tone: "neutral";
         readonly truncate: false;
+        readonly appearance: "filled";
+        readonly selected: false;
     };
 };
 declare const config: import("../..").RecipeConfig<{
@@ -94,6 +118,14 @@ declare const config: import("../..").RecipeConfig<{
         readonly cyan: string;
         readonly orange: string;
     };
+    readonly appearance: {
+        readonly filled: string;
+        readonly outline: string;
+    };
+    readonly selected: {
+        readonly true: string;
+        readonly false: string;
+    };
 }>;
 export declare const chipRecipe: import("../..").RecipeFn<{
     readonly truncate: {
@@ -110,6 +142,14 @@ export declare const chipRecipe: import("../..").RecipeFn<{
         readonly cyan: string;
         readonly orange: string;
     };
+    readonly appearance: {
+        readonly filled: string;
+        readonly outline: string;
+    };
+    readonly selected: {
+        readonly true: string;
+        readonly false: string;
+    };
 }> & {
     config: import("../..").RecipeConfig<{
         readonly truncate: {
@@ -126,6 +166,14 @@ export declare const chipRecipe: import("../..").RecipeFn<{
             readonly cyan: string;
             readonly orange: string;
         };
+        readonly appearance: {
+            readonly filled: string;
+            readonly outline: string;
+        };
+        readonly selected: {
+            readonly true: string;
+            readonly false: string;
+        };
     }>;
 };
 export { spec };

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+export type ChipGroupProps = React.ComponentPropsWithoutRef<"div"> & {
+    asChild?: boolean;
+};
+/**
+ * A single-line, horizontally-scrolling row of `Chip`s (or anything else),
+ * with scroll-snap — for a filter/status row that would otherwise wrap onto
+ * a second line once it runs out of width (crisp#908). Every child snaps to
+ * the row's start edge and never shrinks, so scrolling always lands a chip
+ * flush against the left edge rather than mid-chip.
+ */
+export declare const ChipGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,2 @@
+export { ChipGroup, type ChipGroupProps } from "./chipgroup";
+export { chipgroupRecipe } from "./chipgroup.recipe";

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

@@ -267,6 +267,25 @@ export type DataTableColumn<T> = {
      * row's own record — that's what `onRowClick` is for. Ignored on any
      * other `type`. */
     onEntityClick?: (row: T) => void;
+    /** `type: "entity"` only (#893) — a column-scoped link to the ROW'S OWN
+     * record, rendered as a real `<a href>` (matching Attio's own measured
+     * markup exactly — its entity cell name is a genuine anchor, confirmed
+     * via `outerHTML`, not a button with a click handler). Distinct from
+     * `onEntityClick` above (a DIFFERENT record than the row) and from the
+     * table-level `onRowClick` (fires for a click on any non-editable cell
+     * in the row, not just this column) — a consumer whose other columns
+     * select-on-click can't wire `onRowClick` for this without turning every
+     * cell in the row into a navigation trigger too. Set at most one of
+     * `href`/`onEntityClick` per column; `href` wins if both are given. */
+    href?: (row: T) => string;
+    /** `type: "entity"` only (#892) — the avatar's corner shape: Attio's own
+     * measured default (a company/object logo, `border-radius: 30%`, already
+     * `Avatar`'s own `shape="rounded"` value) or `"circle"` (`Avatar`'s own
+     * `shape="circle"`, `border-radius: 50%`) for a person entity — measured
+     * live on a real Attio People avatar. Naming matches `Avatar`'s own
+     * `shape` prop values exactly. Default `"rounded"`, so every existing
+     * entity column (Companies-style) is unaffected. */
+    avatarShape?: "rounded" | "circle";
     /** `type: "entity"` only (crisp/#601, checklist G-048) — a right-aligned
      * "Open preview" icon that appears on row hover (or keyboard focus),
      * alongside `onOpenComments` below. Matches Attio's own measured pair

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

@@ -9,12 +9,38 @@ export type FileUploadLabels = {
     errors: Record<string, string>;
 };
 export declare const fileUploadLabels: FileUploadLabels;
+export type FileUploadItemProps = {
+    name: string;
+    /** Bytes. Omit for a caller with no size to report. */
+    size?: number;
+    status?: FileEntry["status"];
+    /** 0-100. Only drawn while `status === "uploading"`. */
+    progress?: number;
+    /** Omit to render a non-removable row. */
+    onRemove?: () => void;
+    /** Required whenever `onRemove` is passed — the remove button's accessible name. */
+    removeLabel?: string;
+    className?: string;
+};
+/**
+ * One row of `FileUpload`'s own accepted-file list (crisp#965) — icon-free
+ * name + trailing size + remove, `min-height: size.tableRow` on `bgRaised`
+ * (measured from a data-grid row, see `fileupload.recipe.ts`). Exported on
+ * its own because `FileUpload` internally only lists `File` objects from the
+ * current browser session; a caller with already-persisted attachments
+ * (fetched from a server, never a real `File`) has no `acceptedFileEntries`
+ * to hand it and needs the identical row for its own list instead of
+ * hand-rolling one.
+ */
+export declare function FileUploadItem({ name, size, status, progress, onRemove, removeLabel, className, }: FileUploadItemProps): React.JSX.Element;
 export type FileUploadProps = UseFileUploadProps & Omit<React.ComponentPropsWithoutRef<"div">, keyof UseFileUploadProps | "children"> & {
     /** PARTIAL override of the chrome strings; anything omitted keeps its default. */
     labels?: Partial<Omit<FileUploadLabels, "errors">> & {
         errors?: Record<string, string>;
     };
 };
+/** 1000-based, matching how every file manager reports size. */
+export declare function formatSize(bytes: number): string;
 /**
  * A file dropzone with an accepted-file list, driven by seed-design's headless
  * engine so the behaviour — drag state, accept/reject, per-file upload status —

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

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

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

@@ -43,3 +43,75 @@ export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
      */
     suffix?: React.ReactNode;
 } & React.RefAttributes<HTMLInputElement>>;
+export type InputShellProps = React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof inputRecipe> & {
+    /**
+     * Tints the shell to match `Input`'s own read-only fill (crisp#634).
+     * `Input` derives this from the native `readOnly` attribute already on
+     * its `<input>`; `InputShell`'s children aren't necessarily a real
+     * form control (a CodeMirror instance, say), so there's no DOM
+     * attribute to read it off — an explicit prop instead.
+     */
+    readOnly?: boolean;
+    suffix?: React.ReactNode;
+};
+/**
+ * crisp#917: the same field chrome `Input` draws (border, focus ring,
+ * radius, size, invalid/read-only states) around arbitrary children instead
+ * of a hardcoded `<input>` — for a third-party editor (CodeMirror, a
+ * rich-text widget, a masked-input library) that needs to mount into a
+ * plain element rather than a native `<input>`.
+ *
+ * Deliberately NOT `asChild` (crisp's usual `Primitive`/`Slot` pattern, used
+ * by `Button`/`Chip`/`Avatar`/etc. elsewhere): those merge the shell's own
+ * props onto ONE child, replacing it outright — correct when the shell
+ * and the interactive surface are the same element. `Input`'s real shape is
+ * TWO parts, an outer shell hosting the `::after` focus ring plus an inner
+ * value that carries the actual text/interaction; a rich editor mounts its
+ * own DOM subtree inside a container div, which is exactly what `children`
+ * gives it, not what replacing a single node would.
+ *
+ * Only draws the OUTER shell (`inputRecipe`'s own class — border, ring,
+ * radius, size-driven height, background, `data-readonly` tint) around
+ * `children` unchanged, the same granularity GRC's own pre-existing
+ * workaround (internal/grc#159, reaching into `.crisp-input`/
+ * `.crisp-input--size_medium` by hand) already used — NOT `.crisp-input-
+ * value`'s own text-field resets (`border: none`, `padding-inline`, `font:
+ * inherit`, …), which assume a real `<input>` and would fight a rich
+ * editor's own internal layout. A child that wants to fill the shell the
+ * way `Input`'s own `<input>` does should set its own sizing (e.g. `flex: 1
+ * 1 auto; min-width: 0; width: 100%; height: 100%`), same as any block
+ * content dropped into an `inline-flex` container.
+ */
+export declare const InputShell: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
+    size: {
+        sm: string;
+        medium: string;
+        large: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        size: {
+            sm: string;
+            medium: string;
+            large: string;
+        };
+        invalid: {
+            true: string;
+            false: string;
+        };
+    }>;
+}> & {
+    /**
+     * Tints the shell to match `Input`'s own read-only fill (crisp#634).
+     * `Input` derives this from the native `readOnly` attribute already on
+     * its `<input>`; `InputShell`'s children aren't necessarily a real
+     * form control (a CodeMirror instance, say), so there's no DOM
+     * attribute to read it off — an explicit prop instead.
+     */
+    readOnly?: boolean;
+    suffix?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { MenuSheet, MenuSheetGroup, MenuSheetItem, type MenuSheetItemProps, type MenuSheetProps, } from "./menusheet";
+export { menusheetRecipe } from "./menusheet.recipe";

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+export type MenuSheetProps = Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children"> & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    footer?: React.ReactNode;
+    "aria-label"?: string;
+    children?: React.ReactNode;
+};
+/**
+ * A mobile menu sheet -- a focus-trapped bottom sheet (same Zag dialog
+ * machine as BottomSheet) whose body is a role=menu list, with the identical
+ * keyboard model Menu already uses: arrow keys move, Home/End jump,
+ * typeahead, Enter/Space select, Escape closes. Compose items with
+ * MenuSheetItem, and group a run of them in one rounded card with
+ * MenuSheetGroup.
+ */
+export declare function MenuSheet({ open, onOpenChange, title, description, footer, "aria-label": ariaLabel, children, className, "aria-describedby": describedBy, ...rest }: MenuSheetProps): React.JSX.Element | null;
+export declare namespace MenuSheet {
+    var displayName: string;
+}
+export declare function MenuSheetGroup({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export declare namespace MenuSheetGroup {
+    var displayName: string;
+}
+export type MenuSheetItemProps = {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    tone?: "neutral" | "critical";
+    disabled?: boolean;
+    onSelect?: () => void;
+    /** Keep the sheet open after selecting (default closes). */
+    closeOnSelect?: boolean;
+};
+export declare function MenuSheetItem({ children, icon, description, tone, disabled, onSelect, closeOnSelect, }: MenuSheetItemProps): React.JSX.Element;
+export declare namespace MenuSheetItem {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+export { type SnackbarOptions, SnackbarProvider, type SnackbarVariant, useSnackbar, } from "./snackbar";
+export { snackbarRecipe } from "./snackbar.recipe";

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+export type SnackbarVariant = "default" | "positive" | "critical";
+export type SnackbarOptions = {
+    message: React.ReactNode;
+    variant?: SnackbarVariant;
+    /** Auto-dismiss after this many ms (0 = sticky). Defaults to the provider's. */
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+type SnackbarApi = {
+    show: (o: SnackbarOptions) => number;
+    dismiss: (id: number) => void;
+};
+/**
+ * Wrap your app in a `SnackbarProvider`, then call `useSnackbar().show({...})`
+ * from anywhere to queue a bottom-anchored snackbar. Only one shows at a time
+ * (seed-design's mobile pattern, crisp#911) -- a second call queues behind the
+ * first and shows once it dismisses. Auto-dismisses after `duration` (default
+ * 4s; 0 keeps it until `dismiss()` or its action fires -- there is no close
+ * button, matching seed's own anatomy, which has none).
+ */
+export declare function SnackbarProvider({ children, duration, regionLabel: regionLabelProp, }: {
+    children: React.ReactNode;
+    duration?: number;
+    /** aria-label on the always-mounted notifications region (default
+     * "Notifications"). */
+    regionLabel?: string;
+}): React.JSX.Element;
+export declare namespace SnackbarProvider {
+    var displayName: string;
+}
+export declare function useSnackbar(): SnackbarApi;
+export {};

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

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