@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/resizable.props-RxFY5tm_.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode, Ref } from 'react';
+import { PanelImperativeHandle } from 'react-resizable-panels';
+
+/** Panel sizes by panel id, as percentages of the group. */
+type ResizableLayout = Record<string, number>;
+interface ResizableGroupProps {
+    /** `horizontal`: the panels sit side by side; `vertical`: one above the other. */
+    orientation: "horizontal" | "vertical";
+    /** ResizablePanel and ResizableSeparator, in order. */
+    children: ReactNode;
+    /** The sizes to open on (a remembered layout). Keys must be the panels' ids. */
+    defaultLayout?: ResizableLayout;
+    /** The sizes once a change has settled (a drag released, a collapse, a keyboard step). */
+    onLayoutChanged?: (layout: ResizableLayout) => void;
+    id?: string;
+    className?: string;
+}
+/** Collapse, expand, resize and ask a panel from outside. */
+type ResizablePanelHandle = PanelImperativeHandle;
+/** A size: a number is pixels, a string without a unit is a percentage (`"50"`), a unit is honoured (`"20rem"`). */
+type PanelSize = number | string;
+interface ResizablePanelProps {
+    /** Names the panel in the group's layout. */
+    id: string;
+    children: ReactNode;
+    /** Can be dragged shut (to `collapsedSize`) past `collapsedThreshold`. */
+    collapsible?: boolean;
+    collapsedSize?: PanelSize;
+    collapsedThreshold?: PanelSize;
+    defaultSize?: PanelSize;
+    minSize?: PanelSize;
+    maxSize?: PanelSize;
+    panelRef?: Ref<ResizablePanelHandle | null>;
+    className?: string;
+}
+interface ResizableSeparatorProps {
+    /** The control's accessible name ("Resize columns"). */
+    label: string;
+    /** The group's orientation: a horizontal group's separators stand upright. */
+    orientation: "horizontal" | "vertical";
+    className?: string;
+}
+
+export type { PanelSize as P, ResizableGroupProps as R, ResizableLayout as a, ResizablePanelHandle as b, ResizablePanelProps as c, ResizableSeparatorProps as d };

package/dist/section-card-B7c5uc08.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import { C as Color } from './index-BQANnKs9.js';
+import { k as StyleAxisProps } from './style-axes-DSQ2DGc5.js';
+import { f as Variant } from './variant-D81RhpbR.js';
+
+type SectionCardSize = "sm" | "default" | "lg";
+/** `solid` / `soft` / `outline` / `gradient` — see `resolveVariantStyles` in `@/utils/variant`. */
+type SectionCardVariant = Variant;
+/** Style axes: `radius` and `elevation` (its border comes from `variant`). */
+interface SectionCardProps extends Pick<StyleAxisProps, "radius" | "elevation"> {
+    icon?: ReactNode;
+    primaryText?: ReactNode;
+    secondaryText?: ReactNode;
+    /**
+     * When `true`, keeps `secondaryText` on one line with ellipsis and shows a
+     * tooltip on overflow. When `false`, the full text wraps onto as many lines
+     * as needed and no tooltip is rendered. Defaults to `true`.
+     */
+    truncateSecondaryText?: boolean;
+    actions?: ReactNode;
+    allowCollapse?: boolean;
+    /**
+     * Hides the chevron toggle in the header's right column. The header row
+     * stays a labelled collapsible trigger, so use this only when something
+     * else in the header (an action button, for instance) signals that the
+     * card can be expanded. Ignored when `allowCollapse` is `false`.
+     */
+    hideCollapseIcon?: boolean;
+    defaultOpen?: boolean;
+    /**
+     * Controlled open state of the collapsible section. When set, the card
+     * follows this value and reports user toggles through `onOpenChange`
+     * without changing on its own; leave it undefined to keep the
+     * `defaultOpen`-seeded internal state.
+     */
+    open?: boolean;
+    size?: SectionCardSize;
+    /**
+     * When set, surface and header text use {@link resolveVariantStyles}.
+     * Defaults to `outline`.
+     */
+    variant?: SectionCardVariant;
+    /** Preset token or CSS color string; used with `variant` (defaults to `gray`). */
+    color?: Color;
+    children?: ReactNode;
+    /**
+     * Classes for the outer Card surface. Whenever the card can open and close
+     * (`allowCollapse` or `expandOnHover`), that surface carries
+     * `data-state="open"` or `data-state="closed"`, so each state can be styled
+     * without tracking it, through the `data-[state=open]:` and
+     * `data-[state=closed]:` variants. A card that cannot collapse has no
+     * `data-state`.
+     */
+    className?: string;
+    /** Inline style forwarded to the outer Card surface (e.g. a fixed `height`). */
+    style?: CSSProperties;
+    /**
+     * Makes the Card a flex column and lets its body fill the remaining height.
+     * Use with a fixed `height` (via `style`) so body content can scroll internally.
+     */
+    fillHeight?: boolean;
+    /**
+     * Called with `true` when the body expands and `false` when it collapses,
+     * whether by a click on the header or chevron, or by hover and focus with
+     * `expandOnHover`. Hover changes are reported once they settle, so a
+     * pointer that leaves and returns within the close delay reports nothing.
+     * Use it to switch `variant` or `color` by state; for purely visual
+     * changes the `data-state` attribute (see `className`) needs no state.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Starts collapsed and expands while the pointer is over the card (or focus
+     * is inside it), collapsing again once it leaves. There is no chevron, and
+     * `allowCollapse`, `hideCollapseIcon`, `defaultOpen`, `open` and
+     * `fillHeight` are ignored; `onOpenChange` still reports each change. On
+     * touch screens a tap on the header toggles the body. While open, `icon`
+     * pops and tilts slightly. Defaults to `false`.
+     */
+    expandOnHover?: boolean;
+}
+declare function SectionCard({ icon, primaryText, secondaryText, truncateSecondaryText, actions, allowCollapse: allowCollapseProp, hideCollapseIcon, defaultOpen, open: controlledOpen, size, variant, color, children, className, style, fillHeight: fillHeightProp, onOpenChange, expandOnHover, radius, elevation, }: SectionCardProps): React.JSX.Element;
+
+export { SectionCard as S, type SectionCardProps as a, type SectionCardSize as b, type SectionCardVariant as c };

package/dist/simple-clickable-card.props-BrPCw7CR.d.ts

@@ -0,0 +1,51 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { C as Color, S as Size } from './index-BQANnKs9.js';
+import { f as Variant } from './variant-D81RhpbR.js';
+import { k as StyleAxisProps } from './style-axes-DSQ2DGc5.js';
+import { b as IconAvatarVariant } from './icon-avatar.props-RYtw2eSW.js';
+
+type SimpleClickableCardVariant = Variant;
+interface SimpleClickableCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "title">, Pick<StyleAxisProps, "radius"> {
+    icon?: ReactNode;
+    /**
+     * Custom leading icon slot. When set, rendered as-is instead of wrapping `icon`
+     * in `IconAvatar` (use for animated or fully custom avatars).
+     */
+    leadingIcon?: ReactNode;
+    title?: ReactNode;
+    /** Secondary line below the title. */
+    description?: ReactNode;
+    /**
+     * When `true` and `title` is a string, keep the title on one line with ellipsis;
+     * show a tooltip if overflow. Ignored for React node titles.
+     */
+    truncateTitle?: boolean;
+    /**
+     * When `true` and `description` is a string, same behavior as `truncateTitle`.
+     * Ignored for React node descriptions.
+     */
+    truncateDescription?: boolean;
+    onClick: NonNullable<ButtonHTMLAttributes<HTMLButtonElement>["onClick"]>;
+    color?: Color;
+    iconAvatarVariant?: IconAvatarVariant;
+    /** Overrides the leading `IconAvatar` color. Defaults from card `variant` and `color`. */
+    iconAvatarColor?: Color;
+    size?: Size;
+    /**
+     * `solid` / `soft` / `outline` / `gradient` — see `resolveVariantStyles`
+     * in `@/utils/variant` for the canonical token mapping (shared with Alert,
+     * Badge, Tag).
+     */
+    variant?: SimpleClickableCardVariant;
+    /** When `true`, hides the trailing end icon (`endIcon` or the default chevron). Defaults to `false`. */
+    hideEndIcon?: boolean;
+    /**
+     * Trailing icon after the title/description. Defaults to `ChevronRight` with theme
+     * foreground styling. Ignored when `hideEndIcon` is `true`.
+     */
+    endIcon?: ReactNode;
+}
+/** Text, surface, and leading icon — shared by `SimpleClickableCard` and `SimpleInfoCard`. */
+type SimpleClickableCardSharedProps = Pick<SimpleClickableCardProps, "icon" | "title" | "description" | "truncateTitle" | "truncateDescription" | "color" | "iconAvatarVariant" | "iconAvatarColor" | "size" | "variant">;
+
+export type { SimpleClickableCardProps as S, SimpleClickableCardSharedProps as a, SimpleClickableCardVariant as b };

package/dist/slot-DGErA9zi.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+type WithAsChild<Base extends object> = (Base & {
+    asChild: true;
+    children: React.ReactElement;
+}) | (Base & {
+    asChild?: false | undefined;
+});
+
+export type { WithAsChild as W };

package/dist/status-badge.props-lKlEOfRt.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement, HTMLAttributes } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { C as Color, S as Size } from './index-BQANnKs9.js';
+import { f as Variant } from './variant-D81RhpbR.js';
+import { k as StyleAxisProps } from './style-axes-DSQ2DGc5.js';
+
+/**
+ * A Lucide icon component (sized by the badge), or a pre-built element such
+ * as a brand/custom SVG icon (rendered as-is, so the caller sets its size).
+ */
+type StatusBadgeIcon = LucideIcon | ReactElement;
+interface StatusBadgeProps extends HTMLAttributes<HTMLDivElement>, Pick<StyleAxisProps, "radius"> {
+    /** Already-translated label. The primitive stays i18n-free. */
+    label: string;
+    /** Optional leading icon. Omit for label-only status chips. */
+    icon?: StatusBadgeIcon;
+    color?: Color;
+    /** Defaults to `"soft"` (matches Badge default). */
+    variant?: Variant;
+    /** Defaults to `"default"`. */
+    size?: Size;
+    /** When true, swaps `icon` for a `Spinner` of matching pixel size. */
+    isLoading?: boolean;
+    /**
+     * Extra classes for the label. Pass `max-sm:sr-only` (with
+     * `className="max-sm:pr-0.5"` to even the padding) for an icon-only badge
+     * on phones whose label stays available to screen readers.
+     */
+    labelClassName?: string;
+}
+
+export type { StatusBadgeIcon as S, StatusBadgeProps as a };

package/dist/style-axes-DSQ2DGc5.d.ts

@@ -0,0 +1,133 @@
+import * as React from 'react';
+
+/**
+ * Style axes: radius, elevation, border and density. Each axis has built-in
+ * values and accepts app values by declaration merging plus registration, the
+ * same way as `VariantRegistry`:
+ *
+ * ```ts
+ * declare module "@espressif/dashboard-ui-components/components" {
+ *   interface RadiusRegistry { squircle: true }
+ * }
+ * registerStyleValue("radius", "squircle", "1.25rem")
+ * ```
+ *
+ * A value is CSS, not a class: components apply it as an inline custom
+ * property, so a registered value needs no generated Tailwind class.
+ */
+interface RadiusRegistry {
+    none: true;
+    xs: true;
+    sm: true;
+    md: true;
+    lg: true;
+    xl: true;
+    "2xl": true;
+    full: true;
+}
+interface ElevationRegistry {
+    none: true;
+    xs: true;
+    sm: true;
+    md: true;
+    lg: true;
+    xl: true;
+}
+interface BorderRegistry {
+    none: true;
+    default: true;
+    strong: true;
+}
+interface DensityRegistry {
+    compact: true;
+    default: true;
+    comfortable: true;
+}
+type Radius = keyof RadiusRegistry;
+type Elevation = keyof ElevationRegistry;
+type Border = keyof BorderRegistry;
+type Density = keyof DensityRegistry;
+type StyleAxis = "radius" | "elevation" | "border" | "density";
+/** The axes whose value is one CSS value (density is a set of tokens). */
+type StyleValueAxis = Exclude<StyleAxis, "density">;
+declare const RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "full"];
+declare const ELEVATIONS: readonly ["none", "xs", "sm", "md", "lg", "xl"];
+declare const BORDERS: readonly ["none", "default", "strong"];
+declare const DENSITIES: readonly ["compact", "default", "comfortable"];
+type AxisValue = {
+    radius: Radius;
+    elevation: Elevation;
+    border: Border;
+    density: Density;
+};
+type BuiltIn = {
+    radius: (typeof RADII)[number];
+    elevation: (typeof ELEVATIONS)[number];
+    border: (typeof BORDERS)[number];
+    density: (typeof DENSITIES)[number];
+};
+/** A density value: library tokens (`--espd-*`) and their values. */
+type DensityTokens = Record<`--espd-${string}`, string>;
+/**
+ * Adds a radius, elevation or border value every component with that axis
+ * accepts. `css` is one CSS value: a length for radius and border, a
+ * `box-shadow` for elevation. Registering a built-in name is ignored with a
+ * warning: built-ins never change. Registering an existing custom name
+ * replaces its value.
+ */
+declare function registerStyleValue<A extends StyleValueAxis>(axis: A, name: Exclude<AxisValue[A], BuiltIn[A]>, css: string): void;
+/**
+ * Adds a density: the tokens it sets on the container that takes it. Same
+ * rules as {@link registerStyleValue}.
+ */
+declare function registerDensity(name: Exclude<Density, BuiltIn["density"]>, tokens: DensityTokens): void;
+/** The built-in values of an axis followed by every registered one. */
+declare function listStyleValues<A extends StyleAxis>(axis: A): AxisValue[A][];
+/** The CSS for a value of an axis, or `undefined` when it is unknown. */
+declare function resolveStyleValue<A extends StyleValueAxis>(axis: A, value: AxisValue[A]): string | undefined;
+/** The tokens a density sets, or `undefined` when it is unknown. */
+declare function resolveDensity(value: Density): DensityTokens | undefined;
+/**
+ * Inline style for a container's `density` prop: the density's tokens, which
+ * inherit, so everything inside the container takes them. `undefined` (no
+ * prop, or an unknown name) leaves the DOM unchanged.
+ */
+declare function densityStyle(density: Density | undefined): React.CSSProperties | undefined;
+/** The `density` prop of a container. */
+type DensityProps = {
+    /** Density of everything inside: `compact`, `default` (today's), `comfortable` or a registered one. */
+    density?: Density;
+};
+/**
+ * The instance props a component with style axes takes. Each sets that one
+ * component only (it does not reach the components nested inside it) and
+ * wins over the role token; the component's `className` still wins over it.
+ */
+type StyleAxisProps = {
+    /** Corner radius: a built-in (`none` … `full`) or a registered value. */
+    radius?: Radius;
+    /** Shadow: a built-in (`none` … `xl`) or a registered value. */
+    elevation?: Elevation;
+    /** Border width: `none`, `default` (1px), `strong` (2px) or a registered value. */
+    border?: Border;
+};
+/**
+ * The styles of a component with style axes. For each axis it takes whose
+ * prop is set (and resolves), it sets the private variable.
+ *
+ * - `style`: for the root, with the caller's `style` merged last. With no
+ *   axis prop set it is the caller's `style` itself, so the DOM is unchanged.
+ * - `partStyle`: the private variables alone, for every other element of the
+ *   component that reads them. The stylesheet registers them as
+ *   non-inheriting (`@property … { inherits: false }`), so each element that
+ *   reads one must carry it; that is also what keeps a value from leaking
+ *   into nested components.
+ */
+declare function useStyleAxes(props: StyleAxisProps & {
+    style?: React.CSSProperties;
+}, axes: readonly (keyof StyleAxisProps)[]): {
+    style: React.CSSProperties | undefined;
+    partStyle: React.CSSProperties | undefined;
+};
+
+export { BORDERS as B, DENSITIES as D, ELEVATIONS as E, RADII as R, type StyleAxis as S, type Border as a, type BorderRegistry as b, type Density as c, type DensityProps as d, type DensityRegistry as e, type DensityTokens as f, type Elevation as g, type ElevationRegistry as h, type Radius as i, type RadiusRegistry as j, type StyleAxisProps as k, type StyleValueAxis as l, densityStyle as m, listStyleValues as n, registerStyleValue as o, resolveDensity as p, resolveStyleValue as q, registerDensity as r, useStyleAxes as u };

package/dist/toast/index.d.ts

@@ -0,0 +1,6 @@
+export { Toast, ToastColor, ToastId, ToastInput, ToastOptions, ToastProps, ToastToasterProps, ToastType, ToastVariant, Toaster, toast } from '../components/toast/index.js';
+import 'sonner';
+import 'react';
+import '../index-BQANnKs9.js';
+import '../style-axes-DSQ2DGc5.js';
+import '../variant-D81RhpbR.js';

package/dist/toast/index.js

@@ -0,0 +1,2 @@
+import { Toast, Toaster, toast } from "../components/toast/toast.js";
+export { Toast, Toaster, toast };

package/dist/tooltip-C0bYa8a3.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { HTMLMotionProps, Transition } from 'motion/react';
+import { W as WithAsChild } from './slot-DGErA9zi.js';
+import { k as StyleAxisProps } from './style-axes-DSQ2DGc5.js';
+
+type Side = "top" | "bottom" | "left" | "right";
+type Align = "start" | "center" | "end";
+type TooltipProviderProps$1 = {
+    children: React.ReactNode;
+    id?: string;
+    openDelay?: number;
+    closeDelay?: number;
+    transition?: Transition;
+};
+type TooltipProps$1 = {
+    children: React.ReactNode;
+    side?: Side;
+    sideOffset?: number;
+    align?: Align;
+    alignOffset?: number;
+};
+type TooltipContentProps$1 = WithAsChild<HTMLMotionProps<"div">>;
+type TooltipTriggerProps$1 = WithAsChild<HTMLMotionProps<"div">>;
+
+type TooltipProviderProps = TooltipProviderProps$1;
+declare function TooltipProvider({ openDelay, ...props }: TooltipProviderProps): React.JSX.Element;
+type TooltipProps = TooltipProps$1;
+declare function Tooltip({ sideOffset, ...props }: TooltipProps): React.JSX.Element;
+type TooltipTriggerProps = TooltipTriggerProps$1;
+declare function TooltipTrigger({ ...props }: TooltipTriggerProps): React.JSX.Element;
+type TooltipContentProps = Omit<TooltipContentProps$1, 'asChild'> & Pick<StyleAxisProps, 'radius' | 'elevation'> & {
+    children: React.ReactNode;
+    layout?: boolean | 'position' | 'size' | 'preserve-aspect';
+};
+declare function TooltipContent({ className, children, layout, radius, elevation, style, ...props }: TooltipContentProps): React.JSX.Element;
+
+export { TooltipContent as T, type TooltipContentProps as a, TooltipProvider as b, type TooltipProviderProps as c, Tooltip as d, TooltipTrigger as e, type TooltipTriggerProps as f };

package/dist/{types-DtUxK-Am.d.ts → types-CkXflqg7.d.ts}

@@ -1,4 +1,5 @@
 import { ComponentType } from 'react';
+import { d as DensityProps, k as StyleAxisProps } from './style-axes-DSQ2DGc5.js';
 
 /**
  * Configuration for a sidebar menu item's end action (e.g., a "+" button)
@@ -64,7 +65,7 @@ type SidebarLinkComponentProps = {
 /**
  * Props for the reusable Sidebar component
  */
-type SidebarProps = {
+type SidebarProps = DensityProps & {
     /** Sidebar sections: collapsible groups and/or top-level links */
     items: readonly SidebarNavEntry[] | SidebarNavEntry[];
     /** Current path for determining active state */
@@ -92,6 +93,35 @@ type SidebarProps = {
      * (the active group takes precedence). Default false.
      */
     focusActiveGroup?: boolean;
+    /**
+     * Corner radius of the flyout menu a group opens while the sidebar is
+     * collapsed to icons (`radius` on its DropdownMenuContent). Overlay role
+     * token otherwise.
+     */
+    flyoutRadius?: StyleAxisProps["radius"];
+    /** Shadow of that flyout menu (`elevation` on its DropdownMenuContent). */
+    flyoutElevation?: StyleAxisProps["elevation"];
+    /** Rendered between the header and the menu, e.g. a "New" button. Desktop and mobile. */
+    beforeContent?: React.ReactNode;
+    /** Extra classes for the header region (the `header` slot's wrapper). */
+    headerClassName?: string;
+    /**
+     * Extra classes for the sidebar. On desktop they land on the fixed container
+     * (`data-slot="sidebar-container"`); on mobile they are ignored.
+     */
+    className?: string;
+    /**
+     * Extra classes for the mobile sheet's panel, which renders in a portal
+     * outside the sidebar's own tree. Ignored on desktop.
+     */
+    mobileClassName?: string;
+    /** `id` of the desktop sidebar container, e.g. for `aria-controls`. Ignored on mobile. */
+    id?: string;
+    /**
+     * Click handler on the desktop sidebar container. Fires for clicks anywhere
+     * inside it, interactive rows included; check `event.target`. Ignored on mobile.
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
 };
 
 export { type SidebarEndActionConfig as S, type SidebarGroupConfig as a, type SidebarItemConfig as b, type SidebarLinkComponentProps as c, type SidebarNavEntry as d, type SidebarProps as e, type SidebarTopLevelLinkConfig as f, isSidebarGroup as i };

package/dist/utils/cn.js

@@ -1,6 +1,11 @@
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
 //#region src/utils/cn.ts
+var twMerge = extendTailwindMerge({ extend: { classGroups: { shadow: [{ shadow: [
+	(value) => /^\[shadow:.+\]$/.test(value),
+	"glow",
+	"float"
+] }] } } });
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }

package/dist/utils/color.js

@@ -17,56 +17,81 @@ var presetClassMap = {
 	primary: {
 		bg: "bg-primary",
 		text: "text-primary",
-		border: "border-primary"
+		border: "border-primary",
+		fg: "text-primary-foreground"
 	},
 	secondary: {
 		bg: "bg-secondary",
 		text: "text-secondary",
-		border: "border-secondary"
+		border: "border-secondary",
+		fg: "text-secondary-foreground"
 	},
 	error: {
 		bg: "bg-error",
 		text: "text-error",
-		border: "border-error"
+		border: "border-error",
+		fg: "text-error-foreground"
 	},
 	info: {
 		bg: "bg-info",
 		text: "text-info",
-		border: "border-info"
+		border: "border-info",
+		fg: "text-info-foreground"
 	},
 	success: {
 		bg: "bg-success",
 		text: "text-success",
-		border: "border-success"
+		border: "border-success",
+		fg: "text-success-foreground"
 	},
 	warning: {
 		bg: "bg-warning",
 		text: "text-warning",
-		border: "border-warning"
+		border: "border-warning",
+		fg: "text-warning-foreground"
 	},
 	disabled: {
 		bg: "bg-disabled",
 		text: "text-disabled",
-		border: "border-disabled"
+		border: "border-disabled",
+		fg: "text-disabled-foreground"
 	},
 	gray: {
 		bg: "bg-gray",
 		text: "text-gray",
-		border: "border-input"
+		border: "border-input",
+		fg: "text-gray-foreground"
 	},
 	mist: {
 		bg: "bg-mist",
 		text: "text-mist",
-		border: "border-mist-border"
+		border: "border-mist-border",
+		fg: "text-mist-foreground"
 	}
 };
 /**
+* Text on a fill of an arbitrary CSS colour: the library cannot know its
+* contrast, so it is the same overridable token the `solid` variant uses.
+*/
+var ON_ARBITRARY_FILL = "var(--espd-on-solid-foreground, #fff)";
+/**
 * Resolve a `Color` value to either a Tailwind class (for presets) or an
 * inline style object (for arbitrary CSS color strings).
 */
 function resolveColor(color, target) {
 	if (isPresetColor(color)) return { className: presetClassMap[color][target] };
+	if (target === "fg") return { style: { color: ON_ARBITRARY_FILL } };
 	return { style: { [target === "bg" ? "backgroundColor" : target === "text" ? "color" : "borderColor"]: color } };
 }
+var SUPPORTS_RELATIVE_COLOR = typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("color", "lch(from red l c h)");
+/**
+* Text on a solid fill of an arbitrary colour: black or white by the fill's
+* lightness, in CSS (relative colour syntax), so a `var(--token)` or a hex
+* works alike. Where the browser cannot do that, the overridable token the
+* `solid` surfaces use.
+*/
+function contrastingForeground(fill) {
+	return SUPPORTS_RELATIVE_COLOR ? `lch(from ${fill} calc((49.44 - l) * infinity) 0 0)` : "var(--espd-on-solid-foreground, #fff)";
+}
 //#endregion
-export { isPresetColor, resolveColor };
+export { contrastingForeground, isPresetColor, resolveColor };

package/dist/utils/index.d.ts

@@ -1,9 +1,17 @@
 export { c as cn } from '../cn-Cbsgs0XP.js';
 import { C as Color } from '../index-BQANnKs9.js';
+export { V as VARIANTS, f as Variant, g as VariantRecipe, h as VariantRegistry, i as VariantStyles, l as listVariants, r as registerVariant, k as resolveVariantStyles } from '../variant-D81RhpbR.js';
+export { B as BORDERS, a as Border, b as BorderRegistry, D as DENSITIES, c as Density, d as DensityProps, e as DensityRegistry, f as DensityTokens, E as ELEVATIONS, g as Elevation, h as ElevationRegistry, R as RADII, i as Radius, j as RadiusRegistry, S as StyleAxis, k as StyleAxisProps, l as StyleValueAxis, m as densityStyle, n as listStyleValues, r as registerDensity, o as registerStyleValue, p as resolveDensity, q as resolveStyleValue, u as useStyleAxes } from '../style-axes-DSQ2DGc5.js';
 import 'clsx';
+import 'react';
 
 declare function isPresetColor(color: Color): color is Exclude<Color, string & {}>;
-type ColorTarget = "bg" | "text" | "border";
+/**
+ * What the colour paints: a fill (`bg`), text or icons in that colour
+ * (`text`), a border (`border`), or the text that reads ON a fill of that
+ * colour (`fg` — the preset's `-foreground` token).
+ */
+type ColorTarget = "bg" | "text" | "border" | "fg";
 type ColorResult = {
     className: string;
     style?: undefined;
@@ -17,4 +25,12 @@ type ColorResult = {
  */
 declare function resolveColor(color: Color, target: ColorTarget): ColorResult;
 
-export { isPresetColor, resolveColor };
+/**
+ * Apply a React state change inside a view transition, so elements carrying
+ * `view-transition-morph` / `view-transition-glide` animate from their old
+ * place to their new one. Where the browser has no View Transitions, or the
+ * user asked for reduced motion, the change is applied directly.
+ */
+declare function startViewTransition(update: () => void): void;
+
+export { isPresetColor, resolveColor, startViewTransition };

package/dist/utils/index.js

@@ -1,3 +1,6 @@
 import { cn } from "./cn.js";
 import { isPresetColor, resolveColor } from "./color.js";
-export { cn, isPresetColor, resolveColor };
+import { VARIANTS, listVariants, registerVariant, resolveVariantStyles } from "./variant.js";
+import { BORDERS, DENSITIES, ELEVATIONS, RADII, densityStyle, listStyleValues, registerDensity, registerStyleValue, resolveDensity, resolveStyleValue, useStyleAxes } from "./style-axes.js";
+import { startViewTransition } from "./view-transition.js";
+export { BORDERS, DENSITIES, ELEVATIONS, RADII, VARIANTS, cn, densityStyle, isPresetColor, listStyleValues, listVariants, registerDensity, registerStyleValue, registerVariant, resolveColor, resolveDensity, resolveStyleValue, resolveVariantStyles, startViewTransition, useStyleAxes };

package/dist/utils/silver-shine.js

@@ -33,6 +33,21 @@ var SILVER_SOLID_SURFACE_STYLE = {
 	boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.18)"
 };
 /**
+* {@link SILVER_SOLID_SURFACE_STYLE}'s sheen alone, for a surface whose own `box-shadow` must
+* survive: an inline `boxShadow` beats every `shadow-*` and `ring-*` class, which on a button
+* erased its hover ring, its keyboard focus ring and its elevation. Pair it with
+* {@link SilverBezelOverlay}, which draws the bevel on a layer of its own.
+*/
+var SILVER_SOLID_SHEEN_STYLE = { backgroundImage: SILVER_SOLID_SURFACE_STYLE.backgroundImage };
+/** The solid surface's bevel as a layer (the container must be positioned), so the surface keeps its own shadow. */
+function SilverBezelOverlay() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "pointer-events-none absolute inset-0 rounded-[inherit]",
+		style: { boxShadow: SILVER_SOLID_SURFACE_STYLE.boxShadow }
+	});
+}
+/**
 * Metallic ring drawn as a 1px gradient border with a *truly transparent* interior, used for
 * `color="silver"` + `variant="outline"`. Uses the `mask-composite` ring trick:
 *
@@ -60,4 +75,4 @@ function SilverMetallicBorderOverlay() {
 	});
 }
 //#endregion
-export { SILVER_SHINE_OVERLAY_CLASS, SILVER_SHINE_OVERLAY_STYLE, SILVER_SOLID_SURFACE_STYLE, SilverMetallicBorderOverlay, SilverShineOverlay };
+export { SILVER_SHINE_OVERLAY_CLASS, SILVER_SHINE_OVERLAY_STYLE, SILVER_SOLID_SHEEN_STYLE, SILVER_SOLID_SURFACE_STYLE, SilverBezelOverlay, SilverMetallicBorderOverlay, SilverShineOverlay };