@phreshos/react-ui 0.1.20 → 0.1.22

package/dist/appearance-provider.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import {} from "@phreshos/core";
-import DocumentScrollbars from "./document-scrollbars.js";
 import MotionStyle from "./motion-style.js";
 import { AppearanceContext, ThemeContext, useAppearance, useTheme } from "./appearance-context.js";
 export { useAppearance, useTheme, useThemedValue } from "./appearance-context.js";
@@ -10,5 +9,5 @@ export function AppearanceProvider({ appearance, children, theme }) {
     const inheritedTheme = useTheme();
     const resolvedAppearance = appearance ?? inheritedAppearance;
     const resolvedTheme = theme ?? inheritedTheme;
-    return _jsx(AppearanceContext.Provider, { value: resolvedAppearance, children: _jsxs(ThemeContext.Provider, { value: resolvedTheme, children: [_jsx(MotionStyle, {}), _jsx(DocumentScrollbars, { appearance: resolvedAppearance, theme: resolvedTheme }), children] }) });
+    return _jsx(AppearanceContext.Provider, { value: resolvedAppearance, children: _jsxs(ThemeContext.Provider, { value: resolvedTheme, children: [_jsx(MotionStyle, {}), children] }) });
 }

package/dist/button.js

@@ -31,6 +31,7 @@ function buttonStyle({ theme, disabled, isFocusVisible, isHovered, isPressed, pe
         gridAutoFlow: "column",
         gridAutoColumns: "max-content",
         placeItems: "center",
+        justifyContent: "center",
         flexShrink: 0,
         minWidth: 0,
         height,

package/dist/color.js

@@ -43,16 +43,16 @@ export function useColor(value) {
 /** Resolves a semantic Appearance color or preserves a direct CSS color. */
 export function useResolveColor(value = defaultColor) {
     const appearance = useAppearance();
-    const semantic = parseSemanticColor(value);
-    const source = useThemedValue(appearance.colors)[semantic?.name ?? "background"];
-    return semantic ? color(source)[semantic.level] : value;
+    const colors = useThemedValue(appearance.colors);
+    const semantic = parseSemanticColor(value, colors);
+    return semantic ? color(semantic.source)[semantic.level] : value;
 }
 /** Resolves a color to concrete opaque paint for solid interactive states. */
 export function useResolveSolidColor(value) {
     const appearance = useAppearance();
-    const semantic = parseSemanticColor(value);
-    const source = useThemedValue(appearance.colors)[semantic?.name ?? "background"];
-    return semantic ? resolveColorLevel(source, semantic.level) : opaqueColor(value);
+    const colors = useThemedValue(appearance.colors);
+    const semantic = parseSemanticColor(value, colors);
+    return semantic ? resolveColorLevel(semantic.source, semantic.level) : opaqueColor(value);
 }
 /** Applies material opacity without restricting the source CSS color syntax. */
 export function colorOpacity(value, opacity) {
@@ -99,17 +99,14 @@ export function solidColors(base, background, foreground) {
         pressed: paint(colorShade(fill, 0.085))
     };
 }
-function parseSemanticColor(value) {
+function parseSemanticColor(value, colors) {
     const separator = value.indexOf(":");
     if (separator < 0 || value.indexOf(":", separator + 1) >= 0)
         return null;
     const name = value.slice(0, separator);
     const level = value.slice(separator + 1);
-    if (!isAppearanceColor(name) || !isColorLevel(level))
+    const source = Reflect.get(colors, name);
+    if (typeof source !== "string" || !isColorLevel(level))
         return null;
-    return { name, level };
-}
-function isAppearanceColor(value) {
-    return value === "background" || value === "foreground" || value === "primary" || value === "secondary"
-        || value === "success" || value === "warning" || value === "danger" || value === "info";
+    return { source, level };
 }

package/dist/main.d.ts

@@ -19,6 +19,7 @@ export { Radio, RadioGroup, type RadioProps, type RadioGroupProps } from "./radi
 export { Switch, type SwitchProps } from "./switch.js";
 export { Select, type SelectProps, type SelectOption } from "./select.js";
 export { Slider, type SliderProps } from "./slider.js";
+export { ScrollArea, type ScrollAreaAxis, type ScrollAreaProps } from "./scroll-area.js";
 export type { ControlColor } from "./control.js";
 export type { LayoutAlignment, LayoutGap, LayoutJustification } from "./layout.js";
 export { resolveRadius, type Radius, type RadiusProps } from "./radius.js";

package/dist/main.js

@@ -19,6 +19,7 @@ export { Radio, RadioGroup } from "./radio.js";
 export { Switch } from "./switch.js";
 export { Select } from "./select.js";
 export { Slider } from "./slider.js";
+export { ScrollArea } from "./scroll-area.js";
 export { resolveRadius } from "./radius.js";
 export { resolveSpacing } from "./spacing.js";
 export { useColor } from "./color.js";

package/dist/motion-style.d.ts

@@ -9,5 +9,6 @@ export declare function useControlTransition(reduced?: boolean): Transition;
 /** Per-overlay variables consumed by the shared entrance keyframes. */
 export declare function useOverlayTransition(): CSSProperties;
 export declare const overlayMotionClass = "phreshos-ui-overlay";
+export declare function useTransitionTiming(): CSSProperties;
 /** React hoists and deduplicates this stylesheet, including portals. */
 export default function MotionStyle(): import("react").JSX.Element;

package/dist/motion-style.js

@@ -29,7 +29,7 @@ export function useOverlayTransition() {
     };
 }
 export const overlayMotionClass = "phreshos-ui-overlay";
-function useTransitionTiming() {
+export function useTransitionTiming() {
     const { duration, easing } = useAppearance().transaction;
     return {
         transitionDuration: `${duration}ms`,

package/dist/scroll-area.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef, Ref, ReactNode, UIEventHandler } from "react";
+export type ScrollAreaAxis = "vertical" | "horizontal" | "both";
+export interface ScrollAreaProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onScroll"> {
+    readonly axis?: ScrollAreaAxis;
+    readonly children?: ReactNode;
+    readonly onScroll?: UIEventHandler<HTMLDivElement>;
+    readonly viewportRef?: Ref<HTMLDivElement>;
+}
+/** A native scrolling viewport with locally owned React UI scrollbars. */
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/scroll-area.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { forwardRef, useState } from "react";
+import { useAppearance, useThemedValue } from "./appearance-provider.js";
+import { colorOpacity } from "./color.js";
+import { useTransitionTiming } from "./motion-style.js";
+/** A native scrolling viewport with locally owned React UI scrollbars. */
+export const ScrollArea = forwardRef(function ScrollArea({ axis = "vertical", children, onScroll, style, viewportRef, ...properties }, ref) {
+    const appearance = useAppearance();
+    const foreground = useThemedValue(appearance.colors).foreground;
+    const radius = Math.min(appearance.radius, 8);
+    const vertical = axis === "vertical" || axis === "both";
+    const horizontal = axis === "horizontal" || axis === "both";
+    return _jsxs(BaseScrollArea.Root, { ...properties, "data-phreshos-scroll-area": "", ref: ref, style: {
+            ...style,
+            position: style?.position ?? "relative",
+            minWidth: style?.minWidth ?? 0,
+            minHeight: style?.minHeight ?? 0,
+            overflow: "hidden"
+        }, children: [_jsx(BaseScrollArea.Viewport, { "data-phreshos-scroll-area-viewport": "", ref: viewportRef, onScroll: onScroll, style: {
+                    width: "100%",
+                    height: "100%",
+                    overflowX: horizontal ? "scroll" : "hidden",
+                    overflowY: vertical ? "scroll" : "hidden"
+                }, children: _jsx(BaseScrollArea.Content, { "data-phreshos-scroll-area-content": "", style: vertical && !horizontal ? { minWidth: "100%", width: "100%" } : undefined, children: children }) }), vertical && _jsx(Scrollbar, { orientation: "vertical", foreground: foreground, radius: radius }), horizontal && _jsx(Scrollbar, { orientation: "horizontal", foreground: foreground, radius: radius }), vertical && horizontal && _jsx(BaseScrollArea.Corner, { style: { background: "transparent" } })] });
+});
+function Scrollbar({ orientation, foreground, radius }) {
+    const [hovered, setHovered] = useState(false);
+    const transition = useTransitionTiming();
+    const vertical = orientation === "vertical";
+    return _jsx(BaseScrollArea.Scrollbar, { "data-phreshos-scroll-area-scrollbar": "", orientation: orientation, keepMounted: true, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), style: state => {
+            const present = vertical ? state.hasOverflowY : state.hasOverflowX;
+            return {
+                boxSizing: "border-box",
+                width: vertical ? 16 : undefined,
+                height: vertical ? undefined : 16,
+                padding: 5,
+                opacity: present && (state.hovering || state.scrolling) ? 1 : 0,
+                pointerEvents: present && (state.hovering || state.scrolling) ? "auto" : "none",
+                transitionDuration: transition.transitionDuration,
+                transitionTimingFunction: transition.transitionTimingFunction,
+                transitionProperty: "opacity"
+            };
+        }, children: _jsx(BaseScrollArea.Thumb, { "data-phreshos-scroll-area-thumb": "", style: {
+                borderRadius: radius,
+                backgroundColor: colorOpacity(foreground, hovered ? 0.2 : 0.1),
+                transitionDuration: transition.transitionDuration,
+                transitionTimingFunction: transition.transitionTimingFunction,
+                transitionProperty: "background-color"
+            } }) });
+}

package/dist/select.js

@@ -5,6 +5,7 @@ import { Select as AriaSelect, Button, SelectValue, Popover, ListBox, ListBoxIte
 import { controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
 import { SurfaceButton } from "./control-surface.js";
 import { Surface } from "./surface.js";
+import { ScrollArea } from "./scroll-area.js";
 import { overlayMotionClass, useControlTransition, useOverlayTransition } from "./motion-style.js";
 /** Single selection from string-valued options; keyboard navigation and typeahead stay native to React Aria. */
 export const Select = forwardRef(function Select({ label, description, errorMessage, disabled, required, invalid, options, value, defaultValue, onChange, size, color, radius, style, material, ...properties }, ref) {
@@ -16,15 +17,15 @@ export const Select = forwardRef(function Select({ label, description, errorMess
                         ...controlStyle(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered, button.isFocusVisible),
                         display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap,
                         cursor: disabled ? "not-allowed" : "pointer", textAlign: "start"
-                    }), children: [_jsx(SelectValue, { style: ({ isPlaceholder }) => ({ opacity: isPlaceholder ? 0.6 : 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }) }), _jsx(motion.svg, { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", initial: false, animate: { rotate: state.isOpen ? 180 : 0 }, transition: transition, style: { flexShrink: 0 }, children: _jsx("path", { d: "m2 4 4 4 4-4" }) })] }), _jsx(Popover, { className: overlayMotionClass, placement: "bottom start", offset: theme.gap, maxHeight: 280 + theme.gap * 2, style: { ...overlayTransition, width: "var(--trigger-width)", maxWidth: "calc(100vw - 16px)" }, children: _jsx(Surface, { style: { padding: theme.gap, display: "flex", flexDirection: "column", maxHeight: "inherit", boxSizing: "border-box" }, children: _jsx(ListBox, { items: options, style: { display: "grid", gap: theme.gap, minHeight: 0, overflow: "auto", outline: "none", fontSize: theme.fontSize, color: theme.foreground }, children: option => _jsx(ListBoxItem, { id: option.value, textValue: option.label, style: item => ({
-                                    ...theme.transition,
-                                    display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap,
-                                    minHeight: theme.height, paddingInline: Math.max(8, theme.spacing), boxSizing: "border-box",
-                                    borderRadius: theme.radius,
-                                    outline: item.isFocused && !item.isSelected ? `2px solid ${theme.foreground}` : "none", outlineOffset: -2,
-                                    cursor: item.isDisabled ? "not-allowed" : "pointer",
-                                    opacity: item.isDisabled ? 0.46 : 1,
-                                    ...(item.isSelected ? item.isFocused ? theme.paints.palette.hover : theme.paints.palette.rest
-                                        : { background: "transparent", color: theme.foreground })
-                                }), children: item => _jsxs(_Fragment, { children: [option.label, _jsx("span", { "aria-hidden": "true", children: item.isSelected ? "✓" : null })] }) }) }) }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] }) });
+                    }), children: [_jsx(SelectValue, { style: ({ isPlaceholder }) => ({ opacity: isPlaceholder ? 0.6 : 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }) }), _jsx(motion.svg, { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", initial: false, animate: { rotate: state.isOpen ? 180 : 0 }, transition: transition, style: { flexShrink: 0 }, children: _jsx("path", { d: "m2 4 4 4 4-4" }) })] }), _jsx(Popover, { className: overlayMotionClass, placement: "bottom start", offset: theme.gap, maxHeight: 280 + theme.gap * 2, style: { ...overlayTransition, width: "var(--trigger-width)", maxWidth: "calc(100vw - 16px)" }, children: _jsx(Surface, { style: { padding: theme.gap, display: "flex", flexDirection: "column", maxHeight: "inherit", boxSizing: "border-box" }, children: _jsx(ScrollArea, { style: { flex: "1 1 auto", minHeight: 0 }, children: _jsx(ListBox, { items: options, style: { display: "grid", gap: theme.gap, outline: "none", fontSize: theme.fontSize, color: theme.foreground }, children: option => _jsx(ListBoxItem, { id: option.value, textValue: option.label, style: item => ({
+                                        ...theme.transition,
+                                        display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap,
+                                        minHeight: theme.height, paddingInline: Math.max(8, theme.spacing), boxSizing: "border-box",
+                                        borderRadius: theme.radius,
+                                        outline: item.isFocused && !item.isSelected ? `2px solid ${theme.foreground}` : "none", outlineOffset: -2,
+                                        cursor: item.isDisabled ? "not-allowed" : "pointer",
+                                        opacity: item.isDisabled ? 0.46 : 1,
+                                        ...(item.isSelected ? item.isFocused ? theme.paints.palette.hover : theme.paints.palette.rest
+                                            : { background: "transparent", color: theme.foreground })
+                                    }), children: item => _jsxs(_Fragment, { children: [option.label, _jsx("span", { "aria-hidden": "true", children: item.isSelected ? "✓" : null })] }) }) }) }) }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] }) });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -55,13 +55,13 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@phreshos/core": "^0.1.47",
+    "@base-ui/react": "^1.7.0",
+    "@phreshos/core": "^0.1.49",
     "colorjs.io": "^0.7.1",
     "motion": "^13.2.0",
     "react-aria-components": "^1.20.0"
   },
   "devDependencies": {
-    "@base-ui/react": "^1.7.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

package/dist/document-scrollbars.d.ts

@@ -1,6 +0,0 @@
-import type { Appearance, Theme } from "@phreshos/core";
-/** Applies one Appearance to the complete owning document without rendering. */
-export default function DocumentScrollbars({ appearance, theme }: Readonly<{
-    appearance: Appearance;
-    theme: Theme;
-}>): null;

package/dist/document-scrollbars.js

@@ -1,164 +0,0 @@
-import { useInsertionEffect, useRef } from "react";
-import { colorOpacity } from "./color.js";
-const properties = {
-    thumb: "--phreshos-scrollbar-thumb",
-    thumbHover: "--phreshos-scrollbar-thumb-hover",
-    size: "--phreshos-scrollbar-size",
-    padding: "--phreshos-scrollbar-padding",
-    radius: "--phreshos-scrollbar-radius"
-};
-const stylesheet = `
-@supports not selector(::-webkit-scrollbar) {
-  * {
-    scrollbar-color: var(${properties.thumb}) transparent;
-    scrollbar-width: thin;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    * {
-      scrollbar-color: transparent transparent;
-    }
-
-    *:hover {
-      scrollbar-color: var(${properties.thumb}) transparent;
-    }
-  }
-
-  @media (forced-colors: active) {
-    *,
-    *:hover {
-      scrollbar-color: auto;
-    }
-  }
-}
-
-@supports selector(::-webkit-scrollbar) {
-  *::-webkit-scrollbar {
-    width: var(${properties.size});
-    height: var(${properties.size});
-    background: transparent;
-  }
-
-  *::-webkit-scrollbar-track,
-  *::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  *::-webkit-scrollbar-button {
-    display: none;
-  }
-
-  *::-webkit-scrollbar-thumb {
-    border: var(${properties.padding}) solid transparent;
-    border-radius: var(${properties.radius});
-    background-color: var(${properties.thumb});
-    background-clip: padding-box;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    *:hover {
-      --phreshos-scrollbar-repaint: ;
-    }
-
-    *::-webkit-scrollbar-thumb {
-      background-color: transparent;
-    }
-
-    *:hover::-webkit-scrollbar-thumb {
-      background-color: var(${properties.thumb});
-    }
-
-    *::-webkit-scrollbar-thumb:hover {
-      background-color: var(${properties.thumbHover});
-    }
-  }
-
-  @media (forced-colors: active) {
-    *::-webkit-scrollbar-thumb,
-    *:hover::-webkit-scrollbar-thumb,
-    *::-webkit-scrollbar-thumb:hover {
-      background-color: ButtonText;
-    }
-  }
-}
-`;
-const documents = new WeakMap();
-/** Applies one Appearance to the complete owning document without rendering. */
-export default function DocumentScrollbars({ appearance, theme }) {
-    const identity = useRef(Symbol("AppearanceProvider")).current;
-    const foreground = appearance.colors[theme].foreground;
-    const padding = 5;
-    const thumbSize = 6;
-    const size = thumbSize + padding * 2;
-    const values = {
-        thumb: colorOpacity(foreground, 0.1),
-        thumbHover: colorOpacity(foreground, 0.2),
-        size: `${size}px`,
-        padding: `${padding}px`,
-        radius: `${Math.min(appearance.radius, padding + thumbSize / 2)}px`
-    };
-    useInsertionEffect(function () {
-        if (typeof document === "undefined")
-            return;
-        return register(document, identity, values);
-    }, []);
-    useInsertionEffect(function () {
-        if (typeof document !== "undefined")
-            update(document, identity, values);
-    }, [values.thumb, values.thumbHover, values.size, values.padding, values.radius]);
-    return null;
-}
-function register(owner, identity, values) {
-    const state = documents.get(owner) ?? create(owner);
-    state.providers.set(identity, values);
-    apply(state);
-    return function () {
-        state.providers.delete(identity);
-        if (state.providers.size) {
-            apply(state);
-            return;
-        }
-        state.style.remove();
-        restore(state);
-        documents.delete(owner);
-    };
-}
-function update(owner, identity, values) {
-    const state = documents.get(owner);
-    if (!state?.providers.has(identity))
-        return;
-    state.providers.set(identity, values);
-    apply(state);
-}
-function create(owner) {
-    const root = owner.documentElement;
-    const style = owner.createElement("style");
-    const original = new Map(Object.values(properties).map(property => [property, {
-            value: root.style.getPropertyValue(property),
-            priority: root.style.getPropertyPriority(property)
-        }]));
-    style.dataset.phreshosScrollbars = "";
-    style.textContent = stylesheet;
-    owner.head.append(style);
-    const state = { root, style, original, providers: new Map() };
-    documents.set(owner, state);
-    return state;
-}
-function apply(state) {
-    const values = [...state.providers.values()].at(-1);
-    if (!values)
-        return;
-    state.root.style.setProperty(properties.thumb, values.thumb);
-    state.root.style.setProperty(properties.thumbHover, values.thumbHover);
-    state.root.style.setProperty(properties.size, values.size);
-    state.root.style.setProperty(properties.padding, values.padding);
-    state.root.style.setProperty(properties.radius, values.radius);
-}
-function restore(state) {
-    for (const [property, original] of state.original) {
-        if (original.value)
-            state.root.style.setProperty(property, original.value, original.priority);
-        else
-            state.root.style.removeProperty(property);
-    }
-}