@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/dist/components/avatar-group/avatar-group.js

@@ -0,0 +1,35 @@
+import { cn } from "../../utils/cn.js";
+import { Children } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/avatar-group/avatar-group.tsx
+var chipSizeClasses = {
+	sm: "h-5 min-w-5 px-1 text-[10px]",
+	default: "h-7 min-w-7 px-1.5 text-xs",
+	lg: "h-10 min-w-10 px-2 text-sm",
+	xl: "h-19 min-w-19 px-3 text-xl"
+};
+/**
+* A row of overlapping avatars — the people behind something, at a glance.
+* Each sits on a ring of the page background so the overlap reads as a stack;
+* past `max` (or up to `total`) a "+N" chip says how many more there are.
+*/
+function AvatarGroup({ children, max, total, size = "default", label, className }) {
+	const items = Children.toArray(children);
+	const shown = max === void 0 ? items : items.slice(0, Math.max(0, max));
+	const more = Math.max(0, (total ?? items.length) - shown.length);
+	return /* @__PURE__ */ jsxs("div", {
+		role: label ? "group" : void 0,
+		"aria-label": label,
+		"aria-hidden": label ? void 0 : true,
+		className: cn("flex items-center", className),
+		children: [shown.map((item, index) => /* @__PURE__ */ jsx("span", {
+			className: "-ml-2 inline-flex shrink-0 rounded-full ring-2 ring-background first:ml-0",
+			children: item
+		}, index)), more > 0 && /* @__PURE__ */ jsxs("span", {
+			className: cn("-ml-2 inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2 ring-background first:ml-0", chipSizeClasses[size]),
+			children: ["+", more]
+		})]
+	});
+}
+//#endregion
+export { AvatarGroup as default };

package/dist/components/avatar-group/index.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { a as AvatarSize } from '../../avatar.props-2q5BsX-R.js';
+import '../../index-BQANnKs9.js';
+
+interface AvatarGroupProps {
+    /** The `Avatar`s, in order; the first sits on top. */
+    children: ReactNode;
+    /** Show at most this many; the rest become a "+N" chip. Default: all of them. */
+    max?: number;
+    /**
+     * How many people the group stands for, when that is more than the avatars
+     * passed (the five most active of 31 makers). The chip counts the
+     * difference. Default: the number of children.
+     */
+    total?: number;
+    /** Size of the "+N" chip — match the avatars'. Default `default`. */
+    size?: AvatarSize;
+    /** Accessible name for the group ("31 makers"). Without one the group is decorative. */
+    label?: string;
+    className?: string;
+}
+
+/**
+ * A row of overlapping avatars — the people behind something, at a glance.
+ * Each sits on a ring of the page background so the overlap reads as a stack;
+ * past `max` (or up to `total`) a "+N" chip says how many more there are.
+ */
+declare function AvatarGroup({ children, max, total, size, label, className }: AvatarGroupProps): React.JSX.Element;
+
+export { AvatarGroup, type AvatarGroupProps };

package/dist/components/avatar-group/index.js

@@ -0,0 +1,2 @@
+import AvatarGroup from "./avatar-group.js";
+export { AvatarGroup };

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

@@ -0,0 +1,14 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+import { f as Variant } from '../../variant-D81RhpbR.js';
+import { C as Color } from '../../index-BQANnKs9.js';
+
+declare const badgeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, Pick<StyleAxisProps, "radius"> {
+    color?: Color;
+    variant?: Variant;
+}
+declare function Badge({ className, variant, color, style, children, radius, ...props }: BadgeProps): React.JSX.Element;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/components/badge/index.js

@@ -0,0 +1,2 @@
+import { Badge, badgeVariants } from "../../core/badge.js";
+export { Badge, badgeVariants };

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    separator?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: {
+    ({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+    displayName: string;
+};
+declare const BreadcrumbEllipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+    displayName: string;
+};
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,2 @@
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../../core/breadcrumb.js";
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/components/bubble/bubble.js

@@ -0,0 +1,18 @@
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/bubble/bubble.tsx
+/**
+* One turn's text in a conversation (shadcn's Bubble, on the library's
+* tokens). The person's own words sit in a soft tinted box; the other side is
+* plain text on the page, so a long reply reads like a page rather than a
+* stack of boxes.
+*/
+function Bubble({ variant = "plain", size = "base", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble",
+		className: cn("min-w-0 wrap-break-word whitespace-pre-line text-foreground", size === "sm" ? "text-sm leading-normal" : "text-base leading-relaxed", variant === "filled" && "rounded-2xl rounded-br-md bg-primary/7 dark:bg-primary/15", variant === "filled" && (size === "sm" ? "px-3.5 py-2" : "px-4 py-2.5"), className),
+		...props
+	});
+}
+//#endregion
+export { Bubble };

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
+    /** `filled` for the person's own words (a soft primary tint), `plain` for the other side (no box: text on the page). */
+    variant?: "filled" | "plain";
+    /** `base` (default): reading size, for a conversation that owns the page. `sm`: the page's working text size, for a conversation in a column beside other things. */
+    size?: "base" | "sm";
+}
+
+/**
+ * One turn's text in a conversation (shadcn's Bubble, on the library's
+ * tokens). The person's own words sit in a soft tinted box; the other side is
+ * plain text on the page, so a long reply reads like a page rather than a
+ * stack of boxes.
+ */
+declare function Bubble({ variant, size, className, ...props }: BubbleProps): React.JSX.Element;
+
+export { Bubble, type BubbleProps };

package/dist/components/bubble/index.js

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

package/dist/components/button/button.js

@@ -1,4 +1,6 @@
 import { cn } from "../../utils/cn.js";
+import { SILVER_SOLID_SHEEN_STYLE, SilverBezelOverlay, SilverMetallicBorderOverlay } from "../../utils/silver-shine.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { Button as Button$1, buttonVariants } from "../../core/button.js";
 import Tooltip from "../tooltip/tooltip.js";
 import * as React$1 from "react";
@@ -10,56 +12,72 @@ var presetButtonColors = {
 	primary: {
 		default: "bg-primary text-primary-foreground hover:bg-primary/90",
 		outline: "border-primary/30 text-primary hover:bg-primary/5 hover:border-primary",
+		glow: "border-primary/30 text-primary hover:bg-primary/5 hover:border-primary shadow-glow shadow-primary/45",
 		ghost: "text-primary hover:bg-primary/10",
 		link: "text-primary"
 	},
 	secondary: {
 		default: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
 		outline: "border-secondary/30 text-secondary hover:bg-secondary/5 hover:border-secondary",
+		glow: "border-secondary/30 text-secondary hover:bg-secondary/5 hover:border-secondary shadow-glow shadow-secondary/45",
 		ghost: "text-secondary hover:bg-secondary/10",
 		link: "text-secondary"
 	},
 	error: {
 		default: "bg-error text-error-foreground hover:bg-error/90",
 		outline: "border-error/30 text-error hover:bg-error/5 hover:border-error",
+		glow: "border-error/30 text-error hover:bg-error/5 hover:border-error shadow-glow shadow-error/45",
 		ghost: "text-error hover:bg-error/10",
 		link: "text-error"
 	},
 	info: {
 		default: "bg-info text-info-foreground hover:bg-info/90",
 		outline: "border-info/30 text-info hover:bg-info/5 hover:border-info",
+		glow: "border-info/30 text-info hover:bg-info/5 hover:border-info shadow-glow shadow-info/45",
 		ghost: "text-info hover:bg-info/10",
 		link: "text-info"
 	},
 	success: {
 		default: "bg-success text-success-foreground hover:bg-success/90",
 		outline: "border-success/30 text-success hover:bg-success/5 hover:border-success",
+		glow: "border-success/30 text-success hover:bg-success/5 hover:border-success shadow-glow shadow-success/45",
 		ghost: "text-success hover:bg-success/10",
 		link: "text-success"
 	},
 	warning: {
 		default: "bg-warning text-warning-foreground hover:bg-warning/90",
 		outline: "border-warning/30 text-warning hover:bg-warning/5 hover:border-warning",
+		glow: "border-warning/30 text-warning hover:bg-warning/5 hover:border-warning shadow-glow shadow-warning/45",
 		ghost: "text-warning hover:bg-warning/10",
 		link: "text-warning"
 	},
 	disabled: {
 		default: "bg-disabled text-disabled-foreground",
 		outline: "border-disabled/30 text-disabled",
+		glow: "border-disabled/30 text-disabled shadow-glow shadow-disabled/45",
 		ghost: "text-disabled",
 		link: "text-disabled"
 	},
 	gray: {
 		default: "bg-gray text-gray-foreground hover:bg-gray/90",
 		outline: "border-input text-gray hover:bg-gray/5 hover:border-gray",
+		glow: "border-input text-gray hover:bg-gray/5 hover:border-gray shadow-glow shadow-gray/45",
 		ghost: "text-gray hover:bg-gray/10",
 		link: "text-gray"
 	},
 	mist: {
 		default: "bg-mist text-mist-foreground hover:bg-mist/90",
 		outline: "border-mist-border text-mist-foreground hover:bg-mist hover:border-mist-border",
+		glow: "border-mist-border text-mist-foreground hover:bg-mist hover:border-mist-border shadow-glow shadow-mist-foreground/45",
 		ghost: "text-mist-foreground hover:bg-mist",
 		link: "text-mist-foreground"
+	},
+	silver: {
+		default: "relative bg-gray text-gray-foreground hover:bg-gray/90",
+		outline: "relative isolate border-0 text-gray hover:bg-gray/5",
+		glow: "relative isolate border-0 text-gray hover:bg-gray/5 shadow-glow shadow-gray/45",
+		ghost: "text-gray hover:bg-gray/10",
+		link: "text-gray"
 	}
 };
 var primaryHoverRingClasses = "hover:ring-primary/90 focus-visible:ring-primary/90";
@@ -72,7 +90,8 @@ var presetRingColors = {
 	warning: "hover:ring-warning/90 focus-visible:ring-warning/90",
 	disabled: "hover:ring-disabled/90 focus-visible:ring-disabled/90",
 	gray: "hover:ring-gray/90 focus-visible:ring-gray/90",
-	mist: "hover:ring-mist-border focus-visible:ring-mist-border"
+	mist: "hover:ring-mist-border focus-visible:ring-mist-border",
+	silver: "hover:ring-gray/90 focus-visible:ring-gray/90"
 };
 /** `hideRingOnHover` still shows keyboard focus; only the hover ring is suppressed. */
 var presetFocusVisibleRingColors = {
@@ -84,7 +103,8 @@ var presetFocusVisibleRingColors = {
 	warning: "focus-visible:ring-warning/90",
 	disabled: "focus-visible:ring-disabled/90",
 	gray: "focus-visible:ring-gray/90",
-	mist: "focus-visible:ring-mist-border"
+	mist: "focus-visible:ring-mist-border",
+	silver: "focus-visible:ring-gray/90"
 };
 var iconOnlyLabelClasses = {
 	sm: "max-sm:sr-only",
@@ -130,20 +150,40 @@ function ProgressBarOverlay() {
 		}
 	});
 }
-var iconAnimateClasses = "transition-transform duration-200";
-var Button = React$1.forwardRef(({ children, color = "primary", startIcon, endIcon, fullWidth = true, loading = false, loadingIndicator = "spinner", animateStartIconOnHover = false, animateEndIconOnHover = false, hideRingOnHover = false, usePrimaryColorOnHover = false, tooltip, iconOnlyBelow, disabled, className, variant = "default", size, ...props }, ref) => {
+var iconAnimateClasses = "transition-transform duration-[var(--espd-duration-normal,200ms)]";
+/**
+* The styled button: preset `color`s, start/end icons, loading indicators,
+* tooltip and `asChild` for links. Not the same as the uncoloured base
+* `Button` that `/core` exports. Note `fullWidth` defaults to `true`.
+*/
+var Button = React$1.forwardRef(({ children, color = "primary", startIcon, endIcon, fullWidth = true, loading = false, loadingIndicator = "spinner", animateStartIconOnHover = false, animateEndIconOnHover = false, hideRingOnHover = false, usePrimaryColorOnHover = false, tooltip, iconOnlyBelow, disabled, className, variant = "default", size, asChild = false, radius, elevation, border, style, ...props }, ref) => {
+	const axes = useStyleAxes({
+		radius,
+		elevation,
+		border,
+		style
+	}, [
+		"radius",
+		"elevation",
+		"border"
+	]);
 	const needsGroup = animateStartIconOnHover || animateEndIconOnHover;
 	const isProgressBar = loading && loadingIndicator === "progress-bar";
 	const isSpinner = loading && loadingIndicator === "spinner";
 	const resolvedVariant = variant ?? "default";
 	const colorClasses = presetButtonColors[color]?.[resolvedVariant] ?? "";
 	const ringClasses = presetRingColors[color] ?? "";
-	const primaryHoverSurface = usePrimaryColorOnHover && (resolvedVariant === "outline" || resolvedVariant === "ghost");
+	const silverSurface = color === "silver" && resolvedVariant === "default";
+	const silverRing = color === "silver" && (resolvedVariant === "outline" || resolvedVariant === "glow");
+	const primaryHoverSurface = usePrimaryColorOnHover && (resolvedVariant === "outline" || resolvedVariant === "glow" || resolvedVariant === "ghost");
 	const primaryHoverLink = usePrimaryColorOnHover && resolvedVariant === "link";
-	const label = iconOnlyBelow && children != null ? /* @__PURE__ */ jsx("span", {
+	const child = asChild ? React$1.Children.only(children) : null;
+	const labelContent = child ? child.props.children : children;
+	const label = iconOnlyBelow && labelContent != null ? /* @__PURE__ */ jsx("span", {
 		className: iconOnlyLabelClasses[iconOnlyBelow],
-		children
-	}) : children;
+		children: labelContent
+	}) : labelContent;
+	const isDisabled = Boolean(disabled || loading);
 	const wrapIcon = (icon, direction) => {
 		if (!icon) return null;
 		if (!(direction === "start" ? animateStartIconOnHover : animateEndIconOnHover)) return icon;
@@ -152,22 +192,11 @@ var Button = React$1.forwardRef(({ children, color = "primary", startIcon, endIc
 			children: icon
 		});
 	};
-	const button = /* @__PURE__ */ jsxs(Button$1, {
-		ref,
-		variant,
-		size,
-		disabled: disabled || loading,
-		className: cn(colorClasses, primaryHoverSurface && "hover:bg-primary/10", primaryHoverLink && "hover:text-primary", fullWidth && size !== "icon" && "w-full", needsGroup && "group", isProgressBar && "relative overflow-hidden", !hideRingOnHover && variant !== "link" && [
-			"ring-offset-background transition-all duration-300",
-			"hover:ring-2 hover:ring-offset-2 focus-visible:ring-2 focus-visible:ring-offset-2",
-			primaryHoverSurface ? primaryHoverRingClasses : ringClasses
-		], hideRingOnHover && variant !== "link" && [
-			"ring-offset-background transition-all duration-300",
-			"hover:ring-0 focus-visible:ring-2 focus-visible:ring-offset-2",
-			primaryHoverSurface ? "focus-visible:ring-primary/90" : presetFocusVisibleRingColors[color]
-		], variant === "link" && "hover:ring-0 focus-visible:underline", "shadow-none", getIconOnlyButtonClasses(iconOnlyBelow, size, Boolean(endIcon)), className),
-		...props,
-		children: [isProgressBar && /* @__PURE__ */ jsx(ProgressBarOverlay, {}), isProgressBar ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("span", {
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		silverSurface && /* @__PURE__ */ jsx(SilverBezelOverlay, {}),
+		silverRing && /* @__PURE__ */ jsx(SilverMetallicBorderOverlay, {}),
+		isProgressBar && /* @__PURE__ */ jsx(ProgressBarOverlay, {}),
+		isProgressBar ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("span", {
 			className: "relative z-10 inline-flex items-center gap-2",
 			children: [
 				wrapIcon(startIcon, "start"),
@@ -178,7 +207,40 @@ var Button = React$1.forwardRef(({ children, color = "primary", startIcon, endIc
 			isSpinner ? /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : wrapIcon(startIcon, "start"),
 			label,
 			!isSpinner && wrapIcon(endIcon, "end")
-		] })]
+		] })
+	] });
+	const asChildDisabledProps = asChild && isDisabled ? {
+		"aria-disabled": true,
+		"data-disabled": "",
+		tabIndex: -1,
+		onClickCapture: (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+	} : void 0;
+	const button = /* @__PURE__ */ jsx(Button$1, {
+		ref,
+		variant,
+		size,
+		asChild,
+		disabled: asChild ? void 0 : disabled || loading,
+		style: silverSurface ? {
+			...SILVER_SOLID_SHEEN_STYLE,
+			...axes.style
+		} : axes.style,
+		className: cn(colorClasses, primaryHoverSurface && "hover:bg-primary/10", primaryHoverLink && "hover:text-primary", fullWidth && size !== "icon" && "w-full", needsGroup && "group", isProgressBar && "relative overflow-hidden", !hideRingOnHover && variant !== "link" && [
+			"ring-offset-background transition-all duration-[var(--espd-duration-slow,300ms)]",
+			"hover:ring-[length:var(--espd-ring-width,2px)] hover:ring-offset-[length:var(--espd-ring-offset,2px)]",
+			"focus-visible:ring-[length:var(--espd-ring-width,2px)] focus-visible:ring-offset-[length:var(--espd-ring-offset,2px)]",
+			primaryHoverSurface ? primaryHoverRingClasses : ringClasses
+		], hideRingOnHover && variant !== "link" && [
+			"ring-offset-background transition-all duration-[var(--espd-duration-slow,300ms)]",
+			"hover:ring-0 focus-visible:ring-[length:var(--espd-ring-width,2px)] focus-visible:ring-offset-[length:var(--espd-ring-offset,2px)]",
+			primaryHoverSurface ? "focus-visible:ring-primary/90" : presetFocusVisibleRingColors[color]
+		], variant === "link" && "hover:ring-0 focus-visible:underline", variant === "default" || variant === "outline" ? "shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-control,0_0_#0000))]" : variant !== "glow" && "shadow-none", getIconOnlyButtonClasses(iconOnlyBelow, size, Boolean(endIcon)), asChild && isDisabled && "pointer-events-none opacity-50", className),
+		...props,
+		...asChildDisabledProps,
+		children: child ? React$1.cloneElement(child, void 0, content) : content
 	});
 	if (!tooltip) return button;
 	return /* @__PURE__ */ jsx(Tooltip, {

package/dist/components/button/flash-button.js

@@ -1,10 +1,11 @@
 "use client";
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { Button } from "../../core/button/button.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ZapIcon } from "lucide-react";
 import { useAnimate } from "motion/react";
+import { ZapIcon } from "lucide-react";
 //#region src/components/button/flash-button.tsx
 /** Resting bg + text; hover transitions to bg-background (invert). */
 var flashButtonBgClasses = {
@@ -42,7 +43,11 @@ var flashButtonDarkBorderClasses = {
 	gray: "dark:hover:border-gray/30",
 	mist: "dark:hover:border-mist-border/30"
 };
-function FlashButton({ label, icon, iconPosition = "end", hideIcon = false, size, color = "primary", className, onMouseEnter, onMouseLeave, ...props }) {
+function FlashButton({ label, icon, iconPosition = "end", hideIcon = false, size, color = "primary", className, onMouseEnter, onMouseLeave, radius, style, ...props }) {
+	const axes = useStyleAxes({
+		radius,
+		style
+	}, ["radius"]);
 	const [scope, animate] = useAnimate();
 	const isHovering = React$1.useRef(false);
 	const flashLoop = React$1.useCallback(async () => {
@@ -82,9 +87,10 @@ function FlashButton({ label, icon, iconPosition = "end", hideIcon = false, size
 	const iconSize = size === "lg" ? "size-4" : size === "sm" ? "size-2.5" : "size-3";
 	return /* @__PURE__ */ jsxs(Button, {
 		size,
-		className: cn(flashButtonBgClasses[color], "group relative cursor-pointer gap-1.5 overflow-hidden rounded-full transition-all duration-500 hover:shadow-md dark:border dark:border-transparent", flashButtonDarkBorderClasses[color], className),
+		className: cn(flashButtonBgClasses[color], "group relative cursor-pointer gap-1.5 overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-control,calc(infinity*1px)))] transition-all duration-500 hover:shadow-md dark:border dark:border-transparent", flashButtonDarkBorderClasses[color], className),
 		onMouseEnter: handleMouseEnter,
 		onMouseLeave: handleMouseLeave,
+		style: axes.style,
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("span", {

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

@@ -0,0 +1,56 @@
+export { B as Button, a as ButtonIconOnlyBreakpoint, b as ButtonProps } from '../../button-BxJ7s6sR.js';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+import { P as PresetColor } from '../../index-BQANnKs9.js';
+import { HTMLMotionProps } from 'motion/react';
+import { W as WithAsChild } from '../../slot-DGErA9zi.js';
+export { b as buttonVariants } from '../../button-BK-DIR_L.js';
+
+declare const buttonVariants$1: (props?: ({
+    variant?: "default" | "secondary" | "link" | "outline" | "destructive" | "ghost" | null | undefined;
+    size?: "sm" | "default" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+interface CraftButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Pick<StyleAxisProps, "radius"> {
+    size?: VariantProps<typeof buttonVariants$1>["size"];
+    color?: PresetColor;
+    children?: React.ReactNode;
+    asChild?: boolean;
+}
+
+interface InvertButtonProps extends Omit<CraftButtonProps, "children"> {
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+}
+declare function InvertButton({ label, icon, ...props }: InvertButtonProps): React.JSX.Element;
+
+interface FlashButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Pick<StyleAxisProps, "radius"> {
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    iconPosition?: "start" | "end";
+    hideIcon?: boolean;
+    size?: VariantProps<typeof buttonVariants$1>["size"];
+    color?: PresetColor;
+}
+declare function FlashButton({ label, icon, iconPosition, hideIcon, size, color, className, onMouseEnter, onMouseLeave, radius, style, ...props }: FlashButtonProps): React.JSX.Element;
+
+type ButtonProps = WithAsChild<HTMLMotionProps<'button'> & {
+    hoverScale?: number;
+    tapScale?: number;
+}>;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "secondary" | "accent" | "link" | "outline" | "destructive" | "ghost" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CopyButtonProps = Omit<ButtonProps, 'children'> & VariantProps<typeof buttonVariants> & Pick<StyleAxisProps, 'radius'> & {
+    content: string;
+    copied?: boolean;
+    onCopiedChange?: (copied: boolean, content?: string) => void;
+    delay?: number;
+};
+declare function CopyButton({ className, content, copied, onCopiedChange, onClick, variant, size, delay, radius, style, ...props }: CopyButtonProps): React.JSX.Element;
+
+export { CopyButton, type CopyButtonProps, FlashButton, type FlashButtonProps, InvertButton, type InvertButtonProps };

package/dist/components/button/index.js

@@ -0,0 +1,6 @@
+import { buttonVariants } from "../../core/button.js";
+import { Button } from "./button.js";
+import { InvertButton } from "./invert-button.js";
+import { FlashButton } from "./flash-button.js";
+import { CopyButton } from "../../core/animate-ui/components/buttons/copy.js";
+export { Button, CopyButton, FlashButton, InvertButton, buttonVariants };

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,16 @@
+import * as React$1 from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from '../separator/index.js';
+import '@radix-ui/react-separator';
+
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): React$1.JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): React$1.JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): React$1.JSX.Element;
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/components/button-group/index.js

@@ -0,0 +1,2 @@
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from "../../core/button-group.js";
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/components/calendar/calendar.js

@@ -33,11 +33,11 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 			week: cn("mt-2 flex w-full", defaultClassNames.week),
 			week_number_header: cn("w-[var(--cell-size)] select-none", defaultClassNames.week_number_header),
 			week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
-			day: cn("group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md", defaultClassNames.day),
-			range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+			day: cn("group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] [&:last-child[data-selected=true]_button]:rounded-r-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))]", defaultClassNames.day),
+			range_start: cn("rounded-l-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] bg-accent", defaultClassNames.range_start),
 			range_middle: cn("rounded-none", defaultClassNames.range_middle),
-			range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
-			today: cn("rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+			range_end: cn("rounded-r-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] bg-accent", defaultClassNames.range_end),
+			today: cn("rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] bg-accent text-accent-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
 			outside: cn("text-disabled aria-selected:text-muted-foreground", defaultClassNames.outside),
 			disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
 			hidden: cn("invisible", defaultClassNames.hidden),
@@ -96,7 +96,7 @@ function CalendarDayButton({ className: dayClassName, day, modifiers, ...props }
 		className: cn(buttonVariants({
 			variant: "ghost",
 			size: "icon"
-		}), "flex aspect-square size-auto w-full min-w-[var(--cell-size)] flex-col gap-1 leading-none font-normal", "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50", "data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground", "data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground", "data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground", "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground", "[&>span]:text-xs [&>span]:opacity-70", dayClassName),
+		}), "flex aspect-square size-auto w-full min-w-[var(--cell-size)] flex-col gap-1 leading-none font-normal rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))]", "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50", "data-[range-end=true]:rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] data-[range-end=true]:rounded-r-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground", "data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground", "data-[range-start=true]:rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] data-[range-start=true]:rounded-l-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground", "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground", "[&>span]:text-xs [&>span]:opacity-70", dayClassName),
 		...props
 	});
 }

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { DayButton } from 'react-day-picker';
+import { C as CalendarProps } from '../../calendar.props-BtCzuWH1.js';
+
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: CalendarProps): React.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+declare function CalendarDayButton({ className: dayClassName, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): React.JSX.Element;
+
+export { Calendar, CalendarDayButton, CalendarProps };

package/dist/components/calendar/index.js

@@ -0,0 +1,2 @@
+import { Calendar, CalendarDayButton } from "./calendar.js";
+export { Calendar, CalendarDayButton };

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { k as StyleAxisProps, d as DensityProps } from '../../style-axes-DSQ2DGc5.js';
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & StyleAxisProps & DensityProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/components/card/index.js

@@ -0,0 +1,2 @@
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../core/card.js";
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

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

@@ -0,0 +1,50 @@
+import { cn } from "../../utils/cn.js";
+import { Typography } from "../typography/typography.js";
+import { Children, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/card-rail/card-rail.tsx
+var GRID_COLUMNS = {
+	2: "@5xl:grid-cols-2",
+	3: "@5xl:grid-cols-3",
+	4: "@5xl:grid-cols-4"
+};
+/**
+* A titled shelf of cards: the heading on the left, an action ("View all")
+* on the right. It follows its OWN width, not the viewport's: a grid once it
+* is wide (64rem), a horizontal scroll-snap strip below that, each card at
+* 44% of the strip (84% under 42rem) so the next one peeks in. The strip has
+* no visible scrollbar; it scrolls by touch, trackpad and keyboard.
+*/
+function CardRail({ title, titleAs = "h2", titleId, action, columns = 3, children, className }) {
+	const generated = useId();
+	const headingId = titleId ?? generated;
+	const items = Children.toArray(children);
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": headingId,
+		"data-slot": "card-rail",
+		className: cn("@container flex min-w-0 flex-col gap-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-end justify-between gap-4",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				id: headingId,
+				variant: "h4",
+				as: titleAs,
+				className: "m-0 min-w-0 tracking-tight text-foreground",
+				children: title
+			}), action && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				children: action
+			})]
+		}), /* @__PURE__ */ jsx("ul", {
+			"data-slot": "card-rail-list",
+			className: cn("m-0 flex list-none snap-x snap-mandatory gap-4 overflow-x-auto p-0 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", "@5xl:grid @5xl:gap-6 @5xl:overflow-visible @5xl:pb-0", GRID_COLUMNS[columns]),
+			children: items.map((item, index) => /* @__PURE__ */ jsx("li", {
+				"data-slot": "card-rail-item",
+				className: "flex shrink-0 basis-[84%] snap-start @2xl:basis-[44%] @5xl:basis-auto [&>*]:w-full",
+				children: item
+			}, index))
+		})]
+	});
+}
+//#endregion
+export { CardRail };