@duskmoon-dev/components 0.1.2

package/dist/components/dm-truncate/DmTruncate.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DmTruncateProps } from "./DmTruncate.types";
+export declare const DmTruncate: React.ForwardRefExoticComponent<DmTruncateProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/dm-truncate/DmTruncate.types.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties, ComponentPropsWithoutRef, ReactNode } from "react";
+import type { TooltipProps } from "../tooltip/Tooltip.types";
+export interface DmTruncateProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onCopy"> {
+    children?: ReactNode;
+    showOverflowTag?: boolean;
+    overflowContent?: ReactNode | ((value: string) => ReactNode);
+    emptyValue?: ReactNode;
+    overflowPercent?: number;
+    tooltipProps?: Partial<TooltipProps>;
+    isShowPopover?: boolean;
+    copyable?: boolean;
+    maxLines?: number;
+    tooltipPreserveLineBreak?: boolean;
+    textClassName?: string;
+    textStyle?: CSSProperties;
+    onCopy?: (value: string) => void;
+}

package/dist/components/dm-truncate/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DmTruncate";
+export * from "./DmTruncate.types";

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

@@ -0,0 +1,375 @@
+"use client";
+
+// src/components/tooltip/Tooltip.tsx
+import { forwardRef, useState } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// 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",
+  bottom: "tooltip-bottom",
+  left: "tooltip-left",
+  right: "tooltip-right"
+};
+var tooltipSizeClasses = {
+  sm: "tooltip-sm",
+  md: "",
+  lg: "tooltip-lg"
+};
+function getTooltipClasses({
+  placement = "top",
+  size = "md",
+  open,
+  arrow = true,
+  className
+}) {
+  return cn(tooltipBaseClass, tooltipPlacementClasses[placement], tooltipSizeClasses[size], open && tooltipShowClass, !arrow && tooltipNoArrowClass, className);
+}
+
+// src/components/tooltip/Tooltip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Tooltip = forwardRef(({
+  title,
+  placement = "top",
+  open,
+  defaultOpen,
+  arrow = true,
+  size = "md",
+  className,
+  children,
+  onBlur,
+  onFocus,
+  onMouseEnter,
+  onMouseLeave,
+  ...props
+}, ref) => {
+  const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
+  const isControlled = open !== undefined;
+  const visible = isControlled ? open : internalOpen;
+  const tooltipId = props.id !== undefined ? `${props.id}-tooltip` : undefined;
+  function showTooltip(event) {
+    onMouseEnter?.(event);
+    if (!isControlled)
+      setInternalOpen(true);
+  }
+  function hideTooltip(event) {
+    onMouseLeave?.(event);
+    if (!isControlled)
+      setInternalOpen(false);
+  }
+  function focusTooltip(event) {
+    onFocus?.(event);
+    if (!isControlled)
+      setInternalOpen(true);
+  }
+  function blurTooltip(event) {
+    onBlur?.(event);
+    if (!isControlled)
+      setInternalOpen(false);
+  }
+  return /* @__PURE__ */ jsxs("span", {
+    ...props,
+    ref,
+    className: tooltipWrapperClass,
+    "aria-describedby": visible && title ? tooltipId : undefined,
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: focusTooltip,
+    onBlur: blurTooltip,
+    children: [
+      children,
+      title ? /* @__PURE__ */ jsxs("span", {
+        id: tooltipId,
+        role: "tooltip",
+        className: getTooltipClasses({
+          placement,
+          size,
+          open: visible,
+          arrow,
+          className
+        }),
+        children: [
+          title,
+          arrow ? /* @__PURE__ */ jsx("span", {
+            className: tooltipArrowClass
+          }) : null
+        ]
+      }) : 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) {
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(toPlainText).join("");
+  }
+  return "";
+}
+function getOverflowContent(overflowContent, value) {
+  if (typeof overflowContent === "function") {
+    return overflowContent(value);
+  }
+  return overflowContent ?? value;
+}
+function getLineHeight(element) {
+  if (!element || typeof window === "undefined") {
+    return 22;
+  }
+  const lineHeight = window.getComputedStyle(element).lineHeight;
+  const parsed = Number.parseFloat(lineHeight);
+  return Number.isFinite(parsed) ? parsed : 22;
+}
+async function copyText(value) {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(value);
+    return;
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = value;
+  textarea.setAttribute("readonly", "true");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand("copy");
+  document.body.removeChild(textarea);
+}
+var DmTruncate = forwardRef2(({
+  children,
+  showOverflowTag = true,
+  overflowContent,
+  emptyValue = "-",
+  overflowPercent = 0.8,
+  tooltipProps,
+  className,
+  style,
+  isShowPopover = true,
+  copyable = false,
+  maxLines = 1,
+  tooltipPreserveLineBreak = false,
+  textClassName,
+  textStyle,
+  onCopy,
+  ...props
+}, ref) => {
+  const wrapperRef = useRef(null);
+  const textRef = useRef(null);
+  const measureRef = useRef(null);
+  const copyTimerRef = useRef(null);
+  const [overflow, setOverflow] = useState2(false);
+  const [copied, setCopied] = useState2(false);
+  const textValue = toPlainText(children);
+  const hasText = textValue.length > 0;
+  const displayValue = hasText ? textValue : emptyValue;
+  const multiline = maxLines > 1;
+  const popoverContent = getOverflowContent(overflowContent, textValue);
+  const shouldShowPopover = isShowPopover && overflow && hasText;
+  const textMaxWidth = overflow && (showOverflowTag || copyable) ? `${Math.max(0.1, Math.min(1, overflowPercent)) * 100}%` : undefined;
+  const textClampStyle = useMemo(() => {
+    if (!multiline) {
+      return {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        maxWidth: textMaxWidth,
+        ...textStyle
+      };
+    }
+    return {
+      display: "-webkit-box",
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: Math.max(1, maxLines),
+      overflow: "hidden",
+      whiteSpace: tooltipPreserveLineBreak ? "pre-line" : undefined,
+      maxWidth: textMaxWidth,
+      ...textStyle
+    };
+  }, [
+    maxLines,
+    multiline,
+    textMaxWidth,
+    textStyle,
+    tooltipPreserveLineBreak
+  ]);
+  const measure = useCallback(() => {
+    const wrapper = wrapperRef.current;
+    const text = textRef.current;
+    const measureNode = measureRef.current;
+    if (!wrapper || !text || !measureNode || !hasText) {
+      setOverflow(false);
+      return;
+    }
+    if (multiline) {
+      const maxHeight = getLineHeight(text) * Math.max(1, maxLines);
+      setOverflow(measureNode.scrollHeight > maxHeight);
+      return;
+    }
+    const availableWidth = wrapper.clientWidth || text.clientWidth;
+    const renderedWidth = measureNode.scrollWidth || text.scrollWidth;
+    setOverflow(Boolean(availableWidth && renderedWidth > availableWidth));
+  }, [hasText, maxLines, multiline]);
+  useLayoutEffect(() => {
+    measure();
+  }, [measure, textValue]);
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [measure]);
+  useEffect(() => {
+    return () => {
+      if (copyTimerRef.current) {
+        window.clearTimeout(copyTimerRef.current);
+      }
+    };
+  }, []);
+  async function handleCopy() {
+    if (!hasText) {
+      return;
+    }
+    await copyText(textValue);
+    onCopy?.(textValue);
+    setCopied(true);
+    if (copyTimerRef.current) {
+      window.clearTimeout(copyTimerRef.current);
+    }
+    copyTimerRef.current = window.setTimeout(() => setCopied(false), 3000);
+  }
+  function setRefs(node) {
+    wrapperRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }
+  const textNode = /* @__PURE__ */ jsx2("span", {
+    ref: textRef,
+    className: getDmTruncateTextClasses({
+      multiline,
+      overflow,
+      className: textClassName
+    }),
+    style: textClampStyle,
+    children: displayValue
+  });
+  return /* @__PURE__ */ jsx2("div", {
+    ...props,
+    ref: setRefs,
+    className: getDmTruncateClasses(className),
+    style,
+    children: /* @__PURE__ */ jsxs2("span", {
+      className: dmTruncateContentClass,
+      children: [
+        !showOverflowTag && shouldShowPopover ? /* @__PURE__ */ jsx2(Tooltip, {
+          title: popoverContent,
+          placement: "bottom",
+          ...tooltipProps,
+          children: textNode
+        }) : textNode,
+        /* @__PURE__ */ jsx2("span", {
+          ref: measureRef,
+          "aria-hidden": "true",
+          className: dmTruncateMeasureClass,
+          style: {
+            position: "absolute",
+            visibility: "hidden",
+            pointerEvents: "none",
+            whiteSpace: tooltipPreserveLineBreak ? "pre-line" : "nowrap",
+            width: multiline ? wrapperRef.current?.clientWidth : undefined
+          },
+          children: textValue
+        }),
+        showOverflowTag && shouldShowPopover ? /* @__PURE__ */ jsx2(Tooltip, {
+          title: popoverContent,
+          placement: "bottom",
+          ...tooltipProps,
+          children: /* @__PURE__ */ jsx2("span", {
+            "aria-label": "Text overflow",
+            role: "img",
+            className: dmTruncateOverflowTagClass,
+            children: "!"
+          })
+        }) : null,
+        copyable && hasText ? /* @__PURE__ */ jsx2("button", {
+          type: "button",
+          className: cn(dmTruncateCopyClass, "btn btn-text btn-xs"),
+          "aria-label": copied ? "Copied" : "Copy",
+          onClick: handleCopy,
+          children: copied ? "Copied" : "Copy"
+        }) : null
+      ]
+    })
+  });
+});
+DmTruncate.displayName = "DmTruncate";
+export {
+  DmTruncate
+};

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DrawerProps } from "./Drawer.types";
+export declare const Drawer: React.ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/drawer/Drawer.types.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps, CSSProperties, ForwardRefExoticComponent, MouseEvent, ReactNode, RefAttributes } from "react";
+export type DrawerPlacement = "left" | "right" | "top" | "bottom";
+export type DrawerSize = "sm" | "md" | "lg" | "xl";
+export interface DrawerProps extends Omit<ComponentProps<"aside">, "children" | "className" | "title"> {
+    open?: boolean;
+    title?: ReactNode;
+    children?: ReactNode;
+    placement?: DrawerPlacement;
+    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+    closeIcon?: ReactNode;
+    footer?: ReactNode;
+    extra?: ReactNode;
+    width?: CSSProperties["width"];
+    height?: CSSProperties["height"];
+    size?: DrawerSize;
+    className?: string;
+}
+export type DrawerComponent = ForwardRefExoticComponent<DrawerProps & RefAttributes<HTMLElement>>;

package/dist/components/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer } from "./Drawer";
+export type { DrawerComponent, DrawerPlacement, DrawerProps, DrawerSize, } from "./Drawer.types";

package/dist/components/drawer/index.js

@@ -0,0 +1,132 @@
+"use client";
+
+// src/components/drawer/Drawer.tsx
+import { forwardRef } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/drawer.ts
+var drawerBaseClass = "drawer";
+var drawerOpenClass = "drawer-open";
+var drawerHeaderClass = "drawer-header";
+var drawerTitleClass = "drawer-title";
+var drawerBodyClass = "drawer-body";
+var drawerFooterClass = "drawer-footer";
+var drawerCloseClass = "drawer-close";
+var drawerPlacementClasses = {
+  left: "drawer-left",
+  right: "drawer-right",
+  top: "drawer-top",
+  bottom: "drawer-bottom"
+};
+var drawerSizeClasses = {
+  sm: "drawer-sm",
+  md: "drawer-md",
+  lg: "drawer-lg",
+  xl: "drawer-xl"
+};
+function getDrawerClasses({
+  open,
+  placement = "right",
+  size = "md",
+  className
+}) {
+  return cn(drawerBaseClass, drawerPlacementClasses[placement], size && drawerSizeClasses[size], open && drawerOpenClass, className);
+}
+
+// src/components/drawer/Drawer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultCloseIcon = "x";
+function getDrawerStyle({
+  width,
+  height,
+  style
+}) {
+  return {
+    ...style,
+    ...width !== undefined ? { width } : undefined,
+    ...height !== undefined ? { height } : undefined
+  };
+}
+var Drawer = forwardRef(({
+  open = false,
+  title,
+  children,
+  placement = "right",
+  onClose,
+  closeIcon = defaultCloseIcon,
+  footer,
+  extra,
+  width,
+  height,
+  size = "md",
+  className,
+  style,
+  role = "dialog",
+  ...props
+}, ref) => {
+  const showClose = closeIcon !== null && closeIcon !== false;
+  const showHeader = title !== undefined || extra !== undefined || showClose;
+  return /* @__PURE__ */ jsxs("aside", {
+    ...props,
+    ref,
+    role,
+    "aria-hidden": open ? undefined : true,
+    className: getDrawerClasses({ open, placement, size, className }),
+    style: getDrawerStyle({ width, height, style }),
+    children: [
+      showHeader ? /* @__PURE__ */ jsxs("div", {
+        className: drawerHeaderClass,
+        children: [
+          title !== undefined ? /* @__PURE__ */ jsx("h2", {
+            className: drawerTitleClass,
+            children: title
+          }) : null,
+          extra,
+          showClose ? /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: drawerCloseClass,
+            "aria-label": "Close",
+            onClick: onClose,
+            children: closeIcon
+          }) : null
+        ]
+      }) : null,
+      /* @__PURE__ */ jsx("div", {
+        className: drawerBodyClass,
+        children
+      }),
+      footer !== undefined ? /* @__PURE__ */ jsx("div", {
+        className: drawerFooterClass,
+        children: footer
+      }) : null
+    ]
+  });
+});
+Drawer.displayName = "Drawer";
+export {
+  Drawer
+};

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

@@ -0,0 +1,2 @@
+import type { DropdownComponent } from "./Dropdown.types";
+export declare const Dropdown: DropdownComponent;

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

@@ -0,0 +1,44 @@
+import type { ComponentProps, ForwardRefExoticComponent, MouseEvent, ReactNode, RefAttributes } from "react";
+import type { ButtonProps } from "../button/Button.types";
+export type DropdownPlacement = "top" | "bottom" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+export type DropdownTrigger = "click" | "hover" | "contextMenu";
+export interface DropdownMenuItem {
+    key: string | number;
+    label?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    danger?: boolean;
+    type?: "item" | "divider";
+    className?: string;
+}
+export interface DropdownMenuInfo {
+    key: string;
+    item: DropdownMenuItem;
+    domEvent: MouseEvent<HTMLButtonElement>;
+}
+export interface DropdownMenu {
+    items?: DropdownMenuItem[];
+    onClick?: (info: DropdownMenuInfo) => void;
+}
+export interface DropdownProps extends Omit<ComponentProps<"span">, "menu"> {
+    menu?: DropdownMenu;
+    overlay?: ReactNode;
+    dropdownRender?: (menus: ReactNode) => ReactNode;
+    trigger?: DropdownTrigger[];
+    placement?: DropdownPlacement;
+    open?: boolean;
+    defaultOpen?: boolean;
+    arrow?: boolean;
+    disabled?: boolean;
+    destroyPopupOnHide?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}
+export type DropdownButtonProps = Omit<DropdownProps, "children" | "onClick" | keyof ButtonProps> & Omit<ButtonProps, "children" | "onClick"> & {
+    buttonsRender?: (buttons: ReactNode[]) => ReactNode[];
+    children?: ReactNode;
+    onClick?: ButtonProps["onClick"];
+};
+export type DropdownComponent = ForwardRefExoticComponent<DropdownProps & RefAttributes<HTMLSpanElement>> & {
+    Button: ForwardRefExoticComponent<DropdownButtonProps & RefAttributes<HTMLSpanElement>>;
+};

package/dist/components/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from "./Dropdown";
+export type { DropdownButtonProps, DropdownComponent, DropdownMenu, DropdownMenuInfo, DropdownMenuItem, DropdownPlacement, DropdownProps, DropdownTrigger, } from "./Dropdown.types";