@framingui/ui 0.6.10 → 0.6.11

package/README.md

@@ -10,33 +10,54 @@ Use this package when you want FramingUI components directly in an app, whether
 pnpm add @framingui/ui
 ```
 
-Import the shared styles when your app uses the FramingUI-native style contract:
+Import the shared styles once at the app root when your app uses the FramingUI-native style contract:
 
-```tsx
-import '@framingui/ui/styles';
+```css
+/* app/globals.css */
+@import '@framingui/ui/styles';
 ```
 
-## Basic Usage
+Then mount `FramingUIProvider` near your root layout. Pass a full theme object when you want FramingUI to inject the CSS variables for you.
 
 ```tsx
-import '@framingui/ui/styles';
-import { Button, Card, CardContent, CardHeader, CardTitle, Input } from '@framingui/ui';
-
-export function SignupCard() {
+import {
+  FramingUIProvider,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+} from '@framingui/ui';
+import theme from './neutral-workspace.json';
+
+export function App() {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Create account</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Input type="email" placeholder="Email" />
-        <Button>Create account</Button>
-      </CardContent>
-    </Card>
+    <FramingUIProvider theme={theme}>
+      <Card>
+        <CardHeader>
+          <CardTitle>Create account</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Input type="email" placeholder="Email" />
+          <Button>Create account</Button>
+        </CardContent>
+      </Card>
+    </FramingUIProvider>
   );
 }
 ```
 
+If your app already loads theme CSS separately, you can use the provider just to keep `data-theme` in sync:
+
+```tsx
+import { FramingUIProvider } from '@framingui/ui';
+
+export function App() {
+  return <FramingUIProvider themeId="neutral-workspace">{/* app */}</FramingUIProvider>;
+}
+```
+
 ## What You Get
 
 - core components such as `Button`, `Input`, `Card`, `Badge`, `Avatar`, and `Select`

package/dist/index.d.mts

@@ -1,11 +1,12 @@
 import { ClassValue } from 'clsx';
 import { TokenReference } from '@framingui/tokens';
-import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { Variants, Transition } from 'framer-motion';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -77,23 +78,6 @@ type TektonTokenVars = typeof tokenVars;
 declare function isTokenReference(value: string): value is TokenReference;
 declare function extractTokenName(token: TokenReference): string;
 
-declare const headingVariants: (props?: ({
-    level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface HeadingProps extends React$1.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-}
-declare const Heading: React$1.ForwardRefExoticComponent<HeadingProps & React$1.RefAttributes<HTMLHeadingElement>>;
-
-declare const textVariants: (props?: ({
-    variant?: "body" | "caption" | "label" | "code" | null | undefined;
-    size?: "sm" | "default" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface TextProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof textVariants> {
-    as?: 'span' | 'p' | 'div';
-}
-declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;
-
 interface ThemeDefinition {
     id: string;
     name: string;
@@ -164,6 +148,30 @@ declare function injectThemeCSS(theme: ThemeDefinition): void;
 declare function getCurrentThemeId(): string | null;
 declare function setThemeId(themeId: string): void;
 
+interface FramingUIProviderProps {
+    children: ReactNode;
+    theme?: ThemeDefinition | null;
+    themeId?: string;
+}
+declare function FramingUIProvider({ children, theme, themeId }: FramingUIProviderProps): react_jsx_runtime.JSX.Element;
+
+declare const headingVariants: (props?: ({
+    level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface HeadingProps extends React$1.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare const Heading: React$1.ForwardRefExoticComponent<HeadingProps & React$1.RefAttributes<HTMLHeadingElement>>;
+
+declare const textVariants: (props?: ({
+    variant?: "body" | "caption" | "code" | "label" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof textVariants> {
+    as?: 'span' | 'p' | 'div';
+}
+declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;
+
 declare const motionTokens: {
     readonly duration: {
         readonly instant: 0;
@@ -596,4 +604,4 @@ declare namespace Calendar {
     var displayName: string;
 }
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Heading, type HeadingProps, Input, type InputProps, Label, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type OKLCHColor, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, 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, type SidebarContentProps, SidebarFooter, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarSectionTitle, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TektonTokenVars, Text, type TextProps, Textarea, type TextareaProps, type ThemeDefinition, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, extractTokenName, fadeVariants, getCurrentThemeId, getMotionTransition, headingVariants, injectThemeCSS, isTokenReference, motionTokens, navigationMenuTriggerStyle, oklchToCSS, resolveSemanticToken, scaleVariants, setThemeId, sidebarVariants, slideVariants, textVariants, themeToCSS, tokenVars, transitions, useMotionSafe };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FramingUIProvider, type FramingUIProviderProps, Heading, type HeadingProps, Input, type InputProps, Label, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type OKLCHColor, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, 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, type SidebarContentProps, SidebarFooter, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarSectionTitle, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TektonTokenVars, Text, type TextProps, Textarea, type TextareaProps, type ThemeDefinition, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, extractTokenName, fadeVariants, getCurrentThemeId, getMotionTransition, headingVariants, injectThemeCSS, isTokenReference, motionTokens, navigationMenuTriggerStyle, oklchToCSS, resolveSemanticToken, scaleVariants, setThemeId, sidebarVariants, slideVariants, textVariants, themeToCSS, tokenVars, transitions, useMotionSafe };