@azmr/ui 0.1.0 → 0.3.0

package/dist/react.js

@@ -0,0 +1,281 @@
+"use client";
+
+// src/react/LocaleProvider.tsx
+import { createContext, useContext, useMemo } from "react";
+
+// src/theme/locale.ts
+var DEFAULT_MESSAGES = Object.freeze({
+  close: "Close",
+  cancel: "Cancel",
+  confirm: "Confirm",
+  loading: "Loading",
+  noResults: "No results found",
+  clear: "Clear",
+  search: "Search",
+  previousPage: "Previous page",
+  nextPage: "Next page"
+});
+var DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+var FIELD_OPTIONS = [
+  "weekday",
+  "era",
+  "year",
+  "month",
+  "day",
+  "dayPeriod",
+  "hour",
+  "minute",
+  "second",
+  "fractionalSecondDigits",
+  "timeZoneName"
+];
+function toInstant(value) {
+  if (value === null || value === void 0 || value === "") return void 0;
+  if (typeof value === "string") {
+    const match = DATE_ONLY.exec(value);
+    if (match) {
+      const date2 = new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3])));
+      return Number.isNaN(date2.getTime()) ? void 0 : { date: date2, calendarDay: true };
+    }
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? void 0 : { date, calendarDay: false };
+}
+function createLocale(options = {}) {
+  const locale = options.locale ?? "en-NZ";
+  const currency = options.currency ?? "NZD";
+  const weekStartsOn = options.weekStartsOn ?? 1;
+  const timeZone = options.timeZone;
+  try {
+    Intl.getCanonicalLocales(locale);
+  } catch {
+    throw new Error(`createLocale: invalid locale ${JSON.stringify(locale)}`);
+  }
+  if (!/^[A-Z]{3}$/.test(currency)) {
+    throw new Error(
+      `createLocale: currency must be an ISO 4217 code like "NZD", got ${JSON.stringify(currency)}`
+    );
+  }
+  if (timeZone !== void 0) {
+    try {
+      new Intl.DateTimeFormat(locale, { timeZone });
+    } catch {
+      throw new Error(`createLocale: unknown time zone ${JSON.stringify(timeZone)}`);
+    }
+  }
+  if (!Number.isInteger(weekStartsOn) || weekStartsOn < 0 || weekStartsOn > 6) {
+    throw new Error(
+      `createLocale: weekStartsOn must be an integer from 0 to 6, got ${weekStartsOn}`
+    );
+  }
+  const numberFormats = /* @__PURE__ */ new Map();
+  const dateFormats = /* @__PURE__ */ new Map();
+  const numberFormat = (opts) => {
+    const key = JSON.stringify(opts);
+    let format = numberFormats.get(key);
+    if (!format) {
+      format = new Intl.NumberFormat(locale, opts);
+      numberFormats.set(key, format);
+    }
+    return format;
+  };
+  const dateFormat = (opts) => {
+    const key = JSON.stringify(opts);
+    let format = dateFormats.get(key);
+    if (!format) {
+      format = new Intl.DateTimeFormat(locale, opts);
+      dateFormats.set(key, format);
+    }
+    return format;
+  };
+  const formatDateWith = (defaults) => (value, opts = {}) => {
+    const instant = toInstant(value);
+    if (!instant) return "";
+    const zone = instant.calendarDay ? "UTC" : opts.timeZone ?? timeZone;
+    const customised = FIELD_OPTIONS.some((key) => key in opts) || "dateStyle" in opts || "timeStyle" in opts;
+    return dateFormat({
+      ...customised ? {} : defaults,
+      ...opts,
+      ...zone ? { timeZone: zone } : {}
+    }).format(instant.date);
+  };
+  const isNumber = (value) => typeof value === "number" && Number.isFinite(value);
+  return {
+    locale,
+    currency,
+    weekStartsOn,
+    timeZone,
+    messages: { ...DEFAULT_MESSAGES, ...options.messages },
+    formatNumber: (value, opts = {}) => isNumber(value) ? numberFormat(opts).format(value) : "",
+    formatCurrency: (value, opts = {}) => isNumber(value) ? numberFormat({ style: "currency", currency, ...opts }).format(value) : "",
+    formatDate: formatDateWith({ dateStyle: "medium" }),
+    formatDateTime: formatDateWith({ dateStyle: "medium", timeStyle: "short" })
+  };
+}
+
+// src/react/LocaleProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var LocaleContext = createContext(createLocale());
+function LocaleProvider({
+  children,
+  locale,
+  currency,
+  weekStartsOn,
+  timeZone,
+  messages
+}) {
+  const messagesKey = JSON.stringify(messages ?? {});
+  const value = useMemo(
+    () => createLocale({
+      locale,
+      currency,
+      weekStartsOn,
+      timeZone,
+      messages: JSON.parse(messagesKey)
+    }),
+    [locale, currency, weekStartsOn, timeZone, messagesKey]
+  );
+  return /* @__PURE__ */ jsx(LocaleContext.Provider, { value, children });
+}
+function useLocale() {
+  return useContext(LocaleContext);
+}
+
+// src/react/ThemeProvider.tsx
+import {
+  createContext as createContext2,
+  useCallback,
+  useContext as useContext2,
+  useEffect,
+  useMemo as useMemo2,
+  useState,
+  useSyncExternalStore
+} from "react";
+
+// src/theme/preferences.ts
+var THEME_PREFERENCES = ["light", "dark", "system"];
+var DENSITIES = ["compact", "comfortable", "spacious"];
+var THEME_COOKIE = "azmr-theme";
+var DENSITY_COOKIE = "azmr-density";
+var ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
+function parseThemePreference(value, fallback = "system") {
+  return typeof value === "string" && THEME_PREFERENCES.includes(value) ? value : fallback;
+}
+function parseDensity(value, fallback = "comfortable") {
+  return typeof value === "string" && DENSITIES.includes(value) ? value : fallback;
+}
+function readCookie(header, name) {
+  if (!header) return void 0;
+  for (const part of header.split(";")) {
+    const trimmed = part.trim();
+    const eq = trimmed.indexOf("=");
+    if (eq === -1 || trimmed.slice(0, eq) !== name) continue;
+    const raw = trimmed.slice(eq + 1);
+    try {
+      return decodeURIComponent(raw);
+    } catch {
+      return raw;
+    }
+  }
+  return void 0;
+}
+var COOKIE_NAME = /^[A-Za-z0-9!#$%&'*+.^_`|~-]+$/;
+var COOKIE_VALUE = /^[\x21\x23-\x2B\x2D-\x3A\x3C-\x5B\x5D-\x7E]*$/;
+function serializeCookie(name, value, options = {}) {
+  if (!COOKIE_NAME.test(name)) throw new Error(`Invalid cookie name: ${JSON.stringify(name)}`);
+  if (!COOKIE_VALUE.test(value)) throw new Error(`Invalid cookie value for "${name}"`);
+  const secure = options.secure ? "; Secure" : "";
+  return `${name}=${value}; Path=/; Max-Age=${ONE_YEAR_SECONDS}; SameSite=Lax${secure}`;
+}
+function buildHtmlAttributes({ theme, density }) {
+  const attributes = {};
+  if (theme === "light" || theme === "dark") attributes["data-theme"] = theme;
+  if (density === "compact" || density === "spacious") attributes["data-density"] = density;
+  return attributes;
+}
+var htmlAttributes = Object.assign(buildHtmlAttributes, {
+  fromCookies(header) {
+    return buildHtmlAttributes({
+      theme: parseThemePreference(readCookie(header, THEME_COOKIE)),
+      density: parseDensity(readCookie(header, DENSITY_COOKIE))
+    });
+  }
+});
+
+// src/react/ThemeProvider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+function subscribeToSystem(onChange) {
+  const query = typeof window === "undefined" ? void 0 : window.matchMedia?.(DARK_QUERY);
+  if (!query) return () => {
+  };
+  query.addEventListener("change", onChange);
+  return () => query.removeEventListener("change", onChange);
+}
+var systemPrefersDark = () => window.matchMedia?.(DARK_QUERY).matches ?? false;
+var serverSystemPrefersDark = () => false;
+function writeCookie(name, value) {
+  document.cookie = serializeCookie(name, value, { secure: window.location.protocol === "https:" });
+}
+var ThemeContext = createContext2(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  defaultDensity = "comfortable",
+  persist = true,
+  target
+}) {
+  const [theme, setThemeState] = useState(
+    () => parseThemePreference(defaultTheme)
+  );
+  const [density, setDensityState] = useState(() => parseDensity(defaultDensity));
+  const systemDark = useSyncExternalStore(
+    subscribeToSystem,
+    systemPrefersDark,
+    serverSystemPrefersDark
+  );
+  const resolvedTheme = theme === "system" ? systemDark ? "dark" : "light" : theme;
+  useEffect(() => {
+    const element = target ?? document.documentElement;
+    if (theme === "system") element.removeAttribute("data-theme");
+    else element.setAttribute("data-theme", theme);
+    if (density === "comfortable") element.removeAttribute("data-density");
+    else element.setAttribute("data-density", density);
+    return () => {
+      element.removeAttribute("data-theme");
+      element.removeAttribute("data-density");
+    };
+  }, [theme, density, target]);
+  const setTheme = useCallback(
+    (next) => {
+      const safe = parseThemePreference(next);
+      setThemeState(safe);
+      if (persist) writeCookie(THEME_COOKIE, safe);
+    },
+    [persist]
+  );
+  const setDensity = useCallback(
+    (next) => {
+      const safe = parseDensity(next);
+      setDensityState(safe);
+      if (persist) writeCookie(DENSITY_COOKIE, safe);
+    },
+    [persist]
+  );
+  const value = useMemo2(
+    () => ({ theme, resolvedTheme, setTheme, density, setDensity }),
+    [theme, resolvedTheme, setTheme, density, setDensity]
+  );
+  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = useContext2(ThemeContext);
+  if (!context) throw new Error("useTheme must be used within a <ThemeProvider>");
+  return context;
+}
+export {
+  LocaleProvider,
+  ThemeProvider,
+  useLocale,
+  useTheme
+};

package/dist/responsive-YJBnvsjt.d.ts

@@ -0,0 +1,69 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/** A gap step (Tailwind's 4px scale), or `density` to follow the `data-density` token. */
+declare const GAP_CLASSES: {
+    readonly 0: "gap-0";
+    readonly 1: "gap-1";
+    readonly 2: "gap-2";
+    readonly 3: "gap-3";
+    readonly 4: "gap-4";
+    readonly 5: "gap-5";
+    readonly 6: "gap-6";
+    readonly 8: "gap-8";
+    readonly 10: "gap-10";
+    readonly 12: "gap-12";
+    readonly density: "gap-(--density-gap)";
+};
+type Gap = keyof typeof GAP_CLASSES;
+declare const ALIGN_ITEMS_CLASSES: {
+    readonly start: "items-start";
+    readonly center: "items-center";
+    readonly end: "items-end";
+    readonly stretch: "items-stretch";
+    readonly baseline: "items-baseline";
+};
+type AlignItems = keyof typeof ALIGN_ITEMS_CLASSES;
+declare const JUSTIFY_CONTENT_CLASSES: {
+    readonly start: "justify-start";
+    readonly center: "justify-center";
+    readonly end: "justify-end";
+    readonly between: "justify-between";
+    readonly around: "justify-around";
+    readonly evenly: "justify-evenly";
+};
+type JustifyContent = keyof typeof JUSTIFY_CONTENT_CLASSES;
+declare const JUSTIFY_ITEMS_CLASSES: {
+    readonly start: "justify-items-start";
+    readonly center: "justify-items-center";
+    readonly end: "justify-items-end";
+    readonly stretch: "justify-items-stretch";
+};
+type JustifyItems = keyof typeof JUSTIFY_ITEMS_CLASSES;
+/** Elements a layout box may render as. */
+type LayoutElement = "div" | "section" | "article" | "aside" | "nav" | "header" | "footer" | "main" | "ul" | "ol" | "form" | "fieldset";
+
+declare const CONTAINER_SIZE_CLASSES: {
+    readonly sm: "max-w-2xl";
+    readonly md: "max-w-4xl";
+    readonly lg: "max-w-6xl";
+    readonly xl: "max-w-7xl";
+    readonly "2xl": "max-w-[96rem]";
+    readonly full: "max-w-none";
+};
+type ContainerSize = keyof typeof CONTAINER_SIZE_CLASSES;
+interface ContainerProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The widest the content gets (42, 56, 72, 80, 96rem); `full` removes the limit. Default `lg`. */
+    size?: ContainerSize;
+    /** Horizontal padding that grows with the screen. Default true. */
+    gutters?: boolean;
+    as?: LayoutElement;
+    children?: ReactNode;
+}
+/** Centres content and limits its width. Server-safe. */
+declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLElement>>;
+
+declare const BREAKPOINTS: readonly ["base", "sm", "md", "lg", "xl", "2xl"];
+type Breakpoint = (typeof BREAKPOINTS)[number];
+
+export { type AlignItems as A, type Breakpoint as B, Container as C, type Gap as G, type JustifyItems as J, type LayoutElement as L, type JustifyContent as a, type ContainerProps as b, type ContainerSize as c };

package/dist/scroll-area.d.ts

@@ -0,0 +1,30 @@
+import { ForwardRefExoticComponent, Ref, ReactNode, ComponentPropsWithoutRef, RefAttributes } from 'react';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+
+interface ScrollAreaOwnProps {
+    /** Which scrollbars to show. Default `vertical`. */
+    orientation?: "vertical" | "horizontal" | "both";
+    /**
+     * `hover` (default) fades the scrollbar in on hover and while scrolling, like the desktop
+     * platforms; `always` keeps it visible.
+     */
+    scrollbar?: "always" | "hover";
+    /** Keep the scrollbars in the DOM even when nothing overflows, so layout never jumps. */
+    keepMounted?: boolean;
+    /** Classes for the scrollable viewport (padding, for example); `className` styles the root. */
+    viewportClassName?: string;
+    /** A ref to the scrollable element, to read or set the scroll position. */
+    viewportRef?: Ref<HTMLDivElement>;
+    className?: string;
+    children?: ReactNode;
+}
+/** A scrollable region is focusable, so it needs a name: a label or the id of a heading. */
+type Named = {
+    "aria-label": string;
+} | {
+    "aria-labelledby": string;
+};
+type ScrollAreaProps = ScrollAreaOwnProps & Named & Omit<ComponentPropsWithoutRef<typeof ScrollArea$1.Root>, keyof ScrollAreaOwnProps | "aria-label" | "aria-labelledby">;
+declare const ScrollArea: ForwardRefExoticComponent<ScrollAreaProps & RefAttributes<HTMLDivElement>>;
+
+export { ScrollArea, type ScrollAreaOwnProps, type ScrollAreaProps };

package/dist/scroll-area.js

@@ -0,0 +1,80 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/scroll-area/scroll-area.tsx
+import {
+  forwardRef
+} from "react";
+
+// src/primitives/scroll-area.ts
+import { ScrollArea } from "@base-ui/react/scroll-area";
+
+// src/components/scroll-area/scroll-area.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Scrollbar({
+  orientation,
+  always,
+  keepMounted
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollArea.Scrollbar,
+    {
+      orientation,
+      keepMounted,
+      className: cn(
+        "flex touch-none select-none p-px transition-opacity duration-(--motion-duration-fast) ease-standard",
+        orientation === "vertical" ? "h-full w-2.5" : "h-2.5 flex-col",
+        !always && "opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100"
+      ),
+      children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-border" })
+    }
+  );
+}
+var ScrollAreaImpl = forwardRef(function ScrollArea2({
+  orientation = "vertical",
+  scrollbar = "hover",
+  keepMounted = false,
+  viewportClassName,
+  viewportRef,
+  className,
+  children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}, ref) {
+  const always = scrollbar === "always";
+  return /* @__PURE__ */ jsxs(
+    ScrollArea.Root,
+    {
+      ref,
+      className: cn("relative overflow-hidden rounded-md", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollArea.Viewport,
+          {
+            ref: viewportRef,
+            role: "region",
+            tabIndex: 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            className: cn(
+              "size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+              viewportClassName
+            ),
+            children: /* @__PURE__ */ jsx(ScrollArea.Content, { children })
+          }
+        ),
+        orientation !== "horizontal" && /* @__PURE__ */ jsx(Scrollbar, { orientation: "vertical", always, keepMounted }),
+        orientation !== "vertical" && /* @__PURE__ */ jsx(Scrollbar, { orientation: "horizontal", always, keepMounted }),
+        orientation === "both" && /* @__PURE__ */ jsx(ScrollArea.Corner, {})
+      ]
+    }
+  );
+});
+var ScrollArea3 = ScrollAreaImpl;
+export {
+  ScrollArea3 as ScrollArea
+};

package/dist/shared-Fkx-sjPt.d.ts

@@ -0,0 +1,15 @@
+type Side = "top" | "right" | "bottom" | "left" | "inline-start" | "inline-end";
+type Align = "start" | "center" | "end";
+/** Where a floating surface sits relative to its trigger. */
+interface PositionProps {
+    /** The side of the trigger to open on. It flips to the opposite side when there is no room. */
+    side?: Side;
+    /** Alignment along that side. */
+    align?: Align;
+    /** Gap between the trigger and the surface, in px. Default 6. */
+    sideOffset?: number;
+    /** Minimum distance kept from the viewport edge, in px. Default 8. */
+    collisionPadding?: number;
+}
+
+export type { Align as A, PositionProps as P, Side as S };

package/dist/spinner.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+interface SpinnerProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /**
+     * Accessible name. When set the spinner is announced as a status ("Loading customers");
+     * when omitted it is decorative and hidden from assistive technology (use that when the
+     * surrounding control already says it is busy, as `Button loading` does).
+     */
+    label?: string;
+}
+/**
+ * An indeterminate progress indicator. It keeps spinning under `prefers-reduced-motion`
+ * (`data-motion="essential"`) because a frozen spinner reads as a hung page.
+ */
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<SVGSVGElement>>;
+
+export { Spinner, type SpinnerProps };

package/dist/spinner.js

@@ -0,0 +1,39 @@
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/spinner/spinner.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Spinner = forwardRef(function Spinner2({ label, className, ...props }, ref) {
+  return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: decorative (aria-hidden) by default, or role="status" with an aria-label when `label` is set; both paths are covered by axe tests
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "data-motion": "essential",
+        className: cn("size-4 animate-spin", className),
+        ...label ? { role: "status", "aria-label": label } : { "aria-hidden": true },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "3" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M22 12a10 10 0 0 0-10-10",
+              stroke: "currentColor",
+              strokeWidth: "3",
+              strokeLinecap: "round"
+            }
+          )
+        ]
+      }
+    )
+  );
+});
+export {
+  Spinner
+};

package/dist/split-button.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ButtonProps } from '@base-ui/react/button';
+import { B as ButtonOwnProps } from './button-CYt2Zw3D.js';
+import 'class-variance-authority';
+import 'class-variance-authority/types';
+
+interface SplitButtonProps extends Omit<ButtonProps, "className" | "children" | "type" | "render" | "nativeButton"> {
+    /** The primary action's label. */
+    children: ReactNode;
+    /** The extra actions: `DropdownMenuItem`s (and groups, separators, and so on). */
+    menu: ReactNode;
+    /** Names the arrow button ("More save options"). Required: the arrow has no text. */
+    menuLabel: string;
+    variant?: ButtonOwnProps["variant"];
+    size?: "sm" | "md" | "lg";
+    /** Shows a spinner on the primary button and ignores it. The menu stays usable. */
+    loading?: boolean;
+    loadingText?: ReactNode;
+    startIcon?: ReactNode;
+    className?: string;
+}
+/**
+ * A primary action with a menu of related ones attached: "Save", and a menu with "Save as…".
+ *
+ * Keyboard: Tab visits the primary button, then the arrow button; Enter or Space on the primary
+ * runs it; ArrowDown, Enter or Space on the arrow opens the menu (see `DropdownMenu` for the keys
+ * inside it), and Escape closes it and returns focus to the arrow.
+ */
+declare const SplitButton: react.ForwardRefExoticComponent<Omit<SplitButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+export { SplitButton, type SplitButtonProps };

package/dist/split-button.js

@@ -0,0 +1,54 @@
+"use client";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger
+} from "./chunk-EFHRRLAW.js";
+import "./chunk-LZMX27IZ.js";
+import {
+  Icon
+} from "./chunk-XRZHP6BD.js";
+import {
+  IconButton
+} from "./chunk-CZJZYN54.js";
+import {
+  Button
+} from "./chunk-C2HKIPLQ.js";
+import {
+  joinedClasses
+} from "./chunk-EE4V6XMB.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/split-button/split-button.tsx
+import { ChevronDown } from "lucide-react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SplitButton = forwardRef(function SplitButton2({ children, menu, menuLabel, variant = "default", size = "md", disabled, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(joinedClasses("horizontal", true), className), children: [
+    /* @__PURE__ */ jsx(Button, { ref, variant, size, disabled, ...props, children }),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenuTrigger,
+        {
+          disabled,
+          render: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx(Icon, { icon: ChevronDown }),
+              label: menuLabel,
+              variant,
+              size,
+              className: cn(variant !== "outline" && "border-l border-l-background/30")
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: menu })
+    ] })
+  ] });
+});
+export {
+  SplitButton
+};

package/dist/stepper.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { OlHTMLAttributes, ReactNode } from 'react';
+
+type StepStatus = "complete" | "current" | "upcoming" | "error";
+interface StepperStep {
+    label: ReactNode;
+    description?: ReactNode;
+    /** Mark this step as failed. Otherwise the status follows `current`. */
+    status?: "error";
+}
+interface StepperProps extends Omit<OlHTMLAttributes<HTMLOListElement>, "children"> {
+    steps: readonly StepperStep[];
+    /** The index (0-based) of the step in progress. Below 0 nothing has started; past the end everything is done. */
+    current: number;
+    orientation?: "horizontal" | "vertical";
+    /** The list's name. Default "Progress". */
+    label?: string;
+    /** The words spoken for each state, for translation. */
+    statusLabels?: Partial<Record<StepStatus, string>>;
+}
+/**
+ * Where someone is in a fixed sequence of steps. It is a status display, not navigation: steps are not
+ * links. Each state is also said in text (screen-reader only), never by colour alone. Server-safe.
+ */
+declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLOListElement>>;
+
+export { type StepStatus, Stepper, type StepperProps, type StepperStep };