@instruments/materia-ui 0.1.0

package/dist/components/pill/pill-variants.js

@@ -0,0 +1,286 @@
+import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+/**
+ * Per-size class map (height + padding + text + icon sizing). Kept as a named
+ * export so Pill can layer per-breakpoint `md:*` overrides on top of the cva's
+ * base size via `getResponsiveSizeOverrides`. The cva still references this map
+ * as its `size` variant, so static output is unchanged.
+ */
+export const PILL_SIZE_CLASSES = {
+    "2xl": "h-10 min-w-10 gap-2 rounded-xl px-3 text-caption [&_svg]:size-5",
+    "2xs": "text-3xs h-3 min-w-3 gap-0.5 rounded px-0.5 [&_svg]:size-2.5",
+    "3xl": "h-12 min-w-12 gap-2.5 rounded-2xl px-4 text-caption [&_svg]:size-6",
+    base: "h-6 min-w-6 gap-1 rounded-lg px-2 text-caption [&_svg]:size-3",
+    lg: "h-7 min-w-7 gap-1.5 rounded-lg px-2 text-caption [&_svg]:size-3.5",
+    sm: "h-5 min-w-5 gap-1 rounded-md px-1.5 py-0.5 text-caption [&_svg]:size-3",
+    xl: "h-8 min-w-8 gap-2 rounded-xl px-2.5 text-caption [&_svg]:size-4",
+    xs: "h-4 min-w-4 gap-1 rounded px-1 text-2xs [&_svg]:size-3",
+};
+/** Default Pill size. */
+export const DEFAULT_PILL_SIZE = "base";
+/**
+ * Shared pill variant styles used by Badge and Tag.
+ *
+ * Public axes are `tone` (semantic colour) and `emphasis` (visual weight).
+ * The `asInput` boolean is a selectable input-chip state (white bg + shadow),
+ * used internally by filter/selection chips.
+ *
+ * `neutral` absorbs the former `default`, `secondary`, and `outline` variants:
+ *   - `neutral` + `solid`   → the dark primary pill (old default/solid)
+ *   - `neutral` + `soft`    → the grey secondary pill (old secondary/solid)
+ *   - `neutral` + `outline` → the bordered transparent pill (old `outline` variant)
+ */
+export const pillVariants = cva(cn("inline-flex items-center justify-center border border-transparent font-normal whitespace-nowrap [&_svg]:-ms-px [&_svg]:shrink-0", focusRing(), "data-[hovered=true]:opacity-90"), {
+    compoundVariants: [
+        /* ── Focus ring colours by tone ────────────────────────── */
+        {
+            className: "focus-visible:ring-green-400/50 data-[focused=true]:ring-green-400/50",
+            tone: "success",
+        },
+        {
+            className: "focus-visible:ring-amber-400/50 data-[focused=true]:ring-amber-400/50",
+            tone: "warning",
+        },
+        {
+            className: "focus-visible:ring-blue-400/50 data-[focused=true]:ring-blue-400/50",
+            tone: "info",
+        },
+        {
+            className: "focus-visible:ring-red-400/50 data-[focused=true]:ring-red-400/50",
+            tone: "danger",
+        },
+        {
+            className: "focus-visible:ring-yellow-400/25 data-[focused=true]:ring-yellow-400/25",
+            tone: "brand",
+        },
+        /* ── Solid (text overrides for dark backgrounds) ───── */
+        {
+            className: "bg-affirmative-foreground text-affirmative-soft dark:bg-affirmative-accent dark:text-affirmative-soft",
+            emphasis: "solid",
+            tone: "success",
+        },
+        {
+            className: "text-white/90",
+            emphasis: "solid",
+            tone: "info",
+        },
+        {
+            className: "text-white/90",
+            emphasis: "solid",
+            tone: "danger",
+        },
+        /* ── Soft (was `light`) ───────────────────────────── */
+        /* neutral+soft reproduces the old secondary/solid render */
+        {
+            className: "bg-secondary text-secondary-foreground focus-visible:ring-gray-300/50 data-[focused=true]:ring-gray-300/50",
+            emphasis: "soft",
+            tone: "neutral",
+        },
+        {
+            className: "border-affirmative-border bg-affirmative-soft text-affirmative-foreground dark:bg-affirmative-soft dark:text-affirmative-accent font-medium shadow-xs",
+            emphasis: "soft",
+            tone: "success",
+        },
+        {
+            className: "border-warning-border bg-warning-soft text-warning-foreground dark:bg-warning-soft dark:text-warning-accent font-medium shadow-xs",
+            emphasis: "soft",
+            tone: "warning",
+        },
+        {
+            className: "border-info-border bg-info-soft text-info-foreground dark:bg-info-soft dark:text-info-accent font-medium shadow-xs",
+            emphasis: "soft",
+            tone: "info",
+        },
+        {
+            className: "border-error-border bg-error-soft text-error-foreground dark:bg-error-soft dark:text-error-accent font-medium shadow-xs",
+            emphasis: "soft",
+            tone: "danger",
+        },
+        {
+            className: "border-warning-border bg-brand-soft text-brand-foreground dark:bg-brand-soft dark:text-brand-accent font-medium shadow-xs",
+            emphasis: "soft",
+            tone: "brand",
+        },
+        /* ── Outline (light bg + coloured border) ─────────── */
+        /* neutral+outline reproduces the old `outline` variant render */
+        {
+            className: "border-border text-secondary-foreground border bg-transparent",
+            emphasis: "outline",
+            tone: "neutral",
+        },
+        {
+            className: "border-affirmative-border bg-affirmative-soft text-affirmative-foreground dark:bg-affirmative-soft dark:text-affirmative-accent",
+            emphasis: "outline",
+            tone: "success",
+        },
+        {
+            className: "border-warning-border bg-warning-soft text-warning-foreground dark:bg-warning-soft dark:text-warning-accent",
+            emphasis: "outline",
+            tone: "warning",
+        },
+        {
+            className: "border-info-border bg-info-soft text-info-foreground dark:bg-info-soft dark:text-info-accent",
+            emphasis: "outline",
+            tone: "info",
+        },
+        {
+            className: "border-error-border bg-error-soft text-error-foreground dark:bg-error-soft dark:text-error-accent",
+            emphasis: "outline",
+            tone: "danger",
+        },
+        {
+            className: "border-brand-accent/30 bg-brand-soft text-brand-foreground dark:bg-brand-soft dark:text-brand-accent",
+            emphasis: "outline",
+            tone: "brand",
+        },
+        /* ── Input (selected state override) ─────────────── */
+        {
+            asInput: true,
+            className: "border-ring bg-input text-foreground hover:bg-secondary shadow-none",
+            emphasis: "outline",
+            tone: "neutral",
+        },
+        /* ── Ghost (transparent bg, accent text) ─────────── */
+        {
+            className: "text-primary",
+            emphasis: "ghost",
+            tone: "neutral",
+        },
+        {
+            className: "text-affirmative-accent dark:text-affirmative-accent",
+            emphasis: "ghost",
+            tone: "success",
+        },
+        {
+            className: "text-warning-accent dark:text-warning-accent",
+            emphasis: "ghost",
+            tone: "warning",
+        },
+        {
+            className: "text-info-accent dark:text-info-accent",
+            emphasis: "ghost",
+            tone: "info",
+        },
+        {
+            className: "text-destructive",
+            emphasis: "ghost",
+            tone: "danger",
+        },
+        {
+            className: "text-brand-accent dark:text-brand-accent",
+            emphasis: "ghost",
+            tone: "brand",
+        },
+        /* ── Transparent (backdrop-blur + 50% bg) ────────── */
+        {
+            className: "bg-primary/50 transform-gpu border-transparent backdrop-blur-md will-change-[filter,background-color]",
+            emphasis: "transparent",
+            tone: "neutral",
+        },
+        {
+            className: "bg-affirmative-accent/50 transform-gpu border-transparent text-white/90 backdrop-blur-md will-change-[filter,background-color]",
+            emphasis: "transparent",
+            tone: "success",
+        },
+        {
+            className: "bg-warning-accent/50 transform-gpu border-transparent backdrop-blur-md will-change-[filter,background-color]",
+            emphasis: "transparent",
+            tone: "warning",
+        },
+        {
+            className: "bg-info-accent/50 transform-gpu border-transparent text-white/90 backdrop-blur-md will-change-[filter,background-color]",
+            emphasis: "transparent",
+            tone: "info",
+        },
+        {
+            className: "bg-destructive/50 transform-gpu border-transparent text-white/90 backdrop-blur-md will-change-[filter,background-color]",
+            emphasis: "transparent",
+            tone: "danger",
+        },
+        {
+            className: "bg-brand/50 transform-gpu border-transparent backdrop-blur-md will-change-[filter,background-color]",
+            emphasis: "transparent",
+            tone: "brand",
+        },
+    ],
+    defaultVariants: {
+        emphasis: "solid",
+        radius: "full",
+        size: "base",
+        tone: "neutral",
+    },
+    variants: {
+        // Lockstep: Pill's cva tone/emphasis keys ARE the canonical vocabularies.
+        // `satisfies Record<Tone|Emphasis, string>` fails to compile if a canon
+        // member is missing or a stray key creeps in, keeping PillTone=Tone and
+        // PillEmphasis=Emphasis (declared below) honest.
+        tone: {
+            neutral: "bg-primary text-primary-foreground",
+            brand: "bg-brand text-brand-foreground",
+            success: "bg-affirmative-accent text-affirmative-foreground",
+            warning: "bg-warning-accent text-warning-foreground",
+            info: "bg-info-accent text-info-foreground",
+            danger: "bg-destructive text-destructive-foreground",
+        },
+        emphasis: {
+            solid: "",
+            soft: "",
+            outline: "",
+            ghost: "border-transparent bg-transparent",
+            transparent: "transform-gpu backdrop-blur-md will-change-[filter,background-color]",
+        },
+        disabled: {
+            true: "pointer-events-none opacity-50",
+        },
+        size: PILL_SIZE_CLASSES,
+        radius: {
+            rounded: "rounded-md!",
+            square: "rounded-none!",
+            full: "rounded-full!",
+        },
+        /** Input-style chip: white bg + subtle shadow (unselected state). */
+        asInput: {
+            true: "border-border bg-input text-foreground hover:bg-secondary shadow-xs transition-colors",
+        },
+    },
+});
+/** All pill tones for iteration */
+export const PILL_TONES = [
+    "neutral",
+    "brand",
+    "success",
+    "warning",
+    "info",
+    "danger",
+];
+/** All pill emphases for iteration */
+export const PILL_EMPHASES = [
+    "solid",
+    "soft",
+    "outline",
+    "ghost",
+    "transparent",
+];
+/** All pill sizes for iteration */
+export const PILL_SIZES = [
+    "2xs",
+    "xs",
+    "sm",
+    "base",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+];
+/** Icon size mapping shared by Badge and Tag */
+export const PILL_ICON_SIZE_MAP = {
+    "2xl": "xl",
+    "2xs": "2xs",
+    "3xl": "2xl",
+    base: "sm",
+    lg: "base",
+    sm: "xs",
+    xl: "lg",
+    xs: "2xs",
+};

package/dist/components/pill.d.ts

@@ -0,0 +1,4 @@
+export type { PillProps } from "./pill/pill-root.js";
+export { Pill } from "./pill/pill-root.js";
+export type { PillEmphasis, PillSize, PillTone } from "./pill/pill-variants.js";
+export { PILL_EMPHASES, PILL_ICON_SIZE_MAP, PILL_SIZES, PILL_TONES, pillVariants, } from "./pill/pill-variants.js";

package/dist/components/pill.js

@@ -0,0 +1,2 @@
+export { Pill } from "./pill/pill-root.js";
+export { PILL_EMPHASES, PILL_ICON_SIZE_MAP, PILL_SIZES, PILL_TONES, pillVariants, } from "./pill/pill-variants.js";

package/dist/components/pixel-loader/pixel-loader-root.d.ts

@@ -0,0 +1,42 @@
+declare const PATTERNS: {
+    readonly dots: {
+        readonly delays: number[];
+        readonly durationMs: 650;
+        readonly round: true;
+    };
+    readonly drive: {
+        readonly delays: number[];
+        readonly durationMs: 650;
+        readonly round: false;
+    };
+    readonly orbit: {
+        readonly delays: (number | null)[];
+        readonly durationMs: 950;
+        readonly round: false;
+    };
+};
+/** Pixel-grid wavefront variants. */
+export type PixelLoaderVariant = keyof typeof PATTERNS;
+/** Shipped variant names in showcase order. */
+export declare const PIXEL_LOADER_VARIANTS: readonly ["drive", "dots", "orbit"];
+export interface PixelLoaderProps {
+    /** Additional classes on the root. */
+    className?: string;
+    /** Shimmering status label. Defaults to `"Working"`. */
+    label?: string;
+    /** Grid wavefront. Defaults to `"drive"`. */
+    variant?: PixelLoaderVariant;
+}
+/**
+ * Compact pixel-grid loader with shimmer label.
+ *
+ * @example
+ * ```tsx
+ * <PixelLoader label="Matching" variant="drive" />
+ * ```
+ *
+ * @bestPractice Use for inline chat / agent waits. Prefer ThinkingLoader when you have narrated steps; ThinkingOrb for avatar-scale state; DotMatrixLoader for prompt-bar intent glyphs.
+ * @category feedback
+ */
+export declare const PixelLoader: ({ className, label, variant, }: PixelLoaderProps) => import("react").JSX.Element;
+export {};

package/dist/components/pixel-loader/pixel-loader-root.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PixelLoader - compact 3×3 pixel-grid wait chrome for agent/chat surfaces.
+ *
+ * Distinct from ThinkingOrb (state), DotMatrixLoader (24×24 intent glyphs), and
+ * ThinkingLoader (narrated step conveyor): this is the tiny inline “still
+ * working” signal with a shimmer label.
+ *
+ * @module
+ */
+import { Grid } from "@instruments/materia-ui/components/grid";
+import { Text } from "@instruments/materia-ui/components/text";
+import { cn } from "@instruments/materia-ui/utils/cn";
+const CHEVRON = Array.from({ length: 9 }, (_, i) => {
+    const row = Math.floor(i / 3);
+    const col = i % 3;
+    return (col + Math.abs(row - 1)) * 90;
+});
+const ORBIT_ORDER = [0, 1, 2, 5, 8, 7, 6, 3];
+const ORBIT = Array.from({ length: 9 }, (_, i) => {
+    const k = ORBIT_ORDER.indexOf(i);
+    return k === -1 ? null : k * 110;
+});
+const PATTERNS = {
+    dots: { delays: CHEVRON, durationMs: 650, round: true },
+    drive: { delays: CHEVRON, durationMs: 650, round: false },
+    orbit: { delays: ORBIT, durationMs: 950, round: false },
+};
+/** Shipped variant names in showcase order. */
+export const PIXEL_LOADER_VARIANTS = ["drive", "dots", "orbit"];
+/**
+ * Compact pixel-grid loader with shimmer label.
+ *
+ * @example
+ * ```tsx
+ * <PixelLoader label="Matching" variant="drive" />
+ * ```
+ *
+ * @bestPractice Use for inline chat / agent waits. Prefer ThinkingLoader when you have narrated steps; ThinkingOrb for avatar-scale state; DotMatrixLoader for prompt-bar intent glyphs.
+ * @category feedback
+ */
+export const PixelLoader = ({ className, label = "Working", variant = "drive", }) => {
+    const { delays, durationMs, round } = PATTERNS[variant] ?? PATTERNS.drive;
+    return (_jsxs("output", { className: cn("flex w-fit items-center gap-2.5", className), "data-testid": "pixel-loader", children: [_jsx(Grid, { "aria-hidden": true, as: "span", className: "size-4", columns: 3, gap: "3xs", children: delays.map((delay, index) => (_jsx("span", { className: cn("pixel-cell bg-foreground size-1", round ? "rounded-full" : "rounded-2xs"), "data-blank": delay === null ? "" : undefined, "data-pixel": true, style: {
+                        animationDelay: `${delay ?? 0}ms`,
+                        animationDuration: `${durationMs}ms`,
+                    } }, index))) }), _jsx(Text, { as: "span", className: "shimmer-text", "data-shimmer": true, size: "paragraph-sm", weight: "medium", children: label })] }));
+};

package/dist/components/pixel-loader.d.ts

@@ -0,0 +1 @@
+export { PIXEL_LOADER_VARIANTS, PixelLoader, type PixelLoaderProps, type PixelLoaderVariant, } from "./pixel-loader/pixel-loader-root.js";

package/dist/components/pixel-loader.js

@@ -0,0 +1 @@
+export { PIXEL_LOADER_VARIANTS, PixelLoader, } from "./pixel-loader/pixel-loader-root.js";

package/dist/components/popover/popover-anatomy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * popoverAnatomy helper for PopoverAnatomy.
+ * Import from "@instruments/materia-ui/components/popover-anatomy".
+ */
+export declare const popoverAnatomy: import("../../tokens/anatomy.js").ComponentAnatomy;

package/dist/components/popover/popover-anatomy.js

@@ -0,0 +1,22 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * popoverAnatomy helper for PopoverAnatomy.
+ * Import from "@instruments/materia-ui/components/popover-anatomy".
+ */
+export const popoverAnatomy = defineAnatomy({
+    children: [
+        {
+            description: "Element that opens popover",
+            label: "PopoverTrigger",
+            slot: "popover-trigger",
+        },
+        {
+            description: "Popover content area",
+            label: "PopoverContent",
+            slot: "popover-content",
+        },
+    ],
+    description: "Floating content panel",
+    label: "Popover",
+    slot: "popover",
+});

package/dist/components/popover/popover-root.d.ts

@@ -0,0 +1,87 @@
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import type { ComponentSize } from "../../tokens/size.js";
+/**
+ * Root component for a popover (non-modal floating panel). Manages open/closed state.
+ *
+ * @param props - The popover props
+ * @param props.open - Controlled open state. Use with onOpenChange.
+ * @param props.defaultOpen - Uncontrolled default open state.
+ * @param props.onOpenChange - Callback `(open, eventDetails)` when open state changes.
+ * @param props.modal - Whether the popover is modal: `false`, `true`, or `"trap-focus"`. Defaults to false.
+ * @param props... - All other Base UI Popover.Root props.
+ *
+ * @example
+ * ```tsx
+ * <Popover open={open} onOpenChange={setOpen}>
+ *   <PopoverTrigger>Open</PopoverTrigger>
+ *   <PopoverContent>Content</PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @bestPractice Use `Popover` for an anchored non-blocking panel dismissed on outside-click / Esc; a page-blocking modal is a `Dialog`, a menu of actions is a `DropdownMenu`.
+ * @bestPractice It's non-modal by default (`modal={false}`) so the page stays interactive - pass `modal` only when you must trap focus and block the background.
+ * @bestPractice `PopoverContent` portals to the body; anchor to a non-trigger element with its `anchor` prop.
+ * @category overlays
+ */
+declare const Popover: <Payload>({ ...props }: PopoverPrimitive.Root.Props<Payload>) => import("react").JSX.Element;
+/**
+ * Button that opens the popover when clicked.
+ *
+ * @param props - The popover trigger props
+ * @param props... - All Base UI Popover.Trigger props.
+ */
+declare const PopoverTrigger: ({ ...props }: PopoverPrimitive.Trigger.Props) => import("react").JSX.Element;
+type PopoverSize = Extract<ComponentSize, "sm" | "base" | "lg">;
+type PopoverPositionerProps = Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "positionMethod" | "side" | "sideOffset" | "sticky">;
+/**
+ * Content area of the popover. Positioned relative to the trigger.
+ *
+ * @param props - The popover content props
+ * @param props.size - Controls padding, radius, and shadow. Options: "sm", "base", "lg" (default, Figma spec).
+ * @param props.align - Alignment relative to trigger. Options: "center" (default), "start", "end".
+ * @param props.side - Side relative to trigger. Options: "top", "right", "bottom", "left".
+ * @param props.sideOffset - Distance from trigger in pixels. Defaults to 4.
+ * @param props.anchor - Element (or ref) to position against instead of the trigger.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props.positionerClassName - Classes for the positioning layer around the content, such as a lower `z-*` for a panel that sits beneath fixed chrome.
+ * @param props.children - Popover content.
+ * @param props... - All other Base UI Popover.Popup props.
+ *
+ * @example
+ * ```tsx
+ * <PopoverContent align="start" side="bottom" size="lg">
+ *   <Text>Popover content</Text>
+ * </PopoverContent>
+ * ```
+ */
+declare const PopoverContent: ({ className, align, sideOffset, size, side, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, positionMethod, positionerClassName, sticky, ...props }: Omit<PopoverPrimitive.Popup.Props, "className"> & PopoverPositionerProps & {
+    className?: string;
+    positionerClassName?: string;
+    size?: PopoverSize;
+}) => import("react").JSX.Element;
+/**
+ * Optional arrow pointing from the content back to the trigger. Place it inside
+ * `PopoverContent`; Base UI positions it along the content edge and sets its
+ * `data-side`.
+ *
+ * Rendered as an SVG (22×9px) with a drop-shadow so it blends seamlessly with
+ * the content's shadowed edge.
+ */
+declare const PopoverArrow: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+/**
+ * Scrim behind a modal popover, portalled to the body. A press on it closes
+ * the popover. Render it alongside `PopoverContent`; position it with
+ * `className` when it should leave part of the page, such as a fixed header,
+ * uncovered.
+ *
+ * @bestPractice Pair it with `modal` on `Popover`: the scrim says the page is blocked, and only a modal popover blocks it.
+ */
+declare const PopoverBackdrop: ({ className, ...props }: Omit<PopoverPrimitive.Backdrop.Props, "className"> & {
+    className?: string;
+}) => import("react").JSX.Element;
+/** Imperative actions for a popover, passed to `Popover` through `actionsRef`. */
+type PopoverActions = PopoverPrimitive.Root.Actions;
+export { Popover, PopoverArrow, PopoverBackdrop, PopoverContent, PopoverTrigger, };
+export type { PopoverActions };

package/dist/components/popover/popover-root.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { OVERLAY_SCRIM_DARK, POPOVER_CONTENT_ANIMATION, POPOVER_SURFACE, } from "../../tokens/overlay-styles.js";
+/**
+ * Root component for a popover (non-modal floating panel). Manages open/closed state.
+ *
+ * @param props - The popover props
+ * @param props.open - Controlled open state. Use with onOpenChange.
+ * @param props.defaultOpen - Uncontrolled default open state.
+ * @param props.onOpenChange - Callback `(open, eventDetails)` when open state changes.
+ * @param props.modal - Whether the popover is modal: `false`, `true`, or `"trap-focus"`. Defaults to false.
+ * @param props... - All other Base UI Popover.Root props.
+ *
+ * @example
+ * ```tsx
+ * <Popover open={open} onOpenChange={setOpen}>
+ *   <PopoverTrigger>Open</PopoverTrigger>
+ *   <PopoverContent>Content</PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @bestPractice Use `Popover` for an anchored non-blocking panel dismissed on outside-click / Esc; a page-blocking modal is a `Dialog`, a menu of actions is a `DropdownMenu`.
+ * @bestPractice It's non-modal by default (`modal={false}`) so the page stays interactive - pass `modal` only when you must trap focus and block the background.
+ * @bestPractice `PopoverContent` portals to the body; anchor to a non-trigger element with its `anchor` prop.
+ * @category overlays
+ */
+const Popover = ({ ...props }) => (_jsx(PopoverPrimitive.Root, { "data-component": "popover", "data-slot": "popover", ...props }));
+/**
+ * Button that opens the popover when clicked.
+ *
+ * @param props - The popover trigger props
+ * @param props... - All Base UI Popover.Trigger props.
+ */
+const PopoverTrigger = ({ ...props }) => (_jsx(PopoverPrimitive.Trigger, { "data-component": "popover-trigger", "data-slot": "popover-trigger", ...props }));
+const POPOVER_SIZE_CLASSES = {
+    base: "rounded-2xl p-4",
+    lg: "rounded-3xl p-6",
+    sm: "rounded-xl p-2",
+};
+/**
+ * Content area of the popover. Positioned relative to the trigger.
+ *
+ * @param props - The popover content props
+ * @param props.size - Controls padding, radius, and shadow. Options: "sm", "base", "lg" (default, Figma spec).
+ * @param props.align - Alignment relative to trigger. Options: "center" (default), "start", "end".
+ * @param props.side - Side relative to trigger. Options: "top", "right", "bottom", "left".
+ * @param props.sideOffset - Distance from trigger in pixels. Defaults to 4.
+ * @param props.anchor - Element (or ref) to position against instead of the trigger.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props.positionerClassName - Classes for the positioning layer around the content, such as a lower `z-*` for a panel that sits beneath fixed chrome.
+ * @param props.children - Popover content.
+ * @param props... - All other Base UI Popover.Popup props.
+ *
+ * @example
+ * ```tsx
+ * <PopoverContent align="start" side="bottom" size="lg">
+ *   <Text>Popover content</Text>
+ * </PopoverContent>
+ * ```
+ */
+const PopoverContent = ({ className, align = "center", sideOffset = 4, size = "lg", side, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, positionMethod, positionerClassName, sticky, ...props }) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, anchor: anchor, arrowPadding: arrowPadding, className: cn("z-50", positionerClassName), collisionAvoidance: collisionAvoidance, collisionBoundary: collisionBoundary, collisionPadding: collisionPadding, positionMethod: positionMethod, side: side, sideOffset: sideOffset, sticky: sticky, children: _jsx(PopoverPrimitive.Popup, { className: cn(`${POPOVER_CONTENT_ANIMATION} ${POPOVER_SURFACE} w-72 origin-(--transform-origin)`, POPOVER_SIZE_CLASSES[size], className), "data-component": "popover-content", "data-slot": "popover-content", ...props }) }) }));
+/**
+ * Optional arrow pointing from the content back to the trigger. Place it inside
+ * `PopoverContent`; Base UI positions it along the content edge and sets its
+ * `data-side`.
+ *
+ * Rendered as an SVG (22×9px) with a drop-shadow so it blends seamlessly with
+ * the content's shadowed edge.
+ */
+const PopoverArrow = ({ className }) => (_jsx(PopoverPrimitive.Arrow, { className: cn("pointer-events-none z-10 h-[9px] w-5.5", 
+    // The SVG points down by default; rotate it to face the trigger.
+    "data-[side=bottom]:-top-2 data-[side=bottom]:rotate-180", "data-[side=top]:-bottom-2", "data-[side=left]:-right-[14.5px] data-[side=left]:-rotate-90", "data-[side=right]:-left-[14.5px] data-[side=right]:rotate-90", className), "data-component": "popover-arrow", "data-slot": "popover-arrow", children: _jsxs("svg", { "aria-hidden": "true", className: "block size-full", viewBox: "0 0 22 9", children: [_jsx("defs", { children: _jsx("filter", { height: "200%", id: "arrow-shadow", width: "200%", x: "-50%", y: "-50%", children: _jsx("feDropShadow", { dx: "0", dy: "1", floodOpacity: "0.1", stdDeviation: "1" }) }) }), _jsx("path", { className: "fill-popover", d: "M0 0h22L11 9 0 0z", filter: "url(#arrow-shadow)" })] }) }));
+/**
+ * Scrim behind a modal popover, portalled to the body. A press on it closes
+ * the popover. Render it alongside `PopoverContent`; position it with
+ * `className` when it should leave part of the page, such as a fixed header,
+ * uncovered.
+ *
+ * @bestPractice Pair it with `modal` on `Popover`: the scrim says the page is blocked, and only a modal popover blocks it.
+ */
+const PopoverBackdrop = ({ className, ...props }) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Backdrop, { className: cn(OVERLAY_SCRIM_DARK, className), "data-component": "popover-backdrop", "data-slot": "popover-backdrop", ...props }) }));
+export { Popover, PopoverArrow, PopoverBackdrop, PopoverContent, PopoverTrigger, };

package/dist/components/popover.d.ts

@@ -0,0 +1,2 @@
+export { Popover, PopoverArrow, type PopoverActions, PopoverBackdrop, PopoverContent, PopoverTrigger, } from "./popover/popover-root.js";
+export { popoverAnatomy } from "./popover/popover-anatomy.js";

package/dist/components/popover.js

@@ -0,0 +1,2 @@
+export { Popover, PopoverArrow, PopoverBackdrop, PopoverContent, PopoverTrigger, } from "./popover/popover-root.js";
+export { popoverAnatomy } from "./popover/popover-anatomy.js";

package/dist/components/progress/progress-root.d.ts

@@ -0,0 +1,38 @@
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import type * as React from "react";
+type ProgressProps = ProgressPrimitive.Root.Props;
+interface ProgressCircleProps {
+    /** Optional content rendered centred over the ring (e.g. a percentage). */
+    children?: React.ReactNode;
+    className?: string;
+    indicatorClassName?: string;
+    /** Accessible label announced by screen readers (required). */
+    label: string;
+    /** Value that maps to a full ring. @default 100 */
+    max?: number;
+    /** Ring diameter in pixels. @default 44 */
+    size?: number;
+    /** Ring stroke width in pixels. @default 3 */
+    strokeWidth?: number;
+    trackClassName?: string;
+    /** Current progress; clamped to `0..max`. */
+    value: number;
+    /** Formats the ring's hover title text. @default rounded percentage of max */
+    valueFormatter?: (value: number, max: number) => string;
+}
+/**
+ * Linear progress bar showing completion from 0 to 100; pass `value={null}`
+ * for an indeterminate (empty) track. Built on Base UI Progress for accessible
+ * semantics.
+ *
+ * @bestPractice Use `Progress` for determinate 0–100 completion (`value={null}` for an indeterminate track); position in a stepped flow is `ProgressDots`.
+ * @bestPractice For a ring instead of a bar use `ProgressCircle` - it needs an explicit `label` for its native `<progress>` accessible name.
+ * @category feedback
+ */
+declare const Progress: ({ className, ...props }: ProgressProps) => React.JSX.Element;
+/**
+ * Circular progress ring with an optional centred content slot; the value is
+ * clamped to `0..max` and exposed through a visually hidden native `<progress>`.
+ */
+declare const ProgressCircle: ({ label, value, max, size, strokeWidth, className, indicatorClassName, trackClassName, valueFormatter, children, }: ProgressCircleProps) => React.JSX.Element;
+export { Progress, ProgressCircle };