@azmr/ui 0.1.0 → 0.3.0

package/dist/stepper.js

@@ -0,0 +1,104 @@
+import {
+  Icon
+} from "./chunk-Q4PPM2SU.js";
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/stepper/stepper.tsx
+import { Check, X } from "lucide-react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STATUS_LABELS = {
+  complete: "Completed",
+  current: "Current step",
+  upcoming: "Not started",
+  error: "Error"
+};
+var INDICATOR = {
+  complete: "border-primary bg-primary text-primary-foreground",
+  current: "border-primary bg-background text-primary",
+  upcoming: "border-border bg-background text-muted-foreground",
+  error: "border-destructive bg-background text-destructive"
+};
+var Stepper = forwardRef(function Stepper2({
+  steps,
+  current,
+  orientation = "horizontal",
+  label = "Progress",
+  statusLabels,
+  className,
+  ...props
+}, ref) {
+  const words = { ...STATUS_LABELS, ...statusLabels };
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      "aria-label": label,
+      "data-orientation": orientation,
+      className: cn(horizontal ? "flex flex-row items-start" : "flex flex-col", className),
+      ...props,
+      children: steps.map((step, index) => {
+        const status = step.status === "error" ? "error" : index < current ? "complete" : index === current ? "current" : "upcoming";
+        const last = index === steps.length - 1;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "data-status": status,
+            "aria-current": status === "current" ? "step" : void 0,
+            className: cn(
+              "flex",
+              horizontal ? "flex-1 flex-row items-center last:flex-none" : "flex-col"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-azmr-step-indicator": "",
+                    className: cn(
+                      "flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-medium",
+                      INDICATOR[status]
+                    ),
+                    children: status === "complete" ? /* @__PURE__ */ jsx(Icon, { icon: Check }) : status === "error" ? /* @__PURE__ */ jsx(Icon, { icon: X }) : index + 1
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "grid text-left", children: [
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: words[status] }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "text-sm font-medium",
+                        status === "upcoming" && "text-muted-foreground"
+                      ),
+                      children: step.label
+                    }
+                  ),
+                  step.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: step.description })
+                ] })
+              ] }),
+              !last && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-azmr-step-connector": "",
+                  "aria-hidden": "true",
+                  className: cn(
+                    index < current ? "bg-primary" : "bg-border",
+                    horizontal ? "mx-3 h-px min-w-6 flex-1" : "my-2 ml-4 min-h-6 w-px"
+                  )
+                }
+              )
+            ]
+          },
+          index
+        );
+      })
+    }
+  );
+});
+export {
+  Stepper
+};

package/dist/styles.css

@@ -0,0 +1,24 @@
+/*
+ * @azmr/ui stylesheet: the design tokens plus the global base rules.
+ *
+ *   @import "tailwindcss";
+ *   @import "@azmr/ui/styles.css";
+ *
+ * Importing this changes the page itself: the body gets our background and text colours, and every
+ * element's default border and outline colour become our tokens. For an app that already has global
+ * styles (another UI library mid-migration, a docs site), import "@azmr/ui/tokens.css" instead:
+ * the same tokens, themes, density and utilities, without these global rules.
+ */
+@import "./tokens.css";
+
+@layer base {
+  * {
+    border-color: var(--border);
+    outline-color: var(--ring);
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+}

package/dist/table.d.ts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import { TableHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+
+type Align = "left" | "center" | "right";
+interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Names the scrolling container. When set it becomes a labelled, focusable region, so a keyboard
+     * user can scroll a table that is wider than its space. Give a wide table a label.
+     */
+    label?: string;
+    /** Classes for the scrolling container, such as a `max-h-96` so the table scrolls vertically. */
+    containerClassName?: string;
+    /** Keep the header row in view while the body scrolls. Give the container a height. */
+    stickyHeader?: boolean;
+    /** Tint every other body row. */
+    striped?: boolean;
+    /** Tint the row under the pointer. */
+    hoverable?: boolean;
+}
+/**
+ * A semantic, non-interactive table. It is a native `<table>`, so it already has the table, row and
+ * cell roles; name it with a `TableCaption`. Server-safe.
+ */
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** Marks the row as selected (`data-selected`) and tints it. */
+    selected?: boolean;
+}
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** Horizontal alignment. Default `left`. */
+    align?: Align;
+}
+/** A header cell. `scope="col"` by default; use `scope="row"` for the first cell of a row. */
+declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    align?: Align;
+    /** Right-aligns and uses tabular figures, so a column of numbers lines up. */
+    numeric?: boolean;
+}
+declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
+interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
+    /** Hide the caption visually but keep it as the table's name. */
+    srOnly?: boolean;
+}
+/** The table's name. Prefer a visible caption; `srOnly` keeps it for assistive technology only. */
+declare const TableCaption: react.ForwardRefExoticComponent<TableCaptionProps & react.RefAttributes<HTMLTableCaptionElement>>;
+
+export { Table, TableBody, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps };

package/dist/table.js

@@ -0,0 +1,124 @@
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/table/table.tsx
+import {
+  forwardRef
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var ALIGN = { left: "text-left", center: "text-center", right: "text-right" };
+var Table = forwardRef(function Table2({ label, containerClassName, stickyHeader, striped, hoverable, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...label ? { role: "region", "aria-label": label, tabIndex: 0 } : {},
+      className: cn(
+        "relative w-full overflow-x-auto",
+        label && "rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        stickyHeader && "overflow-y-auto",
+        containerClassName
+      ),
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          ref,
+          className: cn(
+            "w-full caption-bottom border-collapse text-sm",
+            stickyHeader && "[&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:bg-background [&_thead_th]:shadow-[inset_0_-1px_0_0_var(--color-border)]",
+            striped && "[&_tbody_tr:nth-child(even)]:bg-muted/50",
+            hoverable && "[&_tbody_tr:hover]:bg-muted/50",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+});
+var TableHeader = forwardRef(function TableHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props });
+});
+var TableBody = forwardRef(function TableBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props });
+});
+var TableFooter = forwardRef(function TableFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      ref,
+      className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+      ...props
+    }
+  );
+});
+var TableRow = forwardRef(function TableRow2({ selected, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      "data-selected": selected ? "" : void 0,
+      className: cn(
+        "h-(--density-row-height) border-b border-border transition-colors data-[selected]:bg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var TableHead = forwardRef(function TableHead2({ scope = "col", align = "left", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      scope,
+      className: cn(
+        "px-3 text-left align-middle font-medium text-muted-foreground",
+        ALIGN[align],
+        className
+      ),
+      ...props
+    }
+  );
+});
+var TableCell = forwardRef(function TableCell2({ align, numeric, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref,
+      className: cn(
+        "px-3 py-2 align-middle",
+        numeric && "text-right tabular-nums",
+        align && ALIGN[align],
+        className
+      ),
+      ...props
+    }
+  );
+});
+var TableCaption = forwardRef(
+  function TableCaption2({ srOnly, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "caption",
+      {
+        ref,
+        className: cn(
+          "mt-4 caption-bottom text-sm text-muted-foreground",
+          srOnly && "sr-only",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};

package/dist/theme.d.ts

@@ -0,0 +1,111 @@
+declare const THEME_PREFERENCES: readonly ["light", "dark", "system"];
+type ThemePreference = (typeof THEME_PREFERENCES)[number];
+declare const DENSITIES: readonly ["compact", "comfortable", "spacious"];
+type Density = (typeof DENSITIES)[number];
+declare const THEME_COOKIE = "azmr-theme";
+declare const DENSITY_COOKIE = "azmr-density";
+/** Validate untrusted input (a cookie, storage, a query string) down to a known value. */
+declare function parseThemePreference(value: unknown, fallback?: ThemePreference): ThemePreference;
+declare function parseDensity(value: unknown, fallback?: Density): Density;
+/** Read one cookie from a `Cookie` header / `document.cookie` string. */
+declare function readCookie(header: string | null | undefined, name: string): string | undefined;
+interface CookieOptions {
+    /** Add the `Secure` attribute (set when the page is served over HTTPS). */
+    secure?: boolean;
+}
+/** Build a `Set-Cookie` / `document.cookie` string: path-wide, one year, SameSite=Lax. */
+declare function serializeCookie(name: string, value: string, options?: CookieOptions): string;
+interface HtmlAttributes {
+    "data-theme"?: "light" | "dark";
+    "data-density"?: "compact" | "spacious";
+}
+interface HtmlAttributesInput {
+    theme?: ThemePreference;
+    density?: Density;
+}
+declare function buildHtmlAttributes({ theme, density }: HtmlAttributesInput): HtmlAttributes;
+/**
+ * Attributes for `<html>` in a server layout:
+ * `<html lang="en-NZ" {...htmlAttributes.fromCookies(cookieHeader)}>`.
+ */
+declare const htmlAttributes: typeof buildHtmlAttributes & {
+    fromCookies(header: string | null | undefined): HtmlAttributes;
+};
+
+interface Oklch {
+    l: number;
+    c: number;
+    h: number;
+}
+interface ThemeOptions {
+    /** Brand colour as `#rgb`, `#rrggbb`, `oklch(L C H)` or `{ l, c, h }`. */
+    primary?: string | Oklch;
+    /** Secondary surfaces (secondary Button, Badge). Same accepted formats as `primary`. */
+    secondary?: string | Oklch;
+    /**
+     * Status colours. Each is derived so its foreground is AA on it in both modes, and so it stays
+     * readable as text on the page and on cards (`Text tone`, form errors). `destructive` is the
+     * "danger" colour.
+     */
+    success?: string | Oklch;
+    warning?: string | Oklch;
+    info?: string | Oklch;
+    destructive?: string | Oklch;
+    /** `rem` or `px`, e.g. `0.5rem`. */
+    radius?: string;
+    /** A CSS font-family list, e.g. `Inter, "Segoe UI", sans-serif`. */
+    font?: string;
+    density?: Density;
+}
+interface Theme {
+    /** Custom properties to set on `:root` (or any ancestor), e.g. via a `style` prop. */
+    cssVariables: Record<string, string>;
+    /** The same variables as a `:root { ... }` rule. */
+    css: string;
+    /** Attributes for `<html>` (density). */
+    htmlAttributes: HtmlAttributes;
+}
+declare function createTheme(options?: ThemeOptions): Theme;
+
+declare function themeInitScript(): string;
+
+interface LocaleMessages {
+    close: string;
+    cancel: string;
+    confirm: string;
+    loading: string;
+    noResults: string;
+    clear: string;
+    search: string;
+    previousPage: string;
+    nextPage: string;
+}
+declare const DEFAULT_MESSAGES: Readonly<LocaleMessages>;
+type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+interface LocaleOptions {
+    /** BCP 47 tag. Default `en-NZ`. */
+    locale?: string;
+    /** ISO 4217 code. Default `NZD`. */
+    currency?: string;
+    /** 0 = Sunday ... 6 = Saturday. Default 1 (Monday). */
+    weekStartsOn?: WeekStart;
+    /** IANA zone used to display instants. Default: the runtime's zone. */
+    timeZone?: string;
+    messages?: Partial<LocaleMessages>;
+}
+type DateInput = Date | number | string | null | undefined;
+interface Locale {
+    readonly locale: string;
+    readonly currency: string;
+    readonly weekStartsOn: WeekStart;
+    readonly timeZone: string | undefined;
+    readonly messages: LocaleMessages;
+    formatNumber(value: number | null | undefined, options?: Intl.NumberFormatOptions): string;
+    formatCurrency(value: number | null | undefined, options?: Intl.NumberFormatOptions): string;
+    /** Date-only strings (`2026-10-15`) print that calendar day in every time zone. */
+    formatDate(value: DateInput, options?: Intl.DateTimeFormatOptions): string;
+    formatDateTime(value: DateInput, options?: Intl.DateTimeFormatOptions): string;
+}
+declare function createLocale(options?: LocaleOptions): Locale;
+
+export { type CookieOptions, DEFAULT_MESSAGES, DENSITIES, DENSITY_COOKIE, type DateInput, type Density, type HtmlAttributes, type Locale, type LocaleMessages, type LocaleOptions, type Oklch, THEME_COOKIE, THEME_PREFERENCES, type Theme, type ThemeOptions, type ThemePreference, type WeekStart, createLocale, createTheme, htmlAttributes, parseDensity, parseThemePreference, readCookie, serializeCookie, themeInitScript };