@phreshos/react-ui 0.1.25 → 0.1.26

package/dist/tooltip.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from "react-aria-components";
+import { useAppearance } from "./ui-provider.js";
+import { Button } from "./button.js";
+import { controlFontSizes } from "./control.js";
+import { overlayMotionClass, useOverlayTransition } from "./motion-style.js";
+import { scale } from "./scale.js";
+import { Surface } from "./surface.js";
+import { resolveDirection, useDirection } from "./direction.js";
+import { resolveDirectionalPlacement } from "./overlay-placement.js";
+export function TooltipRoot(properties) {
+    return _jsx(AriaTooltipTrigger, { ...properties });
+}
+export const TooltipTrigger = forwardRef(function TooltipTrigger(properties, ref) {
+    return _jsx(Button, { ...properties, ref: ref });
+});
+export const TooltipContent = forwardRef(function TooltipContent({ children, className, color, material, radius, shadow, style, offset, placement = "top", ...properties }, ref) {
+    const inset = scale(useAppearance().spacing, "small");
+    const transition = useOverlayTransition();
+    const direction = resolveDirection(properties.dir, useDirection());
+    return _jsx(AriaTooltip, { ...properties, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color, material: material, radius: radius, shadow: shadow, style: {
+                boxSizing: "border-box",
+                maxWidth: 280,
+                paddingBlock: inset,
+                paddingInline: inset * 1.5,
+                outline: "none",
+                fontSize: controlFontSizes.small,
+                lineHeight: 1.4,
+                ...style
+            }, children: children }) });
+});
+/** A description shown from the focus and hover state of its trigger. */
+export const Tooltip = Object.assign(TooltipRoot, {
+    Root: TooltipRoot,
+    Trigger: TooltipTrigger,
+    Content: TooltipContent
+});

package/dist/ui-provider.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type Appearance, type DesktopPreferences as Preferences } from "@phreshos/core";
+import { type Direction } from "./direction.js";
+export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./appearance-context.js";
+export { useDirection, useDocumentDirection } from "./direction.js";
+/** Supplies the complete shared environment of a React UI subtree. */
+export declare function UIProvider({ appearance, children, direction, preferences }: UIProviderProps): import("react").JSX.Element;
+export interface UIProviderProps {
+    readonly appearance?: Appearance;
+    readonly children: ReactNode;
+    /** Establishes the concrete direction inherited by the provider subtree. */
+    readonly direction?: Direction;
+    readonly preferences?: Preferences;
+}

package/dist/ui-provider.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "@phreshos/core";
+import MotionStyle from "./motion-style.js";
+import { AppearanceContext, PreferencesContext, useAppearance, usePreferences } from "./appearance-context.js";
+import { DirectionContext, useDocumentDirection } from "./direction.js";
+export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./appearance-context.js";
+export { useDirection, useDocumentDirection } from "./direction.js";
+const directionBoundaryStyle = { display: "contents" };
+/** Supplies the complete shared environment of a React UI subtree. */
+export function UIProvider({ appearance, children, direction, preferences }) {
+    const inheritedAppearance = useAppearance();
+    const inheritedPreferences = usePreferences();
+    const documentDirection = useDocumentDirection();
+    const resolvedAppearance = appearance ?? inheritedAppearance;
+    const resolvedDirection = direction ?? documentDirection;
+    const resolvedPreferences = preferences ?? inheritedPreferences;
+    return _jsx(DirectionContext.Provider, { value: resolvedDirection, children: _jsx("div", { dir: resolvedDirection, style: directionBoundaryStyle, children: _jsx(AppearanceContext.Provider, { value: resolvedAppearance, children: _jsxs(PreferencesContext.Provider, { value: resolvedPreferences, children: [_jsx(MotionStyle, {}), children] }) }) }) });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,

package/dist/appearance-provider.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-import { type Appearance, type DesktopPreferences as Preferences } from "@phreshos/core";
-export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./appearance-context.js";
-/** Optionally overrides Appearance and complete visual Preferences for a React subtree. */
-export declare function AppearanceProvider({ appearance, children, preferences }: AppearanceProviderProps): import("react").JSX.Element;
-export interface AppearanceProviderProps {
-    readonly appearance?: Appearance;
-    readonly children: ReactNode;
-    readonly preferences?: Preferences;
-}

package/dist/appearance-provider.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import {} from "@phreshos/core";
-import MotionStyle from "./motion-style.js";
-import { AppearanceContext, PreferencesContext, useAppearance, usePreferences } from "./appearance-context.js";
-export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./appearance-context.js";
-/** Optionally overrides Appearance and complete visual Preferences for a React subtree. */
-export function AppearanceProvider({ appearance, children, preferences }) {
-    const inheritedAppearance = useAppearance();
-    const inheritedPreferences = usePreferences();
-    const resolvedAppearance = appearance ?? inheritedAppearance;
-    const resolvedPreferences = preferences ?? inheritedPreferences;
-    return _jsx(AppearanceContext.Provider, { value: resolvedAppearance, children: _jsxs(PreferencesContext.Provider, { value: resolvedPreferences, children: [_jsx(MotionStyle, {}), children] }) });
-}