@duskmoon-dev/components 0.1.2

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

@@ -0,0 +1,488 @@
+"use client";
+
+// src/components/tree-select/TreeSelect.tsx
+import React, { forwardRef, useMemo, 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/tree-select.ts
+var treeSelectContainerClass = "tree-select-container";
+var treeSelectBaseClass = "tree-select";
+var treeSelectOpenClass = "tree-select-open";
+var treeSelectDisabledClass = "tree-select-disabled";
+var treeSelectMultipleClass = "tree-select-multiple";
+var treeSelectSelectionClass = "tree-select-selection";
+var treeSelectPlaceholderClass = "tree-select-placeholder";
+var treeSelectTagClass = "tree-select-tag";
+var treeSelectClearClass = "tree-select-clear";
+var treeSelectIconClass = "tree-select-icon";
+var treeSelectDropdownClass = "tree-select-dropdown";
+var treeSelectSearchClass = "tree-select-search";
+var treeSelectListClass = "tree-select-list";
+var treeSelectEmptyClass = "tree-select-empty";
+var treeSelectNodeClass = "tree-select-node";
+var treeSelectNodeSelectedClass = "tree-select-node-selected";
+var treeSelectNodeCheckedClass = "tree-select-node-checked";
+var treeSelectNodeExpandedClass = "tree-select-node-expanded";
+var treeSelectNodeDisabledClass = "tree-select-node-disabled";
+var treeSelectSwitcherClass = "tree-select-switcher";
+var treeSelectCheckboxClass = "tree-select-checkbox";
+var treeSelectTitleClass = "tree-select-title";
+function getTreeSelectContainerClasses({
+  open,
+  disabled,
+  multiple,
+  className
+}) {
+  return cn(treeSelectContainerClass, open && treeSelectOpenClass, disabled && treeSelectDisabledClass, multiple && treeSelectMultipleClass, className);
+}
+function getTreeSelectClasses({
+  disabled,
+  className
+}) {
+  return cn(treeSelectBaseClass, disabled && treeSelectDisabledClass, className);
+}
+function getTreeSelectNodeClasses({
+  selected,
+  checked,
+  expanded,
+  disabled,
+  className
+}) {
+  return cn(treeSelectNodeClass, selected && treeSelectNodeSelectedClass, checked && treeSelectNodeCheckedClass, expanded && treeSelectNodeExpandedClass, disabled && treeSelectNodeDisabledClass, className);
+}
+
+// src/components/tree-select/TreeSelect.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SHOW_ALL = "SHOW_ALL";
+var SHOW_PARENT = "SHOW_PARENT";
+var SHOW_CHILD = "SHOW_CHILD";
+function nodeValue(node) {
+  return node.value ?? node.key;
+}
+function nodeTitle(node) {
+  return node.title ?? node.label ?? nodeValue(node);
+}
+function valueKey(value) {
+  return String(value);
+}
+function normalizeSingleValue(value) {
+  if (Array.isArray(value)) {
+    return value[0];
+  }
+  return typeof value === "string" || typeof value === "number" ? value : undefined;
+}
+function normalizeMultiValue(value) {
+  if (Array.isArray(value)) {
+    return value.filter((item) => typeof item === "string" || typeof item === "number");
+  }
+  const single = normalizeSingleValue(value);
+  return single === undefined ? [] : [single];
+}
+function uniqueValues(values) {
+  return Array.from(new Map(values.map((value) => [valueKey(value), value])).values());
+}
+function treeDataFromChildren(children) {
+  return React.Children.toArray(children).flatMap((child) => {
+    if (!React.isValidElement(child)) {
+      return [];
+    }
+    const {
+      value,
+      title,
+      children: childChildren,
+      disabled,
+      disableCheckbox,
+      selectable,
+      checkable,
+      isLeaf,
+      className
+    } = child.props;
+    return [
+      {
+        value,
+        key: child.key ?? value,
+        title,
+        disabled,
+        disableCheckbox,
+        selectable,
+        checkable,
+        isLeaf,
+        className,
+        children: treeDataFromChildren(childChildren)
+      }
+    ];
+  });
+}
+function buildTree(nodes, level = 0, parentKey = undefined) {
+  return nodes.flatMap((node) => {
+    const value = nodeValue(node);
+    if (value === undefined) {
+      return [];
+    }
+    const key = valueKey(value);
+    const item = {
+      node,
+      value,
+      key,
+      title: nodeTitle(node),
+      parentKey,
+      children: [],
+      level
+    };
+    item.children = buildTree(node.children ?? [], level + 1, key);
+    return [item];
+  });
+}
+function flattenTree(nodes) {
+  return nodes.flatMap((node) => [node, ...flattenTree(node.children)]);
+}
+function descendantKeys(item) {
+  return flattenTree(item.children).map((child) => child.key);
+}
+function defaultFilter(inputValue, item, filterTreeNode) {
+  if (!inputValue || filterTreeNode === false) {
+    return true;
+  }
+  if (typeof filterTreeNode === "function") {
+    return filterTreeNode(inputValue, item.node);
+  }
+  return String(item.title ?? item.value).toLowerCase().includes(inputValue.toLowerCase());
+}
+function filterTree(nodes, inputValue, filterTreeNode) {
+  if (!inputValue || filterTreeNode === false) {
+    return nodes;
+  }
+  return nodes.flatMap((node) => {
+    const children = filterTree(node.children, inputValue, filterTreeNode);
+    const matched = defaultFilter(inputValue, node, filterTreeNode);
+    return matched || children.length > 0 ? [{ ...node, children }] : [];
+  });
+}
+function hasCheckedDescendant(item, checkedKeys) {
+  return flattenTree(item.children).some((child) => checkedKeys.has(child.key));
+}
+function hasCheckedAncestor(item, flatNodes, checkedKeys) {
+  let parentKey = item.parentKey;
+  while (parentKey) {
+    if (checkedKeys.has(parentKey)) {
+      return true;
+    }
+    parentKey = flatNodes.find((node) => node.key === parentKey)?.parentKey;
+  }
+  return false;
+}
+function displayItems(selectedItems, flatNodes, checkedKeys, strategy) {
+  if (strategy === SHOW_CHILD) {
+    return selectedItems.filter((item) => !hasCheckedAncestor(item, flatNodes, checkedKeys));
+  }
+  if (strategy === SHOW_PARENT) {
+    return selectedItems.filter((item) => !hasCheckedDescendant(item, checkedKeys));
+  }
+  return selectedItems;
+}
+function labelForValue(value, flatNodes) {
+  return flatNodes.find((item) => item.value === value)?.title ?? value;
+}
+var TreeNode = forwardRef(({ title, children, disabled, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+  ...props,
+  ref,
+  "aria-disabled": disabled || undefined,
+  className,
+  children: [
+    title,
+    children
+  ]
+}));
+TreeNode.displayName = "TreeSelect.TreeNode";
+function TreeSelectRoot({
+  allowClear,
+  children,
+  className,
+  defaultOpen,
+  defaultValue,
+  defaultExpandedKeys,
+  defaultTreeExpandedKeys,
+  disabled,
+  expandedKeys,
+  filterTreeNode,
+  loadData,
+  multiple,
+  onChange,
+  onDropdownVisibleChange,
+  onSearch,
+  onSelect,
+  open,
+  placeholder = "Please select",
+  searchValue,
+  showSearch,
+  treeCheckable,
+  treeCheckedStrategy = SHOW_CHILD,
+  treeData,
+  treeDefaultExpandAll,
+  treeExpandedKeys,
+  value,
+  ...props
+}, ref) {
+  const checkable = Boolean(treeCheckable);
+  const multi = Boolean(multiple || treeCheckable);
+  const sourceTree = useMemo(() => treeData ?? treeDataFromChildren(children), [children, treeData]);
+  const tree = useMemo(() => buildTree(sourceTree), [sourceTree]);
+  const flatNodes = useMemo(() => flattenTree(tree), [tree]);
+  const allKeys = useMemo(() => flatNodes.map((item) => item.key), [flatNodes]);
+  const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
+  const [internalSearch, setInternalSearch] = useState("");
+  const [internalValue, setInternalValue] = useState(multi ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState(treeDefaultExpandAll ? allKeys : (defaultExpandedKeys ?? defaultTreeExpandedKeys ?? []).map(valueKey));
+  const controlledOpen = open !== undefined;
+  const currentOpen = controlledOpen ? Boolean(open) : internalOpen;
+  const controlledValue = value !== undefined;
+  const currentValue = controlledValue ? value : internalValue;
+  const currentSearch = searchValue ?? internalSearch;
+  const controlledExpandedKeys = expandedKeys ?? treeExpandedKeys;
+  const currentExpandedKeys = controlledExpandedKeys ? controlledExpandedKeys.map(valueKey) : internalExpandedKeys;
+  const expandedKeySet = new Set(currentExpandedKeys);
+  const selectedValues = multi ? normalizeMultiValue(currentValue) : normalizeSingleValue(currentValue) === undefined ? [] : [normalizeSingleValue(currentValue)];
+  const selectedKeys = new Set(selectedValues.map(valueKey));
+  const selectedItems = selectedValues.map((selectedValue) => {
+    const found = flatNodes.find((item) => item.value === selectedValue);
+    return found ?? {
+      node: { value: selectedValue, title: selectedValue },
+      value: selectedValue,
+      key: valueKey(selectedValue),
+      title: selectedValue,
+      children: [],
+      level: 0
+    };
+  });
+  const visibleTree = filterTree(tree, currentSearch, filterTreeNode);
+  const visibleFlatNodes = flattenTree(visibleTree);
+  const hasValue = selectedValues.length > 0;
+  const searchable = showSearch || currentSearch.length > 0;
+  function setDropdownOpen(nextOpen) {
+    if (disabled) {
+      return;
+    }
+    if (!controlledOpen) {
+      setInternalOpen(nextOpen);
+    }
+    onDropdownVisibleChange?.(nextOpen);
+  }
+  function setExpanded(nextExpandedKeys, item) {
+    if (!controlledExpandedKeys) {
+      setInternalExpandedKeys(nextExpandedKeys);
+    }
+    if (!expandedKeySet.has(item.key)) {
+      loadData?.(item.node);
+    }
+  }
+  function emitChange(nextValues, trigger, selected) {
+    const normalizedValues = multi ? uniqueValues(nextValues) : nextValues.slice(0, 1);
+    const nextValue = multi ? normalizedValues : normalizedValues[0];
+    const labels = normalizedValues.map((item) => labelForValue(item, flatNodes));
+    const extra = {
+      triggerValue: trigger.value,
+      selected,
+      checked: checkable ? selected : undefined,
+      triggerNode: trigger.node,
+      allCheckedNodes: checkable ? flatNodes.filter((item) => normalizedValues.map(valueKey).includes(item.key)).map((item) => item.node) : undefined
+    };
+    if (!controlledValue) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue, multi ? labels : labels[0], extra);
+  }
+  function selectItem(item) {
+    if (disabled || item.node.disabled || item.node.selectable === false) {
+      return;
+    }
+    const selected = selectedKeys.has(item.key);
+    let nextValues;
+    if (multi) {
+      const cascadeKeys = checkable ? [item.key, ...descendantKeys(item)] : [item.key];
+      const cascadeValues = flatNodes.filter((node) => cascadeKeys.includes(node.key)).map((node) => node.value);
+      nextValues = selected ? selectedValues.filter((itemValue) => !cascadeKeys.includes(valueKey(itemValue))) : [...selectedValues, ...cascadeValues];
+    } else {
+      nextValues = selected ? [] : [item.value];
+      setDropdownOpen(false);
+    }
+    emitChange(nextValues, item, !selected);
+    onSelect?.(item.value, item.node, {
+      triggerValue: item.value,
+      selected: !selected,
+      checked: checkable ? !selected : undefined,
+      triggerNode: item.node
+    });
+  }
+  function clearValue(event) {
+    event.stopPropagation();
+    if (disabled) {
+      return;
+    }
+    if (!controlledValue) {
+      setInternalValue(multi ? [] : undefined);
+    }
+    onChange?.(multi ? [] : undefined, multi ? [] : undefined, {});
+  }
+  function renderNode(item) {
+    const expanded = expandedKeySet.has(item.key);
+    const selected = selectedKeys.has(item.key);
+    const childVisible = expanded || currentSearch.length > 0;
+    const hasChildren = item.children.length > 0;
+    const nodeDisabled = disabled || item.node.disabled;
+    const selectable = item.node.selectable !== false;
+    return /* @__PURE__ */ jsxs("div", {
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          className: getTreeSelectNodeClasses({
+            selected,
+            checked: selected,
+            expanded,
+            disabled: nodeDisabled,
+            className: item.node.className
+          }),
+          style: { paddingLeft: item.level * 16 },
+          children: [
+            hasChildren || item.node.isLeaf === false ? /* @__PURE__ */ jsx("button", {
+              type: "button",
+              className: treeSelectSwitcherClass,
+              "aria-label": `${expanded ? "Collapse" : "Expand"} ${String(item.title)}`,
+              disabled,
+              onClick: (event) => {
+                event.stopPropagation();
+                setExpanded(expanded ? currentExpandedKeys.filter((key) => key !== item.key) : [...currentExpandedKeys, item.key], item);
+              },
+              children: expanded ? "-" : "+"
+            }) : /* @__PURE__ */ jsx("span", {
+              className: treeSelectSwitcherClass,
+              "aria-hidden": "true"
+            }),
+            checkable ? /* @__PURE__ */ jsx("input", {
+              type: "checkbox",
+              className: treeSelectCheckboxClass,
+              checked: selected,
+              disabled: nodeDisabled || item.node.disableCheckbox,
+              "aria-label": `Check ${String(item.title)}`,
+              onChange: () => selectItem(item)
+            }) : null,
+            /* @__PURE__ */ jsx("button", {
+              type: "button",
+              role: "treeitem",
+              "aria-selected": selected,
+              "aria-expanded": hasChildren ? expanded : undefined,
+              disabled: nodeDisabled || !selectable,
+              className: treeSelectTitleClass,
+              onClick: () => selectItem(item),
+              children: item.title
+            })
+          ]
+        }),
+        hasChildren && childVisible ? item.children.map(renderNode) : null
+      ]
+    }, item.key);
+  }
+  const renderedItems = displayItems(selectedItems, flatNodes, selectedKeys, treeCheckedStrategy);
+  const selection = multi ? renderedItems.map((item) => /* @__PURE__ */ jsx("span", {
+    className: treeSelectTagClass,
+    children: item.title
+  }, item.key)) : renderedItems[0]?.title;
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getTreeSelectContainerClasses({
+      open: currentOpen,
+      disabled,
+      multiple: multi,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsxs("button", {
+        type: "button",
+        className: getTreeSelectClasses({ disabled }),
+        disabled,
+        "aria-haspopup": "tree",
+        "aria-expanded": currentOpen,
+        onClick: () => setDropdownOpen(!currentOpen),
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: treeSelectSelectionClass,
+            children: hasValue ? selection : /* @__PURE__ */ jsx("span", {
+              className: treeSelectPlaceholderClass,
+              children: placeholder
+            })
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: treeSelectIconClass,
+            "aria-hidden": "true",
+            children: "v"
+          })
+        ]
+      }),
+      allowClear && hasValue && !disabled ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: treeSelectClearClass,
+        "aria-label": "Clear selection",
+        onClick: clearValue,
+        children: "x"
+      }) : null,
+      currentOpen ? /* @__PURE__ */ jsxs("div", {
+        className: treeSelectDropdownClass,
+        children: [
+          searchable ? /* @__PURE__ */ jsx("input", {
+            className: treeSelectSearchClass,
+            value: currentSearch,
+            placeholder: typeof placeholder === "string" ? placeholder : undefined,
+            onChange: (event) => {
+              const nextSearch = event.currentTarget.value;
+              if (searchValue === undefined) {
+                setInternalSearch(nextSearch);
+              }
+              onSearch?.(nextSearch);
+            }
+          }) : null,
+          /* @__PURE__ */ jsx("div", {
+            className: treeSelectListClass,
+            role: "tree",
+            "aria-multiselectable": multi || undefined,
+            children: visibleFlatNodes.length > 0 && visibleTree.length > 0 ? visibleTree.map(renderNode) : /* @__PURE__ */ jsx("div", {
+              className: treeSelectEmptyClass,
+              children: "No data"
+            })
+          })
+        ]
+      }) : null
+    ]
+  });
+}
+var TreeSelect = forwardRef(TreeSelectRoot);
+TreeSelect.displayName = "TreeSelect";
+TreeSelect.TreeNode = TreeNode;
+TreeSelect.SHOW_ALL = SHOW_ALL;
+TreeSelect.SHOW_PARENT = SHOW_PARENT;
+TreeSelect.SHOW_CHILD = SHOW_CHILD;
+export {
+  TreeSelect
+};

package/dist/components/typography/Typography.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { LinkProps, ParagraphProps, TextProps, TitleProps, TypographyComponent } from "./Typography.types";
+declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const Paragraph: React.ForwardRefExoticComponent<Omit<ParagraphProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const Title: React.ForwardRefExoticComponent<Omit<TitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const Typography: TypographyComponent;
+export { Link, Paragraph, Text, Title };

package/dist/components/typography/Typography.types.d.ts

@@ -0,0 +1,81 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type TypographyStatus = "secondary" | "success" | "warning" | "danger";
+export type TypographySize = "sm" | "md" | "lg";
+export type TypographyLevel = 1 | 2 | 3 | 4 | 5;
+export type TypographyCopyFormat = "text/plain" | "text/html";
+export interface TypographyEditableConfig {
+    editing?: boolean;
+    icon?: ReactNode;
+    tooltip?: ReactNode;
+    triggerType?: "icon" | "text" | Array<"icon" | "text">;
+    enterIcon?: ReactNode;
+    text?: string;
+    maxLength?: number;
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    onStart?: () => void;
+    onChange?: (value: string) => void;
+    onCancel?: () => void;
+    onEnd?: () => void;
+}
+export interface TypographyCopyableConfig {
+    text?: string;
+    icon?: ReactNode | [ReactNode, ReactNode];
+    tooltips?: false | ReactNode | [ReactNode, ReactNode];
+    format?: TypographyCopyFormat;
+    onCopy?: (event?: ClipboardEvent | React.MouseEvent<HTMLElement>) => void;
+}
+export interface TypographyEllipsisConfig {
+    rows?: number;
+    expandable?: boolean | "collapsible";
+    suffix?: string;
+    symbol?: ReactNode | ((expanded: boolean) => ReactNode);
+    tooltip?: ReactNode;
+    onExpand?: (event: React.MouseEvent<HTMLElement>, info: {
+        expanded: boolean;
+    }) => void;
+    onEllipsis?: (ellipsis: boolean) => void;
+}
+export type TypographyEditable = boolean | TypographyEditableConfig;
+export type TypographyCopyable = boolean | TypographyCopyableConfig;
+export type TypographyEllipsis = boolean | TypographyEllipsisConfig;
+export interface TypographySemanticProps {
+    type?: TypographyStatus;
+    disabled?: boolean;
+    mark?: boolean;
+    code?: boolean;
+    keyboard?: boolean;
+    underline?: boolean;
+    delete?: boolean;
+    strong?: boolean;
+    italic?: boolean;
+}
+export interface TypographyBehaviorProps {
+    editable?: TypographyEditable;
+    copyable?: TypographyCopyable;
+    ellipsis?: TypographyEllipsis;
+}
+export type TypographyProps = ComponentProps<"div">;
+export interface TextProps extends Omit<ComponentProps<"span">, "color">, TypographySemanticProps, TypographyBehaviorProps {
+    size?: TypographySize;
+}
+export interface ParagraphProps extends Omit<ComponentProps<"p">, "color">, TypographySemanticProps, TypographyBehaviorProps {
+}
+export interface TitleProps extends Omit<ComponentProps<"h1">, "color">, TypographySemanticProps, TypographyBehaviorProps {
+    level?: TypographyLevel;
+}
+export interface LinkProps extends Omit<ComponentProps<"a">, "color" | "type">, TypographySemanticProps {
+    ellipsis?: TypographyEllipsis;
+}
+export type TextComponent = ForwardRefExoticComponent<TextProps & RefAttributes<HTMLSpanElement>>;
+export type ParagraphComponent = ForwardRefExoticComponent<ParagraphProps & RefAttributes<HTMLParagraphElement>>;
+export type TitleComponent = ForwardRefExoticComponent<TitleProps & RefAttributes<HTMLHeadingElement>>;
+export type LinkComponent = ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
+export type TypographyComponent = ForwardRefExoticComponent<TypographyProps & RefAttributes<HTMLDivElement>> & {
+    Text: TextComponent;
+    Title: TitleComponent;
+    Paragraph: ParagraphComponent;
+    Link: LinkComponent;
+};

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

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