@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/dist/components/file-input/file-input.js

@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { inputLabelClassName } from "../../core/field-label-row.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -105,7 +106,11 @@ function resolveBrowseTokens(color) {
 		style: { "--fi-accent": color }
 	};
 }
-var FileInput = React$1.forwardRef(function FileInput({ label, required, size, rounded, color = "primary", startHelperContent, endHelperContent, hintContent, error, errorContent, startIcon, disabled = false, readOnly = false, id, className, name, accept, multiple = false, files: filesProp, onFilesChange, onChange, browseLabel = "Browse", changeLabel = "Change", clearLabel = "Clear file", placeholder = "No file chosen", andMoreLabel = (n) => `and ${n} more`, ...restProps }, ref) {
+var FileInput = React$1.forwardRef(function FileInput({ label, required, size, rounded, color = "primary", startHelperContent, endHelperContent, hintContent, error, errorContent, startIcon, disabled = false, readOnly = false, id, className, name, accept, multiple = false, files: filesProp, onFilesChange, onChange, browseLabel = "Browse", changeLabel = "Change", clearLabel = "Clear file", placeholder = "No file chosen", andMoreLabel = (n) => `and ${n} more`, radius, border, ...restProps }, ref) {
+	const axes = useStyleAxes({
+		radius,
+		border
+	}, ["radius", "border"]);
 	const autoId = React$1.useId();
 	const inputId = id ?? autoId;
 	const effectiveSize = size ?? "default";
@@ -210,7 +215,7 @@ var FileInput = React$1.forwardRef(function FileInput({ label, required, size, r
 			})]
 		});
 	}
-	const containerClasses = cn("flex w-full items-center overflow-hidden ps-3 border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", sizeClasses[effectiveSize], rounded ? "rounded-full" : "rounded-md", hasError && "border-destructive focus-within:ring-destructive", startIcon && "ps-9", disabled && "cursor-not-allowed opacity-50", readOnly && "cursor-default bg-muted");
+	const containerClasses = cn("flex w-full items-center overflow-hidden ps-3 border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", sizeClasses[effectiveSize], rounded && radius === void 0 ? "rounded-full" : "rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))]", hasError && "border-destructive focus-within:ring-destructive", startIcon && "ps-9", disabled && "cursor-not-allowed opacity-50", readOnly && "cursor-default bg-muted");
 	const actionButtonClasses = cn("inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 text-[length:inherit] font-medium transition-colors", browseTokens.buttonText, "hover:bg-accent", "focus-visible:outline-none focus-visible:ring-0", disabled && "pointer-events-none opacity-50");
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("@container flex-1 space-y-2", className),
@@ -258,6 +263,7 @@ var FileInput = React$1.forwardRef(function FileInput({ label, required, size, r
 					onClick: openFileDialog,
 					onKeyDown: onDisplayKeyDown,
 					className: containerClasses,
+					style: axes.style,
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							className: "min-w-0 flex-1 truncate",
@@ -274,7 +280,7 @@ var FileInput = React$1.forwardRef(function FileInput({ label, required, size, r
 							children: /* @__PURE__ */ jsx(X, { className: iconSizeClasses[effectiveSize] })
 						}),
 						!readOnly && /* @__PURE__ */ jsx("div", {
-							className: cn("inline-flex shrink-0 self-stretch items-center border-s", browseTokens.wrapperBorder, browseTokens.wrapperBg, rounded ? "rounded-e-full" : "rounded-e-[calc(var(--radius)-1px)]"),
+							className: cn("inline-flex shrink-0 self-stretch items-center border-s", browseTokens.wrapperBorder, browseTokens.wrapperBg, rounded && radius === void 0 ? "rounded-e-full" : "rounded-e-[calc(var(--radius)-1px)]"),
 							children: /* @__PURE__ */ jsxs("button", {
 								type: "button",
 								disabled,

package/dist/components/file-input/index.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { S as Size, C as Color } from '../../index-BQANnKs9.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+interface FileInputProps extends Pick<StyleAxisProps, "radius" | "border"> {
+    /** Label displayed above the input. */
+    label?: React.ReactNode;
+    /** Marks the field as required (appends a red asterisk to the label). */
+    required?: boolean;
+    /** Controls height, padding and font size. @default "default" */
+    size?: Size;
+    /** Uses fully-rounded corners instead of the default border radius. Same as `radius="full"`; `radius` wins when both are set. */
+    rounded?: boolean;
+    /**
+     * Accent color for the browse/change button area.
+     * Accepts any preset color token (`"primary"`, `"secondary"`, `"error"`, …)
+     * or an arbitrary CSS color string (hex, `rgb()`, `var(--token)`).
+     * Only affects the browse/change button — not the container border.
+     * @default "primary"
+     */
+    color?: Color;
+    /** Helper text rendered below the control on the leading side. Hidden when `errorContent` is shown. */
+    startHelperContent?: React.ReactNode;
+    /** Helper text rendered below the control on the trailing side. Hidden when `errorContent` is shown. */
+    endHelperContent?: React.ReactNode;
+    /** Hint text displayed beside the label. */
+    hintContent?: React.ReactNode;
+    /** Applies error border / ring styling when `true`. */
+    error?: boolean;
+    /** Error message displayed below the control (replaces helper content). */
+    errorContent?: React.ReactNode;
+    /** Icon rendered inside the display area on the leading side. */
+    startIcon?: React.ReactNode;
+    /** Disables the control and all interactive elements. */
+    disabled?: boolean;
+    /** Prevents file selection while still displaying the current value. */
+    readOnly?: boolean;
+    /** HTML `id` for the hidden file input. Auto-generated when omitted. */
+    id?: string;
+    /** CSS class applied to the outermost wrapper. */
+    className?: string;
+    /** HTML `name` for the hidden file input (used in native form submission). */
+    name?: string;
+    /** Comma-separated MIME types or extensions (e.g. `".png,.jpg"`, `"image/*"`). Passed to the hidden `<input accept>`. */
+    accept?: string;
+    /** Allow selecting multiple files. @default false */
+    multiple?: boolean;
+    /**
+     * Controlled file list. When provided (including `[]`), the parent owns the list;
+     * update via `onFilesChange`. When omitted, the component keeps files in internal state.
+     */
+    files?: File[];
+    /** Fires after the file list changes. */
+    onFilesChange?: (files: File[]) => void;
+    /**
+     * Standard `onChange` handler — fires with a synthetic event whose `target.files`
+     * reflects the current list. Compatible with `react-hook-form` `register()`.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Label for the action button when no file is selected. @default "Browse" */
+    browseLabel?: string;
+    /** Label for the action button when a file is already selected. @default "Change" */
+    changeLabel?: string;
+    /** Accessible label for the clear (×) button. @default "Clear file" */
+    clearLabel?: string;
+    /** Placeholder text when no file is selected. @default "No file chosen" */
+    placeholder?: string;
+    /**
+     * Formats the "and N more" suffix when multiple files are selected.
+     * Receives the count of *additional* files beyond the first.
+     * @default (n) => `and ${n} more`
+     */
+    andMoreLabel?: (remaining: number) => string;
+}
+
+declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { FileInput, type FileInputProps };

package/dist/components/file-input/index.js

@@ -0,0 +1,2 @@
+import { FileInput } from "./file-input.js";
+export { FileInput };

package/dist/components/file-upload/file-upload.js

@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { buttonVariants } from "../../core/button.js";
 import { Button } from "../button/button.js";
 import { IconAvatar } from "../icon-avatar/icon-avatar.js";
@@ -63,7 +64,8 @@ function mergeFiles(existing, incoming, multiple) {
 	}
 	return next;
 }
-var FileUpload = React$1.forwardRef(function FileUpload({ className, title = "Drag & drop files here", description, browseLabel = "Browse files", multiple = false, disabled = false, onChange, onFilesChange, files: filesProp, hideDropzoneOnFileSelect = false, id, ...inputPropsRest }, ref) {
+var FileUpload = React$1.forwardRef(function FileUpload({ className, title = "Drag & drop files here", description, browseLabel = "Browse files", multiple = false, disabled = false, onChange, onFilesChange, files: filesProp, hideDropzoneOnFileSelect = false, layout = "stacked", id, radius, ...inputPropsRest }, ref) {
+	const { partStyle } = useStyleAxes({ radius }, ["radius"]);
 	const autoId = React$1.useId();
 	const inputId = id ?? autoId;
 	const descriptionId = `${inputId}-description`;
@@ -183,6 +185,7 @@ var FileUpload = React$1.forwardRef(function FileUpload({ className, title = "Dr
 	const hasDescription = description != null && description !== "";
 	const dropZoneLabel = `${title}. ${browseLabel}`;
 	const showDropzone = !(hideDropzoneOnFileSelect && listFiles.length > 0);
+	const row = layout === "row";
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("w-full space-y-3", className),
 		children: [
@@ -228,13 +231,14 @@ var FileUpload = React$1.forwardRef(function FileUpload({ className, title = "Dr
 						onDragLeave,
 						onDragOver,
 						onDrop,
-						className: cn("flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-input bg-background px-6 py-8 text-center transition-colors outline-none", !disabled && "cursor-pointer hover:border-muted-foreground/40", isDragging && !disabled && "border-primary bg-primary/5", disabled && "pointer-events-none opacity-50", "focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"),
+						style: partStyle,
+						className: cn("flex rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-xl)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-surface,2px))] border-dashed border-input bg-background transition-colors outline-none", row ? "flex-row items-center gap-3 px-4 py-3 text-left" : "flex-col items-center gap-3 px-6 py-8 text-center", !disabled && "cursor-pointer hover:border-muted-foreground/40", isDragging && !disabled && "border-primary bg-primary/5", disabled && "pointer-events-none opacity-50", "focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"),
 						children: [
 							/* @__PURE__ */ jsx("span", {
 								className: "inline-flex",
 								"aria-hidden": true,
 								children: /* @__PURE__ */ jsx(IconAvatar, {
-									size: 48,
+									size: row ? 36 : 48,
 									color: "primary",
 									ring: {
 										show: true,
@@ -247,7 +251,7 @@ var FileUpload = React$1.forwardRef(function FileUpload({ className, title = "Dr
 								})
 							}),
 							/* @__PURE__ */ jsxs("div", {
-								className: "space-y-1",
+								className: cn("space-y-1", row && "min-w-0 flex-1 space-y-0.5"),
 								children: [/* @__PURE__ */ jsx(Typography, {
 									variant: "body2",
 									as: "p",
@@ -277,7 +281,8 @@ var FileUpload = React$1.forwardRef(function FileUpload({ className, title = "Dr
 				className: "flex flex-col gap-2",
 				"aria-live": "polite",
 				children: listFiles.map((file, index) => /* @__PURE__ */ jsxs("li", {
-					className: "flex items-center gap-3 rounded-xl border border-input bg-background px-3 py-2.5",
+					style: partStyle,
+					className: "flex items-center gap-3 rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-xl)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-surface,1px))] border-input bg-background px-3 py-2.5",
 					children: [
 						/* @__PURE__ */ jsx(FileListItemIcon, {}),
 						/* @__PURE__ */ jsxs("div", {

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+interface FileUploadProps extends Omit<React.ComponentPropsWithoutRef<"input">, "type" | "value" | "defaultValue" | "className">, Pick<StyleAxisProps, "radius"> {
+    /** Applied to the outer wrapper */
+    className?: string;
+    /** Primary line in the drop zone */
+    title?: string;
+    /** Optional muted line under the title */
+    description?: string;
+    /** Label for the browse control */
+    browseLabel?: string;
+    /**
+     * Controlled file list. When provided (including `[]`), the parent owns the list;
+     * update via `onFilesChange` (e.g. react-hook-form `Controller`). When omitted, the
+     * component keeps files in internal state (uncontrolled).
+     */
+    files?: File[];
+    /** Fires after the file list and input are updated */
+    onFilesChange?: (files: File[]) => void;
+    /**
+     * When true, hides the dropzone once one or more files are selected, and
+     * restores it when all files are removed. In `multiple` mode this prevents
+     * adding more files through the dropzone while files are present. Default: false.
+     */
+    hideDropzoneOnFileSelect?: boolean;
+    /**
+     * `stacked` (default): the icon, the lines and the browse control one under
+     * the other, centred — a drop zone that is the page's main thing.
+     * `row`: all three on one compact line, the browse control at its end — a
+     * drop zone inside a form or a card, where a tall one would dominate.
+     */
+    layout?: "stacked" | "row";
+}
+
+declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLInputElement>>;
+
+export { FileUpload, type FileUploadProps };

package/dist/components/file-upload/index.js

@@ -0,0 +1,2 @@
+import { FileUpload } from "./file-upload.js";
+export { FileUpload };

package/dist/components/filters-bar/filters-bar.js

@@ -1,9 +1,12 @@
 import { cn } from "../../utils/cn.js";
+import { densityStyle } from "../../utils/style-axes.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/filters-bar/filters-bar.tsx
-function FiltersBar({ search, actions, filters, searchClassName, className }) {
+function FiltersBar({ search, actions, filters, searchClassName, className, density }) {
+	const style = densityStyle(density);
 	if (!filters) return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex w-full items-center justify-between gap-3 md:gap-4", className),
+		style,
 		children: [search && /* @__PURE__ */ jsx("div", {
 			className: cn("min-w-0 flex-1", searchClassName ?? "max-w-md"),
 			children: search
@@ -14,6 +17,7 @@ function FiltersBar({ search, actions, filters, searchClassName, className }) {
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("@container w-full", className),
+		style,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-3 @3xl:flex-row @3xl:flex-wrap @3xl:items-center @3xl:gap-x-5",
 			children: [/* @__PURE__ */ jsxs("div", {

package/dist/components/filters-bar/index.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { d as DensityProps } from '../../style-axes-DSQ2DGc5.js';
+
+interface FiltersBarProps extends DensityProps {
+    /** Search box. Grows to fill the first row next to `actions`. */
+    search?: ReactNode;
+    /** Primary actions (create, scope menus). End-aligned and never shrunk. */
+    actions?: ReactNode;
+    /**
+     * Filter controls and "Clear all". Below a 768px-wide bar they sit in a
+     * second row that scrolls sideways; from 768px up they share one wrapping
+     * row with the search and actions. Omit for a single search + actions row.
+     */
+    filters?: ReactNode;
+    /**
+     * Replaces the search wrapper's default width: `max-w-md` for a single row,
+     * `@3xl:w-xs` with `filters`. For example `@3xl:w-sm` for a wider box.
+     */
+    searchClassName?: string;
+    className?: string;
+}
+
+declare function FiltersBar({ search, actions, filters, searchClassName, className, density, }: FiltersBarProps): React.JSX.Element;
+
+export { FiltersBar, type FiltersBarProps };

package/dist/components/filters-bar/index.js

@@ -0,0 +1,2 @@
+import FiltersBar from "./filters-bar.js";
+export { FiltersBar };

package/dist/components/flip-card/flip-card.js

@@ -0,0 +1,147 @@
+import { cn } from "../../utils/cn.js";
+import { usePrefersReducedMotion } from "../../core/hooks/use-prefers-reduced-motion.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/flip-card/flip-card.tsx
+var ROTATE = {
+	x: "rotateX",
+	y: "rotateY"
+};
+var TRANSLATE = {
+	x: "translateY",
+	y: "translateX"
+};
+var MOVES = "transition-transform duration-700 ease-in-out motion-reduce:transition-none";
+/** One face. The hidden one is out of the accessibility tree and unreachable by keyboard. */
+function Face({ hidden, side, className, style, onTransitionEnd, children }) {
+	const ref = React$1.useRef(null);
+	React$1.useLayoutEffect(() => {
+		ref.current?.toggleAttribute("inert", hidden);
+	}, [hidden]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": `flip-card-${side}`,
+		"aria-hidden": hidden || void 0,
+		className: cn("absolute inset-0", className),
+		style,
+		onTransitionEnd,
+		children
+	});
+}
+/** Whether `event` is the end of this element's own transform transition (not a child's). */
+function ownTransformEnd(event) {
+	return event.target === event.currentTarget && event.propertyName === "transform";
+}
+/**
+* How each face sits in a slide: the one showing at rest, the one that just
+* left still travelling out (or gone past the far edge), and once that has
+* ended, the hidden face waits — moved without a transition — before the near
+* edge, ready to follow the next one in.
+*/
+function slideStyles(axis, flipped, parked, turnClassName) {
+	const translate = TRANSLATE[axis];
+	const showing = {
+		className: cn(MOVES, turnClassName),
+		style: { transform: `${translate}(0%)` }
+	};
+	const hidden = parked ? {
+		className: "transition-none",
+		style: { transform: `${translate}(-100%)` }
+	} : {
+		className: cn(MOVES, turnClassName),
+		style: { transform: `${translate}(100%)` }
+	};
+	return flipped ? {
+		front: hidden,
+		back: showing
+	} : {
+		front: showing,
+		back: hidden
+	};
+}
+/**
+* A card with two faces that shows one and changes to the other. Controlled
+* by `flipped`; every change moves the same way, so a card that keeps
+* swapping what it shows (load the hidden face, then flip) reads as one
+* continuous motion, never as going back. `effect="turn"` turns it over;
+* `effect="slide"` slides the face showing out past the far edge while the
+* next follows it in from the near one. Under reduced motion the faces swap
+* in place. The card takes its size from its parent or `className`: the
+* faces fill it.
+*/
+function FlipCard({ front, back, flipped = false, axis = "y", effect = "turn", onFlipEnd, faceClassName, turnClassName, className, ...props }) {
+	const reducedMotion = usePrefersReducedMotion();
+	const [turns, setTurns] = React$1.useState(flipped ? 1 : 0);
+	const [seen, setSeen] = React$1.useState(flipped);
+	const [parked, setParked] = React$1.useState(true);
+	if (seen !== flipped) {
+		setSeen(flipped);
+		setTurns((count) => count + 1);
+		setParked(false);
+	}
+	const onFlipEndRef = React$1.useRef(onFlipEnd);
+	React$1.useEffect(() => {
+		onFlipEndRef.current = onFlipEnd;
+	});
+	const firstTurns = React$1.useRef(turns);
+	React$1.useEffect(() => {
+		if (reducedMotion && turns !== firstTurns.current) onFlipEndRef.current?.();
+	}, [reducedMotion, turns]);
+	function handleTurnEnd(event) {
+		if (ownTransformEnd(event)) onFlipEnd?.();
+	}
+	if (effect === "slide") {
+		const faces = slideStyles(axis, flipped, parked || reducedMotion, turnClassName);
+		const endFor = (showing) => (event) => {
+			if (!ownTransformEnd(event)) return;
+			if (showing) onFlipEnd?.();
+			else setParked(true);
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			"data-slot": "flip-card",
+			className: cn("relative overflow-hidden", className),
+			...props,
+			children: [/* @__PURE__ */ jsx(Face, {
+				hidden: flipped,
+				side: "front",
+				className: cn(faceClassName, faces.front.className),
+				style: faces.front.style,
+				onTransitionEnd: endFor(!flipped),
+				children: front
+			}), /* @__PURE__ */ jsx(Face, {
+				hidden: !flipped,
+				side: "back",
+				className: cn(faceClassName, faces.back.className),
+				style: faces.back.style,
+				onTransitionEnd: endFor(flipped),
+				children: back
+			})]
+		});
+	}
+	const angle = (axis === "x" ? -180 : 180) * turns;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "flip-card",
+		className: cn("relative perspective-midrange", className),
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "flip-card-inner",
+			className: cn("absolute inset-0 transform-3d", MOVES, turnClassName),
+			style: { transform: `${ROTATE[axis]}(${angle}deg)` },
+			onTransitionEnd: handleTurnEnd,
+			children: [/* @__PURE__ */ jsx(Face, {
+				hidden: flipped,
+				side: "front",
+				className: cn("backface-hidden", faceClassName),
+				children: front
+			}), /* @__PURE__ */ jsx(Face, {
+				hidden: !flipped,
+				side: "back",
+				className: cn("backface-hidden", faceClassName),
+				style: { transform: `${ROTATE[axis]}(180deg)` },
+				children: back
+			})]
+		})
+	});
+}
+//#endregion
+export { FlipCard };

package/dist/components/flip-card/index.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * The axis the card changes about. Turning: `x` tips it over top to bottom (a
+ * split-flap), `y` turns it like a page. Sliding: `x` moves the faces down,
+ * `y` moves them sideways.
+ */
+type FlipCardAxis = "x" | "y";
+/** How one face gives way to the other: turned over, or slid out with the next following it in. */
+type FlipCardEffect = "turn" | "slide";
+interface FlipCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The face showing while `flipped` is false. */
+    front: ReactNode;
+    /** The face showing while `flipped` is true. */
+    back: ReactNode;
+    /** Which face shows. Each change moves the same way, never back. */
+    flipped?: boolean;
+    /** Defaults to `y`. */
+    axis?: FlipCardAxis;
+    /** Defaults to `turn`. */
+    effect?: FlipCardEffect;
+    /** Called when a change has finished (at once under reduced motion, where the faces swap in place). */
+    onFlipEnd?: () => void;
+    /** Classes for both faces, which fill the card. */
+    faceClassName?: string;
+    /** Timing classes (`duration-*`, `ease-*`, `delay-*`) for what moves: the turning layer, or both faces in a slide. */
+    turnClassName?: string;
+}
+
+/**
+ * A card with two faces that shows one and changes to the other. Controlled
+ * by `flipped`; every change moves the same way, so a card that keeps
+ * swapping what it shows (load the hidden face, then flip) reads as one
+ * continuous motion, never as going back. `effect="turn"` turns it over;
+ * `effect="slide"` slides the face showing out past the far edge while the
+ * next follows it in from the near one. Under reduced motion the faces swap
+ * in place. The card takes its size from its parent or `className`: the
+ * faces fill it.
+ */
+declare function FlipCard({ front, back, flipped, axis, effect, onFlipEnd, faceClassName, turnClassName, className, ...props }: FlipCardProps): React.JSX.Element;
+
+export { FlipCard, type FlipCardAxis, type FlipCardEffect, type FlipCardProps };

package/dist/components/flip-card/index.js

@@ -0,0 +1,2 @@
+import { FlipCard } from "./flip-card.js";
+export { FlipCard };

package/dist/components/floating-window/_hooks/use-drag-move.js

@@ -0,0 +1,76 @@
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/components/floating-window/_hooks/use-drag-move.ts
+var DEFAULT_WINDOW_POSITION = {
+	x: 24,
+	y: 56
+};
+/** Keeps the whole frame inside the viewport. */
+function clampToViewport(position, frame, viewport) {
+	return {
+		x: Math.min(Math.max(position.x, 0), Math.max(viewport.width - frame.width, 0)),
+		y: Math.min(Math.max(position.y, 0), Math.max(viewport.height - frame.height, 0))
+	};
+}
+/**
+* Drags a fixed-position frame by a handle. The frame's position is a
+* transform written to the element on every pointer move — a value that
+* changes per frame cannot be a class, so it is written from here, never from
+* a `style` prop — and handed back once the pointer is released, clamped to
+* the viewport, for the caller to remember. Attach `frameRef` to the frame:
+* the frame is placed the moment it mounts (so a window that comes back from
+* a pill opens where it was) and again whenever the remembered spot changes.
+*/
+function useDragMove(position, onMove) {
+	const [frame, setFrame] = useState(null);
+	const current = useRef(position ?? DEFAULT_WINDOW_POSITION);
+	const drag = useRef(null);
+	function place(next) {
+		current.current = next;
+		if (frame) frame.style.transform = `translate(${next.x}px, ${next.y}px)`;
+	}
+	useLayoutEffect(() => {
+		const wanted = position ?? DEFAULT_WINDOW_POSITION;
+		place(frame ? clampToViewport(wanted, frame.getBoundingClientRect(), {
+			width: window.innerWidth,
+			height: window.innerHeight
+		}) : wanted);
+	}, [position, frame]);
+	function onPointerDown(event) {
+		if (event.button !== 0 || event.target instanceof Element && event.target.closest("button, a, input")) return;
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		drag.current = {
+			pointerId: event.pointerId,
+			dx: event.clientX - current.current.x,
+			dy: event.clientY - current.current.y
+		};
+	}
+	function onPointerMove(event) {
+		const active = drag.current;
+		if (!active || active.pointerId !== event.pointerId) return;
+		place({
+			x: event.clientX - active.dx,
+			y: event.clientY - active.dy
+		});
+	}
+	function onPointerUp(event) {
+		const active = drag.current;
+		if (!active || active.pointerId !== event.pointerId) return;
+		drag.current = null;
+		event.currentTarget.releasePointerCapture?.(event.pointerId);
+		const settled = frame ? clampToViewport(current.current, frame.getBoundingClientRect(), {
+			width: window.innerWidth,
+			height: window.innerHeight
+		}) : current.current;
+		place(settled);
+		onMove(settled);
+	}
+	return {
+		frameRef: setFrame,
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel: onPointerUp
+	};
+}
+//#endregion
+export { DEFAULT_WINDOW_POSITION, clampToViewport, useDragMove };

package/dist/components/floating-window/floating-window.js

@@ -0,0 +1,97 @@
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { Typography } from "../typography/typography.js";
+import { ToolbarButton } from "../toolbar/toolbar-button.js";
+import { useDragMove } from "./_hooks/use-drag-move.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dock, GripHorizontal, MessageSquare, Minus, X } from "lucide-react";
+//#region src/components/floating-window/floating-window.tsx
+/** The window folded away: a pill in the bottom-left corner that opens it again. */
+function Pill({ title, label, attention, onRestore }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		variant: "outline",
+		color: "gray",
+		radius: "full",
+		fullWidth: false,
+		"aria-label": attention ? `${label} (${attention})` : label,
+		startIcon: /* @__PURE__ */ jsx(MessageSquare, { className: "h-4 w-4" }),
+		onClick: onRestore,
+		className: "view-transition-morph fixed bottom-4 left-4 z-30 bg-background shadow-float",
+		children: [title, attention && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			"data-attention": true,
+			className: "absolute top-0 right-0 size-2.5 rounded-full bg-error ring-2 ring-background"
+		})]
+	});
+}
+/**
+* A small window floating over the page, moved by its bar: a non-modal
+* dialog, so the page behind it stays live. Its bar carries Minimize (to a
+* pill in the bottom-left corner), the way back (Dock) and the way out
+* (Close); Escape docks. Wrap `onMinimize` / `onRestore` in
+* `startViewTransition` and the window morphs into its pill and back.
+*/
+function FloatingWindow({ title, children, position, onMove, minimized = false, onMinimize, onRestore, onDock, onClose, dockLabel, closeLabel, minimizeLabel, restoreLabel, attention, moveLabel, className }) {
+	const handle = useDragMove(position, onMove);
+	function onKeyDown(event) {
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			onDock();
+		}
+	}
+	if (minimized) return /* @__PURE__ */ jsx(Pill, {
+		title,
+		label: restoreLabel ?? title,
+		...attention ? { attention } : {},
+		onRestore
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: handle.frameRef,
+		role: "dialog",
+		"aria-label": title,
+		onKeyDown,
+		"data-slot": "floating-window",
+		className: cn("view-transition-morph fixed top-0 left-0 z-30 flex h-128 max-h-dvh w-96 max-w-dvw flex-col overflow-hidden rounded-xl border border-border bg-background shadow-float", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			"aria-label": moveLabel,
+			onPointerDown: handle.onPointerDown,
+			onPointerMove: handle.onPointerMove,
+			onPointerUp: handle.onPointerUp,
+			onPointerCancel: handle.onPointerCancel,
+			className: "flex h-9 shrink-0 cursor-move touch-none items-center gap-2 border-b border-border bg-surface-container-low px-2 select-none",
+			children: [
+				/* @__PURE__ */ jsx(GripHorizontal, {
+					className: "h-4 w-4 shrink-0 text-foreground-muted",
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsx(Typography, {
+					variant: "subtitle2",
+					as: "h2",
+					className: "m-0 min-w-0 flex-1 truncate text-foreground",
+					children: title
+				}),
+				onMinimize && /* @__PURE__ */ jsx(ToolbarButton, {
+					label: minimizeLabel ?? title,
+					icon: /* @__PURE__ */ jsx(Minus, {}),
+					onClick: onMinimize
+				}),
+				/* @__PURE__ */ jsx(ToolbarButton, {
+					label: dockLabel,
+					icon: /* @__PURE__ */ jsx(Dock, {}),
+					onClick: onDock
+				}),
+				/* @__PURE__ */ jsx(ToolbarButton, {
+					label: closeLabel,
+					icon: /* @__PURE__ */ jsx(X, {}),
+					onClick: onClose
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1",
+			children
+		})]
+	});
+}
+//#endregion
+export { FloatingWindow };