fancy-ui-react 0.2.0

package/dist/components/thinking-indicator/ThinkingIndicator.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useElapsed, formatElapsed } from "../../internals/use-elapsed.js";
+/* empty css                       */
+const ThinkingIndicator = forwardRef(
+  function ThinkingIndicator2({ status, running = true, variant = "inline", since, elapsedMs, showElapsed = true, done, className }, ref) {
+    const elapsed = useElapsed();
+    const { start } = elapsed;
+    useEffect(() => {
+      if (running && since !== void 0 && elapsedMs === void 0) return start(since);
+    }, [running, since, elapsedMs, start]);
+    const hasElapsed = elapsedMs !== void 0 || since !== void 0;
+    const effectiveMs = elapsedMs ?? elapsed.ms;
+    const elapsedText = formatElapsed(effectiveMs);
+    const elapsedDateTime = `PT${Math.max(0, Math.floor(effectiveMs / 1e3))}S`;
+    const showDone = !running && done !== void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "ft-thinking inline-flex items-center gap-2 text-sm",
+          variant === "pill" && "ft-thinking-pill bg-background/60 rounded-full border px-3 py-1",
+          className
+        ),
+        role: "status",
+        "aria-live": "polite",
+        children: [
+          variant === "pill" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("ft-thinking-dot", running && "ft-thinking-dot-live"),
+              "aria-hidden": "true"
+            }
+          ),
+          showDone ? /* @__PURE__ */ jsx("span", { className: "ft-thinking-done text-muted-foreground", children: done }) : /* @__PURE__ */ jsx("span", { className: cn("ft-thinking-label text-foreground", running && "ft-thinking-shimmer"), children: status }),
+          showElapsed && hasElapsed && /*
+          	While the timer ticks it is hidden from assistive tech: inside a polite
+          	live region a visible second counter would otherwise be announced once
+          	per second. It becomes readable again the moment the activity stops.
+          */
+          /* @__PURE__ */ jsx(
+            "time",
+            {
+              className: "ft-thinking-elapsed text-muted-foreground tabular-nums",
+              dateTime: elapsedDateTime,
+              "aria-hidden": running ? "true" : void 0,
+              children: elapsedText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  ThinkingIndicator
+};

package/dist/components/thinking-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export { ThinkingIndicator } from "./ThinkingIndicator.js";
+export type { ThinkingIndicatorProps } from "./ThinkingIndicator.js";

package/dist/components/thread-list/ThreadList.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+import type { ThreadData } from "../../internals/ai-types.js";
+/**
+ * Props for ThreadList
+ */
+export interface ThreadListProps {
+    /** The conversations to list, in the order they should appear. */
+    threads: ThreadData[];
+    /**
+     * Id of the selected conversation. Passing it makes the selection
+     * controlled — the React counterpart of the Svelte source's `$bindable`;
+     * omit it entirely to let the list own its own selection and report every
+     * pick through `onSelect`.
+     */
+    activeId?: string;
+    /** Called with the conversation the reader picked. The highlight moves either way. */
+    onSelect?: (thread: ThreadData) => void;
+    /** Supplying it puts a delete button on every row, revealed on hover or focus. */
+    onDelete?: (thread: ThreadData) => void;
+    /** Accessible name for the list. */
+    label?: string;
+    /** Replaces the built-in row body. Receives the thread and whether it is the active one. */
+    item?: (thread: ThreadData, active: boolean) => ReactNode;
+    /** Replaces the built-in "no conversations yet" line. */
+    empty?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays select when a different conversation is picked and press when
+     * one is deleted, through the sound controller. Off by default; only
+     * audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * ThreadList renders a sidebar of conversations: title, preview, unread dot
+ * and a relative timestamp per row, refreshed by one shared clock for the
+ * whole list rather than one interval per row. Nothing ticks under SSR — the
+ * clock only starts once the list is mounted.
+ *
+ * The root element arrives through the ref channel (the Svelte source
+ * declares `ref = $bindable(null)`).
+ */
+export declare const ThreadList: import("react").ForwardRefExoticComponent<ThreadListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/thread-list/ThreadList.js

@@ -0,0 +1,178 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { cn } from "../../utils.js";
+import { useNow } from "../../internals/use-elapsed.js";
+import { formatRelativeTime } from "../../internals/relative-time.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                */
+const REFRESH_MS = 3e4;
+function timeAttrs(timestamp) {
+  const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+  if (!Number.isFinite(date.getTime())) return {};
+  const exact = date.toISOString();
+  return { dateTime: exact, title: exact };
+}
+function keyedRows(threads) {
+  const ids = new Set(threads.map((thread) => thread.id));
+  const seen = /* @__PURE__ */ new Map();
+  const used = /* @__PURE__ */ new Set();
+  return threads.map((thread) => {
+    const seenBefore = seen.get(thread.id) ?? 0;
+    seen.set(thread.id, seenBefore + 1);
+    let key = thread.id;
+    if (seenBefore > 0) {
+      let suffix = seenBefore;
+      do {
+        key = `${thread.id}#${suffix}`;
+        suffix++;
+      } while (ids.has(key) || used.has(key));
+    }
+    used.add(key);
+    return { thread, key };
+  });
+}
+const ThreadList = forwardRef(function ThreadList2({
+  threads,
+  activeId: activeIdProp,
+  onSelect,
+  onDelete,
+  label = "Conversations",
+  item,
+  empty,
+  className,
+  sound = false
+}, ref) {
+  const [uncontrolledActiveId, setUncontrolledActiveId] = useState(void 0);
+  const isControlled = activeIdProp !== void 0;
+  const activeId = isControlled ? activeIdProp : uncontrolledActiveId;
+  const now = useNow(REFRESH_MS);
+  const playCue = useSoundCue(sound);
+  function select(thread) {
+    if (thread.id !== activeId) playCue("select");
+    if (!isControlled) setUncontrolledActiveId(thread.id);
+    onSelect?.(thread);
+  }
+  function remove(event, thread) {
+    event.stopPropagation();
+    playCue("press");
+    onDelete?.(thread);
+  }
+  function relative(timestamp) {
+    return formatRelativeTime(timestamp, { now });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "ft-threadlist w-full text-sm",
+        onDelete !== void 0 && "ft-threadlist-deletable",
+        className
+      ),
+      children: threads.length === 0 ? empty ?? /* @__PURE__ */ jsx("p", { className: "ft-threadlist-empty text-muted-foreground px-2 py-6 text-center text-xs", children: "No conversations yet" }) : (
+        /*
+         * `role="list"` is stated rather than left implicit: `list-style: none`
+         * strips list semantics in Safari, and how many conversations there are
+         * is half of what this list says.
+         */
+        /* @__PURE__ */ jsx("ul", { className: "ft-threadlist-list", role: "list", "aria-label": label, children: keyedRows(threads).map(({ thread, key }) => {
+          const isActive = activeId !== void 0 && thread.id === activeId;
+          return /* @__PURE__ */ jsxs("li", { className: "ft-threadlist-row", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "ft-threadlist-button focus-visible:ring-ring hover:bg-muted/60 flex w-full items-start gap-2 rounded-md py-2 pl-2 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none",
+                  isActive && "ft-threadlist-active"
+                ),
+                "aria-current": isActive ? "true" : void 0,
+                onClick: () => select(thread),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "ft-threadlist-dot",
+                        thread.unread && "ft-threadlist-unread"
+                      ),
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  thread.unread ? (
+                    // The dot is colour alone, which says nothing out loud.
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Unread" })
+                  ) : null,
+                  item ? item(thread, isActive) : /* @__PURE__ */ jsxs("span", { className: "ft-threadlist-main min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-baseline gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "ft-threadlist-title truncate",
+                            thread.unread && "ft-threadlist-strong"
+                          ),
+                          title: thread.title,
+                          children: thread.title
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "time",
+                        {
+                          className: "ft-threadlist-time text-muted-foreground ml-auto shrink-0 text-xs tabular-nums",
+                          ...timeAttrs(thread.updatedAt),
+                          children: relative(thread.updatedAt)
+                        }
+                      )
+                    ] }),
+                    thread.preview ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "ft-threadlist-preview text-muted-foreground mt-0.5 block truncate text-xs",
+                        title: thread.preview,
+                        children: thread.preview
+                      }
+                    ) : null
+                  ] })
+                ]
+              }
+            ),
+            onDelete ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ft-threadlist-delete text-muted-foreground hover:text-foreground focus-visible:ring-ring grid size-7 place-items-center rounded-md focus-visible:ring-2 focus-visible:outline-none",
+                "aria-label": `Delete ${thread.title}`,
+                onClick: (event) => remove(event, thread),
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    className: "size-3.5",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+                      /* @__PURE__ */ jsx("path", { d: "M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" }),
+                      /* @__PURE__ */ jsx("path", { d: "M19 6v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6" }),
+                      /* @__PURE__ */ jsx("path", { d: "M10 11v6" }),
+                      /* @__PURE__ */ jsx("path", { d: "M14 11v6" })
+                    ]
+                  }
+                )
+              }
+            ) : null
+          ] }, key);
+        }) })
+      )
+    }
+  );
+});
+export {
+  ThreadList
+};

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

@@ -0,0 +1,2 @@
+export { ThreadList } from "./ThreadList.js";
+export type { ThreadListProps } from "./ThreadList.js";

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

@@ -0,0 +1,44 @@
+export interface TimePickerProps {
+    /** The selected time, or `null` for none. Always "HH:mm", 24-hour — see the README. */
+    value?: string | null;
+    /** Called with the new value whenever a slot is picked. */
+    onValueChange?: (value: string | null) => void;
+    /** Minutes between generated slots. Defaults to 30. See the README for what happens when it doesn't divide the hour evenly. */
+    step?: number;
+    /** Earliest selectable slot ("HH:mm", inclusive). */
+    min?: string;
+    /** Latest selectable slot ("HH:mm", inclusive). */
+    max?: string;
+    /** Display only — the trigger and slot labels use a 12-hour clock with AM/PM when true. The value stays "HH:mm" either way. */
+    hour12?: boolean;
+    /** Blocks opening the panel; excluded from form submission. Overridden by a surrounding FormField. */
+    disabled?: boolean;
+    /** Marks the field required for the surrounding form. Overridden by a surrounding FormField. */
+    required?: boolean;
+    /** Drives the error border and `aria-invalid`. Overridden by a surrounding FormField. */
+    invalid?: boolean;
+    /** Element id. Overridden by a surrounding FormField's own `controlId`. */
+    id?: string;
+    /** Native `name` — when set, a hidden input carries the "HH:mm" value so the control participates in real form submission. */
+    name?: string;
+    /** Accessible name — for a control with no visible Label next to it. */
+    label?: string;
+    /** Shown in the trigger while no time is selected. */
+    placeholder?: string;
+    /** BCP 47 locale for slot and trigger-label formatting. Defaults to the runtime's own locale. */
+    locale?: string;
+    /** Additional CSS classes, merged onto the trigger button. */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * A combobox trigger plus a portalled listbox of "HH:mm" slots.
+ *
+ * `forwardRef` because the source declares `ref = $bindable(null)` on the
+ * trigger button — the exposed element is the `<button>`, not a wrapper.
+ */
+export declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,254 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState, useMemo, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useField } from "../../internals/field.js";
+import { useListbox } from "../../internals/listbox.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { filterByBounds, generateSlots, formatSlotLabel, nearestIndex } from "./time-utils.js";
+import { TimePickerPanel } from "./TimePickerPanel.js";
+import { TimePickerReactContext } from "./types.js";
+/* empty css                */
+const TimePicker = forwardRef(function TimePicker2({
+  value: valueProp,
+  onValueChange,
+  step = 30,
+  min,
+  max,
+  hour12 = false,
+  disabled = false,
+  required = false,
+  invalid = false,
+  id,
+  name,
+  label,
+  placeholder = "Select a time",
+  locale,
+  className,
+  sound = false
+}, forwardedRef) {
+  const field = useField();
+  const effectiveId = field?.controlId ?? id;
+  const effectiveDisabled = field?.disabled ?? disabled;
+  const effectiveRequired = field?.required ?? required;
+  const effectiveInvalid = field?.invalid ?? invalid;
+  const uid = useFancyId();
+  const panelId = `${uid}-listbox`;
+  const optionId = useCallback((index) => `${uid}-option-${index}`, [uid]);
+  const playCue = useSoundCue(sound);
+  const [open, setOpen] = useState(false);
+  const [triggerNode, setTriggerNode] = useElementRef();
+  const triggerRef = useComposedRefs(setTriggerNode, forwardedRef);
+  const [panelNode, setPanelNode] = useElementRef();
+  const [value, setValueState] = useState(valueProp ?? null);
+  const [lastValueProp, setLastValueProp] = useState(valueProp);
+  if (lastValueProp !== valueProp) {
+    setLastValueProp(valueProp);
+    setValueState(valueProp ?? null);
+  }
+  const slots = useMemo(
+    () => filterByBounds(generateSlots(step), min, max),
+    [step, min, max]
+  );
+  const selectedIndex = value ? slots.indexOf(value) : -1;
+  const labelCache = useMemo(() => /* @__PURE__ */ new Map(), [slots, hour12, locale]);
+  const labelFor = useCallback(
+    (slot) => {
+      const cached = labelCache.get(slot);
+      if (cached !== void 0) return cached;
+      const formatted = formatSlotLabel(slot, hour12, locale);
+      labelCache.set(slot, formatted);
+      return formatted;
+    },
+    [labelCache, hour12, locale]
+  );
+  function setValue(next) {
+    if (value === next) return false;
+    setValueState(next);
+    playCue("select");
+    onValueChange?.(next);
+    return true;
+  }
+  function commitIndex(index) {
+    const slot = slots[index];
+    if (!slot) return false;
+    return setValue(slot);
+  }
+  const scrollActiveIntoView = useEventCallback((index) => {
+    const row = panelNode?.querySelector(`#${CSS.escape(optionId(index))}`);
+    row?.scrollIntoView?.({ block: "nearest" });
+  });
+  const listbox = useListbox({
+    count: slots.length,
+    onActiveChange: scrollActiveIntoView
+  });
+  const listboxRef = useLiveRef(listbox);
+  const previousSlotsRef = useRef(slots);
+  useEffect(() => {
+    const previous = previousSlotsRef.current;
+    previousSlotsRef.current = slots;
+    if (previous === slots) return;
+    const box = listboxRef.current;
+    const index = box.activeIndex;
+    if (index === -1) return;
+    const activeSlot = previous[index];
+    box.setActive(activeSlot === void 0 ? -1 : nearestIndex(slots, activeSlot));
+  }, [listboxRef, slots]);
+  const pendingScrollRef = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    const index = pendingScrollRef.current;
+    if (index === null || !panelNode) return;
+    pendingScrollRef.current = null;
+    scrollActiveIntoView(index);
+  }, [panelNode, open, scrollActiveIntoView]);
+  function openPanel() {
+    if (effectiveDisabled) return;
+    setOpen(true);
+    playCue("open");
+    const index = nearestIndex(slots, value);
+    if (index === -1) return;
+    listbox.setActive(index);
+    pendingScrollRef.current = index;
+  }
+  function closePanel(reason = "dismiss") {
+    setOpen(false);
+    if (reason === "dismiss") playCue("close");
+  }
+  function commitActiveAndClose() {
+    const committed = listbox.activeIndex !== -1 && commitIndex(listbox.activeIndex);
+    closePanel(committed ? "commit" : "dismiss");
+  }
+  function handleTriggerClick() {
+    if (effectiveDisabled) return;
+    if (open) closePanel();
+    else openPanel();
+    triggerNode?.focus();
+  }
+  function handleTriggerKeydown(event) {
+    if (effectiveDisabled) return;
+    if (!open) {
+      switch (event.key) {
+        case "Enter":
+        case " ":
+        case "ArrowDown":
+        case "ArrowUp":
+          event.preventDefault();
+          openPanel();
+          return;
+        default:
+          return;
+      }
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        listbox.move(1);
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        listbox.move(-1);
+        return;
+      case "Home":
+        event.preventDefault();
+        listbox.moveToEdge("first");
+        return;
+      case "End":
+        event.preventDefault();
+        listbox.moveToEdge("last");
+        return;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        commitActiveAndClose();
+        return;
+    }
+  }
+  const contextSetActive = useEventCallback((index) => {
+    listbox.setActive(index);
+  });
+  const contextCommit = useEventCallback((index) => {
+    const committed = commitIndex(index);
+    triggerNode?.focus();
+    closePanel(committed ? "commit" : "dismiss");
+  });
+  const contextClose = useEventCallback(() => {
+    closePanel("dismiss");
+  });
+  const activeIndex = listbox.activeIndex;
+  const context = useMemo(
+    () => ({
+      open,
+      panelId,
+      slots,
+      activeIndex,
+      labelFor,
+      triggerRef: triggerNode,
+      optionId,
+      isSelected: (index) => index === selectedIndex,
+      isActive: (index) => index === activeIndex,
+      setActive: contextSetActive,
+      commit: contextCommit,
+      close: contextClose
+    }),
+    [
+      open,
+      panelId,
+      slots,
+      activeIndex,
+      labelFor,
+      triggerNode,
+      optionId,
+      selectedIndex,
+      contextSetActive,
+      contextCommit,
+      contextClose
+    ]
+  );
+  const triggerLabel = value ? labelFor(value) : void 0;
+  const classes = cn(
+    "ft-time-picker-trigger flex w-full items-center justify-between gap-2 rounded-[8px] border border-input bg-background px-[12px] py-[9px] text-left text-[13px] text-foreground transition-colors",
+    "focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    effectiveInvalid && "border-destructive/50",
+    className
+  );
+  return /* @__PURE__ */ jsxs(TimePickerReactContext.Provider, { value: context, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        id: effectiveId,
+        type: "button",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? panelId : void 0,
+        "aria-activedescendant": open && activeIndex !== -1 ? optionId(activeIndex) : void 0,
+        "aria-invalid": effectiveInvalid ? "true" : void 0,
+        "aria-required": effectiveRequired ? "true" : void 0,
+        "aria-describedby": field?.describedBy,
+        "aria-label": label,
+        disabled: effectiveDisabled,
+        className: classes,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeydown,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: triggerLabel ? void 0 : "text-muted-foreground", children: triggerLabel ?? placeholder }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "◷" })
+        ]
+      }
+    ),
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "", disabled: effectiveDisabled }) : null,
+    /* @__PURE__ */ jsx(TimePickerPanel, { ref: setPanelNode })
+  ] });
+});
+TimePicker.displayName = "TimePicker";
+export {
+  TimePicker
+};

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

@@ -0,0 +1,30 @@
+export interface TimePickerPanelProps {
+    /** Additional CSS classes, merged onto the panel. */
+    className?: string;
+}
+/**
+ * `TimePicker`'s portalled listbox of slots.
+ *
+ * No focus trap here, unlike a dialog surface — a listbox popup is not a
+ * dialog. Focus deliberately never leaves the trigger; the active row is only
+ * ever communicated through `aria-activedescendant` on the button above, which
+ * is why this panel carries `role="listbox"` and `role="option"` rows instead
+ * of a plain menu, and why nothing here ever calls `.focus()`.
+ *
+ * ONE bidirectional transition, never a split in/out pair: `usePresence` owns
+ * both directions on one clock, so a panel reopened mid-exit continues from
+ * where it is instead of snapping to invisible first. `entering` is what tells
+ * the transition which way it is going, and it arrives from the presence
+ * handle rather than being guessed from a direction the runtime reports as
+ * `"both"`.
+ *
+ * `TimePicker` renders this component unconditionally and the mount gate lives
+ * here — the React shape of the source's `{#if open}` one level up, which is
+ * also why `open` still has to arrive through the context. `data-state` is an
+ * ORDINARY attribute (divergence D-2): the source writes it imperatively from
+ * a transition event because its scheduler skips effects inside a closing
+ * branch, and React re-renders an exiting surface normally. `inert` is never
+ * written by hand either: `usePresence` sets it on the registered node for the
+ * whole exit, which is what stops a row taking a click on its way out.
+ */
+export declare const TimePickerPanel: import("react").ForwardRefExoticComponent<TimePickerPanelProps & import("react").RefAttributes<HTMLDivElement>>;