@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/dist/components/style-scope/index.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { d as DensityProps, i as Radius, g as Elevation, a as Border } from '../../style-axes-DSQ2DGc5.js';
+
+/** The roles a style-axis value can be set for (docs/token-audit.md → role matrix). */
+type StyleRole = "control" | "surface" | "overlay" | "pill" | "item";
+interface StyleScopeProps extends React.HTMLAttributes<HTMLElement>, DensityProps {
+    /** Corner radius per role: `--espd-radius-<role>`. */
+    radius?: Partial<Record<StyleRole, Radius>>;
+    /** Shadow per role: `--espd-elevation-<role>` (control, surface, overlay). */
+    elevation?: Partial<Record<"control" | "surface" | "overlay", Elevation>>;
+    /** Border width per role: `--espd-border-width-<role>` (control, surface). */
+    border?: Partial<Record<"control" | "surface", Border>>;
+    /**
+     * Put the tokens on the single child element instead of a wrapper
+     * (`display: contents` by default, so the wrapper does not affect layout).
+     */
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+
+/**
+ * Sets style-axis role tokens (and a density) for everything inside, as an
+ * app's CSS would on `:root`: `<StyleScope radius={{ control: "full" }}>`.
+ * Role tokens inherit, so nested components take them; a component's own
+ * `radius` / `elevation` / `border` prop still wins.
+ *
+ * Overlays (dialogs, popovers, menus, toasts) render in portals outside the
+ * scope; set overlay tokens on `:root`, or wrap the overlay's content.
+ */
+declare const StyleScope: React.ForwardRefExoticComponent<StyleScopeProps & React.RefAttributes<HTMLElement>>;
+
+export { type StyleRole, StyleScope, type StyleScopeProps };

package/dist/components/style-scope/index.js

@@ -0,0 +1,2 @@
+import { StyleScope } from "./style-scope.js";
+export { StyleScope };

package/dist/components/style-scope/style-scope.js

@@ -0,0 +1,49 @@
+import { densityStyle, resolveStyleValue } from "../../utils/style-axes.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/style-scope/style-scope.tsx
+/**
+* Sets style-axis role tokens (and a density) for everything inside, as an
+* app's CSS would on `:root`: `<StyleScope radius={{ control: "full" }}>`.
+* Role tokens inherit, so nested components take them; a component's own
+* `radius` / `elevation` / `border` prop still wins.
+*
+* Overlays (dialogs, popovers, menus, toasts) render in portals outside the
+* scope; set overlay tokens on `:root`, or wrap the overlay's content.
+*/
+var StyleScope = React$1.forwardRef(({ radius, elevation, border, density, asChild = false, style, children, ...props }, ref) => {
+	const tokens = { ...densityStyle(density) };
+	const set = (axis, values, prefix) => {
+		for (const [role, value] of Object.entries(values ?? {})) {
+			const css = value === void 0 ? void 0 : resolveStyleValue(axis, value);
+			if (css) tokens[`--espd-${prefix}-${role}`] = css;
+		}
+	};
+	set("radius", radius, "radius");
+	set("elevation", elevation, "elevation");
+	set("border", border, "border-width");
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		ref,
+		style: {
+			...tokens,
+			...style
+		},
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "style-scope",
+		style: {
+			display: "contents",
+			...tokens,
+			...style
+		},
+		...props,
+		children
+	});
+});
+StyleScope.displayName = "StyleScope";
+//#endregion
+export { StyleScope };

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Switch as Switch$1 } from 'radix-ui';
+import { HTMLMotionProps } from 'motion/react';
+
+type SwitchProps$1 = Omit<React.ComponentProps<typeof Switch$1.Root>, 'asChild'> & HTMLMotionProps<'button'>;
+
+type SwitchProps = SwitchProps$1 & {
+    pressedWidth?: number;
+    startIcon?: React.ReactElement;
+    endIcon?: React.ReactElement;
+    thumbIcon?: React.ReactElement;
+};
+declare function Switch({ className, pressedWidth, startIcon, endIcon, thumbIcon, ...props }: SwitchProps): React.JSX.Element;
+
+export { Switch, type SwitchProps };

package/dist/components/switch/index.js

@@ -0,0 +1,2 @@
+import { Switch } from "../../core/animate-ui/components/radix/switch.js";
+export { Switch };

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { d as DensityProps } from '../../style-axes-DSQ2DGc5.js';
+
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & DensityProps & {
+    /** Ref to the scroll container that wraps the `<table>`. */
+    containerRef?: React.Ref<HTMLDivElement>;
+    /** Extra class names for the scroll container that wraps the `<table>`. */
+    containerClassName?: string;
+} & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/table/index.js

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "../../core/table.js";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

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

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { HTMLMotionProps, Transition } from 'motion/react';
+import { W as WithAsChild } from '../../slot-DGErA9zi.js';
+import { C as Color } from '../../index-BQANnKs9.js';
+
+type BaseTabsProps = React.ComponentProps<'div'> & {
+    children: React.ReactNode;
+};
+type UnControlledTabsProps = BaseTabsProps & {
+    defaultValue?: string;
+    value?: never;
+    onValueChange?: never;
+};
+type ControlledTabsProps = BaseTabsProps & {
+    value: string;
+    onValueChange?: (value: string) => void;
+    defaultValue?: never;
+};
+type TabsProps$1 = UnControlledTabsProps | ControlledTabsProps;
+type TabsListProps$1 = React.ComponentProps<'div'> & {
+    children: React.ReactNode;
+};
+type TabsTriggerProps$1 = WithAsChild<{
+    value: string;
+    children: React.ReactNode;
+} & HTMLMotionProps<'button'>>;
+type TabsContentsProps$1 = HTMLMotionProps<'div'> & {
+    children: React.ReactNode;
+    transition?: Transition;
+};
+type TabsContentProps$1 = WithAsChild<{
+    value: string;
+    children: React.ReactNode;
+} & HTMLMotionProps<'div'>>;
+
+type TabsListVariant = 'line' | 'rounded' | 'glow' | 'solid';
+type TabsListSize = 'sm' | 'default' | 'lg';
+type TabsProps = TabsProps$1;
+declare function Tabs({ className, ...props }: TabsProps): React.JSX.Element;
+type TabsListProps = TabsListProps$1 & {
+    /**
+     * `line`: an underline. `rounded`: a tinted pill. `glow`: the pill with a
+     * halo. `solid`: the selected tab is a filled pill in `color`, its text in
+     * a colour that reads on the fill.
+     */
+    variant?: TabsListVariant;
+    /**
+     * `sm`: a 28px strip (smaller padding, 24px triggers, small text), for a
+     * toolbar. `lg`: 36px triggers, base text and 20px icons. @default 'default'
+     */
+    size?: TabsListSize;
+    /**
+     * The colour the list is drawn in: the selected pill's tint and label (or,
+     * for `solid`, its fill — then a preset's `-foreground` token is the text,
+     * and any other CSS colour gets black or white by its lightness), the
+     * list's border and the glow's halo. @default 'primary'
+     */
+    color?: Color;
+    /**
+     * Below the `md` breakpoint (768px), stretch the list to the full width so the
+     * tabs share the row evenly. Tabs that don't fit still scroll sideways. From
+     * `md` up the list is only as wide as its tabs either way.
+     *
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Clicking the tab that is already selected folds the list to icons: every
+     * trigger with an `icon` shows only its icon (its label stays, visually
+     * hidden, for screen readers); clicking it again brings the labels back.
+     * Only a trigger with an icon toggles, and triggers without one keep their
+     * label. The state belongs to the list, so it holds as the selection moves.
+     *
+     * @default false
+     */
+    collapsible?: boolean;
+    /** Icon-only state, controlled. Pair with `onCollapsedChange`. */
+    collapsed?: boolean;
+    /** Icon-only state at first, uncontrolled. @default false */
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+};
+/**
+ * When the tabs don't fit, the list scrolls horizontally: edges fade to signal
+ * hidden tabs, chevron buttons page through them on pointer devices, and the
+ * active tab is kept in view. Pass `aria-orientation="vertical"` for a stacked list.
+ */
+declare function TabsList({ variant, size, color, fullWidth, collapsible, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, ...props }: TabsListProps): React.JSX.Element;
+type TabsTriggerProps = TabsTriggerProps$1 & {
+    /**
+     * Shown before the label. With a collapsible `TabsList`, a trigger that has
+     * an icon is the one that can fold to it. Works with `asChild` too: the icon
+     * and label are placed inside the child element (a router link).
+     */
+    icon?: React.ReactNode;
+};
+declare function TabsTrigger({ className, icon, onClick, ...props }: TabsTriggerProps): React.JSX.Element;
+type TabsContentsProps = TabsContentsProps$1;
+declare function TabsContents(props: TabsContentsProps): React.JSX.Element;
+type TabsContentProps = TabsContentProps$1;
+declare function TabsContent({ className, ...props }: TabsContentProps): React.JSX.Element;
+
+export { Tabs, TabsContent, type TabsContentProps, TabsContents, type TabsContentsProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps };

package/dist/components/tabs/index.js

@@ -0,0 +1,2 @@
+import { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger } from "../../core/animate-ui/components/animate/tabs.js";
+export { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger };

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+import { S as Size, P as PresetColor } from '../../index-BQANnKs9.js';
+import { f as Variant } from '../../variant-D81RhpbR.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+interface TagProps extends HTMLAttributes<HTMLDivElement>, Pick<StyleAxisProps, "radius"> {
+    /** Optional title shown in a tinted chip before the value. When omitted, only `value` is shown. */
+    name?: string;
+    value: string;
+    /** Tooltip for the name segment; defaults to `name`. Use when `name` is truncated. */
+    nameTooltip?: string;
+    /** Tooltip for the value segment; defaults to `value`. Use when `value` is truncated. */
+    valueTooltip?: string;
+    /** When true, `name` wraps onto more lines instead of being truncated with an ellipsis. */
+    showFullName?: boolean;
+    /** When true, `value` wraps onto more lines instead of being truncated with an ellipsis. */
+    showFullValue?: boolean;
+    size?: Size;
+    /** Semantic color token; drives `Badge` chrome and name chip tint. Accepts the brand `"silver"` value. */
+    color?: PresetColor | "silver";
+    /** Surface treatment. Shared with Alert/Badge/SimpleClickableCard. */
+    variant?: Variant;
+    /** When true, render the tag, name chip, and delete action with fully rounded corners. Same as `radius="full"`; `radius` wins when both are set. */
+    rounded?: boolean;
+    onDelete?: () => void;
+}
+
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Tag, type TagProps };

package/dist/components/tag/index.js

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

package/dist/components/tag/tag.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 Tooltip from "../tooltip/tooltip.js";
 import { Badge } from "../../core/badge.js";
@@ -14,25 +15,28 @@ import { cva } from "class-variance-authority";
 * - `soft`: chip uses a light `color/10` tint to stay distinct from value text.
 * - `outline` / `gradient`: badge has no fill, so chip uses a `color/15` patch.
 * - `solid`: badge is saturated; chip uses a translucent dark patch for contrast.
+* - `glow`: a soft tint like `soft`, so the chip takes `soft`'s patch.
 */
+var SOFT_NAME_CHIP_TINT = {
+	primary: "bg-primary/10",
+	secondary: "bg-secondary/10",
+	error: "bg-error/10",
+	info: "bg-info/10",
+	success: "bg-success/10",
+	warning: "bg-warning/10",
+	disabled: "bg-disabled/10",
+	gray: "bg-gray/10",
+	mist: "bg-mist-border/70"
+};
 var NAME_CHIP_TINT = {
-	soft: {
-		primary: "bg-primary/10",
-		secondary: "bg-secondary/10",
-		error: "bg-error/10",
-		info: "bg-info/10",
-		success: "bg-success/10",
-		warning: "bg-warning/10",
-		disabled: "bg-disabled/10",
-		gray: "bg-gray/10",
-		mist: "bg-mist-border/70"
-	},
+	soft: SOFT_NAME_CHIP_TINT,
+	glow: SOFT_NAME_CHIP_TINT,
 	outline: {
 		primary: "bg-primary/15",
 		secondary: "bg-secondary/15",
 		error: "bg-error/15",
 		info: "bg-info/15",
-		success: "bg-success/15",
+		success: "bg-success/20",
 		warning: "bg-warning/15",
 		disabled: "bg-disabled/15",
 		gray: "bg-gray/15",
@@ -43,7 +47,7 @@ var NAME_CHIP_TINT = {
 		secondary: "bg-secondary/15",
 		error: "bg-error/15",
 		info: "bg-info/15",
-		success: "bg-success/15",
+		success: "bg-success/20",
 		warning: "bg-warning/15",
 		disabled: "bg-disabled/15",
 		gray: "bg-gray/15",
@@ -64,13 +68,21 @@ var NAME_CHIP_TINT = {
 /** `"silver"` chip tints follow the gray family with slightly extra contrast for the metallic surface. */
 var SILVER_NAME_CHIP_TINT = {
 	soft: "bg-gray/10",
+	glow: "bg-gray/10",
 	outline: "bg-gray/15",
 	gradient: "bg-gray/15",
 	solid: "bg-black/20 text-gray-foreground"
 };
+/**
+* The built-in row for `variant`, or `outline`'s for a variant an app
+* registered (`registerVariant`): a neutral patch that reads on any surface.
+*/
+function builtInRow(table, variant) {
+	return table[variant] ?? table.outline;
+}
 function getNameChipTint(variant, color) {
-	if (color === "silver") return SILVER_NAME_CHIP_TINT[variant];
-	return NAME_CHIP_TINT[variant][color];
+	if (color === "silver") return builtInRow(SILVER_NAME_CHIP_TINT, variant);
+	return builtInRow(NAME_CHIP_TINT, variant)[color];
 }
 var tagSizeVariants = cva("inline-flex min-w-0 max-w-full items-center shadow-none transition-shadow duration-200 ease-out hover:shadow-sm [&_svg]:shrink-0", {
 	variants: { size: {
@@ -80,21 +92,53 @@ var tagSizeVariants = cva("inline-flex min-w-0 max-w-full items-center shadow-no
 	} },
 	defaultVariants: { size: "default" }
 });
+/** With a delete button the end padding matches the vertical padding, so the button sits as close to the right edge as to the top and bottom. */
+var deletablePaddingClasses = {
+	sm: "pe-0.5",
+	default: "pe-1",
+	lg: "pe-1.5"
+};
 var deleteButtonSizeClasses = {
 	sm: "h-5 w-5 [&_svg]:size-3",
 	default: "h-6 w-6 [&_svg]:size-3.5",
 	lg: "h-7 w-7 [&_svg]:size-4"
 };
+/**
+* Boxy delete button corners, concentric with the Badge: its radius minus the
+* inset to the edge (the size's vertical padding), never below 2px.
+*/
+var deleteButtonRadiusClasses = {
+	sm: "rounded-[max(2px,calc(var(--espd-own-radius,var(--espd-radius-pill,var(--radius-md)))-var(--spacing)*0.5))]",
+	default: "rounded-[max(2px,calc(var(--espd-own-radius,var(--espd-radius-pill,var(--radius-md)))-var(--spacing)*1))]",
+	lg: "rounded-[max(2px,calc(var(--espd-own-radius,var(--espd-radius-pill,var(--radius-md)))-var(--spacing)*1.5))]"
+};
+/** Name chip text: a faint contour in the text's own colour plus a firm, tight drop shadow. */
+var nameTextEffectClass = "[text-shadow:0_0_0.5px_color-mix(in_oklab,currentColor_40%,transparent),0_0.5px_0.5px_rgb(0_0_0/0.25)]";
+/** Text segment classes: ellipsis at a capped width by default, wrapping when shown in full. */
+function segmentClasses(showFull) {
+	return showFull ? "min-w-0 whitespace-normal [overflow-wrap:anywhere]" : "min-w-0 max-w-40 truncate";
+}
+/** Wraps `children` in a Tooltip unless there is nothing to add (no tip, or the text is already shown in full). */
+function MaybeTooltip({ tip, explicit, showFull, children }) {
+	if (!tip || showFull && !explicit) return children;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tip,
+		children
+	});
+}
 var deleteButtonVariantClasses = {
 	soft: "bg-error/10 text-error hover:bg-error/15 hover:text-error",
+	glow: "bg-error/10 text-error hover:bg-error/15 hover:text-error",
 	outline: "bg-error/10 text-error hover:bg-error/15 hover:text-error",
 	gradient: "bg-error/10 text-error hover:bg-error/15 hover:text-error",
 	solid: "bg-error/20 text-error-foreground hover:bg-error/30 hover:text-error-foreground"
 };
-var Tag$1 = React$1.forwardRef(({ name, value, nameTooltip, valueTooltip, size = "default", color = "secondary", variant = "soft", rounded = false, onDelete, className, ...rest }, ref) => {
+var Tag$1 = React$1.forwardRef(({ name, value, nameTooltip, valueTooltip, showFullName = false, showFullValue = false, size = "default", color = "secondary", variant = "soft", rounded = false, onDelete, className, radius, ...rest }, ref) => {
+	const { partStyle } = useStyleAxes({ radius }, ["radius"]);
+	const fullRound = rounded && radius === void 0;
 	const nameTip = nameTooltip ?? name;
-	const valueTip = value !== void 0 ? valueTooltip ?? value : void 0;
-	const removeLabel = value !== void 0 ? `${nameTooltip ?? name}: ${valueTooltip ?? value}` : nameTooltip ?? name;
+	const valueTip = valueTooltip ?? value;
+	const removeLabel = nameTip ? `${nameTip}: ${valueTip}` : valueTip;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: "inline-block max-w-full",
@@ -102,33 +146,40 @@ var Tag$1 = React$1.forwardRef(({ name, value, nameTooltip, valueTooltip, size =
 		children: /* @__PURE__ */ jsxs(Badge, {
 			variant,
 			color,
-			className: cn(tagSizeVariants({ size }), rounded && "rounded-full", className),
+			radius,
+			className: cn(tagSizeVariants({ size }), onDelete && deletablePaddingClasses[size], fullRound && "rounded-full", className),
 			children: [
 				/* @__PURE__ */ jsx(Tag, {
 					"aria-hidden": true,
 					className: "opacity-70"
 				}),
-				/* @__PURE__ */ jsx(Tooltip, {
-					content: nameTip,
+				name ? /* @__PURE__ */ jsx(MaybeTooltip, {
+					tip: nameTip,
+					explicit: nameTooltip !== void 0,
+					showFull: showFullName,
 					children: /* @__PURE__ */ jsx("span", {
-						className: cn("min-w-0 truncate px-1.5 py-0.5 font-medium", rounded ? "rounded-full" : "rounded-sm", getNameChipTint(variant, color)),
+						style: partStyle,
+						className: cn(segmentClasses(showFullName), "px-1.5 py-0.5 font-medium leading-[normal]", nameTextEffectClass, fullRound ? "rounded-full" : "rounded-[var(--espd-own-radius,var(--espd-radius-pill,var(--radius-sm)))]", getNameChipTint(variant, color)),
 						children: name
 					})
-				}),
-				value !== void 0 ? /* @__PURE__ */ jsx(Tooltip, {
-					content: valueTip,
+				}) : null,
+				/* @__PURE__ */ jsx(MaybeTooltip, {
+					tip: valueTip,
+					explicit: valueTooltip !== void 0,
+					showFull: showFullValue,
 					children: /* @__PURE__ */ jsx("span", {
-						className: "min-w-0 truncate font-normal",
+						className: cn(segmentClasses(showFullValue), "font-normal leading-[normal]"),
 						children: value
 					})
-				}) : null,
+				}),
 				onDelete ? /* @__PURE__ */ jsx("button", {
 					type: "button",
 					"aria-label": `Remove ${removeLabel}`,
+					style: partStyle,
 					className: cn(buttonVariants({
 						variant: "ghost",
 						size: "icon"
-					}), deleteButtonSizeClasses[size], "shrink-0", rounded && "rounded-full", deleteButtonVariantClasses[variant]),
+					}), deleteButtonSizeClasses[size], "shrink-0", fullRound ? "rounded-full" : deleteButtonRadiusClasses[size], builtInRow(deleteButtonVariantClasses, variant)),
 					onClick: onDelete,
 					children: /* @__PURE__ */ jsx(X, {
 						"aria-hidden": true,

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { S as Size } from '../../index-BQANnKs9.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+/** Style axes `radius` and `border`: the input field (its chips follow `rounded`). */
+interface TagInputProps extends Omit<ComponentProps<"input">, "size" | "value" | "defaultValue" | "onChange">, Pick<StyleAxisProps, "radius" | "border"> {
+    tags: readonly string[];
+    onTagsChange: (tags: string[]) => void;
+    label?: ReactNode;
+    required?: boolean;
+    size?: Size;
+    /** Fully rounded field and chips. For the field, same as `radius="full"`; `radius` wins when both are set. */
+    rounded?: boolean;
+    startHelperContent?: ReactNode;
+    endHelperContent?: ReactNode;
+    hintContent?: ReactNode;
+    error?: boolean;
+    errorContent?: ReactNode;
+    /** When set, trimmed draft must match before a tag is added. */
+    validatorRegex?: RegExp;
+    onInvalidTag?: (value: string) => void;
+    /** @default false */
+    allowDuplicates?: boolean;
+    /** @default 10 */
+    maxTagDisplayLength?: number;
+    /**
+     * When true, each tag string is split on the first `:` into `Tag` `name` and `value`.
+     * Use together with a validator that only allows `name:value` shaped tags.
+     */
+    nameValueTags?: boolean;
+}
+
+declare const TagInput: React.ForwardRefExoticComponent<Omit<TagInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+export { TagInput, type TagInputProps };

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

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

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

@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { Tag } from "../tag/tag.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -27,7 +28,11 @@ function parseNameValueTag(tag) {
 		value: tag.slice(i + 1)
 	};
 }
-var TagInput = React$1.forwardRef(({ tags, onTagsChange, label, required, size, rounded, startHelperContent, endHelperContent, hintContent, error, errorContent, validatorRegex, onInvalidTag, allowDuplicates = false, maxTagDisplayLength = 10, nameValueTags = false, className, id, disabled, readOnly, placeholder, onKeyDown, onBlur, ...restInputProps }, ref) => {
+var TagInput = React$1.forwardRef(({ tags, onTagsChange, label, required, size, rounded, startHelperContent, endHelperContent, hintContent, error, errorContent, validatorRegex, onInvalidTag, allowDuplicates = false, maxTagDisplayLength = 10, nameValueTags = false, className, id, disabled, readOnly, placeholder, onKeyDown, onBlur, radius, border, ...restInputProps }, ref) => {
+	const axes = useStyleAxes({
+		radius,
+		border
+	}, ["radius", "border"]);
 	const autoId = React$1.useId();
 	const inputId = id ?? autoId;
 	const rootRef = React$1.useRef(null);
@@ -78,7 +83,7 @@ var TagInput = React$1.forwardRef(({ tags, onTagsChange, label, required, size,
 		if (next instanceof Node && rootRef.current?.contains(next)) return;
 		tryCommitDraft();
 	};
-	const controlClasses = cn("peer flex w-full flex-wrap items-center border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", controlSizeClasses[effectiveSize], rounded ? "rounded-full" : "rounded-md", hasError && "border-destructive focus-within:ring-destructive", disabled && "pointer-events-none opacity-50", readOnly && "bg-muted", className);
+	const controlClasses = cn("peer flex w-full flex-wrap items-center 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:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", controlSizeClasses[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", disabled && "pointer-events-none opacity-50", readOnly && "bg-muted", className);
 	const inputClasses = cn("min-w-[6rem] flex-1 border-0 bg-transparent p-0 text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed read-only:cursor-default", inputTextSizeClasses[effectiveSize]);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: rootRef,
@@ -105,6 +110,7 @@ var TagInput = React$1.forwardRef(({ tags, onTagsChange, label, required, size,
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
 				className: controlClasses,
+				style: axes.style,
 				children: [tags.map((tag, index) => {
 					const parsed = nameValueTags ? parseNameValueTag(tag) : null;
 					if (parsed) return /* @__PURE__ */ jsx(Tag, {
@@ -116,8 +122,8 @@ var TagInput = React$1.forwardRef(({ tags, onTagsChange, label, required, size,
 						onDelete: disabled || readOnly ? void 0 : () => removeAt(index)
 					}, `${tag}-${index}`);
 					return /* @__PURE__ */ jsx(Tag, {
-						name: truncateDisplay(tag, maxTagDisplayLength),
-						nameTooltip: tag,
+						value: truncateDisplay(tag, maxTagDisplayLength),
+						valueTooltip: tag,
 						size: effectiveSize,
 						onDelete: disabled || readOnly ? void 0 : () => removeAt(index)
 					}, `${tag}-${index}`);

package/dist/components/text-effects/index.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { FC, ReactNode } from 'react';
+import { Transition, HTMLMotionProps, UseInViewOptions } from 'motion/react';
+
+interface GlitchTextProps {
+    text?: string;
+    children?: string;
+    speed?: number;
+    enableShadows?: boolean;
+    enableOnHover?: boolean;
+    className?: string;
+}
+declare const GlitchText: FC<GlitchTextProps>;
+
+type GradientTextProps = React.ComponentProps<"span"> & {
+    text: string;
+    gradient?: string;
+    neon?: boolean;
+    transition?: Transition;
+};
+declare function GradientText({ text, className, gradient, neon, transition, ...props }: GradientTextProps): React.JSX.Element;
+
+type HighlightTextProps = HTMLMotionProps<"span"> & {
+    text: string;
+    inView?: boolean;
+    inViewMargin?: UseInViewOptions["margin"];
+    inViewOnce?: boolean;
+    transition?: Transition;
+};
+declare function HighlightText({ ref, text, className, inView, inViewMargin, inViewOnce, transition, ...props }: HighlightTextProps): React.JSX.Element;
+
+type ShimmeringTextProps = {
+    text: string;
+    duration?: number;
+    transition?: Transition;
+    wave?: boolean;
+    color?: string;
+    shimmeringColor?: string;
+} & Omit<HTMLMotionProps<"span">, "children">;
+declare function ShimmeringText({ text, duration, transition, wave, className, color, shimmeringColor, ...props }: ShimmeringTextProps): React.JSX.Element;
+
+/**
+ * Parses a string containing text-effect markup tags (e.g. `<gradient-text>`,
+ * `<highlight-text>`) and returns an array of React nodes with the tagged
+ * segments rendered by their corresponding components.
+ *
+ * @example
+ * parseTextMarkup("Hello <gradient-text>World</gradient-text> and <highlight-text>Wow</highlight-text>!")
+ * // → ["Hello ", <GradientText text="World" />, " and ", <HighlightText text="Wow" />, "!"]
+ */
+declare function parseTextMarkup(text: string): ReactNode[];
+
+export { GlitchText, type GlitchTextProps, GradientText, type GradientTextProps, HighlightText, type HighlightTextProps, ShimmeringText, type ShimmeringTextProps, parseTextMarkup };

package/dist/components/text-effects/index.js

@@ -0,0 +1,6 @@
+import { GlitchText } from "./glitch-effect/glitch-text.js";
+import { GradientText } from "./gradient-text/gradient-text.js";
+import { HighlightText } from "./highlight-text/highlight-text.js";
+import { ShimmeringText } from "./shimmer-text/shimmer-text.js";
+import { parseTextMarkup } from "./parse-text-markup.js";
+export { GlitchText, GradientText, HighlightText, ShimmeringText, parseTextMarkup };

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+import { S as Size } from '../../index-BQANnKs9.js';
+
+interface TextareaProps extends Omit<React.ComponentProps<"textarea">, "size">, Pick<StyleAxisProps, "radius" | "border"> {
+    label?: React.ReactNode;
+    required?: boolean;
+    size?: Size;
+    hintContent?: React.ReactNode;
+    error?: boolean;
+    errorContent?: React.ReactNode;
+    charLimit?: number;
+}
+declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps };

package/dist/components/textarea/index.js

@@ -0,0 +1,2 @@
+import { Textarea } from "../../core/textarea/textarea.js";
+export { Textarea };