@awsmbiz/inbis-ui 0.1.0 → 0.2.0

package/README.md

@@ -9,7 +9,7 @@ visible focus indicator, touch targets of at least 24×24 px, and `prefers-reduc
 |---|---|
 | `@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` |
+| `@awsmbiz/inbis-ui/globals.css` | Tailwind v4 entry: `tailwindcss`, `tw-animate-css`, `shadcn/tailwind.css`, the Inbis UI light/dark theme tokens (below), 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`,
@@ -35,6 +35,48 @@ by the components are generated in the consuming app, also when installed from n
 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.
 
+## Design system: Inbis UI
+
+The theme is the Inbis UI design system; the reference (tokens, per-component rules, content and
+visual guidance) is in [`docs/design/inbis-ui/`](../../docs/design/inbis-ui/). In short: a warm
+off-white canvas, an ink primary pill, hairline borders and almost no shadow.
+
+- **Colour tokens** keep shadcn's names (`background`, `card`, `popover`, `primary`, `secondary`,
+  `muted`, `accent`, `destructive`, `border`, `input`, `ring`, `sidebar-*`), so every shadcn
+  component picks them up. Added: `surface-raised` (field fill), `panel`, `night` / `on-night` /
+  `on-night-muted`, `destructive-foreground`, status `success`, `success-soft`, `warning-soft`,
+  `info-soft`, `destructive-soft` (each `-soft` with a `-soft-foreground`), the identity palette
+  `app-green`, `app-purple`, `app-orange`, `app-rose`, `app-blue`, `rating`, and `chart-1`…`chart-5`.
+  All are Tailwind colours (`bg-success-soft`, `text-info-soft-foreground`, `bg-app-blue`).
+  The `app-*` colours are identity only (an app's icon tile, charts), never buttons, text or
+  badges; which app uses which colour is the app's choice, not the platform's.
+- **Radius** (`--radius` is 12px): `rounded-sm` 8px (menu items), `rounded-md` 12px (fields,
+  popovers, alerts, icon tiles), `rounded-lg` / `rounded-2xl` 16px (cards, tables, toasts),
+  `rounded-xl` / `rounded-3xl` 22px (dialogs, sheets). Buttons, badges, switches, tab triggers,
+  avatars and sidebar items are `rounded-full`.
+- **Shadows** are CSS variables, used as `shadow-(--shadow-card)`, `shadow-(--shadow-popover)` and
+  `shadow-(--shadow-float)` (dialogs only).
+- **Focus**: a 2px solid `ring` outline at a 2px offset on every interactive element
+  (`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-ring`).
+- **Status badges and alerts**: `Badge` and `Alert` have `success`, `warning`, `info` and
+  `destructive` variants on the `*-soft` tokens; the word always carries the state.
+- **Motion**: 150ms colour transitions, the switch thumb and the skeleton pulse; all cut under
+  reduced motion (below).
+- **Icons**: Lucide, 16px in controls, 20px in navigation.
+
+### Loading Inter
+
+`--font-sans` is `var(--font-inter, "Inter"), ui-sans-serif, system-ui, sans-serif`. The package
+never fetches fonts (no third-party request is made on the app's behalf); load Inter (400–700) in
+the app, whichever way suits it:
+
+- Self-hosted, e.g. `pnpm add @fontsource-variable/inter` and `import "@fontsource-variable/inter";`
+  in the entry, then `--font-inter: "Inter Variable";` on `:root`.
+- Next.js: `next/font/google` with `variable: "--font-inter"` on `<html>`.
+- A `<link>` to Google Fonts (family "Inter", weights 400–700), if the app accepts the request.
+
+Without Inter the stack falls back to the system UI font.
+
 ## Forms
 
 ```tsx
@@ -72,9 +114,9 @@ Generated files are kept as the CLI writes them except for these deliberate chan
 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.
+  control boundary, checked state and focus ring at 3:1, in both themes, plus every `*-soft`
+  status pair and a white icon on each `app-*` tile): the Inbis UI tokens pass as designed;
+  `--input` is a 3:1 field border on the page, card, popover and field fill.
 - **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.
@@ -85,6 +127,15 @@ checked by a test:
   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`.
+- **Breadcrumb**: the current page is text with `aria-current="page"` (not shadcn's disabled
+  `role="link"`), separators are presentational list items, and the landmark is named
+  "Breadcrumb" by default (pass `aria-label` to translate).
+- **Avatar group** (not in shadcn): `AvatarGroup max={n}` collapses the rest into a "+N" avatar;
+  name the group with `aria-label` so the total is announced.
+- **Steps** (not in shadcn): a step indicator for multi-step forms, a named `<nav>` over an
+  `<ol>`; the current step has `aria-current="step"`, a completed step announces
+  `completedLabel` ("Completed") before its label, and a step with `onClick` is a button.
+- **Progress** needs a name (`aria-label`/`aria-labelledby`); its value is `aria-valuenow`.
 - **Reduced motion**: `globals.css` cuts every animation and transition to an instant under
   `prefers-reduced-motion: reduce`.
 
@@ -95,7 +146,9 @@ desktop and phone widths, and checks keyboard use, focus indicators, touch targe
 ## 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).
+description and error wiring, focus on the first error) and `test/components.test.tsx` (behaviour,
+ARIA and axe in both themes for the accordion, breadcrumb, radio group, textarea, progress, avatar
+and steps) 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`.

package/dist/index.d.ts

@@ -1,13 +1,17 @@
 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 { Accordion as Accordion$1, AlertDialog as AlertDialog$1, Avatar as Avatar$1, Checkbox as Checkbox$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, Label as Label$1, Progress as Progress$1, RadioGroup as RadioGroup$1, Separator as Separator$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "radix-ui";
+import { VariantProps } from "class-variance-authority";
 import { ToasterProps, toast } from "sonner";
 import { Control, ControllerFieldState, ControllerRenderProps, FieldPath, FieldValues, SubmitHandler, UseFormProps, UseFormReturn } from "react-hook-form";
 import { z } from "zod";
+declare function Accordion({ ...props }: React$1.ComponentProps<typeof Accordion$1.Root>): React$1.JSX.Element;
+declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof Accordion$1.Item>): React$1.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React$1.ComponentProps<typeof Accordion$1.Trigger>): React$1.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof Accordion$1.Content>): React$1.JSX.Element;
 declare const alertVariants: (props?: ({
-  variant?: "default" | "destructive" | null | undefined;
+  variant?: "default" | "success" | "warning" | "info" | "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;
@@ -34,12 +38,33 @@ declare function AlertDialogTitle({ className, ...props }: React$1.ComponentProp
 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;
+type AvatarSize = "xs" | "sm" | "default" | "lg";
+declare function Avatar({ className, size, ...props }: React$1.ComponentProps<typeof Avatar$1.Root> & {
+  size?: AvatarSize;
+}): React$1.JSX.Element;
+declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof Avatar$1.Image>): React$1.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof Avatar$1.Fallback>): React$1.JSX.Element;
+declare function AvatarGroup({ className, children, max, size, ...props }: React$1.ComponentProps<"div"> & {
+  max?: number;
+  size?: AvatarSize;
+}): React$1.JSX.Element;
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
+  variant?: "default" | "success" | "warning" | "info" | "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 Breadcrumb({ "aria-label": label, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<"ol">): React$1.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: React$1.ComponentProps<"a"> & {
+  asChild?: boolean;
+}): React$1.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+declare function BreadcrumbEllipsis({ className, label, ...props }: React$1.ComponentProps<"span"> & {
+  label?: string;
+}): React$1.JSX.Element;
 declare function Card({ className, size, ...props }: React$1.ComponentProps<"div"> & {
   size?: "default" | "sm";
 }): React$1.JSX.Element;
@@ -133,6 +158,9 @@ type NativeSelectProps = Omit<React$1.ComponentProps<"select">, "size"> & {
 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 Progress({ className, value, ...props }: React$1.ComponentProps<typeof Progress$1.Root>): React$1.JSX.Element;
+declare function RadioGroup({ className, ...props }: React$1.ComponentProps<typeof RadioGroup$1.Root>): React$1.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: React$1.ComponentProps<typeof RadioGroup$1.Item>): 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;
@@ -147,6 +175,16 @@ declare function SheetTitle({ className, ...props }: React$1.ComponentProps<type
 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;
+type StepStatus = "complete" | "current" | "upcoming";
+declare function Steps({ className, children, "aria-label": label, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
+interface StepsItemProps extends Omit<React$1.ComponentProps<"button">, "type"> {
+  /** The step's number, shown until it is complete. */
+  step: number;
+  status: StepStatus;
+  /** Prefix announced before a completed step's label (visually a check mark). */
+  completedLabel?: string;
+}
+declare function StepsItem({ className, children, step, status, completedLabel, onClick, ...props }: StepsItemProps): React$1.JSX.Element;
 declare function Switch({ className, size, ...props }: React$1.ComponentProps<typeof Switch$1.Root> & {
   size?: "sm" | "default";
 }): React$1.JSX.Element;
@@ -165,6 +203,7 @@ declare const tabsListVariants: (props?: ({
 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 Textarea({ className, ...props }: React$1.ComponentProps<"textarea">): 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;
@@ -204,5 +243,5 @@ export declare function FormField<TFieldValues extends FieldValues, TName extend
 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 };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarGroup, AvatarImage, type AvatarSize, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, 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, Progress, RadioGroup, RadioGroupItem, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, type StepStatus, Steps, StepsItem, type StepsItemProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, tabsListVariants, toast };
 //# sourceMappingURL=index.d.ts.map