@parallelworks/ui 0.83.3 → 0.84.0

package/dist/components/RunStatusIcon.d.ts

@@ -1,3 +1,4 @@
+import type { ComponentPropsWithRef } from 'react';
 import type { RunStatus } from '../engine.js';
 import { type Tone } from './tone.js';
 /** A status the icon shows: a run's, or one a host maps onto it, such as
@@ -6,7 +7,9 @@ export type RunStatusIconStatus = RunStatus | 'pending' | 'warning';
 /** The tone a run status reads in, so a badge that says the status in words matches the
  *  icon: `<StatusBadge variant={runStatusTone(status)}>`. */
 export declare function runStatusTone(status: RunStatusIconStatus): Tone;
-export interface RunStatusIconProps {
+/** Any other span attribute and the ref reach the icon's element, so it can be a Tooltip's or a
+ *  popover's direct child. */
+export interface RunStatusIconProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
     status: RunStatusIconStatus;
     /** Names the icon in place of `strings.dag.statusLabel`, for a host's own status
      *  shown in a run's look, such as "Provisioning" as running. */
@@ -18,4 +21,4 @@ export interface RunStatusIconProps {
 /** A run's, job's or step's status as an icon in its tone, beside the name of what ran. It
  *  is named by `label`, or else `strings.dag.statusLabel`. To say the status in words, use
  *  `StatusBadge` with `runStatusTone`. */
-export declare function RunStatusIcon({ status, label: ownLabel, tooltip, className, }: RunStatusIconProps): import("react").JSX.Element;
+export declare function RunStatusIcon({ status, label: ownLabel, tooltip, className, ...rest }: RunStatusIconProps): import("react").JSX.Element;

package/dist/components/RunStatusIcon.js

@@ -71,12 +71,13 @@ function runStatusTone(status) {
 /** A run's, job's or step's status as an icon in its tone, beside the name of what ran. It
 *  is named by `label`, or else `strings.dag.statusLabel`. To say the status in words, use
 *  `StatusBadge` with `runStatusTone`. */
-function RunStatusIcon({ status, label: ownLabel, tooltip = false, className }) {
+function RunStatusIcon({ status, label: ownLabel, tooltip = false, className, ...rest }) {
 	const { dag } = useStrings();
 	const look = looks[status ?? ""];
 	const Icon = look.icon;
 	const label = ownLabel ?? dag.statusLabel(status ?? "");
 	const icon = /* @__PURE__ */ jsx("span", {
+		...rest,
 		...label ? {
 			role: "img",
 			"aria-label": label

package/dist/components/StatusBadge.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { type Tone } from './tone.js';
 /** A badge's tone: a status, or the theme's accent for something set apart that
  *  isn't a status, such as "New". */
@@ -13,7 +13,9 @@ declare const sizeClasses: {
     readonly md: 'gap-1.5 py-0.5 text-[11px] leading-4';
 };
 export type BadgeSize = keyof typeof sizeClasses;
-export interface StatusBadgeProps {
+/** Any other span attribute and the ref reach its element, so it can be a Tooltip's or a popover's
+ *  direct child. */
+export interface StatusBadgeProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
     /** Badge content */
     children: ReactNode;
     /** Visual variant */
@@ -41,8 +43,10 @@ export interface StatusBadgeProps {
  *  dot rather than inside a badge. */
 export declare function statusTextClass(variant: BadgeVariant): string;
 /** A short status or label in a tone, such as "Running" or "Preview". */
-export declare function StatusBadge({ children, variant, emphasis, shape, caps, truncate, pulse, dot, size, render, className, }: StatusBadgeProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export interface CountBadgeProps {
+export declare function StatusBadge({ children, variant, emphasis, shape, caps, truncate, pulse, dot, size, render, className, ref, ...rest }: StatusBadgeProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Any other span attribute and the ref reach its element, so it can be a Tooltip's or a popover's
+ *  direct child. */
+export interface CountBadgeProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
     count: number;
     /** Above it, the count reads as `max` and a plus, such as "99+". */
     max?: number | undefined;
@@ -64,12 +68,14 @@ export interface CountBadgeProps {
 }
 /** A number beside a link or tab, such as unread messages or items waiting,
  *  capped at `max` so a big count doesn't widen what it sits in. */
-export declare function CountBadge({ count, max, variant, emphasis, size, label, showZero, locale, className, }: CountBadgeProps): import("react").JSX.Element | null;
-interface StatusDotProps {
-    variant?: BadgeVariant;
-    pulse?: boolean;
-    size?: number;
-    className?: string;
+export declare function CountBadge({ count, max, variant, emphasis, size, label, showZero, locale, className, ...rest }: CountBadgeProps): import("react").JSX.Element | null;
+/** Any other span attribute and the ref reach its element, so it can be a Tooltip's or a popover's
+ *  direct child. */
+export interface StatusDotProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
+    variant?: BadgeVariant | undefined;
+    pulse?: boolean | undefined;
+    size?: number | undefined;
+    className?: string | undefined;
 }
-export declare function StatusDot({ variant, pulse, size, className, }: StatusDotProps): import("react").JSX.Element;
+export declare function StatusDot({ variant, pulse, size, className, style, ...rest }: StatusDotProps): import("react").JSX.Element;
 export {};

package/dist/components/StatusBadge.js

@@ -3,6 +3,7 @@ import { toneFill, toneSurface, toneText } from "./tone.js";
 import { useStrings } from "./Provider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/components/StatusBadge.tsx
 var emphasisClasses = {
 	soft: {
@@ -56,11 +57,12 @@ function statusTextClass(variant) {
 	return variant === "accent" ? "text-(--theme-link)" : toneText[variant];
 }
 /** A short status or label in a tone, such as "Running" or "Preview". */
-function StatusBadge({ children, variant = "default", emphasis = "soft", shape = "pill", caps = false, truncate = false, pulse = false, dot = false, size = "sm", render, className }) {
+function StatusBadge({ children, variant = "default", emphasis = "soft", shape = "pill", caps = false, truncate = false, pulse = false, dot = false, size = "sm", render, className, ref, ...rest }) {
 	const indicator = emphasis === "solid" ? "bg-current" : dotFill[variant];
 	return useRender({
 		render: render ?? /* @__PURE__ */ jsx("span", {}),
-		props: {
+		ref,
+		props: mergeProps(rest, {
 			className: cx("inline-flex items-center border font-medium no-underline", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", sizeClasses[size], padClasses[shape][size], shapeClasses[shape], caps && "uppercase tracking-wider", truncate && "min-w-0 max-w-full", emphasisClasses[emphasis][variant], className),
 			children: /* @__PURE__ */ jsxs(Fragment, { children: [
 				pulse && /* @__PURE__ */ jsxs("span", {
@@ -73,7 +75,7 @@ function StatusBadge({ children, variant = "default", emphasis = "soft", shape =
 					children
 				}) : children
 			] })
-		}
+		})
 	});
 }
 var countSizeClasses = {
@@ -82,12 +84,13 @@ var countSizeClasses = {
 };
 /** A number beside a link or tab, such as unread messages or items waiting,
 *  capped at `max` so a big count doesn't widen what it sits in. */
-function CountBadge({ count, max = 99, variant = "accent", emphasis = "solid", size = "md", label, showZero = false, locale, className }) {
+function CountBadge({ count, max = 99, variant = "accent", emphasis = "solid", size = "md", label, showZero = false, locale, className, ...rest }) {
 	const { common } = useStrings();
 	if (count <= 0 && !showZero) return null;
 	const number = new Intl.NumberFormat(locale);
 	const text = count > max ? common.countOverflow(number.format(max)) : number.format(count);
 	return /* @__PURE__ */ jsxs("span", {
+		...rest,
 		"data-count": count,
 		className: cx("inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums", countSizeClasses[size], emphasisClasses[emphasis][variant], className),
 		children: [text, label && /* @__PURE__ */ jsxs("span", {
@@ -96,10 +99,12 @@ function CountBadge({ count, max = 99, variant = "accent", emphasis = "solid", s
 		})]
 	});
 }
-function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
+function StatusDot({ variant = "default", pulse = false, size = 8, className, style, ...rest }) {
 	return /* @__PURE__ */ jsxs("span", {
+		...rest,
 		className: cx("relative inline-flex", className),
 		style: {
+			...style,
 			width: size,
 			height: size
 		},

package/dist/components/Tag.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 export interface TagStyle {
     /** Monospace text, for a value read as code, such as a key=value label. */
     mono?: boolean | undefined;
@@ -8,7 +8,9 @@ export interface TagStyle {
 /** The one tag look: a pill with a hairline border and 11px text. Another component's chip,
  *  such as a picker's chosen value, uses it to look the same. */
 export declare function tagClasses({ mono, caps }?: TagStyle): string;
-export interface TagProps extends TagStyle {
+/** Any other attribute and the ref reach the tag's element, its link with `href` and no `onRemove`,
+ *  so it can be a Tooltip's or a popover's direct child. */
+export interface TagProps extends TagStyle, Omit<ComponentPropsWithRef<'span'>, 'children' | 'className' | 'color' | 'title'> {
     children: ReactNode;
     /** A dot before the text in this color, any CSS color, such as a label's own. */
     color?: string | undefined;
@@ -23,7 +25,7 @@ export interface TagProps extends TagStyle {
 }
 /** A tag or label on a thing: a pill with an optional color dot, a link with `href`, and an ×
  *  with `onRemove`. */
-export declare function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps, className, }: TagProps): import("react").JSX.Element;
+export declare function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps, className, ref, ...rest }: TagProps): import("react").JSX.Element;
 /** One tag of a `TagList`: a string is its own key and label. */
 export type TagItem = string | {
     key: string;

package/dist/components/Tag.js

@@ -13,7 +13,7 @@ function tagClasses({ mono = false, caps = false } = {}) {
 }
 /** A tag or label on a thing: a pill with an optional color dot, a link with `href`, and an ×
 *  with `onRemove`. */
-function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps, className }) {
+function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps, className, ref, ...rest }) {
 	const { dropdown } = useStrings();
 	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [color && /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
@@ -29,17 +29,23 @@ function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps,
 	}), className);
 	const hover = "transition-colors hover:bg-(--theme-hover)";
 	if (!onRemove) return href ? /* @__PURE__ */ jsx(AppLink, {
+		...rest,
+		ref,
 		href,
 		title,
 		className: cx(classes, hover, "no-underline"),
 		children: content
 	}) : /* @__PURE__ */ jsx("span", {
+		...rest,
+		ref,
 		title,
 		className: classes,
 		children: content
 	});
 	const name = removeLabel ?? dropdown.removeValue(typeof children === "string" ? children : "");
 	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		ref,
 		title,
 		className: cx(classes, "pr-0.5"),
 		children: [href ? /* @__PURE__ */ jsx(AppLink, {

package/dist/components/relativeTime.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type DateTimeStyle, type TimeValue } from '../format.js';
 export type { TimeValue };
 /** Something worked out from the time, kept current by one clock that ticks
@@ -15,7 +15,8 @@ export type RelativeTimeFormat = 'long' | 'compact';
 /** How long ago, or until, `value` is, kept current as time passes. Empty for
  *  a missing or invalid time. */
 export declare function useRelativeTime(value: TimeValue, format?: RelativeTimeFormat): string;
-export interface RelativeTimeProps {
+/** Any other attribute and the ref reach the `<time>`, so it can be a popover's direct child. */
+export interface RelativeTimeProps extends Omit<ComponentPropsWithRef<'time'>, 'children' | 'className' | 'dateTime'> {
     value: TimeValue;
     format?: RelativeTimeFormat | undefined;
     /** Shown in place of a missing or invalid time, such as "Never" or "—". Default nothing. */
@@ -31,17 +32,19 @@ export interface RelativeTimeProps {
 /** A time shown relative to now ("5 minutes ago", or "5m" compact), counting
  *  on while it stays on screen, with the exact time on hover. Renders the
  *  `fallback`, or nothing, for a missing time. */
-export declare function RelativeTime({ value, format, fallback, exact, show, className, }: RelativeTimeProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
+export declare function RelativeTime({ value, format, fallback, exact, show, className, ...rest }: RelativeTimeProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
 /** Milliseconds from `start` to `end`, or to now while `running`, in whole
  *  seconds so it changes at most once a second. Running defaults to having no
  *  end; pass false for something that stopped without recording when. Null
  *  without a start. */
 export declare function useElapsed(start: TimeValue, end?: TimeValue, running?: boolean): number | null;
-/** How long something took, or has taken so far while it runs: 45s, 2m 13s.
- *  Renders nothing without a start. */
-export declare function Elapsed({ start, end, running, className, }: {
+/** Any other attribute and the ref reach the `<time>`, so it can be a Tooltip's direct child. */
+export interface ElapsedProps extends Omit<ComponentPropsWithRef<'time'>, 'children' | 'className' | 'dateTime'> {
     start: TimeValue;
     end?: TimeValue;
-    running?: boolean;
-    className?: string;
-}): import("react").JSX.Element | null;
+    running?: boolean | undefined;
+    className?: string | undefined;
+}
+/** How long something took, or has taken so far while it runs: 45s, 2m 13s.
+ *  Renders nothing without a start. */
+export declare function Elapsed({ start, end, running, className, ...rest }: ElapsedProps): import("react").JSX.Element | null;

package/dist/components/relativeTime.js

@@ -100,7 +100,7 @@ function useRelativeTime(value, format = "long") {
 /** A time shown relative to now ("5 minutes ago", or "5m" compact), counting
 *  on while it stays on screen, with the exact time on hover. Renders the
 *  `fallback`, or nothing, for a missing time. */
-function RelativeTime({ value, format = "long", fallback = null, exact = "seconds", show = "relative", className }) {
+function RelativeTime({ value, format = "long", fallback = null, exact = "seconds", show = "relative", className, ...rest }) {
 	const label = useRelativeTime(value, format);
 	const locale = useLocale();
 	const time = toDateTime(value);
@@ -108,6 +108,7 @@ function RelativeTime({ value, format = "long", fallback = null, exact = "second
 	const absolute = formatDateTime(time, exact || "seconds", locale);
 	const [text, tip] = show === "absolute" ? [absolute, label] : [label, exact ? absolute : null];
 	const element = /* @__PURE__ */ jsx("time", {
+		...rest,
 		dateTime: time.toISO() ?? void 0,
 		className,
 		children: text
@@ -129,11 +130,12 @@ function useElapsed(start, end, running = toDateTime(end) === null) {
 }
 /** How long something took, or has taken so far while it runs: 45s, 2m 13s.
 *  Renders nothing without a start. */
-function Elapsed({ start, end, running, className }) {
+function Elapsed({ start, end, running, className, ...rest }) {
 	const elapsed = useElapsed(start, end, running);
 	const locale = useLocale();
 	if (elapsed === null) return null;
 	return /* @__PURE__ */ jsx("time", {
+		...rest,
 		dateTime: Duration.fromMillis(elapsed).toISO() ?? void 0,
 		className,
 		children: formatDuration(elapsed, locale)

package/dist/index.d.ts

@@ -32,7 +32,7 @@ export { IconButton, type IconButtonProps } from './components/IconButton.js';
 export { formatInfoTipContent, InfoTip } from './components/InfoTip.js';
 export { Input, type InputProps, Textarea, type TextareaProps, TitleInput, type TitleInputProps, } from './components/Input.js';
 export { ariaKeyShortcuts, formatShortcut, isApplePlatform, Kbd, type KbdProps, type KbdSize, type KbdVariant, type KeyPlatform, shortcutText, useShortcutFormat, } from './components/Kbd.js';
-export { LetterBadge } from './components/LetterBadge.js';
+export { LetterBadge, type LetterBadgeProps } from './components/LetterBadge.js';
 export { ListboxGroup, type ListboxNavigation, type ListboxNavigationOptions, ListboxOption, type ListboxOptionProps, ListboxPanel, type ListboxPanelProps, useListboxNavigation, } from './components/Listbox.js';
 export { Loader, type LoaderProps } from './components/Loader.js';
 export type { MarkdownProps } from './components/Markdown.js';
@@ -53,7 +53,7 @@ export { Radio, RadioGroup, type RadioProps } from './components/Radio.js';
 export { RefreshButton, type RefreshButtonProps } from './components/RefreshButton.js';
 export { RequiredMark } from './components/RequiredMark.js';
 export { RunStatusIcon, type RunStatusIconProps, type RunStatusIconStatus, runStatusTone, } from './components/RunStatusIcon.js';
-export { Elapsed, RelativeTime, type RelativeTimeFormat, type RelativeTimeProps, useClock, useElapsed, useRelativeTime, } from './components/relativeTime.js';
+export { Elapsed, type ElapsedProps, RelativeTime, type RelativeTimeFormat, type RelativeTimeProps, useClock, useElapsed, useRelativeTime, } from './components/relativeTime.js';
 export { SearchInput, type SearchInputProps } from './components/SearchInput.js';
 export { Section, type SectionProps, type SectionTone, type SectionVariant, } from './components/Section.js';
 export { SegmentedControl, type SegmentedControlRootProps, type SegmentedOption, } from './components/SegmentedControl.js';
@@ -63,7 +63,7 @@ export { SettingModeOption } from './components/SettingModeOption.js';
 export { SettingRow, SettingsCard, type SettingsCardProps, SettingsHeading, } from './components/SettingsCard.js';
 export { LoadingRegion, Skeleton, type SkeletonProps } from './components/Skeleton.js';
 export { Slider, type SliderProps } from './components/Slider.js';
-export { type BadgeEmphasis, type BadgeShape, type BadgeSize, type BadgeVariant, CountBadge, type CountBadgeProps, StatusBadge, type StatusBadgeProps, StatusDot, statusTextClass, } from './components/StatusBadge.js';
+export { type BadgeEmphasis, type BadgeShape, type BadgeSize, type BadgeVariant, CountBadge, type CountBadgeProps, StatusBadge, type StatusBadgeProps, StatusDot, type StatusDotProps, statusTextClass, } from './components/StatusBadge.js';
 export { StickyBar, type StickyBarProps } from './components/StickyBar.js';
 export { Switch, type SwitchProps } from './components/Switch.js';
 export type { SegmentTone } from './components/segmented.js';