@the12company/ui 0.1.2 → 0.1.3

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,13 +182,10 @@ 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, …
+│   ├── 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

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>;
@@ -279,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>>;
@@ -523,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;
@@ -561,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;
@@ -623,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>>;
@@ -796,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, 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, 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 };