@the12company/ui 0.1.2 → 0.1.5

package/README.md

@@ -96,15 +96,26 @@ Floating glass header and sidebar shells — pass product UI as slots:
 
 ```tsx
 import {
+  AppChromeBrand,
   AppChromeHeader,
   AppChromeSidebar,
+  PageHeader,
+  ChartCard,
+  ListingPagination,
+  SearchableSelect,
   SidebarProvider,
   SidebarTrigger,
 } from "@the12company/ui";
 
 <SidebarProvider>
   <AppChromeSidebar
-    header={<YourBrand />}
+    header={
+      <AppChromeBrand
+        logo={<img src="/logo.svg" alt="" className="h-4.5 w-4.5" />}
+        title="Your Product"
+        subtitle="Tagline"
+      />
+    }
     footer={<YourAccountMenu />}
   >
     <YourNavLinks />
@@ -119,6 +130,15 @@ import {
 </SidebarProvider>
 ```
 
+Also available:
+
+| Component | Role |
+| --------- | ---- |
+| `PageHeader` | Title block (label, badge, meta, back, actions) |
+| `ChartCard` | Section / chart surface |
+| `ListingPagination` | List paging (default + minimal) |
+| `SearchableSelect` | Async combobox — inject `loadItems` |
+
 Primitives (`Sidebar`, `SidebarMenu`, `SidebarTrigger`, …) are also exported for custom layouts.
 
 No routing or business logic inside the kit — only structure and look.
@@ -162,18 +182,28 @@ Requires `npm login` (or a local auth token). The GitHub `NPM_TOKEN` secret is o
 ```
 packages/ui/
 ├── src/
-│   ├── components/     # UI primitives + AppChromeHeader
-│   ├── hooks/          # useToast, useIsMobile
-│   ├── lib/cn.ts
+│   ├── components/     # primitives + chrome + PageHeader, ChartCard, …
+│   │   └── auth/       # AuthShell, AuthCard, Aurora, EmailInput, PasswordInput, …
+│   ├── hooks/
+│   ├── lib/            # cn, pagination helpers
 │   ├── tokens/
-│   │   ├── theme.css           # Capivara / QA brand
-│   │   ├── theme-contract.css  # token names + neutrals
-│   │   └── utilities.css       # bg-content-glass, …
 │   └── index.ts
 ├── package.json
 └── README.md
 ```
 
+You can group related components in folders (e.g. `components/auth/`). Export them from a folder `index.ts` and from the package root `src/index.ts` so consumers can still do:
+
+```tsx
+import { EmailInput, PasswordInput } from "@the12company/ui";
+```
+
+In this monorepo (Vite/TS aliases), deep imports also work:
+
+```tsx
+import { EmailInput } from "@the12company/ui/components/auth";
+```
+
 ---
 
 ## Tips

package/dist/index.d.ts

@@ -20,7 +20,6 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { DialogProps } from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import * as vaul from 'vaul';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as react_hook_form from 'react-hook-form';
@@ -110,6 +109,23 @@ declare const AlertDialogDescription: React$1.ForwardRefExoticComponent<Omit<Ale
 declare const AlertDialogAction: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogCancel: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
+type AppChromeBrandProps = {
+    /** Brand mark (img, svg, or custom node). */
+    logo?: React$1.ReactNode;
+    title?: React$1.ReactNode;
+    subtitle?: React$1.ReactNode;
+    className?: string;
+    /**
+     * Override collapse detection. When omitted, uses sidebar state
+     * (hidden on mobile drawer).
+     */
+    collapsed?: boolean;
+};
+/**
+ * Sidebar brand row: logo + title/subtitle that collapse with the sidebar.
+ */
+declare function AppChromeBrand({ logo, title, subtitle, className, collapsed: collapsedProp, }: AppChromeBrandProps): React$1.JSX.Element;
+
 type AppChromeHeaderProps = {
     /** Ref on the outer `<header>` (e.g. for measuring chrome height). */
     headerRef?: React$1.Ref<HTMLElement>;
@@ -152,6 +168,103 @@ declare function AppChromeSidebar({ header, children, footer, collapsible, class
 
 declare const AspectRatio: React$1.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React$1.RefAttributes<HTMLDivElement>>;
 
+type AuroraProps = {
+    /** Exactly three hex colors for the horizontal ramp (fewer/more are normalized). */
+    colorStops?: [string, string, string] | string[];
+    amplitude?: number;
+    blend?: number;
+    /** Override animation clock (ms); default uses `requestAnimationFrame` time. */
+    time?: number;
+    speed?: number;
+};
+/** Full-bleed WebGL aurora background (requires peer `ogl`). */
+declare function Aurora(props: AuroraProps): React$1.JSX.Element;
+
+declare const authBannerVariants: (props?: ({
+    variant?: "destructive" | "success" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AuthBannerProps = React$1.HTMLAttributes<HTMLDivElement> & VariantProps<typeof authBannerVariants> & {
+    /** Override the default status icon. */
+    icon?: React$1.ReactNode;
+};
+declare const AuthBanner: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    variant?: "destructive" | "success" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /** Override the default status icon. */
+    icon?: React$1.ReactNode;
+} & React$1.RefAttributes<HTMLDivElement>>;
+
+type AuthBrandProps = React$1.HTMLAttributes<HTMLElement> & {
+    /** Product mark (e.g. `<img />` or logo component). */
+    logo: React$1.ReactNode;
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
+};
+/**
+ * Centered product brand block above the auth card.
+ */
+declare const AuthBrand: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & {
+    /** Product mark (e.g. `<img />` or logo component). */
+    logo: React$1.ReactNode;
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
+} & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * Glass auth surface. Prefer this over `Card` for login/register —
+ * stock `Card` uses border + `bg-card` and different radius/padding.
+ */
+declare const AuthCard: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const AuthCardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const AuthCardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const AuthCardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+type AuthFieldErrorProps = React$1.HTMLAttributes<HTMLParagraphElement>;
+/** Inline field validation message under auth inputs. */
+declare const AuthFieldError: React$1.ForwardRefExoticComponent<AuthFieldErrorProps & React$1.RefAttributes<HTMLParagraphElement>>;
+
+type AuthFooterProps = React$1.HTMLAttributes<HTMLParagraphElement>;
+/** Muted footer line under the auth card (e.g. “Já tem conta? Entrar”). */
+declare const AuthFooter: React$1.ForwardRefExoticComponent<AuthFooterProps & React$1.RefAttributes<HTMLParagraphElement>>;
+type AuthFooterLinkProps = React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+};
+/** Link style for auth footer CTAs — needs `.hover-underline` from utilities.css. */
+declare const AuthFooterLink: React$1.ForwardRefExoticComponent<React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+} & React$1.RefAttributes<HTMLAnchorElement>>;
+
+type AuthShellProps = React$1.HTMLAttributes<HTMLDivElement> & {
+    /** Full-bleed background (e.g. `<Aurora />`). */
+    background?: React$1.ReactNode;
+    /** Classes for the background layer (opacity, etc.). */
+    backgroundClassName?: string;
+};
+/**
+ * Full-viewport auth page shell: centered column over an optional animated background.
+ */
+declare const AuthShell: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
+    /** Full-bleed background (e.g. `<Aurora />`). */
+    background?: React$1.ReactNode;
+    /** Classes for the background layer (opacity, etc.). */
+    backgroundClassName?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const inputVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputProps = React$1.ComponentProps<"input"> & VariantProps<typeof inputVariants>;
+declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+
+type EmailInputProps = Omit<InputProps, "type">;
+declare const EmailInput: React$1.ForwardRefExoticComponent<Omit<EmailInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+
+type PasswordInputProps = Omit<InputProps, "type"> & {
+    /** Initial visibility of the password text. */
+    defaultVisible?: boolean;
+};
+declare const PasswordInput: React$1.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+
 declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
 declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
@@ -279,6 +392,22 @@ declare const ChartLegendContent: React$1.ForwardRefExoticComponent<Omit<React$1
     nameKey?: string;
 }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
+type ChartCardProps = {
+    title: React$1.ReactNode;
+    subtitle?: React$1.ReactNode;
+    children: React$1.ReactNode;
+    action?: React$1.ReactNode;
+    titleInfo?: React$1.ReactNode;
+    titleClassName?: string;
+    /** Use glass surface (`bg-content-glass`) instead of solid card. */
+    glass?: boolean;
+    className?: string;
+};
+/**
+ * Section / chart surface with title row, optional subtitle, and action slot.
+ */
+declare function ChartCard({ title, subtitle, children, action, titleInfo, titleClassName, glass, className, }: ChartCardProps): React$1.JSX.Element;
+
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Collapsible: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -407,14 +536,25 @@ declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitiv
 declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
 
 declare const Drawer: {
-    ({ shouldScaleBackground, ...props }: React$1.ComponentProps<typeof Drawer$1.Root>): React$1.JSX.Element;
+    ({ shouldScaleBackground, ...props }: React$1.ComponentPropsWithoutRef<typeof Drawer$1.Root>): React$1.JSX.Element;
     displayName: string;
 };
-declare const DrawerTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DrawerPortal: typeof vaul.Portal;
-declare const DrawerClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DrawerOverlay: React$1.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const DrawerContent: React$1.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function DrawerTrigger({ ...props }: React$1.ComponentPropsWithoutRef<typeof Drawer$1.Trigger>): React$1.JSX.Element;
+declare namespace DrawerTrigger {
+    var displayName: string;
+}
+declare function DrawerPortal({ ...props }: React$1.ComponentPropsWithoutRef<typeof Drawer$1.Portal>): React$1.JSX.Element;
+declare namespace DrawerPortal {
+    var displayName: string;
+}
+declare function DrawerClose({ ...props }: React$1.ComponentPropsWithoutRef<typeof Drawer$1.Close>): React$1.JSX.Element;
+declare namespace DrawerClose {
+    var displayName: string;
+}
+type DrawerOverlayProps = React$1.HTMLAttributes<HTMLDivElement>;
+declare const DrawerOverlay: React$1.ForwardRefExoticComponent<DrawerOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
+type DrawerContentProps = React$1.HTMLAttributes<HTMLDivElement>;
+declare const DrawerContent: React$1.ForwardRefExoticComponent<DrawerContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const DrawerHeader: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
@@ -423,8 +563,10 @@ declare const DrawerFooter: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
 };
-declare const DrawerTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
-declare const DrawerDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+type DrawerTitleProps = React$1.HTMLAttributes<HTMLHeadingElement>;
+declare const DrawerTitle: React$1.ForwardRefExoticComponent<DrawerTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
+type DrawerDescriptionProps = React$1.HTMLAttributes<HTMLParagraphElement>;
+declare const DrawerDescription: React$1.ForwardRefExoticComponent<DrawerDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
 
 type DropdownTriggerProps = Omit<ComponentProps<typeof Button>, "variant"> & {
     open: boolean;
@@ -482,12 +624,6 @@ declare const HoverCard: React$1.FC<HoverCardPrimitive.HoverCardProps>;
 declare const HoverCardTrigger: React$1.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React$1.RefAttributes<HTMLAnchorElement>>;
 declare const HoverCardContent: React$1.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const inputVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type InputProps = React$1.ComponentProps<"input"> & VariantProps<typeof inputVariants>;
-declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
-
 declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
@@ -523,6 +659,28 @@ declare const InputOTPSeparator: React$1.ForwardRefExoticComponent<Omit<React$1.
 
 declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
 
+type ListingPaginationProps = {
+    page: number;
+    totalPages: number;
+    total?: number;
+    pageSize?: number;
+    itemLabel?: string;
+    disabled?: boolean;
+    variant?: "default" | "minimal";
+    className?: string;
+    onPageChange: (page: number) => void;
+    /** Override total formatting in the range label (e.g. capped counts). */
+    formatTotal?: (n: number) => string;
+    labels?: {
+        previous?: string;
+        next?: string;
+        previousAria?: string;
+        nextAria?: string;
+        pageAria?: (page: number) => string;
+    };
+};
+declare function ListingPagination({ page, totalPages, total, pageSize, itemLabel, disabled, variant, className, onPageChange, formatTotal, labels, }: ListingPaginationProps): React$1.JSX.Element | null;
+
 declare const MenubarMenu: (props: MenubarPrimitive.MenubarMenuProps & {
     __scopeMenubar?: _radix_ui_react_context.Scope;
 }) => React$1.JSX.Element;
@@ -561,6 +719,33 @@ declare const NavigationMenuLink: React$1.ForwardRefExoticComponent<NavigationMe
 declare const NavigationMenuViewport: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const NavigationMenuIndicator: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
+type PageHeaderProps = {
+    /** Optional eyebrow above the title. */
+    label?: React$1.ReactNode;
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    /** Shown while the title is resolving (e.g. async folder name). */
+    titleLoading?: boolean;
+    /** Badge or chips next to the title. */
+    badge?: React$1.ReactNode;
+    /** Right-side meta (e.g. “Updated at …”). */
+    meta?: React$1.ReactNode;
+    /** Back control (link/button) — fully owned by the consumer. */
+    back?: React$1.ReactNode;
+    /** Actions aligned to the end (buttons, menus). */
+    children?: React$1.ReactNode;
+    className?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    /** Skeleton width hint when `titleLoading`. */
+    titleSkeletonClassName?: string;
+};
+/**
+ * Shared page title block: optional back, label, title (+ badge),
+ * description, meta, and trailing actions.
+ */
+declare function PageHeader({ label, title, description, titleLoading, badge, meta, back, children, className, titleClassName, descriptionClassName, titleSkeletonClassName, }: PageHeaderProps): React$1.JSX.Element;
+
 declare const Pagination: {
     ({ className, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
     displayName: string;
@@ -623,6 +808,51 @@ declare const ResizableHandle: ({ withHandle, className, ...props }: React.Compo
 declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
+type SearchableSelectItem = {
+    id: string;
+    label: string;
+    /** Optional secondary text (e.g. id shown beside the name). */
+    secondary?: string;
+};
+type SearchableSelectLoadResult = {
+    items: SearchableSelectItem[];
+    hasMore: boolean;
+};
+type SearchableSelectProps = {
+    value: string;
+    onChange: (id: string) => void;
+    /** Sentinel value meaning “no filter / all”. @default "all" */
+    allValue?: string;
+    allLabel: string;
+    searchPlaceholder: string;
+    loadItems: (args: {
+        query: string;
+        limit: number;
+        offset: number;
+    }) => Promise<SearchableSelectLoadResult>;
+    /**
+     * Resolve a label when the selected id is not yet in the loaded list.
+     * Return null to fall back to showing the raw id.
+     */
+    resolveLabel?: (id: string) => Promise<string | null>;
+    pageSize?: number;
+    triggerClassName?: string;
+    icon?: React$1.ReactNode;
+    nestedInPopover?: boolean;
+    disabled?: boolean;
+    /** When this changes, cached items/labels are cleared. */
+    resetKey?: string | number;
+    emptyLabel?: string;
+    loadingLabel?: string;
+    loadingMoreLabel?: string;
+    debounceMs?: number;
+};
+/**
+ * Async searchable combobox with infinite scroll.
+ * Data loading is injected via `loadItems` — no product API coupling.
+ */
+declare function SearchableSelect({ value, onChange, allValue, allLabel, searchPlaceholder, loadItems, resolveLabel, pageSize, triggerClassName, icon, nestedInPopover, disabled, resetKey, emptyLabel, loadingLabel, loadingMoreLabel, debounceMs, }: SearchableSelectProps): React$1.JSX.Element;
+
 declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
@@ -796,4 +1026,8 @@ declare const ToggleGroupItem: React$1.ForwardRefExoticComponent<Omit<ToggleGrou
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppChromeHeader, type AppChromeHeaderProps, AppChromeSidebar, type AppChromeSidebarProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, 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, Toaster$1 as SonnerToaster, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, inputVariants, navigationMenuTriggerStyle, toast, toggleVariants, useFormField, useIsMobile, useSidebar, useToast };
+type VisiblePage = number | "ellipsis";
+declare function buildVisiblePages(current: number, totalPages: number): VisiblePage[];
+declare function buildRangeLabel(page: number, pageSize: number, total: number, itemLabel?: string, formatTotal?: (n: number) => string): string;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppChromeBrand, type AppChromeBrandProps, AppChromeHeader, type AppChromeHeaderProps, AppChromeSidebar, type AppChromeSidebarProps, AspectRatio, Aurora, type AuroraProps, AuthBanner, type AuthBannerProps, AuthBrand, type AuthBrandProps, AuthCard, AuthCardDescription, AuthCardHeader, AuthCardTitle, AuthFieldError, type AuthFieldErrorProps, AuthFooter, AuthFooterLink, type AuthFooterLinkProps, type AuthFooterProps, AuthShell, type AuthShellProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartCard, type ChartCardProps, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailInput, type EmailInputProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, ListingPagination, type ListingPaginationProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchableSelect, type SearchableSelectItem, type SearchableSelectLoadResult, type SearchableSelectProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, 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, Toaster$1 as SonnerToaster, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type VisiblePage, authBannerVariants, badgeVariants, buildRangeLabel, buildVisiblePages, buttonVariants, cn, inputVariants, navigationMenuTriggerStyle, toast, toggleVariants, useFormField, useIsMobile, useSidebar, useToast };