@espressif/dashboard-ui-components 1.11.1 → 1.12.0

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

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import React__default from 'react';
+import { S as Size } from '../../index-BQANnKs9.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+declare const PRESET_IDS: readonly ["today", "yesterday", "this-week", "last-week", "this-month", "last-month", "this-year", "last-year", "last-1-hour", "last-24-hours", "last-1-day", "past-7-days", "last-7-days", "last-14-days", "last-15-days", "past-30-days", "last-30-days", "last-4-weeks", "last-90-days", "last-3-months", "last-6-months", "last-1-year", "last-5-years"];
+type DateRangePickerPresetId = (typeof PRESET_IDS)[number];
+declare const PRESET_LABELS: Record<DateRangePickerPresetId, string>;
+/**
+ * Presets that end at the current moment instead of snapping to day
+ * boundaries. `past-7-days` and `past-30-days` include today, unlike
+ * `last-7-days` and `last-30-days`, which end yesterday at 23:59.
+ */
+declare const ROLLING_PRESET_IDS: readonly ["last-1-hour", "last-24-hours", "past-7-days", "past-30-days"];
+declare function computeDateRange(id: DateRangePickerPresetId): {
+    startDate: Date;
+    endDate: Date;
+};
+
+interface DateRangePickerCommittedRange {
+    startDate: Date;
+    endDate: Date;
+}
+interface DateRangePickerDraftRange {
+    startDate: Date | null;
+    endDate: Date | null;
+}
+interface DateRangePickerProps extends Pick<StyleAxisProps, "radius"> {
+    /** Which presets to show. If omitted, all presets are shown. */
+    presets?: DateRangePickerPresetId[];
+    /** Override labels for presets (i18n). Merged with built-in English defaults. Also accepts `"custom"` key. */
+    presetLabels?: Partial<Record<DateRangePickerPresetId | "custom", string>>;
+    /** Show the "Custom" sub-menu with Calendar. */
+    allowCustom?: boolean;
+    /** When `true`, end date is locked to today. One click produces a complete range. */
+    lockEndToToday?: boolean;
+    /** When `true`, dates after today are unselectable on the calendar. */
+    disableFutureDates?: boolean;
+    /** date-fns format string for the footer date inputs. */
+    dateFormat?: string;
+    /** Fires when a preset is clicked or a custom date is applied. `presetId` is `undefined` for custom apply. */
+    onChange?: (data: {
+        presetId?: DateRangePickerPresetId;
+        startDate: Date;
+        endDate: Date;
+    }) => void;
+    /** Fires when a preset is clicked. Always emits committed, valid dates. */
+    onPresetChange?: (presetId: DateRangePickerPresetId, range: DateRangePickerCommittedRange) => void;
+    /** Fires while editing custom range. Partial values are represented as `null`. */
+    onDraftChange?: (range: DateRangePickerDraftRange) => void;
+    /** Controlled: highlights the selected preset in the menu. */
+    selectedPresetId?: DateRangePickerPresetId;
+    /** Controlled: pre-selects date(s) on the Calendar. */
+    selectedStartDate?: Date;
+    /** Controlled: Calendar range end. */
+    selectedEndDate?: Date;
+    /**
+     * Show a "Clear" item at the bottom of the menu while a preset or custom
+     * range is selected. Selecting it calls `onClear` and closes the menu.
+     */
+    clearable?: boolean;
+    /** Label for the "Clear" menu item (i18n). Default: `"Clear"`. */
+    clearLabel?: string;
+    /** Fires when the "Clear" menu item is selected. The consumer resets its selection. */
+    onClear?: () => void;
+    /** Custom trigger element. Overrides the default Input trigger entirely. */
+    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;
+    /** Dropdown alignment relative to trigger. */
+    align?: "start" | "center" | "end";
+    /** Dropdown side. */
+    side?: "top" | "right" | "bottom" | "left";
+    className?: string;
+}
+
+declare function DateRangePicker({ presets, presetLabels, allowCustom, lockEndToToday, disableFutureDates, dateFormat, onChange, onPresetChange, onDraftChange, selectedPresetId, selectedStartDate, selectedEndDate, clearable, clearLabel, onClear, trigger, placeholder, label, size, hideIcon, disabled, required, rounded, radius, popoverRadius, popoverElevation, error, errorContent, startHelperContent, endHelperContent, hintContent, align, side, className, }: DateRangePickerProps): React.JSX.Element;
+declare namespace DateRangePicker {
+    var displayName: string;
+}
+
+export { DateRangePicker, type DateRangePickerCommittedRange, type DateRangePickerDraftRange, type DateRangePickerPresetId, type DateRangePickerProps, PRESET_IDS, PRESET_LABELS, ROLLING_PRESET_IDS, computeDateRange };

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

@@ -0,0 +1,3 @@
+import { PRESET_IDS, PRESET_LABELS, ROLLING_PRESET_IDS, computeDateRange } from "./presets.js";
+import { DateRangePicker } from "./date-range-picker.js";
+export { DateRangePicker, PRESET_IDS, PRESET_LABELS, ROLLING_PRESET_IDS, computeDateRange };

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

@@ -26,7 +26,7 @@ var OPEN_KEYS = /* @__PURE__ */ new Set([
 * open so the time can be set in the same interaction.
 */
 function DateTimePicker(props) {
-	const { value, onChange, defaultValue, defaultTime = DEFAULT_TIME, timeStep = DEFAULT_TIME_STEP_SECONDS, clearable = false, clearLabel = "Clear", timeAriaLabel = "Time", formatDate, placeholder = "Pick date and time", label, size, hideIcon = false, disabled = false, required = false, rounded = false, error, errorContent, hintContent, calendarProps, open: controlledOpen, onOpenChange, name, className } = props;
+	const { value, onChange, defaultValue, defaultTime = DEFAULT_TIME, timeStep = DEFAULT_TIME_STEP_SECONDS, clearable = false, clearLabel = "Clear", timeAriaLabel = "Time", formatDate, placeholder = "Pick date and time", label, size, hideIcon = false, disabled = false, required = false, rounded = false, radius, popoverRadius, popoverElevation, error, errorContent, hintContent, calendarProps, open: controlledOpen, onOpenChange, name, className } = props;
 	const isControlled = "value" in props;
 	const [uncontrolledValue, setUncontrolledValue] = React$1.useState(defaultValue);
 	const current = isControlled ? value : uncontrolledValue;
@@ -100,6 +100,7 @@ function DateTimePicker(props) {
 					disabled,
 					required,
 					rounded,
+					radius,
 					error,
 					errorContent,
 					hintContent,
@@ -110,7 +111,9 @@ function DateTimePicker(props) {
 				})
 			}), /* @__PURE__ */ jsxs(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: current,

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

@@ -0,0 +1,79 @@
+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 DateTimePickerProps extends Pick<StyleAxisProps, "radius"> {
+    /**
+     * Controlled value. Local wall-clock time; callers convert to UTC or epoch
+     * themselves. Pass `undefined` for "nothing selected".
+     */
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    defaultValue?: Date;
+    /**
+     * Time of day applied when a day is picked before any time was typed.
+     * `"HH:mm"` or `"HH:mm:ss"`.
+     * @default "00:00"
+     */
+    defaultTime?: string;
+    /**
+     * Native `step` of the time input in seconds. Values below 60 show a
+     * seconds field.
+     * @default 60
+     */
+    timeStep?: number;
+    /** Shows an X inside the trigger that clears both the day and the time. */
+    clearable?: boolean;
+    /** Accessible name of the clear button. @default "Clear" */
+    clearLabel?: string;
+    /** Accessible name of the time input inside the dropdown. @default "Time" */
+    timeAriaLabel?: string;
+    /** Formats the value shown in the trigger. Defaults to date-fns `PPP, p`. */
+    formatDate?: (date: Date) => string;
+    /** @default "Pick date and time" */
+    placeholder?: string;
+    label?: React__default.ReactNode;
+    size?: Size;
+    /** Hides the decorative calendar icon in the trigger. */
+    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;
+    hintContent?: React__default.ReactNode;
+    calendarProps?: Omit<CalendarProps, "mode" | "selected" | "onSelect">;
+    /** Controlled open state of the dropdown. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** When set, renders a hidden input carrying the ISO string of the value. */
+    name?: string;
+    className?: string;
+}
+
+/**
+ * One read-only input that opens a dropdown holding a `Calendar` and a
+ * `TimePicker`. Both edit a single `Date`.
+ *
+ * The time input is driven by a local draft string so a time typed before a
+ * day is picked is kept, and so an incomplete time (the browser reports `""`
+ * mid-edit) never snaps the committed value. Picking a day keeps the dropdown
+ * open so the time can be set in the same interaction.
+ */
+declare function DateTimePicker(props: DateTimePickerProps): React.JSX.Element;
+declare namespace DateTimePicker {
+    var displayName: string;
+}
+
+export { DateTimePicker, type DateTimePickerProps };

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

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

package/dist/components/device-icon/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ComponentType } from 'react';
+import { C as Color } from '../../index-BQANnKs9.js';
+
+interface DeviceIconProps {
+    type: string;
+    size?: number;
+    color?: Color;
+    fallback?: ComponentType<{
+        size?: number;
+    }>;
+    className?: string;
+}
+
+declare function DeviceIcon({ type, size, color, fallback: Fallback, className }: DeviceIconProps): React.JSX.Element | null;
+
+export { DeviceIcon, type DeviceIconProps };

package/dist/components/device-icon/index.js

@@ -0,0 +1,2 @@
+import { DeviceIcon } from "./device-icon.js";
+export { DeviceIcon };

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Dialog as Dialog$1 } from 'radix-ui';
+import { HTMLMotionProps } from 'motion/react';
+import { k as StyleAxisProps, d as DensityProps } from '../../style-axes-DSQ2DGc5.js';
+
+type DialogProps$1 = React.ComponentProps<typeof Dialog$1.Root>;
+type DialogTriggerProps$1 = React.ComponentProps<typeof Dialog$1.Trigger>;
+type DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';
+type DialogContentProps$1 = Omit<React.ComponentProps<typeof Dialog$1.Content>, 'forceMount' | 'asChild'> & HTMLMotionProps<'div'> & {
+    from?: DialogFlipDirection;
+};
+type DialogCloseProps$1 = React.ComponentProps<typeof Dialog$1.Close>;
+type DialogHeaderProps$1 = React.ComponentProps<'div'>;
+type DialogFooterProps$1 = React.ComponentProps<'div'>;
+type DialogTitleProps$1 = React.ComponentProps<typeof Dialog$1.Title>;
+type DialogDescriptionProps$1 = React.ComponentProps<typeof Dialog$1.Description>;
+
+type DialogProps = DialogProps$1;
+declare function Dialog(props: DialogProps): React.JSX.Element;
+type DialogTriggerProps = DialogTriggerProps$1;
+declare function DialogTrigger(props: DialogTriggerProps): React.JSX.Element;
+type DialogCloseProps = DialogCloseProps$1;
+declare function DialogClose(props: DialogCloseProps): React.JSX.Element;
+type DialogContentProps = DialogContentProps$1 & Pick<StyleAxisProps, 'radius' | 'elevation'> & DensityProps & {
+    showCloseButton?: boolean;
+    closeButtonClassName?: string;
+};
+declare function DialogContent({ className, children, showCloseButton, closeButtonClassName, radius, elevation, density, style, ...props }: DialogContentProps): React.JSX.Element;
+type DialogHeaderProps = DialogHeaderProps$1;
+declare function DialogHeader({ className, ...props }: DialogHeaderProps): React.JSX.Element;
+type DialogFooterProps = DialogFooterProps$1;
+declare function DialogFooter({ className, ...props }: DialogFooterProps): React.JSX.Element;
+type DialogTitleProps = DialogTitleProps$1;
+declare function DialogTitle({ className, ...props }: DialogTitleProps): React.JSX.Element;
+type DialogDescriptionProps = DialogDescriptionProps$1;
+declare function DialogDescription({ className, ...props }: DialogDescriptionProps): React.JSX.Element;
+
+export { Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps };

package/dist/components/dialog/index.js

@@ -0,0 +1,2 @@
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../../core/animate-ui/components/radix/dialog.js";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/components/dropdown-menu/index.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { DropdownMenu as DropdownMenu$1 } from 'radix-ui';
+import { HTMLMotionProps } from 'motion/react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+type DropdownMenuProps$1 = React.ComponentProps<typeof DropdownMenu$1.Root>;
+type DropdownMenuTriggerProps$1 = React.ComponentProps<typeof DropdownMenu$1.Trigger>;
+type DropdownMenuGroupProps$1 = React.ComponentProps<typeof DropdownMenu$1.Group>;
+type DropdownMenuSubProps$1 = React.ComponentProps<typeof DropdownMenu$1.Sub>;
+type DropdownMenuRadioGroupProps$1 = React.ComponentProps<typeof DropdownMenu$1.RadioGroup>;
+type DropdownMenuSubTriggerProps$1 = Omit<React.ComponentProps<typeof DropdownMenu$1.SubTrigger>, 'asChild'> & HTMLMotionProps<'div'>;
+type DropdownMenuSubContentProps$1 = Omit<React.ComponentProps<typeof DropdownMenu$1.SubContent>, 'forceMount' | 'asChild'> & Omit<React.ComponentProps<typeof DropdownMenu$1.Portal>, 'forceMount'> & HTMLMotionProps<'div'>;
+type DropdownMenuContentProps$1 = Omit<React.ComponentProps<typeof DropdownMenu$1.Content>, 'forceMount' | 'asChild'> & Omit<React.ComponentProps<typeof DropdownMenu$1.Portal>, 'forceMount'> & HTMLMotionProps<'div'>;
+type DropdownMenuItemProps$1 = Omit<React.ComponentProps<typeof DropdownMenu$1.Item>, 'asChild'> & HTMLMotionProps<'div'>;
+type DropdownMenuCheckboxItemProps$1 = Omit<React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>, 'asChild'> & HTMLMotionProps<'div'>;
+type DropdownMenuRadioItemProps$1 = Omit<React.ComponentProps<typeof DropdownMenu$1.RadioItem>, 'asChild'> & HTMLMotionProps<'div'>;
+type DropdownMenuLabelProps$1 = React.ComponentProps<typeof DropdownMenu$1.Label>;
+type DropdownMenuSeparatorProps$1 = React.ComponentProps<typeof DropdownMenu$1.Separator>;
+type DropdownMenuShortcutProps$1 = React.ComponentProps<'span'>;
+
+type DropdownMenuProps = DropdownMenuProps$1;
+declare function DropdownMenu(props: DropdownMenuProps): React.JSX.Element;
+type DropdownMenuTriggerProps = DropdownMenuTriggerProps$1;
+declare function DropdownMenuTrigger(props: DropdownMenuTriggerProps): React.JSX.Element;
+type DropdownMenuContentProps = DropdownMenuContentProps$1 & Pick<StyleAxisProps, 'radius' | 'elevation'>;
+declare function DropdownMenuContent({ sideOffset, className, children, radius, elevation, style, ...props }: DropdownMenuContentProps): React.JSX.Element;
+type DropdownMenuGroupProps = DropdownMenuGroupProps$1;
+declare function DropdownMenuGroup({ ...props }: DropdownMenuGroupProps): React.JSX.Element;
+type DropdownMenuItemProps = DropdownMenuItemProps$1 & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+};
+declare function DropdownMenuItem({ className, inset, variant, disabled, ...props }: DropdownMenuItemProps): React.JSX.Element;
+type DropdownMenuCheckboxItemProps = DropdownMenuCheckboxItemProps$1;
+declare function DropdownMenuCheckboxItem({ className, children, checked, disabled, ...props }: DropdownMenuCheckboxItemProps): React.JSX.Element;
+type DropdownMenuRadioGroupProps = DropdownMenuRadioGroupProps$1;
+declare function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): React.JSX.Element;
+type DropdownMenuRadioItemProps = DropdownMenuRadioItemProps$1;
+declare function DropdownMenuRadioItem({ className, children, disabled, ...props }: DropdownMenuRadioItemProps): React.JSX.Element;
+type DropdownMenuLabelProps = DropdownMenuLabelProps$1 & {
+    inset?: boolean;
+};
+declare function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps): React.JSX.Element;
+type DropdownMenuSeparatorProps = DropdownMenuSeparatorProps$1;
+declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): React.JSX.Element;
+type DropdownMenuShortcutProps = DropdownMenuShortcutProps$1;
+declare function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps): React.JSX.Element;
+type DropdownMenuSubProps = DropdownMenuSubProps$1;
+declare function DropdownMenuSub(props: DropdownMenuSubProps): React.JSX.Element;
+type DropdownMenuSubTriggerProps = DropdownMenuSubTriggerProps$1 & {
+    inset?: boolean;
+};
+declare function DropdownMenuSubTrigger({ disabled, className, inset, children, ...props }: DropdownMenuSubTriggerProps): React.JSX.Element;
+type DropdownMenuSubContentProps = DropdownMenuSubContentProps$1 & Pick<StyleAxisProps, 'radius' | 'elevation'>;
+declare function DropdownMenuSubContent({ className, radius, elevation, style, ...props }: DropdownMenuSubContentProps): React.JSX.Element;
+
+export { DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps };

package/dist/components/dropdown-menu/index.js

@@ -0,0 +1,2 @@
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../../core/animate-ui/components/radix/dropdown-menu.js";
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/dynamic-list/dynamic-list.js

@@ -2,10 +2,10 @@ import { cn } from "../../utils/cn.js";
 import { Avatar, AvatarFallback } from "../../core/avatar.js";
 import { BasicDetailsCard } from "../cards/basic-details-card.js";
 import { Badge } from "../../core/badge.js";
-import { Link } from "../link/link.js";
-import { CopiableText } from "../copiable-text/copiable-text.js";
-import { Tag as Tag$1 } from "../tag/tag.js";
 import { Alert } from "../alert/alert.js";
+import { Tag as Tag$1 } from "../tag/tag.js";
+import { Link as Link$1 } from "../link/link.js";
+import { CopiableText } from "../copiable-text/copiable-text.js";
 import { Code } from "../../core/animate-ui/components/animate/code.js";
 import { MonospaceContent } from "../monospace-content/monospace-content.js";
 import { SimpleList } from "../simple-list/simple-list.js";
@@ -293,7 +293,7 @@ function wrapTypedValue(value, rowMeta, key, opts, effectiveType) {
 			{
 				const href = value.trim();
 				if (href.length === 0 || !isLikelyUrlString(href)) return base;
-				return /* @__PURE__ */ jsx(Link, {
+				return /* @__PURE__ */ jsx(Link$1, {
 					to: href,
 					color: "info",
 					className: "min-w-0 break-all font-normal",

package/dist/components/dynamic-list/index.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+type DynamicListMetaType = "badge" | "info" | "error" | "mono" | "timestamp" | "url";
+type DynamicListSize = "sm" | "default" | "lg";
+interface DynamicListEntry {
+    key: string;
+    value: unknown;
+}
+interface DynamicListMetaEntry {
+    /** When set, used as the row label instead of `startCase(key)`. */
+    label?: string;
+    /** When set, replaces the default row leading icon (Bolt). Ignored when `hideIcon` is true. */
+    icon?: LucideIcon | ReactNode;
+    /** When set, output replaces default `formatValue(value)` for that row. */
+    valueFormatter?: (value: unknown) => string;
+    /**
+     * When set, used as the row value instead of `valueFormatter` / default formatting.
+     * Use for rich content (e.g. date components).
+     */
+    valueRender?: (value: unknown) => ReactNode;
+    /**
+     * Visual treatment for the value. `info`, `error`, `mono`, and `url` always use column layout for that row
+     * (overrides list `direction`). Default rendering of objects/arrays as `Code`, and string[] values whose
+     * key contains `"tags"`, also use column layout. `badge` and `timestamp` honour list `direction`.
+     * `timestamp` auto-formats numeric values as unix/ms/us/ns timestamps when no formatter/renderer is supplied.
+     * `url` renders string values with `Link` when neither `valueFormatter` nor `valueRender` is set.
+     */
+    type?: DynamicListMetaType;
+}
+interface DynamicListProps {
+    items: DynamicListEntry[];
+    /** Optional per-item overrides keyed by `DynamicListEntry.key`. */
+    meta?: Record<string, DynamicListMetaEntry>;
+    className?: string;
+    /** Overall list spacing and typography scale. Default: `"default"`. */
+    size?: DynamicListSize;
+    /** Extra classes for each row label. */
+    labelClassName?: string;
+    /** Extra classes for each row value. */
+    valueClassName?: string;
+    /**
+     * When true, rows are rendered with `SimpleList` (inline icons by default). Default false.
+     */
+    simple?: boolean;
+    /** When true, no leading icon is shown. Default false. */
+    hideIcon?: boolean;
+    /**
+     * Stack key/value vertically (column) or show icon, key, and value on one line (row). Default "column".
+     * Row layout applies from the `sm` breakpoint (640px) up; below it, rows stack like column rows.
+     */
+    direction?: "row" | "column";
+    /**
+     * Share of the key+value row reserved for the key label (1–100). Only applies when `direction` is `"row"`
+     * (from the `sm` breakpoint up).
+     * Default 30 (value uses the remaining width).
+     */
+    keyWidth?: number;
+    /**
+     * When true, boolean values render as check (success) and cross (error) icons instead of text.
+     * Ignored for rows that define `meta.valueFormatter` or `meta.valueRender`. Default false.
+     */
+    useIconsForBoolean?: boolean;
+    /**
+     * When true, row labels use the raw `key` string instead of lodash `startCase(key)`.
+     * `meta.label` still overrides when set. Default false.
+     */
+    verbatimKeyLabels?: boolean;
+}
+
+declare function DynamicList({ items, meta, className, size, labelClassName, valueClassName, simple, hideIcon, direction, keyWidth, useIconsForBoolean, verbatimKeyLabels, }: DynamicListProps): React.JSX.Element;
+
+export { DynamicList, type DynamicListEntry, type DynamicListMetaEntry, type DynamicListMetaType, type DynamicListProps };

package/dist/components/dynamic-list/index.js

@@ -0,0 +1,2 @@
+import { DynamicList } from "./dynamic-list.js";
+export { DynamicList };

package/dist/components/error-display/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface FullSizeErrorProps {
+    title?: ReactNode;
+    children: ReactNode;
+    illustration?: ReactNode;
+}
+declare function FullSizeError({ title, children, illustration }: FullSizeErrorProps): React.JSX.Element;
+
+interface InlineErrorProps {
+    title?: ReactNode;
+    children: ReactNode;
+}
+declare function InlineError({ title, children }: InlineErrorProps): React.JSX.Element;
+
+export { FullSizeError, type FullSizeErrorProps, InlineError, type InlineErrorProps };

package/dist/components/error-display/index.js

@@ -0,0 +1,3 @@
+import { FullSizeError } from "./full-size-error/full-size-error.js";
+import { InlineError } from "./inline-error/inline-error.js";
+export { FullSizeError, InlineError };

package/dist/components/expandable-text/expandable-text-overlay.js

@@ -0,0 +1,78 @@
+import { cn } from "../../utils/cn.js";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region src/components/expandable-text/expandable-text-overlay.tsx
+/** How long the closing circle runs before the overlay unmounts (its transition is 0.32s). */
+var CLOSE_MS = 320;
+/**
+* The full text over the nearest positioned ancestor. Opens as a circle from
+* the link in 0.5s and closes back into it in 0.32s; under reduced motion it
+* simply appears and goes. Escape closes it.
+*/
+function ExpandableTextOverlay({ text, header, footer, closeLabel, origin, open, onClose, onClosed }) {
+	const panel = useRef(null);
+	const closeButton = useRef(null);
+	const [at, setAt] = useState("50% 50%");
+	const [grown, setGrown] = useState(false);
+	useLayoutEffect(() => {
+		const from = origin.current?.getBoundingClientRect();
+		const box = panel.current?.getBoundingClientRect();
+		if (from && box) setAt(`${from.left + from.width / 2 - box.left}px ${from.top + from.height / 2 - box.top}px`);
+	}, [origin]);
+	useEffect(() => {
+		if (!open) {
+			setGrown(false);
+			const timer = setTimeout(onClosed, CLOSE_MS);
+			return () => clearTimeout(timer);
+		}
+		const frame = requestAnimationFrame(() => setGrown(true));
+		closeButton.current?.focus();
+		return () => cancelAnimationFrame(frame);
+	}, [open, onClosed]);
+	function handleKeyDown(event) {
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			onClose();
+		}
+	}
+	const style = { clipPath: `circle(${grown ? "150%" : "0%"} at ${at})` };
+	return /* @__PURE__ */ jsxs("div", {
+		ref: panel,
+		"data-slot": "expandable-text-overlay",
+		"data-state": open ? "open" : "closed",
+		onKeyDown: handleKeyDown,
+		style,
+		className: cn("absolute inset-0 z-30 flex flex-col gap-3 bg-popover p-4 text-popover-foreground transition-clip motion-reduce:transition-none", grown ? "duration-500 ease-emphasized" : "duration-300 ease-in"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: header
+				}), /* @__PURE__ */ jsx("button", {
+					ref: closeButton,
+					type: "button",
+					"aria-label": closeLabel,
+					onClick: onClose,
+					className: "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+					children: /* @__PURE__ */ jsx(X, {
+						"aria-hidden": true,
+						className: "size-4"
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				tabIndex: 0,
+				className: "m-0 min-h-0 flex-1 overflow-y-auto overscroll-contain text-sm whitespace-pre-line text-foreground-secondary outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				children: text
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				children: footer
+			})
+		]
+	});
+}
+//#endregion
+export { ExpandableTextOverlay };

package/dist/components/expandable-text/expandable-text.js

@@ -0,0 +1,73 @@
+import { cn } from "../../utils/cn.js";
+import { ExpandableTextOverlay } from "./expandable-text-overlay.js";
+import { useClamped } from "./use-clamped.js";
+import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/expandable-text/expandable-text.tsx
+var CLAMP = {
+	1: "line-clamp-1",
+	2: "line-clamp-2",
+	3: "line-clamp-3",
+	4: "line-clamp-4",
+	5: "line-clamp-5",
+	6: "line-clamp-6"
+};
+var LINK = "cursor-pointer self-start rounded-sm p-0 font-semibold text-primary underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring";
+/**
+* Text clamped to a few lines with a "Show more" link — shown only when the
+* text really is cut off. `inline` grows in place; `overlay` opens the full
+* text over its card, so the card never changes height.
+*/
+function ExpandableText({ children, lines = 2, mode = "inline", labels, header, footer, className }) {
+	const text = useRef(null);
+	const more = useRef(null);
+	const [expanded, setExpanded] = useState(false);
+	const [overlay, setOverlay] = useState("closed");
+	const inlineOpen = mode === "inline" && expanded;
+	const clamped = useClamped(text, !inlineOpen);
+	const close = useCallback(() => setOverlay((state) => state === "open" ? "closing" : state), []);
+	const closed = useCallback(() => {
+		setOverlay("closed");
+		more.current?.focus();
+	}, []);
+	function handleMore() {
+		if (mode === "overlay") {
+			setOverlay("open");
+			return;
+		}
+		setExpanded((value) => !value);
+	}
+	const showLink = clamped || inlineOpen;
+	const open = mode === "overlay" ? overlay !== "closed" : inlineOpen;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "expandable-text",
+		className: cn("flex min-w-0 flex-col gap-1", className),
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				ref: text,
+				className: cn("m-0 whitespace-pre-line", !inlineOpen && CLAMP[lines]),
+				children
+			}),
+			showLink && /* @__PURE__ */ jsx("button", {
+				ref: more,
+				type: "button",
+				"aria-expanded": open,
+				onClick: handleMore,
+				className: LINK,
+				children: inlineOpen ? labels.less : labels.more
+			}),
+			mode === "overlay" && overlay !== "closed" && /* @__PURE__ */ jsx(ExpandableTextOverlay, {
+				text: children,
+				header,
+				footer,
+				closeLabel: labels.close,
+				origin: more,
+				open: overlay === "open",
+				onClose: close,
+				onClosed: closed
+			})
+		]
+	});
+}
+//#endregion
+export { ExpandableText };