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

package/README.md

@@ -25,6 +25,213 @@ 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'`
+
+## Forms (`RevitForm`)
+
+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;
 
@@ -643,4 +701,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, 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 };