@duskmoon-dev/components 0.3.3 → 0.4.0

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

@@ -1,7 +1,77 @@
 "use client";
 
 // src/components/time-picker/TimePicker.tsx
-import { forwardRef, useState } from "react";
+import { forwardRef, useState as useState2 } from "react";
+
+// src/components/date-picker/usePickerDropdown.ts
+import { useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+function usePickerDropdown({
+  open,
+  defaultOpen,
+  disabled,
+  onOpenChange,
+  ref
+}) {
+  const rootRef = useRef(null);
+  const inputRef = useRef(null);
+  const skipFocus = useRef(false);
+  const panelId = useId();
+  const [innerOpen, setInnerOpen] = useState(Boolean(defaultOpen));
+  const visible = !disabled && (open ?? innerOpen);
+  useImperativeHandle(ref, () => rootRef.current, []);
+  function setVisible(next) {
+    if (disabled || next === visible)
+      return;
+    if (open === undefined)
+      setInnerOpen(next);
+    onOpenChange?.(next);
+  }
+  function closeAndFocus() {
+    skipFocus.current = true;
+    inputRef.current?.focus();
+    skipFocus.current = false;
+    setVisible(false);
+  }
+  useEffect(() => {
+    function handleOutside(event) {
+      if (visible && !rootRef.current?.contains(event.target))
+        setVisible(false);
+    }
+    function handleKeyDown(event) {
+      if (event.defaultPrevented || !rootRef.current?.contains(event.target))
+        return;
+      if (event.key === "Escape" && visible) {
+        event.preventDefault();
+        closeAndFocus();
+      } else if (event.key === "ArrowDown" && event.target === inputRef.current) {
+        event.preventDefault();
+        setVisible(true);
+      }
+    }
+    document.addEventListener("pointerdown", handleOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handleOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+  return {
+    rootRef,
+    inputRef,
+    panelId,
+    visible,
+    setVisible,
+    closeAndFocus,
+    onInputFocus: () => {
+      if (!skipFocus.current)
+        setVisible(true);
+    },
+    onRootBlur: (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget))
+        setVisible(false);
+    }
+  };
+}
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -113,10 +183,11 @@ function formatParts(parts, format, use12Hours) {
 }
 function displayValue(value, format, use12Hours) {
   const parts = valueToParts(value);
-  return parts ? formatParts(parts, format, use12Hours) : "";
+  return parts ? formatParts(parts, format, use12Hours) : typeof value === "string" ? value : "";
 }
 function normalizedTimeString(value, format, use12Hours) {
-  return displayValue(value, format, use12Hours);
+  const parts = valueToParts(value);
+  return parts ? formatParts(parts, format, use12Hours) : "";
 }
 function isDisabledTime(value, props) {
   if (!value || !props.disabledTime) {
@@ -136,6 +207,7 @@ function nowValue() {
 var TimePickerRoot = forwardRef(({
   allowClear,
   className,
+  inputProps,
   defaultOpen,
   defaultValue,
   disabled,
@@ -156,16 +228,23 @@ var TimePickerRoot = forwardRef(({
 }, ref) => {
   const timeFormat = format ?? (use12Hours ? "h:mm:ss A" : "HH:mm:ss");
   const isValueControlled = value !== undefined;
-  const isOpenControlled = open !== undefined;
-  const [innerValue, setInnerValue] = useState(defaultValue);
-  const [innerOpen, setInnerOpen] = useState(Boolean(defaultOpen));
+  const [innerValue, setInnerValue] = useState2(defaultValue);
+  const dropdown = usePickerDropdown({
+    open,
+    defaultOpen,
+    disabled,
+    onOpenChange,
+    ref
+  });
   const currentValue = isValueControlled ? value : innerValue;
-  const visible = isOpenControlled ? Boolean(open) : innerOpen;
-  function setVisible(nextOpen) {
-    if (!isOpenControlled) {
-      setInnerOpen(nextOpen);
-    }
-    onOpenChange?.(nextOpen);
+  const { visible, setVisible } = dropdown;
+  const parts = valueToParts(currentValue) ?? {
+    hour: 0,
+    minute: 0,
+    second: 0
+  };
+  function columnValue(part, value) {
+    return formatParts({ ...parts, [part]: value }, "HH:mm:ss");
   }
   function emitChange(nextValue) {
     if (isDisabledTime(nextValue, { disabledTime, use12Hours })) {
@@ -178,7 +257,8 @@ var TimePickerRoot = forwardRef(({
   }
   return /* @__PURE__ */ jsxs("div", {
     ...props,
-    ref,
+    ref: dropdown.rootRef,
+    onBlur: dropdown.onRootBlur,
     className: getTimePickerClasses({
       size,
       status,
@@ -188,18 +268,23 @@ var TimePickerRoot = forwardRef(({
     }),
     children: [
       /* @__PURE__ */ jsx("input", {
+        ...inputProps,
+        ref: dropdown.inputRef,
+        "aria-haspopup": "dialog",
+        "aria-controls": visible ? dropdown.panelId : undefined,
+        type: "text",
         className: timePickerInputClass,
         disabled,
         value: displayValue(currentValue, timeFormat, use12Hours),
         placeholder,
         onFocus: (event) => {
           onFocus?.(event);
-          setVisible(true);
+          dropdown.onInputFocus();
         },
         onBlur: (event) => {
           onBlur?.(event);
-          setVisible(false);
         },
+        onClick: () => setVisible(true),
         onChange: (event) => emitChange(event.currentTarget.value || undefined)
       }),
       allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx("button", {
@@ -210,23 +295,70 @@ var TimePickerRoot = forwardRef(({
         onClick: () => emitChange(undefined),
         children: "x"
       }) : null,
-      /* @__PURE__ */ jsx("span", {
+      /* @__PURE__ */ jsx("button", {
+        type: "button",
         className: timePickerIconClass,
-        "aria-hidden": "true",
-        children: "clock"
+        "aria-label": "Open time picker",
+        "aria-haspopup": "dialog",
+        "aria-expanded": visible,
+        "aria-controls": visible ? dropdown.panelId : undefined,
+        disabled,
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => setVisible(!visible)
       }),
-      showNow && visible ? /* @__PURE__ */ jsx("div", {
+      visible ? /* @__PURE__ */ jsxs("div", {
+        id: dropdown.panelId,
+        role: "dialog",
+        "aria-label": "Choose time",
         className: getTimePickerPanelClasses({ open: visible }),
-        children: /* @__PURE__ */ jsx("div", {
-          className: timePickerFooterClass,
-          children: /* @__PURE__ */ jsx("button", {
-            type: "button",
-            className: timePickerNowClass,
-            onMouseDown: (event) => event.preventDefault(),
-            onClick: () => emitChange(nowValue()),
-            children: "Now"
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: "time-picker-columns",
+            children: ["hour", "minute", "second"].filter((part) => part === "hour" || timeFormat.includes(part === "minute" ? "m" : "s")).map((part) => /* @__PURE__ */ jsx("div", {
+              className: "time-picker-column",
+              role: "listbox",
+              "aria-label": `${part[0].toUpperCase()}${part.slice(1)}s`,
+              children: Array.from({ length: part === "hour" ? 24 : 60 }, (_, option) => /* @__PURE__ */ jsx("button", {
+                type: "button",
+                role: "option",
+                className: "time-picker-option",
+                "aria-label": `${part[0].toUpperCase()}${part.slice(1)} ${padTimePart(option)}`,
+                "aria-selected": parts[part] === option,
+                disabled: isDisabledTime(columnValue(part, option), {
+                  disabledTime,
+                  use12Hours
+                }),
+                onClick: () => emitChange(columnValue(part, option)),
+                children: part === "hour" && use12Hours ? `${option % 12 || 12} ${option < 12 ? "AM" : "PM"}` : padTimePart(option)
+              }, option))
+            }, part))
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: timePickerFooterClass,
+            children: [
+              showNow ? /* @__PURE__ */ jsx("button", {
+                type: "button",
+                className: timePickerNowClass,
+                disabled: isDisabledTime(nowValue(), {
+                  disabledTime,
+                  use12Hours
+                }),
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => {
+                  emitChange(nowValue());
+                  dropdown.closeAndFocus();
+                },
+                children: "Now"
+              }) : null,
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                className: "time-picker-confirm",
+                onClick: dropdown.closeAndFocus,
+                children: "Done"
+              })
+            ]
           })
-        })
+        ]
       }) : null
     ]
   });
@@ -235,6 +367,7 @@ TimePickerRoot.displayName = "TimePicker";
 var RangePicker = forwardRef(({
   allowClear,
   className,
+  inputProps,
   defaultValue,
   disabled,
   disabledTime,
@@ -251,7 +384,7 @@ var RangePicker = forwardRef(({
 }, ref) => {
   const timeFormat = format ?? (use12Hours ? "h:mm:ss A" : "HH:mm:ss");
   const isControlled = value !== undefined;
-  const [innerValue, setInnerValue] = useState(defaultValue ?? [undefined, undefined]);
+  const [innerValue, setInnerValue] = useState2(defaultValue ?? [undefined, undefined]);
   const currentValue = isControlled ? value : innerValue;
   function emitChange(nextValue) {
     if (nextValue.some((item) => isDisabledTime(item, { disabledTime, use12Hours }))) {
@@ -280,6 +413,8 @@ var RangePicker = forwardRef(({
     }),
     children: [
       /* @__PURE__ */ jsx("input", {
+        ...inputProps,
+        type: "text",
         className: timePickerInputClass,
         disabled,
         value: displayValue(currentValue?.[0], timeFormat, use12Hours),
@@ -291,6 +426,9 @@ var RangePicker = forwardRef(({
         children: separator
       }),
       /* @__PURE__ */ jsx("input", {
+        ...inputProps,
+        id: inputProps?.id ? `${inputProps.id}-end` : undefined,
+        type: "text",
         className: timePickerInputClass,
         disabled,
         value: displayValue(currentValue?.[1], timeFormat, use12Hours),

package/dist/components/tooltip/Tooltip.types.d.ts

@@ -6,6 +6,10 @@ export interface TooltipProps extends Omit<ComponentProps<"span">, "title"> {
     placement?: TooltipPlacement;
     open?: boolean;
     defaultOpen?: boolean;
+    /** Called when hover, focus, or dismissal requests a visibility change.
+     * Controlled tooltips use manual popovers and stay open until `open` changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** @deprecated Native tooltips follow Core's arrowless automatic placement. */
     arrow?: boolean;
     size?: TooltipSize;
     children: ReactNode;

package/dist/components/tooltip/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/tooltip/Tooltip.tsx
-import { forwardRef, useState } from "react";
+import React, { forwardRef, useEffect, useId, useRef, useState } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -32,7 +32,6 @@ function cn(...inputs) {
 var tooltipWrapperClass = "tooltip-wrapper";
 var tooltipBaseClass = "tooltip";
 var tooltipShowClass = "tooltip-show";
-var tooltipArrowClass = "tooltip-arrow";
 var tooltipNoArrowClass = "tooltip-no-arrow";
 var tooltipPlacementClasses = {
   top: "tooltip-top",
@@ -62,10 +61,12 @@ var Tooltip = forwardRef(({
   placement = "top",
   open,
   defaultOpen,
+  onOpenChange,
   arrow = true,
   size = "md",
   className,
   children,
+  style,
   onBlur,
   onFocus,
   onMouseEnter,
@@ -75,54 +76,133 @@ var Tooltip = forwardRef(({
   const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
   const isControlled = open !== undefined;
   const visible = isControlled ? open : internalOpen;
-  const tooltipId = props.id !== undefined ? `${props.id}-tooltip` : undefined;
+  const reactId = useId();
+  const tooltipId = props.id !== undefined ? `${props.id}-tooltip` : `${reactId}-tooltip`;
+  const anchor = `--tooltip-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const surfaceRef = useRef(null);
+  const hoveredRef = useRef(false);
+  const focusedRef = useRef(false);
+  const interactionOpenRef = useRef(false);
+  const visibleRef = useRef(visible);
+  const controlledRef = useRef(isControlled);
+  const onOpenChangeRef = useRef(onOpenChange);
+  visibleRef.current = visible;
+  controlledRef.current = isControlled;
+  onOpenChangeRef.current = onOpenChange;
+  const hasTitle = Boolean(title);
+  useEffect(() => {
+    const surface = surfaceRef.current;
+    if (!surface)
+      return;
+    const tooltipSurface = surface;
+    function handleToggle(event) {
+      if (event.newState !== "closed" || !visibleRef.current || isControlled || isControlled !== controlledRef.current || tooltipSurface.matches(":popover-open")) {
+        return;
+      }
+      hoveredRef.current = false;
+      focusedRef.current = false;
+      interactionOpenRef.current = false;
+      onOpenChangeRef.current?.(false);
+      setInternalOpen(false);
+    }
+    surface.addEventListener("toggle", handleToggle);
+    return () => surface.removeEventListener("toggle", handleToggle);
+  }, [hasTitle, isControlled]);
+  useEffect(() => {
+    const surface = surfaceRef.current;
+    if (!surface)
+      return;
+    if (visible && !surface.matches(":popover-open")) {
+      surface.showPopover();
+    } else if (!visible && surface.matches(":popover-open")) {
+      surface.hidePopover();
+    }
+  }, [visible, hasTitle, isControlled]);
+  useEffect(() => {
+    if (!isControlled || !visible || !hasTitle)
+      return;
+    const wrapper = surfaceRef.current?.parentElement;
+    if (!wrapper)
+      return;
+    const tooltipWrapper = wrapper;
+    function requestDismiss() {
+      hoveredRef.current = false;
+      focusedRef.current = false;
+      interactionOpenRef.current = false;
+      onOpenChangeRef.current?.(false);
+    }
+    function handlePointerDown(event) {
+      if (!tooltipWrapper.contains(event.target))
+        requestDismiss();
+    }
+    function handleKeyDown(event) {
+      if (event.key === "Escape")
+        requestDismiss();
+    }
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [isControlled, visible, hasTitle]);
+  function updateInteraction() {
+    const next = hoveredRef.current || focusedRef.current;
+    if (next === interactionOpenRef.current)
+      return;
+    interactionOpenRef.current = next;
+    onOpenChange?.(next);
+    if (!isControlled)
+      setInternalOpen(next);
+  }
   function showTooltip(event) {
     onMouseEnter?.(event);
-    if (!isControlled)
-      setInternalOpen(true);
+    hoveredRef.current = true;
+    updateInteraction();
   }
   function hideTooltip(event) {
     onMouseLeave?.(event);
-    if (!isControlled)
-      setInternalOpen(false);
+    hoveredRef.current = false;
+    updateInteraction();
   }
   function focusTooltip(event) {
     onFocus?.(event);
-    if (!isControlled)
-      setInternalOpen(true);
+    focusedRef.current = true;
+    updateInteraction();
   }
   function blurTooltip(event) {
     onBlur?.(event);
-    if (!isControlled)
-      setInternalOpen(false);
+    if (event.currentTarget.contains(event.relatedTarget))
+      return;
+    focusedRef.current = false;
+    updateInteraction();
+  }
+  let trigger = children;
+  if (hasTitle && React.isValidElement(children) && children.type !== React.Fragment) {
+    trigger = React.cloneElement(children, {
+      "aria-describedby": [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ")
+    });
   }
   return /* @__PURE__ */ jsxs("span", {
     ...props,
     ref,
     className: tooltipWrapperClass,
-    "aria-describedby": visible && title ? tooltipId : undefined,
+    style: { ...style, anchorName: anchor },
+    "aria-describedby": hasTitle && trigger === children ? [props["aria-describedby"], tooltipId].filter(Boolean).join(" ") : props["aria-describedby"],
     onMouseEnter: showTooltip,
     onMouseLeave: hideTooltip,
     onFocus: focusTooltip,
     onBlur: blurTooltip,
     children: [
-      children,
-      title ? /* @__PURE__ */ jsxs("span", {
+      trigger,
+      hasTitle ? /* @__PURE__ */ jsx("span", {
+        ref: surfaceRef,
         id: tooltipId,
         role: "tooltip",
-        className: getTooltipClasses({
-          placement,
-          size,
-          open: visible,
-          arrow,
-          className
-        }),
-        children: [
-          title,
-          arrow ? /* @__PURE__ */ jsx("span", {
-            className: tooltipArrowClass
-          }) : null
-        ]
+        popover: isControlled ? "manual" : "hint",
+        style: { positionAnchor: anchor },
+        className: getTooltipClasses({ placement, size, arrow, className }),
+        children: title
       }) : null
     ]
   });