@duskmoon-dev/components 0.1.2

package/dist/components/typography/index.js

@@ -0,0 +1,689 @@
+"use client";
+
+// src/components/typography/Typography.tsx
+import React, {
+  forwardRef,
+  useEffect,
+  useMemo,
+  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/typography.ts
+var typographyBaseClass = "typography markdown-body";
+var typographyTextClass = "typography-text";
+var typographyTitleClass = "typography-title";
+var typographyParagraphClass = "typography-paragraph";
+var typographyLinkClass = "typography-link";
+var typographyDisabledClass = "typography-disabled";
+var typographyEditableClass = "typography-editable";
+var typographyEditingClass = "typography-editing";
+var typographyCopyableClass = "typography-copyable";
+var typographyEllipsisClass = "typography-ellipsis";
+var typographyExpandClass = "typography-expand";
+var typographyActionClass = "typography-action btn btn-text btn-sm";
+var typographyEditInputClass = "typography-edit-input input";
+var typographyStatusClasses = {
+  secondary: "typography-secondary text-on-surface-variant",
+  success: "typography-success text-success",
+  warning: "typography-warning text-warning",
+  danger: "typography-danger text-error"
+};
+var typographySizeClasses = {
+  sm: "typography-sm",
+  md: "typography-md",
+  lg: "typography-lg"
+};
+function getTypographyClasses(className) {
+  return cn(typographyBaseClass, className);
+}
+function getTypographyTextClasses({
+  status,
+  disabled,
+  editable,
+  copyable,
+  ellipsis,
+  size = "md",
+  className
+}) {
+  return cn(typographyTextClass, typographySizeClasses[size], status && typographyStatusClasses[status], disabled && typographyDisabledClass, editable && typographyEditableClass, copyable && typographyCopyableClass, ellipsis && typographyEllipsisClass, className);
+}
+function getTypographyTitleClasses({
+  status,
+  disabled,
+  editable,
+  copyable,
+  ellipsis,
+  className
+}) {
+  return cn(typographyTitleClass, status && typographyStatusClasses[status], disabled && typographyDisabledClass, editable && typographyEditableClass, copyable && typographyCopyableClass, ellipsis && typographyEllipsisClass, className);
+}
+function getTypographyParagraphClasses({
+  status,
+  disabled,
+  editable,
+  copyable,
+  ellipsis,
+  className
+}) {
+  return cn(typographyParagraphClass, status && typographyStatusClasses[status], disabled && typographyDisabledClass, editable && typographyEditableClass, copyable && typographyCopyableClass, ellipsis && typographyEllipsisClass, className);
+}
+function getTypographyLinkClasses({
+  status,
+  disabled,
+  ellipsis,
+  className
+}) {
+  return cn(typographyLinkClass, status && typographyStatusClasses[status], disabled && typographyDisabledClass, ellipsis && typographyEllipsisClass, className);
+}
+
+// src/components/typography/Typography.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function toText(children) {
+  if (typeof children === "string" || typeof children === "number") {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(toText).join("");
+  }
+  return "";
+}
+function normalizeEditable(editable) {
+  if (!editable) {
+    return;
+  }
+  return editable === true ? {} : editable;
+}
+function normalizeCopyable(copyable) {
+  if (!copyable) {
+    return;
+  }
+  return copyable === true ? {} : copyable;
+}
+function normalizeEllipsis(ellipsis) {
+  if (!ellipsis) {
+    return;
+  }
+  return ellipsis === true ? {} : ellipsis;
+}
+function shouldShowEditText(triggerType) {
+  if (!triggerType) {
+    return false;
+  }
+  return Array.isArray(triggerType) ? triggerType.includes("text") : triggerType === "text";
+}
+function getCopyIcon(copyable, copied) {
+  if (Array.isArray(copyable.icon)) {
+    return copyable.icon[copied ? 1 : 0];
+  }
+  return copyable.icon ?? (copied ? "Copied" : "Copy");
+}
+function getExpandSymbol(ellipsis, expanded) {
+  if (typeof ellipsis.symbol === "function") {
+    return ellipsis.symbol(expanded);
+  }
+  if (ellipsis.symbol != null) {
+    return ellipsis.symbol;
+  }
+  return expanded ? "Collapse" : "Expand";
+}
+function getEllipsisStyle(ellipsis, expanded) {
+  if (!ellipsis || expanded) {
+    return;
+  }
+  const rows = Math.max(1, ellipsis.rows ?? 1);
+  return {
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: rows,
+    overflow: "hidden"
+  };
+}
+function wrapSemanticContent(content, {
+  mark,
+  code,
+  keyboard,
+  underline,
+  delete: deleted,
+  strong,
+  italic
+}) {
+  let current = content;
+  if (code) {
+    current = /* @__PURE__ */ jsx("code", {
+      children: current
+    });
+  }
+  if (keyboard) {
+    current = /* @__PURE__ */ jsx("kbd", {
+      children: current
+    });
+  }
+  if (mark) {
+    current = /* @__PURE__ */ jsx("mark", {
+      children: current
+    });
+  }
+  if (strong) {
+    current = /* @__PURE__ */ jsx("strong", {
+      children: current
+    });
+  }
+  if (italic) {
+    current = /* @__PURE__ */ jsx("em", {
+      children: current
+    });
+  }
+  if (underline) {
+    current = /* @__PURE__ */ jsx("u", {
+      children: current
+    });
+  }
+  if (deleted) {
+    current = /* @__PURE__ */ jsx("del", {
+      children: current
+    });
+  }
+  return current;
+}
+function EditableContent({
+  editable,
+  disabled,
+  sourceText,
+  children
+}) {
+  const textareaRef = useRef(null);
+  const isControlled = editable?.editing !== undefined;
+  const [internalEditing, setInternalEditing] = useState(false);
+  const [draft, setDraft] = useState(editable?.text ?? sourceText);
+  const editing = editable ? editable.editing ?? internalEditing : false;
+  useEffect(() => {
+    if (editing) {
+      textareaRef.current?.focus();
+    }
+  }, [editing]);
+  if (!editable || disabled) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children
+    });
+  }
+  const editableConfig = editable;
+  function setEditing(next) {
+    if (!isControlled) {
+      setInternalEditing(next);
+    }
+  }
+  function startEdit() {
+    setDraft(editableConfig.text ?? sourceText);
+    editableConfig.onStart?.();
+    setEditing(true);
+  }
+  function endEdit() {
+    editableConfig.onChange?.(draft);
+    editableConfig.onEnd?.();
+    setEditing(false);
+  }
+  function cancelEdit() {
+    editableConfig.onCancel?.();
+    setEditing(false);
+  }
+  function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      cancelEdit();
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      endEdit();
+    }
+  }
+  if (editing) {
+    return /* @__PURE__ */ jsxs("span", {
+      className: typographyEditingClass,
+      children: [
+        /* @__PURE__ */ jsx("textarea", {
+          ref: textareaRef,
+          className: typographyEditInputClass,
+          "aria-label": "Edit text",
+          maxLength: editableConfig.maxLength,
+          rows: typeof editableConfig.autoSize === "object" ? editableConfig.autoSize.minRows : undefined,
+          value: draft,
+          onChange: (event) => {
+            setDraft(event.currentTarget.value);
+          },
+          onKeyDown: handleKeyDown
+        }),
+        /* @__PURE__ */ jsx("button", {
+          type: "button",
+          className: typographyActionClass,
+          "aria-label": "Save edit",
+          onClick: endEdit,
+          children: editableConfig.enterIcon ?? "Save"
+        }),
+        /* @__PURE__ */ jsx("button", {
+          type: "button",
+          className: typographyActionClass,
+          "aria-label": "Cancel edit",
+          onClick: cancelEdit,
+          children: "Cancel"
+        })
+      ]
+    });
+  }
+  const showTextTrigger = shouldShowEditText(editableConfig.triggerType);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      children,
+      /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: typographyActionClass,
+        title: typeof editableConfig.tooltip === "string" ? editableConfig.tooltip : undefined,
+        "aria-label": "Edit text",
+        onClick: startEdit,
+        children: editableConfig.icon ?? (showTextTrigger ? "Edit" : "Edit")
+      })
+    ]
+  });
+}
+function TypographyActions({
+  copyable,
+  ellipsis,
+  disabled,
+  sourceText,
+  expanded,
+  copied,
+  onCopy,
+  onToggleExpand
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      ellipsis?.expandable ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: cn(typographyActionClass, typographyExpandClass),
+        "aria-expanded": expanded,
+        onClick: onToggleExpand,
+        children: getExpandSymbol(ellipsis, expanded)
+      }) : null,
+      copyable ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: typographyActionClass,
+        "aria-label": "Copy text",
+        disabled,
+        "data-copy-source": sourceText,
+        onClick: onCopy,
+        children: getCopyIcon(copyable, copied)
+      }) : null
+    ]
+  });
+}
+function useTypographyBehavior({
+  children,
+  copyable,
+  ellipsis
+}) {
+  const sourceText = useMemo(() => toText(children), [children]);
+  const copyConfig = normalizeCopyable(copyable);
+  const ellipsisConfig = normalizeEllipsis(ellipsis);
+  const [copied, setCopied] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  function handleCopy(event) {
+    const text = copyConfig?.text ?? sourceText;
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(text);
+    }
+    setCopied(true);
+    copyConfig?.onCopy?.(event);
+  }
+  function handleToggleExpand(event) {
+    const nextExpanded = !expanded;
+    setExpanded(nextExpanded);
+    ellipsisConfig?.onExpand?.(event, { expanded: nextExpanded });
+    ellipsisConfig?.onEllipsis?.(!nextExpanded);
+  }
+  return {
+    copied,
+    copyConfig,
+    ellipsisConfig,
+    expanded,
+    handleCopy,
+    handleToggleExpand,
+    sourceText
+  };
+}
+var TypographyRoot = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: getTypographyClasses(className)
+}));
+TypographyRoot.displayName = "Typography";
+var Text = forwardRef(({
+  children,
+  className,
+  copyable,
+  disabled,
+  editable,
+  ellipsis,
+  mark,
+  code,
+  keyboard,
+  underline,
+  delete: deleted,
+  strong,
+  italic,
+  size = "md",
+  style,
+  type,
+  ...props
+}, ref) => {
+  const editableConfig = normalizeEditable(editable);
+  const {
+    copied,
+    copyConfig,
+    ellipsisConfig,
+    expanded,
+    handleCopy,
+    handleToggleExpand,
+    sourceText
+  } = useTypographyBehavior({ children, copyable, ellipsis });
+  const content = wrapSemanticContent(children, {
+    mark,
+    code,
+    keyboard,
+    underline,
+    delete: deleted,
+    strong,
+    italic
+  });
+  return /* @__PURE__ */ jsxs("span", {
+    ...props,
+    ref,
+    "aria-disabled": disabled || undefined,
+    className: getTypographyTextClasses({
+      status: type,
+      disabled,
+      editable: Boolean(editableConfig),
+      copyable: Boolean(copyConfig),
+      ellipsis: Boolean(ellipsisConfig),
+      size,
+      className
+    }),
+    style: { ...style, ...getEllipsisStyle(ellipsisConfig, expanded) },
+    children: [
+      /* @__PURE__ */ jsxs(EditableContent, {
+        editable: editableConfig,
+        disabled,
+        sourceText,
+        children: [
+          content,
+          ellipsisConfig?.suffix && !expanded ? ellipsisConfig.suffix : null
+        ]
+      }),
+      /* @__PURE__ */ jsx(TypographyActions, {
+        copyable: copyConfig,
+        ellipsis: ellipsisConfig,
+        disabled,
+        sourceText,
+        expanded,
+        copied,
+        onCopy: handleCopy,
+        onToggleExpand: handleToggleExpand
+      })
+    ]
+  });
+});
+Text.displayName = "Typography.Text";
+var Paragraph = forwardRef(({
+  children,
+  className,
+  copyable,
+  disabled,
+  editable,
+  ellipsis,
+  mark,
+  code,
+  keyboard,
+  underline,
+  delete: deleted,
+  strong,
+  italic,
+  style,
+  type,
+  ...props
+}, ref) => {
+  const editableConfig = normalizeEditable(editable);
+  const {
+    copied,
+    copyConfig,
+    ellipsisConfig,
+    expanded,
+    handleCopy,
+    handleToggleExpand,
+    sourceText
+  } = useTypographyBehavior({ children, copyable, ellipsis });
+  const content = wrapSemanticContent(children, {
+    mark,
+    code,
+    keyboard,
+    underline,
+    delete: deleted,
+    strong,
+    italic
+  });
+  return /* @__PURE__ */ jsxs("p", {
+    ...props,
+    ref,
+    "aria-disabled": disabled || undefined,
+    className: getTypographyParagraphClasses({
+      status: type,
+      disabled,
+      editable: Boolean(editableConfig),
+      copyable: Boolean(copyConfig),
+      ellipsis: Boolean(ellipsisConfig),
+      className
+    }),
+    style: { ...style, ...getEllipsisStyle(ellipsisConfig, expanded) },
+    children: [
+      /* @__PURE__ */ jsxs(EditableContent, {
+        editable: editableConfig,
+        disabled,
+        sourceText,
+        children: [
+          content,
+          ellipsisConfig?.suffix && !expanded ? ellipsisConfig.suffix : null
+        ]
+      }),
+      /* @__PURE__ */ jsx(TypographyActions, {
+        copyable: copyConfig,
+        ellipsis: ellipsisConfig,
+        disabled,
+        sourceText,
+        expanded,
+        copied,
+        onCopy: handleCopy,
+        onToggleExpand: handleToggleExpand
+      })
+    ]
+  });
+});
+Paragraph.displayName = "Typography.Paragraph";
+var Title = forwardRef(({
+  children,
+  className,
+  copyable,
+  disabled,
+  editable,
+  ellipsis,
+  mark,
+  code,
+  keyboard,
+  underline,
+  delete: deleted,
+  strong,
+  italic,
+  level = 1,
+  style,
+  type,
+  ...props
+}, ref) => {
+  const editableConfig = normalizeEditable(editable);
+  const {
+    copied,
+    copyConfig,
+    ellipsisConfig,
+    expanded,
+    handleCopy,
+    handleToggleExpand,
+    sourceText
+  } = useTypographyBehavior({ children, copyable, ellipsis });
+  const content = wrapSemanticContent(children, {
+    mark,
+    code,
+    keyboard,
+    underline,
+    delete: deleted,
+    strong,
+    italic
+  });
+  const headingLevel = Math.min(5, Math.max(1, level));
+  const Heading = `h${headingLevel}`;
+  return React.createElement(Heading, {
+    ...props,
+    ref,
+    "aria-disabled": disabled || undefined,
+    className: getTypographyTitleClasses({
+      status: type,
+      disabled,
+      editable: Boolean(editableConfig),
+      copyable: Boolean(copyConfig),
+      ellipsis: Boolean(ellipsisConfig),
+      className
+    }),
+    style: { ...style, ...getEllipsisStyle(ellipsisConfig, expanded) }
+  }, /* @__PURE__ */ jsxs(EditableContent, {
+    editable: editableConfig,
+    disabled,
+    sourceText,
+    children: [
+      content,
+      ellipsisConfig?.suffix && !expanded ? ellipsisConfig.suffix : null
+    ]
+  }), /* @__PURE__ */ jsx(TypographyActions, {
+    copyable: copyConfig,
+    ellipsis: ellipsisConfig,
+    disabled,
+    sourceText,
+    expanded,
+    copied,
+    onCopy: handleCopy,
+    onToggleExpand: handleToggleExpand
+  }));
+});
+Title.displayName = "Typography.Title";
+var Link = forwardRef(({
+  children,
+  className,
+  disabled,
+  ellipsis,
+  href,
+  mark,
+  code,
+  keyboard,
+  underline,
+  delete: deleted,
+  strong,
+  italic,
+  onClick,
+  style,
+  type,
+  ...props
+}, ref) => {
+  const { ellipsisConfig, expanded, handleToggleExpand } = useTypographyBehavior({
+    children,
+    ellipsis
+  });
+  const content = wrapSemanticContent(children, {
+    mark,
+    code,
+    keyboard,
+    underline,
+    delete: deleted,
+    strong,
+    italic
+  });
+  function handleClick(event) {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+  }
+  return /* @__PURE__ */ jsxs("a", {
+    ...props,
+    ref,
+    href,
+    "aria-disabled": disabled || undefined,
+    className: getTypographyLinkClasses({
+      status: type,
+      disabled,
+      ellipsis: Boolean(ellipsisConfig),
+      className
+    }),
+    style: { ...style, ...getEllipsisStyle(ellipsisConfig, expanded) },
+    onClick: handleClick,
+    children: [
+      content,
+      ellipsisConfig?.suffix && !expanded ? ellipsisConfig.suffix : null,
+      /* @__PURE__ */ jsx(TypographyActions, {
+        ellipsis: ellipsisConfig,
+        disabled,
+        sourceText: "",
+        expanded,
+        copied: false,
+        onCopy: () => {
+          return;
+        },
+        onToggleExpand: handleToggleExpand
+      })
+    ]
+  });
+});
+Link.displayName = "Typography.Link";
+var Typography = Object.assign(TypographyRoot, {
+  Text,
+  Title,
+  Paragraph,
+  Link
+});
+export {
+  Typography,
+  Title,
+  Text,
+  Paragraph,
+  Link
+};

package/dist/components/upload/Upload.d.ts

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