` props.
+
+## Controlled Usage
+
+```tsx
+const [activeTab, setActiveTab] = useState("overview");
+
+
+
+ Overview
+ Details
+
+ Overview content
+ Details content
+;
+```
+
+## Examples
+
+### With Disabled Tab
+
+```tsx
+
+
+ Active
+ Pending
+
+ Archived
+
+
+ Active items
+ Pending items
+ Archived items
+
+```
diff --git a/examples/app-module/src/custom-module.tsx b/examples/app-module/src/custom-module.tsx
index 20d79f07..83029a8c 100644
--- a/examples/app-module/src/custom-module.tsx
+++ b/examples/app-module/src/custom-module.tsx
@@ -1,24 +1,2517 @@
-import { defineModule, Link, ResourceComponentProps } from "@tailor-platform/app-shell";
-import { useT, labels } from "./i18n-labels";
-import { ZapIcon } from "./pages/metric-card-demo";
-import { actionPanelDemoResource } from "./pages/action-panel-demo";
-import { metricCardDemoResource } from "./pages/metric-card-demo";
-import { activityCardDemoResource } from "./pages/activity-card-demo";
-import {
- purchaseOrderDemoResource,
- subPageResource,
- hiddenResource,
-} from "./pages/purchase-order-demo";
-import { adminOnlyResource } from "./pages/admin-only";
import {
- oneColumnLayoutResource,
- twoColumnLayoutResource,
- threeColumnLayoutResource,
- layoutSlotsDemoResource,
-} from "./pages/layout-demos";
-import { primitiveComponentsDemoResource } from "./pages/primitives-demo";
-import { dropdownComponentsDemoResource } from "./pages/dropdown-demo";
-import { formComponentsDemoResource, zodRHFFormDemoResource } from "./pages/form-demo";
+ defineModule,
+ defineResource,
+ Link,
+ ResourceComponentProps,
+ useNavigate,
+ useParams,
+ hidden,
+ pass,
+ DescriptionCard,
+ ActionPanel,
+ ActivityCard,
+ Layout,
+ Button,
+ Input,
+ Table,
+ Dialog,
+ Menu,
+ Sheet,
+ Tooltip,
+ Badge,
+ Select,
+ Combobox,
+ Autocomplete,
+ MetricCard,
+ Tabs,
+ Field,
+ Fieldset,
+ Form,
+ type Guard,
+} from "@tailor-platform/app-shell";
+import type { SVGProps } from "react";
+import { useT, labels } from "./i18n-labels";
+import * as React from "react";
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod/v4";
+
+const ZapIcon = (props: SVGProps
) => {
+ return (
+
+ );
+};
+
+// Small icons for ActionPanel demo (16px)
+const ReceiptIcon = (props: SVGProps) => (
+
+);
+const FileTextIcon = (props: SVGProps) => (
+
+);
+const ExternalLinkIcon = (props: SVGProps) => (
+
+);
+
+// ============================================================================
+// DEMO: Action Panel Page
+// ============================================================================
+
+const ActionPanelDemoPage = () => {
+ const navigate = useNavigate();
+ return (
+
+
Action Panel Demo
+
+ This panel fills the width of its container. All actions use onClick; for
+ navigation use useNavigate() inside the callback.
+
+
,
+ onClick: () => alert("Create invoice clicked"),
+ },
+ {
+ key: "delivery-note",
+ label: "Create new delivery note",
+ icon:
,
+ onClick: () => alert("Create delivery note clicked"),
+ },
+ {
+ key: "view-po-demo",
+ label: "View Purchase Order Demo",
+ icon:
,
+ onClick: () => navigate("/custom-page/purchase-order-demo"),
+ },
+ ]}
+ />
+
+ Dashboard KPI cards: title, value, optional trend and description.
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+
+
+ ActivityCard Demo
+
+
+ Timeline of recent activities on a document (e.g. PO, SO, GR). Click "N more
+ activities" to open the full list in a dialog.
+
+
+
+
+);
+
+const activityCardDemoResource = defineResource({
+ path: "activity-card-demo",
+ meta: { title: "ActivityCard Demo" },
+ component: ActivityCardDemoPage,
+});
+
+// ============================================================================
+// DEMO: Purchase Order Detail Page
+// ============================================================================
+
+// Simulated backend data (like what you'd get from GraphQL/REST API)
+const mockPurchaseOrder = {
+ id: "po-2024-0042",
+ docNumber: "PO-10000041",
+ status: "CONFIRMED",
+ billingStatus: "PARTIALLY_BILLED",
+ deliveryStatus: "NOT_RECEIVED",
+ supplierName: "Acme Industrial Supplies",
+ supplierID: "supplier-123",
+ expectedDeliveryDate: "2024-02-15T00:00:00Z",
+ createdAt: "2024-01-20T10:30:00Z",
+ updatedAt: "2024-01-22T14:45:00Z",
+ confirmedAt: "2024-01-21T09:00:00Z",
+ note: "Rush order - priority shipping requested. Please ensure all Please ensure all Please ensure all",
+ externalReference: "P00594",
+ currency: { code: "USD", symbol: "$" },
+ shipToLocation: {
+ name: "Main Warehouse",
+ address: {
+ line1: "1234 Industrial Blvd",
+ line2: "Building C",
+ city: "Austin",
+ state: "TX",
+ zip: "78701",
+ country: "United States",
+ },
+ },
+ // Computed totals (would come from backend)
+ subtotal: 12500.0,
+ tax: 1031.25,
+ total: 13531.25,
+};
+
+const PurchaseOrderDetailPage = () => {
+ // In a real app, you'd fetch this data:
+ // const { data: purchaseOrder } = useQuery(GET_PURCHASE_ORDER, { variables: { id } });
+ const purchaseOrder = mockPurchaseOrder;
+
+ return (
+
+
+ Purchase Order: {purchaseOrder.docNumber}
+
+
+ {/* Status Overview Card */}
+
+
+ {/* Order Details Card */}
+
+
+ {/* Financial Summary Card */}
+
+
+ );
+};
+
+const purchaseOrderDemoResource = defineResource({
+ path: "purchase-order-demo",
+ meta: {
+ title: "Purchase Order Demo",
+ },
+ component: PurchaseOrderDetailPage,
+});
+
+const dynamicPageResource = defineResource({
+ path: ":id",
+ meta: {
+ title: labels.t("dynamicPageTitle"),
+ },
+ component: () => {
+ const params = useParams<{ id: string }>();
+ const t = useT();
+
+ return (
+
+
{t("dynamicPageDescription", { id: params.id! })}
+
+
{t("subSubPageDescription")}
+
+
{t("subPageDescription")}
+
+
This page should be hidden from navigation.
+
+
+
+
Admin Only Page
+
+
+
+ 🎉 Congratulations! You have admin access.
+
+
+ This page is only visible when you select "Admin" role from the
+ sidebar.
+
+
+ Try switching to "Staff" role - this page will disappear from the navigation and become
+ inaccessible.
+
+
+
+
+ How it works:
+
+
+ -
+ The{" "}
+
+ RoleSwitcherContext
+ {" "}
+ manages the current role state
+
+ -
+ The role is passed to AppShell via{" "}
+
+ contextData
+ {" "}
+ prop
+
+ -
+ A route guard checks{" "}
+
+ context.role
+ {" "}
+ and returns{" "}
+
+ hidden()
+ {" "}
+ for non-admins
+
+ - The navigation automatically hides resources that are guarded
+
+
+
+ {/* Pattern overlay - different for light and dark mode */}
+
+
+ {/* Column number */}
+
+ {columnNumber}
+
+
+ {/* 2 columns (area: left + main) */}
+
+
+
+
+
+
+
+
+
+
+ {/* More than 3 columns */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Button
+
+
+
Variant
+
+
+
+
+
+
+
+
+
+
+
Size
+
+
+
+
+
+
+
+
+
+
Badge
+
+ Default
+ Success
+ Warning
+ Error
+ Neutral
+ Outline
+
+
+
Tooltip
+
+
+
+ }>
+ Top (default)
+
+ Tooltip on top
+
+
+ }>Bottom
+ Tooltip on bottom
+
+
+ }>Left
+ Tooltip on left
+
+
+ }>Right
+ Tooltip on right
+
+
+
+
+
Dialog
+
+ }>Open Dialog
+
+
+ Dialog Title
+
+ This is a dialog description. You can put any content here.
+
+
+
+ }>Cancel
+ }>Confirm
+
+
+
+
+
+ {/* Sheet */}
+
+
Sheet
+
+
+ }>
+ Open Sheet (Right)
+
+
+
+ Sheet Title
+ This sheet slides in from the right.
+
+ Sheet content goes here.
+
+ }>Close
+
+
+
+
+ }>
+ Open Sheet (Left)
+
+
+
+ Left Sheet
+ This sheet slides in from the left.
+
+
+ }>Close
+
+
+
+
+ }>
+ Open Sheet (Bottom)
+
+
+
+ Bottom Sheet
+ This sheet slides in from the bottom.
+
+
+ }>Close
+
+
+
+
+
+
Menu
+
+
+
Pattern
+
+
+ }>Basic
+
+ alert("Edit clicked")}>Edit
+ alert("Duplicate clicked")}>Duplicate
+ alert("Copy ID clicked")}>Copy ID
+
+ alert("Delete clicked")}
+ className="astw:text-destructive"
+ >
+ Delete
+
+
+
+
+ }>
+ Checkbox & Radio
+
+
+
+ Panels
+
+ ✓
+ Show Toolbar
+
+
+ ✓
+ Show Sidebar
+
+
+
+
+ Sort by
+
+
+ ●
+ Date
+
+
+ ●
+ Name
+
+
+ ●
+ Size
+
+
+
+
+
+
+ }>Submenu
+
+
+ Document
+ alert("New")}>New
+ alert("Open")}>Open
+ alert("Save")}>Save
+
+
+
+ Export as →
+
+ alert("PDF")}>PDF
+ alert("CSV")}>CSV
+ alert("JSON")}>JSON
+
+
+
+ Print (unavailable)
+
+
+
+
+
+
Direction
+
+
+ }>Bottom ↓
+
+ Item 1
+ Item 2
+ Item 3
+
+
+
+ }>Top ↑
+
+ Item 1
+ Item 2
+ Item 3
+
+
+
+ }>Right →
+
+ Item 1
+ Item 2
+ Item 3
+
+
+
+ }>Left ←
+
+ Item 1
+ Item 2
+ Item 3
+
+
+
+
+
+
+
Tabs
+
+
+ Overview
+ Projects
+ Settings
+
+ Archived
+
+
+
+ Overview content goes here.
+
+
+ Projects content goes here.
+
+
+ Settings content goes here.
+
+
+ Archived content goes here.
+
+
+
+
Table
+
+
+
+ Name
+ Status
+ Role
+ Amount
+
+
+
+
+ Alice Johnson
+
+ Active
+
+ Admin
+ $1,200.00
+
+
+ Bob Smith
+
+ Inactive
+
+ Editor
+ $800.00
+
+
+ Carol Lee
+
+ Active
+
+ Viewer
+ $350.00
+
+
+
+
+ Total
+ $2,350.00
+
+
+
+
+
Select
+
+ {/* Basic (string items) */}
+
+
+ {/* Custom render */}
+
+
Custom render
+
+
+ {/* Multiple selection */}
+
+
Multiple
+
+
+ {/* Grouped items */}
+
+
Grouped
+
+
+ {/* Disabled */}
+
+
+
+
Select.Async
+
+
+
Single
+
{
+ await new Promise((r) => setTimeout(r, 800));
+ return fruits;
+ }}
+ mapItem={(f) => ({
+ label: f.name,
+ key: f.id,
+ render: (
+
+ {f.emoji} {f.name}
+
+ ),
+ })}
+ placeholder="Async select..."
+ loadingText="Loading fruits..."
+ />
+
+
+
+
Multiple
+
{
+ await new Promise((r) => setTimeout(r, 800));
+ return fruits;
+ }}
+ mapItem={(f) => ({ label: f.name, key: f.id })}
+ multiple
+ placeholder="Async multi-select..."
+ />
+
+
+
+
Combobox
+
+ {/* Basic string items */}
+
+
+ {/* Custom render */}
+
+
Custom render
+
({
+ label: f.name,
+ key: f.id,
+ render: (
+
+ {f.emoji} {f.name}
+
+ ),
+ })}
+ placeholder="With emoji"
+ />
+
+
+ {/* Multiple */}
+
+
Multiple (chips)
+
({ label: f.name, key: f.id })}
+ multiple
+ placeholder="Add fruits..."
+ />
+
+
+ {/* Grouped */}
+
+
Grouped
+
({ label: f.name, key: f.id })}
+ placeholder="Search grouped..."
+ />
+
+
+ {/* Disabled */}
+
+
+
+
Combobox.Async
+
+
+
Single
+
{
+ await new Promise((r) => setTimeout(r, 400));
+ return allProgrammingLanguages.filter((l) =>
+ l.toLowerCase().includes(query.toLowerCase()),
+ );
+ }}
+ placeholder="Search programming language..."
+ loadingText="Searching..."
+ emptyText="No programming languages found."
+ />
+
+
+
+
Multiple
+
{
+ await new Promise((r) => setTimeout(r, 400));
+ return allProgrammingLanguages.filter((l) =>
+ l.toLowerCase().includes(query.toLowerCase()),
+ );
+ }}
+ multiple
+ placeholder="Add programming languages..."
+ />
+
+
+
+
Combobox (creatable)
+
+
+
Single
+
({ label: item.name, key: item.id })}
+ onCreateItem={async (value) => {
+ const item = { id: crypto.randomUUID(), name: value };
+ setCreatableItems((prev) => [...prev, item]);
+ return item;
+ }}
+ formatCreateLabel={(v) => `Create "${v}"`}
+ placeholder="Search or create..."
+ />
+
+
+
+
Multiple (async)
+
({ label: item.name, key: item.id })}
+ onCreateItem={async (value) => {
+ await new Promise((r) => setTimeout(r, 500));
+ const item = { id: crypto.randomUUID(), name: value };
+ setCreatableItems((prev) => [...prev, item]);
+ return item;
+ }}
+ multiple
+ placeholder="Add or create tags..."
+ />
+
+
+
+
With confirmation dialog
+
+
+
+
+
Autocomplete
+
+ {/* Basic string items */}
+
+
+ {/* Custom render */}
+
+
Custom render
+
({
+ label: f.name,
+ key: f.id,
+ render: (
+
+ {f.emoji} {f.name}
+
+ ),
+ })}
+ placeholder="With emoji"
+ />
+
+
+ {/* Grouped */}
+
+
Grouped
+
({ label: f.name, key: f.id })}
+ placeholder="Grouped autocomplete..."
+ />
+
+
+
+
Autocomplete.Async
+
+
+
Async search
+
{
+ await new Promise((r) => setTimeout(r, 400));
+ return allProgrammingLanguages.filter((l) =>
+ l.toLowerCase().includes(query.toLowerCase()),
+ );
+ }}
+ placeholder="Search programming language..."
+ />
+
+
+
+ {/* Basic Field */}
+
+
Field
+
+ A compound component that groups label, control, description, and error message.
+ Wrapped in a Form to demonstrate submit.
+
+
+
+
{
+ if (!open) setSubmittedData(null);
+ }}
+ >
+
+
+ Submitted Data
+ The following values were submitted:
+
+
+
+
+ Field
+ Value
+
+
+
+ {submittedData && (
+ <>
+
+ Username
+
+ {submittedData.username || (
+ (empty)
+ )}
+
+
+
+ Email
+
+ {submittedData.email || (
+ (empty)
+ )}
+
+
+
+ Bio
+
+ {submittedData.bio || (
+ (empty)
+ )}
+
+
+
+ )}
+
+
+
+ }>Close
+
+
+
+
+
+ {/* Fieldset */}
+
+
Fieldset
+
+ Groups related fields under a semantic <fieldset> with a{" "}
+ <legend>.
+
+
+ Shipping Address
+
+
+ Street
+
+
+
+
+
+ City
+
+
+
+
+ ZIP
+
+
+
+
+
+
+ {/* Field with custom validation */}
+
+
Field — Custom Validation
+
+ Use the validate prop for custom validation logic.
+
+
{
+ const v = String(value ?? "");
+ if (v.length > 0 && v.length < 8) {
+ return "Password must be at least 8 characters.";
+ }
+ return null;
+ }}
+ >
+ Password
+
+
+
+
+
+ {/* Field.Validity */}
+
+
Field.Validity
+
+ Render-prop that exposes the field's ValidityState for custom rendering.
+
+
+ Age
+
+
+ {(state) =>
+ state.validity.rangeOverflow ? (
+
+ Age cannot exceed 150.
+
+ ) : null
+ }
+
+
+
+
+ {/* Field + Dropdown Components */}
+
+
Field + Dropdown Components
+
+ Select, Combobox, Autocomplete composed with Field for labeling, description, and
+ validation.
+
+
+
{
+ const v = value as FruitOption | null;
+ if (v?.name !== "Mango") {
+ return 'Please select "Mango".';
+ }
+ return null;
+ }}
+ validationMode="onChange"
+ >
+ Select
+
+
+
{
+ const v = value as string[] | undefined;
+ if (!v || v.length === 0) {
+ return "Select at least one fruit.";
+ }
+ return null;
+ }}
+ validationMode="onChange"
+ >
+ Combobox
+
+ Required — at least one.
+
+
+
+
{
+ const v = String(value ?? "");
+ if (v !== "" && v !== "Cherry") {
+ return 'Please type "Cherry".';
+ }
+ return null;
+ }}
+ validationMode="onChange"
+ >
+ Autocomplete
+ ({ label: f.name, key: f.id })}
+ placeholder="Type a fruit..."
+ />
+ Must be "Cherry".
+
+
+
+
+
+ {/* Form with submit — spans full width */}
+
+
Form — Submit & Server Errors
+
+ Wraps fields in a <form> with consolidated error handling.
+
+
+
+
+
Zod + React Hook Form Demo
+
+
+
+ {submittedData && (
+
+
Submitted values:
+
+ {JSON.stringify(submittedData, null, 2)}
+
+
+ )}
+
Overview content