@formant/aesthetics 0.0.3 → 0.0.6

package/README.md

@@ -1,6 +1,6 @@
 # @formant/aesthetics
 
-Formant design system — themed React components built on shadcn/ui, Radix, and Tailwind CSS v4.
+Formant design system — themed React components built on shadcn/ui and Radix UI.
 
 [![npm version](https://badge.fury.io/js/@formant%2Faesthetics.svg)](https://www.npmjs.com/package/@formant/aesthetics)
 
@@ -12,81 +12,42 @@ npm install @formant/aesthetics
 
 Peer dependencies required:
 ```bash
-npm install react react-dom tailwindcss@^4.0.0
+npm install react react-dom
 ```
 
-## Minimal Example (Vite + React + Tailwind v4)
+## Quick Start
 
-Here's the complete setup based on what we discovered building `formant-metaphysics`:
+### 1. Wrap your app with FormantAesthetics
 
-### 1. `index.css`
-
-```css
-@import "tailwindcss";
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');
-
-/* CRITICAL: This tells Tailwind to scan the compiled library for classes.
-   Path is relative to this CSS file. */
-@source "../../node_modules/@formant/aesthetics/dist/**/*.js";
-
-@theme inline {
-  --font-heading: 'Space Grotesk', sans-serif;
-  --font-sans: 'Inter', sans-serif;
-  --font-mono: 'JetBrains Mono', monospace;
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  /* ... (see full theme in styles/globals.css) */
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-}
-
-:root {
-  /* Formant Dark Theme (Slate Mist) */
-  --background: #202428;
-  --foreground: #F2F3F4;
-  --card: #0A0F11;
-  --primary: #ACC3B3;
-  --primary-foreground: #0A0F11;
-  --muted: #202428;
-  --muted-foreground: #A3ABA9;
-  --border: rgba(163, 171, 169, 0.1);
-  --input: rgba(163, 171, 169, 0.2);
-  --ring: #ACC3B3;
-  --radius: 0.25rem;
-}
+```tsx
+import { FormantAesthetics } from "@formant/aesthetics";
 
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-family: 'Inter', sans-serif;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    font-family: 'Space Grotesk', sans-serif;
-    letter-spacing: -0.02em;
-  }
+function App() {
+  return (
+    <FormantAesthetics>
+      <YourApp />
+    </FormantAesthetics>
+  );
 }
 ```
 
-### 2. `App.tsx`
+The `FormantAesthetics` component automatically injects all necessary CSS including:
+- Google Fonts (Inter, Space Grotesk, JetBrains Mono)
+- CSS variables for the Formant dark theme
+- All utility classes used by components
+
+### 2. Use Components
 
 ```tsx
 import { Button, Card, CardHeader, CardTitle, Badge } from "@formant/aesthetics";
 
-function App() {
+function MyComponent() {
   return (
     <div className="min-h-screen bg-background text-foreground p-8">
       <Card>
         <CardHeader>
           <CardTitle>Hello @formant/aesthetics</CardTitle>
-          <Badge>v0.0.0</Badge>
+          <Badge>v0.0.3</Badge>
         </CardHeader>
         <div className="p-6 space-y-4">
           <Button>Default</Button>
@@ -97,117 +58,37 @@ function App() {
     </div>
   );
 }
-
-export default App;
-```
-
-### 3. `main.tsx`
-
-```tsx
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
 ```
 
-### Key Insights
-
-1. **`@source` path must be relative to the CSS file** — from `src/index.css`, go up 2 levels to `node_modules/`
-2. **Theme variables live in `:root`** — Tailwind needs them at build time to generate classes like `bg-background`
-3. **No runtime CSS injection needed** — the theme is baked into your CSS, components just use the variables
+That's it! No build step or CSS configuration required. The `FormantAesthetics` component handles everything.
 
-## Alternative: Using the Canonical Theme
+## Optional: Import Global Styles
 
-If you want the complete Formant theme without copying the CSS:
+If you prefer to include styles in your own CSS pipeline, you can import the base theme:
 
 ```css
-@import "tailwindcss";
 @import "@formant/aesthetics/styles";
-
-/* Customize specific variables */
-@theme inline {
-  --color-primary: #your-color;
-}
 ```
 
-## Full Setup Reference
-
-### 1. Import components
+Then use the `ThemeProvider` directly instead of `FormantAesthetics`:
 
 ```tsx
-import { Button, Card, CardHeader, CardTitle } from "@formant/aesthetics";
+import { ThemeProvider } from "@formant/aesthetics";
 
 function App() {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Hello Formant</CardTitle>
-      </CardHeader>
-      <Button>Click me</Button>
-    </Card>
+    <ThemeProvider>
+      <YourApp />
+    </ThemeProvider>
   );
 }
 ```
 
-### 2. Configure Tailwind to scan the library
-
-In your `index.css` (or `globals.css`):
-
-```css
-@import "tailwindcss";
-
-/* Tell Tailwind to scan the compiled library for classes */
-@source "../../node_modules/@formant/aesthetics/dist/**/*.js";
-
-/* Formant theme variables */
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-primary: var(--primary);
-  /* ... other theme vars ... */
-}
-
-:root {
-  /* Formant Dark Theme (Slate Mist) */
-  --background: #202428;
-  --foreground: #F2F3F4;
-  --card: #0A0F11;
-  --primary: #ACC3B3;
-  /* ... etc ... */
-}
-```
-
-### 3. Import the canonical theme (optional)
-
-For the complete Formant theme including fonts and all CSS variables:
-
-```css
-@import "@formant/aesthetics/styles";
-```
-
-Then customize as needed:
-
-```css
-@import "@formant/aesthetics/styles";
-
-@theme inline {
-  /* Override specific variables */
-  --color-primary: #your-color;
-}
-```
-
-## What's included
+## What's Included
 
 - **40+ shadcn/ui components** — Accordion, Alert, Badge, Button, Card, Dialog, Dropdown, Form, Input, Select, Table, Tabs, Toast, etc.
-- **Formant brand components** — `FormantLogo`, `FormantLogoWithText`
-- **Theme provider** — `ThemeProvider` from next-themes (dark/light mode with keyboard shortcut)
+- **Formant brand components** — `FormantLogo`, `FormantLogoWithText`, `AIChat`, `KnowledgeGraph`
+- **Theme provider** — `ThemeProvider` from next-themes (dark/light mode)
 - **Charts** — Recharts components (BarChart, LineChart, PieChart, etc.)
 - **Utilities** — `cn()` for class merging
 
@@ -230,11 +111,20 @@ npm run typecheck
 ## Architecture
 
 - **Source**: TypeScript React components in `components/`
-- **Build**: tsup compiles to `dist/index.js` + `dist/index.d.ts`
-- **Styling**: Tailwind CSS v4 with CSS variables for theming
+- **Build**: `tsup` compiles to `dist/index.js` + `dist/index.d.ts`
+- **Styling**: Static CSS injected by `FormantAesthetics` component — no external CSS build step required
 - **Distribution**: Published to npm as `@formant/aesthetics`
 
-The compiled JavaScript preserves all Tailwind class names as strings, allowing consuming projects to scan them and generate only the CSS they need.
+## Migration from Tailwind
+
+If you were previously using the Tailwind version of @formant/aesthetics:
+
+1. Remove Tailwind CSS from your project
+2. Remove `@tailwindcss/postcss` from your PostCSS config
+3. Remove the safelist copy script from your `postinstall`
+4. Wrap your app with `FormantAesthetics` instead of importing CSS files
+
+All component props and APIs remain exactly the same.
 
 ## License
 

package/dist/index.d.ts

@@ -443,10 +443,12 @@ declare function FormantLogoWithText({ logoSize, text, variant, orientation, gap
 
 declare function ThemeProvider({ children, ...props }: React$1.ComponentProps<typeof ThemeProvider$1>): react_jsx_runtime.JSX.Element;
 
+declare const FORMANT_FONTS = "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap";
+declare const FORMANT_COMPLETE_CSS: string;
 declare function FormantAesthetics({ children }: {
     children: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardAction, 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, ContextMenuItem, ContextMenuLabel, 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, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FormantAesthetics, FormantLogo, type FormantLogoProps, FormantLogoWithText, type FormantLogoWithTextProps, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, 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, SheetTitle, SheetTrigger, Skeleton, Slider, Toaster as Sonner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, toggleVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardAction, 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, ContextMenuItem, ContextMenuLabel, 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, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FORMANT_COMPLETE_CSS, FORMANT_FONTS, FormantAesthetics, FormantLogo, type FormantLogoProps, FormantLogoWithText, type FormantLogoWithTextProps, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, 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, SheetTitle, SheetTrigger, Skeleton, Slider, Toaster as Sonner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, toggleVariants };