@azmr/ui 0.1.0 → 0.3.0

package/dist/presets.d.ts

@@ -0,0 +1,97 @@
+import * as react from 'react';
+import { SVGProps, HTMLAttributes, ReactNode, ElementType, ReactElement } from 'react';
+
+interface AnimatedCheckProps extends Omit<SVGProps<SVGSVGElement>, "ref" | "children"> {
+    /** Pixel size (width and height). Default 24. */
+    size?: number;
+    /** Accessible name. When set the tick is an image ("Saved"); without it the tick is decorative. */
+    label?: string;
+}
+/**
+ * A tick that draws itself, for a success moment. It uses the current text colour, so
+ * `className="text-success"` colours it. Under reduced motion it is drawn at once. Server-safe.
+ */
+declare const AnimatedCheck: react.ForwardRefExoticComponent<AnimatedCheckProps & react.RefAttributes<SVGSVGElement>>;
+
+interface CollapseProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Whether the content is showing. */
+    open: boolean;
+    children: ReactNode;
+}
+/**
+ * Shows and hides content with a height animation that is **not measured in JavaScript**: it
+ * animates `grid-template-rows` between `0fr` and `1fr`. Server-safe, and instant under reduced
+ * motion.
+ *
+ * The content stays mounted while closed, so it keeps its state and can animate; while closed it is
+ * `inert` and `aria-hidden`, so it cannot be focused or read. You own the trigger: give it
+ * `aria-expanded` and `aria-controls` pointing at this element's `id`. For a ready-made disclosure
+ * with all of that wired, use `Collapsible` or `Accordion`.
+ */
+declare const Collapse: react.ForwardRefExoticComponent<CollapseProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * The preset classes from `@azmr/ui/styles.css`. Spelled out in full so the Tailwind scanner finds
+ * them in `dist`, and so a typo is a type error. Every class is defined in `motion.css` and every
+ * motion class there is listed here (a test keeps the two in step).
+ *
+ * `enter` eases out and runs on `--motion-duration-base`; `exit` is shorter and eases in. Under
+ * `prefers-reduced-motion` the slides and scales become a plain fade.
+ */
+declare const motionPresets: {
+    readonly fade: {
+        readonly enter: "motion-fade-in";
+        readonly exit: "motion-fade-out";
+    };
+    readonly scale: {
+        readonly enter: "motion-scale-in";
+        readonly exit: "motion-scale-out";
+    };
+    readonly slideUp: {
+        readonly enter: "motion-slide-up-in";
+        readonly exit: "motion-slide-up-out";
+    };
+    readonly slideDown: {
+        readonly enter: "motion-slide-down-in";
+        readonly exit: "motion-slide-down-out";
+    };
+    readonly slideLeft: {
+        readonly enter: "motion-slide-left-in";
+        readonly exit: "motion-slide-left-out";
+    };
+    readonly slideRight: {
+        readonly enter: "motion-slide-right-in";
+        readonly exit: "motion-slide-right-out";
+    };
+    /** A grid-template-rows collapse. Use `Collapse`. */
+    readonly collapse: {
+        readonly root: "motion-collapse";
+        readonly inner: "motion-collapse-inner";
+    };
+    /** A staggered list. Use `Stagger`. */
+    readonly stagger: {
+        readonly container: "motion-stagger";
+        readonly item: "motion-stagger-item";
+    };
+    /** A sweeping highlight for loading placeholders. Put it on a rounded, overflow-clipped box. */
+    readonly shimmer: "motion-shimmer";
+    /** An SVG tick that draws itself. Use `AnimatedCheck`. */
+    readonly checkDraw: "motion-check";
+};
+type MotionPresetName = keyof typeof motionPresets;
+
+interface StaggerProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    children: ReactNode;
+    /** The element to render. Default `div`; use `ul` or `ol` for a list. */
+    as?: ElementType;
+    /** The last index that gets its own delay, so a long list does not take forever to appear. Default 12. */
+    max?: number;
+}
+/**
+ * Makes the children of a list enter one after another. Each child gets a `--stagger-index`, and the
+ * delay is `index x --motion-stagger-step` (40 ms), capped at `max`. Under reduced motion the step is
+ * zero and they fade in together. Only elements are staggered; text is left alone. Server-safe.
+ */
+declare function Stagger({ as, max, className, children, ...props }: StaggerProps): ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+export { AnimatedCheck, type AnimatedCheckProps, Collapse, type CollapseProps, type MotionPresetName, Stagger, type StaggerProps, motionPresets };

package/dist/presets.js

@@ -0,0 +1,94 @@
+import {
+  motionPresets
+} from "./chunk-GLB75NT3.js";
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/motion/presets/animated-check.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var AnimatedCheck = forwardRef(function AnimatedCheck2({ size = 24, label, className, ...props }, ref) {
+  return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: decorative (aria-hidden) by default, or role="img" with an aria-label when `label` is set
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        width: size,
+        height: size,
+        fill: "none",
+        className: cn(motionPresets.checkDraw, className),
+        ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M5 13l4 4L19 7",
+            pathLength: 24,
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    )
+  );
+});
+
+// src/motion/presets/collapse.tsx
+import { forwardRef as forwardRef2, version } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function inertProps(reactVersion = version) {
+  const major = Number.parseInt(reactVersion, 10);
+  return major < 19 ? { inert: "" } : { inert: true };
+}
+var Collapse = forwardRef2(function Collapse2({ open, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      "data-state": open ? "open" : "closed",
+      ...open ? {} : { ...inertProps(), "aria-hidden": true },
+      className: cn(motionPresets.collapse.root, className),
+      ...props,
+      children: /* @__PURE__ */ jsx2("div", { className: motionPresets.collapse.inner, children })
+    }
+  );
+});
+
+// src/motion/presets/stagger.tsx
+import {
+  Children,
+  cloneElement,
+  createElement,
+  isValidElement
+} from "react";
+function Stagger({ as = "div", max = 12, className, children, ...props }) {
+  let index = 0;
+  const items = Children.toArray(children).map((child) => {
+    if (!isValidElement(child)) return child;
+    const element = child;
+    const style = {
+      ...element.props.style,
+      "--stagger-index": Math.min(index++, max)
+    };
+    return cloneElement(element, {
+      className: cn(element.props.className, motionPresets.stagger.item),
+      style
+    });
+  });
+  return createElement(
+    as,
+    { className: cn(motionPresets.stagger.container, className), ...props },
+    items
+  );
+}
+export {
+  AnimatedCheck,
+  Collapse,
+  Stagger,
+  motionPresets
+};

package/dist/progress.d.ts

@@ -0,0 +1,70 @@
+import { ForwardRefExoticComponent, ComponentPropsWithoutRef, RefAttributes } from 'react';
+import { Progress as Progress$1 } from '@base-ui/react/progress';
+
+/**
+ * The indicator colour per tone. `token` names the design token the colour comes from; a test
+ * checks it has 3:1 contrast against both the track and the page in light and dark. Warning uses
+ * `warning-text`, not the yellow `warning` surface colour, which is far too faint on a light track.
+ */
+declare const progressTones: {
+    readonly default: {
+        readonly token: "primary";
+        readonly indicator: "bg-primary";
+        readonly ring: "text-primary";
+    };
+    readonly success: {
+        readonly token: "success";
+        readonly indicator: "bg-success";
+        readonly ring: "text-success";
+    };
+    readonly warning: {
+        readonly token: "warning-text";
+        readonly indicator: "bg-warning-text";
+        readonly ring: "text-warning-text";
+    };
+    readonly destructive: {
+        readonly token: "destructive";
+        readonly indicator: "bg-destructive";
+        readonly ring: "text-destructive";
+    };
+    readonly info: {
+        readonly token: "info";
+        readonly indicator: "bg-info";
+        readonly ring: "text-info";
+    };
+};
+type ProgressTone = keyof typeof progressTones;
+declare const LINEAR_HEIGHT: {
+    readonly sm: "h-1.5";
+    readonly md: "h-2";
+    readonly lg: "h-3";
+};
+interface ProgressOwnProps {
+    /** The current value, or `null` when the amount is not known (indeterminate). Default range is 0 to 100. */
+    value: number | null;
+    min?: number;
+    max?: number;
+    /** `linear` (default) is a bar; `circular` is a ring. */
+    variant?: "linear" | "circular";
+    size?: keyof typeof LINEAR_HEIGHT;
+    tone?: ProgressTone;
+    /** Show the percentage as text next to (linear) or inside (circular) the indicator. */
+    showValue?: boolean;
+    /** The text a screen reader announces, instead of the default percentage. */
+    valueText?: (value: number | null) => string;
+    className?: string;
+}
+/** A progress bar needs a name: a label, or the id of the heading that describes it. */
+type Named = {
+    "aria-label": string;
+} | {
+    "aria-labelledby": string;
+};
+type ProgressProps = ProgressOwnProps & Named & Omit<ComponentPropsWithoutRef<typeof Progress$1.Root>, keyof ProgressOwnProps | "aria-label" | "aria-labelledby" | "getAriaValueText" | "children">;
+/**
+ * A linear or circular progress indicator with a required accessible name. `value={null}` is
+ * indeterminate. Built on Base UI, so the progressbar semantics and `aria-valuenow` are native.
+ */
+declare const Progress: ForwardRefExoticComponent<ProgressProps & RefAttributes<HTMLDivElement>>;
+
+export { Progress, type ProgressOwnProps, type ProgressProps, type ProgressTone, progressTones };

package/dist/progress.js

@@ -0,0 +1,138 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/progress/progress.tsx
+import {
+  forwardRef
+} from "react";
+
+// src/primitives/progress.ts
+import { Progress } from "@base-ui/react/progress";
+
+// src/components/progress/progress.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var progressTones = {
+  default: { token: "primary", indicator: "bg-primary", ring: "text-primary" },
+  success: { token: "success", indicator: "bg-success", ring: "text-success" },
+  warning: { token: "warning-text", indicator: "bg-warning-text", ring: "text-warning-text" },
+  destructive: { token: "destructive", indicator: "bg-destructive", ring: "text-destructive" },
+  info: { token: "info", indicator: "bg-info", ring: "text-info" }
+};
+var LINEAR_HEIGHT = { sm: "h-1.5", md: "h-2", lg: "h-3" };
+var CIRCULAR_SIZE = { sm: "size-6", md: "size-10", lg: "size-16" };
+var RADIUS = 16;
+var CIRCUMFERENCE = Number((2 * Math.PI * RADIUS).toFixed(2));
+var ProgressImpl = forwardRef(function Progress2({
+  value,
+  min = 0,
+  max = 100,
+  variant = "linear",
+  size = "md",
+  tone = "default",
+  showValue = false,
+  valueText,
+  className,
+  ...props
+}, ref) {
+  const current = value === null || !Number.isFinite(value) ? null : Math.min(max, Math.max(min, value));
+  const indeterminate = current === null;
+  const percent = indeterminate ? 0 : (current - min) / (max - min || 1) * 100;
+  const palette = progressTones[tone];
+  const text = indeterminate ? "" : `${Math.round(percent)}%`;
+  const root = {
+    ref,
+    value: current,
+    min,
+    max,
+    getAriaValueText: valueText ? (_formatted, v) => valueText(v) : void 0,
+    ...props
+  };
+  if (variant === "circular") {
+    const filled = Number((CIRCUMFERENCE * (indeterminate ? 25 : percent) / 100).toFixed(2));
+    return /* @__PURE__ */ jsxs(
+      Progress.Root,
+      {
+        ...root,
+        className: cn(
+          "relative inline-flex shrink-0 items-center justify-center",
+          CIRCULAR_SIZE[size],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 36 36",
+              fill: "none",
+              "aria-hidden": "true",
+              "data-motion": indeterminate ? "essential" : void 0,
+              className: cn("size-full -rotate-90", palette.ring, indeterminate && "animate-spin"),
+              children: [
+                /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: RADIUS, strokeWidth: "4", className: "stroke-muted" }),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    "data-arc": "",
+                    cx: "18",
+                    cy: "18",
+                    r: RADIUS,
+                    stroke: "currentColor",
+                    strokeWidth: "4",
+                    strokeLinecap: "round",
+                    strokeDasharray: `${filled} ${CIRCUMFERENCE}`
+                  }
+                )
+              ]
+            }
+          ),
+          showValue && !indeterminate && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-progress-value": "",
+              "aria-hidden": "true",
+              className: "absolute text-xs font-medium tabular-nums",
+              children: text
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Progress.Root, { ...root, className: cn("flex w-full items-center gap-3", className), children: [
+    /* @__PURE__ */ jsx(
+      Progress.Track,
+      {
+        className: cn("relative w-full overflow-hidden rounded-full bg-muted", LINEAR_HEIGHT[size]),
+        children: /* @__PURE__ */ jsx(
+          Progress.Indicator,
+          {
+            "data-motion": indeterminate ? "essential" : void 0,
+            className: cn(
+              "h-full rounded-full transition-[width] duration-(--motion-duration-base) ease-standard",
+              palette.indicator,
+              // Unknown amount: a partial bar that pulses. Under reduced motion it keeps pulsing
+              // (opacity, not movement) because a still full-width bar would read as complete.
+              indeterminate && "w-2/5 animate-pulse"
+            )
+          }
+        )
+      }
+    ),
+    showValue && !indeterminate && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-progress-value": "",
+        "aria-hidden": "true",
+        className: "min-w-10 text-right text-sm tabular-nums text-muted-foreground",
+        children: text
+      }
+    )
+  ] });
+});
+var Progress3 = ProgressImpl;
+export {
+  Progress3 as Progress,
+  progressTones
+};

package/dist/react.d.ts

@@ -0,0 +1,81 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface LocaleMessages {
+    close: string;
+    cancel: string;
+    confirm: string;
+    loading: string;
+    noResults: string;
+    clear: string;
+    search: string;
+    previousPage: string;
+    nextPage: string;
+}
+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;
+}
+
+type LocaleProviderProps = LocaleOptions & {
+    children: ReactNode;
+};
+/** Provide locale, currency, week start, time zone and component strings to everything below. */
+declare function LocaleProvider({ children, locale, currency, weekStartsOn, timeZone, messages, }: LocaleProviderProps): react.JSX.Element;
+declare function useLocale(): Locale;
+
+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];
+
+interface ThemeContextValue {
+    /** The stored preference: `light`, `dark` or `system`. */
+    theme: ThemePreference;
+    /** What is actually showing: `system` resolved against the operating system. */
+    resolvedTheme: "light" | "dark";
+    setTheme: (theme: ThemePreference) => void;
+    density: Density;
+    setDensity: (density: Density) => void;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    /** Initial preference, normally read from the cookie on the server. Default `system`. */
+    defaultTheme?: ThemePreference;
+    /** Initial density, normally read from the cookie on the server. Default `comfortable`. */
+    defaultDensity?: Density;
+    /** Remember changes in a cookie so the server can render them next time. Default true. */
+    persist?: boolean;
+    /** Element that receives `data-theme` / `data-density`. Default `<html>`. */
+    target?: HTMLElement;
+}
+/**
+ * Applies `data-theme` and `data-density` to `<html>`, tracks the operating system while the
+ * preference is `system`, and remembers changes in a cookie. The server should render the same
+ * attributes with `htmlAttributes.fromCookies(...)` so there is no flash on first paint.
+ */
+declare function ThemeProvider({ children, defaultTheme, defaultDensity, persist, target, }: ThemeProviderProps): react.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+export { LocaleProvider, type LocaleProviderProps, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, useLocale, useTheme };