canny-ui-react 1.0.0 → 3.0.0

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+type RootSingle = ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    type: 'single';
+};
+type RootMultiple = ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    type: 'multiple';
+};
+export type AccordionProps = (RootSingle | RootMultiple) & {
+    variant?: 'plain' | 'bordered' | 'separated';
+};
+export declare const Accordion: import("react").ForwardRefExoticComponent<((Omit<AccordionPrimitive.AccordionSingleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    type: "single";
+} & {
+    variant?: "plain" | "bordered" | "separated";
+}) | (Omit<AccordionPrimitive.AccordionMultipleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    type: "multiple";
+} & {
+    variant?: "plain" | "bordered" | "separated";
+})) & import("react").RefAttributes<HTMLDivElement>>;
+export type AccordionItemProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface AccordionTriggerProps extends ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+    /** Optional leading icon in the trigger row. */
+    icon?: ReactNode;
+    /** Hide the chevron indicator. */
+    hideIndicator?: boolean;
+}
+export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type AccordionContentProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
+export declare const AccordionContent: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
+export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps } from './Accordion';

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

@@ -5,4 +5,12 @@ export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     solid?: boolean;
     title?: ReactNode;
     children?: ReactNode;
+    /** Custom icon node. Pass `false` to hide the default icon. */
+    icon?: ReactNode | false;
+    /** Inline action slot — a button or link rendered on the right. */
+    action?: ReactNode;
+    /** When provided, renders a close button that invokes this callback. */
+    onDismiss?: () => void;
+    /** Accessible label for the dismiss button. */
+    dismissLabel?: string;
 }

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,19 @@
+import type { AutocompleteProps } from './Autocomplete.types';
+/**
+ * Searchable combobox. Single or multi-select. Built on @radix-ui/react-popover
+ * for positioning + cmdk for filter / keyboard nav. Replaces MUI's
+ * `Autocomplete` with a more compact API.
+ *
+ * @example
+ *   <Autocomplete
+ *     options={[
+ *       { value: 'eng', label: 'Engineering', group: 'Departments' },
+ *       { value: 'des', label: 'Design',      group: 'Departments' },
+ *     ]}
+ *     placeholder="Pick a department"
+ *     onValueChange={(v) => console.log(v)}
+ *   />
+ *
+ *   <Autocomplete multiple options={…} placeholder="Pick attendees" />
+ */
+export declare const Autocomplete: import("react").ForwardRefExoticComponent<AutocompleteProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react';
+export interface AutocompleteOption {
+    /** Stable identifier — what gets stored in `value`. */
+    value: string;
+    /** Visible label. */
+    label: string;
+    /** Optional group heading. Options with the same `group` cluster together. */
+    group?: string;
+    /** Disable selection of this option. */
+    disabled?: boolean;
+    /** Right-aligned secondary text (e.g. department, hint). */
+    hint?: ReactNode;
+    /** Leading icon node (overrides the avatar character). */
+    icon?: ReactNode;
+}
+export type AutocompleteSize = 'sm' | 'md' | 'lg';
+export type AutocompleteColor = 'primary' | 'danger' | 'warning' | 'success';
+interface AutocompleteBase {
+    /** Flat list of options. */
+    options: AutocompleteOption[];
+    /** Trigger placeholder when nothing is selected. */
+    placeholder?: string;
+    /** Search input placeholder inside the dropdown. */
+    searchPlaceholder?: string;
+    /** Empty-state when no options match the search. */
+    emptyText?: ReactNode;
+    /** Show a loading spinner inside the dropdown. */
+    loading?: boolean;
+    /** Loading-state text. */
+    loadingText?: ReactNode;
+    /** Trigger size. */
+    size?: AutocompleteSize;
+    /** Validation color on the trigger. */
+    color?: AutocompleteColor;
+    /** Disable the entire control. */
+    disabled?: boolean;
+    /** Show a clear button when something is selected. */
+    clearable?: boolean;
+    /** Field-threading: id forwarded to the trigger. */
+    id?: string;
+    /** Field-threading: forwarded ARIA. */
+    'aria-invalid'?: boolean;
+    /** Field-threading: forwarded ARIA. */
+    'aria-describedby'?: string;
+    /** Accessible label when no `<Field>` wraps the control. */
+    'aria-label'?: string;
+    /** Custom className on the trigger. */
+    className?: string;
+}
+export interface AutocompleteSingleProps extends AutocompleteBase {
+    multiple?: false;
+    /** Controlled selected value. */
+    value?: string | null;
+    /** Uncontrolled initial value. */
+    defaultValue?: string | null;
+    /** Fires on selection change. */
+    onValueChange?: (value: string | null) => void;
+}
+export interface AutocompleteMultipleProps extends AutocompleteBase {
+    multiple: true;
+    /** Controlled selected values. */
+    value?: string[];
+    /** Uncontrolled initial values. */
+    defaultValue?: string[];
+    /** Fires on selection change. */
+    onValueChange?: (value: string[]) => void;
+    /** Cap on how many can be selected. */
+    maxItems?: number;
+}
+export type AutocompleteProps = AutocompleteSingleProps | AutocompleteMultipleProps;
+export {};

package/dist/components/Autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export { Autocomplete } from './Autocomplete';
+export type { AutocompleteOption, AutocompleteProps, AutocompleteSingleProps, AutocompleteMultipleProps, AutocompleteSize, AutocompleteColor, } from './Autocomplete.types';

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+    /** Custom render — e.g. `<Link>`. Receives the rendered label. */
+    render?: (label: ReactNode) => ReactNode;
+}
+export interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    items: BreadcrumbItem[];
+    /** Separator node between items. Default: chevron. */
+    separator?: ReactNode;
+    size?: 'sm' | 'md';
+}
+export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+export type ChipColor = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
+export type ChipSize = 'sm' | 'md';
+export type ChipVariant = 'soft' | 'outline' | 'solid';
+export interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onSelect'> {
+    /** Color/variant tone. Default: `default`. */
+    color?: ChipColor;
+    /** Visual style. Default: `soft`. */
+    variant?: ChipVariant;
+    /** Size preset. Default: `md`. */
+    size?: ChipSize;
+    /** Leading icon or avatar node. */
+    icon?: ReactNode;
+    /** Avatar node (rendered before icon if both supplied). */
+    avatar?: ReactNode;
+    /** When provided, renders an X button that calls this. */
+    onDelete?: MouseEventHandler<HTMLButtonElement>;
+    /** Accessible label for the delete button. Default: `Remove`. */
+    deleteLabel?: string;
+    /** Make the chip itself clickable (becomes role=button). */
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+    /** Disabled visual + non-interactive. */
+    disabled?: boolean;
+    /** The chip's text/content. */
+    children: ReactNode;
+}
+/**
+ * Compact label primitive for tags, statuses, filter pills, and selected items.
+ * Six color tones × three variants. Optional leading icon/avatar and trailing
+ * delete button.
+ *
+ * @example
+ *   <Chip color="success">Active</Chip>
+ *   <Chip color="primary" variant="outline" onDelete={() => …}>Engineering</Chip>
+ *   <Chip avatar={<Avatar size="xs">PS</Avatar>}>Premkumar S.</Chip>
+ */
+export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps, ChipColor, ChipSize, ChipVariant } from './Chip';

package/dist/components/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,31 @@
+import type { CommandPaletteProps, CommandPaletteTriggerProps, UseCommandPaletteOptions, UseCommandPaletteReturn } from './CommandPalette.types';
+/**
+ * Hook that manages open state and binds the ⌘K / Ctrl+K hotkey.
+ * Pass `{ hotkey: false }` to opt out and wire your own toggle.
+ */
+export declare function useCommandPalette({ hotkey }?: UseCommandPaletteOptions): UseCommandPaletteReturn;
+/**
+ * Command palette — keyboard-driven search overlay built on cmdk + Radix Dialog.
+ * Render once near the root of your app; use `useCommandPalette()` (or your own
+ * state) to control `open`.
+ *
+ * @example
+ * const { open, setOpen } = useCommandPalette();
+ * <CommandPalette
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   sections={[
+ *     { title: 'Pages', items: [{ id: '/', label: 'Home', href: '/' }] },
+ *   ]}
+ *   onItemSelect={(item) => item.href && router.push(item.href)}
+ * />
+ */
+export declare function CommandPalette({ open, onOpenChange, sections, placeholder, title, description, emptyText, footer, onItemSelect, contentClassName, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Pill-shaped trigger button for the command palette. Use in a Navbar or
+ * anywhere you want a visible search affordance.
+ *
+ * @example
+ * <CommandPaletteTrigger onClick={() => setOpen(true)} />
+ */
+export declare function CommandPaletteTrigger({ onClick, label, shortcut, className, }: CommandPaletteTriggerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react';
+export interface CommandPaletteItem {
+    /** Stable identifier — used as React key. */
+    id: string;
+    /** Visible label. */
+    label: string;
+    /** When provided, selecting the item navigates to this href via `onItemSelect` (consumer wires the router). */
+    href?: string;
+    /** Custom select handler — overrides default href navigation. */
+    onSelect?: () => void;
+    /** Additional searchable terms beyond the label. */
+    keywords?: string[];
+    /** Right-aligned badge (e.g. "new"). */
+    badge?: ReactNode;
+    /** Leading icon. Defaults to a section-derived icon if not provided. */
+    icon?: ReactNode;
+    /** Right-aligned hint text (e.g. a path). */
+    hint?: ReactNode;
+    /** Disable selection. */
+    disabled?: boolean;
+}
+export interface CommandPaletteSection {
+    /** Group heading rendered above items. */
+    title: string;
+    /** Items in this group. */
+    items: CommandPaletteItem[];
+}
+export interface CommandPaletteProps {
+    /** Controlled open state. */
+    open: boolean;
+    /** Open-state setter. */
+    onOpenChange: (open: boolean) => void;
+    /** Grouped item sections. */
+    sections: CommandPaletteSection[];
+    /** Search input placeholder. */
+    placeholder?: string;
+    /** Title for assistive tech (visually hidden). */
+    title?: string;
+    /** Description for assistive tech (visually hidden). */
+    description?: string;
+    /** Empty-state content. */
+    emptyText?: ReactNode;
+    /** Footer content. Defaults to keyboard hints. Pass `false` to hide. */
+    footer?: ReactNode | false;
+    /**
+     * Fires when the user selects an item. Use this to navigate via your router.
+     * If the item has its own `onSelect`, that runs first.
+     */
+    onItemSelect?: (item: CommandPaletteItem) => void;
+    /** Extra className on the dialog content. */
+    contentClassName?: string;
+}
+export interface CommandPaletteTriggerProps {
+    /** Click handler — usually `() => setOpen(true)`. */
+    onClick: () => void;
+    /** Visible label. */
+    label?: string;
+    /** Keyboard shortcut hint. Defaults to "⌘K". */
+    shortcut?: string;
+    /** Extra className. */
+    className?: string;
+}
+export interface UseCommandPaletteOptions {
+    /** Bind the ⌘K / Ctrl+K hotkey. Default: true. */
+    hotkey?: boolean;
+}
+export interface UseCommandPaletteReturn {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    toggle: () => void;
+}

package/dist/components/CommandPalette/index.d.ts

@@ -0,0 +1,2 @@
+export { CommandPalette, CommandPaletteTrigger, useCommandPalette } from './CommandPalette';
+export type { CommandPaletteItem, CommandPaletteSection, CommandPaletteProps, CommandPaletteTriggerProps, UseCommandPaletteOptions, UseCommandPaletteReturn, } from './CommandPalette.types';

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerProps } from './DatePicker.types';
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,83 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { WeekDay } from './dateUtils';
+export type DatePickerSize = 'sm' | 'md' | 'lg';
+export type DatePickerColor = 'primary' | 'danger' | 'warning' | 'success';
+export type DatePickerMode = 'date' | 'month' | 'year' | 'time' | 'datetime';
+/**
+ * Declarative date-window constraint.
+ * - `'any'` (default): no restriction
+ * - `'future'`: today and later
+ * - `'past'`: today and earlier
+ * - `'current'`: today only
+ *
+ * Combines with explicit `min` / `max` — the stricter of the two always wins.
+ */
+export type DatePickerAllow = 'any' | 'future' | 'past' | 'current';
+export interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'children'> {
+    /** Which picker to show. */
+    mode?: DatePickerMode;
+    /** Controlled value. `null` means cleared. */
+    value?: Date | string | null;
+    /** Uncontrolled initial value. */
+    defaultValue?: Date | string;
+    /** Fires on selection and clear. */
+    onChange?: (date: Date | null) => void;
+    /** Earliest selectable date (inclusive). */
+    min?: Date | string;
+    /** Latest selectable date (inclusive). */
+    max?: Date | string;
+    /** Declarative date-window constraint. Combines with `min`/`max` (stricter wins). */
+    allow?: DatePickerAllow;
+    /** Predicate to disable arbitrary dates (ignored for time-only mode). */
+    disabledDate?: (date: Date) => boolean;
+    /** Predicate to disable specific times (hour/minute/second combos). */
+    disabledTime?: (date: Date) => boolean;
+    /** Text shown when empty. */
+    placeholder?: string;
+    /** Trigger size. */
+    size?: DatePickerSize;
+    /** Validation color on the trigger. Auto-flips to `'danger'` on validation errors. */
+    color?: DatePickerColor;
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Show a clear button when a value is selected. */
+    clearable?: boolean;
+    /** BCP-47 locale tag. Defaults to the browser's. */
+    locale?: string;
+    /** 0 = Sunday, 1 = Monday, …, 6 = Saturday. Defaults to 0. */
+    weekStartsOn?: WeekDay;
+    /** Use 12-hour clock with AM/PM for time / datetime. Default: inferred from locale. */
+    hour12?: boolean;
+    /** Show a seconds column in time / datetime. */
+    showSeconds?: boolean;
+    /** Minute granularity (1–30). Default 1. */
+    minuteStep?: number;
+    /** Second granularity (1–30). Default 1. */
+    secondStep?: number;
+    /** Custom display formatter for the selected value. */
+    format?: (date: Date, mode: DatePickerMode) => string;
+    /** Replace the trigger icon. */
+    icon?: ReactNode;
+    /** Required — empty value is treated as invalid. */
+    required?: boolean;
+    /** Custom validator. Returns an error message or null/undefined if valid. */
+    validate?: (date: Date | null) => string | null | undefined;
+    /** Explicit error message. When set, forces danger state and renders below the trigger. */
+    error?: ReactNode;
+    /** Fires whenever the internal validation state changes. */
+    onValidate?: (error: string | null) => void;
+    /** id forwarded to the trigger (for Field integration). */
+    id?: string;
+    /** aria-invalid forwarded to the trigger. */
+    'aria-invalid'?: boolean;
+    /** aria-describedby forwarded to the trigger. */
+    'aria-describedby'?: string;
+    /** Accessible label for the dialog. */
+    dialogLabel?: string;
+    /** Name for form submission. */
+    name?: string;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+}

package/dist/components/DatePicker/dateUtils.d.ts

@@ -0,0 +1,28 @@
+export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export declare function startOfDay(d: Date): Date;
+export declare function endOfDay(d: Date): Date;
+export declare function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean;
+export declare function isSameMonth(a: Date, b: Date): boolean;
+export declare function isSameYear(a: Date, b: Date): boolean;
+export declare function startOfMonth(d: Date): Date;
+export declare function startOfYear(d: Date): Date;
+export declare function startOfDecade(d: Date): Date;
+export declare function addMonths(d: Date, n: number): Date;
+export declare function addDays(d: Date, n: number): Date;
+export declare function addYears(d: Date, n: number): Date;
+export declare function withTime(d: Date, h: number, m: number, s?: number): Date;
+export declare function clamp(d: Date, min?: Date | null, max?: Date | null): Date;
+/** 6×7 grid (42 cells) starting on `weekStartsOn`. */
+export declare function buildMonthGrid(viewDate: Date, weekStartsOn: WeekDay): Date[];
+export declare function weekdayLabels(locale: string, weekStartsOn: WeekDay): string[];
+export declare function monthLabels(locale: string, style?: 'short' | 'long'): string[];
+export declare function formatMonthYear(d: Date, locale: string): string;
+export declare function formatYearOnly(d: Date, locale: string): string;
+export declare function formatMonthOnly(d: Date, locale: string): string;
+export declare function formatMedium(d: Date, locale: string): string;
+export declare function formatTime(d: Date, locale: string, hour12: boolean, showSeconds: boolean): string;
+export declare function formatDateTime(d: Date, locale: string, hour12: boolean, showSeconds: boolean): string;
+export declare function parseDate(input: Date | string | null | undefined): Date | null;
+export declare function isBefore(a: Date, b: Date): boolean;
+export declare function isAfter(a: Date, b: Date): boolean;
+export declare function pad2(n: number): string;

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps, DatePickerSize, DatePickerColor } from './DatePicker.types';

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as RadixDialog from '@radix-ui/react-dialog';
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export interface DialogProps extends ComponentPropsWithoutRef<typeof RadixDialog.Root> {
+    /** Title rendered as the visible h2. Required for accessibility. */
+    title: ReactNode;
+    /** Optional descriptive subhead under the title. */
+    description?: ReactNode;
+    /** Body content (forms, copy, lists). */
+    children?: ReactNode;
+    /** Footer node (typically a Button row). */
+    footer?: ReactNode;
+    /** Width preset. Default: `md`. */
+    size?: DialogSize;
+    /** Hide the built-in X close button. */
+    hideClose?: boolean;
+    /** Extra className on the dialog content. */
+    className?: string;
+}
+/**
+ * Modal dialog built on @radix-ui/react-dialog. Includes a backdrop, focus trap,
+ * Esc-to-close, scroll lock, and an accessible title/description out of the box.
+ *
+ * @example
+ *   const [open, setOpen] = useState(false);
+ *   <Dialog open={open} onOpenChange={setOpen} title="Confirm delete">
+ *     This action can't be undone.
+ *   </Dialog>
+ */
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;
+/** Trigger button to open a Dialog when wired with a controlled root. */
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** Close button — typically used inside the body or footer. */
+export declare const DialogClose: import("react").ForwardRefExoticComponent<RadixDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { Dialog, DialogTrigger, DialogClose } from './Dialog';
+export type { DialogProps, DialogSize } from './Dialog';

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as RadixDialog from '@radix-ui/react-dialog';
+export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface DrawerProps extends ComponentPropsWithoutRef<typeof RadixDialog.Root> {
+    /** Visible heading for the drawer. Required for AT. */
+    title: ReactNode;
+    /** Optional subhead under the title. */
+    description?: ReactNode;
+    /** Body content. */
+    children?: ReactNode;
+    /** Footer (typically Buttons). */
+    footer?: ReactNode;
+    /** Edge the drawer slides in from. Default: `right`. */
+    side?: DrawerSide;
+    /** Width preset (for left/right) or height preset (for top/bottom). Default: `md`. */
+    size?: DrawerSize;
+    /** Hide the built-in X close button. */
+    hideClose?: boolean;
+    /** Extra className on the drawer content. */
+    className?: string;
+}
+/**
+ * Off-canvas drawer / sheet. Slides in from any edge. Built on
+ * @radix-ui/react-dialog so it gets focus trapping, Esc-to-close, scroll
+ * lock, and accessibility for free.
+ *
+ * @example
+ *   <Drawer open={open} onOpenChange={setOpen} side="right" title="Settings">
+ *     <SettingsForm />
+ *   </Drawer>
+ */
+export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerTrigger: import("react").ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DrawerClose: import("react").ForwardRefExoticComponent<RadixDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer, DrawerTrigger, DrawerClose } from './Drawer';
+export type { DrawerProps, DrawerSide, DrawerSize } from './Drawer';

package/dist/components/Layout/AspectRatio.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface AspectRatioProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Ratio = width / height. e.g. 16/9, 4/3, 1, 21/9. Default 16/9. */
+    ratio?: number;
+    children?: ReactNode;
+}
+/**
+ * Locks a child to a fixed aspect ratio. Useful for video/image tiles,
+ * map embeds, and avatar grids. Pure CSS via `aspect-ratio`.
+ */
+export declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Layout/Center.d.ts

@@ -0,0 +1,7 @@
+import type { ElementType, ForwardedRef, ReactElement } from 'react';
+import type { BoxProps } from './Box';
+export type CenterProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'display' | 'align' | 'justify'>;
+/** Flex-centers its children (both axes). */
+export declare const Center: <E extends ElementType = "div">(props: CenterProps<E> & {
+    ref?: ForwardedRef<Element>;
+}) => ReactElement;

package/dist/components/Layout/Grid.d.ts

@@ -2,9 +2,15 @@ import type { ElementType, ForwardedRef, ReactElement } from 'react';
 import type { BoxProps } from './Box';
 type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export type GridProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'display' | 'direction'> & {
+    /** Fixed column count. Maps to `.grid-cols-{n}` utility. Ignored if `minColWidth` is set. */
     cols?: GridCols;
+    /**
+     * Auto-fit responsive grid: `repeat(auto-fit, minmax(minColWidth, 1fr))`.
+     * Pass a CSS length (e.g. `'240px'`, `'18rem'`).
+     */
+    minColWidth?: string;
 };
-/** CSS Grid container. `cols` maps to `.grid-cols-{n}` utility. */
+/** CSS Grid container. Use `cols` for fixed tracks, or `minColWidth` for responsive auto-fit. */
 export declare const Grid: <E extends ElementType = "div">(props: GridProps<E> & {
     ref?: ForwardedRef<Element>;
 }) => ReactElement;

package/dist/components/Layout/Group.d.ts

@@ -0,0 +1,10 @@
+import type { ElementType, ForwardedRef, ReactElement } from 'react';
+import type { BoxProps } from './Box';
+export type GroupProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'direction' | 'display'>;
+/**
+ * Horizontal flex row tuned for toolbars / trigger groups.
+ * Defaults: align center, gap 2, wrap on overflow.
+ */
+export declare const Group: <E extends ElementType = "div">(props: GroupProps<E> & {
+    ref?: ForwardedRef<Element>;
+}) => ReactElement;

package/dist/components/Layout/index.d.ts

@@ -4,10 +4,16 @@ export { Grid } from './Grid';
 export { Container } from './Container';
 export { Divider } from './Divider';
 export { Spacer } from './Spacer';
+export { AspectRatio } from './AspectRatio';
+export { Center } from './Center';
+export { Group } from './Group';
 export type { BoxProps } from './Box';
 export type { StackProps, RowProps } from './Stack';
 export type { GridProps } from './Grid';
 export type { ContainerProps, ContainerSize } from './Container';
 export type { DividerProps } from './Divider';
 export type { SpacerProps } from './Spacer';
+export type { AspectRatioProps } from './AspectRatio';
+export type { CenterProps } from './Center';
+export type { GroupProps } from './Group';
 export type { Space, Align, Justify, Direction, Display, LayoutProps } from './layout.types';

package/dist/components/List/List.d.ts

@@ -0,0 +1,42 @@
+import type { ElementType, HTMLAttributes, ReactNode, MouseEventHandler } from 'react';
+export type ListVariant = 'plain' | 'bordered' | 'dividers';
+export type ListSize = 'sm' | 'md' | 'lg';
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    /** Visual style. Default: `dividers`. */
+    variant?: ListVariant;
+    /** Row size. Default: `md`. */
+    size?: ListSize;
+    /** Use this when items have explicit dividers via `<ListSeparator>` to
+     * disable automatic divider rendering. */
+    dense?: boolean;
+}
+export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLUListElement>>;
+export interface ListItemProps {
+    /** Leading icon or avatar. */
+    leading?: ReactNode;
+    /** Trailing actions (button, chip, badge). */
+    trailing?: ReactNode;
+    /** Primary text — bold/regular depending on variant. */
+    primary?: ReactNode;
+    /** Secondary text — muted, single-line by default. */
+    secondary?: ReactNode;
+    /** Whole-row click handler. Becomes role=button. */
+    onClick?: MouseEventHandler<HTMLLIElement>;
+    /** Render the row as a link by passing an `href`. */
+    href?: string;
+    /** Disable interactivity + visual. */
+    disabled?: boolean;
+    /** Render as currently-active row. */
+    active?: boolean;
+    /** Override the rendered element (default: `li`, `a` if href, `button` if onClick). */
+    as?: ElementType;
+    /** Accessible name override (when `primary` isn't a string). */
+    'aria-label'?: string;
+    /** Free-form children — overrides the leading/primary/secondary/trailing slots. */
+    children?: ReactNode;
+    /** Extra className. */
+    className?: string;
+}
+export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLElement>>;
+export declare const ListSeparator: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+export declare const ListSubheader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/components/List/index.d.ts

@@ -0,0 +1,2 @@
+export { List, ListItem, ListSeparator, ListSubheader } from './List';
+export type { ListProps, ListItemProps, ListVariant, ListSize } from './List';