@cloudraker/reki 2.6.1

package/dist/src/components/command-palette/types.d.ts

@@ -0,0 +1,168 @@
+import { ReactNode, InputHTMLAttributes } from 'react';
+import { PortalContainer } from '../../utils/portal-provider';
+/** A single highlight range within a string [startIndex, endIndex] (inclusive) */
+export type HighlightRange = [number, number];
+/**
+ * Props for the CommandPalette.Root component - main dialog wrapper with Autocomplete
+ *
+ * Keyboard navigation (arrow keys, Enter) is enabled automatically via the Autocomplete primitive.
+ * The items array can be flat or grouped - the Autocomplete handles both patterns.
+ *
+ * @template TGroup - The type of items in the list (groups when using getSelectableItems)
+ * @template TItem - The type of selectable items (defaults to TGroup for flat lists)
+ */
+export interface CommandPaletteRootProps<TGroup, TItem = TGroup> {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Callback when the open state changes */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Optional callback when backdrop is clicked.
+     * Receives the mouse event for position tracking (e.g., for ripple effects).
+     * If not provided, backdrop click calls onOpenChange(false).
+     */
+    onBackdropClick?: (e: React.MouseEvent) => void;
+    /** Child components (Input, List, Footer, etc.) */
+    children: ReactNode;
+    /**
+     * Items for the command palette. Enables keyboard navigation (arrow keys, Enter).
+     * Can be a flat array or grouped items - use with Autocomplete.List render function.
+     */
+    items: TGroup[];
+    /** Controlled input value for the search */
+    value?: string;
+    /** Callback when input value changes */
+    onValueChange?: (value: string) => void;
+    /** Callback when an item is highlighted (arrow keys or hover) */
+    onItemHighlighted?: (item: TGroup | undefined, details: {
+        reason: string;
+        event: Event;
+        index: number;
+    }) => void;
+    /**
+     * Convert item to display string. Required when items are objects.
+     * Used for accessibility and typeahead search.
+     */
+    itemToStringValue?: (item: TGroup) => string;
+    /**
+     * Custom filter function. Return true to include item in results.
+     * Defaults to showing all items (consumer handles filtering).
+     */
+    filter?: (item: TGroup, query: string) => boolean;
+    /**
+     * Callback when an item is selected via Cmd/Ctrl+Enter keyboard shortcut.
+     * Receives the selectable item (TItem type when using getSelectableItems).
+     * newTab is always true for this callback (Cmd/Ctrl+Enter).
+     */
+    onSelect?: (item: TItem, options: {
+        newTab: boolean;
+    }) => void;
+    /**
+     * Function to get the flat list of selectable items from the items array.
+     * Required when using grouped items (e.g., items is an array of groups).
+     * If not provided, assumes items is a flat array of selectable items.
+     */
+    getSelectableItems?: (items: TGroup[]) => TItem[];
+    /**
+     * Container element for the portal. Use this to render the command palette inside
+     * a Shadow DOM or custom container. Overrides `RekiPortalProvider` context.
+     * @default document.body (or RekiPortalProvider container if set)
+     */
+    container?: PortalContainer;
+}
+/**
+ * Props for the CommandPalette.Item component - individual result item
+ * @template T - The type of the item value
+ */
+export interface CommandPaletteItemProps<T = unknown> {
+    /** The value associated with this item */
+    value: T;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Content to render inside the item */
+    children: ReactNode;
+    /** Click handler - use e.metaKey || e.ctrlKey to detect new tab intent */
+    onClick?: (e: React.MouseEvent) => void;
+}
+/**
+ * Props for the CommandPalette.Footer component - keyboard hints footer
+ */
+export interface CommandPaletteFooterProps {
+    /** Custom children to override default keyboard hints */
+    children?: ReactNode;
+}
+/**
+ * Props for the CommandPalette.List component - scrollable results container
+ */
+export interface CommandPaletteListProps {
+    /** Result items or groups to render */
+    children: ReactNode;
+}
+/**
+ * Props for the CommandPalette.Group component - category grouping
+ */
+export interface CommandPaletteGroupProps {
+    /** Group content (items) */
+    children: ReactNode;
+}
+/**
+ * Props for the CommandPalette.GroupLabel component - section header
+ */
+export interface CommandPaletteGroupLabelProps {
+    /** Label text to display */
+    children: ReactNode;
+}
+/**
+ * Props for the CommandPalette.Empty component - empty state
+ */
+export interface CommandPaletteEmptyProps {
+    /** Custom empty message, defaults to "No results found" */
+    children?: ReactNode;
+}
+/**
+ * Props for the CommandPalette.Loading component - loading state
+ */
+export interface CommandPaletteLoadingProps {
+    /** Optional custom loading content */
+    children?: ReactNode;
+}
+/**
+ * Props for the CommandPalette.ResultItem component - rich item with breadcrumbs and highlights
+ */
+export interface CommandPaletteResultItemProps<T = unknown> {
+    /** Item title text */
+    title: string;
+    /** Optional breadcrumb path parts displayed before the title (e.g., ["Compute (Workers)"] for "Compute (Workers) > VPC") */
+    breadcrumbs?: string[];
+    /** Highlight ranges for the title, from Fuse.js match indices */
+    titleHighlights?: HighlightRange[];
+    /** Highlight ranges for each breadcrumb, parallel array to breadcrumbs */
+    breadcrumbHighlights?: HighlightRange[][];
+    /** Optional description displayed after the title (for non-navigation items like search tips) */
+    description?: string;
+    /** Optional icon to display before the title */
+    icon?: ReactNode;
+    /** The value associated with this item (for Autocomplete) */
+    value: T;
+    /** Click handler - use e.metaKey || e.ctrlKey to detect new tab intent */
+    onClick: (e: React.MouseEvent) => void;
+    /** Whether to show arrow indicator on highlight (default: true) */
+    showArrow?: boolean;
+    /** Whether this links to an external URL (shows external icon) */
+    external?: boolean;
+    /** Whether this item is non-interactive (no hover/highlight) */
+    nonInteractive?: boolean;
+}
+/**
+ * Props for the CommandPalette.Input component - search input inside the palette.
+ *
+ * Extends standard HTML input attributes so you can pass props like
+ * `autoComplete`, `autoCorrect`, `autoCapitalize`, `spellCheck`, `data-*`, etc.
+ */
+export interface CommandPaletteInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "defaultValue" | "defaultChecked" | "color"> {
+    /** Optional leading content (e.g., back button) */
+    leading?: ReactNode;
+    /** Optional trailing content (e.g., Esc button) */
+    trailing?: ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/src/components/command-palette/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/command-palette/types.ts"],"names":[],"mappings":"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"}

package/dist/src/components/date-picker/date-picker.d.ts

@@ -0,0 +1,65 @@
+import { PropsBase, PropsSingle, PropsSingleRequired, PropsMulti, PropsMultiRequired, PropsRange, PropsRangeRequired } from 'react-day-picker';
+/** Base props shared across all DatePicker modes */
+type BaseProps = Omit<PropsBase, "classNames"> & {
+    /** Additional CSS classes merged via `cn()`. */
+    className?: string;
+    /** Custom class names for internal elements */
+    classNames?: PropsBase["classNames"];
+};
+/** Single date selection (optional) */
+type SingleProps = BaseProps & Omit<PropsSingle, "onSelect" | "classNames"> & {
+    onChange?: PropsSingle["onSelect"];
+};
+/** Single date selection (required) */
+type SingleRequiredProps = BaseProps & Omit<PropsSingleRequired, "onSelect" | "classNames"> & {
+    onChange?: PropsSingleRequired["onSelect"];
+};
+/** Multiple date selection (optional) */
+type MultipleProps = BaseProps & Omit<PropsMulti, "onSelect" | "classNames"> & {
+    onChange?: PropsMulti["onSelect"];
+};
+/** Multiple date selection (required) */
+type MultipleRequiredProps = BaseProps & Omit<PropsMultiRequired, "onSelect" | "classNames"> & {
+    onChange?: PropsMultiRequired["onSelect"];
+};
+/** Date range selection (optional) */
+type RangeProps = BaseProps & Omit<PropsRange, "onSelect" | "classNames"> & {
+    onChange?: PropsRange["onSelect"];
+};
+/** Date range selection (required) */
+type RangeRequiredProps = BaseProps & Omit<PropsRangeRequired, "onSelect" | "classNames"> & {
+    onChange?: PropsRangeRequired["onSelect"];
+};
+/**
+ * DatePicker props - discriminated union based on `mode`.
+ * Uses `onChange` instead of `onSelect` for Reki consistency.
+ * Full type inference is preserved via the discriminated union.
+ */
+export type DatePickerProps = SingleProps | SingleRequiredProps | MultipleProps | MultipleRequiredProps | RangeProps | RangeRequiredProps;
+/**
+ * DatePicker — a date selection calendar.
+ *
+ * Built on [react-day-picker](https://daypicker.dev) with Reki styling.
+ * Supports three selection modes: single, multiple, and range.
+ *
+ * @example
+ * ```tsx
+ * // Single date selection
+ * const [date, setDate] = useState<Date>();
+ * <DatePicker mode="single" selected={date} onChange={setDate} />
+ *
+ * // Multiple date selection
+ * const [dates, setDates] = useState<Date[]>([]);
+ * <DatePicker mode="multiple" selected={dates} onChange={setDates} max={5} />
+ *
+ * // Date range selection
+ * const [range, setRange] = useState<DateRange>();
+ * <DatePicker mode="range" selected={range} onChange={setRange} numberOfMonths={2} />
+ * ```
+ */
+export declare function DatePicker({ className, classNames, onChange, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DatePicker {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/src/components/date-picker/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,KAAK,kBAAkB,EACvB,KAAK,UAAU,EACf,KAAK,kBAAkB,EACxB,MAAM,kBAAkB,CAAC;AAW1B,oDAAoD;AACpD,KAAK,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG;IAC/C,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;CACtC,CAAC;AAEF,uCAAuC;AACvC,KAAK,WAAW,GAAG,SAAS,GAC1B,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC,GAAG;IAC7C,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;CACpC,CAAC;AAEJ,uCAAuC;AACvC,KAAK,mBAAmB,GAAG,SAAS,GAClC,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,YAAY,CAAC,GAAG;IACrD,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C,CAAC;AAEJ,yCAAyC;AACzC,KAAK,aAAa,GAAG,SAAS,GAC5B,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,YAAY,CAAC,GAAG;IAC5C,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CACnC,CAAC;AAEJ,yCAAyC;AACzC,KAAK,qBAAqB,GAAG,SAAS,GACpC,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,YAAY,CAAC,GAAG;IACpD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;CAC3C,CAAC;AAEJ,sCAAsC;AACtC,KAAK,UAAU,GAAG,SAAS,GACzB,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,YAAY,CAAC,GAAG;IAC5C,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CACnC,CAAC;AAEJ,sCAAsC;AACtC,KAAK,kBAAkB,GAAG,SAAS,GACjC,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,YAAY,CAAC,GAAG;IACpD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;CAC3C,CAAC;AAEJ;;;;GAIG;AACH,MAAM,MAAM,eAAe,GACvB,WAAW,GACX,mBAAmB,GACnB,aAAa,GACb,qBAAqB,GACrB,UAAU,GACV,kBAAkB,CAAC;AAEvB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,2CAqBjB;yBA1Be,UAAU"}

package/dist/src/components/date-picker/index.d.ts

@@ -0,0 +1,4 @@
+export { DatePicker } from './date-picker';
+export type { DatePickerProps } from './date-picker';
+export type { DateRange, DayPickerProps } from 'react-day-picker';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/date-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/src/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,125 @@
+/** DateRangePicker size and variant definitions mapping names to their Tailwind classes. */
+export declare const REKI_DATE_RANGE_PICKER_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "p-3 gap-2";
+            readonly cellHeight: "h-[22px]";
+            readonly cellWidth: "w-6";
+            readonly calendarWidth: "w-[168px]";
+            readonly textSize: "text-xs";
+            readonly iconSize: 14;
+            readonly description: "Compact calendar for tight spaces";
+        };
+        readonly base: {
+            readonly classes: "p-4 gap-2.5";
+            readonly cellHeight: "h-[26px]";
+            readonly cellWidth: "w-7";
+            readonly calendarWidth: "w-[196px]";
+            readonly textSize: "text-sm";
+            readonly iconSize: 16;
+            readonly description: "Default calendar size";
+        };
+        readonly lg: {
+            readonly classes: "p-5 gap-3";
+            readonly cellHeight: "h-[32px]";
+            readonly cellWidth: "w-9";
+            readonly calendarWidth: "w-[252px]";
+            readonly textSize: "text-base";
+            readonly iconSize: 18;
+            readonly description: "Large calendar for prominent date selection";
+        };
+    };
+    readonly variant: {
+        readonly default: {
+            readonly classes: "bg-reki-overlay";
+            readonly description: "Default calendar appearance";
+        };
+        readonly subtle: {
+            readonly classes: "bg-reki-base";
+            readonly description: "Subtle calendar with minimal background";
+        };
+    };
+};
+export declare const REKI_DATE_RANGE_PICKER_DEFAULT_VARIANTS: {
+    readonly size: "base";
+    readonly variant: "default";
+};
+export type RekiDateRangePickerSize = keyof typeof REKI_DATE_RANGE_PICKER_VARIANTS.size;
+export type RekiDateRangePickerVariant = keyof typeof REKI_DATE_RANGE_PICKER_VARIANTS.variant;
+export interface RekiDateRangePickerVariantsProps {
+    /**
+     * Calendar size.
+     * - `"sm"` — Compact calendar for tight spaces
+     * - `"base"` — Default calendar size
+     * - `"lg"` — Large calendar for prominent date selection
+     * @default "base"
+     */
+    size?: RekiDateRangePickerSize;
+    /**
+     * Visual variant.
+     * - `"default"` — Standard appearance with overlay background
+     * - `"subtle"` — Minimal background
+     * @default "default"
+     */
+    variant?: RekiDateRangePickerVariant;
+}
+export declare function dateRangePickerVariants({ size, variant, }?: RekiDateRangePickerVariantsProps): string;
+/**
+ * DateRangePicker component props.
+ *
+ * Dual-calendar date range selector with hover preview, timezone display, and reset support.
+ *
+ * @example
+ * ```tsx
+ * <DateRangePicker
+ *   onStartDateChange={(d) => setStart(d)}
+ *   onEndDateChange={(d) => setEnd(d)}
+ *   timezone="New York, NY, USA (GMT-4)"
+ * />
+ *
+ * // Compact variant
+ * <DateRangePicker
+ *   size="sm"
+ *   variant="subtle"
+ *   onStartDateChange={setStart}
+ *   onEndDateChange={setEnd}
+ * />
+ * ```
+ *
+ * @deprecated Use {@link DatePicker} with `mode="range"` instead.
+ */
+export interface DateRangePickerProps extends RekiDateRangePickerVariantsProps {
+    /** Callback fired when start date changes. Receives `null` on reset. */
+    onStartDateChange: (date: Date | null) => void;
+    /** Callback fired when end date changes. Receives `null` on reset. */
+    onEndDateChange: (date: Date | null) => void;
+    /**
+     * Display timezone string shown in the footer.
+     * @default "New York, NY, USA (GMT-4)"
+     */
+    timezone?: string;
+    /** Additional CSS classes merged via `cn()`. */
+    className?: string;
+}
+/**
+ * DateRangePicker — dual-calendar date range selector.
+ *
+ * Renders two side-by-side month calendars with click-to-select start/end dates,
+ * hover preview of the range, a timezone footer, and a reset button.
+ *
+ * @example
+ * ```tsx
+ * <DateRangePicker
+ *   onStartDateChange={setStart}
+ *   onEndDateChange={setEnd}
+ * />
+ * ```
+ *
+ * @deprecated Use {@link DatePicker} with `mode="range"` instead.
+ */
+export declare function DateRangePicker({ onStartDateChange, onEndDateChange, size, variant, timezone, className, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Use {@link DatePicker} with `mode="range"` instead.
+ */
+export default DateRangePicker;
+//# sourceMappingURL=date-range-picker.d.ts.map

package/dist/src/components/date-range-picker/date-range-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/date-range-picker.tsx"],"names":[],"mappings":"AAQA,4FAA4F;AAC5F,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwClC,CAAC;AAEX,eAAO,MAAM,uCAAuC;;;CAG1C,CAAC;AAGX,MAAM,MAAM,uBAAuB,GACjC,MAAM,OAAO,+BAA+B,CAAC,IAAI,CAAC;AACpD,MAAM,MAAM,0BAA0B,GACpC,MAAM,OAAO,+BAA+B,CAAC,OAAO,CAAC;AAEvD,MAAM,WAAW,gCAAgC;IAC/C;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,0BAA0B,CAAC;CACtC;AAED,wBAAgB,uBAAuB,CAAC,EACtC,IAAmD,EACnD,OAAyD,GAC1D,GAAE,gCAAqC,UAQvC;AAkBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,WAAW,oBAAqB,SAAQ,gCAAgC;IAC5E,wEAAwE;IACxE,iBAAiB,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,sEAAsE;IACtE,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAAC,EAC9B,iBAAiB,EACjB,eAAe,EACf,IAAmD,EACnD,OAAyD,EACzD,QAAsC,EACtC,SAAS,GACV,EAAE,oBAAoB,2CA8TtB;AA+KD;;GAEG;AACH,eAAe,eAAe,CAAC"}

package/dist/src/components/date-range-picker/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @deprecated Use {@link DatePicker} with `mode="range"` instead.
+ */
+export { default as DateRangePicker } from './date-range-picker';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/date-range-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -0,0 +1,242 @@
+import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
+import { Dialog as DialogBase } from '@base-ui/react/dialog';
+import { AlertDialog as AlertDialogBase } from '@base-ui/react/alert-dialog';
+import { PortalContainer } from '../../utils/portal-provider';
+/** Dialog size variant definitions mapping sizes to their minimum widths. */
+export declare const REKI_DIALOG_VARIANTS: {
+    readonly size: {
+        readonly base: {
+            readonly classes: "sm:min-w-96";
+            readonly description: "Default dialog width";
+        };
+        readonly sm: {
+            readonly classes: "min-w-72";
+            readonly description: "Small dialog for simple confirmations";
+        };
+        readonly lg: {
+            readonly classes: "min-w-[32rem]";
+            readonly description: "Large dialog for complex content";
+        };
+        readonly xl: {
+            readonly classes: "min-w-[48rem]";
+            readonly description: "Extra large dialog for detailed views";
+        };
+    };
+    readonly role: {
+        readonly dialog: {
+            readonly classes: "";
+            readonly description: "Standard dialog for general-purpose modals";
+        };
+        readonly alertdialog: {
+            readonly classes: "";
+            readonly description: "Alert dialog for confirmation flows requiring explicit user acknowledgment";
+        };
+    };
+};
+export declare const REKI_DIALOG_DEFAULT_VARIANTS: {
+    readonly size: "base";
+    readonly role: "dialog";
+};
+export declare const REKI_DIALOG_STYLING: {
+    readonly dimensions: {
+        readonly sm: {
+            readonly width: 350;
+            readonly titleSize: 20;
+            readonly descSize: 16;
+            readonly padding: 16;
+            readonly gap: 8;
+            readonly buttonSize: "sm";
+        };
+        readonly base: {
+            readonly width: 384;
+            readonly titleSize: 20;
+            readonly descSize: 16;
+            readonly padding: 24;
+            readonly gap: 16;
+            readonly buttonSize: "base";
+        };
+        readonly lg: {
+            readonly width: 512;
+            readonly titleSize: 20;
+            readonly descSize: 16;
+            readonly padding: 24;
+            readonly gap: 16;
+            readonly buttonSize: "base";
+        };
+        readonly xl: {
+            readonly width: 768;
+            readonly titleSize: 20;
+            readonly descSize: 16;
+            readonly padding: 24;
+            readonly gap: 16;
+            readonly buttonSize: "base";
+        };
+    };
+    readonly baseTokens: {
+        readonly background: "color-surface";
+        readonly text: "text-color-surface";
+        readonly borderRadius: 12;
+        readonly shadow: "shadow-m";
+    };
+    readonly backdrop: {
+        readonly background: "color-surface-secondary";
+        readonly opacity: 0.8;
+    };
+    readonly header: {
+        readonly title: {
+            readonly fontWeight: 600;
+            readonly color: "text-color-surface";
+        };
+        readonly closeIcon: {
+            readonly name: "ph-x";
+            readonly size: 20;
+            readonly color: "text-color-muted";
+        };
+    };
+    readonly description: {
+        readonly fontWeight: 400;
+        readonly color: "text-color-muted";
+    };
+    readonly buttons: {
+        readonly primary: {
+            readonly background: "color-primary";
+            readonly text: "white";
+        };
+        readonly secondary: {
+            readonly ring: "color-border";
+            readonly text: "text-color-surface";
+        };
+    };
+};
+export type RekiDialogSize = keyof typeof REKI_DIALOG_VARIANTS.size;
+export type RekiDialogRole = keyof typeof REKI_DIALOG_VARIANTS.role;
+export interface RekiDialogVariantsProps {
+    /**
+     * Dialog width.
+     * - `"sm"` — Small (min 288px) for simple confirmations
+     * - `"base"` — Default (min 384px)
+     * - `"lg"` — Large (min 512px) for complex content
+     * - `"xl"` — Extra large (min 768px) for detailed views
+     * @default "base"
+     */
+    size?: RekiDialogSize;
+}
+export declare function dialogVariants({ size, }?: RekiDialogVariantsProps): string;
+/**
+ * Dialog component props — the modal content panel.
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />
+ *   <Dialog className="p-8">
+ *     <Dialog.Title>Confirm Action</Dialog.Title>
+ *     <Dialog.Description>Are you sure?</Dialog.Description>
+ *     <Dialog.Close render={(p) => <Button {...p}>Cancel</Button>} />
+ *   </Dialog>
+ * </Dialog.Root>
+ * ```
+ */
+export type DialogProps = RekiDialogVariantsProps & {
+    /** Additional CSS classes merged via `cn()`. */
+    className?: string;
+    /** Dialog content (typically Title, Description, Close, and action buttons). */
+    children: ReactNode;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /**
+     * Container element for the portal. Use this to render the dialog inside
+     * a Shadow DOM or custom container. Overrides `RekiPortalProvider` context.
+     * @default document.body (or RekiPortalProvider container if set)
+     */
+    container?: PortalContainer;
+};
+/**
+ * Modal dialog overlay with backdrop. Compound component with `Dialog.Root`,
+ * `Dialog.Trigger`, `Dialog.Title`, `Dialog.Description`, and `Dialog.Close`.
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />
+ *   <Dialog className="p-8">
+ *     <Dialog.Title>Delete Item</Dialog.Title>
+ *     <Dialog.Description>This action cannot be undone.</Dialog.Description>
+ *     <Dialog.Close render={(p) => <Button variant="destructive" {...p}>Delete</Button>} />
+ *   </Dialog>
+ * </Dialog.Root>
+ * ```
+ *
+ * @example Alert Dialog for destructive actions
+ * ```tsx
+ * <Dialog.Root role="alertdialog">
+ *   <Dialog.Trigger render={(p) => <Button variant="destructive" {...p}>Delete Project</Button>} />
+ *   <Dialog className="p-8">
+ *     <Dialog.Title>Delete Project?</Dialog.Title>
+ *     <Dialog.Description>This action cannot be undone.</Dialog.Description>
+ *     <Dialog.Close render={(p) => <Button variant="secondary" {...p}>Cancel</Button>} />
+ *     <Dialog.Close render={(p) => <Button variant="destructive" {...p}>Delete</Button>} />
+ *   </Dialog>
+ * </Dialog.Root>
+ * ```
+ */
+declare function DialogContent({ className, children, style, size, container: containerProp, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+type BaseDialogRootProps = ComponentPropsWithoutRef<typeof DialogBase.Root>;
+type BaseAlertDialogRootProps = ComponentPropsWithoutRef<typeof AlertDialogBase.Root>;
+type StandardDialogRootProps = BaseDialogRootProps & {
+    /**
+     * The ARIA role for the dialog.
+     * - `"dialog"` — Standard dialog for general-purpose modals. Dismissible via outside click by default.
+     * - `"alertdialog"` — Alert dialog for destructive or confirmation flows. Not dismissible via outside click.
+     *
+     * Use `role="alertdialog"` for:
+     * - Destructive actions (delete, discard, remove)
+     * - Confirmation dialogs requiring explicit user acknowledgment
+     * - Actions that cannot be undone
+     *
+     * @default "dialog"
+     */
+    role?: "dialog";
+};
+type AlertDialogRootProps = BaseAlertDialogRootProps & {
+    role: "alertdialog";
+};
+export type DialogRootProps = StandardDialogRootProps | AlertDialogRootProps;
+declare function DialogRoot(props: DialogRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DialogRoot {
+    var displayName: string;
+}
+type BaseDialogTriggerProps = ComponentPropsWithoutRef<typeof DialogBase.Trigger>;
+type BaseAlertDialogTriggerProps = ComponentPropsWithoutRef<typeof AlertDialogBase.Trigger>;
+export type DialogTriggerProps = BaseDialogTriggerProps | BaseAlertDialogTriggerProps;
+declare function DialogTrigger({ children, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DialogTrigger {
+    var displayName: string;
+}
+type BaseDialogTitleProps = ComponentPropsWithoutRef<typeof DialogBase.Title>;
+export type DialogTitleProps = BaseDialogTitleProps;
+declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DialogTitle {
+    var displayName: string;
+}
+type BaseDialogDescriptionProps = ComponentPropsWithoutRef<typeof DialogBase.Description>;
+export type DialogDescriptionProps = BaseDialogDescriptionProps;
+declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DialogDescription {
+    var displayName: string;
+}
+type BaseDialogCloseProps = ComponentPropsWithoutRef<typeof DialogBase.Close>;
+export type DialogCloseProps = BaseDialogCloseProps;
+declare function DialogClose({ children, ...props }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DialogClose {
+    var displayName: string;
+}
+declare const Dialog: typeof DialogContent & {
+    Root: typeof DialogRoot;
+    Trigger: typeof DialogTrigger;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Close: typeof DialogClose;
+};
+export { Dialog, DialogRoot, DialogTrigger, DialogTitle, DialogDescription, DialogClose, };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/src/components/dialog/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { Dialog, DialogRoot, DialogTrigger, DialogTitle, DialogDescription, DialogClose, type DialogProps, type DialogRootProps, type DialogTriggerProps, type DialogTitleProps, type DialogDescriptionProps, type DialogCloseProps, } from './dialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,UAAU,EACV,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,GACtB,MAAM,UAAU,CAAC"}