@duskmoon-dev/components 0.2.1 → 0.3.1

package/dist/components/markdown/index.js

@@ -0,0 +1,171 @@
+"use client";
+
+// src/components/markdown/Markdown.tsx
+import { forwardRef } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+
+// ../../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/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, jsxs } 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 = forwardRef(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__ */ jsx("code", {
+          className: codeClassName,
+          ...codeProps,
+          children
+        });
+      }
+      return /* @__PURE__ */ jsxs("code", {
+        className: markdownColorCodeClass,
+        ...codeProps,
+        children: [
+          children,
+          /* @__PURE__ */ jsx("span", {
+            className: markdownColorChipClass,
+            role: "img",
+            "aria-label": `Color ${value}`,
+            children: /* @__PURE__ */ jsx("span", {
+              className: markdownColorChipSwatchClass,
+              style: { backgroundColor: value },
+              "aria-hidden": "true"
+            })
+          })
+        ]
+      });
+    }
+  } : undefined;
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: getMarkdownClasses({ variant, className }),
+    ...props,
+    children: [
+      frontMatter === "render" && source.source !== undefined ? /* @__PURE__ */ jsx("div", {
+        className: markdownFrontMatterClass,
+        children: /* @__PURE__ */ jsx("pre", {
+          children: /* @__PURE__ */ jsx("code", {
+            className: "language-yaml",
+            children: source.source
+          })
+        })
+      }) : null,
+      /* @__PURE__ */ jsx(ReactMarkdown, {
+        remarkPlugins: breaks ? [remarkGfm, remarkBreaks] : [remarkGfm],
+        components,
+        children: source.body
+      })
+    ]
+  });
+});
+export {
+  Markdown
+};

package/dist/components/popconfirm/index.js

@@ -31,6 +31,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",

package/dist/components/progress/Progress.types.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "react";
-export type ProgressColor = "primary" | "secondary" | "tertiary" | "success" | "error" | "warning" | "info";
+export type ProgressColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export type ProgressSize = "sm" | "md" | "lg" | "xl";
 export interface ProgressProps extends ComponentProps<"div"> {
     color?: ProgressColor;

package/dist/components/progress/index.js

@@ -31,13 +31,16 @@ function cn(...inputs) {
 // 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",

package/dist/components/radio/Radio.types.d.ts

@@ -1,5 +1,5 @@
 import type { ChangeEvent, ComponentProps, ReactNode } from "react";
-export type RadioColor = "primary" | "secondary" | "tertiary";
+export type RadioColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export type RadioSize = "sm" | "md" | "lg";
 export type RadioLabelPosition = "left" | "right";
 export interface RadioProps extends Omit<ComponentProps<"input">, "children" | "className" | "size" | "type"> {

package/dist/components/radio/index.js

@@ -37,7 +37,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",

package/dist/components/rate/Rate.types.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps, ReactNode } from "react";
 export type RateSize = "sm" | "md" | "lg" | "xl";
-export type RateColor = "primary" | "secondary" | "tertiary" | "warning";
+export type RateColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export interface RateCharacterRenderInfo {
     index: number;
     value: number;

package/dist/components/rate/index.js

@@ -46,10 +46,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",

package/dist/components/slider/Slider.types.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps, CSSProperties, KeyboardEvent, ReactNode } from "react";
 export type SliderValue = number | [number, number];
 export type SliderSize = "sm" | "md" | "lg";
-export type SliderColor = "primary" | "secondary" | "tertiary";
+export type SliderColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export interface SliderMarkConfig {
     label?: ReactNode;
     style?: CSSProperties;

package/dist/components/slider/index.js

@@ -55,9 +55,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",

package/dist/components/switch/Switch.types.d.ts

@@ -1,6 +1,6 @@
 import type { ChangeEvent, ComponentProps, ReactNode } from "react";
 export type SwitchSize = "sm" | "md" | "lg";
-export type SwitchColor = "primary" | "secondary" | "tertiary";
+export type SwitchColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export type SwitchChangeEvent = ChangeEvent<HTMLInputElement>;
 export interface SwitchProps extends Omit<ComponentProps<"input">, "checked" | "children" | "className" | "color" | "defaultChecked" | "onChange" | "size" | "type"> {
     checked?: boolean;

package/dist/components/switch/index.js

@@ -42,7 +42,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",

package/dist/components/tag/Tag.types.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps, ForwardRefExoticComponent, MouseEvent, ReactNode, RefAttributes } from "react";
-export type TagColor = "primary" | "secondary" | "tertiary" | "success" | "error" | "warning" | "info";
+export type TagColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export type TagType = TagColor | (string & {});
 export interface TagProps extends Omit<ComponentProps<"span">, "color"> {
     color?: TagType;

package/dist/components/tag/index.js

@@ -41,10 +41,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,

package/dist/components/timeline/Timeline.types.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps, ReactNode } from "react";
 export type TimelineMode = "left" | "right" | "alternate";
-export type TimelineColor = "primary" | "secondary" | "tertiary" | "success" | "error";
+export type TimelineColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export type TimelineSize = "sm" | "md" | "lg";
 export interface TimelineItem {
     children?: ReactNode;

package/dist/components/timeline/index.js

@@ -47,10 +47,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({

package/dist/components/tour/index.js

@@ -31,6 +31,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",

package/dist/generated/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.2.1";
+export declare const version = "0.3.1";

package/dist/index.d.ts

@@ -95,5 +95,6 @@ export * from "./components/transfer";
 export * from "./components/tree";
 export * from "./components/tree-select";
 export * from "./components/typography";
+export * from "./components/markdown";
 export * from "./components/upload";
 export * from "./components/watermark";