@duskmoon-dev/components 0.2.1 → 0.3.1

package/README.md

@@ -1,18 +1,26 @@
 # @duskmoon-dev/components
 
-The core React component library for Duskmoon.
+The DuskMoon React component package.
 
 ## Installation
 
 ```bash
-bun add @duskmoon-dev/components
+bun add @duskmoon-dev/components @duskmoon-dev/core react react-dom
+```
+
+Import the stylesheet once in your app:
+
+```tsx
+import "@duskmoon-dev/components/styles.css";
 ```
 
 ## Features
 
-- **TypeScript First**: Written entirely in TypeScript for excellent developer experience.
-- **Optimized for Next.js**: Compatible with Next.js 15 and React 19.
-- **Modular Exports**: Import only what you need.
+- **React 19 ready**: Components and examples target the current React runtime.
+- **TypeScript first**: Public props and helper APIs ship with declarations.
+- **Modular exports**: Import from the root package or from component subpaths.
+- **DuskMoon styling**: Component classes and CSS are backed by
+  `@duskmoon-dev/core`.
 
 ## Usage
 
@@ -25,6 +33,23 @@ export default function MyComponent() {
 }
 ```
 
+Root imports are also supported:
+
+```tsx
+import { Button, DmTable, theme } from "@duskmoon-dev/components";
+```
+
+## Public Surface
+
+- 71 standard components such as `Button`, `Table`, `Modal`, `Select`, and
+  `Typography`.
+- 21 DuskMoon workflow components such as `DmLayout`, `DmSearch`, `DmTable`,
+  `DmProTable`, and `DmToolbar`.
+- 13 infrastructure exports including `theme`, `version`,
+  `unstableSetRender`, `GetProps`, `GetRef`, and DuskMoon theme helpers.
+- Component subpath exports follow `@duskmoon-dev/components/{component-id}`,
+  for example `@duskmoon-dev/components/date-picker`.
+
 ## Development
 
 ```bash
@@ -36,4 +61,7 @@ bun run test
 
 # Typecheck
 bun run typecheck
+
+# Check parity manifest coverage
+bun run parity:components
 ```

package/dist/classes/index.d.ts

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

package/dist/classes/index.js

@@ -5,6 +5,12 @@ import {
 // 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",
@@ -83,6 +89,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",
@@ -155,6 +164,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",
@@ -213,6 +226,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",
@@ -400,7 +416,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",
@@ -610,10 +633,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: "",
@@ -1514,13 +1543,16 @@ function getPopconfirmClasses({
 // 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",
@@ -1580,7 +1612,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",
@@ -1626,10 +1665,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",
@@ -1846,9 +1891,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",
@@ -2016,7 +2068,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",
@@ -2104,10 +2163,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,
@@ -2223,10 +2285,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({
@@ -2510,6 +2577,18 @@ function getTypographyLinkClasses({
 }) {
   return cn(typographyLinkClass, status && typographyStatusClasses[status], disabled && typographyDisabledClass, ellipsis && typographyEllipsisClass, className);
 }
+// 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/classes/upload.ts
 var uploadBaseClass = "file-upload";
 var uploadTriggerClass = "file-upload-trigger";
@@ -2994,6 +3073,11 @@ export {
   mentionsNoOptionsClass,
   mentionsDropdownClass,
   mentionsBaseClass,
+  markdownFrontMatterClass,
+  markdownColorCodeClass,
+  markdownColorChipSwatchClass,
+  markdownColorChipClass,
+  markdownBaseClass,
   listSizeClasses,
   listItemTrailingClass,
   listItemTextClass,
@@ -3128,6 +3212,7 @@ export {
   getMentionsOptionClasses,
   getMentionsDropdownClasses,
   getMentionsClasses,
+  getMarkdownClasses,
   getListItemClasses,
   getListClasses,
   getLayoutSiderClasses,

package/dist/classes/markdown.d.ts

@@ -0,0 +1,9 @@
+export declare const markdownBaseClass = "markdown-body";
+export declare const markdownFrontMatterClass = "dm-front-matter";
+export declare const markdownColorCodeClass = "dm-color-code";
+export declare const markdownColorChipClass = "dm-color-chip";
+export declare const markdownColorChipSwatchClass = "dm-color-chip-swatch";
+export declare function getMarkdownClasses({ variant, className, }: {
+    variant?: string;
+    className?: string;
+}): string;

package/dist/components/alert/Alert.types.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "react";
-export type AlertColor = "info" | "success" | "warning" | "error";
+export type AlertColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export type AlertAppearance = "filled" | "outline" | "tonal";
 export interface AlertProps extends ComponentProps<"div"> {
     color?: AlertColor;

package/dist/components/alert/index.js

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

package/dist/components/auto-complete/AutoComplete.types.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
 export type AutoCompleteSize = "sm" | "md" | "lg";
-export type AutoCompleteColor = "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error";
+export type AutoCompleteColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export interface AutoCompleteOptionType {
     value: string;
     label?: ReactNode;

package/dist/components/auto-complete/index.js

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

package/dist/components/badge/Badge.types.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "react";
-export type BadgeColor = "primary" | "secondary" | "info" | "success" | "warning" | "error";
+export type BadgeColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export type BadgeAppearance = "filled" | "outline" | "tonal" | "ghost";
 export type BadgeSize = "sm" | "md" | "lg";
 export interface BadgeProps extends ComponentProps<"div"> {

package/dist/components/badge/index.js

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

package/dist/components/button/Button.types.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "react";
-export type ButtonColor = "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error";
+export type ButtonColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export type ButtonAppearance = "filled" | "outline" | "tonal" | "ghost" | "text";
 export type ButtonShape = "rect" | "circle" | "square";
 export type ButtonSize = "xs" | "sm" | "md" | "lg";

package/dist/components/button/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/checkbox/Checkbox.types.d.ts

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

package/dist/components/checkbox/index.js

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

package/dist/components/divider/Divider.types.d.ts

@@ -2,7 +2,7 @@ import type { ComponentProps } from "react";
 export type DividerOrientation = "horizontal" | "vertical";
 export type DividerVariant = "solid" | "dashed" | "dotted";
 export type DividerThickness = "thin" | "medium" | "thick";
-export type DividerColor = "neutral" | "primary" | "secondary" | "tertiary";
+export type DividerColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export type DividerSpacing = "normal" | "compact" | "comfortable" | "spacious";
 export interface DividerProps extends ComponentProps<"div"> {
     orientation?: DividerOrientation;

package/dist/components/divider/index.js

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

package/dist/components/dm-drawer/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/dm-page-header/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/dm-pro-table/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/dm-query/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/dm-search/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/dm-table/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/dm-toolbar/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/dropdown/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/markdown/Markdown.d.ts

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

package/dist/components/markdown/Markdown.types.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+export type MarkdownFrontMatterMode = "render" | "hidden" | "disabled";
+export interface MarkdownProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Markdown source to render. */
+    markdown?: string;
+    /** Convert soft line endings to `<br>` elements. @default true */
+    breaks?: boolean;
+    /** Add a visual swatch to inline code containing a valid CSS color. @default true */
+    colorChips?: boolean;
+    /** Control handling of YAML front matter at the beginning of the source. @default "render" */
+    frontMatter?: MarkdownFrontMatterMode;
+    /** Optional color variant used to build the `markdown-body-{variant}` class. */
+    variant?: string;
+}

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

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