@duskmoon-dev/components 0.3.3 → 0.4.1

package/dist/components/json-schema-form/json-form-widgets.d.ts

@@ -0,0 +1,26 @@
+import type { JsonValue, RenderableSchema } from "./json-schema-form";
+export declare const widgetNames: readonly ["input", "input-number", "checkbox", "radio", "radio-group", "checkbox-group", "color-picker", "date-picker", "dm-date-picker", "mentions", "otp-input", "rate", "segmented", "select", "slider", "switch", "time-picker", "transfer", "tree-select", "cascader", "upload"];
+export type WidgetName = (typeof widgetNames)[number];
+export type WidgetOption = {
+    value: string | number | boolean;
+    label: string;
+    children?: WidgetOption[];
+    disabled?: boolean;
+};
+export type OrientationWidgetConfig = {
+    orientation?: "horizontal" | "vertical";
+};
+export type WidgetConfig = OrientationWidgetConfig & {
+    length?: number;
+    count?: number;
+    allowHalf?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+export declare const flattenOptions: (options: WidgetOption[]) => WidgetOption[];
+export declare function widgetConfig(schema: RenderableSchema): WidgetConfig;
+export declare function naturalWidgetValue(schema: RenderableSchema): JsonValue | undefined;
+export declare function optionsFor(schema: RenderableSchema): WidgetOption[];
+export declare function inspectWidgets(input: Record<string, unknown>, location: string): void;
+export declare function widgetValueError(schema: RenderableSchema, value: JsonValue): string | undefined;

package/dist/components/json-schema-form/json-schema-form.d.ts

@@ -0,0 +1,50 @@
+import { type WidgetName, type WidgetOption, type WidgetConfig } from "./json-form-widgets";
+export type JsonValue = null | boolean | number | string | JsonValue[] | {
+    [key: string]: JsonValue;
+};
+export type FormValue = {
+    [key: string]: JsonValue;
+};
+export type RenderableSchema = {
+    type: "object" | "array" | "string" | "number" | "integer" | "boolean";
+    $schema?: "https://json-schema.org/draft/2020-12/schema";
+    $id?: string;
+    $comment?: string;
+    title?: string;
+    description?: string;
+    default?: JsonValue;
+    enum?: JsonValue[];
+    properties?: Record<string, RenderableSchema>;
+    required?: string[];
+    items?: RenderableSchema;
+    additionalProperties?: false;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    format?: string;
+    minItems?: number;
+    maxItems?: number;
+    uniqueItems?: boolean;
+    minProperties?: number;
+    maxProperties?: number;
+    exclusiveMinimum?: number;
+    exclusiveMaximum?: number;
+    minimum?: number;
+    maximum?: number;
+    multipleOf?: number;
+    "x-widget"?: WidgetName;
+    "x-options"?: WidgetOption[];
+    "x-widget-options"?: WidgetConfig;
+};
+/** Errors keyed by escaped JSON Pointer, with an empty key for form errors. */
+export type FormErrors = Record<string, string>;
+export type FormValidationResult = {
+    valid: boolean;
+    errors: FormErrors;
+};
+export type CompiledForm = {
+    schema: RenderableSchema;
+    initialValue: () => FormValue;
+    validate: (value: FormValue) => FormValidationResult;
+};
+export declare function compileForm(input: unknown): CompiledForm;

package/dist/components/megamenu/Megamenu.d.ts

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

package/dist/components/megamenu/Megamenu.types.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export interface MegamenuProps extends Omit<ComponentProps<"nav">, "ref"> {
+    trigger?: ReactNode;
+    panelHeading?: ReactNode;
+    panel?: ReactNode;
+    mobile?: ReactNode;
+    leading?: ReactNode;
+    fullWidth?: boolean;
+}
+export type MegamenuBarProps = Omit<ComponentProps<"ul">, "ref">;
+export type MegamenuItemProps = Omit<ComponentProps<"li">, "ref">;
+export type MegamenuTriggerProps = Omit<ComponentProps<"button">, "ref">;
+export interface MegamenuPanelProps extends Omit<ComponentProps<"div">, "ref"> {
+    full?: boolean;
+}
+export type MegamenuGroupProps = Omit<ComponentProps<"section">, "ref">;
+export type MegamenuHeadingProps = Omit<ComponentProps<"h2">, "ref">;
+export type MegamenuSupportingProps = Omit<ComponentProps<"p">, "ref">;
+export interface MegamenuMobileProps extends Omit<ComponentProps<"details">, "ref"> {
+    summary: ReactNode;
+}
+export interface MegamenuComponent extends ForwardRefExoticComponent<MegamenuProps & RefAttributes<HTMLElement>> {
+    Bar: ForwardRefExoticComponent<MegamenuBarProps & RefAttributes<HTMLUListElement>>;
+    Item: ForwardRefExoticComponent<MegamenuItemProps & RefAttributes<HTMLLIElement>>;
+    Trigger: ForwardRefExoticComponent<MegamenuTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Panel: ForwardRefExoticComponent<MegamenuPanelProps & RefAttributes<HTMLDivElement>>;
+    Grid: ForwardRefExoticComponent<Omit<ComponentProps<"div">, "ref"> & RefAttributes<HTMLDivElement>>;
+    Group: ForwardRefExoticComponent<MegamenuGroupProps & RefAttributes<HTMLElement>>;
+    Heading: ForwardRefExoticComponent<MegamenuHeadingProps & RefAttributes<HTMLHeadingElement>>;
+    Supporting: ForwardRefExoticComponent<MegamenuSupportingProps & RefAttributes<HTMLParagraphElement>>;
+    Mobile: ForwardRefExoticComponent<MegamenuMobileProps & RefAttributes<HTMLDetailsElement>>;
+}

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

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

package/dist/components/megamenu/index.js

@@ -0,0 +1,214 @@
+"use client";
+
+// src/components/megamenu/Megamenu.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId
+} from "react";
+
+// src/classes/megamenu.ts
+var megamenuClass = "megamenu";
+var megamenuBarClass = "megamenu-bar";
+var megamenuTriggerClass = "megamenu-trigger";
+var megamenuPanelClass = "megamenu-panel";
+var megamenuGridClass = "megamenu-grid";
+var megamenuGroupClass = "megamenu-group";
+var megamenuHeadingClass = "megamenu-heading";
+var megamenuSupportingClass = "megamenu-supporting";
+var megamenuMobileClass = "megamenu-mobile";
+
+// ../../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/components/megamenu/Megamenu.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var ItemContext = createContext(null);
+function useItem() {
+  const context = useContext(ItemContext);
+  if (!context)
+    throw new Error("Megamenu.Trigger and Panel require Megamenu.Item");
+  return context;
+}
+var Bar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", {
+  ...props,
+  ref,
+  className: cn(megamenuBarClass, "megamenu-desktop", className)
+}));
+Bar.displayName = "Megamenu.Bar";
+var Item = forwardRef(({ style, children, ...props }, ref) => {
+  const key = useId().replace(/:/g, "");
+  const panelId = `megamenu-panel-${key}`;
+  const anchorStyle = {
+    ...style,
+    "--megamenu-anchor": `--megamenu-${key}`
+  };
+  return /* @__PURE__ */ jsx(ItemContext.Provider, {
+    value: { panelId },
+    children: /* @__PURE__ */ jsx("li", {
+      ...props,
+      ref,
+      style: anchorStyle,
+      children
+    })
+  });
+});
+Item.displayName = "Megamenu.Item";
+var Trigger = forwardRef(({ className, type = "button", ...props }, ref) => {
+  const { panelId } = useItem();
+  return /* @__PURE__ */ jsx("button", {
+    ...props,
+    ref,
+    type,
+    popoverTarget: panelId,
+    className: cn(megamenuTriggerClass, className)
+  });
+});
+Trigger.displayName = "Megamenu.Trigger";
+var Panel = forwardRef(({ full, className, ...props }, ref) => {
+  const { panelId } = useItem();
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    id: panelId,
+    popover: "auto",
+    className: cn(megamenuPanelClass, full && "megamenu-panel-full", className)
+  });
+});
+Panel.displayName = "Megamenu.Panel";
+var Grid = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(megamenuGridClass, className)
+}));
+Grid.displayName = "Megamenu.Grid";
+var Group = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("section", {
+  ...props,
+  ref,
+  className: cn(megamenuGroupClass, className)
+}));
+Group.displayName = "Megamenu.Group";
+var Heading = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h2", {
+  ...props,
+  ref,
+  className: cn(megamenuHeadingClass, className)
+}));
+Heading.displayName = "Megamenu.Heading";
+var Supporting = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", {
+  ...props,
+  ref,
+  className: cn(megamenuSupportingClass, className)
+}));
+Supporting.displayName = "Megamenu.Supporting";
+var Mobile = forwardRef(({ summary, className, children, ...props }, ref) => /* @__PURE__ */ jsxs("details", {
+  ...props,
+  ref,
+  className: cn(megamenuMobileClass, className),
+  children: [
+    /* @__PURE__ */ jsx("summary", {
+      children: summary
+    }),
+    children
+  ]
+}));
+Mobile.displayName = "Megamenu.Mobile";
+var MegamenuRoot = forwardRef(({
+  trigger,
+  panelHeading,
+  panel,
+  mobile,
+  leading,
+  fullWidth,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const key = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const panelId = `dm-megamenu-${key}`;
+  const headingId = `${panelId}-heading`;
+  const anchorStyle = {
+    "--megamenu-anchor": `--dm-megamenu-${key}`
+  };
+  return /* @__PURE__ */ jsx("nav", {
+    ...props,
+    ref,
+    className: cn(megamenuClass, className),
+    children: trigger != null ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsxs(Bar, {
+          children: [
+            leading != null && /* @__PURE__ */ jsx("li", {
+              children: leading
+            }),
+            /* @__PURE__ */ jsxs("li", {
+              children: [
+                /* @__PURE__ */ jsx("button", {
+                  type: "button",
+                  className: megamenuTriggerClass,
+                  popoverTarget: panelId,
+                  style: anchorStyle,
+                  children: trigger
+                }),
+                /* @__PURE__ */ jsxs("div", {
+                  id: panelId,
+                  className: cn(megamenuPanelClass, fullWidth && "megamenu-panel-full"),
+                  popover: "auto",
+                  "aria-labelledby": headingId,
+                  style: anchorStyle,
+                  children: [
+                    /* @__PURE__ */ jsx(Heading, {
+                      id: headingId,
+                      children: panelHeading
+                    }),
+                    panel
+                  ]
+                })
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: megamenuMobileClass,
+          children: mobile
+        })
+      ]
+    }) : children
+  });
+});
+MegamenuRoot.displayName = "Megamenu";
+MegamenuRoot.Bar = Bar;
+MegamenuRoot.Item = Item;
+MegamenuRoot.Trigger = Trigger;
+MegamenuRoot.Panel = Panel;
+MegamenuRoot.Grid = Grid;
+MegamenuRoot.Group = Group;
+MegamenuRoot.Heading = Heading;
+MegamenuRoot.Supporting = Supporting;
+MegamenuRoot.Mobile = Mobile;
+var Megamenu = MegamenuRoot;
+export {
+  Megamenu
+};

package/dist/components/modal/index.js

@@ -5,6 +5,7 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useId,
   useRef,
   useState
 } from "react";
@@ -35,22 +36,12 @@ function cn(...inputs) {
   return clsx(inputs);
 }
 // src/classes/modal.ts
-var modalBackdropClass = "modal-backdrop";
-var modalOpenClass = "modal-open";
-var modalBackdropCenterClass = "modal-backdrop-center";
 var modalClass = "modal";
 var modalHeaderClass = "modal-header";
 var modalTitleClass = "modal-title";
 var modalCloseClass = "modal-close";
 var modalBodyClass = "modal-body";
 var modalFooterClass = "modal-footer";
-function getModalBackdropClasses({
-  open,
-  centered,
-  className
-}) {
-  return cn(modalBackdropClass, open && modalOpenClass, centered && modalBackdropCenterClass, className);
-}
 function getModalClasses({ className }) {
   return cn(modalClass, className);
 }
@@ -81,6 +72,13 @@ function getModalStyle({
     ...width !== undefined ? { width } : undefined
   };
 }
+function showNativeModal(dialog) {
+  if (!dialog.isConnected || dialog.matches(":modal"))
+    return;
+  if (dialog.open)
+    dialog.close();
+  dialog.showModal();
+}
 var ModalBase = forwardRef(({
   open,
   defaultOpen = false,
@@ -103,15 +101,41 @@ var ModalBase = forwardRef(({
   maskClassName,
   closeIcon = defaultCloseIcon,
   style,
-  role = "dialog",
+  role,
   ...props
 }, ref) => {
   const controlled = open !== undefined;
   const [innerOpen, setInnerOpen] = useState(defaultOpen);
   const mergedOpen = controlled ? Boolean(open) : innerOpen;
   const previousOpen = useRef(mergedOpen);
+  const desiredOpen = useRef(mergedOpen);
+  desiredOpen.current = mergedOpen;
+  const dialogRef = useRef(null);
+  const cancelRequestRef = useRef(null);
+  const programmaticClose = useRef(false);
+  const titleId = useId();
+  const surfaceWidth = width ?? style?.width;
+  const callerNamed = props["aria-label"] != null || props["aria-labelledby"] != null;
   const showClose = closable && closeIcon !== null && closeIcon !== false;
   const body = children ?? content;
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog)
+      return;
+    if (mergedOpen) {
+      programmaticClose.current = false;
+      showNativeModal(dialog);
+    } else if (dialog.open) {
+      programmaticClose.current = true;
+      dialog.close();
+    }
+    return () => {
+      if (dialog.open) {
+        programmaticClose.current = true;
+        dialog.close();
+      }
+    };
+  }, [mergedOpen]);
   useEffect(() => {
     if (previousOpen.current === mergedOpen) {
       return;
@@ -128,73 +152,109 @@ var ModalBase = forwardRef(({
   const handleOk = useCallback((event) => {
     onOk?.(event);
   }, [onOk]);
-  const handleMaskClick = useCallback((event) => {
-    if (event.target !== event.currentTarget || !maskClosable) {
+  const requestCancel = useCallback(() => {
+    cancelRequestRef.current?.click();
+  }, []);
+  const handleNativeClose = useCallback(() => {
+    const dialog = dialogRef.current;
+    if (!dialog || dialog.open || programmaticClose.current) {
+      programmaticClose.current = false;
       return;
     }
-    close(event);
-  }, [close, maskClosable]);
+    if (desiredOpen.current) {
+      requestCancel();
+      if (controlled) {
+        queueMicrotask(() => {
+          if (desiredOpen.current) {
+            showNativeModal(dialog);
+          }
+        });
+      }
+    }
+  }, [controlled, requestCancel]);
   if (!mergedOpen && destroyOnClose) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", {
-    "aria-hidden": mergedOpen ? undefined : true,
-    role: "presentation",
-    className: getModalBackdropClasses({
-      open: mergedOpen,
-      centered,
-      className: maskClassName
-    }),
-    onMouseDown: handleMaskClick,
-    children: /* @__PURE__ */ jsxs("div", {
-      ...props,
-      ref,
-      role,
-      "aria-modal": mergedOpen ? true : undefined,
-      className: getModalClasses({ className }),
-      style: getModalStyle({ width, style }),
-      children: [
-        title !== undefined || showClose ? /* @__PURE__ */ jsxs("div", {
-          className: modalHeaderClass,
-          children: [
-            title !== undefined ? /* @__PURE__ */ jsx("h2", {
-              className: modalTitleClass,
-              children: title
-            }) : null,
-            showClose ? /* @__PURE__ */ jsx("button", {
-              type: "button",
-              className: modalCloseClass,
-              "aria-label": "Close",
-              onClick: close,
-              children: closeIcon
-            }) : null
-          ]
-        }) : null,
-        /* @__PURE__ */ jsx("div", {
-          className: modalBodyClass,
-          children: body
-        }),
-        footer === null ? null : /* @__PURE__ */ jsx("div", {
-          className: modalFooterClass,
-          children: footer !== undefined ? footer : /* @__PURE__ */ jsxs(Fragment, {
+  return /* @__PURE__ */ jsxs("dialog", {
+    ref: dialogRef,
+    role: role === "alertdialog" ? role : undefined,
+    "aria-label": props["aria-label"] ?? (!callerNamed && title == null ? "Modal" : undefined),
+    "aria-labelledby": props["aria-labelledby"] ?? (!callerNamed && title != null ? titleId : undefined),
+    "aria-describedby": props["aria-describedby"],
+    className: getModalClasses({ className: cn(maskClassName, centered ? "modal-middle" : "modal-top") }),
+    style: surfaceWidth !== undefined ? { width: surfaceWidth, maxWidth: surfaceWidth } : undefined,
+    onCancel: (event) => {
+      event.preventDefault();
+      requestCancel();
+    },
+    onClose: handleNativeClose,
+    onMouseDown: (event) => {
+      if (!maskClosable || event.target !== event.currentTarget)
+        return;
+      const { left, right, top, bottom } = event.currentTarget.getBoundingClientRect();
+      if (event.clientX < left || event.clientX > right || event.clientY < top || event.clientY > bottom) {
+        requestCancel();
+      }
+    },
+    children: [
+      /* @__PURE__ */ jsx("button", {
+        ref: cancelRequestRef,
+        type: "button",
+        hidden: true,
+        tabIndex: -1,
+        "aria-hidden": "true",
+        onClick: close
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        ...props,
+        ref,
+        role,
+        className: cn("modal-box", "react-modal-box", className),
+        style: getModalStyle({ width, style }),
+        children: [
+          title !== undefined || showClose ? /* @__PURE__ */ jsxs("div", {
+            className: modalHeaderClass,
             children: [
-              /* @__PURE__ */ jsx("button", {
+              title !== undefined ? /* @__PURE__ */ jsx("h2", {
+                id: titleId,
+                className: modalTitleClass,
+                children: title
+              }) : null,
+              showClose ? /* @__PURE__ */ jsx("button", {
                 type: "button",
+                className: modalCloseClass,
+                "aria-label": "Close",
                 onClick: close,
-                children: cancelText
-              }),
-              /* @__PURE__ */ jsx("button", {
-                type: "button",
-                "aria-busy": confirmLoading,
-                disabled: confirmLoading,
-                onClick: handleOk,
-                children: okText
-              })
+                children: closeIcon
+              }) : null
             ]
+          }) : null,
+          /* @__PURE__ */ jsx("div", {
+            className: modalBodyClass,
+            children: body
+          }),
+          footer === null ? null : /* @__PURE__ */ jsx("div", {
+            className: modalFooterClass,
+            children: footer !== undefined ? footer : /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                /* @__PURE__ */ jsx("button", {
+                  type: "button",
+                  onClick: close,
+                  children: cancelText
+                }),
+                /* @__PURE__ */ jsx("button", {
+                  type: "button",
+                  "aria-busy": confirmLoading,
+                  disabled: confirmLoading,
+                  onClick: handleOk,
+                  children: okText
+                })
+              ]
+            })
           })
-        })
-      ]
-    })
+        ]
+      })
+    ]
   });
 });
 ModalBase.displayName = "Modal";

package/dist/components/otp-input/OtpInput.d.ts

@@ -0,0 +1,2 @@
+import type { OtpInputProps } from "./OtpInput.types";
+export declare const OtpInput: import("react").ForwardRefExoticComponent<Omit<OtpInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/otp-input/OtpInput.types.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps } from "react";
+export type OtpInputLength = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type OtpInputSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type OtpInputVariant = "outlined" | "filled" | "underlined";
+export type OtpInputColor = "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "accent" | "neutral" | "base";
+export interface OtpInputProps extends Omit<ComponentProps<"input">, "children" | "className" | "size" | "type"> {
+    /** Number of decorative slots. Native input constraints default to this length. */
+    length?: OtpInputLength;
+    size?: OtpInputSize;
+    variant?: OtpInputVariant;
+    color?: OtpInputColor;
+    /** Additional class names for the wrapping label. */
+    wrapperClassName?: string;
+    /** Additional class names for the native input. */
+    className?: string;
+}

package/dist/components/otp-input/index.d.ts

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