@duskmoon-dev/components 0.3.1 → 0.4.0

package/dist/components/dm-tree/index.js

@@ -1,12 +1,7 @@
 "use client";
 
-// src/components/input/Input.tsx
-import {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useState
-} from "react";
+// src/components/dm-tree/DmTree.tsx
+import { useMemo as useMemo2, useState as useState5 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -33,6 +28,49 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
+// src/classes/dm-tree.ts
+var dmTreeBaseClass = "dm-tree";
+var dmTreeAutoWidthClass = "dm-tree-auto-width";
+var dmTreeContentClass = "dm-tree-content";
+var dmTreeToolbarClass = "dm-tree-toolbar";
+var dmTreeIconToolbarClass = "dm-tree-icon-toolbar";
+var dmTreeAllButtonClass = "dm-tree-all-button";
+var dmTreeAllButtonSelectedClass = "dm-tree-all-button-selected";
+var dmTreeSearchClass = "dm-tree-search";
+var dmTreeBodyClass = "dm-tree-body";
+var dmTreeNodeTitleClass = "dm-tree-node-title";
+var dmTreeNodePrefixClass = "dm-tree-node-prefix";
+var dmTreeItemToolbarClass = "dm-tree-item-toolbar";
+var dmTreeItemToolbarVisibleClass = "dm-tree-item-toolbar-visible";
+var dmTreeOptionClass = "dm-tree-option";
+function getDmTreeClasses({
+  autoWidth,
+  optionTree,
+  className
+}) {
+  return cn(dmTreeBaseClass, autoWidth && dmTreeAutoWidthClass, optionTree && dmTreeOptionClass, className);
+}
+function getDmTreeAllButtonClasses({
+  selected,
+  className
+}) {
+  return cn(dmTreeAllButtonClass, selected && dmTreeAllButtonSelectedClass, className);
+}
+function getDmTreeItemToolbarClasses({
+  alwaysShow,
+  className
+}) {
+  return cn(dmTreeItemToolbarClass, alwaysShow && dmTreeItemToolbarVisibleClass, className);
+}
+
+// src/components/input/Input.tsx
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+
 // src/classes/input.ts
 var inputBaseClass = "input";
 var inputWrapperClass = "input-wrapper";
@@ -343,6 +381,27 @@ var Input = Object.assign(InputRoot, {
   TextArea,
   Group
 });
+// src/components/dm-status/DmStatus.tsx
+import { forwardRef as forwardRef4 } from "react";
+
+// src/classes/dm-status.ts
+var dmStatusBaseClass = "dm-status";
+var dmStatusLoadingClass = "dm-status-loading";
+var dmStatusContentClass = "dm-status-content";
+var dmStatusImageClass = "dm-status-image";
+var dmStatusTypeClasses = {
+  empty: "dm-status-empty",
+  loading: "dm-status-loading-state",
+  error: "dm-status-error",
+  success: "dm-status-success"
+};
+function getDmStatusClasses({
+  status,
+  className
+}) {
+  return cn(dmStatusBaseClass, dmStatusTypeClasses[status], className);
+}
+
 // src/components/empty/Empty.tsx
 import { forwardRef as forwardRef2 } from "react";
 
@@ -469,8 +528,8 @@ function useDelayedSpinning(spinning, delay) {
       return;
     }
     if (!spinning) {
-      const resetTimer2 = window.setTimeout(() => setDelayedActive(false), 0);
-      return () => window.clearTimeout(resetTimer2);
+      const resetTimer = window.setTimeout(() => setDelayedActive(false), 0);
+      return () => window.clearTimeout(resetTimer);
     }
     const resetTimer = window.setTimeout(() => setDelayedActive(false), 0);
     const showTimer = window.setTimeout(() => setDelayedActive(true), delay);
@@ -537,27 +596,6 @@ var SpinBase = forwardRef3(({
 SpinBase.displayName = "Spin";
 var Spin = SpinBase;
 Spin.setDefaultIndicator = setDefaultIndicator;
-// src/components/dm-status/DmStatus.tsx
-import { forwardRef as forwardRef4 } from "react";
-
-// src/classes/dm-status.ts
-var dmStatusBaseClass = "dm-status";
-var dmStatusLoadingClass = "dm-status-loading";
-var dmStatusContentClass = "dm-status-content";
-var dmStatusImageClass = "dm-status-image";
-var dmStatusTypeClasses = {
-  empty: "dm-status-empty",
-  loading: "dm-status-loading-state",
-  error: "dm-status-error",
-  success: "dm-status-success"
-};
-function getDmStatusClasses({
-  status,
-  className
-}) {
-  return cn(dmStatusBaseClass, dmStatusTypeClasses[status], className);
-}
-
 // src/components/dm-status/DmStatus.tsx
 import { jsx as jsx4, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
 var defaultDescriptions = {
@@ -682,6 +720,30 @@ var DmStatus = forwardRef4(({
   });
 });
 DmStatus.displayName = "DmStatus";
+// src/components/dm-tabs/DmTabs.tsx
+import { forwardRef as forwardRef6 } from "react";
+
+// src/classes/dm-tabs.ts
+var dmTabsShellClass = "dm-tabs-shell";
+var dmTabsLineHorizontalClass = "dm-line-horizontal-tabs";
+var dmTabsLineVerticalClass = "dm-line-vertical-tabs";
+var dmTabsCardClass = "dm-card-tabs";
+var dmTabsCardTransparentClass = "dm-card-transparent-tabs";
+var dmTabsOptionTreeClass = "dm-option-tree-tabs";
+function getDmTabsShellClasses({ className }) {
+  return cn(dmTabsShellClass, className);
+}
+function getDmTabsClasses({
+  type = "line",
+  tabPosition = "top",
+  transparentCard,
+  optionTree,
+  className
+}) {
+  const isVerticalLine = type === "line" && (tabPosition === "left" || tabPosition === "right");
+  return cn(type === "line" && (isVerticalLine ? dmTabsLineVerticalClass : dmTabsLineHorizontalClass), type !== "line" && (transparentCard ? dmTabsCardTransparentClass : dmTabsCardClass), optionTree && dmTabsOptionTreeClass, className);
+}
+
 // src/components/tabs/Tabs.tsx
 import {
   Children,
@@ -1010,30 +1072,6 @@ TabsBase.displayName = "Tabs";
 var Tabs = Object.assign(TabsBase, {
   TabPane
 });
-// src/components/dm-tabs/DmTabs.tsx
-import { forwardRef as forwardRef6 } from "react";
-
-// src/classes/dm-tabs.ts
-var dmTabsShellClass = "dm-tabs-shell";
-var dmTabsLineHorizontalClass = "dm-line-horizontal-tabs";
-var dmTabsLineVerticalClass = "dm-line-vertical-tabs";
-var dmTabsCardClass = "dm-card-tabs";
-var dmTabsCardTransparentClass = "dm-card-transparent-tabs";
-var dmTabsOptionTreeClass = "dm-option-tree-tabs";
-function getDmTabsShellClasses({ className }) {
-  return cn(dmTabsShellClass, className);
-}
-function getDmTabsClasses({
-  type = "line",
-  tabPosition = "top",
-  transparentCard,
-  optionTree,
-  className
-}) {
-  const isVerticalLine = type === "line" && (tabPosition === "left" || tabPosition === "right");
-  return cn(type === "line" && (isVerticalLine ? dmTabsLineVerticalClass : dmTabsLineHorizontalClass), type !== "line" && (transparentCard ? dmTabsCardTransparentClass : dmTabsCardClass), optionTree && dmTabsOptionTreeClass, className);
-}
-
 // src/components/dm-tabs/DmTabs.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 var DmTabs = forwardRef6(({
@@ -1476,44 +1514,6 @@ var Tree = TreeBase;
 Tree.TreeNode = TreeNodeComponent;
 Tree.DirectoryTree = DirectoryTree;
 Tree.displayName = "Tree";
-// src/components/dm-tree/DmTree.tsx
-import { useMemo as useMemo2, useState as useState5 } from "react";
-
-// src/classes/dm-tree.ts
-var dmTreeBaseClass = "dm-tree";
-var dmTreeAutoWidthClass = "dm-tree-auto-width";
-var dmTreeContentClass = "dm-tree-content";
-var dmTreeToolbarClass = "dm-tree-toolbar";
-var dmTreeIconToolbarClass = "dm-tree-icon-toolbar";
-var dmTreeAllButtonClass = "dm-tree-all-button";
-var dmTreeAllButtonSelectedClass = "dm-tree-all-button-selected";
-var dmTreeSearchClass = "dm-tree-search";
-var dmTreeBodyClass = "dm-tree-body";
-var dmTreeNodeTitleClass = "dm-tree-node-title";
-var dmTreeNodePrefixClass = "dm-tree-node-prefix";
-var dmTreeItemToolbarClass = "dm-tree-item-toolbar";
-var dmTreeItemToolbarVisibleClass = "dm-tree-item-toolbar-visible";
-var dmTreeOptionClass = "dm-tree-option";
-function getDmTreeClasses({
-  autoWidth,
-  optionTree,
-  className
-}) {
-  return cn(dmTreeBaseClass, autoWidth && dmTreeAutoWidthClass, optionTree && dmTreeOptionClass, className);
-}
-function getDmTreeAllButtonClasses({
-  selected,
-  className
-}) {
-  return cn(dmTreeAllButtonClass, selected && dmTreeAllButtonSelectedClass, className);
-}
-function getDmTreeItemToolbarClasses({
-  alwaysShow,
-  className
-}) {
-  return cn(dmTreeItemToolbarClass, alwaysShow && dmTreeItemToolbarVisibleClass, className);
-}
-
 // src/components/dm-tree/DmTree.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var defaultFieldNames = {

package/dist/components/dm-truncate/index.js

@@ -1,7 +1,15 @@
 "use client";
 
-// src/components/tooltip/Tooltip.tsx
-import { forwardRef, useState } from "react";
+// src/components/dm-truncate/DmTruncate.tsx
+import {
+  forwardRef as forwardRef2,
+  useCallback,
+  useEffect as useEffect2,
+  useLayoutEffect,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -28,11 +36,33 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
+// src/classes/dm-truncate.ts
+var dmTruncateBaseClass = "dm-truncate";
+var dmTruncateContentClass = "dm-truncate-content";
+var dmTruncateTextClass = "dm-truncate-text";
+var dmTruncateMultilineClass = "dm-truncate-multiline";
+var dmTruncateOverflowClass = "dm-truncate-overflow";
+var dmTruncateOverflowTagClass = "dm-truncate-overflow-tag";
+var dmTruncateCopyClass = "dm-truncate-copy";
+var dmTruncateMeasureClass = "dm-truncate-measure";
+function getDmTruncateClasses(className) {
+  return cn(dmTruncateBaseClass, className);
+}
+function getDmTruncateTextClasses({
+  multiline,
+  overflow,
+  className
+}) {
+  return cn(dmTruncateTextClass, multiline && dmTruncateMultilineClass, overflow && dmTruncateOverflowClass, className);
+}
+
+// src/components/tooltip/Tooltip.tsx
+import React, { forwardRef, useEffect, useId, useRef, useState } from "react";
+
 // src/classes/tooltip.ts
 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 +92,12 @@ var Tooltip = forwardRef(({
   placement = "top",
   open,
   defaultOpen,
+  onOpenChange,
   arrow = true,
   size = "md",
   className,
   children,
+  style,
   onBlur,
   onFocus,
   onMouseEnter,
@@ -75,90 +107,138 @@ 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
     ]
   });
 });
 Tooltip.displayName = "Tooltip";
-// src/components/dm-truncate/DmTruncate.tsx
-import {
-  forwardRef as forwardRef2,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState as useState2
-} from "react";
-
-// src/classes/dm-truncate.ts
-var dmTruncateBaseClass = "dm-truncate";
-var dmTruncateContentClass = "dm-truncate-content";
-var dmTruncateTextClass = "dm-truncate-text";
-var dmTruncateMultilineClass = "dm-truncate-multiline";
-var dmTruncateOverflowClass = "dm-truncate-overflow";
-var dmTruncateOverflowTagClass = "dm-truncate-overflow-tag";
-var dmTruncateCopyClass = "dm-truncate-copy";
-var dmTruncateMeasureClass = "dm-truncate-measure";
-function getDmTruncateClasses(className) {
-  return cn(dmTruncateBaseClass, className);
-}
-function getDmTruncateTextClasses({
-  multiline,
-  overflow,
-  className
-}) {
-  return cn(dmTruncateTextClass, multiline && dmTruncateMultilineClass, overflow && dmTruncateOverflowClass, className);
-}
-
 // src/components/dm-truncate/DmTruncate.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function toPlainText(value) {
@@ -217,10 +297,10 @@ var DmTruncate = forwardRef2(({
   onCopy,
   ...props
 }, ref) => {
-  const wrapperRef = useRef(null);
-  const textRef = useRef(null);
-  const measureRef = useRef(null);
-  const copyTimerRef = useRef(null);
+  const wrapperRef = useRef2(null);
+  const textRef = useRef2(null);
+  const measureRef = useRef2(null);
+  const copyTimerRef = useRef2(null);
   const [overflow, setOverflow] = useState2(false);
   const [copied, setCopied] = useState2(false);
   const textValue = toPlainText(children);
@@ -276,14 +356,14 @@ var DmTruncate = forwardRef2(({
   useLayoutEffect(() => {
     measure();
   }, [measure, textValue]);
-  useEffect(() => {
+  useEffect2(() => {
     if (typeof window === "undefined") {
       return;
     }
     window.addEventListener("resize", measure);
     return () => window.removeEventListener("resize", measure);
   }, [measure]);
-  useEffect(() => {
+  useEffect2(() => {
     return () => {
       if (copyTimerRef.current) {
         window.clearTimeout(copyTimerRef.current);

package/dist/components/dropdown/Dropdown.types.d.ts

@@ -34,7 +34,7 @@ export interface DropdownProps extends Omit<ComponentProps<"span">, "menu"> {
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-export type DropdownButtonProps = Omit<DropdownProps, "children" | "onClick" | keyof ButtonProps> & Omit<ButtonProps, "children" | "onClick"> & {
+export type DropdownButtonProps = Omit<DropdownProps, "children" | "onClick" | keyof ButtonProps> & Omit<ButtonProps, "children" | "onClick" | "ref"> & {
     buttonsRender?: (buttons: ReactNode[]) => ReactNode[];
     children?: ReactNode;
     onClick?: ButtonProps["onClick"];