@the12company/ui 0.1.1 → 0.1.3

package/README.md

@@ -1,37 +1,200 @@
-# `@the12company/ui`
+# @the12company/ui
 
-Shared **tokens + components** (Vite / Next). Lives in `packages/ui`.
+**Capivara design system** — shared React components and design tokens for Vite and Next.js apps.
 
-## Local use (this repo)
+One kit. Many products. Each app keeps its own brand color by overriding CSS variables.
 
-Vite/TS aliases resolve to source — no publish needed day to day.
+---
 
-```tsx
-import { Button, Card } from "@the12company/ui";
-// or keep existing paths:
-import { Button } from "@/components/ui/button";
+## What’s inside
+
+| Layer | What you get |
+| ----- | ------------ |
+| **Tokens** | Colors, radius, sidebar, charts (`theme.css`) |
+| **Utilities** | Shared classes like `bg-content-glass` |
+| **Components** | Buttons, forms, dialogs, sidebar, chrome header, … |
+| **Helpers** | `cn`, `useToast`, `useIsMobile` |
+
+Lives in this monorepo at `packages/ui`. Published to npm as `@the12company/ui`.
+
+---
+
+## Quick start (another app)
+
+### 1. Install
+
+```bash
+npm install @the12company/ui
 ```
 
+Also install the **peer dependencies** for the components you use (React, Radix primitives, etc.). See `package.json` → `peerDependencies`.
+
+### 2. Styles
+
+In your global CSS:
+
 ```css
 @import "@the12company/ui/tokens/theme.css";
+@import "@the12company/ui/tokens/utilities.css";
 ```
 
-## Republish after changes
+### 3. Tailwind
+
+Map semantic colors to the CSS variables (same pattern as this repo’s `tailwind.config.ts`), and include the package in `content` so classes aren’t purged:
+
+```ts
+content: [
+  "./src/**/*.{ts,tsx}",
+  "./node_modules/@the12company/ui/dist/**/*.{js,mjs}",
+]
+```
+
+### 4. Use components
+
+```tsx
+import { Button, Card, AppChromeHeader } from "@the12company/ui";
+
+export function Example() {
+  return (
+    <Card className="p-6">
+      <Button>Salvar</Button>
+    </Card>
+  );
+}
+```
+
+---
+
+## Branding (your “main” color)
+
+Components use **semantic** tokens (`bg-primary`, `text-destructive`, …) — never a hard-coded brand hex.
+
+Override in your app:
+
+```css
+:root {
+  --primary: 160 84% 39%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 160 84% 39%;
+}
+
+.dark {
+  --primary: 160 70% 45%;
+  --primary-foreground: 0 0% 100%;
+}
+```
+
+Values are **HSL channels without `hsl()`** (e.g. `217 91% 50%`), matching Tailwind’s `hsl(var(--primary))` setup.
+
+Neutral defaults live in `theme-contract.css`. This product’s palette is `theme.css`.
 
-1. Edit components under `packages/ui/src/`
-2. Bump version in `packages/ui/package.json` (e.g. `0.1.0` → `0.1.1`)
-3. From repo root:
+---
+
+## Layout chrome (structure only)
+
+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={
+      <AppChromeBrand
+        logo={<img src="/logo.svg" alt="" className="h-4.5 w-4.5" />}
+        title="Your Product"
+        subtitle="Tagline"
+      />
+    }
+    footer={<YourAccountMenu />}
+  >
+    <YourNavLinks />
+  </AppChromeSidebar>
+
+  <AppChromeHeader
+    start={<SidebarTrigger />}
+    topBar={<YourTopBar />}
+  >
+    <YourFiltersOrTrialStrip />
+  </AppChromeHeader>
+</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.
+
+---
+
+## Developing in this repo
+
+Day to day you **don’t need to publish**. Vite/TS resolve `@the12company/ui` to source.
+
+```tsx
+import { Button } from "@the12company/ui";
+// existing app paths still work:
+import { Button } from "@/components/ui/button";
+```
+
+Edit files under `packages/ui/src/`.
+
+---
+
+## Publishing a new version
+
+Only needed when other repos should get updates.
+
+1. Change code in `packages/ui/src/`
+2. Bump `version` in `packages/ui/package.json` (e.g. `0.1.1` → `0.1.2`)
+3. From the **repo root**:
 
 ```bash
 npm run publish:ui
 ```
 
-(`NPM_TOKEN` / `npm login` is only required for this publish step.)
+Requires `npm login` (or a local auth token). The GitHub `NPM_TOKEN` secret is optional if you only publish from your machine.
 
-## Install in another repo
+> Same version can’t be republished on npm — always bump first.
+
+---
+
+## Package layout
 
-```bash
-npm install @the12company/ui
 ```
+packages/ui/
+├── src/
+│   ├── components/     # primitives + chrome + PageHeader, ChartCard, …
+│   ├── hooks/
+│   ├── lib/            # cn, pagination helpers
+│   ├── tokens/
+│   └── index.ts
+├── package.json
+└── README.md
+```
+
+---
+
+## Tips
 
-Install peer deps your app needs (React, Radix primitives used by the components you import, etc.).
+- Prefer importing from `@the12company/ui` in new apps.
+- Keep product pages, agents, and API logic **out** of this package.
+- After adding a new shared component: export it from `src/index.ts`, bump version, publish.

package/dist/index.d.ts

@@ -110,6 +110,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>;
@@ -127,6 +144,29 @@ type AppChromeHeaderProps = {
  */
 declare function AppChromeHeader({ headerRef, className, start, topBar, children, }: AppChromeHeaderProps): React$1.JSX.Element;
 
+type AppChromeSidebarProps = {
+    /** Brand / logo area at the top. */
+    header?: React$1.ReactNode;
+    /** Navigation (menus, links). */
+    children?: React$1.ReactNode;
+    /** Account / settings docked at the bottom. */
+    footer?: React$1.ReactNode;
+    /** Passed to underlying `Sidebar` (default `"icon"`). */
+    collapsible?: "offcanvas" | "icon" | "none";
+    className?: string;
+    contentClassName?: string;
+    /**
+     * On mobile / drawer mode, close the sheet when an in-app link is clicked.
+     * @default true
+     */
+    closeOnNavigate?: boolean;
+};
+/**
+ * Structural app sidebar: header + scrollable nav + footer.
+ * Product nav items, brand, and account UI are passed as slots.
+ */
+declare function AppChromeSidebar({ header, children, footer, collapsible, className, contentClassName, closeOnNavigate, }: AppChromeSidebarProps): React$1.JSX.Element;
+
 declare const AspectRatio: React$1.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
@@ -256,6 +296,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>>;
@@ -500,6 +556,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;
@@ -538,6 +616,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;
@@ -600,6 +705,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>>;
@@ -621,7 +771,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "top" | "bottom" | "right" | "left" | null | undefined;
+    side?: "top" | "bottom" | "left" | "right" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
     overlayClassName?: string;
@@ -773,4 +923,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, 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, 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, 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, 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, badgeVariants, buildRangeLabel, buildVisiblePages, buttonVariants, cn, inputVariants, navigationMenuTriggerStyle, toast, toggleVariants, useFormField, useIsMobile, useSidebar, useToast };