@x12i/ui 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 x12i
+
+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,80 @@
-# Temporary Holding Version
-
-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.
+# @x12i/ui
+
+React components for the Unified UI Kit, styled by kit tokens only.
+
+This is the starter set. The full catalog (about 100 components) is on the
+roadmap in the product spec.
+
+| Family | Components |
+| --- | --- |
+| Actions | `Button`, `IconButton` |
+| Feedback and status | `Badge`, `Spinner` |
+| Layout | `Stack`, `Inline`, `Divider` |
+| Utilities | `VisuallyHidden`, `ThemeProvider`, `DensityProvider` |
+
+## Install
+
+```sh
+pnpm add @x12i/ui @x12i/themes react react-dom
+```
+
+```css
+@import "@x12i/themes/themes.css";
+@import "@x12i/ui/styles.css";
+```
+
+```tsx
+import { Button, Stack, ThemeProvider } from "@x12i/ui";
+
+export function App() {
+  return (
+    <ThemeProvider scope="root">
+      <Stack gap="4">
+        <Button>Save</Button>
+        <Button variant="outline" tone="neutral">
+          Cancel
+        </Button>
+      </Stack>
+    </ThemeProvider>
+  );
+}
+```
+
+## Conventions
+
+- **Tokens only.** A lint rule and a test ban hard-coded colors, spacing and font
+  sizes in components and in `styles.css`.
+- **Zero specificity.** Every selector in `styles.css` sits inside `:where()`, so
+  your own classes always win.
+- **Styling hooks are data attributes**: `data-variant`, `data-tone`, `data-size`,
+  `data-loading`, `data-disabled`. Internal class names are not a public API.
+- **No user-facing strings.** Anything announced to assistive technology, such as
+  `Spinner`'s `label` or `IconButton`'s `label`, is passed in by the app.
+- **`asChild`** renders your element with the component's behavior and styling:
+  `<Button asChild><a href="/docs">Docs</a></Button>`.
+- **Density** follows `data-density`, so the same components fit compact tables
+  and comfortable forms.
+- **Logical CSS properties** keep right-to-left layouts working without a second
+  stylesheet.
+- **Server rendering.** The bundle is marked `"use client"`. Providers read
+  storage after mount, so server and client first renders agree.
+
+## Theme and density
+
+```tsx
+<ThemeProvider scope="root" defaultTheme="system">
+  <DensityProvider scope="root">{children}</DensityProvider>
+</ThemeProvider>
+```
+
+`scope="root"` sets the attribute on `<html>` and remembers the choice. The
+default `scope="subtree"` wraps its children, so one region can differ from the
+page. An explicit theme on a subtree paints its own surface.
+
+Pair a `root` provider with `getNoFlashScript()` from `@x12i/themes` to avoid a
+flash of the wrong theme on first paint.
+
+## Status
+
+`@x12i/ui` ships as an npm build today. Registry distribution (installing
+components as source with the CLI) is planned in the spec but not built yet.

package/dist/index.d.ts

@@ -0,0 +1,164 @@
+import * as react from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { DensityName, ThemeName } from '@x12i/tokens';
+
+type BadgeVariant = "soft" | "solid" | "outline";
+type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
+interface BadgeProps extends ComponentPropsWithRef<"span"> {
+    variant?: BadgeVariant;
+    /** Status tones use the same colors as charts, diagrams and report callouts. */
+    tone?: BadgeTone;
+    size?: "sm" | "md";
+}
+declare function Badge({ variant, tone, size, className, ...props }: BadgeProps): react.JSX.Element;
+
+/** Control sizes. Heights come from tokens and follow the density setting. */
+type ControlSize = "xs" | "sm" | "md" | "lg" | "xl";
+/** Keys of the space scale (`space.<key>`). Key N is N x 4px; `0-5` is 2px. */
+type SpaceKey = "0" | "0-5" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24";
+
+type ButtonVariant = "solid" | "soft" | "outline" | "ghost";
+type ButtonTone = "accent" | "neutral";
+interface ButtonProps extends ComponentPropsWithRef<"button"> {
+    /** Visual weight. `solid` is the primary action; use one per view. */
+    variant?: ButtonVariant;
+    /** `accent` marks the primary action and the finding; `neutral` stays grey. */
+    tone?: ButtonTone;
+    size?: ControlSize;
+    /**
+     * Shows a spinner and blocks activation while keeping focus and layout. The
+     * button stays focusable so keyboard users do not lose their place.
+     */
+    loading?: boolean;
+    /**
+     * Accessible name for the spinner, for example "Saving". Pass a translated
+     * string; components never contain user-facing text.
+     */
+    loadingLabel?: string;
+    /** Render the child element (for example an anchor) with button styling. */
+    asChild?: boolean;
+}
+declare function Button({ variant, tone, size, loading, loadingLabel, asChild, disabled, type, className, children, onClick, ref, ...props }: ButtonProps): react.JSX.Element;
+
+interface DividerProps extends Omit<ComponentPropsWithRef<"hr">, "children"> {
+    orientation?: "horizontal" | "vertical";
+    /**
+     * A decorative divider is hidden from assistive technology. Use it when the
+     * surrounding structure already separates the content.
+     */
+    decorative?: boolean;
+}
+/** A separator. Native `<hr>` already has the separator role, so no ARIA role is added. */
+declare function Divider({ orientation, decorative, className, ...props }: DividerProps): react.JSX.Element;
+
+interface IconButtonProps extends Omit<ButtonProps, "children" | "aria-label" | "aria-labelledby" | "asChild"> {
+    /**
+     * Accessible name. Required: an icon-only button without a name is a
+     * TypeScript error. Pass a translated string.
+     */
+    label: string;
+    /** The icon. It is hidden from assistive technology by the label. */
+    children: ReactNode;
+}
+declare function IconButton({ label, children, ...props }: IconButtonProps): react.JSX.Element;
+
+type Align = "start" | "center" | "end" | "stretch" | "baseline";
+type Justify = "start" | "center" | "end" | "between" | "around";
+interface FlexProps extends ComponentPropsWithRef<"div"> {
+    /** Space between children, from the space scale. */
+    gap?: SpaceKey;
+    align?: Align;
+    justify?: Justify;
+    wrap?: boolean;
+    /** Render the child element instead of a div. */
+    asChild?: boolean;
+}
+type StackProps = FlexProps;
+/** Lays children out in a column. */
+declare function Stack({ gap, ...props }: StackProps): react.JSX.Element;
+type InlineProps = FlexProps;
+/** Lays children out in a row, aligned to the center and wrapping by default. */
+declare function Inline({ gap, align, wrap, ...props }: InlineProps): react.JSX.Element;
+
+interface SpinnerProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    /** Icon size, from the icon size tokens. */
+    size?: "xs" | "sm" | "md" | "lg";
+    /**
+     * Accessible name, for example "Loading". When omitted the spinner is
+     * decorative and hidden from assistive technology. Strings are never baked
+     * into components, so pass a translated label.
+     */
+    label?: string;
+}
+declare function Spinner({ size, label, className, ref, ...props }: SpinnerProps): react.JSX.Element;
+
+interface VisuallyHiddenProps extends ComponentPropsWithRef<"span"> {
+    /** Render the child element instead of a span. */
+    asChild?: boolean;
+}
+/** Hides content visually but keeps it available to assistive technology. */
+declare function VisuallyHidden({ asChild, className, ...props }: VisuallyHiddenProps): react.JSX.Element;
+
+interface DensityContextValue {
+    density: DensityName;
+    setDensity: (density: DensityName) => void;
+}
+interface DensityProviderProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
+    children?: ReactNode;
+    /** Controlled density. */
+    density?: DensityName;
+    defaultDensity?: DensityName;
+    onDensityChange?: (density: DensityName) => void;
+    /**
+     * `root` sets `data-density` on `<html>` and renders no wrapper element.
+     * `subtree` (default) renders a wrapper that scopes the density to its children.
+     */
+    scope?: "root" | "subtree";
+    /**
+     * localStorage key that remembers the choice, or `null` for none. Defaults
+     * to the shared key for `root` and to none for `subtree`.
+     */
+    storageKey?: string | null;
+}
+/** Compact, default and comfortable density from one set of components. */
+declare function DensityProvider({ children, density: densityProp, defaultDensity, onDensityChange, scope, storageKey, className, ...props }: DensityProviderProps): react.JSX.Element;
+/** Reads and changes the density of the nearest `DensityProvider`. */
+declare function useDensity(): DensityContextValue;
+
+/** A theme name, or `system` to follow the operating system preference. */
+type ThemeChoice = ThemeName | "system";
+interface ThemeContextValue {
+    /** The user's choice, which can be `system`. */
+    theme: ThemeChoice;
+    /** The theme in effect. `system` resolves to `light` or `dark`. */
+    resolvedTheme: ThemeName;
+    setTheme: (theme: ThemeChoice) => void;
+}
+interface ThemeProviderProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
+    children?: ReactNode;
+    /** Controlled theme. */
+    theme?: ThemeChoice;
+    /** Initial theme when uncontrolled. Defaults to following the system. */
+    defaultTheme?: ThemeChoice;
+    onThemeChange?: (theme: ThemeChoice) => void;
+    /**
+     * `root` sets `data-theme` on `<html>` and renders no wrapper element.
+     * `subtree` (default) renders a wrapper that scopes the theme to its children.
+     */
+    scope?: "root" | "subtree";
+    /**
+     * localStorage key that remembers the choice, or `null` for none. Defaults
+     * to the shared key for `root` and to none for `subtree`.
+     */
+    storageKey?: string | null;
+}
+/**
+ * Sets the theme for the page or for a subtree. Pair a `root` provider with
+ * `getNoFlashScript()` from `@x12i/themes` to avoid a flash on first paint.
+ */
+declare function ThemeProvider({ children, theme: themeProp, defaultTheme, onThemeChange, scope, storageKey, className, ...props }: ThemeProviderProps): react.JSX.Element;
+/** Reads and changes the theme of the nearest `ThemeProvider`. */
+declare function useTheme(): ThemeContextValue;
+
+export { Badge, Button, DensityProvider, Divider, IconButton, Inline, Spinner, Stack, ThemeProvider, VisuallyHidden, useDensity, useTheme };
+export type { Align, BadgeProps, BadgeTone, BadgeVariant, ButtonProps, ButtonTone, ButtonVariant, ControlSize, DensityContextValue, DensityProviderProps, DividerProps, IconButtonProps, InlineProps, Justify, SpaceKey, SpinnerProps, StackProps, ThemeChoice, ThemeContextValue, ThemeProviderProps, VisuallyHiddenProps };

package/dist/index.js

@@ -0,0 +1,426 @@
+"use client";
+
+// src/utils/cx.ts
+function cx(...values) {
+  const joined = values.filter(Boolean).join(" ");
+  return joined === "" ? void 0 : joined;
+}
+
+// src/components/badge.tsx
+import { jsx } from "react/jsx-runtime";
+function Badge({
+  variant = "soft",
+  tone = "neutral",
+  size = "md",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-kit": "badge",
+      "data-variant": variant,
+      "data-tone": tone,
+      "data-size": size,
+      className: cx(className),
+      ...props
+    }
+  );
+}
+
+// src/utils/slot.tsx
+import {
+  cloneElement,
+  isValidElement
+} from "react";
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+}
+function mergeProps(slotProps, childProps) {
+  const merged = { ...slotProps, ...childProps };
+  for (const key of Object.keys(slotProps)) {
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    if (/^on[A-Z]/.test(key) && typeof slotValue === "function" && typeof childValue === "function") {
+      merged[key] = (...args) => {
+        childValue(...args);
+        slotValue(...args);
+      };
+    } else if (key === "style") {
+      merged[key] = { ...slotValue, ...childValue };
+    } else if (key === "className") {
+      merged[key] = cx(slotValue, childValue);
+    }
+  }
+  return merged;
+}
+function Slot({ children, ref, ...slotProps }) {
+  if (!isValidElement(children)) return null;
+  const child = children;
+  const { ref: childRef, ...childProps } = child.props;
+  return cloneElement(child, {
+    ...mergeProps(slotProps, childProps),
+    ref: composeRefs(ref, childRef)
+  });
+}
+
+// src/components/visually-hidden.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function VisuallyHidden({ asChild = false, className, ...props }) {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx2(Component, { "data-kit": "visually-hidden", className: cx(className), ...props });
+}
+
+// src/components/spinner.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Spinner({ size = "md", label, className, ref, ...props }) {
+  const decorative = label === void 0;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      "data-kit": "spinner",
+      "data-size": size,
+      role: decorative ? void 0 : "status",
+      "aria-hidden": decorative ? true : void 0,
+      className: cx(className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("svg", { "data-kit-slot": "spinner-graphic", viewBox: "0 0 24 24", focusable: "false", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx3("circle", { "data-kit-slot": "spinner-track", cx: "12", cy: "12", r: "9", fill: "none" }),
+          /* @__PURE__ */ jsx3("circle", { "data-kit-slot": "spinner-arc", cx: "12", cy: "12", r: "9", fill: "none" })
+        ] }),
+        decorative ? null : /* @__PURE__ */ jsx3(VisuallyHidden, { children: label })
+      ]
+    }
+  );
+}
+
+// src/components/button.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Button({
+  variant = "solid",
+  tone = "accent",
+  size = "md",
+  loading = false,
+  loadingLabel,
+  asChild = false,
+  disabled = false,
+  type,
+  className,
+  children,
+  onClick,
+  ref,
+  ...props
+}) {
+  const inactive = disabled || loading;
+  const handleClick = (event) => {
+    if (inactive) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+  };
+  const shared = {
+    ref,
+    "data-kit": "button",
+    "data-variant": variant,
+    "data-tone": tone,
+    "data-size": size,
+    "data-loading": loading ? "" : void 0,
+    "data-disabled": inactive ? "" : void 0,
+    "aria-busy": loading ? true : void 0,
+    className: cx(className),
+    onClick: handleClick,
+    ...props
+  };
+  if (asChild) {
+    return /* @__PURE__ */ jsx4(Slot, { ...shared, "aria-disabled": inactive ? true : void 0, children });
+  }
+  const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4("span", { "data-kit-slot": "content", children }),
+    loading ? /* @__PURE__ */ jsx4("span", { "data-kit-slot": "spinner", children: /* @__PURE__ */ jsx4(Spinner, { size: "sm", ...loadingLabel === void 0 ? {} : { label: loadingLabel } }) }) : null
+  ] });
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      ...shared,
+      type: type ?? "button",
+      disabled,
+      "aria-disabled": loading && !disabled ? true : void 0,
+      children: content
+    }
+  );
+}
+
+// src/components/divider.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Divider({
+  orientation = "horizontal",
+  decorative = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "hr",
+    {
+      "data-kit": "divider",
+      "data-orientation": orientation,
+      role: decorative ? "presentation" : void 0,
+      "aria-orientation": !decorative && orientation === "vertical" ? "vertical" : void 0,
+      className: cx(className),
+      ...props
+    }
+  );
+}
+
+// src/components/icon-button.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function IconButton({ label, children, ...props }) {
+  return /* @__PURE__ */ jsx6(Button, { ...props, "aria-label": label, "data-icon-only": "", children });
+}
+
+// src/components/stack.tsx
+import { cssVar } from "@x12i/tokens";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Flex({
+  kind,
+  gap,
+  align,
+  justify,
+  wrap,
+  asChild = false,
+  className,
+  style,
+  ...props
+}) {
+  const Component = asChild ? Slot : "div";
+  const gapStyle = gap === void 0 ? void 0 : { gap: cssVar(`space.${gap}`) };
+  return /* @__PURE__ */ jsx7(
+    Component,
+    {
+      "data-kit": kind,
+      "data-align": align,
+      "data-justify": justify,
+      "data-wrap": wrap ? "" : void 0,
+      className: cx(className),
+      style: { ...gapStyle, ...style },
+      ...props
+    }
+  );
+}
+function Stack({ gap = "3", ...props }) {
+  return /* @__PURE__ */ jsx7(Flex, { kind: "stack", gap, ...props });
+}
+function Inline({ gap = "2", align = "center", wrap = true, ...props }) {
+  return /* @__PURE__ */ jsx7(Flex, { kind: "inline", gap, align, wrap, ...props });
+}
+
+// src/providers/density-provider.tsx
+import {
+  DENSITY_ATTRIBUTE,
+  DENSITY_STORAGE_KEY,
+  densityNames
+} from "@x12i/tokens";
+import {
+  createContext,
+  useContext,
+  useEffect as useEffect2,
+  useMemo
+} from "react";
+
+// src/utils/use-persisted-choice.ts
+import { useCallback, useEffect, useState } from "react";
+function read(key) {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function write(key, value) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function usePersistedChoice({
+  value: controlled,
+  defaultValue,
+  onChange,
+  storageKey,
+  isValid
+}) {
+  const isControlled = controlled !== void 0;
+  const [internal, setInternal] = useState(defaultValue);
+  useEffect(() => {
+    if (isControlled || storageKey === null) return;
+    const stored = read(storageKey);
+    if (stored !== null && isValid(stored)) setInternal(stored);
+  }, [isControlled, storageKey, isValid]);
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      if (storageKey !== null) write(storageKey, next);
+      onChange?.(next);
+    },
+    [isControlled, storageKey, onChange]
+  );
+  return [isControlled ? controlled : internal, setValue];
+}
+
+// src/providers/density-provider.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var DensityContext = createContext(null);
+function isDensity(value) {
+  return densityNames.includes(value);
+}
+function DensityProvider({
+  children,
+  density: densityProp,
+  defaultDensity = "default",
+  onDensityChange,
+  scope = "subtree",
+  storageKey,
+  className,
+  ...props
+}) {
+  const [density, setDensity] = usePersistedChoice({
+    value: densityProp,
+    defaultValue: defaultDensity,
+    onChange: onDensityChange,
+    storageKey: storageKey === void 0 ? scope === "root" ? DENSITY_STORAGE_KEY : null : storageKey,
+    isValid: isDensity
+  });
+  useEffect2(() => {
+    if (scope !== "root") return;
+    const root = document.documentElement;
+    const previous = root.getAttribute(DENSITY_ATTRIBUTE);
+    root.setAttribute(DENSITY_ATTRIBUTE, density);
+    return () => {
+      if (previous === null) root.removeAttribute(DENSITY_ATTRIBUTE);
+      else root.setAttribute(DENSITY_ATTRIBUTE, previous);
+    };
+  }, [scope, density]);
+  const value = useMemo(
+    () => ({ density, setDensity }),
+    [density, setDensity]
+  );
+  return /* @__PURE__ */ jsx8(DensityContext, { value, children: scope === "root" ? children : /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-kit": "density-provider",
+      ...{ [DENSITY_ATTRIBUTE]: density },
+      className: cx(className),
+      ...props,
+      children
+    }
+  ) });
+}
+function useDensity() {
+  const context = useContext(DensityContext);
+  if (context === null) {
+    throw new Error("useDensity must be used inside a DensityProvider.");
+  }
+  return context;
+}
+
+// src/providers/theme-provider.tsx
+import {
+  THEME_ATTRIBUTE,
+  THEME_STORAGE_KEY,
+  themeNames
+} from "@x12i/tokens";
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useSyncExternalStore
+} from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ThemeContext = createContext2(null);
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+function subscribeToSystemTheme(onChange) {
+  const query = window.matchMedia(DARK_QUERY);
+  query.addEventListener("change", onChange);
+  return () => query.removeEventListener("change", onChange);
+}
+var prefersDark = () => window.matchMedia(DARK_QUERY).matches;
+var serverPrefersDark = () => false;
+function isThemeChoice(value) {
+  return value === "system" || themeNames.includes(value);
+}
+function ThemeProvider({
+  children,
+  theme: themeProp,
+  defaultTheme = "system",
+  onThemeChange,
+  scope = "subtree",
+  storageKey,
+  className,
+  ...props
+}) {
+  const [theme, setTheme] = usePersistedChoice({
+    value: themeProp,
+    defaultValue: defaultTheme,
+    onChange: onThemeChange,
+    storageKey: storageKey === void 0 ? scope === "root" ? THEME_STORAGE_KEY : null : storageKey,
+    isValid: isThemeChoice
+  });
+  const systemIsDark = useSyncExternalStore(subscribeToSystemTheme, prefersDark, serverPrefersDark);
+  const resolvedTheme = theme === "system" ? systemIsDark ? "dark" : "light" : theme;
+  const attribute = theme === "system" ? void 0 : theme;
+  useEffect3(() => {
+    if (scope !== "root") return;
+    const root = document.documentElement;
+    const previous = root.getAttribute(THEME_ATTRIBUTE);
+    if (attribute === void 0) root.removeAttribute(THEME_ATTRIBUTE);
+    else root.setAttribute(THEME_ATTRIBUTE, attribute);
+    return () => {
+      if (previous === null) root.removeAttribute(THEME_ATTRIBUTE);
+      else root.setAttribute(THEME_ATTRIBUTE, previous);
+    };
+  }, [scope, attribute]);
+  const value = useMemo2(
+    () => ({ theme, resolvedTheme, setTheme }),
+    [theme, resolvedTheme, setTheme]
+  );
+  return /* @__PURE__ */ jsx9(ThemeContext, { value, children: scope === "root" ? children : /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "data-kit": "theme-provider",
+      ...{ [THEME_ATTRIBUTE]: attribute },
+      className: cx(className),
+      ...props,
+      children
+    }
+  ) });
+}
+function useTheme() {
+  const context = useContext2(ThemeContext);
+  if (context === null) {
+    throw new Error("useTheme must be used inside a ThemeProvider.");
+  }
+  return context;
+}
+export {
+  Badge,
+  Button,
+  DensityProvider,
+  Divider,
+  IconButton,
+  Inline,
+  Spinner,
+  Stack,
+  ThemeProvider,
+  VisuallyHidden,
+  useDensity,
+  useTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cx.ts","../src/components/badge.tsx","../src/utils/slot.tsx","../src/components/visually-hidden.tsx","../src/components/spinner.tsx","../src/components/button.tsx","../src/components/divider.tsx","../src/components/icon-button.tsx","../src/components/stack.tsx","../src/providers/density-provider.tsx","../src/utils/use-persisted-choice.ts","../src/providers/theme-provider.tsx"],"sourcesContent":["/** Joins class names, skipping falsy values. */\r\nexport function cx(...values: Array<string | false | null | undefined>): string | undefined {\r\n  const joined = values.filter(Boolean).join(\" \");\r\n  return joined === \"\" ? undefined : joined;\r\n}\r\n","import type { ComponentPropsWithRef } from \"react\";\r\nimport { cx } from \"../utils/cx\";\r\n\r\nexport type BadgeVariant = \"soft\" | \"solid\" | \"outline\";\r\nexport type BadgeTone = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\" | \"info\";\r\n\r\nexport interface BadgeProps extends ComponentPropsWithRef<\"span\"> {\r\n  variant?: BadgeVariant;\r\n  /** Status tones use the same colors as charts, diagrams and report callouts. */\r\n  tone?: BadgeTone;\r\n  size?: \"sm\" | \"md\";\r\n}\r\n\r\nexport function Badge({\r\n  variant = \"soft\",\r\n  tone = \"neutral\",\r\n  size = \"md\",\r\n  className,\r\n  ...props\r\n}: BadgeProps) {\r\n  return (\r\n    <span\r\n      data-kit=\"badge\"\r\n      data-variant={variant}\r\n      data-tone={tone}\r\n      data-size={size}\r\n      className={cx(className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n","import {\r\n  cloneElement,\r\n  isValidElement,\r\n  type CSSProperties,\r\n  type ReactElement,\r\n  type ReactNode,\r\n  type Ref,\r\n} from \"react\";\r\nimport { cx } from \"./cx\";\r\n\r\ntype AnyProps = Record<string, unknown>;\r\n\r\nexport function composeRefs<T>(\r\n  ...refs: Array<Ref<T> | undefined>\r\n): (node: T | null) => void {\r\n  return (node) => {\r\n    for (const ref of refs) {\r\n      if (typeof ref === \"function\") ref(node);\r\n      else if (ref) (ref as { current: T | null }).current = node;\r\n    }\r\n  };\r\n}\r\n\r\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps): AnyProps {\r\n  const merged: AnyProps = { ...slotProps, ...childProps };\r\n\r\n  for (const key of Object.keys(slotProps)) {\r\n    const slotValue = slotProps[key];\r\n    const childValue = childProps[key];\r\n\r\n    if (/^on[A-Z]/.test(key) && typeof slotValue === \"function\" && typeof childValue === \"function\") {\r\n      merged[key] = (...args: unknown[]) => {\r\n        childValue(...args);\r\n        slotValue(...args);\r\n      };\r\n    } else if (key === \"style\") {\r\n      merged[key] = { ...(slotValue as CSSProperties), ...(childValue as CSSProperties) };\r\n    } else if (key === \"className\") {\r\n      merged[key] = cx(slotValue as string, childValue as string);\r\n    }\r\n  }\r\n\r\n  return merged;\r\n}\r\n\r\n// The slot forwards a ref for whatever element its child turns out to be.\r\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\r\ntype AnyRef = Ref<any>;\r\n\r\nexport interface SlotProps {\r\n  children?: ReactNode;\r\n  ref?: AnyRef;\r\n  [prop: string]: unknown;\r\n}\r\n\r\n/**\r\n * Renders its single child element with the slot's props merged in. This is how\r\n * `asChild` composition works: `<Button asChild><a href=\"/x\">Go</a></Button>`\r\n * renders an anchor that looks and behaves like a button.\r\n */\r\nexport function Slot({ children, ref, ...slotProps }: SlotProps) {\r\n  if (!isValidElement(children)) return null;\r\n\r\n  const child = children as ReactElement<AnyProps & { ref?: AnyRef }>;\r\n  const { ref: childRef, ...childProps } = child.props;\r\n\r\n  return cloneElement(child, {\r\n    ...mergeProps(slotProps, childProps),\r\n    ref: composeRefs(ref, childRef),\r\n  });\r\n}\r\n","import type { ComponentPropsWithRef } from \"react\";\r\nimport { cx } from \"../utils/cx\";\r\nimport { Slot } from \"../utils/slot\";\r\n\r\nexport interface VisuallyHiddenProps extends ComponentPropsWithRef<\"span\"> {\r\n  /** Render the child element instead of a span. */\r\n  asChild?: boolean;\r\n}\r\n\r\n/** Hides content visually but keeps it available to assistive technology. */\r\nexport function VisuallyHidden({ asChild = false, className, ...props }: VisuallyHiddenProps) {\r\n  const Component = asChild ? Slot : \"span\";\r\n  return <Component data-kit=\"visually-hidden\" className={cx(className)} {...props} />;\r\n}\r\n","import type { ComponentPropsWithRef } from \"react\";\r\nimport { cx } from \"../utils/cx\";\r\nimport { VisuallyHidden } from \"./visually-hidden\";\r\n\r\nexport interface SpinnerProps extends Omit<ComponentPropsWithRef<\"span\">, \"children\"> {\r\n  /** Icon size, from the icon size tokens. */\r\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\r\n  /**\r\n   * Accessible name, for example \"Loading\". When omitted the spinner is\r\n   * decorative and hidden from assistive technology. Strings are never baked\r\n   * into components, so pass a translated label.\r\n   */\r\n  label?: string;\r\n}\r\n\r\nexport function Spinner({ size = \"md\", label, className, ref, ...props }: SpinnerProps) {\r\n  const decorative = label === undefined;\r\n\r\n  return (\r\n    <span\r\n      ref={ref}\r\n      data-kit=\"spinner\"\r\n      data-size={size}\r\n      role={decorative ? undefined : \"status\"}\r\n      aria-hidden={decorative ? true : undefined}\r\n      className={cx(className)}\r\n      {...props}\r\n    >\r\n      <svg data-kit-slot=\"spinner-graphic\" viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\r\n        <circle data-kit-slot=\"spinner-track\" cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" />\r\n        <circle data-kit-slot=\"spinner-arc\" cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" />\r\n      </svg>\r\n      {decorative ? null : <VisuallyHidden>{label}</VisuallyHidden>}\r\n    </span>\r\n  );\r\n}\r\n","import type { ComponentPropsWithRef, MouseEvent, ReactNode } from \"react\";\r\nimport type { ControlSize } from \"../types\";\r\nimport { cx } from \"../utils/cx\";\r\nimport { Slot } from \"../utils/slot\";\r\nimport { Spinner } from \"./spinner\";\r\n\r\nexport type ButtonVariant = \"solid\" | \"soft\" | \"outline\" | \"ghost\";\r\nexport type ButtonTone = \"accent\" | \"neutral\";\r\n\r\nexport interface ButtonProps extends ComponentPropsWithRef<\"button\"> {\r\n  /** Visual weight. `solid` is the primary action; use one per view. */\r\n  variant?: ButtonVariant;\r\n  /** `accent` marks the primary action and the finding; `neutral` stays grey. */\r\n  tone?: ButtonTone;\r\n  size?: ControlSize;\r\n  /**\r\n   * Shows a spinner and blocks activation while keeping focus and layout. The\r\n   * button stays focusable so keyboard users do not lose their place.\r\n   */\r\n  loading?: boolean;\r\n  /**\r\n   * Accessible name for the spinner, for example \"Saving\". Pass a translated\r\n   * string; components never contain user-facing text.\r\n   */\r\n  loadingLabel?: string;\r\n  /** Render the child element (for example an anchor) with button styling. */\r\n  asChild?: boolean;\r\n}\r\n\r\nexport function Button({\r\n  variant = \"solid\",\r\n  tone = \"accent\",\r\n  size = \"md\",\r\n  loading = false,\r\n  loadingLabel,\r\n  asChild = false,\r\n  disabled = false,\r\n  type,\r\n  className,\r\n  children,\r\n  onClick,\r\n  ref,\r\n  ...props\r\n}: ButtonProps) {\r\n  const inactive = disabled || loading;\r\n\r\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\r\n    if (inactive) {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n    onClick?.(event);\r\n  };\r\n\r\n  const shared = {\r\n    ref,\r\n    \"data-kit\": \"button\",\r\n    \"data-variant\": variant,\r\n    \"data-tone\": tone,\r\n    \"data-size\": size,\r\n    \"data-loading\": loading ? \"\" : undefined,\r\n    \"data-disabled\": inactive ? \"\" : undefined,\r\n    \"aria-busy\": loading ? true : undefined,\r\n    className: cx(className),\r\n    onClick: handleClick,\r\n    ...props,\r\n  } as const;\r\n\r\n  if (asChild) {\r\n    return (\r\n      <Slot {...shared} aria-disabled={inactive ? true : undefined}>\r\n        {children}\r\n      </Slot>\r\n    );\r\n  }\r\n\r\n  const content: ReactNode = (\r\n    <>\r\n      <span data-kit-slot=\"content\">{children}</span>\r\n      {loading ? (\r\n        <span data-kit-slot=\"spinner\">\r\n          <Spinner size=\"sm\" {...(loadingLabel === undefined ? {} : { label: loadingLabel })} />\r\n        </span>\r\n      ) : null}\r\n    </>\r\n  );\r\n\r\n  return (\r\n    <button\r\n      {...shared}\r\n      // A loading button stays focusable (aria-disabled); a disabled one is natively disabled.\r\n      type={type ?? \"button\"}\r\n      disabled={disabled}\r\n      aria-disabled={loading && !disabled ? true : undefined}\r\n    >\r\n      {content}\r\n    </button>\r\n  );\r\n}\r\n","import type { ComponentPropsWithRef } from \"react\";\r\nimport { cx } from \"../utils/cx\";\r\n\r\nexport interface DividerProps extends Omit<ComponentPropsWithRef<\"hr\">, \"children\"> {\r\n  orientation?: \"horizontal\" | \"vertical\";\r\n  /**\r\n   * A decorative divider is hidden from assistive technology. Use it when the\r\n   * surrounding structure already separates the content.\r\n   */\r\n  decorative?: boolean;\r\n}\r\n\r\n/** A separator. Native `<hr>` already has the separator role, so no ARIA role is added. */\r\nexport function Divider({\r\n  orientation = \"horizontal\",\r\n  decorative = false,\r\n  className,\r\n  ...props\r\n}: DividerProps) {\r\n  return (\r\n    <hr\r\n      data-kit=\"divider\"\r\n      data-orientation={orientation}\r\n      role={decorative ? \"presentation\" : undefined}\r\n      aria-orientation={!decorative && orientation === \"vertical\" ? \"vertical\" : undefined}\r\n      className={cx(className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n","import type { ReactNode } from \"react\";\r\nimport { Button, type ButtonProps } from \"./button\";\r\n\r\nexport interface IconButtonProps\r\n  extends Omit<ButtonProps, \"children\" | \"aria-label\" | \"aria-labelledby\" | \"asChild\"> {\r\n  /**\r\n   * Accessible name. Required: an icon-only button without a name is a\r\n   * TypeScript error. Pass a translated string.\r\n   */\r\n  label: string;\r\n  /** The icon. It is hidden from assistive technology by the label. */\r\n  children: ReactNode;\r\n}\r\n\r\nexport function IconButton({ label, children, ...props }: IconButtonProps) {\r\n  return (\r\n    <Button {...props} aria-label={label} data-icon-only=\"\">\r\n      {children}\r\n    </Button>\r\n  );\r\n}\r\n","import { cssVar } from \"@x12i/tokens\";\r\nimport type { ComponentPropsWithRef, CSSProperties } from \"react\";\r\nimport type { SpaceKey } from \"../types\";\r\nimport { cx } from \"../utils/cx\";\r\nimport { Slot } from \"../utils/slot\";\r\n\r\nexport type Align = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\r\nexport type Justify = \"start\" | \"center\" | \"end\" | \"between\" | \"around\";\r\n\r\ninterface FlexProps extends ComponentPropsWithRef<\"div\"> {\r\n  /** Space between children, from the space scale. */\r\n  gap?: SpaceKey;\r\n  align?: Align;\r\n  justify?: Justify;\r\n  wrap?: boolean;\r\n  /** Render the child element instead of a div. */\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Flex({\r\n  kind,\r\n  gap,\r\n  align,\r\n  justify,\r\n  wrap,\r\n  asChild = false,\r\n  className,\r\n  style,\r\n  ...props\r\n}: FlexProps & { kind: \"stack\" | \"inline\" }) {\r\n  const Component = asChild ? Slot : \"div\";\r\n  const gapStyle: CSSProperties | undefined =\r\n    gap === undefined ? undefined : { gap: cssVar(`space.${gap}`) };\r\n\r\n  return (\r\n    <Component\r\n      data-kit={kind}\r\n      data-align={align}\r\n      data-justify={justify}\r\n      data-wrap={wrap ? \"\" : undefined}\r\n      className={cx(className)}\r\n      style={{ ...gapStyle, ...style }}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport type StackProps = FlexProps;\r\n\r\n/** Lays children out in a column. */\r\nexport function Stack({ gap = \"3\", ...props }: StackProps) {\r\n  return <Flex kind=\"stack\" gap={gap} {...props} />;\r\n}\r\n\r\nexport type InlineProps = FlexProps;\r\n\r\n/** Lays children out in a row, aligned to the center and wrapping by default. */\r\nexport function Inline({ gap = \"2\", align = \"center\", wrap = true, ...props }: InlineProps) {\r\n  return <Flex kind=\"inline\" gap={gap} align={align} wrap={wrap} {...props} />;\r\n}\r\n","import {\r\n  DENSITY_ATTRIBUTE,\r\n  DENSITY_STORAGE_KEY,\r\n  densityNames,\r\n  type DensityName,\r\n} from \"@x12i/tokens\";\r\nimport {\r\n  createContext,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  type ComponentPropsWithRef,\r\n  type ReactNode,\r\n} from \"react\";\r\nimport { cx } from \"../utils/cx\";\r\nimport { usePersistedChoice } from \"../utils/use-persisted-choice\";\r\n\r\nexport interface DensityContextValue {\r\n  density: DensityName;\r\n  setDensity: (density: DensityName) => void;\r\n}\r\n\r\nconst DensityContext = createContext<DensityContextValue | null>(null);\r\n\r\nfunction isDensity(value: string): value is DensityName {\r\n  return (densityNames as readonly string[]).includes(value);\r\n}\r\n\r\nexport interface DensityProviderProps\r\n  extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"onChange\"> {\r\n  children?: ReactNode;\r\n  /** Controlled density. */\r\n  density?: DensityName;\r\n  defaultDensity?: DensityName;\r\n  onDensityChange?: (density: DensityName) => void;\r\n  /**\r\n   * `root` sets `data-density` on `<html>` and renders no wrapper element.\r\n   * `subtree` (default) renders a wrapper that scopes the density to its children.\r\n   */\r\n  scope?: \"root\" | \"subtree\";\r\n  /**\r\n   * localStorage key that remembers the choice, or `null` for none. Defaults\r\n   * to the shared key for `root` and to none for `subtree`.\r\n   */\r\n  storageKey?: string | null;\r\n}\r\n\r\n/** Compact, default and comfortable density from one set of components. */\r\nexport function DensityProvider({\r\n  children,\r\n  density: densityProp,\r\n  defaultDensity = \"default\",\r\n  onDensityChange,\r\n  scope = \"subtree\",\r\n  storageKey,\r\n  className,\r\n  ...props\r\n}: DensityProviderProps) {\r\n  const [density, setDensity] = usePersistedChoice<DensityName>({\r\n    value: densityProp,\r\n    defaultValue: defaultDensity,\r\n    onChange: onDensityChange,\r\n    storageKey:\r\n      storageKey === undefined ? (scope === \"root\" ? DENSITY_STORAGE_KEY : null) : storageKey,\r\n    isValid: isDensity,\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (scope !== \"root\") return;\r\n    const root = document.documentElement;\r\n    const previous = root.getAttribute(DENSITY_ATTRIBUTE);\r\n    root.setAttribute(DENSITY_ATTRIBUTE, density);\r\n    return () => {\r\n      if (previous === null) root.removeAttribute(DENSITY_ATTRIBUTE);\r\n      else root.setAttribute(DENSITY_ATTRIBUTE, previous);\r\n    };\r\n  }, [scope, density]);\r\n\r\n  const value = useMemo<DensityContextValue>(\r\n    () => ({ density, setDensity }),\r\n    [density, setDensity],\r\n  );\r\n\r\n  return (\r\n    <DensityContext value={value}>\r\n      {scope === \"root\" ? (\r\n        children\r\n      ) : (\r\n        <div\r\n          data-kit=\"density-provider\"\r\n          {...{ [DENSITY_ATTRIBUTE]: density }}\r\n          className={cx(className)}\r\n          {...props}\r\n        >\r\n          {children}\r\n        </div>\r\n      )}\r\n    </DensityContext>\r\n  );\r\n}\r\n\r\n/** Reads and changes the density of the nearest `DensityProvider`. */\r\nexport function useDensity(): DensityContextValue {\r\n  const context = useContext(DensityContext);\r\n  if (context === null) {\r\n    throw new Error(\"useDensity must be used inside a DensityProvider.\");\r\n  }\r\n  return context;\r\n}\r\n","import { useCallback, useEffect, useState } from \"react\";\r\n\r\nfunction read(key: string): string | null {\r\n  try {\r\n    return window.localStorage.getItem(key);\r\n  } catch {\r\n    return null;\r\n  }\r\n}\r\n\r\nfunction write(key: string, value: string) {\r\n  try {\r\n    window.localStorage.setItem(key, value);\r\n  } catch {\r\n    // Storage can be blocked (private mode, sandboxed frames). Ignore.\r\n  }\r\n}\r\n\r\ninterface Options<T extends string> {\r\n  value: T | undefined;\r\n  defaultValue: T;\r\n  onChange: ((value: T) => void) | undefined;\r\n  /** localStorage key, or null to skip persistence. */\r\n  storageKey: string | null;\r\n  /** Must be a stable function (declare it at module level). */\r\n  isValid: (value: string) => value is T;\r\n}\r\n\r\n/**\r\n * Controlled or uncontrolled state with optional persistence. The stored value\r\n * is read after mount, so server and first client render always agree.\r\n */\r\nexport function usePersistedChoice<T extends string>({\r\n  value: controlled,\r\n  defaultValue,\r\n  onChange,\r\n  storageKey,\r\n  isValid,\r\n}: Options<T>) {\r\n  const isControlled = controlled !== undefined;\r\n  const [internal, setInternal] = useState<T>(defaultValue);\r\n\r\n  useEffect(() => {\r\n    if (isControlled || storageKey === null) return;\r\n    const stored = read(storageKey);\r\n    if (stored !== null && isValid(stored)) setInternal(stored);\r\n  }, [isControlled, storageKey, isValid]);\r\n\r\n  const setValue = useCallback(\r\n    (next: T) => {\r\n      if (!isControlled) setInternal(next);\r\n      if (storageKey !== null) write(storageKey, next);\r\n      onChange?.(next);\r\n    },\r\n    [isControlled, storageKey, onChange],\r\n  );\r\n\r\n  return [isControlled ? controlled : internal, setValue] as const;\r\n}\r\n","import {\r\n  THEME_ATTRIBUTE,\r\n  THEME_STORAGE_KEY,\r\n  themeNames,\r\n  type ThemeName,\r\n} from \"@x12i/tokens\";\r\nimport {\r\n  createContext,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useSyncExternalStore,\r\n  type ComponentPropsWithRef,\r\n  type ReactNode,\r\n} from \"react\";\r\nimport { cx } from \"../utils/cx\";\r\nimport { usePersistedChoice } from \"../utils/use-persisted-choice\";\r\n\r\n/** A theme name, or `system` to follow the operating system preference. */\r\nexport type ThemeChoice = ThemeName | \"system\";\r\n\r\nexport interface ThemeContextValue {\r\n  /** The user's choice, which can be `system`. */\r\n  theme: ThemeChoice;\r\n  /** The theme in effect. `system` resolves to `light` or `dark`. */\r\n  resolvedTheme: ThemeName;\r\n  setTheme: (theme: ThemeChoice) => void;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\r\n\r\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\r\n\r\nfunction subscribeToSystemTheme(onChange: () => void) {\r\n  const query = window.matchMedia(DARK_QUERY);\r\n  query.addEventListener(\"change\", onChange);\r\n  return () => query.removeEventListener(\"change\", onChange);\r\n}\r\n\r\nconst prefersDark = () => window.matchMedia(DARK_QUERY).matches;\r\n// The server cannot know; light matches the CSS fallback.\r\nconst serverPrefersDark = () => false;\r\n\r\nfunction isThemeChoice(value: string): value is ThemeChoice {\r\n  return value === \"system\" || (themeNames as readonly string[]).includes(value);\r\n}\r\n\r\nexport interface ThemeProviderProps\r\n  extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"onChange\"> {\r\n  children?: ReactNode;\r\n  /** Controlled theme. */\r\n  theme?: ThemeChoice;\r\n  /** Initial theme when uncontrolled. Defaults to following the system. */\r\n  defaultTheme?: ThemeChoice;\r\n  onThemeChange?: (theme: ThemeChoice) => void;\r\n  /**\r\n   * `root` sets `data-theme` on `<html>` and renders no wrapper element.\r\n   * `subtree` (default) renders a wrapper that scopes the theme to its children.\r\n   */\r\n  scope?: \"root\" | \"subtree\";\r\n  /**\r\n   * localStorage key that remembers the choice, or `null` for none. Defaults\r\n   * to the shared key for `root` and to none for `subtree`.\r\n   */\r\n  storageKey?: string | null;\r\n}\r\n\r\n/**\r\n * Sets the theme for the page or for a subtree. Pair a `root` provider with\r\n * `getNoFlashScript()` from `@x12i/themes` to avoid a flash on first paint.\r\n */\r\nexport function ThemeProvider({\r\n  children,\r\n  theme: themeProp,\r\n  defaultTheme = \"system\",\r\n  onThemeChange,\r\n  scope = \"subtree\",\r\n  storageKey,\r\n  className,\r\n  ...props\r\n}: ThemeProviderProps) {\r\n  const [theme, setTheme] = usePersistedChoice<ThemeChoice>({\r\n    value: themeProp,\r\n    defaultValue: defaultTheme,\r\n    onChange: onThemeChange,\r\n    storageKey: storageKey === undefined ? (scope === \"root\" ? THEME_STORAGE_KEY : null) : storageKey,\r\n    isValid: isThemeChoice,\r\n  });\r\n\r\n  const systemIsDark = useSyncExternalStore(subscribeToSystemTheme, prefersDark, serverPrefersDark);\r\n  const resolvedTheme: ThemeName = theme === \"system\" ? (systemIsDark ? \"dark\" : \"light\") : theme;\r\n\r\n  // `system` leaves the attribute off so the CSS media query decides.\r\n  const attribute = theme === \"system\" ? undefined : theme;\r\n\r\n  useEffect(() => {\r\n    if (scope !== \"root\") return;\r\n    const root = document.documentElement;\r\n    const previous = root.getAttribute(THEME_ATTRIBUTE);\r\n    if (attribute === undefined) root.removeAttribute(THEME_ATTRIBUTE);\r\n    else root.setAttribute(THEME_ATTRIBUTE, attribute);\r\n    return () => {\r\n      if (previous === null) root.removeAttribute(THEME_ATTRIBUTE);\r\n      else root.setAttribute(THEME_ATTRIBUTE, previous);\r\n    };\r\n  }, [scope, attribute]);\r\n\r\n  const value = useMemo<ThemeContextValue>(\r\n    () => ({ theme, resolvedTheme, setTheme }),\r\n    [theme, resolvedTheme, setTheme],\r\n  );\r\n\r\n  return (\r\n    <ThemeContext value={value}>\r\n      {scope === \"root\" ? (\r\n        children\r\n      ) : (\r\n        <div\r\n          data-kit=\"theme-provider\"\r\n          {...{ [THEME_ATTRIBUTE]: attribute }}\r\n          className={cx(className)}\r\n          {...props}\r\n        >\r\n          {children}\r\n        </div>\r\n      )}\r\n    </ThemeContext>\r\n  );\r\n}\r\n\r\n/** Reads and changes the theme of the nearest `ThemeProvider`. */\r\nexport function useTheme(): ThemeContextValue {\r\n  const context = useContext(ThemeContext);\r\n  if (context === null) {\r\n    throw new Error(\"useTheme must be used inside a ThemeProvider.\");\r\n  }\r\n  return context;\r\n}\r\n"],"mappings":"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","names":["jsx","jsx","jsx","jsxs","jsx","jsx","jsx","useEffect","jsx","useEffect","createContext","useContext","useEffect","useMemo","jsx","createContext","useEffect","useMemo","useContext"]}

package/dist/styles.css

@@ -0,0 +1,480 @@
+/*
+ * @x12i/ui styles.
+ *
+ * Tokens only: no hard-coded colors, spacing or font sizes (a test enforces
+ * this). Requires the kit variables, for example:
+ *
+ *   @import "@x12i/themes/themes.css";
+ *   @import "@x12i/ui/styles.css";
+ *
+ * Every selector sits inside :where(), so it has zero specificity and any app
+ * class overrides it without a specificity fight. Components expose styling
+ * hooks as data attributes (data-variant, data-size, data-disabled, ...).
+ * Layout uses logical properties, so right-to-left works without extra CSS.
+ */
+
+/* ---------------------------------------------------------------- Button */
+
+:where([data-kit="button"]) {
+  /* Tone: accent (default) */
+  --_solid: var(--kit-color-accent-default);
+  --_solid-hover: var(--kit-color-accent-hover);
+  --_solid-active: var(--kit-color-accent-active);
+  --_on-solid: var(--kit-color-accent-on-accent);
+  --_text: var(--kit-color-text-link);
+  --_edge: var(--kit-color-accent-default);
+  --_subtle: var(--kit-color-accent-subtle);
+
+  /* Size: md (default) */
+  --_height: var(--kit-button-height-md);
+  --_pad: var(--kit-button-padding-inline-md);
+  --_font-size: var(--kit-text-label-size);
+  --_line-height: var(--kit-text-label-line-height);
+
+  /* Variant: solid (default) */
+  --_bg: var(--_solid);
+  --_bg-hover: var(--_solid-hover);
+  --_bg-active: var(--_solid-active);
+  --_fg: var(--_on-solid);
+  --_bd: transparent;
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kit-button-gap);
+  block-size: var(--_height);
+  min-block-size: var(--kit-size-target-min);
+  min-inline-size: var(--kit-size-target-min);
+  padding-block: 0;
+  padding-inline: var(--_pad);
+  margin: 0;
+  border: var(--kit-border-width-default) solid var(--_bd);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--_font-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: var(--_line-height);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--kit-duration-instant) var(--kit-easing-standard),
+    border-color var(--kit-duration-instant) var(--kit-easing-standard),
+    color var(--kit-duration-instant) var(--kit-easing-standard);
+}
+
+/* Tone */
+:where([data-kit="button"][data-tone="neutral"]) {
+  --_solid: var(--kit-color-bg-inverse);
+  --_solid-hover: color-mix(in srgb, var(--kit-color-bg-inverse) 88%, var(--kit-color-bg-canvas));
+  --_solid-active: color-mix(in srgb, var(--kit-color-bg-inverse) 76%, var(--kit-color-bg-canvas));
+  --_on-solid: var(--kit-color-text-inverse);
+  --_text: var(--kit-color-text-primary);
+  --_edge: var(--kit-color-border-default);
+  --_subtle: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+}
+
+/* Variants */
+:where([data-kit="button"][data-variant="solid"]) {
+  --_bg: var(--_solid);
+  --_bg-hover: var(--_solid-hover);
+  --_bg-active: var(--_solid-active);
+  --_fg: var(--_on-solid);
+  --_bd: transparent;
+}
+
+:where([data-kit="button"][data-variant="soft"]) {
+  --_bg: var(--_subtle);
+  --_bg-hover: color-mix(in srgb, var(--_subtle), var(--_text) 10%);
+  --_bg-active: color-mix(in srgb, var(--_subtle), var(--_text) 18%);
+  --_fg: var(--_text);
+  --_bd: transparent;
+}
+
+:where([data-kit="button"][data-variant="outline"]) {
+  --_bg: transparent;
+  --_bg-hover: var(--_subtle);
+  --_bg-active: color-mix(in srgb, var(--_subtle), var(--_text) 10%);
+  --_fg: var(--_text);
+  --_bd: var(--_edge);
+}
+
+:where([data-kit="button"][data-variant="ghost"]) {
+  --_bg: transparent;
+  --_bg-hover: var(--_subtle);
+  --_bg-active: color-mix(in srgb, var(--_subtle), var(--_text) 10%);
+  --_fg: var(--_text);
+  --_bd: transparent;
+}
+
+/* Sizes */
+:where([data-kit="button"][data-size="xs"]) {
+  --_height: var(--kit-button-height-xs);
+  --_pad: var(--kit-button-padding-inline-xs);
+  --_font-size: var(--kit-text-caption-size);
+  --_line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="button"][data-size="sm"]) {
+  --_height: var(--kit-button-height-sm);
+  --_pad: var(--kit-button-padding-inline-sm);
+}
+
+:where([data-kit="button"][data-size="lg"]) {
+  --_height: var(--kit-button-height-lg);
+  --_pad: var(--kit-button-padding-inline-lg);
+  --_font-size: var(--kit-text-body-size);
+  --_line-height: var(--kit-text-body-line-height);
+}
+
+:where([data-kit="button"][data-size="xl"]) {
+  --_height: var(--kit-button-height-xl);
+  --_pad: var(--kit-button-padding-inline-xl);
+  --_font-size: var(--kit-text-body-size);
+  --_line-height: var(--kit-text-body-line-height);
+}
+
+/* Icon-only buttons are square. */
+:where([data-kit="button"][data-icon-only]) {
+  inline-size: var(--_height);
+  padding-inline: 0;
+}
+
+/* States */
+:where([data-kit="button"]):hover {
+  background-color: var(--_bg-hover);
+}
+
+:where([data-kit="button"]):active {
+  background-color: var(--_bg-active);
+}
+
+:where([data-kit="button"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="button"][data-loading]) {
+  cursor: progress;
+}
+
+:where([data-kit="button"]):is(:disabled, [data-disabled]:not([data-loading])) {
+  --_bg: transparent;
+  --_bg-hover: var(--_bg);
+  --_bg-active: var(--_bg);
+  --_fg: var(--kit-color-text-disabled);
+  --_bd: var(--kit-color-border-subtle);
+  cursor: not-allowed;
+}
+
+:where([data-kit="button"][data-variant="solid"]):is(:disabled, [data-disabled]:not([data-loading])) {
+  --_bg: var(--kit-color-border-subtle);
+}
+
+/* Slots: the content stays in layout while loading, so the width never jumps. */
+:where([data-kit="button"] > [data-kit-slot="content"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kit-button-gap);
+}
+
+:where([data-kit="button"][data-loading] > [data-kit-slot="content"]) {
+  visibility: hidden;
+}
+
+:where([data-kit="button"] > [data-kit-slot="spinner"]) {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="button"]) {
+    border-color: ButtonText;
+  }
+
+  :where([data-kit="button"]):is(:disabled, [data-disabled]:not([data-loading])) {
+    border-color: GrayText;
+  }
+}
+
+/* ----------------------------------------------------------------- Badge */
+
+:where([data-kit="badge"]) {
+  --_bg: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+  --_fg: var(--kit-color-text-primary);
+  --_bd: var(--kit-color-border-default);
+  --_height: var(--kit-badge-height-md);
+  --_pad: var(--kit-space-2);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  block-size: var(--_height);
+  padding-inline: var(--_pad);
+  border: var(--kit-border-width-default) solid transparent;
+  border-radius: var(--kit-radius-pill);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-caption-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: var(--kit-text-caption-line-height);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit="badge"][data-size="sm"]) {
+  --_height: var(--kit-badge-height-sm);
+  --_pad: var(--kit-space-1);
+}
+
+/* Tone sets a soft palette: background, foreground, edge. */
+:where([data-kit="badge"][data-tone="accent"]) {
+  --_bg: var(--kit-color-accent-subtle);
+  --_fg: var(--kit-color-text-link);
+  --_bd: var(--kit-color-accent-default);
+}
+
+:where([data-kit="badge"][data-tone="success"]) {
+  --_bg: var(--kit-color-status-success-background);
+  --_fg: var(--kit-color-status-success-foreground);
+  --_bd: var(--kit-color-status-success-border);
+}
+
+:where([data-kit="badge"][data-tone="warning"]) {
+  --_bg: var(--kit-color-status-warning-background);
+  --_fg: var(--kit-color-status-warning-foreground);
+  --_bd: var(--kit-color-status-warning-border);
+}
+
+:where([data-kit="badge"][data-tone="danger"]) {
+  --_bg: var(--kit-color-status-danger-background);
+  --_fg: var(--kit-color-status-danger-foreground);
+  --_bd: var(--kit-color-status-danger-border);
+}
+
+:where([data-kit="badge"][data-tone="info"]) {
+  --_bg: var(--kit-color-status-info-background);
+  --_fg: var(--kit-color-status-info-foreground);
+  --_bd: var(--kit-color-status-info-border);
+}
+
+/* Variants: soft shows the palette, solid inverts it, outline keeps only the edge. */
+:where([data-kit="badge"][data-variant="soft"]) {
+  border-color: transparent;
+}
+
+:where([data-kit="badge"][data-variant="outline"]) {
+  background-color: transparent;
+  border-color: var(--_bd);
+}
+
+:where([data-kit="badge"][data-variant="solid"]) {
+  background-color: var(--_fg);
+  color: var(--_bg);
+  border-color: transparent;
+}
+
+:where([data-kit="badge"][data-variant="solid"][data-tone="neutral"]) {
+  background-color: var(--kit-color-bg-inverse);
+  color: var(--kit-color-text-inverse);
+}
+
+:where([data-kit="badge"][data-variant="solid"][data-tone="accent"]) {
+  background-color: var(--kit-color-accent-default);
+  color: var(--kit-color-accent-on-accent);
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="badge"]) {
+    border-color: CanvasText;
+  }
+}
+
+/* ---------------------------------------------------------- Stack, Inline */
+
+:where([data-kit="stack"]),
+:where([data-kit="inline"]) {
+  display: flex;
+  box-sizing: border-box;
+  min-inline-size: 0;
+}
+
+:where([data-kit="stack"]) {
+  flex-direction: column;
+}
+
+:where([data-kit="inline"]) {
+  flex-direction: row;
+}
+
+:where([data-kit="inline"][data-wrap]) {
+  flex-wrap: wrap;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-align="start"] {
+  align-items: flex-start;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-align="center"] {
+  align-items: center;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-align="end"] {
+  align-items: flex-end;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-align="stretch"] {
+  align-items: stretch;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-align="baseline"] {
+  align-items: baseline;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-justify="start"] {
+  justify-content: flex-start;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-justify="center"] {
+  justify-content: center;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-justify="end"] {
+  justify-content: flex-end;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-justify="between"] {
+  justify-content: space-between;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-justify="around"] {
+  justify-content: space-around;
+}
+
+/* --------------------------------------------------------------- Divider */
+
+:where([data-kit="divider"]) {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  margin: 0;
+  border: 0;
+  background-color: var(--kit-color-border-subtle);
+}
+
+:where([data-kit="divider"][data-orientation="horizontal"]) {
+  inline-size: 100%;
+  block-size: var(--kit-border-width-default);
+}
+
+:where([data-kit="divider"][data-orientation="vertical"]) {
+  align-self: stretch;
+  inline-size: var(--kit-border-width-default);
+  block-size: auto;
+  min-block-size: var(--kit-size-16);
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="divider"]) {
+    background-color: GrayText;
+  }
+}
+
+/* --------------------------------------------------------------- Spinner */
+
+:where([data-kit="spinner"]) {
+  --_size: var(--kit-size-icon-md);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  color: inherit;
+}
+
+:where([data-kit="spinner"][data-size="xs"]) {
+  --_size: var(--kit-size-icon-xs);
+}
+
+:where([data-kit="spinner"][data-size="sm"]) {
+  --_size: var(--kit-size-icon-sm);
+}
+
+:where([data-kit="spinner"][data-size="lg"]) {
+  --_size: var(--kit-size-icon-lg);
+}
+
+:where([data-kit="spinner"] > svg) {
+  inline-size: 100%;
+  block-size: 100%;
+  animation: kit-spin calc(var(--kit-duration-slow) * 2) linear infinite;
+}
+
+:where([data-kit="spinner"] circle) {
+  stroke: currentcolor;
+  stroke-width: var(--kit-icon-stroke-width);
+  stroke-linecap: round;
+}
+
+:where([data-kit="spinner"] [data-kit-slot="spinner-track"]) {
+  opacity: 0.25;
+}
+
+:where([data-kit="spinner"] [data-kit-slot="spinner-arc"]) {
+  stroke-dasharray: 14 100;
+}
+
+@keyframes kit-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+/* Reduced motion: the arc stays visible without spinning. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit="spinner"] > svg) {
+    animation: none;
+  }
+}
+
+/* --------------------------------------------------------- VisuallyHidden */
+
+/*
+ * The 1px clip is the standard technique, expressed with the hairline token so
+ * no raw length appears here.
+ */
+:where([data-kit="visually-hidden"]) {
+  position: absolute;
+  inline-size: var(--kit-border-width-default);
+  block-size: var(--kit-border-width-default);
+  margin: calc(var(--kit-border-width-default) * -1);
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* -------------------------------------------------------------- Providers */
+
+:where([data-kit="theme-provider"]),
+:where([data-kit="density-provider"]) {
+  display: contents;
+}
+
+/* An explicit theme paints its own surface so the subtree actually switches. */
+:where([data-kit="theme-provider"][data-theme]) {
+  display: block;
+  background-color: var(--kit-color-bg-canvas);
+  color: var(--kit-color-text-primary);
+}

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@x12i/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "React components for the Unified UI Kit: actions, feedback, layout and the theme and density providers. Styled by kit tokens only.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/x12i/unified-ui-kit.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/x12i/unified-ui-kit/tree/main/packages/ui#readme",
+  "bugs": {
+    "url": "https://github.com/x12i/unified-ui-kit/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@x12i/tokens": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@x12i/themes": "^1.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.2.1",
+    "@x12i/themes": "^1.0.0",
+    "jsdom": "^30.1.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "vite": "^8.3.6"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/copy-css.mjs",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run"
+  }
 }