@bizapps/design-system-testing 1.0.11 → 1.6.0

package/dist/main.d.ts

@@ -2,18 +2,22 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode, ComponentProps, ButtonHTMLAttributes, MouseEventHandler, SVGAttributes } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import { Avatar as Avatar$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Select as Select$1, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Popover as Popover$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1, Checkbox as Checkbox$1 } from 'radix-ui';
-import { DayPicker, DayButton, Locale, DateRange } from 'react-day-picker';
-export { DateRange } from 'react-day-picker';
+import { Avatar as Avatar$1, Label as Label$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Select as Select$1, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Popover as Popover$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1, Checkbox as Checkbox$1 } from 'radix-ui';
 import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
+import { PhoneFieldValidity } from './phone.js';
+export { PhoneFieldProblem, validatePhone } from './phone.js';
 import { DropzoneOptions, FileRejection, DropEvent } from 'react-dropzone';
 import Color from 'color';
+import { DateRange } from 'react-day-picker';
+export { DateRange } from 'react-day-picker';
 import * as react_hook_form from 'react-hook-form';
 import { UseFormProps, FieldValues } from 'react-hook-form';
 export { Controller, useFieldArray } from 'react-hook-form';
 import { ZodType, z } from 'zod';
 import { ColumnDef, SortingState, ColumnFiltersState, Row, RowSelectionState, Table as Table$1, VisibilityState, ColumnSizingState, Header, Updater, Column } from '@tanstack/react-table';
 export { Column, ColumnDef, ColumnFiltersState, Row, SortingState, Table as TanStackTableType, createColumnHelper } from '@tanstack/react-table';
+import { P as Permission } from './policy-DPpMNLiO.js';
+export { K as KNOWN_PERMISSIONS, a as KnownPermission, m as matchPermission } from './policy-DPpMNLiO.js';
 
 declare const alertVariants: (props?: ({
     variant?: "default" | "info" | "success" | "warning" | "error" | null | undefined;
@@ -117,15 +121,6 @@ declare function Button$1({ className, variant, size, asChild, isLoading, childr
     isLoading?: boolean;
 }): react.JSX.Element;
 
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, fromYear, toYear, ...props }: ComponentProps<typeof DayPicker> & {
-    buttonVariant?: ComponentProps<typeof Button$1>['variant'];
-    fromYear?: number;
-    toYear?: number;
-}): react.JSX.Element;
-declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: ComponentProps<typeof DayButton> & {
-    locale?: Partial<Locale>;
-}): react.JSX.Element;
-
 type MiniCalendarProps = HTMLAttributes<HTMLDivElement> & {
     value?: Date;
     defaultValue?: Date;
@@ -214,6 +209,8 @@ declare function FieldGroup({ className, ...props }: ComponentProps<'div'>): rea
 
 declare function Input({ className, type, ...props }: ComponentProps<'input'>): react.JSX.Element;
 
+declare function Label({ className, ...props }: ComponentProps<typeof Label$1.Root>): react.JSX.Element;
+
 declare const linkVariants: (props?: ({
     variant?: "underlined" | "plain" | null | undefined;
     size?: "sm" | "md" | "lg" | "xs" | null | undefined;
@@ -225,6 +222,55 @@ declare function Link({ className, variant, size, asChild, disabled, target, rel
     onClick?: MouseEventHandler<HTMLElement>;
 }): react.JSX.Element;
 
+interface PhoneFieldCountry {
+    /** ISO 3166-1 alpha-2 code, e.g. "CO". */
+    code: string;
+    /** Country name, e.g. "Colombia". */
+    name: string;
+    /** International dial code, e.g. "+57". */
+    dialCode: string;
+    /** Optional override for the flag. When omitted the flag is derived from `code` via country-flag-icons. */
+    flagUrl?: string;
+}
+interface PhoneFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'disabled' | 'placeholder' | 'className'> {
+    /** Country list. Data-agnostic — the source of truth is the consumer's backend. */
+    countries: PhoneFieldCountry[];
+    /**
+     * Controlled E.164 value, e.g. "+573001234567" or "". Omit `value` to run
+     * uncontrolled — the field manages its own value and `onValueChange` still
+     * fires on every change.
+     */
+    value?: string;
+    /** Emits the E.164 form whenever the national number changes; emits "" when empty. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Emits whether the current value is a valid number, and why it is not when
+     * it fails. Fires on mount and on every change of the verdict — including
+     * changes caused by picking another country, which do not always change the
+     * value. It emits STATE, never copy: the message belongs to the consumer's
+     * i18n catalog. For the same rule outside React (Zod schema, route handler)
+     * import `validatePhone` from `@bizapps/design-system-testing/phone`.
+     */
+    onValidityChange?: (validity: PhoneFieldValidity) => void;
+    /** ISO code preselected when `value` is empty, e.g. "CO". Falls back to the first country. */
+    defaultCountry?: string;
+    /** Placeholder for the number input. */
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    /** Portal target for the dropdown. Pass the Dialog content node when used inside a modal Dialog. */
+    container?: HTMLElement | null;
+    /**
+     * Form field name for native form submits. The visible input shows the
+     * FORMATTED national number (e.g. "300 123 4567"); when `name` is set, a
+     * hidden input carries the canonical E.164 value so the browser submits
+     * the machine-readable form. For react-hook-form, drive the field via
+     * `value`/`onValueChange` (controlled component) instead of `name`.
+     */
+    name?: string;
+}
+declare function PhoneField({ countries, value, onValueChange, onValidityChange, defaultCountry, placeholder, disabled, className, container, name, ...inputProps }: PhoneFieldProps): react.JSX.Element;
+
 interface PinInputProps {
     length?: number;
     value?: string;
@@ -265,7 +311,16 @@ declare function SegmentedControlItem({ className, children, value, ...props }:
 
 declare function Select({ ...props }: ComponentProps<typeof Select$1.Root>): react.JSX.Element;
 declare function SelectTrigger$1({ className, children, ...props }: ComponentProps<typeof Select$1.Trigger>): react.JSX.Element;
-declare function SelectContent({ className, children, position, ...props }: ComponentProps<typeof Select$1.Content>): react.JSX.Element;
+type SelectContentProps = ComponentProps<typeof Select$1.Content> & {
+    /**
+     * Maximum height of the dropdown panel. Accepts any CSS length
+     * (e.g. `240px`, `15rem`) or a number interpreted as pixels.
+     * The panel is always additionally capped by the space available
+     * on screen, and its list scrolls once the content exceeds it.
+     */
+    maxHeight?: number | string;
+};
+declare function SelectContent({ className, children, position, maxHeight, style, ...props }: SelectContentProps): react.JSX.Element;
 declare function SelectItem({ className, children, ...props }: ComponentProps<typeof Select$1.Item>): react.JSX.Element;
 declare function SelectLabel({ className, ...props }: ComponentProps<typeof Select$1.Label>): react.JSX.Element;
 declare function SelectSeparator({ className, ...props }: ComponentProps<typeof Select$1.Separator>): react.JSX.Element;
@@ -277,11 +332,11 @@ declare function SelectGroup({ ...props }: ComponentProps<typeof Select$1.Group>
 declare function Separator({ className, orientation, decorative, ...props }: ComponentProps<typeof Separator$1.Root>): react.JSX.Element;
 
 declare const progressVariants: (props?: ({
-    variant?: "default" | "success" | "warning" | "danger" | "orange" | null | undefined;
+    variant?: "default" | "success" | "warning" | "orange" | "danger" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const progressIndicatorVariants: (props?: ({
-    variant?: "default" | "success" | "warning" | "danger" | "orange" | null | undefined;
+    variant?: "default" | "success" | "warning" | "orange" | "danger" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ProgressProps extends ComponentProps<typeof Progress$1.Root>, VariantProps<typeof progressVariants> {
 }
@@ -360,7 +415,14 @@ declare function TooltipContent({ className, sideOffset, variant, size, children
 
 declare function Popover({ ...props }: ComponentProps<typeof Popover$1.Root>): react.JSX.Element;
 declare function PopoverTrigger({ ...props }: ComponentProps<typeof Popover$1.Trigger>): react.JSX.Element;
-declare function PopoverContent({ className, align, sideOffset, ...props }: ComponentProps<typeof Popover$1.Content>): react.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, container, ...props }: ComponentProps<typeof Popover$1.Content> & {
+    /**
+     * Portal target for the popover content. Pass the Dialog content node when
+     * the popover lives inside a modal Dialog so the content stays within the
+     * Dialog's scroll-lock shard — otherwise wheel/touch scrolling is blocked.
+     */
+    container?: ComponentProps<typeof Popover$1.Portal>['container'];
+}): react.JSX.Element;
 declare function PopoverAnchor({ ...props }: ComponentProps<typeof Popover$1.Anchor>): react.JSX.Element;
 declare function PopoverHeader({ className, ...props }: ComponentProps<'div'>): react.JSX.Element;
 declare function PopoverTitle({ className, ...props }: ComponentProps<'h2'>): react.JSX.Element;
@@ -430,6 +492,15 @@ interface ComboboxOption {
     label: string;
     disabled?: boolean;
 }
+/**
+ * Search matching strategy:
+ * - `fuzzy` — cmdk's default subsequence scoring (typo-tolerant; `205` also
+ *   matches `2005`, `1205`, etc.).
+ * - `substring` — option matches when its value or label contains the query.
+ * - `prefix` — option matches when its value/label, or any word within them,
+ *   starts with the query. Best for numeric/alphanumeric codes.
+ */
+type ComboboxMatchMode = 'fuzzy' | 'substring' | 'prefix';
 interface ComboboxProps {
     options: ComboboxOption[];
     value?: string;
@@ -439,8 +510,20 @@ interface ComboboxProps {
     emptyMessage?: string;
     disabled?: boolean;
     className?: string;
+    /**
+     * Portal target for the dropdown. Pass the Dialog content node when the
+     * Combobox is rendered inside a modal Dialog so the list stays within the
+     * Dialog's scroll-lock shard — otherwise wheel/touch scrolling is blocked.
+     */
+    container?: HTMLElement | null;
+    /**
+     * Search matching strategy. Defaults to `fuzzy` (cmdk's built-in behavior).
+     * Use `prefix` or `substring` for numeric/alphanumeric codes where fuzzy
+     * subsequence matching surfaces unexpected results.
+     */
+    matchMode?: ComboboxMatchMode;
 }
-declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyMessage, disabled, className, }: ComboboxProps): react.JSX.Element;
+declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyMessage, disabled, className, container, matchMode, }: ComboboxProps): react.JSX.Element;
 
 declare function DropdownMenu({ ...props }: ComponentProps<typeof DropdownMenu$1.Root>): react.JSX.Element;
 declare function DropdownMenuPortal({ ...props }: ComponentProps<typeof DropdownMenu$1.Portal>): react.JSX.Element;
@@ -595,37 +678,35 @@ declare const ColorPickerPresets: {
     displayName: string;
 };
 
-interface DatePickerSingleProps {
-    mode?: 'single';
-    selected?: Date;
-    onSelect?: (date: Date | undefined) => void;
+/** Options that mean the same thing whichever selection mode is active. */
+interface DatePickerBaseProps {
     placeholder?: string;
     disabled?: boolean;
     className?: string;
+    /** Earliest selectable date. Earlier days are disabled and unreachable. */
     fromDate?: Date;
+    /** Latest selectable date. Later days are disabled and unreachable. */
     toDate?: Date;
+    /** Months rendered side by side. Defaults to 1. */
+    numberOfMonths?: number;
+}
+interface DatePickerSingleProps extends DatePickerBaseProps {
+    mode?: 'single';
+    selected?: Date;
+    onSelect?: (date: Date | undefined) => void;
 }
-interface DatePickerRangeProps {
+interface DatePickerRangeProps extends DatePickerBaseProps {
     mode: 'range';
     selected?: DateRange;
     onSelect?: (range: DateRange | undefined) => void;
-    placeholder?: string;
-    disabled?: boolean;
-    className?: string;
-    fromDate?: Date;
-    toDate?: Date;
-}
-interface DatePickerProps {
-    mode?: 'single' | 'range';
-    selected?: Date | DateRange;
-    onSelect?: ((date: Date | undefined) => void) | ((range: DateRange | undefined) => void);
-    placeholder?: string;
-    disabled?: boolean;
-    className?: string;
-    fromDate?: Date;
-    toDate?: Date;
 }
-declare function DatePicker({ mode, selected, onSelect, placeholder, disabled, className, fromDate, toDate, }: DatePickerProps): react.JSX.Element;
+/**
+ * Discriminated on `mode`, so `selected` and `onSelect` are always the pair that
+ * belongs to it. A flat union would accept `mode='range'` with a single `Date`,
+ * which only fails at runtime once the popover is opened.
+ */
+type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+declare function DatePicker(props: DatePickerProps): react.JSX.Element;
 
 interface NavbarDropdownItem {
     href: string;
@@ -660,6 +741,7 @@ interface NavbarProps extends HTMLAttributes<HTMLElement> {
     notifications?: NavbarNotification[];
     avatarSrc?: string;
     avatarFallback?: string;
+    showUtilityBar?: boolean;
     onNavLinkClick?: (href: string) => void;
     onSearchClick?: () => void;
     onHelpClick?: () => void;
@@ -764,6 +846,7 @@ interface AppShellProps {
     onItemClick?: (label: string) => void;
     brandName?: string;
     showHeader?: boolean;
+    header?: ReactNode;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     defaultOpen?: boolean;
@@ -779,7 +862,7 @@ interface AppShellProps {
  * regardless of the parent's height. The inner `<main>` handles its own scroll.
  * Use `mainClassName` to customise padding, background, or scroll behaviour.
  */
-declare function AppShell({ items, activeItem, onItemClick, brandName, showHeader, open, onOpenChange, defaultOpen, className, mainClassName, children, }: AppShellProps): react.JSX.Element;
+declare function AppShell({ items, activeItem, onItemClick, brandName, showHeader, header, open, onOpenChange, defaultOpen, className, mainClassName, children, }: AppShellProps): react.JSX.Element;
 
 declare function Textarea({ className, ...props }: ComponentProps<'textarea'>): react.JSX.Element;
 
@@ -839,6 +922,7 @@ declare const ease: {
     readonly enter: readonly [0, 0, 0.2, 1];
     readonly exit: readonly [0.4, 0, 1, 1];
     readonly linear: readonly [0, 0, 1, 1];
+    readonly drawer: readonly [0.22, 1, 0.36, 1];
 };
 declare const spring: {
     readonly gentle: {
@@ -887,6 +971,14 @@ declare const transition: {
         readonly duration: 0.15;
         readonly ease: readonly [0.4, 0, 0.2, 1];
     };
+    readonly drawer: {
+        readonly duration: 0.3;
+        readonly ease: readonly [0.22, 1, 0.36, 1];
+    };
+    readonly drawerExit: {
+        readonly duration: 0.2;
+        readonly ease: readonly [0.4, 0, 1, 1];
+    };
 };
 declare const fadeIn: {
     readonly hidden: {
@@ -1011,6 +1103,7 @@ declare const animation: {
         readonly enter: readonly [0, 0, 0.2, 1];
         readonly exit: readonly [0.4, 0, 1, 1];
         readonly linear: readonly [0, 0, 1, 1];
+        readonly drawer: readonly [0.22, 1, 0.36, 1];
     };
     readonly spring: {
         readonly gentle: {
@@ -1059,6 +1152,14 @@ declare const animation: {
             readonly duration: 0.15;
             readonly ease: readonly [0.4, 0, 0.2, 1];
         };
+        readonly drawer: {
+            readonly duration: 0.3;
+            readonly ease: readonly [0.22, 1, 0.36, 1];
+        };
+        readonly drawerExit: {
+            readonly duration: 0.2;
+            readonly ease: readonly [0.4, 0, 1, 1];
+        };
     };
     readonly variants: {
         readonly fadeIn: {
@@ -1983,43 +2084,107 @@ interface UseTableSizingReturn {
  */
 declare function useTableSizing({ columnSizing: controlledSizing, defaultColumnSizing, onColumnSizingChange, }: UseTableSizingProps): UseTableSizingReturn;
 
+/** `'loading'` while the grant set is unresolved, `'ready'` once it is known. */
+type AbilityStatus = 'loading' | 'ready';
+interface AbilityContextValue {
+    can: (permissions: Permission | Permission[], mode?: 'any' | 'all') => boolean;
+    setAbilities: (permissions: string[]) => void;
+    clearAbilities: () => void;
+    /**
+     * `'loading'` while the grant set is genuinely unresolved, `'ready'` once it
+     * is known — including when it is known to be empty. This is what makes
+     * "still loading" distinguishable from "loaded, zero grants": both produce
+     * an empty set, so without this flag a consumer cannot tell them apart.
+     */
+    status: AbilityStatus;
+}
+interface AbilityProviderProps {
+    children: ReactNode;
+    permissions?: string[];
+}
+declare function AbilityProvider({ children, permissions }: AbilityProviderProps): react.JSX.Element;
+declare function useAbility(): AbilityContextValue;
+declare function useCan(permissions: Permission | Permission[], mode?: 'any' | 'all'): boolean;
+/** Returns whether the grant set is resolved yet. Useful for skeletons without a `Can` wrapper. */
+declare function useAbilityStatus(): AbilityStatus;
+
+interface CanState {
+    /**
+     * Whether the permission check passed, after `negate` is applied. While
+     * `status` is `'loading'`, the underlying check is always `false` — so
+     * `allowed` is `false` for `Can` (fail-closed) but `true` for `CanNot`
+     * (fail-open: negating an unresolved `false` flips it to `true`).
+     */
+    allowed: boolean;
+    /** Whether the grant set has resolved yet. */
+    status: AbilityStatus;
+}
 interface CanProps {
-    permission: string | string[];
+    permission: Permission | Permission[];
     mode?: 'any' | 'all';
     negate?: boolean;
+    /**
+     * `'hide'` (default) removes the subtree and renders `fallback` instead.
+     * `'disable'` keeps the subtree visible but non-interactive, with `reason`
+     * surfaced in a tooltip. Use `'disable'` when the user should know the
+     * action exists and why it is unavailable.
+     */
+    behavior?: 'hide' | 'disable';
+    /**
+     * Explanation shown in a tooltip when `behavior='disable'` denies. Accepts a
+     * node so callers can pass translated content without the library taking an
+     * i18n dependency. No tooltip is rendered when omitted.
+     */
+    reason?: ReactNode;
     fallback?: ReactNode;
-    children: ReactNode | ((allowed: boolean) => ReactNode);
+    /**
+     * Rendered while the grant set is unresolved. Unlike `reason` and `fallback`, `null` and
+     * "omitted" are deliberately NOT the same value here: a node renders that node;
+     * `loading={null}` renders nothing; omitting `loading` entirely falls through to
+     * `fallback` (or, for `CanNot`, lets the fail-open children render). The distinction
+     * exists because for `loading` — and only for `loading` — "render nothing" and "fall
+     * through" are genuinely different outcomes: `CanNot` is fail-open during loading, so
+     * without an explicit `loading={null}` its children render immediately and then
+     * disappear once the grant set resolves. Pass `loading={null}` to suppress that flash.
+     */
+    loading?: ReactNode;
+    children: ReactNode | ((state: CanState) => ReactNode);
 }
 type CanNotProps = Omit<CanProps, 'negate'>;
-/** Renders children when the user has the required permission(s). Requires `AbilityProvider` in the tree. */
-declare function Can({ permission, mode, negate, fallback, children }: CanProps): react.JSX.Element;
+/**
+ * Renders its children when the user has the required permission(s). Requires an
+ * `AbilityProvider` in the tree.
+ *
+ * Render precedence: a render-prop `children` always wins and receives the full
+ * `CanState`; otherwise `loading` renders while the grant set is unresolved; then
+ * `children` when allowed; then `fallback` when denied.
+ *
+ * When `children` is a function it OWNS EVERY STATE, and `behavior`, `reason`, `fallback`
+ * and `loading` are all ignored — the render prop returns before any of them is consulted.
+ * So `<Can behavior='disable' reason='…'>{({ allowed }) => …}</Can>` produces no tooltip
+ * and no disabled treatment; the function has to read `allowed` and `status` and render
+ * the disabled, loading and denied cases itself. Passing any of those four alongside a
+ * function logs a development-only warning, since nothing else about the code looks wrong.
+ *
+ * Fail-closed by default: while `status === 'loading'`, the underlying check
+ * is always `false` and nothing renders optimistically. Passing `negate`
+ * flips this to fail-open — the unresolved `false` becomes `true` — so
+ * children render immediately during loading unless `loading` is explicitly
+ * passed. `CanNot` is `<Can negate />`, so it always exhibits the fail-open
+ * case; pass `loading={null}` to suppress that flash and render nothing
+ * instead — a node passed to `loading` renders that node, while omitting
+ * `loading` falls through to the fail-open children.
+ */
+declare function Can({ permission, mode, negate, behavior, reason, fallback, loading, children, }: CanProps): react.JSX.Element;
 declare namespace Can {
     var displayName: string;
 }
-/** Renders children when the user does NOT have the required permission(s). Alias for `<Can negate />`. Requires `AbilityProvider` in the tree. */
-declare function CanNot({ permission, mode, fallback, children }: CanNotProps): react.JSX.Element;
+/** Renders its children when the user does NOT have the required permission(s). Alias for `<Can negate />`. Requires an `AbilityProvider` in the tree. */
+declare function CanNot({ permission, mode, behavior, reason, fallback, loading, children, }: CanNotProps): react.JSX.Element;
 declare namespace CanNot {
     var displayName: string;
 }
 
-interface AbilityContextValue {
-    can: (permissions: string | string[], mode?: 'any' | 'all') => boolean;
-    setAbilities: (permissions: string[]) => void;
-    clearAbilities: () => void;
-}
-interface AbilityProviderProps {
-    children: ReactNode;
-    permissions?: string[];
-}
-/**
- * @param pattern - an entry from the user's grant set (may contain `*` as a segment wildcard)
- * @param permission - the permission being requested (from `Can.perform`)
- */
-declare function matchPermission(pattern: string, permission: string): boolean;
-declare function AbilityProvider({ children, permissions }: AbilityProviderProps): react.JSX.Element;
-declare function useAbility(): AbilityContextValue;
-declare function useCan(permissions: string | string[], mode?: 'any' | 'all'): boolean;
-
 declare function Sheet({ ...props }: react.ComponentProps<typeof Dialog$1.Root>): react.JSX.Element;
 declare function SheetTrigger({ ...props }: react.ComponentProps<typeof Dialog$1.Trigger>): react.JSX.Element;
 declare function SheetClose({ ...props }: react.ComponentProps<typeof Dialog$1.Close>): react.JSX.Element;
@@ -2032,6 +2197,60 @@ declare function SheetFooter({ className, ...props }: react.ComponentProps<'div'
 declare function SheetTitle({ className, ...props }: react.ComponentProps<typeof Dialog$1.Title>): react.JSX.Element;
 declare function SheetDescription({ className, ...props }: react.ComponentProps<typeof Dialog$1.Description>): react.JSX.Element;
 
+type BottomNavItem = {
+    label: string;
+    href: string;
+    icon: React.ReactNode;
+    isActive?: boolean;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+};
+type BottomNavProps = {
+    items: BottomNavItem[];
+    className?: string;
+};
+declare function BottomNav({ items, className }: BottomNavProps): react.JSX.Element;
+
+type BottomNavTabsProps = ComponentProps<typeof Tabs$1.Root>;
+declare function BottomNavTabs({ defaultValue, value: controlledValue, onValueChange, ...props }: BottomNavTabsProps): react.JSX.Element;
+declare function BottomNavTabsContent({ className, ...props }: ComponentProps<typeof TabsContent>): react.JSX.Element;
+type BottomNavTabsItem = {
+    value: string;
+    label: string;
+    icon: React.ReactNode;
+    activeIcon?: React.ReactNode;
+};
+type BottomNavTabsListProps = {
+    items: BottomNavTabsItem[];
+    className?: string;
+};
+declare function BottomNavTabsList({ items, className }: BottomNavTabsListProps): react.JSX.Element;
+
+declare function Drawer({ children, open, onOpenChange, modal, ...props }: ComponentProps<typeof Dialog$1.Root>): react.JSX.Element;
+declare function DrawerTrigger({ ...props }: ComponentProps<typeof Dialog$1.Trigger>): react.JSX.Element;
+declare function DrawerClose({ ...props }: ComponentProps<typeof Dialog$1.Close>): react.JSX.Element;
+declare function DrawerPortal({ children, ...props }: ComponentProps<typeof Dialog$1.Portal>): react.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: ComponentProps<typeof Dialog$1.Overlay>): react.JSX.Element;
+declare const sizeClasses: {
+    readonly sm: "w-64";
+    readonly md: "w-80";
+    readonly lg: "w-96";
+    readonly xl: "w-[30rem]";
+    readonly full: "w-screen";
+};
+type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+type DrawerSize = keyof typeof sizeClasses;
+declare function DrawerContent({ className, children, side, size, showCloseButton, resizable, ...props }: ComponentProps<typeof Dialog$1.Content> & {
+    side?: DrawerSide;
+    size?: DrawerSize;
+    showCloseButton?: boolean;
+    resizable?: boolean;
+}): react.JSX.Element;
+declare function DrawerHeader({ className, ...props }: ComponentProps<'div'>): react.JSX.Element;
+declare function DrawerBody({ className, ...props }: ComponentProps<'div'>): react.JSX.Element;
+declare function DrawerFooter({ className, ...props }: ComponentProps<'div'>): react.JSX.Element;
+declare function DrawerTitle({ className, ...props }: ComponentProps<typeof Dialog$1.Title>): react.JSX.Element;
+declare function DrawerDescription({ className, ...props }: ComponentProps<typeof Dialog$1.Description>): react.JSX.Element;
+
 interface TCCEProviderProps {
     children: ReactNode;
     permissions?: string[];
@@ -2040,4 +2259,4 @@ interface TCCEProviderProps {
 }
 declare function TCCEProvider({ children, permissions, toasterPosition, tooltipDelayDuration, }: TCCEProviderProps): react.JSX.Element;
 
-export { type AbilityContextValue, AbilityProvider, type AbilityProviderProps, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, type AnimationTokens, AppShell, type AppShellItem, type AppShellProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button$1 as Button, Calendar, CalendarDayButton, type CalendarEvent, type CalendarView, Can, CanNot, type CanNotProps, type CanProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CellAlignment, Checkbox, ColorPicker, ColorPickerAlpha, type ColorPickerAlphaProps, ColorPickerEyeDropper, type ColorPickerEyeDropperProps, ColorPickerFormat, type ColorPickerFormatProps, ColorPickerHue, type ColorPickerHueProps, ColorPickerOutput, type ColorPickerOutputProps, ColorPickerPresets, type ColorPickerPresetsProps, type ColorPickerProps, ColorPickerSelection, type ColorPickerSelectionProps, type ColumnMeta, Combobox, type ComboboxOption, type ComboboxProps, DataTable, DataTableCardView, type DataTableCardViewProps, DataTableColumnFilter, type DataTableColumnFilterProps, DataTableFooter, type DataTableFooterProps, DataTableHeaderCell, type DataTableHeaderCellProps, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, DataTableSearch, type DataTableSearchProps, DataTableSkeleton, type DataTableSkeletonProps, DataTableToolbar, type DataTableToolbarProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, type DropzoneContentProps, DropzoneEmptyState, type DropzoneEmptyStateProps, type DropzoneProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, type EventCalendarProps, type EventCreateRange, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, type FilterOptionProps, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Link, Logo, type LogoKey, MiniCalendar, MiniCalendarDay, type MiniCalendarDayProps, MiniCalendarDays, type MiniCalendarDaysProps, MiniCalendarNavigation, type MiniCalendarNavigationProps, type MiniCalendarProps, Navbar, type NavbarDropdownItem, type NavbarNavLink, type NavbarNotification, type NavbarProps, type NavbarUtilityLink, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PinInput, type PinInputProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RowAction, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger$1 as SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDirection, type SortRecord, Spinner, SpinnerDots, type SpinnerDotsProps, SpinnerLoader, type SpinnerLoaderProps, type SpinnerProps, Status, StatusIndicator, type StatusIndicatorProps, StatusLabel, type StatusLabelProps, type StatusProps, Switch, TCCEProvider, type TCCEProviderProps, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, type TableCellSize, type TableClassNames, type TableColumnDef, type TableContextType, TableFooter, TableHead, TableHeader, TablePagination, type TablePaginationProps, TableRow, type TableVariant, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextAs, type TextProps, type TextSize, type TextWeight, Textarea, type ToastAction, type ToastItem, type ToastType, Toaster, type ToasterPosition, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseTableDataProps, type UseTableDataReturn, type UseTableFilteringProps, type UseTableFilteringReturn, type UseTableGlobalFilterProps, type UseTableGlobalFilterReturn, type UseTableSizingProps, type UseTableSizingReturn, type UseTableSortingProps, type UseTableSortingReturn, type UseTableVisibilityProps, type UseTableVisibilityReturn, alertVariants, animation, avatarVariants, badgeVariants, buttonVariants$1 as buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast };
+export { type AbilityContextValue, AbilityProvider, type AbilityProviderProps, type AbilityStatus, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, type AnimationTokens, AppShell, type AppShellItem, type AppShellProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BottomNav, type BottomNavItem, BottomNavTabs, BottomNavTabsContent, type BottomNavTabsItem, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button$1 as Button, type CalendarEvent, type CalendarView, Can, CanNot, type CanNotProps, type CanProps, type CanState, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CellAlignment, Checkbox, ColorPicker, ColorPickerAlpha, type ColorPickerAlphaProps, ColorPickerEyeDropper, type ColorPickerEyeDropperProps, ColorPickerFormat, type ColorPickerFormatProps, ColorPickerHue, type ColorPickerHueProps, ColorPickerOutput, type ColorPickerOutputProps, ColorPickerPresets, type ColorPickerPresetsProps, type ColorPickerProps, ColorPickerSelection, type ColorPickerSelectionProps, type ColumnMeta, Combobox, type ComboboxMatchMode, type ComboboxOption, type ComboboxProps, DataTable, DataTableCardView, type DataTableCardViewProps, DataTableColumnFilter, type DataTableColumnFilterProps, DataTableFooter, type DataTableFooterProps, DataTableHeaderCell, type DataTableHeaderCellProps, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, DataTableSearch, type DataTableSearchProps, DataTableSkeleton, type DataTableSkeletonProps, DataTableToolbar, type DataTableToolbarProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, type DropzoneContentProps, DropzoneEmptyState, type DropzoneEmptyStateProps, type DropzoneProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, type EventCalendarProps, type EventCreateRange, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, type FilterOptionProps, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, Link, Logo, type LogoKey, MiniCalendar, MiniCalendarDay, type MiniCalendarDayProps, MiniCalendarDays, type MiniCalendarDaysProps, MiniCalendarNavigation, type MiniCalendarNavigationProps, type MiniCalendarProps, Navbar, type NavbarDropdownItem, type NavbarNavLink, type NavbarNotification, type NavbarProps, type NavbarUtilityLink, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Permission, PhoneField, type PhoneFieldCountry, type PhoneFieldProps, PhoneFieldValidity, PinInput, type PinInputProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RowAction, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger$1 as SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDirection, type SortRecord, Spinner, SpinnerDots, type SpinnerDotsProps, SpinnerLoader, type SpinnerLoaderProps, type SpinnerProps, Status, StatusIndicator, type StatusIndicatorProps, StatusLabel, type StatusLabelProps, type StatusProps, Switch, TCCEProvider, type TCCEProviderProps, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, type TableCellSize, type TableClassNames, type TableColumnDef, type TableContextType, TableFooter, TableHead, TableHeader, TablePagination, type TablePaginationProps, TableRow, type TableVariant, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextAs, type TextProps, type TextSize, type TextWeight, Textarea, type ToastAction, type ToastItem, type ToastType, Toaster, type ToasterPosition, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseTableDataProps, type UseTableDataReturn, type UseTableFilteringProps, type UseTableFilteringReturn, type UseTableGlobalFilterProps, type UseTableGlobalFilterReturn, type UseTableSizingProps, type UseTableSizingReturn, type UseTableSortingProps, type UseTableSortingReturn, type UseTableVisibilityProps, type UseTableVisibilityReturn, alertVariants, animation, avatarVariants, badgeVariants, buttonVariants$1 as buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAbilityStatus, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast };