@duskmoon-dev/components 0.2.1 → 0.3.1

package/dist/index.js

@@ -79,7 +79,7 @@ var ThemeInitScript = () => {
 import { useCallback as useCallback2, useState as useState2 } from "react";
 
 // src/generated/version.ts
-var version = "0.2.1";
+var version = "0.3.1";
 
 // src/infrastructure.ts
 var theme = {
@@ -239,6 +239,9 @@ var buttonColorClasses = {
   primary: "btn-primary",
   secondary: "btn-secondary",
   tertiary: "btn-tertiary",
+  accent: "btn-accent",
+  neutral: "btn-neutral",
+  base: "btn-base",
   info: "btn-info",
   success: "btn-success",
   warning: "btn-warning",
@@ -1349,6 +1352,10 @@ var badgeBaseClass = "badge";
 var badgeColorClasses = {
   primary: "badge-primary",
   secondary: "badge-secondary",
+  tertiary: "badge-tertiary",
+  accent: "badge-accent",
+  neutral: "badge-neutral",
+  base: "badge-base",
   info: "badge-info",
   success: "badge-success",
   warning: "badge-warning",
@@ -1687,6 +1694,12 @@ import { forwardRef as forwardRef5 } from "react";
 // src/classes/alert.ts
 var alertBaseClass = "alert";
 var alertColorClasses = {
+  primary: "alert-primary",
+  secondary: "alert-secondary",
+  tertiary: "alert-tertiary",
+  accent: "alert-accent",
+  neutral: "alert-neutral",
+  base: "alert-base",
   info: "alert-info",
   success: "alert-success",
   warning: "alert-warning",
@@ -2870,6 +2883,9 @@ var autoCompleteColorClasses = {
   primary: "autocomplete-primary",
   secondary: "autocomplete-secondary",
   tertiary: "autocomplete-tertiary",
+  accent: "autocomplete-accent",
+  neutral: "autocomplete-neutral",
+  base: "autocomplete-base",
   info: "autocomplete-info",
   success: "autocomplete-success",
   warning: "autocomplete-warning",
@@ -3309,7 +3325,14 @@ var checkboxLabelBaseClass = "checkbox-text";
 var checkboxColorClasses = {
   primary: "checkbox-primary",
   secondary: "checkbox-secondary",
-  tertiary: "checkbox-tertiary"
+  tertiary: "checkbox-tertiary",
+  accent: "checkbox-accent",
+  neutral: "checkbox-neutral",
+  base: "checkbox-base",
+  info: "checkbox-info",
+  success: "checkbox-success",
+  warning: "checkbox-warning",
+  error: "checkbox-error"
 };
 var checkboxSizeClasses = {
   sm: "checkbox-sm",
@@ -4411,10 +4434,16 @@ var dividerThicknessClasses = {
   thick: "divider-thick"
 };
 var dividerColorClasses = {
-  neutral: "",
   primary: "divider-primary",
   secondary: "divider-secondary",
-  tertiary: "divider-tertiary"
+  tertiary: "divider-tertiary",
+  accent: "divider-accent",
+  neutral: "divider-neutral",
+  base: "divider-base",
+  info: "divider-info",
+  success: "divider-success",
+  warning: "divider-warning",
+  error: "divider-error"
 };
 var dividerSpacingClasses = {
   normal: "",
@@ -12919,13 +12948,16 @@ import { forwardRef as forwardRef59 } from "react";
 // src/classes/progress.ts
 var progressBaseClass = "progress";
 var progressColorClasses = {
-  primary: "",
+  primary: "progress-primary",
   secondary: "progress-secondary",
   tertiary: "progress-tertiary",
+  accent: "progress-accent",
+  neutral: "progress-neutral",
+  base: "progress-base",
+  info: "progress-info",
   success: "progress-success",
-  error: "progress-error",
   warning: "progress-warning",
-  info: "progress-info"
+  error: "progress-error"
 };
 var progressSizeClasses = {
   sm: "progress-sm",
@@ -13195,7 +13227,14 @@ var radioLabelBaseClass = "radio-label";
 var radioColorClasses = {
   primary: "radio-primary",
   secondary: "radio-secondary",
-  tertiary: "radio-tertiary"
+  tertiary: "radio-tertiary",
+  accent: "radio-accent",
+  neutral: "radio-neutral",
+  base: "radio-base",
+  info: "radio-info",
+  success: "radio-success",
+  warning: "radio-warning",
+  error: "radio-error"
 };
 var radioSizeClasses = {
   sm: "radio-sm",
@@ -13292,10 +13331,16 @@ var rateSizeClasses = {
   xl: "rating-xl"
 };
 var rateColorClasses = {
-  primary: "",
+  primary: "rating-primary",
   secondary: "rating-secondary",
   tertiary: "rating-tertiary",
-  warning: "rating-warning"
+  accent: "rating-accent",
+  neutral: "rating-neutral",
+  base: "rating-base",
+  info: "rating-info",
+  success: "rating-success",
+  warning: "rating-warning",
+  error: "rating-error"
 };
 function getRateClasses({
   size = "md",
@@ -14030,9 +14075,16 @@ var sliderSizeClasses = {
   lg: "slider-lg"
 };
 var sliderColorClasses = {
-  primary: "",
+  primary: "slider-primary",
   secondary: "slider-secondary",
-  tertiary: "slider-tertiary"
+  tertiary: "slider-tertiary",
+  accent: "slider-accent",
+  neutral: "slider-neutral",
+  base: "slider-base",
+  info: "slider-info",
+  success: "slider-success",
+  warning: "slider-warning",
+  error: "slider-error"
 };
 function getSliderClasses({
   size = "md",
@@ -14926,7 +14978,14 @@ var switchSizeClasses = {
 var switchColorClasses = {
   primary: "switch-primary",
   secondary: "switch-secondary",
-  tertiary: "switch-tertiary"
+  tertiary: "switch-tertiary",
+  accent: "switch-accent",
+  neutral: "switch-neutral",
+  base: "switch-base",
+  info: "switch-info",
+  success: "switch-success",
+  warning: "switch-warning",
+  error: "switch-error"
 };
 function getSwitchClasses({
   size = "md",
@@ -15015,10 +15074,13 @@ var tagColorClasses = {
   primary: "chip-primary",
   secondary: "chip-secondary",
   tertiary: "chip-tertiary",
+  accent: "chip-accent",
+  neutral: "chip-neutral",
+  base: "chip-base",
+  info: "chip-info",
   success: "chip-success",
-  error: "chip-error",
   warning: "chip-warning",
-  info: "chip-info"
+  error: "chip-error"
 };
 function getTagClasses({
   color,
@@ -15434,10 +15496,15 @@ var timelineSizeClasses = {
   lg: "timeline-lg"
 };
 var timelineMarkerColorClasses = {
-  primary: "",
+  primary: "timeline-marker-primary",
   secondary: "timeline-marker-secondary",
   tertiary: "timeline-marker-tertiary",
+  accent: "timeline-marker-accent",
+  neutral: "timeline-marker-neutral",
+  base: "timeline-marker-base",
+  info: "timeline-marker-info",
   success: "timeline-marker-success",
+  warning: "timeline-marker-warning",
   error: "timeline-marker-error"
 };
 function getTimelineClasses({
@@ -17431,8 +17498,149 @@ var Typography = Object.assign(TypographyRoot, {
   Paragraph,
   Link
 });
+// src/components/markdown/Markdown.tsx
+import { forwardRef as forwardRef78 } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+
+// src/classes/markdown.ts
+var markdownBaseClass = "markdown-body";
+var markdownFrontMatterClass = "dm-front-matter";
+var markdownColorCodeClass = "dm-color-code";
+var markdownColorChipClass = "dm-color-chip";
+var markdownColorChipSwatchClass = "dm-color-chip-swatch";
+function getMarkdownClasses({
+  variant,
+  className
+}) {
+  return cn(markdownBaseClass, variant && `${markdownBaseClass}-${variant}`, className);
+}
+
+// src/components/markdown/Markdown.tsx
+import { jsx as jsx92, jsxs as jsxs73 } from "react/jsx-runtime";
+function splitFrontMatter(markdown) {
+  const source = markdown.startsWith("\uFEFF") ? markdown.slice(1) : markdown;
+  const lines = source.split(/\r?\n/);
+  if (lines.length < 2 || lines[0] !== "---")
+    return;
+  for (let index = 1;index < lines.length; index += 1) {
+    if (lines[index] === "---" || lines[index] === "...") {
+      return {
+        source: lines.slice(1, index).join(`
+`),
+        body: lines.slice(index + 1).join(`
+`)
+      };
+    }
+  }
+  return;
+}
+function numberInRange(value, minimum, maximum) {
+  if (!/^[+-]?(?:\d+(?:\.\d+)?|\.\d+)$/.test(value))
+    return false;
+  const number = Number(value);
+  return Number.isFinite(number) && number >= minimum && number <= maximum;
+}
+function percentage(value) {
+  return value.endsWith("%") && numberInRange(value.slice(0, -1), 0, 100);
+}
+function alpha(value) {
+  return percentage(value) || numberInRange(value, 0, 1);
+}
+function isCssColor(value) {
+  if (!value || Array.from(value).some((character) => character.charCodeAt(0) > 127) || value.trim() !== value) {
+    return false;
+  }
+  if (/^#[\da-f]{3,4}(?:[\da-f]{2}){0,2}$/i.test(value))
+    return true;
+  const match = /^(rgba?|hsla?)\((.*)\)$/i.exec(value);
+  if (!match || match[2].includes("(") || match[2].includes(")"))
+    return false;
+  const name = match[1].toLowerCase();
+  const parts = match[2].split(",").map((part) => part.trim());
+  const hasAlpha = name.endsWith("a");
+  if (parts.length !== (hasAlpha ? 4 : 3))
+    return false;
+  if (name.startsWith("rgb")) {
+    const channels = parts.slice(0, 3);
+    const allPercentages = channels.every(percentage);
+    const allNumbers = channels.every((part) => numberInRange(part, 0, 255));
+    return (allPercentages || allNumbers) && (!hasAlpha || alpha(parts[3]));
+  }
+  const hue = parts[0].replace(/deg$/i, "");
+  return numberInRange(hue, 0, 360) && percentage(parts[1]) && percentage(parts[2]) && (!hasAlpha || alpha(parts[3]));
+}
+function markdownSource(markdown, mode) {
+  if (mode === "disabled")
+    return { body: markdown, source: undefined };
+  const frontMatter = splitFrontMatter(markdown);
+  return frontMatter ?? { body: markdown, source: undefined };
+}
+var Markdown = forwardRef78(function Markdown2({
+  markdown = "",
+  breaks = true,
+  colorChips = true,
+  frontMatter = "render",
+  variant,
+  className,
+  ...props
+}, ref) {
+  const source = markdownSource(markdown, frontMatter);
+  const components = colorChips ? {
+    code({ children, className: codeClassName, node, ...codeProps }) {
+      const value = String(children).replace(/\n$/, "");
+      const isInline = node?.position?.start.line === node?.position?.end.line;
+      if (!isInline || !isCssColor(value)) {
+        return /* @__PURE__ */ jsx92("code", {
+          className: codeClassName,
+          ...codeProps,
+          children
+        });
+      }
+      return /* @__PURE__ */ jsxs73("code", {
+        className: markdownColorCodeClass,
+        ...codeProps,
+        children: [
+          children,
+          /* @__PURE__ */ jsx92("span", {
+            className: markdownColorChipClass,
+            role: "img",
+            "aria-label": `Color ${value}`,
+            children: /* @__PURE__ */ jsx92("span", {
+              className: markdownColorChipSwatchClass,
+              style: { backgroundColor: value },
+              "aria-hidden": "true"
+            })
+          })
+        ]
+      });
+    }
+  } : undefined;
+  return /* @__PURE__ */ jsxs73("div", {
+    ref,
+    className: getMarkdownClasses({ variant, className }),
+    ...props,
+    children: [
+      frontMatter === "render" && source.source !== undefined ? /* @__PURE__ */ jsx92("div", {
+        className: markdownFrontMatterClass,
+        children: /* @__PURE__ */ jsx92("pre", {
+          children: /* @__PURE__ */ jsx92("code", {
+            className: "language-yaml",
+            children: source.source
+          })
+        })
+      }) : null,
+      /* @__PURE__ */ jsx92(ReactMarkdown, {
+        remarkPlugins: breaks ? [remarkGfm, remarkBreaks] : [remarkGfm],
+        components,
+        children: source.body
+      })
+    ]
+  });
+});
 // src/components/upload/Upload.tsx
-import React84, { forwardRef as forwardRef78, useLayoutEffect as useLayoutEffect3, useRef as useRef19, useState as useState57 } from "react";
+import React85, { forwardRef as forwardRef79, useLayoutEffect as useLayoutEffect3, useRef as useRef19, useState as useState57 } from "react";
 
 // src/classes/upload.ts
 var uploadBaseClass = "file-upload";
@@ -17477,7 +17685,7 @@ function getUploadItemClasses({
 }
 
 // src/components/upload/Upload.tsx
-import { jsx as jsx92, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs74 } from "react/jsx-runtime";
 var LIST_IGNORE = Symbol("Upload.LIST_IGNORE");
 var uidSeed = 0;
 function nextUid() {
@@ -17644,12 +17852,12 @@ function UploadRoot({
     }
   }
   function renderTrigger() {
-    const trigger = children ?? /* @__PURE__ */ jsx92("button", {
+    const trigger = children ?? /* @__PURE__ */ jsx93("button", {
       type: "button",
       children: "Upload"
     });
     if (dragger) {
-      return /* @__PURE__ */ jsx92("div", {
+      return /* @__PURE__ */ jsx93("div", {
         className: uploadDropzoneClass,
         role: "button",
         tabIndex: disabled ? -1 : 0,
@@ -17680,8 +17888,8 @@ function UploadRoot({
         children: trigger
       });
     }
-    if (React84.isValidElement(trigger)) {
-      return React84.cloneElement(trigger, {
+    if (React85.isValidElement(trigger)) {
+      return React85.cloneElement(trigger, {
         className: joinClasses(uploadTriggerClass, trigger.props.className),
         onClick: (event) => {
           trigger.props.onClick?.(event);
@@ -17689,7 +17897,7 @@ function UploadRoot({
         }
       });
     }
-    return /* @__PURE__ */ jsx92("button", {
+    return /* @__PURE__ */ jsx93("button", {
       type: "button",
       className: uploadTriggerClass,
       disabled,
@@ -17697,7 +17905,7 @@ function UploadRoot({
       children: trigger
     });
   }
-  return /* @__PURE__ */ jsxs73("div", {
+  return /* @__PURE__ */ jsxs74("div", {
     ...props,
     ref,
     className: getUploadClasses({
@@ -17707,7 +17915,7 @@ function UploadRoot({
       className
     }),
     children: [
-      /* @__PURE__ */ jsx92("input", {
+      /* @__PURE__ */ jsx93("input", {
         ref: inputRef,
         className: uploadInputClass,
         type: "file",
@@ -17721,37 +17929,37 @@ function UploadRoot({
         }
       }),
       renderTrigger(),
-      mergedFileList.length > 0 ? /* @__PURE__ */ jsx92("div", {
+      mergedFileList.length > 0 ? /* @__PURE__ */ jsx93("div", {
         className: getUploadListClasses({ listType }),
         children: mergedFileList.map((file) => {
           const size = formatSize(file.size);
-          return /* @__PURE__ */ jsxs73("div", {
+          return /* @__PURE__ */ jsxs74("div", {
             className: getUploadItemClasses({ status: file.status }),
             children: [
-              /* @__PURE__ */ jsxs73("div", {
+              /* @__PURE__ */ jsxs74("div", {
                 className: uploadItemInfoClass,
                 children: [
-                  /* @__PURE__ */ jsx92("button", {
+                  /* @__PURE__ */ jsx93("button", {
                     type: "button",
                     className: uploadPreviewClass,
                     disabled,
                     onClick: () => onPreview?.(file),
-                    children: /* @__PURE__ */ jsx92("span", {
+                    children: /* @__PURE__ */ jsx93("span", {
                       className: uploadItemNameClass,
                       children: file.name
                     })
                   }),
-                  size ? /* @__PURE__ */ jsx92("span", {
+                  size ? /* @__PURE__ */ jsx93("span", {
                     className: uploadItemSizeClass,
                     children: size
                   }) : null,
-                  typeof file.percent === "number" ? /* @__PURE__ */ jsx92("div", {
+                  typeof file.percent === "number" ? /* @__PURE__ */ jsx93("div", {
                     className: uploadProgressClass,
                     role: "progressbar",
                     "aria-valuemin": 0,
                     "aria-valuemax": 100,
                     "aria-valuenow": file.percent,
-                    children: /* @__PURE__ */ jsx92("div", {
+                    children: /* @__PURE__ */ jsx93("div", {
                       className: uploadProgressBarClass,
                       style: {
                         width: `${Math.max(0, Math.min(100, file.percent))}%`
@@ -17760,9 +17968,9 @@ function UploadRoot({
                   }) : null
                 ]
               }),
-              /* @__PURE__ */ jsx92("div", {
+              /* @__PURE__ */ jsx93("div", {
                 className: uploadItemActionsClass,
-                children: /* @__PURE__ */ jsx92("button", {
+                children: /* @__PURE__ */ jsx93("button", {
                   type: "button",
                   className: uploadRemoveClass,
                   disabled,
@@ -17778,9 +17986,9 @@ function UploadRoot({
     ]
   });
 }
-var UploadFrame = forwardRef78(UploadRoot);
+var UploadFrame = forwardRef79(UploadRoot);
 UploadFrame.displayName = "Upload";
-var Dragger = forwardRef78((props, ref) => /* @__PURE__ */ jsx92(UploadFrame, {
+var Dragger = forwardRef79((props, ref) => /* @__PURE__ */ jsx93(UploadFrame, {
   ...props,
   ref,
   dragger: true
@@ -17790,7 +17998,7 @@ var Upload = UploadFrame;
 Upload.Dragger = Dragger;
 Upload.LIST_IGNORE = LIST_IGNORE;
 // src/components/watermark/Watermark.tsx
-import { forwardRef as forwardRef79, useMemo as useMemo36 } from "react";
+import { forwardRef as forwardRef80, useMemo as useMemo36 } from "react";
 
 // src/classes/watermark.ts
 var watermarkBaseClass = "watermark";
@@ -17800,7 +18008,7 @@ function getWatermarkClasses({ className }) {
 }
 
 // src/components/watermark/Watermark.tsx
-import { jsx as jsx93, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs75 } from "react/jsx-runtime";
 function encodeSvg(svg) {
   return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 }
@@ -17822,7 +18030,7 @@ function createWatermarkSvg({
   }
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${viewWidth}" height="${viewHeight}" viewBox="0 0 ${viewWidth} ${viewHeight}"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="${color}" font-size="${fontSize}" font-family="${font?.fontFamily ?? "sans-serif"}" font-weight="${font?.fontWeight ?? 400}" font-style="${font?.fontStyle ?? "normal"}" transform="rotate(${rotate ?? -22} ${viewWidth / 2} ${viewHeight / 2})">${text}</text></svg>`;
 }
-var Watermark = forwardRef79(({
+var Watermark = forwardRef80(({
   children,
   className,
   content,
@@ -17839,17 +18047,17 @@ var Watermark = forwardRef79(({
   ...props
 }, ref) => {
   const backgroundImage = useMemo36(() => encodeSvg(createWatermarkSvg({ content, image, width, height, rotate, font })), [content, font, height, image, rotate, width]);
-  return /* @__PURE__ */ jsxs74("div", {
+  return /* @__PURE__ */ jsxs75("div", {
     ...props,
     ref,
     className: getWatermarkClasses({ className }),
     style: { position: "relative", ...style },
     children: [
-      /* @__PURE__ */ jsx93("div", {
+      /* @__PURE__ */ jsx94("div", {
         className: watermarkContentClass,
         children
       }),
-      /* @__PURE__ */ jsx93("div", {
+      /* @__PURE__ */ jsx94("div", {
         "aria-hidden": "true",
         "data-watermark-source": image ?? (typeof content === "string" || typeof content === "number" ? String(content) : undefined),
         "data-inherit": inherit || undefined,
@@ -17960,6 +18168,7 @@ export {
   MessageHolder,
   Menu,
   Mentions,
+  Markdown,
   List,
   Link,
   Layout,

package/dist/infrastructure.js

@@ -4,7 +4,7 @@
 import { useCallback, useState } from "react";
 
 // src/generated/version.ts
-var version = "0.2.1";
+var version = "0.3.1";
 
 // src/infrastructure.ts
 var theme = {