@awsmbiz/inbis-ui 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,115 @@
-# Temporary Holding Version
+# @awsmbiz/inbis-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+shadcn/ui primitives, accessible forms and the Tailwind CSS v4 theme shared by Inbis frontends.
+It grows only by what the platform's screens need (Q54). Everything here is held to WCAG 2.2 AA
+(Q56): zero axe violations in both themes at desktop and phone widths, keyboard operable with a
+visible focus indicator, touch targets of at least 24×24 px, and `prefers-reduced-motion` honoured.
+
+| Export | Contents |
+|---|---|
+| `@awsmbiz/inbis-ui` | Primitives: `Button`, `Input`, `Label`, `Card`, `Alert`, `Badge`, `Checkbox`, `Switch`, `NativeSelect` (+ `NativeSelectOption`, `NativeSelectOptGroup`), `Dialog`, `AlertDialog`, `Sheet`, `DropdownMenu`, `Tooltip` (+ `TooltipProvider`), `Tabs`, `Table`, `Pagination`, `Skeleton`, `Separator`, `Field*` layout parts, `Toaster` + `toast` (sonner), each with its shadcn sub-components; variant helpers `buttonVariants`, `badgeVariants`, `tabsListVariants`; `cn` |
+| | Forms: `useZodForm`, `Form`, `FormField`, `FormRootError` (below); types `FormProps`, `FormFieldProps`, `FormControlProps` |
+| `@awsmbiz/inbis-ui/globals.css` | Tailwind v4 entry: `tailwindcss`, `tw-animate-css`, `shadcn/tailwind.css`, the neutral light/dark theme tokens, the reduced-motion rule, and `@source` for this package's `dist` |
+
+Peer dependencies: `react` and `react-dom` ^19.3.1, `tailwindcss` ^4.3.3, `react-hook-form`
+^7.91.0 and `zod` ^4.6.7 (for the forms). Dependencies: `radix-ui`, `class-variance-authority`,
+`cn`, `lucide-react`, `sonner`, `@hookform/resolvers`, `shadcn` (for `shadcn/tailwind.css`) and
+`tw-animate-css`, at the versions pinned in the root README.
+
+Used by `@awsmbiz/inbis-auth-ui` and `@awsmbiz/inbis-admin-ui`; an app uses it directly for its own screens and
+admin pages.
+
+## Using it in an app (Vite + `@tailwindcss/vite`)
+
+```css
+/* app.css */
+@import "@awsmbiz/inbis-ui/globals.css";
+@import "@awsmbiz/inbis-auth-ui/styles.css"; /* if you use @awsmbiz/inbis-auth-ui */
+@import "@awsmbiz/inbis-admin-ui/styles.css"; /* if you use @awsmbiz/inbis-admin-ui */
+@source "./";                         /* your own components */
+```
+
+`globals.css` already tells Tailwind to scan this package's compiled `dist`, so classes used
+by the components are generated in the consuming app, also when installed from npm.
+
+Dark theme: put the `dark` class on `<html>` (and `color-scheme: dark`). Render one `<Toaster />`
+(pass `theme` to match) and wrap the app in `<TooltipProvider>` if it uses tooltips.
+
+## Forms
+
+```tsx
+const schema = z.object({ email: z.email("Enter a valid email address.") });
+
+function InviteForm() {
+  const form = useZodForm(schema, { defaultValues: { email: "" } });
+  return (
+    <Form form={form} onSubmit={async (values) => { /* values parsed by the schema */ }}>
+      <FormRootError />
+      <FormField
+        control={form.control}
+        name="email"
+        label="Email"
+        description="The invitation is sent here."
+        render={({ field, control }) => <Input type="email" {...field} {...control} />}
+      />
+      <Button type="submit">Send</Button>
+    </Form>
+  );
+}
+```
+
+- `FormField` labels the control and sets `aria-describedby` (description, then error) and
+  `aria-invalid`; spread `control` onto the control. `orientation="horizontal"` puts the control
+  before its label, for checkboxes and switches (map `field.value`/`field.onChange` to
+  `checked`/`onCheckedChange`, and pass `field.ref`).
+- Errors are announced (`role="alert"`). A failed submit moves focus to the first invalid control.
+- `form.setError("root", { message })` (for example a server rejection) shows in `FormRootError`,
+  also announced. Announce successful async outcomes with `toast(…)`; the toaster is a polite live region.
+
+## Accessibility changes from shadcn
+
+Generated files are kept as the CLI writes them except for these deliberate changes, each
+checked by a test:
+
+- **Tokens** (`test/theme-contrast.test.ts` checks every text/surface pair at 4.5:1 and every
+  control boundary, checked state and focus ring at 3:1, in both themes): light `--destructive`
+  is red-700; light `--muted-foreground`, `--input`, `--ring` and `--sidebar-ring` are darker;
+  dark `--input` is opaque.
+- **Select** is shadcn's `native-select`, not the Radix listbox: Radix's select always hides the
+  rest of the page with `aria-hidden` while it is open, which axe reports (`aria-hidden-focus`).
+  A native select is fully accessible and gives phones their own picker.
+- **Dropdown menus** are non-modal by default and, like **tooltips**, not portalled, for the same
+  reason and so their content stays inside the page's landmarks (axe `region`).
+- **Dialogs, alert dialogs and sheets** scroll inside themselves when taller than the viewport
+  (`max-h` + `overflow-y-auto`), so at 400% zoom (320×256 CSS px) no title, field or button is
+  cut off (WCAG 1.4.10 Reflow; `e2e/a11y-admin.spec.ts`).
+- **Tab panels** show the focus ring; **pagination** links are named "Previous page"/"Next page"
+  (the visible text is part of the name); the **toaster** takes `theme` instead of `next-themes`.
+- **Reduced motion**: `globals.css` cuts every animation and transition to an instant under
+  `prefers-reduced-motion: reduce`.
+
+The playground's component gallery (`/dev/ui`, `apps/identity-playground/web/src/ui-gallery.tsx`)
+shows every component and state; `e2e/ui-gallery.spec.ts` runs axe over each in both themes at
+desktop and phone widths, and checks keyboard use, focus indicators, touch targets and reduced motion.
+
+## Tests
+
+`test/theme-contrast.test.ts` (every token pair in both themes) and `test/form.test.tsx` (label,
+description and error wiring, focus on the first error) run in `pnpm test` (Vitest + jsdom).
+The components are covered in a real browser by the playground: `e2e/ui-gallery.spec.ts` (every
+component and state) and, as used by the screens, `e2e/accessibility.spec.ts`,
+`e2e/a11y-app.spec.ts`, `e2e/a11y-admin.spec.ts` and `e2e/a11y-focus.spec.ts`.
+
+## Adding a component (maintainers)
+
+The layout follows the shadcn monorepo guidance (`docs/research/plan-verification.md` #26):
+this package owns the primitives and its own `components.json` (style `radix-nova`, base color
+`neutral`, Lucide icons, Tailwind v4 with an empty `tailwind.config`).
+
+```sh
+pnpm --filter @awsmbiz/inbis-ui shadcn add <component>   # writes src/components/<component>.tsx
+```
+
+Then export it from `src/index.ts`, add any new dependency with an exact version, drop
+`"use client"`, add it to the gallery, and build. Components are built with tsdown to ESM in
+`dist/`.

package/dist/index.d.ts

@@ -0,0 +1,208 @@
+import * as React$1 from "react";
+import { ComponentProps, ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+import { AlertDialog as AlertDialog$1, Checkbox as Checkbox$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, Label as Label$1, Separator as Separator$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "radix-ui";
+import { ToasterProps, toast } from "sonner";
+import { Control, ControllerFieldState, ControllerRenderProps, FieldPath, FieldValues, SubmitHandler, UseFormProps, UseFormReturn } from "react-hook-form";
+import { z } from "zod";
+declare const alertVariants: (props?: ({
+  variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React$1.JSX.Element;
+declare function AlertTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertAction({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare const buttonVariants: (props?: ({
+  variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
+  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+  asChild?: boolean;
+}): React$1.JSX.Element;
+declare function AlertDialog({ ...props }: React$1.ComponentProps<typeof AlertDialog$1.Root>): React$1.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React$1.ComponentProps<typeof AlertDialog$1.Trigger>): React$1.JSX.Element;
+declare function AlertDialogPortal({ ...props }: React$1.ComponentProps<typeof AlertDialog$1.Portal>): React$1.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Overlay>): React$1.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Content> & {
+  size?: "default" | "sm";
+}): React$1.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Title>): React$1.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Description>): React$1.JSX.Element;
+declare function AlertDialogAction({ className, variant, size, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Action> & Pick<React$1.ComponentProps<typeof Button>, "variant" | "size">): React$1.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Cancel> & Pick<React$1.ComponentProps<typeof Button>, "variant" | "size">): React$1.JSX.Element;
+declare const badgeVariants: (props?: ({
+  variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+  asChild?: boolean;
+}): React$1.JSX.Element;
+declare function Card({ className, size, ...props }: React$1.ComponentProps<"div"> & {
+  size?: "default" | "sm";
+}): React$1.JSX.Element;
+declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function Checkbox({ className, ...props }: React$1.ComponentProps<typeof Checkbox$1.Root>): React$1.JSX.Element;
+declare function Dialog({ ...props }: React$1.ComponentProps<typeof Dialog$1.Root>): React$1.JSX.Element;
+declare function DialogTrigger({ ...props }: React$1.ComponentProps<typeof Dialog$1.Trigger>): React$1.JSX.Element;
+declare function DialogPortal({ ...props }: React$1.ComponentProps<typeof Dialog$1.Portal>): React$1.JSX.Element;
+declare function DialogClose({ ...props }: React$1.ComponentProps<typeof Dialog$1.Close>): React$1.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Overlay>): React$1.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React$1.ComponentProps<typeof Dialog$1.Content> & {
+  showCloseButton?: boolean;
+}): React$1.JSX.Element;
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React$1.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}): React$1.JSX.Element;
+declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Title>): React$1.JSX.Element;
+declare function DialogDescription({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Description>): React$1.JSX.Element;
+declare function DropdownMenu({ modal, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Root>): React$1.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Portal>): React$1.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Trigger>): React$1.JSX.Element;
+declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Content>): React$1.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Group>): React$1.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React$1.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.CheckboxItem> & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.RadioGroup>): React$1.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.RadioItem> & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Label> & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Separator>): React$1.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Sub>): React$1.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.SubContent>): React$1.JSX.Element;
+declare function Label({ className, ...props }: React$1.ComponentProps<typeof Label$1.Root>): React$1.JSX.Element;
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react").JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+  variant?: "legend" | "label";
+}): import("react").JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare const fieldVariants: (props?: ({
+  orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+  children?: React.ReactNode;
+}): import("react").JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+  errors?: ({
+    message?: string;
+  } | undefined)[];
+}): import("react").JSX.Element | null;
+declare function Input({ className, type, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
+declare function Pagination({ className, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
+declare function PaginationContent({ className, ...props }: React$1.ComponentProps<"ul">): React$1.JSX.Element;
+declare function PaginationItem({ ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React$1.ComponentProps<typeof Button>, "size"> & React$1.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React$1.JSX.Element;
+declare function PaginationPrevious({ className, text, ...props }: React$1.ComponentProps<typeof PaginationLink> & {
+  text?: string;
+}): React$1.JSX.Element;
+declare function PaginationNext({ className, text, ...props }: React$1.ComponentProps<typeof PaginationLink> & {
+  text?: string;
+}): React$1.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+type NativeSelectProps = Omit<React$1.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default";
+};
+declare function NativeSelect({ className, size, ...props }: NativeSelectProps): React$1.JSX.Element;
+declare function NativeSelectOption({ className, ...props }: React$1.ComponentProps<"option">): React$1.JSX.Element;
+declare function NativeSelectOptGroup({ className, ...props }: React$1.ComponentProps<"optgroup">): React$1.JSX.Element;
+declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof Separator$1.Root>): React$1.JSX.Element;
+declare function Sheet({ ...props }: React$1.ComponentProps<typeof Dialog$1.Root>): React$1.JSX.Element;
+declare function SheetTrigger({ ...props }: React$1.ComponentProps<typeof Dialog$1.Trigger>): React$1.JSX.Element;
+declare function SheetClose({ ...props }: React$1.ComponentProps<typeof Dialog$1.Close>): React$1.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: React$1.ComponentProps<typeof Dialog$1.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}): React$1.JSX.Element;
+declare function SheetHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SheetFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SheetTitle({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Title>): React$1.JSX.Element;
+declare function SheetDescription({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Description>): React$1.JSX.Element;
+declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare const Toaster: ({ ...props }: ToasterProps) => import("react").JSX.Element;
+declare function Switch({ className, size, ...props }: React$1.ComponentProps<typeof Switch$1.Root> & {
+  size?: "sm" | "default";
+}): React$1.JSX.Element;
+declare function Table({ className, ...props }: React$1.ComponentProps<"table">): React$1.JSX.Element;
+declare function TableHeader({ className, ...props }: React$1.ComponentProps<"thead">): React$1.JSX.Element;
+declare function TableBody({ className, ...props }: React$1.ComponentProps<"tbody">): React$1.JSX.Element;
+declare function TableFooter({ className, ...props }: React$1.ComponentProps<"tfoot">): React$1.JSX.Element;
+declare function TableRow({ className, ...props }: React$1.ComponentProps<"tr">): React$1.JSX.Element;
+declare function TableHead({ className, ...props }: React$1.ComponentProps<"th">): React$1.JSX.Element;
+declare function TableCell({ className, ...props }: React$1.ComponentProps<"td">): React$1.JSX.Element;
+declare function TableCaption({ className, ...props }: React$1.ComponentProps<"caption">): React$1.JSX.Element;
+declare function Tabs({ className, orientation, ...props }: React$1.ComponentProps<typeof Tabs$1.Root>): React$1.JSX.Element;
+declare const tabsListVariants: (props?: ({
+  variant?: "default" | "line" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: React$1.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): React$1.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Trigger>): React$1.JSX.Element;
+declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Content>): React$1.JSX.Element;
+declare function TooltipProvider({ delayDuration, ...props }: React$1.ComponentProps<typeof Tooltip$1.Provider>): React$1.JSX.Element;
+declare function Tooltip({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Root>): React$1.JSX.Element;
+declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Trigger>): React$1.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof Tooltip$1.Content>): React$1.JSX.Element;
+/** `useForm` with a Zod schema as the resolver: values are validated and parsed by the schema. */
+export declare function useZodForm<TInput extends FieldValues, TOutput extends FieldValues>(schema: z.ZodType<TOutput, TInput>, options?: Omit<UseFormProps<TInput, unknown, TOutput>, "resolver">): UseFormReturn<TInput, unknown, TOutput>;
+type FormProps<TFieldValues extends FieldValues, TTransformed extends FieldValues> = Omit<ComponentProps<"form">, "onSubmit"> & {
+  form: UseFormReturn<TFieldValues, unknown, TTransformed>;
+  /** Called with the parsed values once every field is valid. */
+  onSubmit: SubmitHandler<TTransformed>;
+};
+/** A `<form>` bound to a react-hook-form instance; browser validation is off so errors are the form's own. */
+export declare function Form<TFieldValues extends FieldValues, TTransformed extends FieldValues>({ form, onSubmit, children, ...props }: FormProps<TFieldValues, TTransformed>): import("react").JSX.Element;
+/** ARIA props for the control a FormField renders; spread them onto it. */
+interface FormControlProps {
+  id: string;
+  "aria-invalid": true | undefined;
+  "aria-describedby": string | undefined;
+}
+interface FormFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TTransformed> {
+  control: Control<TFieldValues, unknown, TTransformed>;
+  name: TName;
+  label: ReactNode;
+  description?: ReactNode;
+  /** "horizontal" puts the control before its label (checkboxes, switches). */
+  orientation?: "vertical" | "horizontal";
+  className?: string;
+  render: (props: {
+    field: ControllerRenderProps<TFieldValues, TName>;
+    fieldState: ControllerFieldState;
+    control: FormControlProps;
+  }) => ReactNode;
+}
+/** One labelled form control with its description and error message. */
+export declare function FormField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TTransformed>({ control, name, label, description, orientation, className, render }: FormFieldProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+/** The form-level error (`form.setError("root", …)`, e.g. a server rejection), announced when it appears. */
+export declare function FormRootError({ className }: {
+  className?: string;
+}): import("react").JSX.Element | null;
+export { Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, 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, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, type FormControlProps, type FormFieldProps, type FormProps, Input, Label, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, tabsListVariants, toast };
+//# sourceMappingURL=index.d.ts.map