@duskmoon-dev/components 0.1.2

package/dist/components/dm-tabs/DmTabs.d.ts

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

package/dist/components/dm-tabs/DmTabs.types.d.ts

@@ -0,0 +1,10 @@
+import type { TabsItem, TabsProps } from "../tabs/Tabs.types";
+export interface DmTabsItem extends TabsItem {
+    path?: string;
+}
+export interface DmTabsProps extends Omit<TabsProps, "items"> {
+    items: DmTabsItem[];
+    transparentCard?: boolean;
+    optionTree?: boolean;
+    destroyOnHidden?: boolean;
+}

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

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

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

@@ -0,0 +1,415 @@
+"use client";
+
+// src/components/tabs/Tabs.tsx
+import {
+  Children,
+  Fragment,
+  forwardRef,
+  isValidElement,
+  useId,
+  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/tabs.ts
+var tabsRootClass = "tabs-root";
+var tabsRootVerticalClass = "tabs-root-vertical";
+var tabsRootBottomClass = "tabs-root-bottom";
+var tabsRootRightClass = "tabs-root-right";
+var tabsBarClass = "tabs-bar";
+var tabsBaseClass = "tabs";
+var tabsVerticalClass = "tabs-vertical";
+var tabsScrollableClass = "tabs-scrollable";
+var tabsCenteredClass = "tabs-center";
+var tabsBoxedClass = "tabs-boxed";
+var tabBaseClass = "tab";
+var tabActiveClass = "tab-active";
+var tabDisabledClass = "tab-disabled";
+var tabIconClass = "tab-icon";
+var tabIconOnlyClass = "tab-icon-only";
+var tabPanelClass = "tab-panel";
+var tabPanelShowClass = "tab-panel-show";
+var tabsAddClass = "tab tab-add";
+var tabsCloseClass = "tab-icon tab-close";
+var tabsSizeClasses = {
+  small: "tabs-sm",
+  middle: "tabs-md",
+  large: "tabs-lg",
+  sm: "tabs-sm",
+  md: "tabs-md",
+  lg: "tabs-lg"
+};
+var tabsTypeClasses = {
+  line: "",
+  card: tabsBoxedClass,
+  "editable-card": tabsBoxedClass
+};
+function getTabsRootClasses({
+  tabPosition = "top",
+  className
+}) {
+  return cn(tabsRootClass, (tabPosition === "left" || tabPosition === "right") && tabsRootVerticalClass, tabPosition === "bottom" && tabsRootBottomClass, tabPosition === "right" && tabsRootRightClass, className);
+}
+function getTabsListClasses({
+  tabPosition = "top",
+  type = "line",
+  size = "middle",
+  centered
+}) {
+  return cn(tabsBaseClass, tabsScrollableClass, (tabPosition === "left" || tabPosition === "right") && tabsVerticalClass, tabsSizeClasses[size], tabsTypeClasses[type], centered && tabsCenteredClass);
+}
+function getTabClasses({
+  active,
+  disabled,
+  iconOnly,
+  className
+}) {
+  return cn(tabBaseClass, active && tabActiveClass, disabled && tabDisabledClass, iconOnly && tabIconOnlyClass, className);
+}
+function getTabPanelClasses({
+  active,
+  className
+}) {
+  return cn(tabPanelClass, active && tabPanelShowClass, className);
+}
+
+// src/components/tabs/Tabs.tsx
+import { jsx, jsxs, Fragment as Fragment2 } from "react/jsx-runtime";
+function stringifyKey(key, index) {
+  return key == null ? String(index) : String(key);
+}
+function normalizeItems(items, children) {
+  if (items)
+    return items;
+  const paneItems = [];
+  Children.forEach(children, (child, index) => {
+    if (!isValidElement(child))
+      return;
+    paneItems.push({
+      key: stringifyKey(child.key, index),
+      label: child.props.tab ?? child.props.label,
+      icon: child.props.icon,
+      disabled: child.props.disabled,
+      closable: child.props.closable,
+      closeIcon: child.props.closeIcon,
+      forceRender: child.props.forceRender,
+      className: child.props.className,
+      style: child.props.style,
+      children: child.props.children
+    });
+  });
+  return paneItems;
+}
+function getInitialActiveKey(items, defaultActiveKey) {
+  if (defaultActiveKey !== undefined)
+    return defaultActiveKey;
+  return items.find((item) => !item.disabled)?.key ?? items[0]?.key;
+}
+function getCurrentActiveKey(items, activeKey) {
+  if (activeKey !== undefined && items.some((item) => item.key === activeKey)) {
+    return activeKey;
+  }
+  return items.find((item) => !item.disabled)?.key ?? items[0]?.key;
+}
+function isEditable(type) {
+  return type === "editable-card";
+}
+function getTabLabel(item) {
+  const label = item.label ?? item.key;
+  return /* @__PURE__ */ jsxs(Fragment2, {
+    children: [
+      item.icon ? /* @__PURE__ */ jsx("span", {
+        className: tabIconClass,
+        children: item.icon
+      }) : null,
+      label
+    ]
+  });
+}
+function shouldRenderPanel({
+  item,
+  active,
+  destroyInactiveTabPane
+}) {
+  if (active || item.forceRender)
+    return true;
+  return !(item.destroyInactiveTabPane ?? destroyInactiveTabPane);
+}
+var TabPane = (props) => /* @__PURE__ */ jsx(Fragment2, {
+  children: props.children
+});
+TabPane.displayName = "Tabs.TabPane";
+var TabsBase = forwardRef(({
+  items,
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  onTabClick,
+  tabPosition = "top",
+  type = "line",
+  size = "middle",
+  hideAdd,
+  addIcon,
+  removeIcon,
+  onEdit,
+  destroyInactiveTabPane,
+  centered,
+  className,
+  children,
+  id,
+  ...props
+}, ref) => {
+  const reactId = useId();
+  const tabsId = id ?? `tabs-${reactId}`;
+  const finalItems = normalizeItems(items, children);
+  const [internalActiveKey, setInternalActiveKey] = useState(() => getInitialActiveKey(finalItems, defaultActiveKey));
+  const isControlled = activeKey !== undefined;
+  const selectedKey = getCurrentActiveKey(finalItems, isControlled ? activeKey : internalActiveKey);
+  const tabRefs = useRef([]);
+  const editable = isEditable(type);
+  function changeActive(nextKey) {
+    if (nextKey === selectedKey)
+      return;
+    if (!isControlled) {
+      setInternalActiveKey(nextKey);
+    }
+    onChange?.(nextKey);
+  }
+  function selectItem(item, event) {
+    if (item.disabled)
+      return;
+    if (event) {
+      onTabClick?.(item.key, event);
+    }
+    changeActive(item.key);
+  }
+  function closeItem(item) {
+    if (item.disabled)
+      return;
+    onEdit?.(item.key, "remove");
+  }
+  function addItem(event) {
+    onEdit?.(event, "add");
+  }
+  function focusByOffset(index, offset) {
+    if (finalItems.length === 0)
+      return;
+    for (let step = 1;step <= finalItems.length; step += 1) {
+      const nextIndex = (index + offset * step + finalItems.length) % finalItems.length;
+      const nextItem = finalItems[nextIndex];
+      if (!nextItem.disabled) {
+        tabRefs.current[nextIndex]?.focus();
+        changeActive(nextItem.key);
+        return;
+      }
+    }
+  }
+  function focusEdge(edge) {
+    const candidates = edge === "first" ? finalItems : [...finalItems].reverse();
+    const item = candidates.find((candidate) => !candidate.disabled);
+    if (!item)
+      return;
+    const index = finalItems.findIndex((candidate) => candidate.key === item.key);
+    tabRefs.current[index]?.focus();
+    changeActive(item.key);
+  }
+  function handleKeyDown(item, index, event) {
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      focusByOffset(index, 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      focusByOffset(index, -1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      focusEdge("first");
+    } else if (event.key === "End") {
+      event.preventDefault();
+      focusEdge("last");
+    } else if (event.key === "Delete" && editable && item.closable !== false) {
+      event.preventDefault();
+      onEdit?.(item.key, "remove");
+    }
+  }
+  const tabList = /* @__PURE__ */ jsx("div", {
+    className: tabsBarClass,
+    children: /* @__PURE__ */ jsxs("div", {
+      role: "tablist",
+      "aria-orientation": tabPosition === "left" || tabPosition === "right" ? "vertical" : "horizontal",
+      className: getTabsListClasses({
+        tabPosition,
+        type,
+        size,
+        centered
+      }),
+      children: [
+        finalItems.map((item, index) => {
+          const active = item.key === selectedKey;
+          const panelId = `${tabsId}-panel-${item.key}`;
+          const tabId = `${tabsId}-tab-${item.key}`;
+          const showClose = editable && item.closable !== false && !item.disabled;
+          return /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                ref: (element) => {
+                  tabRefs.current[index] = element;
+                },
+                id: tabId,
+                type: "button",
+                role: "tab",
+                "aria-selected": active,
+                "aria-controls": panelId,
+                tabIndex: active ? 0 : -1,
+                disabled: item.disabled,
+                className: getTabClasses({
+                  active,
+                  disabled: item.disabled,
+                  iconOnly: item.icon != null && item.label == null
+                }),
+                onClick: (event) => selectItem(item, event),
+                onKeyDown: (event) => handleKeyDown(item, index, event),
+                children: getTabLabel(item)
+              }),
+              showClose ? /* @__PURE__ */ jsx("button", {
+                type: "button",
+                className: tabsCloseClass,
+                "aria-label": `Close tab ${item.key}`,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  closeItem(item);
+                },
+                children: item.closeIcon ?? removeIcon ?? "x"
+              }) : null
+            ]
+          }, item.key);
+        }),
+        editable && !hideAdd ? /* @__PURE__ */ jsx("button", {
+          type: "button",
+          className: tabsAddClass,
+          "aria-label": "Add tab",
+          onClick: addItem,
+          children: addIcon ?? "+"
+        }) : null
+      ]
+    })
+  });
+  const panels = finalItems.map((item) => {
+    const active = item.key === selectedKey;
+    if (!shouldRenderPanel({ item, active, destroyInactiveTabPane })) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", {
+      id: `${tabsId}-panel-${item.key}`,
+      role: "tabpanel",
+      "aria-labelledby": `${tabsId}-tab-${item.key}`,
+      hidden: !active,
+      "data-active": active ? "true" : undefined,
+      className: getTabPanelClasses({
+        active,
+        className: item.className
+      }),
+      style: item.style,
+      children: item.children
+    }, item.key);
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    id,
+    className: getTabsRootClasses({ tabPosition, className }),
+    children: [
+      tabPosition === "bottom" || tabPosition === "right" ? panels : null,
+      tabList,
+      tabPosition === "bottom" || tabPosition === "right" ? null : panels
+    ]
+  });
+});
+TabsBase.displayName = "Tabs";
+var Tabs = Object.assign(TabsBase, {
+  TabPane
+});
+// src/components/dm-tabs/DmTabs.tsx
+import { forwardRef as forwardRef2 } 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 jsx2 } from "react/jsx-runtime";
+var DmTabs = forwardRef2(({
+  type = "line",
+  tabPosition = "top",
+  transparentCard = false,
+  optionTree = false,
+  destroyOnHidden = true,
+  destroyInactiveTabPane,
+  className,
+  style,
+  items,
+  ...props
+}, ref) => /* @__PURE__ */ jsx2("div", {
+  className: getDmTabsShellClasses({}),
+  style,
+  children: /* @__PURE__ */ jsx2(Tabs, {
+    ...props,
+    ref,
+    items,
+    type,
+    tabPosition,
+    destroyInactiveTabPane: destroyInactiveTabPane ?? destroyOnHidden,
+    className: getDmTabsClasses({
+      type,
+      tabPosition,
+      transparentCard,
+      optionTree,
+      className
+    })
+  })
+}));
+DmTabs.displayName = "DmTabs";
+export {
+  DmTabs
+};

package/dist/components/dm-toolbar/DmToolbar.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { DmToolbarProps } from "./DmToolbar.types";
+export declare function DmToolbar({ items, className, style, moreText, maxVisibleSecondaryItems, }: DmToolbarProps): React.JSX.Element;
+export declare namespace DmToolbar {
+    var displayName: string;
+}

package/dist/components/dm-toolbar/DmToolbar.types.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { ButtonProps } from "../button/Button.types";
+import type { DropdownMenu } from "../dropdown/Dropdown.types";
+export type DmToolbarItemType = "primary" | "default";
+export interface DmToolbarItem extends Omit<ButtonProps, "children" | "type" | "title"> {
+    key?: string | number;
+    title: ReactNode;
+    type?: DmToolbarItemType;
+    htmlType?: ButtonProps["type"];
+    menu?: DropdownMenu;
+}
+export interface DmToolbarProps {
+    items?: DmToolbarItem[];
+    className?: string;
+    style?: CSSProperties;
+    moreText?: ReactNode;
+    maxVisibleSecondaryItems?: number;
+}

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

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