@azlib/ui

The core React design system and UI library for the azlib ecosystem, built on Tailwind CSS v4 and featuring built-in routing, custom component runtimes, and lightweight form-validation tools.

AI Agent Quick Reference

Core Exports

| Entry Point / Import | Export | Type | Description | | --- | --- | --- | --- | | @azlib/ui | UI Components | React Components | Accordion, Alert, Autocomplete, Badge, Box, Button, Card, Checkbox, Container, DataGrid, DatePicker, DateRangePicker, Divider, Empty, FileDrop, Flex, FormField, Grid, HelpTooltip, Icon, Input, List, Modal, Pagination, Popover, Progress, RadioButton, Select, Skeleton, Snackbar, Stack, Stepper, Switch, Tabs, TagSelect, Textarea, Timeline, Toast, ToggleButton, TreeView, Typography. | | @azlib/ui | validate(rules: ValidationRule[]): ValidationErrors | Function | Run simple assertions against values and extract flat dotted-path errors map. | | @azlib/ui | RouterProvider | Component | Inject routes context tree (based on standard react-router-like structure). | | @azlib/ui | Router Hooks | React Hooks | useLoaderData, useActionData, useNavigate, useParams, useFetcher, etc. |

Styling Installation

Ensure you import the compiled CSS at the root of your application:

import "@azlib/ui/dist/styles.css";

Basic Usage (Form Validation)

import { validate, getError, FormField, Input } from "@azlib/ui";

const data = { name: "", email: "invalid-email" };

const errors = validate([
  { path: "name", message: "Name is required.", isValid: data.name.trim().length > 0 },
  { path: "email", message: "Email format is incorrect.", isValid: data.email.includes("@") },
]);

// Inside React Component:
return (
  <FormField label="Full Name" error={getError(errors, "name")}>
    <Input value={data.name} />
  </FormField>
);

Routing Integration

import { createBrowserRouter, RouterProvider } from "@azlib/ui";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    loader: async () => fetchNavigationItems(),
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
      }
    ]
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

Behavioral Gotchas

• Tailwind v4 Engine: The compiled styles rely on Tailwind v4 CSS variables. Ensure the host project bundler matches compatibility specifications.
• Nested Validation Paths: Dotted paths are supported by validate (e.g. fields.0.label). Use getChildErrors(errors, "fields.0") to collect errors scoped to a sub-array index.
• Router Loaders: Loaders block navigation transitions unless handled asynchronously or with skeleton placeholders. Use the useNavigation hook to inspect active transition states.