@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/components/coverflow/coverflow.js

@@ -0,0 +1,198 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { usePrefersReducedMotion } from "../../core/hooks/use-prefers-reduced-motion.js";
+import { useOnScreen } from "../../core/hooks/use-on-screen.js";
+import { VISIBLE_REACH, poseFor } from "./_constants/coverflow-poses.js";
+import { COVERFLOW_SHAPES } from "./_constants/coverflow-shapes.js";
+import { ringOffset } from "./_utils/ring.js";
+import { useCoverflow } from "./_hooks/use-coverflow.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/components/coverflow/coverflow.tsx
+var DELAY_MIN = 1e3;
+var DELAY_MAX = 1e4;
+var DELAY_DEFAULT = 5e3;
+function clamp(value, min, max, fallback) {
+	if (!Number.isFinite(value)) return fallback;
+	return Math.min(max, Math.max(min, Math.floor(value)));
+}
+var DEFAULT_LABELS = {
+	carousel: "Carousel",
+	previous: "Previous",
+	next: "Next",
+	pick: "Choose an item",
+	show: (name) => `Show ${name}`,
+	open: (name) => `Open ${name}`
+};
+/** The default face: the item's image, or the fallback when there is none or it fails to load. */
+function ImageFace({ item, state, variant, fallback }) {
+	const [failed, setFailed] = React$1.useState(false);
+	if (!item.image || failed) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback ?? /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-2xl bg-muted" }) });
+	return /* @__PURE__ */ jsx("img", {
+		src: item.image,
+		alt: item.imageAlt ?? "",
+		draggable: false,
+		loading: state.visible ? "eager" : "lazy",
+		onError: () => setFailed(true),
+		className: cn("h-full w-full", variant === "cutout" ? "object-contain drop-shadow-2xl" : "rounded-2xl border border-border bg-muted object-cover shadow-2xl")
+	});
+}
+/** One card, posed by its distance from the front, standing on its own reflection. */
+function Card({ item, offset, front, props, onPick }) {
+	const { aspect = "landscape", variant = "card", reflection = true, renderFace, imageFallback, onOpen, openCursor = "zoom-in", labels } = props;
+	const shape = COVERFLOW_SHAPES[aspect];
+	const state = {
+		offset,
+		visible: Math.abs(offset) <= VISIBLE_REACH
+	};
+	const face = () => renderFace ? renderFace(item, state) : /* @__PURE__ */ jsx(ImageFace, {
+		item,
+		state,
+		variant,
+		fallback: imageFallback
+	});
+	const faceClass = cn("relative block w-full rounded-2xl", shape.face);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "coverflow-card",
+		className: cn("absolute inset-x-0 top-0 mx-auto transition-all duration-700 ease-out transform-3d motion-reduce:transition-none", shape.card, poseFor(offset)),
+		"aria-hidden": front ? void 0 : true,
+		children: [front && !onOpen ? /* @__PURE__ */ jsx("div", {
+			className: faceClass,
+			children: face()
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			tabIndex: front ? 0 : -1,
+			"aria-label": front ? (labels?.open ?? DEFAULT_LABELS.open)(item.name) : void 0,
+			onClick: () => onPick(offset),
+			className: cn(faceClass, "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", front && openCursor === "zoom-in" ? "cursor-zoom-in" : "cursor-pointer"),
+			children: face()
+		}), reflection && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			"data-slot": "coverflow-reflection",
+			className: cn("relative mt-px w-full overflow-hidden opacity-50 mask-b-from-0% mask-b-to-90%", shape.reflection),
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("w-full -scale-y-100", shape.face),
+				children: face()
+			})
+		})]
+	});
+}
+function Arrows({ labels, onPrevious, onNext }) {
+	const arrow = "absolute top-1/3 z-40 rounded-full bg-background";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "icon",
+		fullWidth: false,
+		className: cn(arrow, "left-0"),
+		"aria-label": labels?.previous ?? DEFAULT_LABELS.previous,
+		startIcon: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true }),
+		onClick: onPrevious
+	}), /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "icon",
+		fullWidth: false,
+		className: cn(arrow, "right-0"),
+		"aria-label": labels?.next ?? DEFAULT_LABELS.next,
+		startIcon: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true }),
+		onClick: onNext
+	})] });
+}
+/**
+* A 3D coverflow seen from inside a ring of cards: the front card facing you,
+* the others turned toward you on either side, all standing on a glass floor,
+* with the front item's caption beneath. It never ends — both sides always
+* show cards, and it turns round from the last item to the first.
+*
+* Arrows, the arrow keys, a swipe, a dot or a click on a side card brings a
+* card round; choosing the front card calls `onOpen`. With `autoplay` it turns
+* by itself, except under reduced motion, off screen, or while in use.
+*
+* It draws no background: the reflections need a dark floor, so put it on one
+* (a `.dark` scope with `bg-background`, for instance).
+*/
+function Coverflow(props) {
+	const { items, index, defaultIndex, onIndexChange, autoplay = false, delay = DELAY_DEFAULT, showArrows = true, showDots = true, onOpen, labels, "aria-labelledby": labelledBy, className } = props;
+	const root = React$1.useRef(null);
+	const reducedMotion = usePrefersReducedMotion();
+	const onScreen = useOnScreen(root);
+	const count = items.length;
+	const flow = useCoverflow({
+		count,
+		index,
+		defaultIndex,
+		onIndexChange: onIndexChange && ((next) => onIndexChange(next, items[next])),
+		autoplayMs: autoplay && onScreen && !reducedMotion ? clamp(delay, DELAY_MIN, DELAY_MAX, DELAY_DEFAULT) : null
+	});
+	const front = items[flow.index];
+	function pick(offset) {
+		if (flow.wasSwipe()) return;
+		if (offset === 0) {
+			if (front) onOpen?.(front);
+		} else flow.turn(offset);
+	}
+	if (!front) return null;
+	const many = count > 1;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		"data-slot": "coverflow",
+		role: "region",
+		"aria-roledescription": "carousel",
+		"aria-labelledby": labelledBy,
+		"aria-label": labelledBy ? void 0 : labels?.carousel ?? DEFAULT_LABELS.carousel,
+		className: cn("flex flex-col gap-6", className),
+		onKeyDown: many ? flow.onKeyDown : void 0,
+		onMouseEnter: () => flow.hold(true),
+		onMouseLeave: () => flow.hold(false),
+		onFocus: () => flow.hold(true),
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) flow.hold(false);
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "coverflow-stage",
+				className: cn("relative touch-pan-y select-none perspective-distant", COVERFLOW_SHAPES[props.aspect ?? "landscape"].stage),
+				onPointerDown: many ? flow.onPointerDown : void 0,
+				onPointerUp: many ? flow.onPointerUp : void 0,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "relative h-full transform-3d",
+					children: Array.from({ length: flow.slots }, (_, slot) => {
+						const item = items[slot % count];
+						const offset = ringOffset(slot, flow.slot, flow.slots);
+						return /* @__PURE__ */ jsx(Card, {
+							item,
+							offset,
+							front: offset === 0,
+							props,
+							onPick: pick
+						}, `${item.id}:${Math.floor(slot / count)}`);
+					})
+				}), many && showArrows && /* @__PURE__ */ jsx(Arrows, {
+					labels,
+					onPrevious: () => flow.turn(-1),
+					onNext: () => flow.turn(1)
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-live": "polite",
+				"data-slot": "coverflow-caption",
+				children: front.caption
+			}),
+			many && showDots && /* @__PURE__ */ jsx("div", {
+				role: "group",
+				"aria-label": labels?.pick ?? DEFAULT_LABELS.pick,
+				className: "flex justify-center gap-2",
+				children: items.map((item, i) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": (labels?.show ?? DEFAULT_LABELS.show)(item.name),
+					"aria-current": i === flow.index ? true : void 0,
+					onClick: () => flow.show(i),
+					className: cn("h-2 rounded-full transition-all duration-300 motion-reduce:transition-none", i === flow.index ? "w-6 bg-primary" : "w-2 bg-border hover:bg-foreground-secondary")
+				}, item.id))
+			})
+		]
+	});
+}
+//#endregion
+export { Coverflow };

package/dist/components/coverflow/index.d.ts

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface CoverflowItem {
+    /** Stable key; also what `onOpen` and `onIndexChange` report. */
+    id: string;
+    /** The accessible name: dots ("Show …") and the front card ("Open …") use it. */
+    name: string;
+    /** The picture on the card. Optional only when `renderFace` draws the face. */
+    image?: string;
+    /** Alt text. Default "" — the name is already on the card's button and in the caption. */
+    imageAlt?: string;
+    /** Shown under the stage while this item is in front: a title, a blurb, actions. */
+    caption?: ReactNode;
+}
+/** Accessible names. Pass translated strings; English is the fallback (same convention as `CarouselLabels`). */
+interface CoverflowLabels {
+    /** Names the region when there is no visible heading (`aria-labelledby`). Default "Carousel". */
+    carousel?: string;
+    /** The previous arrow. Default "Previous". */
+    previous?: string;
+    /** The next arrow. Default "Next". */
+    next?: string;
+    /** The dot row. Default "Choose an item". */
+    pick?: string;
+    /** One dot. Default `Show ${name}`. */
+    show?: (name: string) => string;
+    /** The front card, when `onOpen` is set. Default `Open ${name}`. */
+    open?: (name: string) => string;
+}
+/** The card's proportions; sets the card width per breakpoint, the reflection depth and the stage height together. */
+type CoverflowAspect = 'square' | 'landscape';
+/** How the image sits on the card. */
+type CoverflowVariant = 'card' | 'cutout';
+interface CoverflowFaceState {
+    /** Places from the front: 0 is the front, negative is left. */
+    offset: number;
+    /** Within the visible reach — the moment to load or render an expensive picture. */
+    visible: boolean;
+}
+interface CoverflowProps {
+    items: CoverflowItem[];
+    /** `square` (cut-out objects, 1:1) or `landscape` (photos, 4:3). Default `landscape`. */
+    aspect?: CoverflowAspect;
+    /**
+     * `card`: the image fills a rounded, bordered card with a shadow (`object-cover`) — photos.
+     * `cutout`: the image floats with no card behind it (`object-contain`, drop shadow) — transparent PNGs.
+     * Default `card`.
+     */
+    variant?: CoverflowVariant;
+    /** Draw the glass reflection under each card. Default `true`. */
+    reflection?: boolean;
+    /** Called when the front card is chosen. Without it the front card is a picture, not a button. */
+    onOpen?: (item: CoverflowItem) => void;
+    /**
+     * The front card's cursor, saying what choosing it does: `zoom-in` (the
+     * default) for a picture opened larger, `pointer` for a card that leads
+     * somewhere — a project's own page. Only with `onOpen`.
+     */
+    openCursor?: 'zoom-in' | 'pointer';
+    /** Controlled front item, by index into `items`. */
+    index?: number;
+    /** Uncontrolled starting item. Default 0. */
+    defaultIndex?: number;
+    /** The front item changed (any cause: arrows, keys, swipe, dots, autoplay). */
+    onIndexChange?: (index: number, item: CoverflowItem) => void;
+    /** Turn by itself. Never under reduced motion, off screen, in a hidden tab, or while the pointer or focus is inside. Default `false`, as in `Carousel`. */
+    autoplay?: boolean;
+    /** Milliseconds between turns. Clamped to `[1000, 10000]`. Default 5000. */
+    delay?: number;
+    /** Show the arrows. Default `true`. */
+    showArrows?: boolean;
+    /** Show the dot row. Default `true`. */
+    showDots?: boolean;
+    /**
+     * Replaces the default face (the image) when the picture is not a plain URL: rendered on demand,
+     * animated, a component. Drawn TWICE (the card and its reflection), so it must be picture-only —
+     * nothing focusable, no ids.
+     */
+    renderFace?: (item: CoverflowItem, state: CoverflowFaceState) => ReactNode;
+    /** Shown when `image` is missing or fails to load. Default: a `bg-muted` tile. */
+    imageFallback?: ReactNode;
+    labels?: CoverflowLabels;
+    /** Names the region by a visible heading instead of `labels.carousel`. */
+    'aria-labelledby'?: string;
+    /** Applied to the root. Background, spacing — never the stage's height (that comes from `aspect`). */
+    className?: string;
+}
+
+/**
+ * A 3D coverflow seen from inside a ring of cards: the front card facing you,
+ * the others turned toward you on either side, all standing on a glass floor,
+ * with the front item's caption beneath. It never ends — both sides always
+ * show cards, and it turns round from the last item to the first.
+ *
+ * Arrows, the arrow keys, a swipe, a dot or a click on a side card brings a
+ * card round; choosing the front card calls `onOpen`. With `autoplay` it turns
+ * by itself, except under reduced motion, off screen, or while in use.
+ *
+ * It draws no background: the reflections need a dark floor, so put it on one
+ * (a `.dark` scope with `bg-background`, for instance).
+ */
+declare function Coverflow(props: CoverflowProps): React.JSX.Element | null;
+
+export { Coverflow, type CoverflowAspect, type CoverflowFaceState, type CoverflowItem, type CoverflowLabels, type CoverflowProps, type CoverflowVariant };

package/dist/components/coverflow/index.js

@@ -0,0 +1,2 @@
+import { Coverflow } from "./coverflow.js";
+export { Coverflow };

package/dist/components/data-table/data-table.js

@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn.js";
+import { densityStyle, useStyleAxes } from "../../utils/style-axes.js";
 import { useScrollOverflow } from "../../core/hooks/use-scroll-overflow.js";
 import { Checkbox } from "../../core/checkbox/motion-checkbox.js";
 import { Table } from "../../core/table.js";
@@ -15,7 +16,11 @@ import { Columns2 } from "lucide-react";
 import { getCoreRowModel, getPaginationRowModel, useReactTable } from "@tanstack/react-table";
 //#region src/components/data-table/data-table.tsx
 var edgeShadowClass = "pointer-events-none absolute inset-y-0 z-[3] w-4 from-black/10 to-transparent opacity-0 transition-opacity dark:from-black/40";
-function DataTable({ columns, data, tableActionsContent, isFetching, pageIndex = 0, hasNextPage = false, hasPrevPage = false, onNextPage, onPrevPage, pageSize = 5, onPageSizeChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, showColumnVisibilitySelector = true, columnVisibilityLabel = "Columns", noResultsHeading = "No results", noResultsDescription = "No results found. Try adjusting your search or filter to find what you're looking for.", noResultsAction, noResultsIllustration, hideNoResultsIllustration, pageLabel, previousLabel = "Previous", nextLabel = "Next", pageSizeOptionLabel, onRowClick, showBorder = false, rowSelection, onRowSelectionChange, getRowId, enableMultiRowSelection = true, enableRowSelection = false, tableRowClassName, getRowClassName, className, hidePaginationControls = false }) {
+function DataTable({ columns, data, tableActionsContent, isFetching, pageIndex = 0, hasNextPage = false, hasPrevPage = false, onNextPage, onPrevPage, pageSize = 5, onPageSizeChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, showColumnVisibilitySelector = true, columnVisibilityLabel = "Columns", noResultsHeading = "No results", noResultsDescription = "No results found. Try adjusting your search or filter to find what you're looking for.", noResultsAction, noResultsIllustration, hideNoResultsIllustration, pageLabel, previousLabel = "Previous", nextLabel = "Next", pageSizeOptionLabel, onRowClick, showBorder = false, rowSelection, onRowSelectionChange, getRowId, enableMultiRowSelection = true, enableRowSelection = false, tableRowClassName, getRowClassName, className, hidePaginationControls = false, radius, border, density }) {
+	const { partStyle } = useStyleAxes({
+		radius,
+		border
+	}, ["radius", "border"]);
 	const [columnVisibility, setColumnVisibility] = useState(() => {
 		const initial = {};
 		for (const col of columns) {
@@ -105,6 +110,7 @@ function DataTable({ columns, data, tableActionsContent, isFetching, pageIndex =
 	return /* @__PURE__ */ jsxs("div", {
 		ref: rootRef,
 		className: cn("space-y-3", className),
+		style: densityStyle(density),
 		children: [
 			showToolbar && /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center gap-3 data-table-toolbar",
@@ -129,7 +135,8 @@ function DataTable({ columns, data, tableActionsContent, isFetching, pageIndex =
 			/* @__PURE__ */ jsxs("div", {
 				"data-overflow-start": overflow.start || void 0,
 				"data-overflow-end": overflow.end || void 0,
-				className: cn("group/data-table relative overflow-hidden rounded-md data-table-container", showToolbar && "mt-6", showBorder && "border border-border/50"),
+				style: partStyle,
+				className: cn("group/data-table relative overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-md)))] data-table-container", showToolbar && "mt-6", showBorder && "border-[length:var(--espd-own-border-width,var(--espd-border-width-surface,1px))] border-border/50"),
 				children: [
 					/* @__PURE__ */ jsxs(Table, {
 						ref: tableRef,

package/dist/components/data-table/index.d.ts

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { ColumnDef, RowSelectionState, OnChangeFn } from '@tanstack/react-table';
+import { k as StyleAxisProps, d as DensityProps } from '../../style-axes-DSQ2DGc5.js';
+
+/** Style axes: `radius`, and `border` (with `showBorder`). */
+interface DataTableProps<TData, TValue> extends Pick<StyleAxisProps, "radius" | "border">, DensityProps {
+    /**
+     * Column definitions. Responsive behaviour is set per column through `meta`
+     * (see `DataTableColumnMeta`): `sticky` pins leading columns while the table
+     * scrolls horizontally, `wrap` lets long text wrap instead of staying on
+     * one line, and `hideBelow` hides lower-priority columns while the table is
+     * narrow.
+     */
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    tableActionsContent?: ReactNode;
+    isFetching?: boolean;
+    pageIndex?: number;
+    hasNextPage?: boolean;
+    hasPrevPage?: boolean;
+    onNextPage?: () => void;
+    onPrevPage?: () => void;
+    pageSize?: number;
+    onPageSizeChange?: (size: number) => void;
+    /**
+     * Page sizes offered in the page-size selector. Defaults to
+     * `DEFAULT_PAGE_SIZE_OPTIONS` (`[5, 10, 15, 20, 25]`); pass `[]` to hide the
+     * selector. The current `pageSize` is always selectable, even when absent from
+     * this list. The selector is also hidden when `onPageSizeChange` is omitted,
+     * since it would have no effect.
+     */
+    pageSizeOptions?: readonly number[];
+    showColumnVisibilitySelector?: boolean;
+    columnVisibilityLabel?: string;
+    noResultsHeading?: string | ReactNode;
+    noResultsDescription?: string | ReactNode;
+    noResultsAction?: ReactNode;
+    noResultsIllustration?: ReactNode;
+    hideNoResultsIllustration?: boolean;
+    pageLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    pageSizeOptionLabel?: (size: number) => string;
+    onRowClick?: (row: TData) => void;
+    showBorder?: boolean;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    getRowId?: (row: TData, index: number) => string;
+    enableMultiRowSelection?: boolean;
+    enableRowSelection?: boolean;
+    /** Extra class names on each `<TableRow>` (e.g. `group` for row-hover affordances). */
+    tableRowClassName?: string;
+    /** Compute per-row class names (e.g. highlight top rows). */
+    getRowClassName?: (row: TData, index: number) => string | undefined;
+    /** Extra class names for the outer DataTable wrapper. */
+    className?: string;
+    hidePaginationControls?: boolean;
+}
+declare function DataTable<TData, TValue>({ columns, data, tableActionsContent, isFetching, pageIndex, hasNextPage, hasPrevPage, onNextPage, onPrevPage, pageSize, onPageSizeChange, pageSizeOptions, showColumnVisibilitySelector, columnVisibilityLabel, noResultsHeading, noResultsDescription, noResultsAction, noResultsIllustration, hideNoResultsIllustration, pageLabel, previousLabel, nextLabel, pageSizeOptionLabel, onRowClick, showBorder, rowSelection, onRowSelectionChange, getRowId, enableMultiRowSelection, enableRowSelection, tableRowClassName, getRowClassName, className, hidePaginationControls, radius, border, density, }: DataTableProps<TData, TValue>): React.JSX.Element;
+
+/** Responsive options read from a column's `meta`. */
+interface DataTableColumnMeta {
+    /** Start with the column hidden; users can show it from the Columns menu. */
+    defaultHidden?: boolean;
+    /**
+     * Pin the column to the left edge while the table scrolls horizontally.
+     * Only leading columns can be pinned: a sticky column after a non-sticky one
+     * is ignored. The row-selection checkbox column is pinned along with them.
+     */
+    sticky?: boolean;
+    /**
+     * Let the cell text wrap. Cells stay on one line by default so that narrow
+     * screens scroll the table instead of squashing every column; use this for
+     * long free-text columns such as descriptions.
+     */
+    wrap?: boolean;
+    /**
+     * Give the column whatever width the other columns leave, and never let its
+     * content widen the table. Pair it with a cell that truncates (`truncate`)
+     * so a long value ends in an ellipsis at the column edge instead of making
+     * the table scroll. With `wrap`, the text wraps within that width instead,
+     * but keeps `wrap`'s 16rem minimum.
+     */
+    fill?: boolean;
+    /**
+     * Hide the column while the table is narrower than this: a size from
+     * Tailwind's container scale (`sm` 24rem/384px, `md` 28rem/448px, `lg`
+     * 32rem/512px, `xl` 36rem/576px, `2xl` 42rem/672px, `3xl` 48rem/768px,
+     * `4xl` 56rem/896px, `5xl` 64rem/1024px, `6xl` 72rem/1152px, `7xl`
+     * 80rem/1280px) or a width in pixels. A table on a phone is narrower than
+     * `sm`, so `hideBelow: "sm"` hides the column on phones.
+     *
+     * Measured against the table's own width, not the viewport, so it also
+     * applies in sheets, split panes and next to a sidebar. Users can still show
+     * the column from the Columns menu; visibility is only re-applied when the
+     * width crosses the breakpoint.
+     */
+    hideBelow?: DataTableBreakpoint | number;
+}
+/** Tailwind's container-query sizes (`@sm` … `@7xl`). */
+type DataTableBreakpoint = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+
+interface DataTableRowActionsProps {
+    children: ReactNode;
+    /** Never hide the actions, e.g. when the same component renders outside a table. */
+    alwaysVisible?: boolean;
+    /** Keep the actions visible on viewports narrower than this breakpoint. */
+    alwaysVisibleBelow?: "md";
+    className?: string;
+}
+/**
+ * Row action cell content for DataTable. Hidden until the row is hovered, but
+ * only on devices that can hover, so touch screens always show it. Stays visible
+ * for keyboard focus and while a menu or dialog it opened is open. Clicks and
+ * key presses don't reach the row's own click handler.
+ */
+declare function DataTableRowActions({ children, alwaysVisible, alwaysVisibleBelow, className, }: DataTableRowActionsProps): React.JSX.Element;
+
+export { DataTable, type DataTableBreakpoint, type DataTableColumnMeta, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps };

package/dist/components/data-table/index.js

@@ -0,0 +1,3 @@
+import { DataTable } from "./data-table.js";
+import { DataTableRowActions } from "./row-actions.js";
+export { DataTable, DataTableRowActions };

package/dist/components/date-picker/date-picker.js

@@ -10,7 +10,7 @@ import { CalendarIcon } from "lucide-react";
 import { format } from "date-fns";
 //#region src/components/date-picker/date-picker.tsx
 function DatePicker(props) {
-	const { value, onChange, defaultValue, formatDate, name, trigger, placeholder = "Pick a date", label, size, hideIcon = false, disabled = false, required = false, rounded = false, error, errorContent, startHelperContent, endHelperContent, hintContent, clearable = false, clearLabel = "Clear", calendarProps, open: controlledOpen, onOpenChange, className } = props;
+	const { value, onChange, defaultValue, formatDate, name, trigger, placeholder = "Pick a date", label, size, hideIcon = false, disabled = false, required = false, rounded = false, radius, popoverRadius, popoverElevation, error, errorContent, startHelperContent, endHelperContent, hintContent, clearable = false, clearLabel = "Clear", calendarProps, open: controlledOpen, onOpenChange, className } = props;
 	const [uncontrolledDate, setUncontrolledDate] = useState(defaultValue);
 	const [internalOpen, setInternalOpen] = useState(false);
 	const isControlled = "value" in props;
@@ -42,6 +42,7 @@ function DatePicker(props) {
 		disabled,
 		required,
 		rounded,
+		radius,
 		error,
 		errorContent,
 		startHelperContent,
@@ -73,7 +74,9 @@ function DatePicker(props) {
 				})
 			}), /* @__PURE__ */ jsx(PopoverContent, {
 				align: "start",
-				className: "w-auto overflow-hidden rounded-2xl p-1 shadow-lg",
+				radius: popoverRadius,
+				elevation: popoverElevation,
+				className: "w-auto overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-2xl)))] p-1 shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-lg)))]",
 				children: /* @__PURE__ */ jsx(Calendar, {
 					mode: "single",
 					selected: selectedDate,

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import React__default from 'react';
+import { C as CalendarProps } from '../../calendar.props-BtCzuWH1.js';
+import { S as Size } from '../../index-BQANnKs9.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+import 'react-day-picker';
+
+interface DatePickerProps extends Pick<StyleAxisProps, "radius"> {
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    defaultValue?: Date;
+    formatDate?: (date: Date) => string;
+    name?: string;
+    trigger?: React__default.ReactNode;
+    placeholder?: string;
+    label?: React__default.ReactNode;
+    size?: Size;
+    hideIcon?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    /** Fully rounded trigger. Same as `radius="full"` (the trigger's radius); `radius` wins when both are set. */
+    rounded?: boolean;
+    /**
+     * Corner radius of the calendar popover (overlay role), like `radius` on
+     * `PopoverContent`. `radius` shapes the trigger only.
+     */
+    popoverRadius?: StyleAxisProps["radius"];
+    /** Shadow of the calendar popover (overlay role), like `elevation` on `PopoverContent`. */
+    popoverElevation?: StyleAxisProps["elevation"];
+    error?: boolean;
+    errorContent?: React__default.ReactNode;
+    startHelperContent?: React__default.ReactNode;
+    endHelperContent?: React__default.ReactNode;
+    hintContent?: React__default.ReactNode;
+    /** Renders an X button next to the trigger that clears the selection. */
+    clearable?: boolean;
+    /** Accessible name of the clear button. @default "Clear" */
+    clearLabel?: string;
+    calendarProps?: Omit<CalendarProps, "mode" | "selected" | "onSelect">;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+
+declare function DatePicker(props: DatePickerProps): React.JSX.Element;
+declare namespace DatePicker {
+    var displayName: string;
+}
+
+export { DatePicker, type DatePickerProps };

package/dist/components/date-picker/index.js

@@ -0,0 +1,2 @@
+import { DatePicker } from "./date-picker.js";
+export { DatePicker };

package/dist/components/date-range-picker/date-range-picker.js

@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { Button } from "../button/button.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
 import { Input } from "../../core/input/input.js";
@@ -29,8 +30,12 @@ var parseDateOrNull = (value, dateFormat) => {
 	const parsed = parse(value, dateFormat, /* @__PURE__ */ new Date());
 	return isValid(parsed) ? parsed : null;
 };
-function DateRangePicker({ presets, presetLabels, allowCustom = false, lockEndToToday = false, disableFutureDates = false, dateFormat = DEFAULT_DATE_FORMAT, onChange, onPresetChange, onDraftChange, selectedPresetId, selectedStartDate, selectedEndDate, clearable = false, clearLabel = "Clear", onClear, trigger, placeholder = "Select date range", label, size, hideIcon = false, disabled = false, required = false, rounded = false, error, errorContent, startHelperContent, endHelperContent, hintContent, align = "start", side = "bottom", className }) {
+function DateRangePicker({ presets, presetLabels, allowCustom = false, lockEndToToday = false, disableFutureDates = false, dateFormat = DEFAULT_DATE_FORMAT, onChange, onPresetChange, onDraftChange, selectedPresetId, selectedStartDate, selectedEndDate, clearable = false, clearLabel = "Clear", onClear, trigger, placeholder = "Select date range", label, size, hideIcon = false, disabled = false, required = false, rounded = false, radius, popoverRadius, popoverElevation, error, errorContent, startHelperContent, endHelperContent, hintContent, align = "start", side = "bottom", className }) {
 	const [open, setOpen] = React$1.useState(false);
+	const popoverAxes = useStyleAxes({
+		radius: popoverRadius,
+		elevation: popoverElevation
+	}, ["radius", "elevation"]);
 	const [showCalendar, setShowCalendar] = React$1.useState(false);
 	const [draftRange, setDraftRange] = React$1.useState(EMPTY_DRAFT_RANGE);
 	const [calendarMonth, setCalendarMonth] = React$1.useState(/* @__PURE__ */ new Date());
@@ -157,6 +162,7 @@ function DateRangePicker({ presets, presetLabels, allowCustom = false, lockEndTo
 		disabled,
 		required,
 		rounded,
+		radius,
 		error,
 		errorContent,
 		startHelperContent,
@@ -247,6 +253,8 @@ function DateRangePicker({ presets, presetLabels, allowCustom = false, lockEndTo
 				align,
 				side,
 				collisionPadding: 16,
+				radius: popoverRadius,
+				elevation: popoverElevation,
 				className: cn("w-auto min-w-[10rem] gap-0 p-0 relative", isInline ? "max-h-(--radix-popover-content-available-height) max-w-(--radix-popover-content-available-width) overflow-y-auto" : "overflow-visible", allowCustom && showCalendar && calendarLayout === "right" && "rounded-r-none", allowCustom && showCalendar && calendarLayout === "left" && "rounded-l-none"),
 				children: [
 					/* @__PURE__ */ jsxs("div", {
@@ -288,7 +296,8 @@ function DateRangePicker({ presets, presetLabels, allowCustom = false, lockEndTo
 					}),
 					allowCustom && showCalendar && !isInline && /* @__PURE__ */ jsx("div", {
 						ref: calendarRef,
-						className: cn("absolute top-0 border bg-popover text-popover-foreground shadow-lg", calendarLayout === "right" ? "left-full -ml-px rounded-r-2xl border-l" : "right-full -mr-px rounded-l-2xl border-r"),
+						style: popoverAxes.partStyle,
+						className: cn("absolute top-0 border bg-popover text-popover-foreground shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-lg)))]", calendarLayout === "right" ? "left-full -ml-px rounded-r-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-2xl)))] border-l" : "right-full -mr-px rounded-l-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-2xl)))] border-r"),
 						children: calendarBody
 					})
 				]