@phreshos/react-ui 0.1.36 → 0.1.37

package/dist/appearance-context.d.ts

@@ -1,54 +0,0 @@
-import { type Appearance, type ThemedValue } from "./appearance.js";
-import type { Preferences } from "./preferences.js";
-export declare const AppearanceContext: import("react").Context<Appearance>;
-export interface PreferencesSource {
-    readonly getSnapshot: () => Preferences;
-    readonly getServerSnapshot: () => Preferences;
-    readonly subscribe: (change: () => void) => () => void;
-}
-/** Returns the nearest unresolved appearance, or React UI's default. */
-export declare function useAppearance(): Appearance;
-/** Returns the nearest complete Preferences, or reactively follows the browser. */
-export declare function usePreferences(): Preferences;
-/** Reactively reads the browser's complete visual preferences. */
-export declare function useBrowserPreferences(): Preferences;
-/** Selects the active branch of one complete ThemedValue. */
-export declare function useThemedValue<Value>(value: ThemedValue<Value>): Value;
-/** Resolves one coherent Appearance snapshot for internal component derivation. */
-export declare function useResolvedAppearance(): {
-    appearance: Appearance;
-    preferences: Preferences;
-    colors: Readonly<{
-        background: string;
-        foreground: string;
-        default: string;
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        info: string;
-    }>;
-    material: Readonly<{
-        grain: number;
-        grainAmount: number;
-        backdrop: number;
-        opacity: number;
-        distortion: number;
-        saturation: number;
-    }>;
-    shadow: Readonly<{
-        x: number;
-        y: number;
-        blur: number;
-        spread: number;
-        opacity: number;
-    }>;
-    transaction: Readonly<{
-        duration: number;
-        easing: import("@phreshos/core").Easing;
-    }>;
-};
-/** Creates a stable source for a complete explicitly supplied Preferences value. */
-export declare function fixedPreferencesSource(preferences: Preferences): PreferencesSource;
-export declare const PreferencesContext: import("react").Context<PreferencesSource>;

package/dist/appearance.d.ts

@@ -1,11 +0,0 @@
-import { appearanceLimits, type Appearance as SystemAppearance, type AppearanceUpdate as SystemAppearanceUpdate, type AppearanceColor, type AppearanceColors, type AppearanceMaterial, type AppearanceRange, type AppearanceShadow, type AppearanceTransaction, type Easing, type ThemedValue } from "@phreshos/core";
-/** Complete visual input consumed by React UI. */
-export type Appearance = Pick<SystemAppearance, "colors" | "spacing" | "radius" | "shadow" | "material" | "transaction">;
-type AppearanceUpdateFields = Pick<SystemAppearanceUpdate, "colors" | "spacing" | "radius" | "shadow" | "material" | "transaction">;
-/** At least one partial visual field recursively merged with the nearest UIProvider. */
-export type AppearanceUpdate = {
-    [Field in keyof AppearanceUpdateFields]-?: Readonly<Required<Pick<AppearanceUpdateFields, Field>> & Omit<AppearanceUpdateFields, Field>>;
-}[keyof AppearanceUpdateFields];
-export { appearanceLimits, type AppearanceColor, type AppearanceColors, type AppearanceMaterial, type AppearanceRange, type AppearanceShadow, type AppearanceTransaction, type Easing, type ThemedValue };
-/** React UI's default visual input, derived from the System default. */
-export declare const defaultAppearance: Appearance;

package/dist/appearance.js

@@ -1,11 +0,0 @@
-import { appearanceLimits, defaultAppearance as systemDefaultAppearance } from "@phreshos/core";
-export { appearanceLimits };
-/** React UI's default visual input, derived from the System default. */
-export const defaultAppearance = Object.freeze({
-    colors: systemDefaultAppearance.colors,
-    spacing: systemDefaultAppearance.spacing,
-    radius: systemDefaultAppearance.radius,
-    shadow: systemDefaultAppearance.shadow,
-    material: systemDefaultAppearance.material,
-    transaction: systemDefaultAppearance.transaction
-});

package/dist/color.d.ts

@@ -1,69 +0,0 @@
-import type { AppearanceColor, AppearanceColors } from "./appearance.js";
-/** A visual treatment derived from one concrete CSS color. */
-export type ColorLevel = "subtle" | "soft" | "base" | "strong" | "intense";
-/** Every visual treatment derived from one concrete CSS color. */
-export type ColorScale = Readonly<Record<ColorLevel, string>>;
-/** One Appearance color and resting level, or a direct CSS color. */
-export type Color = `${AppearanceColor}:${ColorLevel}` | (string & {});
-export declare const defaultColor = "background:base";
-/** Distinguishes derived color levels from direct CSS colors. */
-export declare function isColorLevel(value: string | undefined): value is ColorLevel;
-/** Derives visual treatments while preserving the concrete value at `base`. */
-export declare function color(value: string): ColorScale;
-/** Resolves the same named treatment for solid paint and contrast calculations. */
-export declare function resolveColorLevel(value: string, level: ColorLevel): string;
-/** Returns the complete visual treatments derived from one concrete color. */
-export declare function useColor(value: string): ColorScale;
-/** Returns the readable Appearance content color for one semantic or CSS fill. */
-export declare function useContrastingColor(value: Color): string;
-/** Resolves a semantic color from an already selected Appearance branch. */
-export declare function resolveColor(value: Color | undefined, colors: AppearanceColors): string;
-/** Resolves opaque control paint from an already selected Appearance branch. */
-export declare function resolveSolidColor(value: Color, colors: AppearanceColors): string;
-/** Applies material opacity without restricting the source CSS color syntax. */
-export declare function colorOpacity(value: string, opacity: number): string;
-/** Reads perceptual lightness from a resolved CSS color. */
-export declare function colorLightness(value: string): number;
-/** Orders resolved CSS colors by perceptual lightness, never by their role. */
-export declare function orderColors(first: string, second: string): {
-    lighter: string;
-    darker: string;
-};
-/** Solid controls use opaque, gamut-mapped colors for both paint and contrast. */
-export declare function opaqueColor(value: string): string;
-/** Changes only perceptual lightness; theme names never determine direction. */
-export declare function colorShade(value: string, amount: number): string;
-/** Chooses the perceptually opposite Appearance color for the actual painted fill. */
-export declare function onColor(fill: string, background: string, foreground: string): string;
-/** Chooses readable content when the fill can be evaluated, otherwise preserves Appearance foreground. */
-export declare function contrastingColor(value: Color, colors: AppearanceColors): string;
-/** Solid controls start at base; interaction shades preserve its text choice. */
-export declare function solidColors(base: string, background: string, foreground: string): {
-    rest: {
-        background: string;
-        color: string;
-    };
-    hover: {
-        background: string;
-        color: string;
-    };
-    pressed: {
-        background: string;
-        color: string;
-    };
-};
-/** Low-emphasis interaction paints derived from the same component-owned base. */
-export declare function subtleColors(base: string, background: string, foreground: string): {
-    rest: {
-        background: string;
-        color: string;
-    };
-    hover: {
-        background: string;
-        color: string;
-    };
-    pressed: {
-        background: string;
-        color: string;
-    };
-};

package/dist/color.js

@@ -1,192 +0,0 @@
-import { useMemo } from "react";
-import { useResolvedAppearance } from "./appearance-context.js";
-import ColorSpace from "colorjs.io/src/ColorSpace.js";
-import { mix } from "colorjs.io/src/interpolation.js";
-import parse from "colorjs.io/src/parse.js";
-import serialize from "colorjs.io/src/serialize.js";
-import to from "colorjs.io/src/to.js";
-import toGamut from "colorjs.io/src/toGamut.js";
-import sRGB from "colorjs.io/src/spaces/srgb.js";
-import sRGB_Linear from "colorjs.io/src/spaces/srgb-linear.js";
-import HSL from "colorjs.io/src/spaces/hsl.js";
-import HWB from "colorjs.io/src/spaces/hwb.js";
-import Lab from "colorjs.io/src/spaces/lab.js";
-import LCH from "colorjs.io/src/spaces/lch.js";
-import OKLab from "colorjs.io/src/spaces/oklab.js";
-import OKLCH from "colorjs.io/src/spaces/oklch.js";
-import P3 from "colorjs.io/src/spaces/p3.js";
-import A98RGB from "colorjs.io/src/spaces/a98rgb.js";
-import ProPhoto from "colorjs.io/src/spaces/prophoto.js";
-import REC_2020 from "colorjs.io/src/spaces/rec2020.js";
-import XYZ_D50 from "colorjs.io/src/spaces/xyz-d50.js";
-import XYZ_D65 from "colorjs.io/src/spaces/xyz-d65.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);
-export const defaultColor = "background:base";
-const treatments = {
-    subtle: { weight: 25, target: "white" },
-    soft: { weight: 60, target: "white" },
-    strong: { weight: 82, target: "black" },
-    intense: { weight: 68, target: "black" }
-};
-/** Distinguishes derived color levels from direct CSS colors. */
-export function isColorLevel(value) {
-    return value === "subtle" || value === "soft" || value === "base" || value === "strong" || value === "intense";
-}
-/** Derives visual treatments while preserving the concrete value at `base`. */
-export function color(value) {
-    const shade = (level) => {
-        const { weight, target } = treatments[level];
-        return `color-mix(in oklch, ${value} ${weight}%, ${target})`;
-    };
-    return Object.freeze({
-        subtle: shade("subtle"),
-        soft: shade("soft"),
-        base: value,
-        strong: shade("strong"),
-        intense: shade("intense")
-    });
-}
-/** Resolves the same named treatment for solid paint and contrast calculations. */
-export function resolveColorLevel(value, level) {
-    if (level === "base")
-        return resolvableOpaqueColor(value) ?? value;
-    const opaque = resolvableOpaqueColor(value);
-    if (opaque == null)
-        return color(value)[level];
-    const { weight, target } = treatments[level];
-    return opaqueColor(serialize(mix(opaque, target, 1 - weight / 100, { space: "oklch" })));
-}
-/** Returns the complete visual treatments derived from one concrete color. */
-export function useColor(value) {
-    return useMemo(() => color(value), [value]);
-}
-/** Returns the readable Appearance content color for one semantic or CSS fill. */
-export function useContrastingColor(value) {
-    const { colors } = useResolvedAppearance();
-    return useMemo(() => contrastingColor(value, colors), [value, colors]);
-}
-/** Resolves a semantic color from an already selected Appearance branch. */
-export function resolveColor(value, colors) {
-    const resolved = value ?? defaultColor;
-    const semantic = parseSemanticColor(resolved, colors);
-    return semantic ? color(semantic.source)[semantic.level] : resolved;
-}
-/** Resolves opaque control paint from an already selected Appearance branch. */
-export function resolveSolidColor(value, colors) {
-    const semantic = parseSemanticColor(value, colors);
-    return semantic ? resolveColorLevel(semantic.source, semantic.level) : resolvableOpaqueColor(value) ?? value;
-}
-/** Applies material opacity without restricting the source CSS color syntax. */
-export function colorOpacity(value, opacity) {
-    const percentage = Math.round(opacity * 10_000) / 100;
-    return `color-mix(in srgb, ${value} ${percentage}%, transparent)`;
-}
-/** Reads perceptual lightness from a resolved CSS color. */
-export function colorLightness(value) {
-    // A missing CSS channel (`none`) contributes zero outside interpolation.
-    return OKLCH.from(parse(value))[0] ?? 0;
-}
-/** Orders resolved CSS colors by perceptual lightness, never by their role. */
-export function orderColors(first, second) {
-    const difference = colorLightness(first) - colorLightness(second);
-    return difference > 0 || (difference === 0 && first >= second)
-        ? { lighter: first, darker: second }
-        : { lighter: second, darker: first };
-}
-/** Solid controls use opaque, gamut-mapped colors for both paint and contrast. */
-export function opaqueColor(value) {
-    return serialize(toGamut(to({ ...parse(value), alpha: 1 }, "srgb")), { format: "rgb", precision: 6 });
-}
-/** Changes only perceptual lightness; theme names never determine direction. */
-export function colorShade(value, amount) {
-    const result = to(value, "oklch");
-    const lightness = result.coords[0] ?? 0;
-    result.coords[0] = Math.max(0, Math.min(1, lightness + (lightness > 0.6 ? -amount : amount)));
-    return opaqueColor(serialize(result));
-}
-/** Chooses the perceptually opposite Appearance color for the actual painted fill. */
-export function onColor(fill, background, foreground) {
-    const first = opaqueColor(background);
-    const second = opaqueColor(foreground);
-    const candidates = orderColors(first, second);
-    const darker = colorLightness(candidates.darker);
-    const lighter = colorLightness(candidates.lighter);
-    const threshold = darker + (lighter - darker) * 2 / 3;
-    return colorLightness(opaqueColor(fill)) < threshold ? candidates.lighter : candidates.darker;
-}
-/** Chooses readable content when the fill can be evaluated, otherwise preserves Appearance foreground. */
-export function contrastingColor(value, colors) {
-    try {
-        return onColor(resolveSolidColor(value, colors), colors.background, colors.foreground);
-    }
-    catch {
-        return colors.foreground;
-    }
-}
-/** Solid controls start at base; interaction shades preserve its text choice. */
-export function solidColors(base, background, foreground) {
-    const fill = resolveColorLevel(base, "base");
-    const content = resolvableOnColor(fill, background, foreground) ?? foreground;
-    const paint = (background) => ({ background, color: content });
-    const concrete = resolvableOpaqueColor(fill);
-    if (concrete == null)
-        return {
-            rest: paint(fill),
-            hover: paint(cssInteractionColor(fill, foreground, 0.045)),
-            pressed: paint(cssInteractionColor(fill, foreground, 0.085))
-        };
-    return {
-        rest: paint(concrete),
-        hover: paint(colorShade(concrete, 0.045)),
-        pressed: paint(colorShade(concrete, 0.085))
-    };
-}
-/** Low-emphasis interaction paints derived from the same component-owned base. */
-export function subtleColors(base, background, foreground) {
-    const fill = resolveColorLevel(base, "base");
-    const canvas = resolvableOpaqueColor(background) ?? background;
-    const concrete = resolvableOpaqueColor(fill);
-    const paint = (weight) => {
-        const mixed = concrete == null
-            ? `color-mix(in oklch, ${canvas} ${Math.round((1 - weight) * 10_000) / 100}%, ${fill})`
-            : opaqueColor(serialize(mix(canvas, concrete, weight, { space: "oklch" })));
-        return { background: mixed, color: resolvableOnColor(mixed, background, foreground) ?? foreground };
-    };
-    return {
-        rest: paint(0.25),
-        hover: paint(0.5),
-        pressed: paint(0.65)
-    };
-}
-function resolvableOpaqueColor(value) {
-    try {
-        return opaqueColor(value);
-    }
-    catch {
-        return null;
-    }
-}
-function resolvableOnColor(fill, background, foreground) {
-    try {
-        return onColor(fill, background, foreground);
-    }
-    catch {
-        return null;
-    }
-}
-function cssInteractionColor(base, target, amount) {
-    return `color-mix(in oklch, ${base} ${Math.round((1 - amount) * 10_000) / 100}%, ${target})`;
-}
-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);
-    const source = Reflect.get(colors, name);
-    if (typeof source !== "string" || !isColorLevel(level))
-        return null;
-    return { source, level };
-}

package/dist/control-surface.d.ts

@@ -1,20 +0,0 @@
-import type { ComponentPropsWithRef, CSSProperties, ReactNode } from "react";
-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, shadow }: {
-    readonly native: ComponentPropsWithRef<"button">;
-    readonly paint: Paint;
-} & 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, shadow, style }: Readonly<{
-    paint: Paint;
-    radius: CSSProperties["borderRadius"];
-    children: ReactNode;
-    style?: CSSProperties;
-} & MaterialOverrides & ShadowOverrides>): import("react").JSX.Element;
-export {};

package/dist/control-surface.js

@@ -1,11 +0,0 @@
-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, shadow }) {
-    const { ref, style, children, ...properties } = native;
-    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, shadow, style }) {
-    return _jsx(Surface, { as: "span", color: paint.background, material: options, shadow: shadow, radius: radius, style: { color: paint.color, display: "grid", minWidth: 0, ...style }, children: children });
-}

package/dist/control.d.ts

@@ -1,70 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-import { type RadiusProps } from "./radius.js";
-import { type ScaleLevel } from "./scale.js";
-import { solidColors } from "./color.js";
-import { type Color } from "./color.js";
-import type { Transition } from "motion/react";
-/** Semantic Appearance colors accepted by interactive controls. */
-export type ControlColor = Color;
-export interface ControlProps {
-    readonly size?: ScaleLevel;
-    readonly color?: ControlColor;
-    readonly className?: string;
-    readonly style?: CSSProperties;
-    readonly disabled?: boolean;
-}
-export interface FieldProps {
-    /** Visible accessible label. Otherwise supply aria-label or aria-labelledby. */
-    readonly label?: ReactNode;
-    readonly description?: ReactNode;
-    readonly errorMessage?: ReactNode;
-    readonly required?: boolean;
-    readonly invalid?: boolean;
-}
-/** Names owned by our contract, not a second set of primitive-specific aliases. */
-export type ControlOverrides = keyof ControlProps | keyof FieldProps | "children" | "isDisabled" | "isRequired" | "isInvalid";
-export declare const controlFontSizes: Readonly<Record<ScaleLevel, CSSProperties["fontSize"]>>;
-/** Shared interaction attenuation, derived consistently across control families. */
-export declare const controlOpacity: Readonly<{
-    disabled: 0.46;
-    pending: 0.68;
-    secondary: 0.7;
-    placeholder: 0.6;
-    separator: 0.14;
-}>;
-/** Shared emphasis used by labels and control-owned headings. */
-export declare const controlFontWeight = 600;
-type SolidColors = ReturnType<typeof solidColors>;
-export interface ControlTheme {
-    readonly transition: CSSProperties;
-    readonly motionTransition: Transition;
-    readonly animations: boolean;
-    readonly spacing: number;
-    readonly foreground: string;
-    readonly background: string;
-    readonly tint: string;
-    readonly focusColor: string;
-    readonly danger: string;
-    readonly paints: {
-        readonly palette: SolidColors;
-        readonly subtle: SolidColors;
-        readonly danger: SolidColors;
-    };
-    readonly radius: CSSProperties["borderRadius"];
-    readonly fontSize: CSSProperties["fontSize"];
-    readonly indicatorSize: number;
-    readonly height: number;
-    readonly gap: number;
-}
-export declare function useControlTheme({ size, color, radius }: ControlProps & RadiusProps): ControlTheme;
-export declare function fieldStyle(theme: ControlTheme, disabled?: boolean, style?: CSSProperties): CSSProperties;
-export declare function controlPaint(theme: ControlTheme, focused: boolean, invalid: boolean, hovered?: boolean): {
-    background: string;
-    color: string;
-};
-export declare function controlStyle(theme: ControlTheme, focused: boolean, invalid: boolean, hovered?: boolean, focusVisible?: boolean): CSSProperties;
-export declare function FieldLabel({ label }: Pick<FieldProps, "label">): import("react").JSX.Element | null;
-export declare function FieldFeedback({ description, errorMessage, theme }: Pick<FieldProps, "description" | "errorMessage"> & {
-    readonly theme: ControlTheme;
-}): import("react").JSX.Element;
-export {};

package/dist/control.js

@@ -1,105 +0,0 @@
-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 { useResolvedAppearance } from "./appearance-context.js";
-import { resolveRadius } from "./radius.js";
-import { scale } from "./scale.js";
-import { colorOpacity, solidColors, subtleColors } from "./color.js";
-import { resolveSolidColor } from "./color.js";
-import { controlTransition, visualTransition } from "./motion-style.js";
-export const controlFontSizes = Object.freeze({
-    xsmall: "0.6875em",
-    small: "0.75em",
-    medium: "0.8125em",
-    large: "0.875em",
-    xlarge: "0.9375em"
-});
-/** Shared interaction attenuation, derived consistently across control families. */
-export const controlOpacity = Object.freeze({
-    disabled: 0.46,
-    pending: 0.68,
-    secondary: 0.7,
-    placeholder: 0.6,
-    separator: 0.14
-});
-/** Shared emphasis used by labels and control-owned headings. */
-export const controlFontWeight = 600;
-export function useControlTheme({ size = "medium", color, radius = "medium" }) {
-    const resolved = useResolvedAppearance();
-    const { appearance, colors } = resolved;
-    const transition = useMemo(() => visualTransition(resolved.transaction, resolved.preferences.animations), [resolved.transaction, resolved.preferences.animations]);
-    const motionTransition = useMemo(() => controlTransition(resolved.transaction, resolved.preferences.animations), [resolved.transaction, resolved.preferences.animations]);
-    const spacing = scale(appearance.spacing, size);
-    const foreground = colors.foreground;
-    const background = colors.background;
-    // One owner-provided base drives every ordinary interaction state; adding
-    // hidden state colors here would make the public color contract incomplete.
-    const tint = resolveSolidColor(color ?? "default:base", colors);
-    const danger = resolveSolidColor("danger:base", colors);
-    const paints = useMemo(() => ({
-        palette: solidColors(tint, background, foreground),
-        subtle: subtleColors(tint, background, foreground),
-        danger: solidColors(danger, background, foreground)
-    }), [tint, background, foreground, danger]);
-    return useMemo(() => ({
-        transition,
-        motionTransition,
-        animations: resolved.preferences.animations,
-        spacing,
-        foreground,
-        background,
-        tint,
-        focusColor: colorOpacity(tint, 0.2),
-        danger,
-        paints,
-        radius: resolveRadius(radius, appearance),
-        fontSize: controlFontSizes[size],
-        indicatorSize: Math.max(16, 16 + spacing / 4),
-        height: Math.max(24, 24 + spacing),
-        gap: Math.max(4, spacing / 2)
-    }), [appearance, colors, transition, motionTransition, resolved.preferences.animations, spacing, foreground, background, tint, danger, paints, radius, size]);
-}
-export function fieldStyle(theme, disabled = false, style) {
-    return {
-        ...style,
-        ...theme.transition,
-        display: "grid",
-        gap: theme.gap,
-        minWidth: 0,
-        fontFamily: "inherit",
-        fontSize: theme.fontSize,
-        lineHeight: 1.5,
-        opacity: disabled ? controlOpacity.disabled : 1
-    };
-}
-export function controlPaint(theme, focused, invalid, hovered = false) {
-    const paints = invalid ? theme.paints.danger : theme.paints.palette;
-    return focused ? paints.pressed : hovered ? paints.hover : paints.rest;
-}
-export function controlStyle(theme, focused, invalid, hovered = false, focusVisible = focused) {
-    const paint = controlPaint(theme, focused, invalid, hovered);
-    return {
-        ...theme.transition,
-        appearance: "none",
-        boxSizing: "border-box",
-        width: "100%",
-        minWidth: 0,
-        height: theme.height,
-        paddingBlock: 0,
-        paddingInline: Math.max(8, theme.spacing),
-        border: 0,
-        borderRadius: theme.radius,
-        outline: focusVisible ? `1px solid ${theme.focusColor}` : "none",
-        outlineOffset: 1,
-        ...paint,
-        caretColor: paint.color,
-        font: "inherit",
-        lineHeight: 1.5
-    };
-}
-export function FieldLabel({ label }) {
-    return label == null ? null : _jsx(Label, { style: { fontWeight: controlFontWeight }, children: label });
-}
-export function FieldFeedback({ description, errorMessage, theme }) {
-    return _jsxs(_Fragment, { children: [description != null && _jsx(Text, { slot: "description", style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description }), _jsx(FieldError, { style: { fontSize: "0.92em", color: theme.danger }, children: errorMessage })] });
-}

package/dist/field-style.d.ts

@@ -1,3 +0,0 @@
-export declare const textControlClass = "phreshos-ui-text-control";
-/** Placeholder contrast follows the control's chosen text color, not browser gray. */
-export default function FieldStyle(): import("react").JSX.Element;

package/dist/field-style.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { controlOpacity } from "./control.js";
-export const textControlClass = "phreshos-ui-text-control";
-/** Placeholder contrast follows the control's chosen text color, not browser gray. */
-export default function FieldStyle() {
-    return _jsx("style", { href: "phreshos-react-ui-fields", precedence: "phreshos", children: `
-.phreshos-ui-text-control::placeholder {
-    color: inherit;
-    opacity: ${controlOpacity.placeholder};
-}
-` });
-}

package/dist/material-paint.d.ts

@@ -1,13 +0,0 @@
-import type { CSSProperties } from "react";
-interface MaterialPaintProps {
-    readonly color: string;
-    readonly distortion: number;
-    readonly grain: number;
-    readonly grainAmount: number;
-    readonly identity: string;
-    readonly opacity: number;
-    readonly transition: CSSProperties;
-}
-/** The fill, refraction definition, and grain of one Surface. */
-export declare function MaterialPaint({ color, distortion, grain, grainAmount, identity, opacity, transition }: MaterialPaintProps): import("react").JSX.Element | null;
-export {};