@nerds-with-charisma/revit-ui 0.1.0 → 0.3.0

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
@@ -25,6 +38,240 @@ export const App = () => {
 }
 ```
 
-Pass a custom token object to `RevitUIProvider` to restyle without forking components.
+Pass a custom token object to `RevitUIProvider` to restyle without forking components. Omit `tokens` and the kit uses `revitTokens`. The object must be complete (no merge / partials):
+
+```ts
+import type { RevitThemeTokens } from '@nerds-with-charisma/revit-ui'
+
+const myTokens: RevitThemeTokens = {
+  colors: {
+    background: string
+    foreground: string
+    card: string
+    cardForeground: string
+    popover: string
+    popoverForeground: string
+    primary: string
+    primaryForeground: string
+    secondary: string
+    secondaryForeground: string
+    muted: string
+    mutedForeground: string
+    accent: string
+    accentForeground: string
+    destructive: string
+    destructiveForeground: string
+    border: string
+    input: string
+    ring: string
+    brand: {
+      yellow: string
+      yellowLight: string
+      offBlack: string
+      pink: string
+      purple: string
+      blue: string
+      gold: string
+      brown: string
+      umber: string
+      mist: string
+    }
+  }
+  colorsDark: {
+    background: string
+    foreground: string
+    card: string
+    cardForeground: string
+    popover: string
+    popoverForeground: string
+    primary: string
+    primaryForeground: string
+    secondary: string
+    secondaryForeground: string
+    muted: string
+    mutedForeground: string
+    accent: string
+    accentForeground: string
+    destructive: string
+    destructiveForeground: string
+    border: string
+    input: string
+    ring: string
+    brand: {
+      yellow: string
+      yellowLight: string
+      offBlack: string
+      pink: string
+      purple: string
+      blue: string
+      gold: string
+      brown: string
+      umber: string
+      mist: string
+    }
+  }
+  radius: {
+    sm: string
+    md: string
+    lg: string
+    xl: string
+    pill: string
+  }
+  fontFamily: {
+    sans: string
+  }
+}
+
+<RevitUIProvider tokens={myTokens}>{children}</RevitUIProvider>
+```
 
 Tokens only: `import { revitTokens } from '@nerds-with-charisma/revit-ui/theme/revit'`
+
+## 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.
+
+### Example (sign-in)
+
+```tsx
+'use client'
+
+import { RevitForm } from '@nerds-with-charisma/revit-ui'
+
+type SignInValues = {
+  email: string
+  password: string
+  remember: boolean
+}
+
+export const SignInForm = () => {
+  return (
+    <RevitForm<SignInValues>
+      defaultValues={{ email: '', password: '', remember: false }}
+      submitLabel="Sign in"
+      onSubmit={(values) => console.log(values)}
+      fields={[
+        {
+          name: 'email',
+          label: 'Email',
+          type: 'input',
+          placeholder: 'you@example.com',
+          inputProps: { type: 'email', autoComplete: 'email' },
+        },
+        {
+          name: 'password',
+          label: 'Password',
+          type: 'password',
+          placeholder: '••••••••',
+          showPasswordToggle: true,
+          forgotPassword: {
+            label: 'Forgot Password?',
+            href: '/forgot-password',
+          },
+        },
+        {
+          name: 'remember',
+          label: 'Remember me',
+          type: 'checkbox',
+        },
+      ]}
+    />
+  )
+}
+```
+
+### Field types
+
+| `type`       | Renders                         | Notes                                      |
+| ------------ | ------------------------------- | ------------------------------------------ |
+| `input`      | `Input`                         | `placeholder`, `inputProps`                |
+| `password`   | `PasswordInput`                 | `showPasswordToggle`, `forgotPassword`     |
+| `textarea`   | `Textarea`                      | `placeholder`, `textareaProps`             |
+| `checkbox`   | `Checkbox`                      | Inline label                               |
+| `switch`     | `Switch`                        | Inline label                               |
+| `select`     | `Select`                        | `options: { value, label }[]`              |
+| `radio`      | `RadioGroup`                    | `options: { value, label }[]`              |
+
+Every field supports optional `description` (helper text below the control).
+
+### `RevitForm` props
+
+| Prop            | Type                         | Default    | Description                          |
+| --------------- | ---------------------------- | ---------- | ------------------------------------ |
+| `defaultValues` | object                       | required   | Initial field values                 |
+| `fields`        | `RevitFormField[]`           | required   | Field config array                   |
+| `onSubmit`      | `(values) => void`           | required   | Called with validated values         |
+| `submitLabel`   | string                       | `"Submit"` | Submit button text                   |
+| `hideSubmit`    | boolean                      | `false`    | Hide the built-in submit button      |
+| `resolver`      | RHF `Resolver`               | —          | Pass a zod/yup resolver for validation |
+| `className`     | string                       | —          | Classes on the `<form>` element      |
+| `fieldClassName`| string                       | —          | Classes on each `FormItem`           |
+
+### Password field extras
+
+```ts
+{
+  name: 'password',
+  label: 'Password',
+  type: 'password',
+  showPasswordToggle: true, // default true — eye icon inside the input
+  forgotPassword: {
+    label: 'Forgot Password?', // default
+    href: '/forgot-password',  // renders <a> (top-right, above input)
+    // onClick: () => {},       // use instead of href for a <button>
+  },
+}
+```
+
+`PasswordInput` is also exported standalone if you need it outside `RevitForm`.
+
+### Validation (optional)
+
+```tsx
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+})
+
+<RevitForm
+  resolver={zodResolver(schema)}
+  defaultValues={{ email: '', password: '' }}
+  onSubmit={onSubmit}
+  fields={[/* ... */]}
+/>
+```
+
+### 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.
+

package/dist/index.d.ts

@@ -16,7 +16,8 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps, DefaultValues, Resolver } from 'react-hook-form';
+export { useForm } from 'react-hook-form';
 import { Slot } from '@radix-ui/react-slot';
 import { Toaster as Toaster$1 } from 'sonner';
 export { toast } from 'sonner';
@@ -346,6 +347,63 @@ declare const useFormField: () => {
     formMessageId: string;
 };
 
+type PasswordInputProps = Omit<ComponentProps<typeof Input>, 'type'> & {
+    showPasswordToggle?: boolean;
+};
+declare const PasswordInput: ({ className, showPasswordToggle, ...props }: PasswordInputProps) => react.JSX.Element;
+
+type RevitFormOption = {
+    value: string;
+    label: string;
+};
+type RevitFormFieldBase = {
+    name: string;
+    label: string;
+    description?: string;
+};
+type RevitFormForgotPassword = {
+    label?: string;
+    href?: string;
+    onClick?: () => void;
+};
+type RevitFormField = (RevitFormFieldBase & {
+    type: 'input';
+    placeholder?: string;
+    inputProps?: Omit<InputProps, 'name' | 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'ref'>;
+}) | (RevitFormFieldBase & {
+    type: 'password';
+    placeholder?: string;
+    showPasswordToggle?: boolean;
+    forgotPassword?: RevitFormForgotPassword;
+    inputProps?: Omit<PasswordInputProps, 'name' | 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'ref' | 'showPasswordToggle'>;
+}) | (RevitFormFieldBase & {
+    type: 'textarea';
+    placeholder?: string;
+    textareaProps?: Omit<TextareaProps, 'name' | 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'ref'>;
+}) | (RevitFormFieldBase & {
+    type: 'checkbox';
+}) | (RevitFormFieldBase & {
+    type: 'switch';
+}) | (RevitFormFieldBase & {
+    type: 'select';
+    placeholder?: string;
+    options: RevitFormOption[];
+}) | (RevitFormFieldBase & {
+    type: 'radio';
+    options: RevitFormOption[];
+});
+type RevitFormProps<TFieldValues extends FieldValues = FieldValues> = {
+    defaultValues: DefaultValues<TFieldValues>;
+    fields: RevitFormField[];
+    onSubmit: (values: TFieldValues) => void | Promise<void>;
+    resolver?: Resolver<TFieldValues>;
+    submitLabel?: string;
+    hideSubmit?: boolean;
+    className?: string;
+    fieldClassName?: string;
+};
+declare const RevitForm: <TFieldValues extends FieldValues = FieldValues>({ className, defaultValues, fieldClassName, fields, hideSubmit, onSubmit, resolver, submitLabel, }: RevitFormProps<TFieldValues>) => react.JSX.Element;
+
 type FormItemProps = HTMLAttributes<HTMLDivElement>;
 declare const FormItem: ({ className, ...props }: FormItemProps) => react.JSX.Element;
 
@@ -361,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;
 
@@ -643,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, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, 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 };