@duskmoon-dev/components 0.1.2

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

@@ -0,0 +1,309 @@
+"use client";
+
+// ../../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/button.ts
+var buttonBaseClass = "btn";
+var buttonColorClasses = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  tertiary: "btn-tertiary",
+  info: "btn-info",
+  success: "btn-success",
+  warning: "btn-warning",
+  error: "btn-error"
+};
+var buttonAppearanceClasses = {
+  filled: "",
+  outline: "btn-outline",
+  tonal: "btn-tonal",
+  ghost: "btn-ghost",
+  text: "btn-text"
+};
+var buttonShapeClasses = {
+  rect: "",
+  circle: "btn-circle",
+  square: "btn-square"
+};
+var buttonSizeClasses = {
+  xs: "btn-xs",
+  sm: "btn-sm",
+  md: "btn-md",
+  lg: "btn-lg"
+};
+var buttonBlockClass = "btn-block";
+var buttonIsLoadingClass = "btn-loading";
+function getButtonClasses({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  className
+}) {
+  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
+}
+
+// src/components/button/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Button({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  disabled,
+  ref,
+  ...props
+}) {
+  const classes = getButtonClasses({
+    color,
+    appearance,
+    shape,
+    size,
+    block,
+    isLoading,
+    className
+  });
+  return /* @__PURE__ */ jsxs("button", {
+    ref,
+    className: classes,
+    disabled: disabled || isLoading,
+    "aria-busy": isLoading,
+    "aria-disabled": disabled || isLoading,
+    ...props,
+    children: [
+      isLoading && /* @__PURE__ */ jsx("span", {
+        className: "btn-spinner"
+      }),
+      !isLoading && leftIcon && /* @__PURE__ */ jsx("span", {
+        className: "btn-icon-left",
+        children: leftIcon
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "btn-content",
+        children
+      }),
+      !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
+        className: "btn-icon-right",
+        children: rightIcon
+      })
+    ]
+  });
+}
+// src/components/drawer/Drawer.tsx
+import { forwardRef } from "react";
+
+// 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 as jsx2, jsxs as jsxs2 } 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__ */ jsxs2("aside", {
+    ...props,
+    ref,
+    role,
+    "aria-hidden": open ? undefined : true,
+    className: getDrawerClasses({ open, placement, size, className }),
+    style: getDrawerStyle({ width, height, style }),
+    children: [
+      showHeader ? /* @__PURE__ */ jsxs2("div", {
+        className: drawerHeaderClass,
+        children: [
+          title !== undefined ? /* @__PURE__ */ jsx2("h2", {
+            className: drawerTitleClass,
+            children: title
+          }) : null,
+          extra,
+          showClose ? /* @__PURE__ */ jsx2("button", {
+            type: "button",
+            className: drawerCloseClass,
+            "aria-label": "Close",
+            onClick: onClose,
+            children: closeIcon
+          }) : null
+        ]
+      }) : null,
+      /* @__PURE__ */ jsx2("div", {
+        className: drawerBodyClass,
+        children
+      }),
+      footer !== undefined ? /* @__PURE__ */ jsx2("div", {
+        className: drawerFooterClass,
+        children: footer
+      }) : null
+    ]
+  });
+});
+Drawer.displayName = "Drawer";
+// src/components/dm-drawer/DmDrawer.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/classes/dm-drawer.ts
+var dmDrawerBaseClass = "dm-drawer";
+var dmDrawerFooterActionClass = "dm-drawer-footer-action";
+function getDmDrawerClasses({
+  className
+}) {
+  return cn(dmDrawerBaseClass, className);
+}
+function getDmDrawerFooterClasses({
+  align = "right",
+  className
+}) {
+  return cn("dm-drawer-footer", align === "left" && "dm-drawer-footer-left", align === "center" && "dm-drawer-footer-center", align === "right" && "dm-drawer-footer-right", className);
+}
+
+// src/components/dm-drawer/DmDrawer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function renderFooter({
+  footer,
+  footerText,
+  submitText,
+  submitProps,
+  submitLoading,
+  submitDisabled,
+  footerAlign,
+  onSubmit
+}) {
+  if (footer !== undefined)
+    return footer;
+  const label = submitText ?? footerText;
+  if (label === undefined || label === null || label === false)
+    return;
+  return /* @__PURE__ */ jsx3("div", {
+    className: getDmDrawerFooterClasses({ align: footerAlign }),
+    children: /* @__PURE__ */ jsx3(Button, {
+      ...submitProps,
+      className: dmDrawerFooterActionClass,
+      color: submitProps?.color ?? "primary",
+      appearance: submitProps?.appearance ?? "filled",
+      isLoading: submitLoading ?? submitProps?.isLoading,
+      disabled: submitDisabled ?? submitProps?.disabled,
+      onClick: onSubmit,
+      children: label
+    })
+  });
+}
+var DmDrawer = forwardRef2(({
+  placement = "right",
+  closeIcon = "x",
+  footer,
+  footerText,
+  submitText,
+  submitProps,
+  submitLoading,
+  submitDisabled,
+  footerAlign = "right",
+  onSubmit,
+  className,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ jsx3(Drawer, {
+    ...props,
+    ref,
+    placement,
+    closeIcon,
+    className: getDmDrawerClasses({ className }),
+    footer: renderFooter({
+      footer,
+      footerText,
+      submitText,
+      submitProps,
+      submitLoading,
+      submitDisabled,
+      footerAlign,
+      onSubmit
+    })
+  });
+});
+DmDrawer.displayName = "DmDrawer";
+export {
+  DmDrawer
+};

package/dist/components/dm-infinite-scroll/DmInfiniteScroll.d.ts

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

package/dist/components/dm-infinite-scroll/DmInfiniteScroll.types.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode, UIEvent } from "react";
+export type DmScrollThreshold = number | `${number}px` | string;
+export interface DmInfiniteScrollProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onScroll"> {
+    id: string;
+    prefix?: string;
+    children?: ReactNode;
+    dataLength: number;
+    next: () => void | Promise<void>;
+    hasMore: boolean;
+    loader?: ReactNode;
+    endMessage?: ReactNode;
+    scrollThreshold?: DmScrollThreshold;
+    height?: number | string;
+    hasChildren?: boolean;
+    inverse?: boolean;
+    initialScrollY?: number;
+    onScroll?: (event: UIEvent<HTMLDivElement>) => void;
+}

package/dist/components/dm-infinite-scroll/index.d.ts

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

package/dist/components/dm-infinite-scroll/index.js

@@ -0,0 +1,153 @@
+"use client";
+
+// src/components/dm-infinite-scroll/DmInfiniteScroll.tsx
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  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/dm-infinite-scroll.ts
+var dmInfiniteScrollBaseClass = "dm-infinite-scroll";
+var dmInfiniteScrollContentClass = "dm-infinite-scroll-content";
+var dmInfiniteScrollLoaderClass = "dm-infinite-scroll-loader";
+var dmInfiniteScrollEndClass = "dm-infinite-scroll-end";
+var dmInfiniteScrollInverseClass = "dm-infinite-scroll-inverse";
+function getDmInfiniteScrollClasses({
+  inverse,
+  className
+}) {
+  return cn(dmInfiniteScrollBaseClass, inverse && dmInfiniteScrollInverseClass, className);
+}
+
+// src/components/dm-infinite-scroll/DmInfiniteScroll.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function reachedThreshold(element, threshold, inverse) {
+  const scrollTop = Math.max(0, element.scrollTop);
+  const clientHeight = element.clientHeight;
+  const scrollHeight = element.scrollHeight;
+  if (typeof threshold === "string" && threshold.trim().endsWith("px")) {
+    const pixels = Number.parseFloat(threshold);
+    if (!Number.isFinite(pixels)) {
+      return false;
+    }
+    return inverse ? scrollTop <= pixels : scrollHeight - (scrollTop + clientHeight) <= pixels;
+  }
+  const ratio = typeof threshold === "number" ? threshold : Number.parseFloat(String(threshold));
+  const normalized = Number.isFinite(ratio) ? ratio : 0.8;
+  const scrolledRatio = inverse ? 1 - scrollTop / Math.max(1, scrollHeight - clientHeight) : (scrollTop + clientHeight) / Math.max(1, scrollHeight);
+  return scrolledRatio >= normalized;
+}
+var DmInfiniteScroll = forwardRef(({
+  id,
+  prefix = "dm-scroll-container",
+  children,
+  dataLength,
+  next,
+  hasMore,
+  loader = /* @__PURE__ */ jsx("span", {
+    role: "status",
+    children: "Loading..."
+  }),
+  endMessage,
+  scrollThreshold = 0.8,
+  height,
+  hasChildren,
+  inverse = false,
+  initialScrollY,
+  className,
+  style,
+  onScroll,
+  ...props
+}, ref) => {
+  const containerRef = useRef(null);
+  const previousLengthRef = useRef(dataLength);
+  const [actionTriggered, setActionTriggered] = useState(false);
+  const scrollableTarget = `${prefix}-${id}`;
+  const hasVisibleChildren = hasChildren ?? (Array.isArray(children) ? children.length > 0 : Boolean(children));
+  useEffect(() => {
+    if (previousLengthRef.current !== dataLength) {
+      previousLengthRef.current = dataLength;
+      setActionTriggered(false);
+    }
+  }, [dataLength]);
+  useEffect(() => {
+    if (initialScrollY !== undefined && containerRef.current) {
+      containerRef.current.scrollTop = initialScrollY;
+    }
+  }, [initialScrollY]);
+  function setRefs(node) {
+    containerRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }
+  function handleScroll(event) {
+    onScroll?.(event);
+    if (!hasMore || actionTriggered) {
+      return;
+    }
+    if (reachedThreshold(event.currentTarget, scrollThreshold, inverse)) {
+      setActionTriggered(true);
+      next();
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    id: scrollableTarget,
+    ref: setRefs,
+    className: getDmInfiniteScrollClasses({ inverse, className }),
+    style: {
+      overflow: "auto",
+      height,
+      ...style
+    },
+    onScroll: handleScroll,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: dmInfiniteScrollContentClass,
+        children
+      }),
+      hasMore && actionTriggered ? /* @__PURE__ */ jsx("div", {
+        className: dmInfiniteScrollLoaderClass,
+        children: loader
+      }) : null,
+      !hasMore && hasVisibleChildren && endMessage ? /* @__PURE__ */ jsx("div", {
+        className: dmInfiniteScrollEndClass,
+        children: endMessage
+      }) : null
+    ]
+  });
+});
+DmInfiniteScroll.displayName = "DmInfiniteScroll";
+export {
+  DmInfiniteScroll
+};

package/dist/components/dm-layout/DmLayout.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { DmLayoutProps, DmLayoutSelection } from "./DmLayout.types";
+export declare function deriveDmLayoutSelection({ menus, selectedKey, openAllKeys, locale, onBreadcrumbClick, }: Pick<DmLayoutProps, "menus" | "selectedKey" | "openAllKeys" | "locale" | "onBreadcrumbClick">): DmLayoutSelection;
+export declare const DmLayout: React.ForwardRefExoticComponent<Omit<DmLayoutProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/dm-layout/DmLayout.types.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { LayoutProps } from "../layout/Layout.types";
+import type { DmBreadcrumbItem } from "../dm-breadcrumb/DmBreadcrumb.types";
+import type { DmMenuProps, DmMenuSchema } from "../dm-menu/DmMenu.types";
+export interface DmLayoutProps extends Omit<ComponentProps<"div">, "onSelect">, Omit<LayoutProps, "children"> {
+    menus?: DmMenuSchema[];
+    selectedKey?: string;
+    openAllKeys?: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    hideProductHeader?: boolean;
+    productIcon?: ReactNode;
+    productTitle?: ReactNode;
+    breadcrumbItems?: DmBreadcrumbItem[];
+    aheadBreadcrumbItems?: DmBreadcrumbItem[];
+    behindBreadcrumbItems?: DmBreadcrumbItem[];
+    tips?: ReactNode;
+    locale?: string;
+    menuProps?: Omit<DmMenuProps, "menus" | "selectedKeys" | "openKeys" | "inlineCollapsed" | "onCollapsed" | "onClick">;
+    onCollapse?: (collapsed: boolean) => void;
+    onMenuClick?: (key: string, menu?: DmMenuSchema) => void;
+    onBreadcrumbClick?: (url: string) => void;
+    children?: ReactNode;
+}
+export interface DmLayoutSelection {
+    selectedMenuKey: string;
+    selectedBreadcrumbKey: string;
+    openKeys: string[];
+    breadcrumbItems: DmBreadcrumbItem[];
+    tips?: ReactNode;
+}

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

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