@nerds-with-charisma/revit-ui 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+## 0.4.0
+
+### Added
+
+- **React Native entry** (`@nerds-with-charisma/revit-ui/native`) — Phase 1 components for Expo / React Native apps.
+- **Native theme helpers** (`@nerds-with-charisma/revit-ui/native/theme`) — `RevitThemeProvider`, `useRevitTheme()`, `tokensToStyleSheet()`.
+- Phase 1 native components: `Button`, `Input`, `Label`, `Heading`, `Text`, `Card` (+ header/title/description/content), `Alert` (+ title/description), `Tabs` (+ list/trigger).
+- Storybook **Native** section — previews native components via `react-native-web` (`pnpm dev` → sidebar **Native**).
+- `react-native` optional peer dependency; `react-dom` marked optional for native-only consumers.
+
+### Notes
+
+- Web entry (`@nerds-with-charisma/revit-ui`) is unchanged.
+- Native components use `revitTokens` via `StyleSheet` — no Radix, Tailwind, or CSS.
+- **EMESH Epic 8.6**: after bumping to `^0.4.0`, swap native login primitives for `@nerds-with-charisma/revit-ui/native`.
+
+## 0.3.0
+
+Initial published release — web design system with Revit tokens, shadcn/Radix components, and Tailwind v4 styling.

package/README.md

@@ -10,6 +10,19 @@ pnpm add @nerds-with-charisma/revit-ui
 
 Peer: React 19.
 
+## Documentation
+
+Browse components locally:
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Opens **Storybook** at `http://localhost:6006` with live examples, props tables, and usage notes.
+
+Build static docs: `pnpm build-storybook` → `storybook-static/`
+
 ## Use
 
 ```tsx
@@ -114,7 +127,112 @@ const myTokens: RevitThemeTokens = {
 
 Tokens only: `import { revitTokens } from '@nerds-with-charisma/revit-ui/theme/revit'`
 
-## Forms (`RevitForm`)
+## React Native
+
+Expo / React Native apps import from a separate entry — web bundles stay unchanged.
+
+```tsx
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  RevitThemeProvider,
+} from '@nerds-with-charisma/revit-ui/native'
+
+export const SignInScreen = () => (
+  <RevitThemeProvider>
+    <Card variant="elevated">
+      <CardHeader>
+        <CardTitle>Sign in</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Label>Email</Label>
+        <Input placeholder="you@example.com" autoCapitalize="none" />
+        <Button onPress={() => {}}>Continue</Button>
+      </CardContent>
+    </Card>
+  </RevitThemeProvider>
+)
+```
+
+Theme helpers only:
+
+```tsx
+import { tokensToStyleSheet, useRevitTheme } from '@nerds-with-charisma/revit-ui/native/theme'
+import { revitTokens } from '@nerds-with-charisma/revit-ui/theme/revit'
+```
+
+### Metro (Expo)
+
+Enable package exports and the `react-native` condition so `./native` and `./theme/revit` resolve:
+
+```js
+// metro.config.js
+const { getDefaultConfig } = require('expo/metro-config')
+
+const config = getDefaultConfig(__dirname)
+
+config.resolver.unstable_enablePackageExports = true
+config.resolver.unstable_conditionNames = ['react-native', 'require', 'import']
+
+module.exports = config
+```
+
+### Import paths
+
+| Path | Use |
+|------|-----|
+| `@nerds-with-charisma/revit-ui` | Web — Radix + Tailwind components + `styles.css` |
+| `@nerds-with-charisma/revit-ui/theme/revit` | Shared tokens (web + native) |
+| `@nerds-with-charisma/revit-ui/native` | React Native components (Phase 1) |
+| `@nerds-with-charisma/revit-ui/native/theme` | `RevitThemeProvider`, `useRevitTheme`, `tokensToStyleSheet` |
+
+Peers: `react` + `react-native` (no `react-dom` required for native).
+
+### Phase 1 native components
+
+`Button`, `Input`, `Label`, `Heading`, `Text`, `Card` (+ `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`), `Alert` (+ `AlertTitle`, `AlertDescription`), `Tabs` (+ `TabsList`, `TabsTrigger`).
+
+Browse them in Storybook under **Native** (rendered via `react-native-web` in the browser).
+
+Variant names match web CVA (`variant="outline"`, `variant="elevated"`, etc.). Use RN idioms: `onPress`, `style`, optional `testID` (like web `data-id`).
+
+### Web-only (not in native yet)
+
+`RevitForm`, `Select`, `Dialog`, charts, `Sonner`, and the full Radix primitive set remain web-only. Phase 2 will add native form helpers and `Select`.
+
+## Components
+
+| Category | Components |
+|----------|------------|
+| **Typography** | `Heading`, `Text`, `Link` |
+| **Actions** | `Button`, `Badge`, `Toggle` |
+| **Forms** | `Field`, `RevitForm`, `Input`, `PasswordInput`, `Textarea`, `Checkbox`, `Switch`, `Select`, `RadioGroup`, `Label` |
+| **Layout** | `Card`, `Separator`, `AspectRatio`, `ScrollArea` |
+| **Feedback** | `Alert`, `Progress`, `Skeleton`, `toast` / `Toaster` |
+| **Overlays** | `Dialog`, `Sheet`, `Popover`, `Tooltip`, `DropdownMenu`, `AlertDialog` |
+| **Navigation** | `Tabs`, `Breadcrumb`, `Pagination`, `NavigationMenu` |
+| **Revit surfaces** | `FrostPanel`, `FrostNav`, `FrostTile`, `SearchBar`, `BrandGradient` |
+
+See Storybook for examples. Low-level `Form*` primitives remain available for custom fields.
+
+### Single field
+
+```tsx
+<Field description="We'll never share your email." label="Email">
+  <Input type="email" placeholder="you@example.com" />
+</Field>
+```
+
+### Low-level escape hatch
+
+`Form`, `FormField`, `FormItem`, `FormLabel`, `FormControl`, `FormMessage`, and `useForm` are still exported for custom fields that don't fit the config shape.
+
+## Forms
 
 Config-driven forms — pass a `fields` array, `RevitForm` handles react-hook-form + labels, validation messages, and wiring.
 

package/dist/index.d.ts

@@ -419,6 +419,41 @@ declare const FormDescription: ({ className, ...props }: FormDescriptionProps) =
 type FormMessageProps = HTMLAttributes<HTMLParagraphElement>;
 declare const FormMessage: ({ className, children, ...props }: FormMessageProps) => react.JSX.Element | null;
 
+type FieldProps = {
+    children: ReactNode;
+    className?: string;
+    description?: string;
+    error?: string;
+    htmlFor?: string;
+    label: string;
+    required?: boolean;
+};
+declare const Field: ({ children, className, description, error, htmlFor, label, required, }: FieldProps) => react.JSX.Element;
+
+declare const headingVariants: (props?: ({
+    variant?: "title" | "page" | "section" | "eyebrow" | "subtitle" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+type HeadingProps = HTMLAttributes<HTMLElement> & VariantProps<typeof headingVariants> & {
+    as?: HeadingTag;
+};
+declare const Heading: ({ as, className, variant, ...props }: HeadingProps) => react.JSX.Element;
+
+declare const linkVariants: (props?: ({
+    variant?: "default" | "muted" | "primary" | null | undefined;
+    size?: "default" | "sm" | "base" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type LinkProps = ComponentProps<'a'> & VariantProps<typeof linkVariants> & {
+    asChild?: boolean;
+};
+declare const Link: ({ asChild, className, size, variant, ...props }: LinkProps) => react.JSX.Element;
+
+declare const textVariants: (props?: ({
+    variant?: "sm" | "label" | "body" | "muted" | "lead" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TextProps = HTMLAttributes<HTMLParagraphElement> & VariantProps<typeof textVariants>;
+declare const Text: ({ className, variant, ...props }: TextProps) => react.JSX.Element;
+
 type ToasterProps = ComponentProps<typeof Toaster$1>;
 declare const Toaster: ({ ...props }: ToasterProps) => react.JSX.Element;
 
@@ -701,4 +736,4 @@ declare const tokensToCssVars: (tokens: RevitThemeTokens) => {
 };
 declare const tokensToStylesheet: (tokens: RevitThemeTokens) => string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BrandGradient, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, ConfirmDialog, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FrostFab, FrostNav, FrostPanel, FrostTile, HoverCard, HoverCardContent, HoverCardTrigger, ImageScrim, Input, InputOTP, InputOTPGroup, InputOTPSlot, type InputProps, Label, type LabelProps, Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Pagination, PaginationBar, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RevitForm, type RevitFormField, type RevitFormForgotPassword, type RevitFormOption, type RevitFormProps, RevitThemeTokens, RevitUIProvider, ScrollArea, ScrollBar, SearchBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, buttonVariants, cardVariants, cn, inputVariants, labelVariants, selectTriggerVariants, surfaces, textareaVariants, toggleVariants, tokensToCssVars, tokensToStylesheet, useFormField, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BrandGradient, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, ConfirmDialog, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, type FieldProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FrostFab, FrostNav, FrostPanel, FrostTile, Heading, type HeadingProps, HoverCard, HoverCardContent, HoverCardTrigger, ImageScrim, Input, InputOTP, InputOTPGroup, InputOTPSlot, type InputProps, Label, type LabelProps, Link, type LinkProps, Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Pagination, PaginationBar, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RevitForm, type RevitFormField, type RevitFormForgotPassword, type RevitFormOption, type RevitFormProps, RevitThemeTokens, RevitUIProvider, ScrollArea, ScrollBar, SearchBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, type TextareaProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, buttonVariants, cardVariants, cn, headingVariants, inputVariants, labelVariants, linkVariants, selectTriggerVariants, surfaces, textVariants, textareaVariants, toggleVariants, tokensToCssVars, tokensToStylesheet, useFormField, useSidebar };