@fiestaboard/ui 3.0.1 → 3.1.0

package/dist/components/containment/json-tree.d.ts

@@ -0,0 +1,59 @@
+import * as React from "react";
+export interface JsonTreeLabels {
+    /**
+     * Accessible name (and tooltip) for a leaf's select button.
+     * Default: `` (path) => `Use path: ${path}` ``
+     */
+    selectPath?: (path: string) => string;
+    /**
+     * Accessible name for a branch's expand/collapse toggle — the visible
+     * `{3}` / `[2]` summary is decorative and hidden from assistive tech.
+     * Default: `` (path, count) => `${path} (${count} items)` ``
+     */
+    toggleNode?: (path: string, count: number) => string;
+    /** Stands in for the path of the root node, which has none. Default: `"root"` */
+    root?: string;
+    /** Announced politely after a leaf is selected. Default: `"Path copied"` */
+    selected?: string;
+    /** Shown in place of children for an empty object or array. Default: `"empty"` */
+    empty?: string;
+}
+export interface JsonTreeProps {
+    /** Any JSON-shaped value. Objects and arrays branch; everything else is a leaf. */
+    data: unknown;
+    /**
+     * Dot/bracket path of `data` itself, prefixed onto every child path.
+     * Defaults to `""`, which makes children read `a.b[0]` rather than `.a.b[0]`.
+     */
+    path?: string;
+    /**
+     * Called with the dot/bracket path of the leaf the user picked and its
+     * value. Omit for a read-only tree: the per-leaf select buttons disappear.
+     */
+    onSelect?: (path: string, value: unknown) => void;
+    /** Expand this node on first render. Default: `false`. */
+    defaultExpanded?: boolean;
+    /**
+     * Expand the first N levels on first render — `2` opens this node and its
+     * direct branch children. Default: `0`.
+     */
+    defaultExpandedDepth?: number;
+    labels?: JsonTreeLabels;
+    className?: string;
+}
+/**
+ * A collapsible JSON tree whose every leaf offers its own dot/bracket path.
+ *
+ * It knows nothing about plugins, settings, or where the data came from — it
+ * renders a value and reports the path the user picked — so any surface that
+ * needs "show me this response and let me point at part of it" can use it.
+ *
+ * Branches are nested WAI-ARIA **disclosures**, not a `role="tree"`: a correct
+ * tree owes callers a roving tabindex and full arrow-key navigation across a
+ * recursive component boundary, and a half-built one is worse than none — it
+ * would strip Tab access from the nested select buttons while advertising an
+ * interaction contract the widget doesn't honour. Disclosures are keyboard
+ * complete out of the box (Tab to reach, Enter/Space to toggle); Arrow
+ * Left/Right are wired up on top as the affordance tree users reach for.
+ */
+export declare function JsonTree({ data, path, onSelect, defaultExpanded, defaultExpandedDepth, labels, className, }: JsonTreeProps): React.JSX.Element;

package/dist/components/containment/json-tree.js

@@ -0,0 +1,122 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Check as t, ChevronDown as n, ChevronRight as r, Copy as i } from "lucide-react";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/containment/json-tree.tsx
+var c = {
+	string: "text-success",
+	number: "text-warning",
+	boolean: "text-warning",
+	nullish: "text-muted-foreground italic",
+	other: "text-foreground"
+}, l = "text-info", u = "text-tag-variable-foreground", d = "-ml-1 flex w-full items-center gap-1 rounded-sm px-1 py-0.5 text-left text-xs text-muted-foreground transition-colors duration-control hover:bg-muted/60 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]", f = "shrink-0 rounded-sm p-0.5 opacity-0 transition-opacity duration-control hover:bg-muted group-hover:opacity-100 focus-visible:opacity-100 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]", p = 1500;
+function m(e) {
+	return typeof e == "object" && !!e;
+}
+function h(e) {
+	if (e == null) return c.nullish;
+	switch (typeof e) {
+		case "string": return c.string;
+		case "number":
+		case "bigint": return c.number;
+		case "boolean": return c.boolean;
+		default: return c.other;
+	}
+}
+function g(e) {
+	return e == null ? "null" : typeof e == "string" ? `"${e}"` : String(e);
+}
+function _({ data: c, path: v = "", onSelect: y, defaultExpanded: b = !1, defaultExpandedDepth: x = 0, labels: S, className: C }) {
+	let { selectPath: w = (e) => `Use path: ${e}`, toggleNode: T = (e, t) => `${e} (${t} ${t === 1 ? "item" : "items"})`, root: E = "root", selected: D = "Path copied", empty: O = "empty" } = S ?? {}, k = x > 0, [A, j] = a.useState(b || k), [M, N] = a.useState(b || k), [P, F] = a.useState(null), I = a.useId(), L = a.useRef(null);
+	a.useEffect(() => () => {
+		L.current !== null && clearTimeout(L.current);
+	}, []);
+	function R(e, t) {
+		y?.(e, t), F(e), L.current !== null && clearTimeout(L.current), L.current = setTimeout(() => F(null), p);
+	}
+	function z() {
+		j((e) => !e), N(!0);
+	}
+	function B(e) {
+		e.key === "ArrowRight" && !A ? (e.preventDefault(), z()) : e.key === "ArrowLeft" && A && (e.preventDefault(), j(!1));
+	}
+	if (!m(c)) return /* @__PURE__ */ o("span", {
+		"data-slot": "json-tree-value",
+		className: e("font-mono text-xs", h(c), C),
+		children: g(c)
+	});
+	let V = Array.isArray(c), H = V ? c.map((e, t) => [String(t), e]) : Object.entries(c), U = V ? `[${H.length}]` : `{${H.length}}`, W = Math.max(0, x - 1);
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "json-tree",
+		className: e("ml-1", C),
+		children: [
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				"aria-expanded": A,
+				"aria-controls": M ? I : void 0,
+				onClick: z,
+				onKeyDown: B,
+				className: d,
+				children: [
+					o(A ? n : r, { className: "size-3 shrink-0" }),
+					/* @__PURE__ */ o("span", {
+						"aria-hidden": "true",
+						className: "font-mono",
+						children: U
+					}),
+					/* @__PURE__ */ o("span", {
+						className: "sr-only",
+						children: T(v || E, H.length)
+					})
+				]
+			}),
+			M && /* @__PURE__ */ o("span", {
+				role: "status",
+				className: "sr-only",
+				children: P === null ? "" : D
+			}),
+			M && /* @__PURE__ */ s("ul", {
+				id: I,
+				hidden: !A,
+				className: "ml-3 flex flex-col gap-0.5 border-l border-border pl-2 [&[hidden]]:hidden",
+				children: [H.length === 0 && /* @__PURE__ */ o("li", {
+					className: "text-xs italic text-muted-foreground",
+					children: O
+				}), H.map(([n, r]) => {
+					let a = V ? `${v}[${n}]` : v ? `${v}.${n}` : n, c = V ? `[${n}]:` : `${n}:`;
+					return /* @__PURE__ */ s("li", {
+						className: "flex items-start gap-1",
+						children: [/* @__PURE__ */ o("span", {
+							className: e("shrink-0 pt-0.5 font-mono text-xs font-medium", V ? u : l),
+							children: c
+						}), m(r) ? /* @__PURE__ */ o(_, {
+							data: r,
+							path: a,
+							onSelect: y,
+							defaultExpandedDepth: W,
+							labels: S
+						}) : /* @__PURE__ */ s("span", {
+							className: "group flex min-w-0 items-center gap-1",
+							children: [/* @__PURE__ */ o("span", {
+								className: e("truncate font-mono text-xs", h(r)),
+								children: g(r)
+							}), y && /* @__PURE__ */ o("button", {
+								type: "button",
+								onClick: () => R(a, r),
+								"aria-label": w(a),
+								title: w(a),
+								className: f,
+								children: P === a ? /* @__PURE__ */ o(t, { className: "size-3 text-success" }) : /* @__PURE__ */ o(i, { className: "size-3 text-muted-foreground" })
+							})]
+						})]
+					}, n);
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { _ as JsonTree };
+
+//# sourceMappingURL=json-tree.js.map

package/dist/components/containment/json-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-tree.js","names":[],"sources":["../../../src/components/containment/json-tree.tsx"],"mappings":"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"}

package/dist/components/feedback/status-dot.d.ts

@@ -0,0 +1,49 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const statusDotVariants: (props?: ({
+    status?: "info" | "success" | "warning" | "danger" | "neutral" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    pulse?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface StatusDotProps extends Omit<React.ComponentProps<"span">, "children" | "color">, VariantProps<typeof statusDotVariants> {
+    /**
+     * Soft halo in the dot's own colour, colour-mixed to 50%. Purely
+     * decorative emphasis — it is never the only signal of anything.
+     */
+    glow?: boolean;
+    /**
+     * Text announced to assistive technology.
+     *
+     * Defaults to `null` — a DECORATIVE dot, `aria-hidden`, for the common case
+     * where the dot sits immediately beside text that already states the status
+     * ("● Running"). Announcing it there would produce "Running Running", and a
+     * bare unlabelled dot in the tree is worse than none.
+     *
+     * Pass a string for a STANDALONE dot that is the only carrier of the state
+     * (a header service indicator, a cell in a dense table). The dot then gets
+     * `role="status"` and an `sr-only` label, so the state is announced when it
+     * changes — which is also what keeps it clear of WCAG 1.4.1 (Use of Colour),
+     * since hue alone would otherwise be the entire message.
+     *
+     * There is deliberately no default label per status: "success" is not a
+     * sentence, and the real one ("Service running", "3 boards offline") is
+     * always the caller's to write.
+     */
+    label?: string | null;
+}
+/**
+ * Small coloured state indicator.
+ *
+ * Two supported shapes, and the `label` prop is what selects between them:
+ *
+ *   <StatusDot status="success" /> Running          decorative, aria-hidden
+ *   <StatusDot status="success" label="Running" />  standalone, role="status"
+ *
+ * `role="status"` is a polite live region: the label is announced when it
+ * changes, which is the right behaviour for a dot tracking a connection. For
+ * a dot describing something static (a legend swatch, a row that never
+ * updates in place) pass `role="img"` — props spread over the computed
+ * attributes, so the override lands.
+ */
+declare function StatusDot({ className, status, size, pulse, glow, label, style, ...props }: StatusDotProps): React.JSX.Element;
+export { StatusDot, statusDotVariants };

package/dist/components/feedback/status-dot.js

@@ -0,0 +1,58 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { cva as n } from "class-variance-authority";
+//#region src/components/feedback/status-dot.tsx
+var r = n("inline-block shrink-0 rounded-full align-middle transition-[background-color,box-shadow] duration-control", {
+	variants: {
+		status: {
+			success: "bg-success [--status-dot-color:var(--color-success)]",
+			warning: "bg-warning [--status-dot-color:var(--color-warning)]",
+			danger: "bg-destructive [--status-dot-color:var(--color-destructive)]",
+			info: "bg-info [--status-dot-color:var(--color-info)]",
+			neutral: "bg-muted-foreground [--status-dot-color:var(--color-muted-foreground)]"
+		},
+		size: {
+			sm: "size-1.5 [--status-dot-glow:4px]",
+			md: "size-2 [--status-dot-glow:6px]",
+			lg: "size-3 [--status-dot-glow:8px]"
+		},
+		pulse: {
+			true: "animate-pulse motion-reduce:animate-none",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		status: "neutral",
+		size: "md",
+		pulse: !1
+	}
+}), i = { boxShadow: "0 0 var(--status-dot-glow) color-mix(in oklch, var(--status-dot-color) 50%, transparent)" };
+function a({ className: n, status: a = "neutral", size: o = "md", pulse: s = !1, glow: c = !1, label: l = null, style: u, ...d }) {
+	let f = l == null;
+	return /* @__PURE__ */ t("span", {
+		"data-slot": "status-dot",
+		"data-status": a,
+		"data-size": o,
+		role: f ? void 0 : "status",
+		"aria-hidden": f || void 0,
+		className: e(r({
+			status: a,
+			size: o,
+			pulse: s
+		}), n),
+		style: c ? {
+			...i,
+			...u
+		} : u,
+		...d,
+		children: f ? null : /* @__PURE__ */ t("span", {
+			className: "sr-only",
+			children: l
+		})
+	});
+}
+//#endregion
+export { a as StatusDot, r as statusDotVariants };
+
+//# sourceMappingURL=status-dot.js.map

package/dist/components/feedback/status-dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-dot.js","names":[],"sources":["../../../src/components/feedback/status-dot.tsx"],"mappings":";;;;;AAkBA,IAAM,IAAoB,EACxB,6GACA;CACE,UAAU;EACR,QAAQ;GACN,SAAS;GACT,SAAS;GACT,QAAQ;GACR,MAAM;GACN,SAAS;EACX;EAIA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAOA,OAAO;GACL,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,OAAO;CACT;AACF,CACF,GAMM,IAAkC,EACtC,WAAW,2FACb;AA4CA,SAAS,EAAU,EACjB,cACA,YAAS,WACT,UAAO,MACP,WAAQ,IACR,UAAO,IACP,WAAQ,MACR,UACA,GAAG,KACc;CACjB,IAAM,IAAa,KAAS;CAC5B,OACE,kBAAC,QAAD;EACE,aAAU;EACV,eAAa;EACb,aAAW;EACX,MAAM,IAAa,KAAA,IAAY;EAC/B,eAAa,KAAc,KAAA;EAC3B,WAAW,EAAG,EAAkB;GAAE;GAAQ;GAAM;EAAM,CAAC,GAAG,CAAS;EAEnE,OAAO,IAAO;GAAE,GAAG;GAAY,GAAG;EAAM,IAAI;EAC5C,GAAI;EASH,UAAA,IAAa,OAAO,kBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAY,CAAA;CACxD,CAAA;AAEV"}

package/dist/components/forms/secret-input.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { type InputProps } from "./input";
+export interface SecretInputProps extends Omit<InputProps, "type"> {
+    /**
+     * Accessible name for the toggle while the secret is masked — i.e. the
+     * action the button performs. Defaults to English "Show"; apps that
+     * localize pass their own string (this package never depends on i18n).
+     */
+    showLabel?: string;
+    /** Accessible name for the toggle while the secret is revealed. Default "Hide". */
+    hideLabel?: string;
+    /** Initial visibility for the uncontrolled case. */
+    defaultVisible?: boolean;
+    /** Controlled visibility; pair with {@link SecretInputProps.onVisibleChange}. */
+    visible?: boolean;
+    /** Fired with the next visibility whenever the toggle is activated. */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Disables only the toggle, leaving the field editable. For write-only
+     * secrets the server returns a placeholder (`"***"`) rather than the value,
+     * so there is nothing to reveal — but the user may still type a new one.
+     */
+    revealDisabled?: boolean;
+    /** Classes for the relative wrapper (e.g. `flex-1` in a settings row). */
+    containerClassName?: string;
+}
+/**
+ * Password/token field with a reveal toggle.
+ *
+ * Composes {@link Input} rather than re-declaring a bordered control, so the
+ * field can never drift from the design system's control tokens, and mounts
+ * the toggle inside the field as a ghost icon {@link Button}.
+ *
+ * Value styling defaults to `font-mono` — secrets are keys and tokens, where
+ * character-level legibility matters — and is overridable through `className`.
+ */
+declare function SecretInput({ className, containerClassName, showLabel, hideLabel, defaultVisible, visible: visibleProp, onVisibleChange, revealDisabled, disabled, ref, ...props }: SecretInputProps): React.JSX.Element;
+export { SecretInput };

package/dist/components/forms/secret-input.js

@@ -0,0 +1,42 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "./button.js";
+import { Input as n } from "./input.js";
+import { Eye as r, EyeOff as i } from "lucide-react";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/forms/secret-input.tsx
+function c({ className: c, containerClassName: l, showLabel: u = "Show", hideLabel: d = "Hide", defaultVisible: f = !1, visible: p, onVisibleChange: m, revealDisabled: h = !1, disabled: g, ref: _, ...v }) {
+	let [y, b] = a.useState(f), x = p !== void 0, S = (x ? p : y) && !h, C = () => {
+		let e = !S;
+		x || b(e), m?.(e);
+	}, w = S ? i : r;
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "secret-input",
+		"data-visible": S ? "" : void 0,
+		className: e("relative w-full", l),
+		children: [/* @__PURE__ */ o(n, {
+			ref: _,
+			type: S ? "text" : "password",
+			disabled: g,
+			spellCheck: !1,
+			autoCapitalize: "none",
+			autoCorrect: "off",
+			className: e("pr-9 font-mono", c),
+			...v
+		}), /* @__PURE__ */ o(t, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			onClick: C,
+			disabled: g || h,
+			"aria-label": S ? d : u,
+			className: "absolute right-0.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+			children: /* @__PURE__ */ o(w, { "aria-hidden": "true" })
+		})]
+	});
+}
+//#endregion
+export { c as SecretInput };
+
+//# sourceMappingURL=secret-input.js.map

package/dist/components/forms/secret-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"secret-input.js","names":[],"sources":["../../../src/components/forms/secret-input.tsx"],"mappings":";;;;;;;;AA4CA,SAAS,EAAY,EACnB,cACA,uBACA,eAAY,QACZ,eAAY,QACZ,oBAAiB,IACjB,SAAS,GACT,oBACA,oBAAiB,IACjB,aACA,QACA,GAAG,KACgB;CACnB,IAAM,CAAC,GAAqB,KAA0B,EAAM,SAAS,CAAc,GAC7E,IAAe,MAAgB,KAAA,GAO/B,KANU,IAAe,IAAc,MAMP,CAAC,GAEjC,UAAqB;EACzB,IAAM,IAAO,CAAC;EAEd,AADK,KAAc,EAAuB,CAAI,GAC9C,IAAkB,CAAI;CACxB,GAEM,IAAO,IAAqB,IAAS;CAE3C,OACE,kBAAC,OAAD;EACE,aAAU;EACV,gBAAc,IAAqB,KAAK,KAAA;EACxC,WAAW,EAAG,mBAAmB,CAAkB;EAHrD,UAAA,CAKE,kBAAC,GAAD;GACO;GACL,MAAM,IAAqB,SAAS;GAC1B;GAIV,YAAY;GACZ,gBAAe;GACf,aAAY;GACZ,WAAW,EAAG,kBAAkB,CAAS;GACzC,GAAI;EACL,CAAA,GACD,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GAGL,SAAS;GACT,UAAU,KAAY;GAOtB,cAAY,IAAqB,IAAY;GAC7C,WAAU;GAEV,UAAA,kBAAC,GAAD,EAAM,eAAY,OAAQ,CAAA;EACpB,CAAA,CACL;;AAET"}

package/dist/components/forms/time-picker.d.ts

@@ -0,0 +1,87 @@
+import * as React from "react";
+type HourCycle = "12" | "24";
+export interface TimePickerPreset {
+    /** `HH:MM` value applied when the chip is activated. */
+    value: string;
+    /** Chip text. Defaults to the formatted `value`, so it follows `hourCycle`. */
+    label?: string;
+}
+/**
+ * Every user-visible string the picker renders on its own. All optional with
+ * English defaults — the package never resolves i18n, the app passes copy in.
+ */
+export interface TimePickerLabels {
+    /** Accessible name of the popover panel. Default `"Choose a time"`. */
+    panel?: string;
+    /** Heading above the hour listbox. Default `"Hour"`. */
+    hour?: string;
+    /** Heading above the minute listbox. Default `"Minute"`. */
+    minute?: string;
+    /** Heading above the preset chips. Default `"Quick presets"`. */
+    quickPresets?: string;
+    /** Morning period suffix in 12-hour display. Default `"AM"`. */
+    am?: string;
+    /** Afternoon period suffix in 12-hour display. Default `"PM"`. */
+    pm?: string;
+}
+export interface TimePickerProps {
+    /**
+     * Current time as `HH:MM` (24-hour), controlled. Empty string means "unset".
+     * Pair with {@link TimePickerProps.onValueChange}; omit both for the
+     * uncontrolled form seeded by `defaultValue`.
+     */
+    value?: string;
+    /** Initial `HH:MM` value (uncontrolled). Default `""` — unset. */
+    defaultValue?: string;
+    /** Fired with the new `HH:MM` value whenever an hour, minute, or preset is chosen. */
+    onValueChange?: (value: string) => void;
+    /** Trigger text while the value is empty. Default `"00:00"`. */
+    placeholder?: string;
+    /** Classes for the trigger button. */
+    className?: string;
+    /** Classes for the popover panel. */
+    contentClassName?: string;
+    disabled?: boolean;
+    /** Forwarded to the trigger so an external `<Label htmlFor>` can name it. */
+    id?: string;
+    /**
+     * Accessible name when no visible label is associated. Composed with the
+     * trigger's own value text rather than replacing it, so the name reads
+     * `"Start time 8:00 PM"` — a bare `aria-label` would override the content
+     * and stop announcing the very value the control exists to report.
+     */
+    "aria-label"?: string;
+    /**
+     * Id of an external label. It is composed with the trigger's own value text,
+     * so the accessible name stays `"Start time 8:00 PM"` rather than collapsing
+     * to `"Start time"` the way a bare `<Label htmlFor>` association would.
+     */
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+    /** Display format of the trigger and the hour list. Default `"12"`. */
+    hourCycle?: HourCycle;
+    /** Granularity of the minute list, in minutes. Default `5`. */
+    minuteStep?: number;
+    /** Preset chips. Pass `[]` to drop the section. Defaults to 8 AM / 12 PM / 6 PM / 8 PM / 12 AM. */
+    presets?: TimePickerPreset[];
+    labels?: TimePickerLabels;
+    /** Open the panel on first render (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Controlled open state; pair with `onOpenChange`. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    ref?: React.Ref<HTMLButtonElement>;
+}
+/**
+ * Time-of-day picker: a button showing the current time that opens a popover
+ * with an hour listbox, a minute listbox, and preset chips.
+ *
+ * Fully keyboard operable — Enter/Space on the trigger opens the panel and
+ * moves focus to the selected hour, Arrow/Home/End/PageUp/PageDown walk a
+ * list, Tab crosses to the minutes and the presets, Escape closes and returns
+ * focus to the trigger. Selection follows focus inside each list, so arrowing
+ * through hours updates `value` live the way a native `<select>` does.
+ */
+declare function TimePicker({ value: valueProp, defaultValue, onValueChange, placeholder, className, contentClassName, disabled, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, hourCycle, minuteStep, presets, labels, defaultOpen, open: openProp, onOpenChange, ref, }: TimePickerProps): React.JSX.Element;
+export { TimePicker };