@phreshos/react-ui 0.1.24 → 0.1.26

package/README.md

@@ -38,22 +38,38 @@ import { Button, Surface } from "@phreshos/react-ui"
 ```
 
 Without a provider, components use Core's `defaultAppearance` and reactively
-follow the browser's complete visual preferences. `AppearanceProvider` can replace
-Appearance or Preferences for a subtree; omitted values inherit from the nearest provider.
+follow the browser's complete visual preferences. `UIProvider` supplies the
+Appearance, Preferences, and direction shared by a React UI subtree. Omitted
+Appearance and Preferences values inherit from the nearest provider.
 React UI also exports that same canonical `defaultAppearance` value for callers
 that need it explicitly.
 See [Appearance](https://docs.phreshos.com/system/appearance) for the contract
 interpreted by the provider and components.
 
+React UI is neutral between left-to-right and right-to-left interfaces.
+`UIProvider` creates a direction boundary that participates in native DOM
+inheritance without creating a layout box. Its direction follows `<html dir>`
+unless `direction` supplies an explicit override. React UI reads that same
+resolved value only for JavaScript behavior and portals that cannot rely on
+native inheritance.
+
+```tsx
+import { UIProvider, Select } from "@phreshos/react-ui"
+
+<UIProvider direction="rtl">
+  <Select label="Choice" options={[{ value: "one", label: "One" }]} />
+</UIProvider>
+```
+
 ```tsx
-import { AppearanceProvider, Button, useBrowserPreferences } from "@phreshos/react-ui"
+import { UIProvider, Button, useBrowserPreferences } from "@phreshos/react-ui"
 
 function Example() {
   const browser = useBrowserPreferences()
 
-  return <AppearanceProvider preferences={{ ...browser, theme: "dark" }}>
+  return <UIProvider preferences={{ ...browser, theme: "dark" }}>
     <Button>Dark subtree</Button>
-  </AppearanceProvider>
+  </UIProvider>
 }
 ```
 
@@ -75,12 +91,11 @@ spacing and radius follow Appearance. `disabled` prevents activation and focus;
 <Button color="danger:soft" size="small">Delete</Button>
 ```
 
-`Surface` is the material-owning element. It renders a `div` by default, while
+`Surface` is the material- and shadow-owning element. It renders a `div` by default, while
 `as` selects another React element and preserves that element's native properties
 and ref type. Surface owns its paint, opacity, frost, refraction, grain, edge,
-radius, and clipping requirements. It never creates or consumes a shadow; shadow
-remains an independent visual concern. `radius` accepts a size level, a number in
-pixels, or a CSS radius and defaults to `medium`.
+outer shadow, radius, and clipping requirements. `radius` accepts a size level, `full`, a
+number in pixels, or a CSS radius and defaults to `medium`.
 
 ```tsx
 <Surface color="background:soft" radius="large">Derived values</Surface>
@@ -89,27 +104,35 @@ pixels, or a CSS radius and defaults to `medium`.
 ```
 
 `as` can also select an outside React component. A valid Surface host preserves
-the `style` and `children` it receives on one host element and forwards its ref
-to that same element. This lets layout components carry the material without a
-wrapper. The host retains ownership of its own behavior and layout properties;
-Surface retains ownership of material, edge, radius, and required geometry.
+the `style`, `dir`, and `children` it receives on one host element and forwards
+its ref to that same element. This lets layout components carry the material
+without a wrapper. The host retains ownership of its own behavior and layout
+properties; Surface retains ownership of material, edge, shadow, radius, and
+required geometry.
 
 `MaterialOptions` defines `opacity`, `backdrop`, `grain`, `grainAmount`,
 `distortion`, and `saturation`. Every material-bearing component, including
 Surface, exposes these values through its `material` prop. Color remains a
-separate property. Omitted material values follow
-`appearance.material`. Effect options accept a scale level or a direct number;
+separate property. Omission or `true` uses `appearance.material`; `false`
+removes the material and paints the resolved color as a normal background.
+Effect options accept a scale level or a direct number;
 opacity affects Surface paint only, never its content. The material edge is part
 of the same Surface rather than a second public entity.
 
 Surface-based controls expose the same separate `color` and `material` props.
+`ShadowOptions` similarly groups `x`, `y`, `blur`, `spread`, and `opacity` under
+the `shadow` prop. Omission or `true` follows the active `appearance.shadow`
+branch, while `false` removes the shadow. Each option accepts a scale level or
+direct number. The shadow is a neutral black
+outer shadow. Surface-based controls expose the same `shadow` prop.
 For text fields and Select, `material` targets the field or trigger; for Checkbox,
 Switch, and Radio, it targets the indicator. RadioGroup supplies material defaults
-to its options, and a Radio can override them.
+to its options, and a Radio can override them. Shadow follows the same targets and
+inheritance path.
 
 ```tsx
 <Button color="primary:base" material={{ opacity: 0.6, backdrop: 0 }}>Save</Button>
-<Input label="Name" radius="large" material={{ grain: "small" }} />
+<Input label="Name" radius="large" material={{ grain: "small" }} shadow={{ blur: "small" }} />
 ```
 
 `Panel` composes an outer `Surface`, an optional header, and an inset content
@@ -119,13 +142,41 @@ Appearance spacing. Positioning, modality, and lifecycle belong to the caller.
 ```tsx
 import { Panel } from "@phreshos/react-ui"
 
-<Panel header={<h2>Title</h2>} contentProps={{ style: { padding: 16 } }}>
-  Content
+<Panel>
+  <Panel.Header><h2>Title</h2></Panel.Header>
+  <Panel.Content style={{ padding: 16 }}>Content</Panel.Content>
 </Panel>
 ```
 
-Native properties and the forwarded ref target the outer Surface.
-`contentProps` targets the inner Surface; `children` supplies its content.
+Native properties and the root ref target the outer Surface. `Panel.Header`
+owns the optional leading region, while `Panel.Content` is the independently
+configurable inner Surface.
+
+## Overlays
+
+Overlay components expose each behavioral role as a named part. Roots own open
+state, triggers own activation, positioned content owns its Surface, and the
+semantic content remains explicit.
+
+```tsx
+<DropdownMenu>
+  <DropdownMenu.Trigger>Actions</DropdownMenu.Trigger>
+  <DropdownMenu.Content>
+    <Menu aria-label="Document actions">
+      <Menu.Item onAction={open}>Open</Menu.Item>
+      <Menu.Item color="danger:base" onAction={remove}>Delete</Menu.Item>
+    </Menu>
+  </DropdownMenu.Content>
+</DropdownMenu>
+```
+
+`Popover` presents anchored non-modal content. `DropdownMenu` and
+`ContextMenu` open the same `Menu` contract through different interactions.
+`Dialog` blocks interaction behind it and may be dismissable, while
+`AlertDialog` requires an explicit decision by default. `Tooltip` supplies a
+short description on focus or hover. Portal cleanup, focus restoration,
+keyboard behavior, nested ownership, and entrance and exit transactions remain
+component-owned.
 
 ## Inputs
 
@@ -143,8 +194,8 @@ Server SDK.
 Fields distinguish hover, pointer focus, keyboard focus, and invalid state.
 Shared CSS transitions use `appearance.transaction` for colors and corner
 radius. The material fill and opacity values transition on the painted layers, not on the
-Surface host. Select menus combine a small placement-aware slide with an overlay
-opacity fade for entry and exit, using React Aria's animation lifecycle. Preferences with animations disabled make
+Surface host. Select menus scale from `1.05` to `1` while fading in, and reverse
+that motion when exiting, using React Aria's animation lifecycle. Preferences with animations disabled make
 these changes immediate without changing the Appearance value.
 Blur, distortion, geometry, and Surface host opacity are not transitioned; gradients
 and structurally removed effects change directly rather than adding extra

package/dist/alert-dialog.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { DialogRoot } from "./dialog.js";
+import type { DialogBackdropProps, DialogContentProps } from "./dialog.js";
+export type AlertDialogRootProps = ComponentProps<typeof DialogRoot>;
+export declare function AlertDialogRoot(properties: AlertDialogRootProps): import("react").JSX.Element;
+export type AlertDialogBackdropProps = DialogBackdropProps;
+export declare const AlertDialogBackdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+export type AlertDialogContentProps = Omit<DialogContentProps, "role">;
+export declare const AlertDialogContent: import("react").ForwardRefExoticComponent<AlertDialogContentProps & import("react").RefAttributes<HTMLElement>>;
+/** A dialog requiring an explicit decision rather than ambient dismissal. */
+export declare const AlertDialog: typeof AlertDialogRoot & {
+    Root: typeof AlertDialogRoot;
+    Trigger: import("react").ForwardRefExoticComponent<import("./button.js").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<AlertDialogContentProps & import("react").RefAttributes<HTMLElement>>;
+    Header: import("react").ForwardRefExoticComponent<import("./dialog.js").DialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<import("react-aria-components").HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<import("react-aria-components").TextProps & import("react").RefAttributes<HTMLElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("./dialog.js").DialogBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("./dialog.js").DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("./button.js").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export type AlertDialogProps = ComponentProps<typeof AlertDialogRoot>;

package/dist/alert-dialog.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { DialogBackdrop, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./dialog.js";
+export function AlertDialogRoot(properties) {
+    return _jsx(DialogRoot, { ...properties });
+}
+export const AlertDialogBackdrop = forwardRef(function AlertDialogBackdrop(properties, ref) {
+    return _jsx(DialogBackdrop, { ...properties, ref: ref, isDismissable: properties.isDismissable ?? false, isKeyboardDismissDisabled: properties.isKeyboardDismissDisabled ?? true });
+});
+export const AlertDialogContent = forwardRef(function AlertDialogContent(properties, ref) {
+    return _jsx(DialogContent, { ...properties, ref: ref, role: "alertdialog" });
+});
+/** A dialog requiring an explicit decision rather than ambient dismissal. */
+export const AlertDialog = Object.assign(AlertDialogRoot, {
+    Root: AlertDialogRoot,
+    Trigger: DialogTrigger,
+    Backdrop: AlertDialogBackdrop,
+    Content: AlertDialogContent,
+    Header: DialogHeader,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    Body: DialogBody,
+    Footer: DialogFooter,
+    Close: DialogClose
+});

package/dist/button.d.ts

@@ -4,11 +4,12 @@ import type { ScaleLevel } from "./scale.js";
 import type { RadiusProps } from "./radius.js";
 import { type ControlColor } from "./control.js";
 import type { MaterialOverrides } from "./material-options.js";
+import type { ShadowOverrides } from "./shadow-options.js";
 type NativeButtonProps = Omit<AriaButtonProps, "children" | "className" | "color" | "isDisabled" | "isPending" | "onClick" | "onPress" | "style">;
 /** A semantic color from Appearance; omission uses `default:base`. */
 export type ButtonColor = ControlColor;
 /** Properties accepted by the shared interactive button. */
-export interface ButtonProps extends NativeButtonProps, RadiusProps, MaterialOverrides {
+export interface ButtonProps extends NativeButtonProps, RadiusProps, MaterialOverrides, ShadowOverrides {
     /** Visible Button content. */
     readonly children?: ReactNode;
     /** Base color for the material. Omission keeps the Button neutral. */

package/dist/button.js

@@ -4,9 +4,9 @@ import { Button as AriaButton } from "react-aria-components";
 import { controlFontSizes, useControlTheme } from "./control.js";
 import { SurfaceButton } from "./control-surface.js";
 /** An Appearance-aware action with normalized pointer and keyboard behavior. */
-export const Button = forwardRef(function Button({ children, color, disabled = false, pending = false, onPress, radius = "medium", size = "medium", style, material, type = "button", ...properties }, ref) {
+export const Button = forwardRef(function Button({ children, color, disabled = false, pending = false, onPress, radius = "medium", size = "medium", style, material, shadow, type = "button", ...properties }, ref) {
     const theme = useControlTheme({ color, radius, size });
-    return _jsx(AriaButton, { ...properties, ref: ref, type: type, isDisabled: disabled, isPending: pending, onPress: onPress, render: (native, state) => _jsx(SurfaceButton, { native: native, material: material, paint: buttonPaint(theme, !disabled && !pending, state.isHovered, state.isPressed) }), style: ({ isFocusVisible, isHovered, isPressed }) => buttonStyle({
+    return _jsx(AriaButton, { ...properties, ref: ref, type: type, isDisabled: disabled, isPending: pending, onPress: onPress, render: (native, state) => _jsx(SurfaceButton, { native: native, material: material, shadow: shadow, paint: buttonPaint(theme, !disabled && !pending, state.isHovered, state.isPressed) }), style: ({ isFocusVisible, isHovered, isPressed }) => buttonStyle({
             theme,
             disabled,
             isFocusVisible,

package/dist/checkbox.d.ts

@@ -1,7 +1,8 @@
 import type { CheckboxFieldProps } from "react-aria-components";
 import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
 import type { MaterialOverrides } from "./material-options.js";
-export interface CheckboxProps extends Omit<CheckboxFieldProps, ControlOverrides | "isReadOnly" | "isSelected" | "defaultSelected" | "isIndeterminate">, ControlProps, FieldProps, MaterialOverrides {
+import type { ShadowOverrides } from "./shadow-options.js";
+export interface CheckboxProps extends Omit<CheckboxFieldProps, ControlOverrides | "isReadOnly" | "isSelected" | "defaultSelected" | "isIndeterminate">, ControlProps, FieldProps, MaterialOverrides, ShadowOverrides {
     readonly checked?: boolean;
     readonly defaultChecked?: boolean;
     readonly indeterminate?: boolean;

package/dist/checkbox.js

@@ -4,7 +4,7 @@ import { CheckboxField, CheckboxButton } from "react-aria-components";
 import { FieldFeedback, fieldStyle, useControlTheme } from "./control.js";
 import { ToggleIndicator, toggleStyle } from "./toggle-indicator.js";
 /** An independent boolean field with optional mixed-state presentation. */
-export const Checkbox = forwardRef(function Checkbox({ label, description, errorMessage, disabled, required, invalid, readOnly, checked, defaultChecked, indeterminate, size, color, style, material, ...properties }, ref) {
+export const Checkbox = forwardRef(function Checkbox({ label, description, errorMessage, disabled, required, invalid, readOnly, checked, defaultChecked, indeterminate, size, color, style, material, shadow, ...properties }, ref) {
     const theme = useControlTheme({ size, color });
-    return _jsxs(CheckboxField, { ...properties, ref: ref, isDisabled: disabled, isRequired: required, isInvalid: invalid, isReadOnly: readOnly, isSelected: checked, defaultSelected: defaultChecked, isIndeterminate: indeterminate, style: state => fieldStyle(theme, state.isDisabled, style), children: [_jsx(CheckboxButton, { style: state => toggleStyle(theme, state.isDisabled, state.isReadOnly), children: state => _jsxs(_Fragment, { children: [_jsx(ToggleIndicator, { kind: "checkbox", material: material, theme: theme, selected: state.isSelected, indeterminate: state.isIndeterminate, focused: state.isFocusVisible, invalid: state.isInvalid, hovered: !state.isDisabled && !state.isReadOnly && state.isHovered, pressed: !state.isDisabled && !state.isReadOnly && state.isPressed }), label] }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
+    return _jsxs(CheckboxField, { ...properties, ref: ref, isDisabled: disabled, isRequired: required, isInvalid: invalid, isReadOnly: readOnly, isSelected: checked, defaultSelected: defaultChecked, isIndeterminate: indeterminate, style: state => fieldStyle(theme, state.isDisabled, style), children: [_jsx(CheckboxButton, { style: state => toggleStyle(theme, state.isDisabled, state.isReadOnly), children: state => _jsxs(_Fragment, { children: [_jsx(ToggleIndicator, { kind: "checkbox", material: material, shadow: shadow, theme: theme, selected: state.isSelected, indeterminate: state.isIndeterminate, focused: state.isFocusVisible, invalid: state.isInvalid, hovered: !state.isDisabled && !state.isReadOnly && state.isHovered, pressed: !state.isDisabled && !state.isReadOnly && state.isPressed }), label] }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
 });

package/dist/color.js

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { ColorSpace, mix, parse, serialize, to, toGamut, contrastWCAG21, sRGB, sRGB_Linear, HSL, HWB, Lab, LCH, OKLab, OKLCH, P3, A98RGB, ProPhoto, REC_2020, XYZ_D50, XYZ_D65 } from "colorjs.io/fn";
-import { useAppearance, useThemedValue } from "./appearance-provider.js";
+import { useAppearance, useThemedValue } from "./ui-provider.js";
 // Register the CSS color spaces, without bundling unrelated color-model APIs.
 for (const space of [sRGB, sRGB_Linear, HSL, HWB, Lab, LCH, OKLab, OKLCH, P3, A98RGB, ProPhoto, REC_2020, XYZ_D50, XYZ_D65])
     ColorSpace.register(space);

package/dist/context-menu.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { Pressable as AriaPressable } from "react-aria-components";
+import type { MenuTriggerProps as AriaMenuTriggerProps } from "react-aria-components";
+export type ContextMenuRootProps = Omit<AriaMenuTriggerProps, "trigger">;
+export declare function ContextMenuRoot(properties: ContextMenuRootProps): import("react").JSX.Element;
+export type ContextMenuTriggerProps = ComponentProps<typeof AriaPressable>;
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<Omit<import("react-aria/Pressable").PressableProps & import("react").RefAttributes<import("@react-types/shared").FocusableElement>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableElement>>;
+/** A context-requested overlay sharing the same Menu contract as DropdownMenu. */
+export declare const ContextMenu: typeof ContextMenuRoot & {
+    Root: typeof ContextMenuRoot;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("react-aria/Pressable").PressableProps & import("react").RefAttributes<import("@react-types/shared").FocusableElement>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("./popover.js").PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
+    Menu: import("./menu.js").MenuRootComponent & {
+        Root: import("./menu.js").MenuRootComponent;
+        Item: import("./menu.js").MenuItemComponent;
+        Section: <T>(props: import("react-aria-components").MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => import("react").ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+        Header: import("react").ForwardRefExoticComponent<import("react-aria-components").HeaderProps & import("react").RefAttributes<HTMLElement>>;
+        Separator: import("react").ForwardRefExoticComponent<import("react-aria-components").SeparatorProps & import("react").RefAttributes<HTMLElement>>;
+    };
+};
+export type ContextMenuProps = ComponentProps<typeof ContextMenuRoot>;

package/dist/context-menu.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { MenuTrigger as AriaMenuTrigger, Pressable as AriaPressable } from "react-aria-components";
+import { Menu } from "./menu.js";
+import { PopoverContent } from "./popover.js";
+export function ContextMenuRoot(properties) {
+    return _jsx(AriaMenuTrigger, { ...properties, trigger: "contextMenu" });
+}
+export const ContextMenuTrigger = forwardRef(function ContextMenuTrigger(properties, ref) {
+    return _jsx(AriaPressable, { ...properties, ref: ref });
+});
+/** A context-requested overlay sharing the same Menu contract as DropdownMenu. */
+export const ContextMenu = Object.assign(ContextMenuRoot, {
+    Root: ContextMenuRoot,
+    Trigger: ContextMenuTrigger,
+    Content: PopoverContent,
+    Menu
+});

package/dist/control-surface.d.ts

@@ -1,20 +1,19 @@
 import type { ComponentPropsWithRef, CSSProperties, ReactNode } from "react";
-import type { MaterialOptions } from "./material-options.js";
+import type { MaterialOverrides } from "./material-options.js";
+import type { ShadowOverrides } from "./shadow-options.js";
 type Paint = Readonly<{
     background: string;
     color: string;
 }>;
 /** A native button uses Surface without changing its native contract. */
-export declare function SurfaceButton({ native, paint, material: options }: {
+export declare function SurfaceButton({ native, paint, material: options, shadow }: {
     readonly native: ComponentPropsWithRef<"button">;
     readonly paint: Paint;
-    readonly material?: MaterialOptions;
-}): import("react").JSX.Element;
+} & MaterialOverrides & ShadowOverrides): import("react").JSX.Element;
 /** Void text controls use a material host while retaining native sizing. */
-export declare function SurfaceField({ paint, radius, children, material: options }: Readonly<{
+export declare function SurfaceField({ paint, radius, children, material: options, shadow }: Readonly<{
     paint: Paint;
     radius: CSSProperties["borderRadius"];
     children: ReactNode;
-    material?: MaterialOptions;
-}>): import("react").JSX.Element;
+} & MaterialOverrides & ShadowOverrides>): import("react").JSX.Element;
 export {};

package/dist/control-surface.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Surface } from "./surface.js";
 /** A native button uses Surface without changing its native contract. */
-export function SurfaceButton({ native, paint, material: options }) {
+export function SurfaceButton({ native, paint, material: options, shadow }) {
     const { ref, style, children, ...properties } = native;
-    return _jsx(Surface, { ...properties, as: "button", color: paint.background, material: options, ref: ref, style: { ...style, color: paint.color }, children: children });
+    return _jsx(Surface, { ...properties, as: "button", color: paint.background, material: options, shadow: shadow, ref: ref, style: { ...style, color: paint.color }, children: children });
 }
 /** Void text controls use a material host while retaining native sizing. */
-export function SurfaceField({ paint, radius, children, material: options }) {
-    return _jsx(Surface, { as: "span", color: paint.background, material: options, radius: radius, style: { color: paint.color, display: "grid", minWidth: 0 }, children: children });
+export function SurfaceField({ paint, radius, children, material: options, shadow }) {
+    return _jsx(Surface, { as: "span", color: paint.background, material: options, shadow: shadow, radius: radius, style: { color: paint.color, display: "grid", minWidth: 0 }, children: children });
 }

package/dist/control.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { FieldError, Label, Text } from "react-aria-components";
-import { useAppearance, useThemedValue } from "./appearance-provider.js";
+import { useAppearance, useThemedValue } from "./ui-provider.js";
 import { resolveRadius } from "./radius.js";
 import { scale } from "./scale.js";
 import { colorOpacity, solidColors } from "./color.js";

package/dist/dialog.d.ts

@@ -0,0 +1,46 @@
+import type { ComponentProps, CSSProperties, HTMLAttributes, ReactNode } from "react";
+import type { DialogProps as AriaDialogProps, DialogTriggerProps as AriaDialogTriggerProps, HeadingProps as AriaHeadingProps, ModalOverlayProps as AriaModalOverlayProps, TextProps as AriaTextProps } from "react-aria-components";
+import { type ButtonProps } from "./button.js";
+import { type SurfaceOwnProps } from "./surface.js";
+export type DialogRootProps = AriaDialogTriggerProps;
+export declare function DialogRoot(properties: DialogRootProps): import("react").JSX.Element;
+export type DialogTriggerProps = ButtonProps;
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface DialogBackdropProps extends Omit<AriaModalOverlayProps, "children" | "className" | "style"> {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DialogContentProps extends Omit<AriaDialogProps, "children" | "className" | "style">, SurfaceOwnProps {
+    readonly children?: AriaDialogProps["children"];
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export declare const DialogContent: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLElement>>;
+export type DialogHeaderProps = HTMLAttributes<HTMLDivElement>;
+export declare const DialogHeader: import("react").ForwardRefExoticComponent<DialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export type DialogTitleProps = AriaHeadingProps;
+export declare const DialogTitle: import("react").ForwardRefExoticComponent<AriaHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export type DialogDescriptionProps = AriaTextProps;
+export declare const DialogDescription: import("react").ForwardRefExoticComponent<AriaTextProps & import("react").RefAttributes<HTMLElement>>;
+export type DialogBodyProps = HTMLAttributes<HTMLDivElement>;
+export declare const DialogBody: import("react").ForwardRefExoticComponent<DialogBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+export type DialogFooterProps = HTMLAttributes<HTMLDivElement>;
+export declare const DialogFooter: import("react").ForwardRefExoticComponent<DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export type DialogCloseProps = ButtonProps;
+export declare const DialogClose: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** A modal dialog whose behavioral and structural roles remain independently composable. */
+export declare const Dialog: typeof DialogRoot & {
+    Root: typeof DialogRoot;
+    Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLElement>>;
+    Header: import("react").ForwardRefExoticComponent<DialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<AriaHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<AriaTextProps & import("react").RefAttributes<HTMLElement>>;
+    Body: import("react").ForwardRefExoticComponent<DialogBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+    Close: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export type DialogProps = ComponentProps<typeof DialogRoot>;

package/dist/dialog.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Heading as AriaHeading, Modal as AriaModal, ModalOverlay as AriaModalOverlay, Text as AriaText } from "react-aria-components";
+import { useAppearance } from "./ui-provider.js";
+import { Button } from "./button.js";
+import { backdropMotionClass, overlayMotionClass, useOverlayTransition } from "./motion-style.js";
+import { scale } from "./scale.js";
+import { Surface } from "./surface.js";
+import { resolveDirection, useDirection } from "./direction.js";
+export function DialogRoot(properties) {
+    return _jsx(AriaDialogTrigger, { ...properties });
+}
+export const DialogTrigger = forwardRef(function DialogTrigger(properties, ref) {
+    return _jsx(Button, { ...properties, ref: ref });
+});
+export const DialogBackdrop = forwardRef(function DialogBackdrop({ className, style, ...properties }, ref) {
+    const inset = scale(useAppearance().spacing, "medium");
+    const transition = useOverlayTransition();
+    const direction = resolveDirection(properties.dir, useDirection());
+    return _jsx(AriaModalOverlay, { ...properties, ref: ref, dir: direction, className: [backdropMotionClass, className].filter(Boolean).join(" "), style: {
+            ...transition,
+            position: "fixed",
+            inset: 0,
+            zIndex: 1_000,
+            display: "grid",
+            placeItems: "center",
+            boxSizing: "border-box",
+            padding: inset,
+            overflow: "auto",
+            background: "rgb(0 0 0 / 0.32)",
+            ...style
+        } });
+});
+export const DialogContent = forwardRef(function DialogContent({ children, className, color, material, radius, shadow, style, ...properties }, ref) {
+    const inset = scale(useAppearance().spacing, "medium");
+    const transition = useOverlayTransition();
+    const direction = resolveDirection(properties.dir, useDirection());
+    return _jsx(AriaModal, { dir: direction, className: overlayMotionClass, style: {
+            ...transition,
+            width: `min(32rem, calc(100vw - ${inset * 2}px))`,
+            maxHeight: `calc(100vh - ${inset * 2}px)`,
+            outline: "none"
+        }, children: _jsx(Surface, { className: className, color: color, material: material, radius: radius, shadow: shadow, style: {
+                boxSizing: "border-box",
+                width: "100%",
+                maxHeight: "inherit",
+                padding: inset,
+                overflow: "hidden",
+                ...style
+            }, children: _jsx(AriaDialog, { ...properties, ref: ref, style: {
+                    display: "grid",
+                    gap: inset,
+                    minWidth: 0,
+                    minHeight: 0,
+                    maxHeight: "inherit",
+                    outline: "none"
+                }, children: children }) }) });
+});
+export const DialogHeader = forwardRef(function DialogHeader({ style, ...properties }, ref) {
+    const gap = scale(useAppearance().spacing, "small");
+    return _jsx("div", { ...properties, ref: ref, style: { display: "grid", gap, minWidth: 0, ...style } });
+});
+export const DialogTitle = forwardRef(function DialogTitle({ style, ...properties }, ref) {
+    return _jsx(AriaHeading, { ...properties, ref: ref, slot: "title", style: { margin: 0, font: "inherit", fontWeight: 650, ...style } });
+});
+export const DialogDescription = forwardRef(function DialogDescription({ style, ...properties }, ref) {
+    return _jsx(AriaText, { ...properties, ref: ref, slot: "description", style: { margin: 0, opacity: 0.72, ...style } });
+});
+export const DialogBody = forwardRef(function DialogBody({ style, ...properties }, ref) {
+    return _jsx("div", { ...properties, ref: ref, style: { minWidth: 0, minHeight: 0, ...style } });
+});
+export const DialogFooter = forwardRef(function DialogFooter({ style, ...properties }, ref) {
+    const gap = scale(useAppearance().spacing, "small");
+    return _jsx("div", { ...properties, ref: ref, style: { display: "flex", justifyContent: "flex-end", flexWrap: "wrap", gap, minWidth: 0, ...style } });
+});
+export const DialogClose = forwardRef(function DialogClose(properties, ref) {
+    return _jsx(Button, { ...properties, ref: ref, slot: "close" });
+});
+/** A modal dialog whose behavioral and structural roles remain independently composable. */
+export const Dialog = Object.assign(DialogRoot, {
+    Root: DialogRoot,
+    Trigger: DialogTrigger,
+    Backdrop: DialogBackdrop,
+    Content: DialogContent,
+    Header: DialogHeader,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    Body: DialogBody,
+    Footer: DialogFooter,
+    Close: DialogClose
+});

package/dist/direction.d.ts

@@ -0,0 +1,9 @@
+/** The two concrete directions supported by React UI behavior. */
+export type Direction = "ltr" | "rtl";
+export declare const DirectionContext: import("react").Context<Direction | null>;
+/** Resolves a concrete element override before falling back to its React UI environment. */
+export declare function resolveDirection(value: string | undefined, fallback: Direction): Direction;
+/** Returns the nearest guaranteed React UI direction, or the document direction. */
+export declare function useDirection(): Direction;
+/** Reactively reads the explicit direction of the document's HTML element. */
+export declare function useDocumentDirection(): Direction;

package/dist/direction.js

@@ -0,0 +1,31 @@
+import { createContext, useContext, useSyncExternalStore } from "react";
+export const DirectionContext = createContext(null);
+/** Resolves a concrete element override before falling back to its React UI environment. */
+export function resolveDirection(value, fallback) {
+    return value === "ltr" || value === "rtl" ? value : fallback;
+}
+/** Returns the nearest guaranteed React UI direction, or the document direction. */
+export function useDirection() {
+    const direction = useContext(DirectionContext);
+    const documentDirection = useDocumentDirection();
+    return direction ?? documentDirection;
+}
+/** Reactively reads the explicit direction of the document's HTML element. */
+export function useDocumentDirection() {
+    return useSyncExternalStore(subscribeDocumentDirection, documentDirection, serverDirection);
+}
+function subscribeDocumentDirection(change) {
+    if (typeof document === "undefined" || typeof MutationObserver === "undefined")
+        return () => undefined;
+    const observer = new MutationObserver(change);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["dir"] });
+    return () => observer.disconnect();
+}
+function documentDirection() {
+    if (typeof document === "undefined")
+        return serverDirection();
+    return document.documentElement.getAttribute("dir")?.toLowerCase() === "rtl" ? "rtl" : "ltr";
+}
+function serverDirection() {
+    return "ltr";
+}

package/dist/dropdown-menu.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import type { MenuTriggerProps as AriaMenuTriggerProps } from "react-aria-components";
+import { type ButtonProps } from "./button.js";
+export type DropdownMenuRootProps = AriaMenuTriggerProps;
+export declare function DropdownMenuRoot(properties: DropdownMenuRootProps): import("react").JSX.Element;
+export type DropdownMenuTriggerProps = ButtonProps;
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** A button-triggered overlay. Its Content owns positioning; Menu owns commands and selection. */
+export declare const DropdownMenu: typeof DropdownMenuRoot & {
+    Root: typeof DropdownMenuRoot;
+    Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("./popover.js").PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
+    Menu: import("./menu.js").MenuRootComponent & {
+        Root: import("./menu.js").MenuRootComponent;
+        Item: import("./menu.js").MenuItemComponent;
+        Section: <T>(props: import("react-aria-components").MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => import("react").ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+        Header: import("react").ForwardRefExoticComponent<import("react-aria-components").HeaderProps & import("react").RefAttributes<HTMLElement>>;
+        Separator: import("react").ForwardRefExoticComponent<import("react-aria-components").SeparatorProps & import("react").RefAttributes<HTMLElement>>;
+    };
+};
+export type DropdownMenuProps = ComponentProps<typeof DropdownMenuRoot>;

package/dist/dropdown-menu.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { MenuTrigger as AriaMenuTrigger } from "react-aria-components";
+import { Button } from "./button.js";
+import { Menu } from "./menu.js";
+import { PopoverContent } from "./popover.js";
+export function DropdownMenuRoot(properties) {
+    return _jsx(AriaMenuTrigger, { ...properties });
+}
+export const DropdownMenuTrigger = forwardRef(function DropdownMenuTrigger(properties, ref) {
+    return _jsx(Button, { ...properties, ref: ref });
+});
+/** A button-triggered overlay. Its Content owns positioning; Menu owns commands and selection. */
+export const DropdownMenu = Object.assign(DropdownMenuRoot, {
+    Root: DropdownMenuRoot,
+    Trigger: DropdownMenuTrigger,
+    Content: PopoverContent,
+    Menu
+});

package/dist/flex.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { alignment, justification, resolveGap } from "./layout.js";
-import { useAppearance } from "./appearance-provider.js";
+import { useAppearance } from "./ui-provider.js";
 /** A predictable Flexbox container with no visual appearance of its own. */
 export const Flex = forwardRef(function Flex({ align, direction, gap, inline = false, justify, style, wrap, ...properties }, ref) {
     const appearance = useAppearance();

package/dist/grid.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { alignment, justification, resolveGap, tracks } from "./layout.js";
-import { useAppearance } from "./appearance-provider.js";
+import { useAppearance } from "./ui-provider.js";
 /** A predictable CSS Grid container with no visual appearance of its own. */
 export const Grid = forwardRef(function Grid({ align, columns, flow, gap, inline = false, justify, rows, style, ...properties }, ref) {
     const appearance = useAppearance();