@geomak/ui 6.20.0 → 6.21.0

package/dist/index.d.cts

@@ -628,6 +628,91 @@ interface IconButtonProps {
  */
 declare function IconButton({ icon, onClick, type, buttonType, disabled, size, loading, loadingIcon, title, className, style, }: IconButtonProps): react_jsx_runtime.JSX.Element;
 
+interface ButtonProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'content'> {
+    /** Button content (text or nodes). */
+    content?: React__default.ReactNode;
+    /** Visual style variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'warning' | 'success' | 'info';
+    /** Size — controls height, padding, and font size */
+    size?: 'sm' | 'md' | 'lg';
+    /** HTML button type */
+    buttonType?: 'button' | 'submit' | 'reset';
+    /** Show a loading spinner and disable the control. */
+    loading?: boolean;
+    /** Leading icon — rendered before content */
+    icon?: React__default.ReactNode;
+    /**
+     * @deprecated Pass `variant` instead. Kept for API compat — currently no-op.
+     * Will be removed in the next major version.
+     */
+    type?: string;
+}
+/**
+ * Primary action button with variant + size system.
+ *
+ * Width is never hardcoded — set `style={{ width }}` or let the parent grid/flex control it.
+ * Uses `React.forwardRef` so it works as a Radix `asChild` trigger (Popover, Tooltip, etc.).
+ *
+ * @example
+ * <Button content="Save" onClick={handleSave} />
+ * <Button content="Delete" variant="danger" size="sm" />
+ * <Button content="Cancel" variant="secondary" />
+ * <Button content="Loading…" loading buttonType="submit" />
+ */
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface MenuButtonItem {
+    /** Stable key. */
+    key: string | number;
+    /** Row label. */
+    label: React__default.ReactNode;
+    /** Leading icon. */
+    icon?: React__default.ReactNode;
+    /** Fired on select (click / Enter / Space). */
+    onSelect?: () => void;
+    disabled?: boolean;
+    /** Destructive styling (red). */
+    danger?: boolean;
+    /** Render a divider above this item. */
+    separatorBefore?: boolean;
+}
+interface MenuButtonProps {
+    /** Trigger label. */
+    label?: React__default.ReactNode;
+    /** The menu rows. */
+    items: MenuButtonItem[];
+    /** Trigger button variant. Default `'secondary'`. */
+    variant?: ButtonProps['variant'];
+    /** Trigger button size. Default `'md'`. */
+    size?: ButtonProps['size'];
+    /** Leading icon on the trigger. */
+    icon?: React__default.ReactNode;
+    /** Hide the trailing chevron. */
+    hideChevron?: boolean;
+    disabled?: boolean;
+    /** Menu alignment to the trigger. Default `'start'`. */
+    align?: 'start' | 'center' | 'end';
+    /** Side to open on. Default `'bottom'`. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    className?: string;
+}
+/**
+ * A {@link Button} that opens a dropdown menu of actions, built on Radix
+ * DropdownMenu (full keyboard nav, focus management, typeahead, and ARIA).
+ * Pass the rows as `items`; the trailing chevron flips while the menu is open.
+ *
+ * @example
+ * <MenuButton
+ *   label="Actions"
+ *   items={[
+ *     { key: 'edit', label: 'Edit', icon: <EditIcon />, onSelect: edit },
+ *     { key: 'dup', label: 'Duplicate', onSelect: duplicate },
+ *     { key: 'del', label: 'Delete', danger: true, separatorBefore: true, onSelect: remove },
+ *   ]}
+ * />
+ */
+declare function MenuButton({ label, items, variant, size, icon, hideChevron, disabled, align, side, className, }: MenuButtonProps): react_jsx_runtime.JSX.Element;
+
 type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 interface ModalProps {
     /**
@@ -1028,6 +1113,94 @@ interface BadgeProps {
  */
 declare function Badge({ children, tone, variant, size, icon, count, max, dot, showZero, className, style, }: BadgeProps): react_jsx_runtime.JSX.Element;
 
+type StepperActiveStatus = 'active' | 'loading' | 'error';
+interface StepperStep {
+    key: string | number;
+    title: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    /** Custom indicator content (overrides the default number / check). */
+    icon?: React__default.ReactNode;
+}
+interface StepperProps {
+    steps: StepperStep[];
+    /** Index of the active step (0-based). Steps before it render completed. */
+    current: number;
+    /**
+     * Status of the *active* step. `'loading'` shows a spinner (for async
+     * steps); `'error'` marks it failed. Default `'active'`.
+     */
+    status?: StepperActiveStatus;
+    /** Layout. Default `'horizontal'`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Switch horizontal → vertical below the `md` breakpoint. Default `true`. */
+    responsive?: boolean;
+    /** Make completed / visited steps clickable. */
+    onStepClick?: (index: number) => void;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+/**
+ * A configurable steps indicator for multi-step flows — wizards, onboarding,
+ * async pipelines. Completed steps show a check, the active step is highlighted
+ * (or a spinner via `status="loading"` for async work, or an error mark), and
+ * the connectors fill up to the current step. Horizontal or vertical, with an
+ * optional responsive collapse to vertical on small screens.
+ *
+ * Controlled: you own `current` (and `status` for the active step).
+ *
+ * @example
+ * <Stepper current={step} status={saving ? 'loading' : 'active'} steps={[
+ *   { key: 'cart', title: 'Cart', description: '3 items' },
+ *   { key: 'pay',  title: 'Payment' },
+ *   { key: 'done', title: 'Done' },
+ * ]} />
+ */
+declare function Stepper({ steps, current, status, orientation, responsive, onStepClick, size, className, }: StepperProps): react_jsx_runtime.JSX.Element;
+
+type TimelineStatus = 'complete' | 'current' | 'upcoming' | 'error';
+interface TimelineEvent {
+    key: string | number;
+    /** Event title, e.g. "Out for delivery". */
+    title: React__default.ReactNode;
+    /** Optional detail line. */
+    description?: React__default.ReactNode;
+    /** Optional timestamp / meta, shown muted. */
+    timestamp?: React__default.ReactNode;
+    /** Custom node icon (overrides the default dot / check). */
+    icon?: React__default.ReactNode;
+    /** Explicit status. If omitted, derived from `current` (see Timeline). */
+    status?: TimelineStatus;
+}
+interface TimelineProps {
+    events: TimelineEvent[];
+    /**
+     * Index of the in-progress event. When set (and an event has no explicit
+     * `status`), events before it are `complete`, the one at it is `current`,
+     * and later ones are `upcoming`. Order-tracking style.
+     */
+    current?: number;
+    className?: string;
+}
+/**
+ * A vertical timeline of ordered events — order tracking (Order placed →
+ * Packed → Shipped → Out for delivery → Delivered), audit trails, activity
+ * feeds, anything sequential. Completed events show a check on the accent rail;
+ * the current event pulses; upcoming events are muted.
+ *
+ * Drive it either by setting each event's `status`, or by passing `current`
+ * and letting the statuses derive from it.
+ *
+ * @example
+ * <Timeline current={2} events={[
+ *   { key: 1, title: 'Order placed',     timestamp: 'Mon 09:24' },
+ *   { key: 2, title: 'Gathering items',  timestamp: 'Mon 11:02' },
+ *   { key: 3, title: 'Out for shipping', timestamp: 'Tue 08:15' },
+ *   { key: 4, title: 'Out for delivery' },
+ *   { key: 5, title: 'Delivered' },
+ * ]} />
+ */
+declare function Timeline({ events, current, className }: TimelineProps): react_jsx_runtime.JSX.Element;
+
 type KbdSize = 'sm' | 'md';
 interface KbdProps {
     /** A single key's label when `keys` is not used. */
@@ -2671,6 +2844,57 @@ interface AppShellProps {
  */
 declare function AppShell({ topBar, sidebarSections, sidebarExpandedWidth, sidebarCollapsedWidth, sidebarDefaultExpanded, sidebarFooter, children, className, }: AppShellProps): react_jsx_runtime.JSX.Element;
 
+interface SecureLayoutProps {
+    /** Protected content, rendered only once access is granted. */
+    children: React__default.ReactNode;
+    /**
+     * Whether the user is authenticated. If omitted and `token` is given,
+     * authentication is inferred from the token's validity (non-expired).
+     * If both are omitted, the user is treated as authenticated and only the
+     * role / permission / `canAccess` gates apply.
+     */
+    isAuthenticated?: boolean;
+    /** A JWT. Used only to check expiry (`exp`) client-side — never trust this
+     *  for real authorization; the server must verify the signature. */
+    token?: string;
+    /** The user's roles (RBAC). */
+    roles?: string[];
+    /** Required role(s). User needs one (or all, with `requireAllRoles`). */
+    requiredRoles?: string[];
+    requireAllRoles?: boolean;
+    /** The user's permissions (PBAC). */
+    permissions?: string[];
+    /** Required permission(s). One needed (or all, with `requireAllPermissions`). */
+    requiredPermissions?: string[];
+    requireAllPermissions?: boolean;
+    /** Final say. Runs after the built-in checks; may be async. Return false to deny. */
+    canAccess?: () => boolean | Promise<boolean>;
+    /** Shown while the (possibly async) check resolves. */
+    loadingFallback?: React__default.ReactNode;
+    /** Shown when access is denied. Default is a simple "Access denied" panel. */
+    fallback?: React__default.ReactNode;
+    /** Fired once when access is denied — e.g. to redirect. */
+    onDeny?: () => void;
+    className?: string;
+}
+/**
+ * A layout wrapper that gates its children behind an access check —
+ * authentication, RBAC (roles), PBAC (permissions), JWT expiry, and/or a
+ * custom (optionally async) predicate. While the check runs it shows a
+ * loading fallback; on success it fades the content in; on failure it renders
+ * a fallback and calls `onDeny`.
+ *
+ * This is a UI guard, not a security boundary — it controls what renders.
+ * Real authorization must be enforced by your API/server.
+ *
+ * @example
+ * <SecureLayout token={jwt} requiredRoles={['admin']} permissions={user.perms}
+ *   requiredPermissions={['reports:read']} onDeny={() => navigate('/login')}>
+ *   <AdminDashboard />
+ * </SecureLayout>
+ */
+declare function SecureLayout({ children, isAuthenticated, token, roles, requiredRoles, requireAllRoles, permissions, requiredPermissions, requireAllPermissions, canAccess, loadingFallback, fallback, onDeny, className, }: SecureLayoutProps): react_jsx_runtime.JSX.Element;
+
 interface ThemeColors {
     background?: string;
     surface?: string;
@@ -2878,39 +3102,6 @@ interface SkeletonCardProps extends SkeletonBaseProps {
  */
 declare function SkeletonCard({ hasAvatar, lines, className, style }: SkeletonCardProps): react_jsx_runtime.JSX.Element;
 
-interface ButtonProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'content'> {
-    /** Button content (text or nodes). */
-    content?: React__default.ReactNode;
-    /** Visual style variant */
-    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'warning' | 'success' | 'info';
-    /** Size — controls height, padding, and font size */
-    size?: 'sm' | 'md' | 'lg';
-    /** HTML button type */
-    buttonType?: 'button' | 'submit' | 'reset';
-    /** Show a loading spinner and disable the control. */
-    loading?: boolean;
-    /** Leading icon — rendered before content */
-    icon?: React__default.ReactNode;
-    /**
-     * @deprecated Pass `variant` instead. Kept for API compat — currently no-op.
-     * Will be removed in the next major version.
-     */
-    type?: string;
-}
-/**
- * Primary action button with variant + size system.
- *
- * Width is never hardcoded — set `style={{ width }}` or let the parent grid/flex control it.
- * Uses `React.forwardRef` so it works as a Radix `asChild` trigger (Popover, Tooltip, etc.).
- *
- * @example
- * <Button content="Save" onClick={handleSave} />
- * <Button content="Delete" variant="danger" size="sm" />
- * <Button content="Cancel" variant="secondary" />
- * <Button content="Loading…" loading buttonType="submit" />
- */
-declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-
 interface TextInputProps {
     /** Controlled string value. */
     value?: string;
@@ -4641,4 +4832,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
 /** Validate the CVV against the detected brand's expected length. */
 declare function cvvError(value: string, cardNumber: string): string | undefined;
 
-export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, Calendar, type CalendarEvent, type CalendarProps, Card, type CardBodyProps, type CardBrand, CardCarousel, type CardCarouselProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, Cart, CartButton, type CartButtonProps, type CartContextValue, type CartItemInput, type CartLineItem, type CartProps, CartProvider, type CartProviderProps, type CartSummaryRow, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, Checkout, type CheckoutProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DeltaDirection, Drawer, type DrawerProps, type DrawerSize, Dropdown, type DropdownItem, type DropdownProps, EmptyCart, type EmptyCartProps, type ErrorMap, type ExpandRowOptions, FAB, type FABAction, type FABPosition, type FABProps, type FABSize, type FABTone, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type ModalSize, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, PopConfirm, type PopConfirmProps, type PopConfirmTone, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Statistic, type StatisticDelta, type StatisticProps, type StatisticSize, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useCart, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, Calendar, type CalendarEvent, type CalendarProps, Card, type CardBodyProps, type CardBrand, CardCarousel, type CardCarouselProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, Cart, CartButton, type CartButtonProps, type CartContextValue, type CartItemInput, type CartLineItem, type CartProps, CartProvider, type CartProviderProps, type CartSummaryRow, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, Checkout, type CheckoutProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DeltaDirection, Drawer, type DrawerProps, type DrawerSize, Dropdown, type DropdownItem, type DropdownProps, EmptyCart, type EmptyCartProps, type ErrorMap, type ExpandRowOptions, FAB, type FABAction, type FABPosition, type FABProps, type FABSize, type FABTone, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, MenuButton, type MenuButtonItem, type MenuButtonProps, Modal, type ModalProps, type ModalSize, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, PopConfirm, type PopConfirmProps, type PopConfirmTone, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SecureLayout, type SecureLayoutProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Statistic, type StatisticDelta, type StatisticProps, type StatisticSize, Stepper, type StepperActiveStatus, type StepperProps, type StepperStep, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Timeline, type TimelineEvent, type TimelineProps, type TimelineStatus, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useCart, useFieldArray, useForm, useFormField, useFormStore, useNotification };

package/dist/index.d.ts

@@ -628,6 +628,91 @@ interface IconButtonProps {
  */
 declare function IconButton({ icon, onClick, type, buttonType, disabled, size, loading, loadingIcon, title, className, style, }: IconButtonProps): react_jsx_runtime.JSX.Element;
 
+interface ButtonProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'content'> {
+    /** Button content (text or nodes). */
+    content?: React__default.ReactNode;
+    /** Visual style variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'warning' | 'success' | 'info';
+    /** Size — controls height, padding, and font size */
+    size?: 'sm' | 'md' | 'lg';
+    /** HTML button type */
+    buttonType?: 'button' | 'submit' | 'reset';
+    /** Show a loading spinner and disable the control. */
+    loading?: boolean;
+    /** Leading icon — rendered before content */
+    icon?: React__default.ReactNode;
+    /**
+     * @deprecated Pass `variant` instead. Kept for API compat — currently no-op.
+     * Will be removed in the next major version.
+     */
+    type?: string;
+}
+/**
+ * Primary action button with variant + size system.
+ *
+ * Width is never hardcoded — set `style={{ width }}` or let the parent grid/flex control it.
+ * Uses `React.forwardRef` so it works as a Radix `asChild` trigger (Popover, Tooltip, etc.).
+ *
+ * @example
+ * <Button content="Save" onClick={handleSave} />
+ * <Button content="Delete" variant="danger" size="sm" />
+ * <Button content="Cancel" variant="secondary" />
+ * <Button content="Loading…" loading buttonType="submit" />
+ */
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface MenuButtonItem {
+    /** Stable key. */
+    key: string | number;
+    /** Row label. */
+    label: React__default.ReactNode;
+    /** Leading icon. */
+    icon?: React__default.ReactNode;
+    /** Fired on select (click / Enter / Space). */
+    onSelect?: () => void;
+    disabled?: boolean;
+    /** Destructive styling (red). */
+    danger?: boolean;
+    /** Render a divider above this item. */
+    separatorBefore?: boolean;
+}
+interface MenuButtonProps {
+    /** Trigger label. */
+    label?: React__default.ReactNode;
+    /** The menu rows. */
+    items: MenuButtonItem[];
+    /** Trigger button variant. Default `'secondary'`. */
+    variant?: ButtonProps['variant'];
+    /** Trigger button size. Default `'md'`. */
+    size?: ButtonProps['size'];
+    /** Leading icon on the trigger. */
+    icon?: React__default.ReactNode;
+    /** Hide the trailing chevron. */
+    hideChevron?: boolean;
+    disabled?: boolean;
+    /** Menu alignment to the trigger. Default `'start'`. */
+    align?: 'start' | 'center' | 'end';
+    /** Side to open on. Default `'bottom'`. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    className?: string;
+}
+/**
+ * A {@link Button} that opens a dropdown menu of actions, built on Radix
+ * DropdownMenu (full keyboard nav, focus management, typeahead, and ARIA).
+ * Pass the rows as `items`; the trailing chevron flips while the menu is open.
+ *
+ * @example
+ * <MenuButton
+ *   label="Actions"
+ *   items={[
+ *     { key: 'edit', label: 'Edit', icon: <EditIcon />, onSelect: edit },
+ *     { key: 'dup', label: 'Duplicate', onSelect: duplicate },
+ *     { key: 'del', label: 'Delete', danger: true, separatorBefore: true, onSelect: remove },
+ *   ]}
+ * />
+ */
+declare function MenuButton({ label, items, variant, size, icon, hideChevron, disabled, align, side, className, }: MenuButtonProps): react_jsx_runtime.JSX.Element;
+
 type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 interface ModalProps {
     /**
@@ -1028,6 +1113,94 @@ interface BadgeProps {
  */
 declare function Badge({ children, tone, variant, size, icon, count, max, dot, showZero, className, style, }: BadgeProps): react_jsx_runtime.JSX.Element;
 
+type StepperActiveStatus = 'active' | 'loading' | 'error';
+interface StepperStep {
+    key: string | number;
+    title: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    /** Custom indicator content (overrides the default number / check). */
+    icon?: React__default.ReactNode;
+}
+interface StepperProps {
+    steps: StepperStep[];
+    /** Index of the active step (0-based). Steps before it render completed. */
+    current: number;
+    /**
+     * Status of the *active* step. `'loading'` shows a spinner (for async
+     * steps); `'error'` marks it failed. Default `'active'`.
+     */
+    status?: StepperActiveStatus;
+    /** Layout. Default `'horizontal'`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Switch horizontal → vertical below the `md` breakpoint. Default `true`. */
+    responsive?: boolean;
+    /** Make completed / visited steps clickable. */
+    onStepClick?: (index: number) => void;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+/**
+ * A configurable steps indicator for multi-step flows — wizards, onboarding,
+ * async pipelines. Completed steps show a check, the active step is highlighted
+ * (or a spinner via `status="loading"` for async work, or an error mark), and
+ * the connectors fill up to the current step. Horizontal or vertical, with an
+ * optional responsive collapse to vertical on small screens.
+ *
+ * Controlled: you own `current` (and `status` for the active step).
+ *
+ * @example
+ * <Stepper current={step} status={saving ? 'loading' : 'active'} steps={[
+ *   { key: 'cart', title: 'Cart', description: '3 items' },
+ *   { key: 'pay',  title: 'Payment' },
+ *   { key: 'done', title: 'Done' },
+ * ]} />
+ */
+declare function Stepper({ steps, current, status, orientation, responsive, onStepClick, size, className, }: StepperProps): react_jsx_runtime.JSX.Element;
+
+type TimelineStatus = 'complete' | 'current' | 'upcoming' | 'error';
+interface TimelineEvent {
+    key: string | number;
+    /** Event title, e.g. "Out for delivery". */
+    title: React__default.ReactNode;
+    /** Optional detail line. */
+    description?: React__default.ReactNode;
+    /** Optional timestamp / meta, shown muted. */
+    timestamp?: React__default.ReactNode;
+    /** Custom node icon (overrides the default dot / check). */
+    icon?: React__default.ReactNode;
+    /** Explicit status. If omitted, derived from `current` (see Timeline). */
+    status?: TimelineStatus;
+}
+interface TimelineProps {
+    events: TimelineEvent[];
+    /**
+     * Index of the in-progress event. When set (and an event has no explicit
+     * `status`), events before it are `complete`, the one at it is `current`,
+     * and later ones are `upcoming`. Order-tracking style.
+     */
+    current?: number;
+    className?: string;
+}
+/**
+ * A vertical timeline of ordered events — order tracking (Order placed →
+ * Packed → Shipped → Out for delivery → Delivered), audit trails, activity
+ * feeds, anything sequential. Completed events show a check on the accent rail;
+ * the current event pulses; upcoming events are muted.
+ *
+ * Drive it either by setting each event's `status`, or by passing `current`
+ * and letting the statuses derive from it.
+ *
+ * @example
+ * <Timeline current={2} events={[
+ *   { key: 1, title: 'Order placed',     timestamp: 'Mon 09:24' },
+ *   { key: 2, title: 'Gathering items',  timestamp: 'Mon 11:02' },
+ *   { key: 3, title: 'Out for shipping', timestamp: 'Tue 08:15' },
+ *   { key: 4, title: 'Out for delivery' },
+ *   { key: 5, title: 'Delivered' },
+ * ]} />
+ */
+declare function Timeline({ events, current, className }: TimelineProps): react_jsx_runtime.JSX.Element;
+
 type KbdSize = 'sm' | 'md';
 interface KbdProps {
     /** A single key's label when `keys` is not used. */
@@ -2671,6 +2844,57 @@ interface AppShellProps {
  */
 declare function AppShell({ topBar, sidebarSections, sidebarExpandedWidth, sidebarCollapsedWidth, sidebarDefaultExpanded, sidebarFooter, children, className, }: AppShellProps): react_jsx_runtime.JSX.Element;
 
+interface SecureLayoutProps {
+    /** Protected content, rendered only once access is granted. */
+    children: React__default.ReactNode;
+    /**
+     * Whether the user is authenticated. If omitted and `token` is given,
+     * authentication is inferred from the token's validity (non-expired).
+     * If both are omitted, the user is treated as authenticated and only the
+     * role / permission / `canAccess` gates apply.
+     */
+    isAuthenticated?: boolean;
+    /** A JWT. Used only to check expiry (`exp`) client-side — never trust this
+     *  for real authorization; the server must verify the signature. */
+    token?: string;
+    /** The user's roles (RBAC). */
+    roles?: string[];
+    /** Required role(s). User needs one (or all, with `requireAllRoles`). */
+    requiredRoles?: string[];
+    requireAllRoles?: boolean;
+    /** The user's permissions (PBAC). */
+    permissions?: string[];
+    /** Required permission(s). One needed (or all, with `requireAllPermissions`). */
+    requiredPermissions?: string[];
+    requireAllPermissions?: boolean;
+    /** Final say. Runs after the built-in checks; may be async. Return false to deny. */
+    canAccess?: () => boolean | Promise<boolean>;
+    /** Shown while the (possibly async) check resolves. */
+    loadingFallback?: React__default.ReactNode;
+    /** Shown when access is denied. Default is a simple "Access denied" panel. */
+    fallback?: React__default.ReactNode;
+    /** Fired once when access is denied — e.g. to redirect. */
+    onDeny?: () => void;
+    className?: string;
+}
+/**
+ * A layout wrapper that gates its children behind an access check —
+ * authentication, RBAC (roles), PBAC (permissions), JWT expiry, and/or a
+ * custom (optionally async) predicate. While the check runs it shows a
+ * loading fallback; on success it fades the content in; on failure it renders
+ * a fallback and calls `onDeny`.
+ *
+ * This is a UI guard, not a security boundary — it controls what renders.
+ * Real authorization must be enforced by your API/server.
+ *
+ * @example
+ * <SecureLayout token={jwt} requiredRoles={['admin']} permissions={user.perms}
+ *   requiredPermissions={['reports:read']} onDeny={() => navigate('/login')}>
+ *   <AdminDashboard />
+ * </SecureLayout>
+ */
+declare function SecureLayout({ children, isAuthenticated, token, roles, requiredRoles, requireAllRoles, permissions, requiredPermissions, requireAllPermissions, canAccess, loadingFallback, fallback, onDeny, className, }: SecureLayoutProps): react_jsx_runtime.JSX.Element;
+
 interface ThemeColors {
     background?: string;
     surface?: string;
@@ -2878,39 +3102,6 @@ interface SkeletonCardProps extends SkeletonBaseProps {
  */
 declare function SkeletonCard({ hasAvatar, lines, className, style }: SkeletonCardProps): react_jsx_runtime.JSX.Element;
 
-interface ButtonProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'content'> {
-    /** Button content (text or nodes). */
-    content?: React__default.ReactNode;
-    /** Visual style variant */
-    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'warning' | 'success' | 'info';
-    /** Size — controls height, padding, and font size */
-    size?: 'sm' | 'md' | 'lg';
-    /** HTML button type */
-    buttonType?: 'button' | 'submit' | 'reset';
-    /** Show a loading spinner and disable the control. */
-    loading?: boolean;
-    /** Leading icon — rendered before content */
-    icon?: React__default.ReactNode;
-    /**
-     * @deprecated Pass `variant` instead. Kept for API compat — currently no-op.
-     * Will be removed in the next major version.
-     */
-    type?: string;
-}
-/**
- * Primary action button with variant + size system.
- *
- * Width is never hardcoded — set `style={{ width }}` or let the parent grid/flex control it.
- * Uses `React.forwardRef` so it works as a Radix `asChild` trigger (Popover, Tooltip, etc.).
- *
- * @example
- * <Button content="Save" onClick={handleSave} />
- * <Button content="Delete" variant="danger" size="sm" />
- * <Button content="Cancel" variant="secondary" />
- * <Button content="Loading…" loading buttonType="submit" />
- */
-declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-
 interface TextInputProps {
     /** Controlled string value. */
     value?: string;
@@ -4641,4 +4832,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
 /** Validate the CVV against the detected brand's expected length. */
 declare function cvvError(value: string, cardNumber: string): string | undefined;
 
-export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, Calendar, type CalendarEvent, type CalendarProps, Card, type CardBodyProps, type CardBrand, CardCarousel, type CardCarouselProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, Cart, CartButton, type CartButtonProps, type CartContextValue, type CartItemInput, type CartLineItem, type CartProps, CartProvider, type CartProviderProps, type CartSummaryRow, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, Checkout, type CheckoutProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DeltaDirection, Drawer, type DrawerProps, type DrawerSize, Dropdown, type DropdownItem, type DropdownProps, EmptyCart, type EmptyCartProps, type ErrorMap, type ExpandRowOptions, FAB, type FABAction, type FABPosition, type FABProps, type FABSize, type FABTone, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type ModalSize, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, PopConfirm, type PopConfirmProps, type PopConfirmTone, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Statistic, type StatisticDelta, type StatisticProps, type StatisticSize, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useCart, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, Calendar, type CalendarEvent, type CalendarProps, Card, type CardBodyProps, type CardBrand, CardCarousel, type CardCarouselProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, Cart, CartButton, type CartButtonProps, type CartContextValue, type CartItemInput, type CartLineItem, type CartProps, CartProvider, type CartProviderProps, type CartSummaryRow, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, Checkout, type CheckoutProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DeltaDirection, Drawer, type DrawerProps, type DrawerSize, Dropdown, type DropdownItem, type DropdownProps, EmptyCart, type EmptyCartProps, type ErrorMap, type ExpandRowOptions, FAB, type FABAction, type FABPosition, type FABProps, type FABSize, type FABTone, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, MenuButton, type MenuButtonItem, type MenuButtonProps, Modal, type ModalProps, type ModalSize, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, PopConfirm, type PopConfirmProps, type PopConfirmTone, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SecureLayout, type SecureLayoutProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Statistic, type StatisticDelta, type StatisticProps, type StatisticSize, Stepper, type StepperActiveStatus, type StepperProps, type StepperStep, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Timeline, type TimelineEvent, type TimelineProps, type TimelineStatus, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useCart, useFieldArray, useForm, useFormField, useFormStore, useNotification };