@the12company/ui 0.1.1 → 0.1.2

package/README.md

@@ -1,37 +1,183 @@
-# `@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";
+```
+
+### 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%;
+}
 ```
 
-## Republish after changes
+Values are **HSL channels without `hsl()`** (e.g. `217 91% 50%`), matching Tailwind’s `hsl(var(--primary))` setup.
 
-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:
+Neutral defaults live in `theme-contract.css`. This product’s palette is `theme.css`.
+
+---
+
+## Layout chrome (structure only)
+
+Floating glass header and sidebar shells — pass product UI as slots:
+
+```tsx
+import {
+  AppChromeHeader,
+  AppChromeSidebar,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@the12company/ui";
+
+<SidebarProvider>
+  <AppChromeSidebar
+    header={<YourBrand />}
+    footer={<YourAccountMenu />}
+  >
+    <YourNavLinks />
+  </AppChromeSidebar>
+
+  <AppChromeHeader
+    start={<SidebarTrigger />}
+    topBar={<YourTopBar />}
+  >
+    <YourFiltersOrTrialStrip />
+  </AppChromeHeader>
+</SidebarProvider>
+```
+
+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/     # UI primitives + AppChromeHeader
+│   ├── hooks/          # useToast, useIsMobile
+│   ├── lib/cn.ts
+│   ├── tokens/
+│   │   ├── theme.css           # Capivara / QA brand
+│   │   ├── theme-contract.css  # token names + neutrals
+│   │   └── utilities.css       # bg-content-glass, …
+│   └── 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

@@ -127,6 +127,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>>;
@@ -621,7 +644,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 +796,4 @@ 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 };
+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 };