@arbol-ai/ui 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+Every version published to npm has a section here, which its GitHub release repeats. The format follows
+[Keep a Changelog](https://keepachangelog.com) and versions follow [Semantic Versioning](https://semver.org).
+
+## 0.1.0 (2026-11-06)
+
+- First release: the components Raíz, Agenda and Account share, their theme, Spanish and English strings,
+  the `arbol-ui` agent skill and the documentation site.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arbol
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,99 @@
-# Temporary Holding Version
+# @arbol-ai/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Accessible React components for building dashboards fast: [React Aria Components](https://react-aria.adobe.com)
+styled with [Tailwind CSS v4](https://tailwindcss.com), with a token-based theme (light, dark, brand and
+mono), every built-in string in Spanish and English, and an agent skill that teaches coding agents how to
+assemble pages with it. It is the shared UI of [Arbol](https://www.getarbol.com)'s Raíz, Agenda and Account
+dashboards, and it is open source under the MIT license.
+
+- **Accessible by construction**: keyboard, screen readers, focus management and touch come from React Aria.
+- **Localized**: the library's own strings ship in `es` and `en`, follow your app's locale and can be
+  replaced with your own translation functions (Paraglide, i18next).
+- **Router-agnostic**: every `href` routes through your router via one provider.
+- **Dashboard-ready**: data tables on TanStack Table, filters, pagination, stats, charts on ECharts, forms on
+  TanStack Form, overlays with an unsaved-changes guard, an app shell and settings pages.
+- **Documented**: JSDoc on every export, a live documentation site, and a skill for agents in `skills/`.
+
+## Install
+
+```bash
+bun add @arbol-ai/ui react-aria-components react-aria
+```
+
+Peers: React 19, `react-aria-components` 1.21+, `react-aria` 3.52+ and Tailwind CSS 4.1+. Optional:
+`echarts` 6 for `@arbol-ai/ui/charts`, `@tanstack/react-form` 1 for `@arbol-ai/ui/form`.
+
+## Set up
+
+1. Import the theme after Tailwind in your entry stylesheet:
+
+   ```css
+   @import 'tailwindcss';
+   @import '@arbol-ai/ui/theme.css';
+   ```
+
+2. Render `UIProvider` once at the root, with your locale and router:
+
+   ```tsx
+   import { UIProvider } from '@arbol-ai/ui';
+
+   <UIProvider locale="es-CO" navigate={(to, options) => router.navigate({ ...options, to })}>
+     <App />
+   </UIProvider>;
+   ```
+
+3. Use the components:
+
+   ```tsx
+   import { Button, PageContainer, PageHeader, PageTitle } from '@arbol-ai/ui';
+
+   <PageContainer>
+     <PageHeader>
+       <PageTitle>Contacts</PageTitle>
+       <Button onPress={openNewContact}>New contact</Button>
+     </PageHeader>
+   </PageContainer>;
+   ```
+
+Dark mode is the `dark` class on `<html>`; the grayscale appearance is `data-theme="mono"`. Fonts are not
+bundled: the theme names Arbol's faces, then the open Schibsted Grotesk and Martian Mono, then system fonts;
+override `--ui-font-sans`, `--ui-font-heading` and `--ui-font-mono` to use your own.
+
+## Text and languages
+
+App copy (titles, labels, descriptions) is always passed by your app through props and children, already
+translated. What a component says by itself ("Close", "Previous page", "1–15 of 120", "No results") ships in
+English and Latin American Spanish and follows `UIProvider locale`. Replace any of those strings with your own
+translation functions:
+
+```tsx
+<UIProvider locale={locale} messages={{ 'overlay.close': m.ui_close, 'pagination.range': m.ui_pagination_range }}>
+```
+
+## Documentation
+
+- The documentation site (`bun run dev`) shows every component live, in both languages and themes.
+- Every export has JSDoc with an example, so your editor documents it too.
+- Coding agents: link the published skill into your project (`node_modules/@arbol-ai/ui/skills/arbol-ui`)
+  under `.agents/skills/` or `.claude/skills/`.
+
+## Development
+
+The project uses the [Vite+](https://viteplus.dev) toolchain (`vp`): one `vite.config.ts` drives tests, lint,
+format, packaging and the commit hook.
+
+```bash
+bun install
+bunx vp dev site       # documentation site on http://localhost:5173
+bunx vp check          # format, type-aware lint and type check
+bunx vp test run       # browser tests in Chromium (add --coverage for the 80% floor)
+bunx vp pack           # build the package into dist/
+bun run verify         # everything above plus the site build and package checks
+```
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md). Releases: bump the version and add its CHANGELOG section in a pull
+request; after the merge, CI publishes the package to npm with provenance and deploys the site.
+
+## License
+
+[MIT](./LICENSE) © Arbol

package/dist/index.d.ts

@@ -0,0 +1,217 @@
+
+import { ButtonProps as ButtonProps$1, LinkProps, RouterConfig } from "react-aria-components";
+import { ReactNode, Ref } from "react";
+import { ClassValue } from "clsx";
+import { VariantProps } from "class-variance-authority";
+/**
+ * The library's own strings: the words a component renders by itself (a close button's label, a page
+ * range, a "no results" line). Everything else a component shows comes from the application, already
+ * translated, through props and children, so the library never needs to know the app's message system.
+ *
+ * Each component keeps its strings beside it (`pagination.messages.ts`, declared with
+ * {@link defineMessages}) and reads them with {@link useMessages}, in the locale React Aria's
+ * `I18nProvider` (or {@link UIProvider}) sets.
+ */
+/**
+ * The locales the library ships, as dictionary keys. A locale matches exactly, then by language, then
+ * falls back to English: `es-CO`, `es-MX` and `es` all read `es-419`; `fr-FR` reads `en-US`.
+ */
+export declare const SHIPPED_LOCALES: readonly ['en-US', 'es-419'];
+/** A locale the library ships translations for. */
+type ShippedLocale = (typeof SHIPPED_LOCALES)[number];
+/** The values a component passes to a message: counts as numbers, names as strings. */
+type MessageVariables = Record<string, string | number>;
+/** Locale-aware helpers every message function receives with its variables. */
+interface MessageHelpers {
+  /** The active locale (`es-CO`, `en-US`). */
+  locale: string;
+  /** Formats a number for the locale: `1234` is `1.234` in `es-CO`, `1,234` in `en-US`. */
+  number: (value: number) => string;
+  /**
+   * Picks the plural form for a count with the locale's rules, falling back to `other`.
+   *
+   * @example
+   * plural(count, { one: '1 contact', other: `${number(count)} contacts` })
+   */
+  plural: (count: number, forms: Partial<Record<Intl.LDMLPluralRule, string>> & {
+    other: string;
+  }) => string;
+}
+/**
+ * One message: a string, or a function of the variables its component passes that returns one.
+ *
+ * @example
+ * 'pagination.range': ({ first, last, total }, { number }) =>
+ *   `${number(Number(first))}–${number(Number(last))} of ${number(Number(total))}`
+ */
+type Message = string | ((variables: MessageVariables, helpers: MessageHelpers) => string);
+/** A component's dictionary: every shipped locale, each with the same keys. */
+type Messages<K extends string> = Record<ShippedLocale, Record<K, Message>>;
+/**
+ * Replacements for the library's strings, by message key, applied in whichever locale is active. A
+ * value is a string, or a function of the message's variables, so an app's own translation functions
+ * plug in directly: Paraglide's `m.ui_close`, or `(variables) => t('ui.close', variables)` with
+ * i18next. The variables keep the names Arbol's catalogs already use (`first`, `last`, `total`,
+ * `count`, `page`, `label`).
+ *
+ * @example
+ * { 'overlay.close': m.ui_close, 'pagination.range': m.ui_pagination_range }
+ */
+type MessageOverrides = Record<string, string | ((variables: MessageVariables) => string)>;
+/**
+ * Declares a component's dictionary. TypeScript checks that every shipped locale translates every key
+ * the English one has. Keys are namespaced by component (`pagination.next`) so that an override
+ * addresses one message unambiguously.
+ */
+export declare function defineMessages<K extends string>(messages: Messages<K>): Messages<K>;
+/** What {@link useMessages} returns. */
+interface MessageFormatter<K extends string> {
+  /** The message for a key in the active locale, with its variables filled in. */
+  format: (key: K, variables?: MessageVariables) => string;
+}
+/**
+ * Formats a component's strings in the current locale, with the application's overrides applied.
+ *
+ * @param messages - The component's dictionary, from {@link defineMessages}.
+ *
+ * @example
+ * const t = useMessages(paginationMessages);
+ * t.format('pagination.next'); // 'Next' or 'Siguiente'
+ */
+export declare function useMessages<K extends string>(messages: Messages<K>): MessageFormatter<K>;
+/** The path type React Aria's links take; an app narrows it by augmenting `RouterConfig`. */
+type Href = RouterConfig extends {
+  href: infer H;
+} ? H : string;
+/** The navigation options React Aria passes through; an app narrows them by augmenting `RouterConfig`. */
+type RouterOptions = RouterConfig extends {
+  routerOptions: infer O;
+} ? O : undefined;
+/** Props of {@link UIProvider}. */
+interface UIProviderProps {
+  /**
+   * The BCP 47 locale every component formats and speaks in (`es-CO`, `en-US`): dates and numbers,
+   * React Aria's built-in announcements, the library's own strings and the reading direction. Pass the
+   * locale of the app's message system (Paraglide's `getLocale()`, i18next's `i18n.language`).
+   * Defaults to the browser's language.
+   */
+  locale?: string;
+  /**
+   * Client-side navigation for every `href` the components render (links, menu items, tabs, rows).
+   * Pass the router's navigate; without it, an `href` is a full-page navigation.
+   *
+   * @example
+   * // TanStack Router
+   * navigate={(to, options) => router.navigate({ ...options, to })}
+   */
+  navigate?: (path: Href, routerOptions?: RouterOptions) => void;
+  /**
+   * Turns a router path into the URL the browser shows (needed when the router adds a base path).
+   *
+   * @example
+   * // TanStack Router
+   * useHref={(to) => router.buildLocation({ to }).href}
+   */
+  useHref?: (href: Href) => string;
+  /**
+   * Replacements for the library's own strings, by message key, in whichever locale is active; see
+   * {@link MessageOverrides}. Paraglide's `m.*` functions plug in directly.
+   *
+   * @example
+   * messages={{ 'overlay.close': m.ui_close, 'pagination.range': m.ui_pagination_range }}
+   */
+  messages?: MessageOverrides;
+  /** The application. */
+  children: ReactNode;
+}
+/**
+ * The root every Arbol UI application renders once, above everything else: it tells the components the
+ * locale (and with it, the language of their own strings), and how to navigate.
+ *
+ * @example
+ * import { getLocale } from './paraglide/runtime';
+ *
+ * <UIProvider locale={getLocale()} navigate={(to, options) => router.navigate({ ...options, to })}>
+ *   <App />
+ * </UIProvider>
+ */
+export declare const UIProvider: ({ locale, navigate, useHref, messages, children }: UIProviderProps) => import("react").JSX.Element;
+/**
+ * Joins class names and resolves Tailwind conflicts, the last class winning: `cn('px-2', 'px-4')` is
+ * `'px-4'`. Every component merges its own classes with the caller's `className` through it, so a
+ * caller can always override a component's styles.
+ *
+ * @example
+ * cn('rounded-field px-3', isCompact && 'px-2', className)
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Merges a component's classes with a React Aria `className`, which is a string or a function of the
+ * component's render props (`isPressed`, `isSelected`…). The caller's classes come last, so they win.
+ *
+ * @example
+ * <AriaButton className={composeTailwindRenderProps(props.className, 'rounded-field px-3')} />
+ */
+export declare function composeTailwindRenderProps<T>(className: string | ((values: T) => string) | undefined, classes: ClassValue): string | ((values: T) => string);
+/**
+ * The keyboard focus ring every focusable part shares: invisible for pointer users, a 2px ring in the
+ * `ring` token, offset from the background, for keyboard users (React Aria's `focus-visible`).
+ */
+export declare const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+/**
+ * The button styles, as a `cva` recipe, for anything that must look like a button: `Button`,
+ * `ButtonLink`, or a third-party trigger.
+ *
+ * - `variant`: `default` (the primary action, filled), `destructive` (filled red, for the irreversible
+ *   action itself), `outline` and `secondary` (the second action), `ghost` (toolbar and icon actions),
+ *   `link` (an action that reads as text).
+ * - `size`: `sm` (28px, toolbars and tables), `default` (32px), `lg` (40px), and the square `icon-sm`,
+ *   `icon` and `icon-lg`. On touch screens every size takes taps across at least 44px.
+ *
+ * @example
+ * <a className={buttonVariants({ variant: 'outline', size: 'sm' })} href="/export.csv">Export</a>
+ */
+export declare const buttonVariants: (props?: ({
+  variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+  size?: "default" | "icon" | "icon-lg" | "icon-sm" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The look of a button: its `variant` and `size` (see {@link buttonVariants}). */
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+/** Props of {@link Button}: React Aria's button props, the look, and the attributes React Aria drops. */
+interface ButtonProps extends Omit<ButtonProps$1, 'children'>, ButtonVariantProps {
+  /** The label, optionally with an icon before or after it. An icon-only button needs `aria-label`. */
+  children?: ReactNode;
+  /** The same as `isDisabled`, for code that uses the native attribute name. */
+  disabled?: boolean;
+  /** A native tooltip, for icon buttons that pair `aria-label` with a visible hint. */
+  title?: string;
+  /** The keyboard shortcut the button advertises to assistive technology, such as `Control+Enter`. */
+  'aria-keyshortcuts'?: string;
+  /** The underlying `<button>`. */
+  ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * A button: an action the user takes on this page. Built on React Aria's `Button`, so it is pressed
+ * the same way with a mouse, touch, the keyboard or a screen reader, and shows its focus ring only to
+ * keyboard users.
+ *
+ * `isPending` keeps the button focusable (so focus never jumps while a save runs), ignores presses,
+ * shows a spinner before the label and announces the busy state. Use `ButtonLink` for navigation.
+ *
+ * @example
+ * <Button onPress={save} isPending={isSaving}>Save changes</Button>
+ * <Button variant="ghost" size="icon" aria-label="Delete row"><TrashIcon /></Button>
+ */
+export declare const Button: ({ children, className, variant, size, disabled, isDisabled, isPending, title, 'aria-keyshortcuts': keyShortcuts, ref, ...props }: ButtonProps) => import("react").JSX.Element;
+/** Props of {@link ButtonLink}: React Aria's link props and the button look. */
+interface ButtonLinkProps extends LinkProps, ButtonVariantProps {}
+/**
+ * A link that looks like a button: navigation presented as an action ("New contact" opening a form
+ * page). With {@link UIProvider}'s `navigate`, an internal `href` navigates client-side.
+ *
+ * @example
+ * <ButtonLink href="/contacts/new">New contact</ButtonLink>
+ */
+export declare const ButtonLink: ({ className, variant, size, ...props }: ButtonLinkProps) => import("react").JSX.Element;
+export type { ButtonLinkProps, ButtonProps, ButtonVariantProps, Message, MessageFormatter, MessageHelpers, MessageOverrides, MessageVariables, Messages, ShippedLocale, UIProviderProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,239 @@
+'use client';
+import { Button as Button$1, I18nProvider, Link, RouterProvider, composeRenderProps, useLocale } from "react-aria-components";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+import { CircleNotchIcon } from "@phosphor-icons/react";
+import { cva } from "class-variance-authority";
+import { mergeRefs } from "react-aria";
+
+// src/i18n/messages.ts
+/**
+* The library's own strings: the words a component renders by itself (a close button's label, a page
+* range, a "no results" line). Everything else a component shows comes from the application, already
+* translated, through props and children, so the library never needs to know the app's message system.
+*
+* Each component keeps its strings beside it (`pagination.messages.ts`, declared with
+* {@link defineMessages}) and reads them with {@link useMessages}, in the locale React Aria's
+* `I18nProvider` (or {@link UIProvider}) sets.
+*/
+/**
+* The locales the library ships, as dictionary keys. A locale matches exactly, then by language, then
+* falls back to English: `es-CO`, `es-MX` and `es` all read `es-419`; `fr-FR` reads `en-US`.
+*/
+const SHIPPED_LOCALES = ["en-US", "es-419"];
+/**
+* Declares a component's dictionary. TypeScript checks that every shipped locale translates every key
+* the English one has. Keys are namespaced by component (`pagination.next`) so that an override
+* addresses one message unambiguously.
+*/
+function defineMessages(messages) {
+	return messages;
+}
+/** The overrides {@link UIProvider} passes down; `undefined` when the application sets none. */
+const MessageOverridesContext = createContext(void 0);
+/**
+* Formats a component's strings in the current locale, with the application's overrides applied.
+*
+* @param messages - The component's dictionary, from {@link defineMessages}.
+*
+* @example
+* const t = useMessages(paginationMessages);
+* t.format('pagination.next'); // 'Next' or 'Siguiente'
+*/
+function useMessages(messages) {
+	const { locale } = useLocale();
+	const overrides = useContext(MessageOverridesContext);
+	return useMemo(() => {
+		const strings = stringsForLocale(messages, locale);
+		const numberFormat = new Intl.NumberFormat(locale);
+		const pluralRules = new Intl.PluralRules(locale);
+		const helpers = {
+			locale,
+			number: (value) => numberFormat.format(value),
+			plural: (count, forms) => forms[pluralRules.select(count)] ?? forms.other
+		};
+		return { format(key, variables = {}) {
+			const override = overrides?.[key];
+			if (override !== void 0) return typeof override === "function" ? override(variables) : override;
+			const message = strings[key];
+			return typeof message === "function" ? message(variables, helpers) : message;
+		} };
+	}, [
+		messages,
+		locale,
+		overrides
+	]);
+}
+/** The shipped strings for a locale: the exact locale, then the same language, then English. */
+function stringsForLocale(messages, locale) {
+	const [language] = locale.split("-");
+	return messages[SHIPPED_LOCALES.find((candidate) => candidate === locale) ?? SHIPPED_LOCALES.find((candidate) => candidate.split("-")[0] === language) ?? "en-US"];
+}
+
+// src/provider/ui-provider.tsx
+/**
+* The root every Arbol UI application renders once, above everything else: it tells the components the
+* locale (and with it, the language of their own strings), and how to navigate.
+*
+* @example
+* import { getLocale } from './paraglide/runtime';
+*
+* <UIProvider locale={getLocale()} navigate={(to, options) => router.navigate({ ...options, to })}>
+*   <App />
+* </UIProvider>
+*/
+const UIProvider = ({ locale, navigate, useHref, messages, children }) => {
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale,
+		children: /* @__PURE__ */ jsx(MessageOverridesContext, {
+			value: messages,
+			children: navigate ? /* @__PURE__ */ jsx(RouterProvider, {
+				navigate,
+				useHref,
+				children
+			}) : children
+		})
+	});
+};
+
+// src/lib/class-names.ts
+/** tailwind-merge, taught the theme's own radius names so that `rounded-card` and `rounded-lg` conflict. */
+const twMerge = extendTailwindMerge({ extend: { theme: { radius: [
+	"field",
+	"menu",
+	"card",
+	"dialog"
+] } } });
+/**
+* Joins class names and resolves Tailwind conflicts, the last class winning: `cn('px-2', 'px-4')` is
+* `'px-4'`. Every component merges its own classes with the caller's `className` through it, so a
+* caller can always override a component's styles.
+*
+* @example
+* cn('rounded-field px-3', isCompact && 'px-2', className)
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+/**
+* Merges a component's classes with a React Aria `className`, which is a string or a function of the
+* component's render props (`isPressed`, `isSelected`…). The caller's classes come last, so they win.
+*
+* @example
+* <AriaButton className={composeTailwindRenderProps(props.className, 'rounded-field px-3')} />
+*/
+function composeTailwindRenderProps(className, classes) {
+	return composeRenderProps(className, (callerClassName) => cn(classes, callerClassName));
+}
+/**
+* The keyboard focus ring every focusable part shares: invisible for pointer users, a 2px ring in the
+* `ring` token, offset from the background, for keyboard users (React Aria's `focus-visible`).
+*/
+const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+
+// src/components/button/button.tsx
+/**
+* The button styles, as a `cva` recipe, for anything that must look like a button: `Button`,
+* `ButtonLink`, or a third-party trigger.
+*
+* - `variant`: `default` (the primary action, filled), `destructive` (filled red, for the irreversible
+*   action itself), `outline` and `secondary` (the second action), `ghost` (toolbar and icon actions),
+*   `link` (an action that reads as text).
+* - `size`: `sm` (28px, toolbars and tables), `default` (32px), `lg` (40px), and the square `icon-sm`,
+*   `icon` and `icon-lg`. On touch screens every size takes taps across at least 44px.
+*
+* @example
+* <a className={buttonVariants({ variant: 'outline', size: 'sm' })} href="/export.csv">Export</a>
+*/
+const buttonVariants = cva([
+	"rounded-field relative inline-flex cursor-pointer items-center justify-center gap-1.5 border border-transparent",
+	"touch-target text-sm font-medium whitespace-nowrap select-none",
+	"transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-150 ease-out",
+	"data-focus-visible:ring-offset-background outline-none data-focus-visible:ring-2 data-focus-visible:ring-offset-2",
+	"data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pending:cursor-wait",
+	"[&_svg]:size-4 [&_svg]:shrink-0"
+], {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground data-focus-visible:ring-ring data-hovered:bg-primary/90 shadow-sm data-pressed:scale-[0.98]",
+			destructive: "bg-destructive text-destructive-foreground data-focus-visible:ring-destructive/40 data-hovered:bg-destructive/90 shadow-sm data-pressed:scale-[0.98]",
+			outline: "border-border text-foreground data-focus-visible:ring-gray-a4 data-hovered:bg-accent data-pressed:bg-gray-a3 bg-transparent",
+			secondary: "border-border bg-accent text-foreground data-focus-visible:ring-gray-a4 data-hovered:bg-gray-a3 data-pressed:bg-gray-a4",
+			ghost: "text-muted-foreground data-focus-visible:ring-gray-a4 data-hovered:bg-accent data-hovered:text-foreground",
+			link: "text-muted-foreground data-focus-visible:text-foreground data-hovered:text-foreground underline-offset-4 data-focus-visible:underline data-hovered:underline"
+		},
+		size: {
+			sm: "h-7 px-2.5 text-xs",
+			default: "h-8 px-3",
+			lg: "h-10 px-5",
+			"icon-sm": "size-7",
+			icon: "size-8",
+			"icon-lg": "size-10"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/**
+* A button: an action the user takes on this page. Built on React Aria's `Button`, so it is pressed
+* the same way with a mouse, touch, the keyboard or a screen reader, and shows its focus ring only to
+* keyboard users.
+*
+* `isPending` keeps the button focusable (so focus never jumps while a save runs), ignores presses,
+* shows a spinner before the label and announces the busy state. Use `ButtonLink` for navigation.
+*
+* @example
+* <Button onPress={save} isPending={isSaving}>Save changes</Button>
+* <Button variant="ghost" size="icon" aria-label="Delete row"><TrashIcon /></Button>
+*/
+const Button = ({ children, className, variant, size, disabled, isDisabled, isPending, title, "aria-keyshortcuts": keyShortcuts, ref, ...props }) => {
+	const setDropped = useCallback((node) => {
+		if (node) {
+			setOrRemoveAttribute(node, "title", title);
+			setOrRemoveAttribute(node, "aria-keyshortcuts", keyShortcuts);
+		}
+	}, [title, keyShortcuts]);
+	const mergedRef = useMemo(() => mergeRefs(ref, setDropped), [ref, setDropped]);
+	return /* @__PURE__ */ jsxs(Button$1, {
+		...props,
+		className: composeTailwindRenderProps(className, buttonVariants({
+			variant,
+			size
+		})),
+		"data-slot": "button",
+		isDisabled: disabled ?? isDisabled,
+		isPending,
+		ref: mergedRef,
+		children: [isPending === true ? /* @__PURE__ */ jsx(CircleNotchIcon, {
+			"aria-hidden": true,
+			className: "motion-safe:animate-spin"
+		}) : null, children]
+	});
+};
+/**
+* A link that looks like a button: navigation presented as an action ("New contact" opening a form
+* page). With {@link UIProvider}'s `navigate`, an internal `href` navigates client-side.
+*
+* @example
+* <ButtonLink href="/contacts/new">New contact</ButtonLink>
+*/
+const ButtonLink = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsx(Link, {
+	...props,
+	className: composeTailwindRenderProps(className, buttonVariants({
+		variant,
+		size
+	})),
+	"data-slot": "button-link"
+});
+/** Sets an attribute when it has a value and removes it when it does not. */
+function setOrRemoveAttribute(node, name, value) {
+	if (value === void 0 || value === "") node.removeAttribute(name);
+	else node.setAttribute(name, value);
+}
+
+export { Button, ButtonLink, SHIPPED_LOCALES, UIProvider, buttonVariants, cn, composeTailwindRenderProps, defineMessages, focusRing, useMessages };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AriaButton","AriaLink"],"sources":["../src/i18n/messages.ts","../src/provider/ui-provider.tsx","../src/lib/class-names.ts","../src/components/button/button.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from 'react';\nimport { useLocale } from 'react-aria-components';\n\n/**\n * The library's own strings: the words a component renders by itself (a close button's label, a page\n * range, a \"no results\" line). Everything else a component shows comes from the application, already\n * translated, through props and children, so the library never needs to know the app's message system.\n *\n * Each component keeps its strings beside it (`pagination.messages.ts`, declared with\n * {@link defineMessages}) and reads them with {@link useMessages}, in the locale React Aria's\n * `I18nProvider` (or {@link UIProvider}) sets.\n */\n\n/**\n * The locales the library ships, as dictionary keys. A locale matches exactly, then by language, then\n * falls back to English: `es-CO`, `es-MX` and `es` all read `es-419`; `fr-FR` reads `en-US`.\n */\nexport const SHIPPED_LOCALES = ['en-US', 'es-419'] as const;\n\n/** A locale the library ships translations for. */\nexport type ShippedLocale = (typeof SHIPPED_LOCALES)[number];\n\n/** The values a component passes to a message: counts as numbers, names as strings. */\nexport type MessageVariables = Record<string, string | number>;\n\n/** Locale-aware helpers every message function receives with its variables. */\nexport interface MessageHelpers {\n  /** The active locale (`es-CO`, `en-US`). */\n  locale: string;\n  /** Formats a number for the locale: `1234` is `1.234` in `es-CO`, `1,234` in `en-US`. */\n  number: (value: number) => string;\n  /**\n   * Picks the plural form for a count with the locale's rules, falling back to `other`.\n   *\n   * @example\n   * plural(count, { one: '1 contact', other: `${number(count)} contacts` })\n   */\n  plural: (count: number, forms: Partial<Record<Intl.LDMLPluralRule, string>> & { other: string }) => string;\n}\n\n/**\n * One message: a string, or a function of the variables its component passes that returns one.\n *\n * @example\n * 'pagination.range': ({ first, last, total }, { number }) =>\n *   `${number(Number(first))}–${number(Number(last))} of ${number(Number(total))}`\n */\nexport type Message = string | ((variables: MessageVariables, helpers: MessageHelpers) => string);\n\n/** A component's dictionary: every shipped locale, each with the same keys. */\nexport type Messages<K extends string> = Record<ShippedLocale, Record<K, Message>>;\n\n/**\n * Replacements for the library's strings, by message key, applied in whichever locale is active. A\n * value is a string, or a function of the message's variables, so an app's own translation functions\n * plug in directly: Paraglide's `m.ui_close`, or `(variables) => t('ui.close', variables)` with\n * i18next. The variables keep the names Arbol's catalogs already use (`first`, `last`, `total`,\n * `count`, `page`, `label`).\n *\n * @example\n * { 'overlay.close': m.ui_close, 'pagination.range': m.ui_pagination_range }\n */\nexport type MessageOverrides = Record<string, string | ((variables: MessageVariables) => string)>;\n\n/**\n * Declares a component's dictionary. TypeScript checks that every shipped locale translates every key\n * the English one has. Keys are namespaced by component (`pagination.next`) so that an override\n * addresses one message unambiguously.\n */\nexport function defineMessages<K extends string>(messages: Messages<K>): Messages<K> {\n  return messages;\n}\n\n/** The overrides {@link UIProvider} passes down; `undefined` when the application sets none. */\nexport const MessageOverridesContext = createContext<MessageOverrides | undefined>(undefined);\n\n/** What {@link useMessages} returns. */\nexport interface MessageFormatter<K extends string> {\n  /** The message for a key in the active locale, with its variables filled in. */\n  format: (key: K, variables?: MessageVariables) => string;\n}\n\n/**\n * Formats a component's strings in the current locale, with the application's overrides applied.\n *\n * @param messages - The component's dictionary, from {@link defineMessages}.\n *\n * @example\n * const t = useMessages(paginationMessages);\n * t.format('pagination.next'); // 'Next' or 'Siguiente'\n */\nexport function useMessages<K extends string>(messages: Messages<K>): MessageFormatter<K> {\n  const { locale } = useLocale();\n  const overrides = useContext(MessageOverridesContext);\n  return useMemo(() => {\n    const strings = stringsForLocale(messages, locale);\n    const numberFormat = new Intl.NumberFormat(locale);\n    const pluralRules = new Intl.PluralRules(locale);\n    const helpers: MessageHelpers = {\n      locale,\n      number: (value) => numberFormat.format(value),\n      plural: (count, forms) => forms[pluralRules.select(count)] ?? forms.other,\n    };\n    return {\n      format(key, variables = {}) {\n        const override = overrides?.[key];\n        if (override !== undefined) {\n          // An app's function gets the variables only: Paraglide reads a second argument as options.\n          return typeof override === 'function' ? override(variables) : override;\n        }\n        const message: Message = strings[key];\n        return typeof message === 'function' ? message(variables, helpers) : message;\n      },\n    };\n  }, [messages, locale, overrides]);\n}\n\n/** The shipped strings for a locale: the exact locale, then the same language, then English. */\nfunction stringsForLocale<K extends string>(messages: Messages<K>, locale: string): Record<K, Message> {\n  const [language] = locale.split('-');\n  const shipped =\n    SHIPPED_LOCALES.find((candidate) => candidate === locale) ??\n    SHIPPED_LOCALES.find((candidate) => candidate.split('-')[0] === language) ??\n    'en-US';\n  return messages[shipped];\n}\n","import type { ReactNode } from 'react';\nimport { I18nProvider, RouterProvider } from 'react-aria-components';\nimport type { RouterConfig } from 'react-aria-components';\n\nimport { MessageOverridesContext } from '../i18n/messages';\nimport type { MessageOverrides } from '../i18n/messages';\n\n/** The path type React Aria's links take; an app narrows it by augmenting `RouterConfig`. */\ntype Href = RouterConfig extends { href: infer H } ? H : string;\n\n/** The navigation options React Aria passes through; an app narrows them by augmenting `RouterConfig`. */\ntype RouterOptions = RouterConfig extends { routerOptions: infer O } ? O : undefined;\n\n/** Props of {@link UIProvider}. */\nexport interface UIProviderProps {\n  /**\n   * The BCP 47 locale every component formats and speaks in (`es-CO`, `en-US`): dates and numbers,\n   * React Aria's built-in announcements, the library's own strings and the reading direction. Pass the\n   * locale of the app's message system (Paraglide's `getLocale()`, i18next's `i18n.language`).\n   * Defaults to the browser's language.\n   */\n  locale?: string;\n  /**\n   * Client-side navigation for every `href` the components render (links, menu items, tabs, rows).\n   * Pass the router's navigate; without it, an `href` is a full-page navigation.\n   *\n   * @example\n   * // TanStack Router\n   * navigate={(to, options) => router.navigate({ ...options, to })}\n   */\n  navigate?: (path: Href, routerOptions?: RouterOptions) => void;\n  /**\n   * Turns a router path into the URL the browser shows (needed when the router adds a base path).\n   *\n   * @example\n   * // TanStack Router\n   * useHref={(to) => router.buildLocation({ to }).href}\n   */\n  useHref?: (href: Href) => string;\n  /**\n   * Replacements for the library's own strings, by message key, in whichever locale is active; see\n   * {@link MessageOverrides}. Paraglide's `m.*` functions plug in directly.\n   *\n   * @example\n   * messages={{ 'overlay.close': m.ui_close, 'pagination.range': m.ui_pagination_range }}\n   */\n  messages?: MessageOverrides;\n  /** The application. */\n  children: ReactNode;\n}\n\n/**\n * The root every Arbol UI application renders once, above everything else: it tells the components the\n * locale (and with it, the language of their own strings), and how to navigate.\n *\n * @example\n * import { getLocale } from './paraglide/runtime';\n *\n * <UIProvider locale={getLocale()} navigate={(to, options) => router.navigate({ ...options, to })}>\n *   <App />\n * </UIProvider>\n */\nexport const UIProvider = ({ locale, navigate, useHref, messages, children }: UIProviderProps) => {\n  const routed = navigate ? (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      {children}\n    </RouterProvider>\n  ) : (\n    children\n  );\n  return (\n    <I18nProvider locale={locale}>\n      <MessageOverridesContext value={messages}>{routed}</MessageOverridesContext>\n    </I18nProvider>\n  );\n};\n","import { clsx } from 'clsx';\nimport type { ClassValue } from 'clsx';\nimport { composeRenderProps } from 'react-aria-components';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/** tailwind-merge, taught the theme's own radius names so that `rounded-card` and `rounded-lg` conflict. */\nconst twMerge = extendTailwindMerge({\n  extend: { theme: { radius: ['field', 'menu', 'card', 'dialog'] } },\n});\n\n/**\n * Joins class names and resolves Tailwind conflicts, the last class winning: `cn('px-2', 'px-4')` is\n * `'px-4'`. Every component merges its own classes with the caller's `className` through it, so a\n * caller can always override a component's styles.\n *\n * @example\n * cn('rounded-field px-3', isCompact && 'px-2', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * Merges a component's classes with a React Aria `className`, which is a string or a function of the\n * component's render props (`isPressed`, `isSelected`…). The caller's classes come last, so they win.\n *\n * @example\n * <AriaButton className={composeTailwindRenderProps(props.className, 'rounded-field px-3')} />\n */\nexport function composeTailwindRenderProps<T>(\n  className: string | ((values: T) => string) | undefined,\n  classes: ClassValue\n): string | ((values: T) => string) {\n  return composeRenderProps(className, (callerClassName) => cn(classes, callerClassName));\n}\n\n/**\n * The keyboard focus ring every focusable part shares: invisible for pointer users, a 2px ring in the\n * `ring` token, offset from the background, for keyboard users (React Aria's `focus-visible`).\n */\nexport const focusRing =\n  'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background';\n","import { CircleNotchIcon } from '@phosphor-icons/react';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { useCallback, useMemo } from 'react';\nimport type { ReactNode, Ref } from 'react';\nimport { mergeRefs } from 'react-aria';\nimport { Button as AriaButton, Link as AriaLink } from 'react-aria-components';\nimport type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from 'react-aria-components';\n\nimport { composeTailwindRenderProps } from '../../lib/class-names';\n\n/**\n * The button styles, as a `cva` recipe, for anything that must look like a button: `Button`,\n * `ButtonLink`, or a third-party trigger.\n *\n * - `variant`: `default` (the primary action, filled), `destructive` (filled red, for the irreversible\n *   action itself), `outline` and `secondary` (the second action), `ghost` (toolbar and icon actions),\n *   `link` (an action that reads as text).\n * - `size`: `sm` (28px, toolbars and tables), `default` (32px), `lg` (40px), and the square `icon-sm`,\n *   `icon` and `icon-lg`. On touch screens every size takes taps across at least 44px.\n *\n * @example\n * <a className={buttonVariants({ variant: 'outline', size: 'sm' })} href=\"/export.csv\">Export</a>\n */\nexport const buttonVariants = cva(\n  [\n    'rounded-field relative inline-flex cursor-pointer items-center justify-center gap-1.5 border border-transparent',\n    'touch-target text-sm font-medium whitespace-nowrap select-none',\n    'transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-150 ease-out',\n    'data-focus-visible:ring-offset-background outline-none data-focus-visible:ring-2 data-focus-visible:ring-offset-2',\n    'data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pending:cursor-wait',\n    '[&_svg]:size-4 [&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground data-focus-visible:ring-ring data-hovered:bg-primary/90 shadow-sm data-pressed:scale-[0.98]',\n        destructive:\n          'bg-destructive text-destructive-foreground data-focus-visible:ring-destructive/40 data-hovered:bg-destructive/90 shadow-sm data-pressed:scale-[0.98]',\n        outline:\n          'border-border text-foreground data-focus-visible:ring-gray-a4 data-hovered:bg-accent data-pressed:bg-gray-a3 bg-transparent',\n        secondary:\n          'border-border bg-accent text-foreground data-focus-visible:ring-gray-a4 data-hovered:bg-gray-a3 data-pressed:bg-gray-a4',\n        ghost:\n          'text-muted-foreground data-focus-visible:ring-gray-a4 data-hovered:bg-accent data-hovered:text-foreground',\n        link: 'text-muted-foreground data-focus-visible:text-foreground data-hovered:text-foreground underline-offset-4 data-focus-visible:underline data-hovered:underline',\n      },\n      size: {\n        sm: 'h-7 px-2.5 text-xs',\n        default: 'h-8 px-3',\n        lg: 'h-10 px-5',\n        'icon-sm': 'size-7',\n        icon: 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'default' },\n  }\n);\n\n/** The look of a button: its `variant` and `size` (see {@link buttonVariants}). */\nexport type ButtonVariantProps = VariantProps<typeof buttonVariants>;\n\n/** Props of {@link Button}: React Aria's button props, the look, and the attributes React Aria drops. */\nexport interface ButtonProps extends Omit<AriaButtonProps, 'children'>, ButtonVariantProps {\n  /** The label, optionally with an icon before or after it. An icon-only button needs `aria-label`. */\n  children?: ReactNode;\n  /** The same as `isDisabled`, for code that uses the native attribute name. */\n  disabled?: boolean;\n  /** A native tooltip, for icon buttons that pair `aria-label` with a visible hint. */\n  title?: string;\n  /** The keyboard shortcut the button advertises to assistive technology, such as `Control+Enter`. */\n  'aria-keyshortcuts'?: string;\n  /** The underlying `<button>`. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * A button: an action the user takes on this page. Built on React Aria's `Button`, so it is pressed\n * the same way with a mouse, touch, the keyboard or a screen reader, and shows its focus ring only to\n * keyboard users.\n *\n * `isPending` keeps the button focusable (so focus never jumps while a save runs), ignores presses,\n * shows a spinner before the label and announces the busy state. Use `ButtonLink` for navigation.\n *\n * @example\n * <Button onPress={save} isPending={isSaving}>Save changes</Button>\n * <Button variant=\"ghost\" size=\"icon\" aria-label=\"Delete row\"><TrashIcon /></Button>\n */\nexport const Button = ({\n  children,\n  className,\n  variant,\n  size,\n  disabled,\n  isDisabled,\n  isPending,\n  title,\n  'aria-keyshortcuts': keyShortcuts,\n  ref,\n  ...props\n}: ButtonProps) => {\n  // React Aria's button keeps only the attributes it knows: `title` and `aria-keyshortcuts` go on the\n  // element directly.\n  const setDropped = useCallback(\n    (node: HTMLButtonElement | null) => {\n      if (node) {\n        setOrRemoveAttribute(node, 'title', title);\n        setOrRemoveAttribute(node, 'aria-keyshortcuts', keyShortcuts);\n      }\n    },\n    [title, keyShortcuts]\n  );\n  const mergedRef = useMemo(() => mergeRefs(ref, setDropped), [ref, setDropped]);\n  return (\n    <AriaButton\n      {...props}\n      className={composeTailwindRenderProps(className, buttonVariants({ variant, size }))}\n      data-slot=\"button\"\n      isDisabled={disabled ?? isDisabled}\n      isPending={isPending}\n      ref={mergedRef}\n    >\n      {isPending === true ? <CircleNotchIcon aria-hidden className=\"motion-safe:animate-spin\" /> : null}\n      {children}\n    </AriaButton>\n  );\n};\n\n/** Props of {@link ButtonLink}: React Aria's link props and the button look. */\nexport interface ButtonLinkProps extends AriaLinkProps, ButtonVariantProps {}\n\n/**\n * A link that looks like a button: navigation presented as an action (\"New contact\" opening a form\n * page). With {@link UIProvider}'s `navigate`, an internal `href` navigates client-side.\n *\n * @example\n * <ButtonLink href=\"/contacts/new\">New contact</ButtonLink>\n */\nexport const ButtonLink = ({ className, variant, size, ...props }: ButtonLinkProps) => (\n  <AriaLink\n    {...props}\n    className={composeTailwindRenderProps(className, buttonVariants({ variant, size }))}\n    data-slot=\"button-link\"\n  />\n);\n\n/** Sets an attribute when it has a value and removes it when it does not. */\nfunction setOrRemoveAttribute(node: HTMLElement, name: string, value: string | undefined) {\n  if (value === undefined || value === '') {\n    node.removeAttribute(name);\n  } else {\n    node.setAttribute(name, value);\n  }\n}\n"],"mappings":"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"}