@duskmoon-dev/components 0.3.3 → 0.4.0

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

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

package/dist/components/fab/index.js

@@ -0,0 +1,480 @@
+"use client";
+
+// src/components/fab/Fab.tsx
+import { createContext, forwardRef, useContext, useId } 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/fab.ts
+var fabClass = "fab";
+var fabTriggerClass = "fab-trigger";
+var fabActionsClass = "fab-actions";
+var fabActionClass = "fab-action";
+var fabLabelClass = "fab-label";
+function getFabClasses({
+  contained,
+  start,
+  speedDial,
+  className
+}) {
+  return cn(fabClass, contained && "fab-contained", start && "fab-start", speedDial && "fab-speed-dial", className);
+}
+
+// src/components/button/Button.tsx
+import React from "react";
+import { createPortal } from "react-dom";
+
+// src/classes/button.ts
+var buttonBaseClass = "btn";
+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",
+  error: "btn-error"
+};
+var buttonAppearanceClasses = {
+  filled: "",
+  outline: "btn-outline",
+  tonal: "btn-tonal",
+  ghost: "btn-ghost",
+  text: "btn-text"
+};
+var buttonShapeClasses = {
+  rect: "",
+  circle: "btn-circle btn-icon",
+  square: "btn-square"
+};
+var buttonSizeClasses = {
+  xs: "btn-xs",
+  sm: "btn-sm",
+  md: "btn-md",
+  lg: "btn-lg"
+};
+var buttonBlockClass = "btn-block";
+var buttonIsLoadingClass = "btn-loading";
+function getButtonClasses({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  className
+}) {
+  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], shape === "circle" && size === "xs" && "btn-icon-sm", shape === "circle" && size === "sm" && "btn-icon-sm", shape === "circle" && size === "lg" && "btn-icon-lg", block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
+}
+
+// src/components/button/Button.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function isPromiseLike(value) {
+  return value !== null && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
+}
+function Button({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  disabled,
+  ref,
+  confirm,
+  onClick,
+  ...props
+}) {
+  const buttonRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  const cancelRef = React.useRef(null);
+  const approvalRef = React.useRef("idle");
+  const pendingRef = React.useRef(false);
+  const actionRef = React.useRef(0);
+  const operationRef = React.useRef(0);
+  const mountedRef = React.useRef(false);
+  const [portalTarget, setPortalTarget] = React.useState(null);
+  const [confirmLoading, setConfirmLoading] = React.useState(false);
+  const [confirmError, setConfirmError] = React.useState(false);
+  const generatedId = React.useId().replace(/:/g, "");
+  const popoverId = `button-confirm-${generatedId}`;
+  const titleId = `${popoverId}-title`;
+  const descriptionId = `${popoverId}-description`;
+  const anchor = `--${popoverId}-anchor`;
+  const hasConfirm = Boolean(confirm);
+  const confirmation = confirm && typeof confirm === "object" ? confirm : undefined;
+  const title = confirmation ? confirmation.title : "Confirm action";
+  const hasTitle = title !== undefined && title !== null && title !== false && title !== "";
+  const content = confirmation?.component ?? confirmation?.message ?? confirmation?.description;
+  const hasContent = content !== undefined && content !== null && content !== false && content !== "";
+  const mergedRef = React.useCallback((node) => {
+    buttonRef.current = node;
+    if (!node) {
+      if (typeof ref === "function")
+        ref(null);
+      else if (ref)
+        ref.current = null;
+      return;
+    }
+    const cleanup = typeof ref === "function" ? ref(node) : undefined;
+    if (ref && typeof ref !== "function")
+      ref.current = node;
+    return () => {
+      buttonRef.current = null;
+      if (typeof cleanup === "function")
+        cleanup();
+      else if (typeof ref === "function")
+        ref(null);
+      else if (ref)
+        ref.current = null;
+    };
+  }, [ref]);
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      operationRef.current += 1;
+    };
+  }, []);
+  React.useEffect(() => {
+    operationRef.current += 1;
+    approvalRef.current = "idle";
+    setConfirmError(false);
+    setPortalTarget(hasConfirm ? document.body : null);
+  }, [hasConfirm]);
+  function closePopover() {
+    if (popoverRef.current?.matches(":popover-open")) {
+      popoverRef.current.hidePopover();
+    }
+    buttonRef.current?.focus();
+  }
+  function handleClick(event) {
+    if (!confirm) {
+      onClick?.(event);
+      return;
+    }
+    if (approvalRef.current === "native") {
+      approvalRef.current = "idle";
+      return;
+    }
+    if (approvalRef.current === "action") {
+      approvalRef.current = "idle";
+      let result;
+      try {
+        result = onClick?.(event);
+      } catch {
+        event.preventDefault();
+        pendingRef.current = false;
+        setConfirmError(true);
+        return;
+      }
+      if (!isPromiseLike(result)) {
+        pendingRef.current = false;
+        closePopover();
+        return;
+      }
+      const userPreventedDefault = event.defaultPrevented;
+      event.preventDefault();
+      setConfirmLoading(true);
+      const action = actionRef.current;
+      const operation = operationRef.current;
+      Promise.resolve(result).then(() => {
+        if (!mountedRef.current || action !== actionRef.current)
+          return;
+        pendingRef.current = false;
+        setConfirmLoading(false);
+        if (operation !== operationRef.current)
+          return;
+        closePopover();
+        if (!userPreventedDefault && !buttonRef.current?.disabled) {
+          approvalRef.current = "native";
+          buttonRef.current?.click();
+          approvalRef.current = "idle";
+        }
+      }, () => {
+        if (!mountedRef.current || action !== actionRef.current)
+          return;
+        pendingRef.current = false;
+        setConfirmLoading(false);
+        if (operation !== operationRef.current)
+          return;
+        setConfirmError(true);
+        cancelRef.current?.focus();
+      });
+      return;
+    }
+    event.preventDefault();
+    if (disabled || isLoading || pendingRef.current)
+      return;
+    if (popoverRef.current?.matches(":popover-open")) {
+      closePopover();
+      return;
+    }
+    setConfirmError(false);
+    popoverRef.current?.showPopover();
+    cancelRef.current?.focus();
+  }
+  function handleConfirm(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const trigger = buttonRef.current;
+    if (disabled || isLoading || pendingRef.current || !trigger || trigger.disabled || !event.currentTarget.matches(":popover-open"))
+      return;
+    setConfirmError(false);
+    pendingRef.current = true;
+    actionRef.current += 1;
+    approvalRef.current = "action";
+    trigger.click();
+    if (approvalRef.current === "action") {
+      approvalRef.current = "idle";
+      pendingRef.current = false;
+    }
+  }
+  const classes = getButtonClasses({
+    color,
+    appearance,
+    shape,
+    size,
+    block,
+    isLoading,
+    className
+  });
+  const confirmClasses = getButtonClasses({
+    color,
+    size: "sm",
+    isLoading: confirmLoading
+  });
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs("button", {
+        ref: confirm ? mergedRef : ref,
+        className: classes,
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading,
+        "aria-disabled": disabled || isLoading,
+        ...props,
+        style: confirm ? { ...props.style, anchorName: anchor } : props.style,
+        "aria-haspopup": confirm ? "dialog" : props["aria-haspopup"],
+        "aria-controls": confirm ? popoverId : props["aria-controls"],
+        onClick: confirm ? handleClick : onClick,
+        children: [
+          isLoading && /* @__PURE__ */ jsx("span", {
+            className: "btn-spinner"
+          }),
+          !isLoading && leftIcon && /* @__PURE__ */ jsx("span", {
+            className: "btn-icon-left",
+            children: leftIcon
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: "btn-content",
+            children
+          }),
+          !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
+            className: "btn-icon-right",
+            children: rightIcon
+          })
+        ]
+      }),
+      confirm && portalTarget && createPortal(/* @__PURE__ */ jsxs("form", {
+        id: popoverId,
+        ref: popoverRef,
+        popover: "auto",
+        role: "dialog",
+        "aria-labelledby": hasTitle ? titleId : undefined,
+        "aria-label": hasTitle ? undefined : "Confirm action",
+        "aria-describedby": hasContent ? descriptionId : undefined,
+        className: "popover popover-confirm popover-bottom",
+        style: { positionAnchor: anchor },
+        onSubmit: handleConfirm,
+        onClick: (event) => event.stopPropagation(),
+        onToggle: (event) => {
+          if (!event.currentTarget.matches(":popover-open")) {
+            operationRef.current += 1;
+            if (event.currentTarget.contains(document.activeElement) || document.activeElement === document.body) {
+              buttonRef.current?.focus();
+            }
+          }
+        },
+        children: [
+          hasTitle && /* @__PURE__ */ jsx("div", {
+            className: "popover-header",
+            children: /* @__PURE__ */ jsx("h3", {
+              id: titleId,
+              className: "popover-title",
+              children: title
+            })
+          }),
+          hasContent && /* @__PURE__ */ jsx("div", {
+            id: descriptionId,
+            className: "popover-body",
+            children: content
+          }),
+          confirmError && /* @__PURE__ */ jsx("div", {
+            role: "alert",
+            className: "popover-body",
+            children: "The action failed. Please try again."
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "popover-footer",
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                ref: cancelRef,
+                type: "button",
+                className: "btn btn-text btn-sm",
+                popoverTarget: popoverId,
+                popoverTargetAction: "hide",
+                disabled: confirmLoading,
+                children: confirmation?.cancelText ?? "Cancel"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "submit",
+                className: confirmClasses,
+                disabled: disabled || isLoading || confirmLoading,
+                "aria-busy": confirmLoading,
+                children: confirmation?.confirmText ?? "Confirm"
+              })
+            ]
+          })
+        ]
+      }), portalTarget)
+    ]
+  });
+}
+// src/components/fab/Fab.tsx
+import { jsx as jsx2, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+var FabContext = createContext(null);
+function useFabContext() {
+  const context = useContext(FabContext);
+  if (!context)
+    throw new Error("Fab subcomponents must be inside Fab");
+  return context;
+}
+var Trigger = forwardRef(({ extended, className, type = "button", ...props }, ref) => {
+  const { actionsId, speedDial } = useFabContext();
+  return /* @__PURE__ */ jsx2(Button, {
+    ...props,
+    ref,
+    type,
+    popoverTarget: speedDial ? actionsId : undefined,
+    className: cn(fabTriggerClass, extended && "fab-extended", className)
+  });
+});
+Trigger.displayName = "Fab.Trigger";
+var Actions = forwardRef(({ className, ...props }, ref) => {
+  const { actionsId } = useFabContext();
+  return /* @__PURE__ */ jsx2("div", {
+    ...props,
+    ref,
+    id: actionsId,
+    popover: "auto",
+    className: cn(fabActionsClass, className)
+  });
+});
+Actions.displayName = "Fab.Actions";
+var Action = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", {
+  ...props,
+  ref,
+  className: cn(fabActionClass, className)
+}));
+Action.displayName = "Fab.Action";
+var Label = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2("span", {
+  ...props,
+  ref,
+  className: cn(fabLabelClass, className)
+}));
+Label.displayName = "Fab.Label";
+var FabRoot = forwardRef(({
+  contained,
+  start,
+  speedDial = false,
+  label,
+  actions,
+  extended,
+  buttonProps,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const actionsId = `fab-actions-${useId().replace(/:/g, "")}`;
+  const hasActions = actions != null;
+  const resolvedSpeedDial = speedDial || hasActions;
+  return /* @__PURE__ */ jsx2(FabContext.Provider, {
+    value: { actionsId, speedDial: resolvedSpeedDial },
+    children: /* @__PURE__ */ jsx2("div", {
+      ...props,
+      ref,
+      className: getFabClasses({
+        contained,
+        start,
+        speedDial: resolvedSpeedDial,
+        className
+      }),
+      children: label != null ? /* @__PURE__ */ jsxs2(Fragment2, {
+        children: [
+          /* @__PURE__ */ jsx2(Trigger, {
+            ...buttonProps,
+            type: "button",
+            "aria-label": label,
+            extended,
+            className: cn(!extended && "btn-icon", buttonProps?.className),
+            children
+          }),
+          hasActions && /* @__PURE__ */ jsx2(Actions, {
+            children: actions
+          })
+        ]
+      }) : children
+    })
+  });
+});
+FabRoot.displayName = "Fab";
+FabRoot.Trigger = Trigger;
+FabRoot.Actions = Actions;
+FabRoot.Action = Action;
+FabRoot.Label = Label;
+var Fab = FabRoot;
+var FabAction = forwardRef(({ label, children, ...props }, ref) => /* @__PURE__ */ jsxs2(Action, {
+  ...props,
+  ref,
+  children: [
+    label ? /* @__PURE__ */ jsx2(Label, {
+      children: label
+    }) : null,
+    children
+  ]
+}));
+FabAction.displayName = "FabAction";
+export {
+  Fab,
+  FabAction
+};

package/dist/components/form/Form.types.d.ts

@@ -52,6 +52,7 @@ export interface FormItemProps extends Omit<ComponentProps<"div">, "children" |
     children?: ReactNode;
     name?: FormNamePath;
     label?: ReactNode;
+    htmlFor?: string;
     rules?: FormRule[];
     required?: boolean;
     valuePropName?: string;

package/dist/components/form/index.js

@@ -9,6 +9,7 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
+  useId,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -308,6 +309,7 @@ var FormItem = forwardRef(({
   className,
   extra,
   help,
+  htmlFor,
   label,
   name,
   noStyle,
@@ -318,9 +320,13 @@ var FormItem = forwardRef(({
   ...props
 }, ref) => {
   const context = useContext(FormContext);
+  const generatedId = useId();
   useFormVersion(context?.form);
   const fieldErrors = name && context ? context.getFieldError(name) : [];
   const ruleRequired = required ?? rules.some((rule) => rule.required);
+  const child = isValidElement(children) && children.type !== React.Fragment ? children : null;
+  const childProps = child?.props;
+  const controlId = label && !noStyle && htmlFor === undefined && child ? childProps?.id ?? generatedId : undefined;
   useEffect(() => {
     if (!name || !context) {
       return;
@@ -328,14 +334,18 @@ var FormItem = forwardRef(({
     return context.registerField(name, rules);
   }, [context, name, rules]);
   function renderControl() {
-    if (!name || !context || !isValidElement(children)) {
+    if (!child || !childProps) {
       return children;
     }
+    const associationProps = controlId && childProps.id == null ? { id: controlId } : {};
+    if (!name || !context) {
+      return controlId && childProps.id == null ? React.cloneElement(child, associationProps) : children;
+    }
     const key = nameKey(name);
     const value = context.form.getFieldValue(name);
-    const childProps = children.props;
     const originalTrigger = childProps[trigger];
-    return React.cloneElement(children, {
+    return React.cloneElement(child, {
+      ...associationProps,
       [valuePropName]: valuePropName === "checked" ? Boolean(value) : value ?? "",
       disabled: childProps.disabled ?? context.disabled,
       [trigger]: (...args) => {
@@ -363,6 +373,7 @@ var FormItem = forwardRef(({
     children: [
       label ? /* @__PURE__ */ jsx("label", {
         className: formItemLabelClass,
+        htmlFor: htmlFor ?? controlId,
         children: label
       }) : null,
       /* @__PURE__ */ jsx("div", {

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";