@duskmoon-dev/components 0.1.2

package/dist/components/float-button/FloatButton.types.d.ts

@@ -0,0 +1,44 @@
+import type { ComponentPropsWithoutRef, ForwardRefExoticComponent, MouseEventHandler, ReactNode, RefAttributes } from "react";
+export type FloatButtonType = "default" | "primary";
+export type FloatButtonShape = "circle" | "square";
+export type FloatButtonGroupTrigger = "click" | "hover";
+export type FloatButtonTooltipPlacement = "top" | "bottom" | "left" | "right";
+export interface FloatButtonTooltipConfig {
+    title?: ReactNode;
+    placement?: FloatButtonTooltipPlacement;
+}
+export type FloatButtonTooltip = ReactNode | FloatButtonTooltipConfig;
+export interface FloatButtonBadge {
+    count?: ReactNode;
+    dot?: boolean;
+    color?: string;
+    overflowCount?: number;
+}
+export interface FloatButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "children" | "onClick" | "type"> {
+    icon?: ReactNode;
+    type?: FloatButtonType;
+    shape?: FloatButtonShape;
+    tooltip?: FloatButtonTooltip;
+    description?: ReactNode;
+    badge?: FloatButtonBadge;
+    href?: string;
+    target?: string;
+    children?: ReactNode;
+    onClick?: MouseEventHandler<HTMLElement>;
+}
+export interface FloatButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "onClick"> {
+    shape?: FloatButtonShape;
+    trigger?: FloatButtonGroupTrigger;
+    open?: boolean;
+    closeIcon?: ReactNode;
+    children?: ReactNode;
+    onClick?: MouseEventHandler<HTMLElement>;
+}
+export interface FloatButtonBackTopProps extends Omit<FloatButtonProps, "href" | "target"> {
+    visibilityHeight?: number;
+    target?: () => Window | HTMLElement | null;
+}
+export type FloatButtonComponent = ForwardRefExoticComponent<FloatButtonProps & RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & {
+    Group: ForwardRefExoticComponent<FloatButtonGroupProps & RefAttributes<HTMLDivElement>>;
+    BackTop: ForwardRefExoticComponent<FloatButtonBackTopProps & RefAttributes<HTMLButtonElement>>;
+};

package/dist/components/float-button/index.d.ts

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

package/dist/components/float-button/index.js

@@ -0,0 +1,308 @@
+"use client";
+
+// src/components/float-button/FloatButton.tsx
+import React, {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} 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/float-button.ts
+var floatButtonBaseClass = "float-button";
+var floatButtonIconClass = "float-button-icon";
+var floatButtonDescriptionClass = "float-button-description";
+var floatButtonBadgeClass = "float-button-badge";
+var floatButtonTooltipClass = "float-button-tooltip";
+var floatButtonGroupClass = "float-button-group";
+var floatButtonGroupOpenClass = "float-button-group-open";
+var floatButtonBackTopClass = "float-button-back-top";
+var floatButtonBackTopVisibleClass = "float-button-back-top-visible";
+var floatButtonTypeClasses = {
+  default: "btn btn-secondary btn-tonal",
+  primary: "btn btn-primary"
+};
+var floatButtonShapeClasses = {
+  circle: "btn-circle rounded-full",
+  square: "btn-square rounded-lg"
+};
+function getFloatButtonClasses({
+  type = "default",
+  shape = "circle",
+  hasDescription,
+  className
+}) {
+  return cn(floatButtonBaseClass, "relative inline-flex items-center justify-center gap-1 shadow-lg", floatButtonTypeClasses[type], floatButtonShapeClasses[shape], hasDescription && "min-w-20 px-3", className);
+}
+function getFloatButtonGroupClasses({
+  shape = "circle",
+  open = true,
+  className
+}) {
+  return cn(floatButtonGroupClass, "fixed bottom-6 right-6 z-50 flex flex-col-reverse items-end gap-3", shape === "square" && "items-stretch", open && floatButtonGroupOpenClass, className);
+}
+function getFloatButtonBackTopClasses({
+  visible,
+  className
+}) {
+  return cn(floatButtonBackTopClass, visible && floatButtonBackTopVisibleClass, className);
+}
+
+// src/components/float-button/FloatButton.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var FloatButtonGroupContext = createContext({});
+function isTooltipConfig(tooltip) {
+  return typeof tooltip === "object" && tooltip !== null && !React.isValidElement(tooltip) && "title" in tooltip;
+}
+function getTooltip(tooltip) {
+  if (!tooltip)
+    return;
+  return isTooltipConfig(tooltip) ? tooltip : { title: tooltip };
+}
+function renderBadge(badge) {
+  if (!badge)
+    return null;
+  const overflowCount = badge.overflowCount ?? 99;
+  const count = typeof badge.count === "number" && badge.count > overflowCount ? `${overflowCount}+` : badge.count;
+  const visible = badge.dot || count !== undefined;
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ jsx("span", {
+    className: cn(floatButtonBadgeClass, "badge badge-error absolute -right-1 -top-1", badge.dot && "badge-dot h-2 min-h-2 w-2 min-w-2 rounded-full p-0"),
+    style: badge.color ? { backgroundColor: badge.color } : undefined,
+    "aria-hidden": badge.dot ? true : undefined,
+    children: badge.dot ? null : count
+  });
+}
+function isWindowTarget(target) {
+  return typeof Window !== "undefined" && target instanceof Window;
+}
+function getTarget(target) {
+  if (typeof window === "undefined")
+    return null;
+  return target?.() ?? window;
+}
+function getScrollTop(target) {
+  if (!target)
+    return 0;
+  return isWindowTarget(target) ? target.scrollY : target.scrollTop;
+}
+function scrollToTop(target) {
+  if (!target)
+    return;
+  target.scrollTo({ top: 0, behavior: "smooth" });
+}
+var InternalFloatButton = forwardRef(({
+  icon,
+  type = "default",
+  shape,
+  tooltip,
+  description,
+  badge,
+  href,
+  target,
+  className,
+  children,
+  disabled,
+  onClick,
+  ...props
+}, ref) => {
+  const group = useContext(FloatButtonGroupContext);
+  const mergedShape = shape ?? group.shape ?? "circle";
+  const tooltipConfig = getTooltip(tooltip);
+  const content = /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      icon ? /* @__PURE__ */ jsx("span", {
+        className: floatButtonIconClass,
+        children: icon
+      }) : null,
+      description ? /* @__PURE__ */ jsx("span", {
+        className: floatButtonDescriptionClass,
+        children: description
+      }) : null,
+      !icon && !description ? children : null,
+      renderBadge(badge)
+    ]
+  });
+  const classes = getFloatButtonClasses({
+    type,
+    shape: mergedShape,
+    hasDescription: Boolean(description),
+    className
+  });
+  const tooltipNode = tooltipConfig?.title ? /* @__PURE__ */ jsx("span", {
+    role: "tooltip",
+    className: cn(floatButtonTooltipClass, "tooltip tooltip-show", tooltipConfig.placement && `tooltip-${tooltipConfig.placement}`),
+    children: tooltipConfig.title
+  }) : null;
+  if (href) {
+    return /* @__PURE__ */ jsxs("a", {
+      ...props,
+      ref,
+      href: disabled ? undefined : href,
+      target,
+      className: classes,
+      "aria-disabled": disabled || undefined,
+      onClick: (event) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        onClick?.(event);
+      },
+      children: [
+        content,
+        tooltipNode
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsxs("button", {
+    ...props,
+    ref,
+    type: "button",
+    disabled,
+    className: classes,
+    onClick: (event) => {
+      onClick?.(event);
+    },
+    children: [
+      content,
+      tooltipNode
+    ]
+  });
+});
+InternalFloatButton.displayName = "FloatButton";
+var FloatButtonGroup = forwardRef(({
+  shape = "circle",
+  trigger,
+  open,
+  closeIcon,
+  children,
+  className,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  ...props
+}, ref) => {
+  const isControlled = open !== undefined;
+  const [internalOpen, setInternalOpen] = useState(trigger ? false : true);
+  const visible = isControlled ? open : internalOpen;
+  return /* @__PURE__ */ jsx(FloatButtonGroupContext.Provider, {
+    value: { shape },
+    children: /* @__PURE__ */ jsxs("div", {
+      ...props,
+      ref,
+      className: getFloatButtonGroupClasses({
+        shape,
+        open: visible,
+        className
+      }),
+      onMouseEnter: (event) => {
+        onMouseEnter?.(event);
+        if (!isControlled && trigger === "hover") {
+          setInternalOpen(true);
+        }
+      },
+      onMouseLeave: (event) => {
+        onMouseLeave?.(event);
+        if (!isControlled && trigger === "hover") {
+          setInternalOpen(false);
+        }
+      },
+      children: [
+        visible ? children : null,
+        trigger === "click" ? /* @__PURE__ */ jsx("button", {
+          type: "button",
+          className: "float-button-group-trigger",
+          "aria-expanded": visible,
+          onClick: (event) => {
+            onClick?.(event);
+            if (!isControlled) {
+              setInternalOpen((current) => !current);
+            }
+          },
+          children: closeIcon ?? (visible ? "Close" : "Open")
+        }) : null
+      ]
+    })
+  });
+});
+FloatButtonGroup.displayName = "FloatButton.Group";
+var FloatButtonBackTop = forwardRef(({
+  visibilityHeight = 400,
+  target,
+  icon = "Top",
+  tooltip,
+  className,
+  onClick,
+  ...props
+}, ref) => {
+  const [visible, setVisible] = useState(false);
+  const visibleRef = useRef(visible);
+  visibleRef.current = visible;
+  useEffect(() => {
+    const scrollTarget = getTarget(target);
+    if (!scrollTarget)
+      return;
+    function updateVisible() {
+      const nextVisible = getScrollTop(scrollTarget) >= visibilityHeight;
+      if (nextVisible !== visibleRef.current) {
+        visibleRef.current = nextVisible;
+        setVisible(nextVisible);
+      }
+    }
+    updateVisible();
+    scrollTarget.addEventListener("scroll", updateVisible);
+    return () => scrollTarget.removeEventListener("scroll", updateVisible);
+  }, [target, visibilityHeight]);
+  return /* @__PURE__ */ jsx(InternalFloatButton, {
+    ...props,
+    ref,
+    icon,
+    tooltip,
+    className: cn(getFloatButtonBackTopClasses({ visible }), className),
+    hidden: !visible,
+    "aria-label": props["aria-label"] ?? "Back to top",
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) {
+        scrollToTop(getTarget(target));
+      }
+    }
+  });
+});
+FloatButtonBackTop.displayName = "FloatButton.BackTop";
+var FloatButton = Object.assign(InternalFloatButton, {
+  Group: FloatButtonGroup,
+  BackTop: FloatButtonBackTop
+});
+export {
+  FloatButton
+};

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { FormComponent, FormContextValue } from "./Form.types";
+export declare const FormContext: React.Context<FormContextValue | null>;
+export declare const Form: FormComponent;

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

@@ -0,0 +1,107 @@
+import type { ComponentProps, Context, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes } from "react";
+export type FormNamePath = string | number | Array<string | number>;
+export type FormLayout = "horizontal" | "vertical" | "inline";
+export interface FormRule {
+    required?: boolean;
+    message?: ReactNode;
+    validator?: (rule: FormRule, value: unknown) => Promise<void> | void;
+}
+export interface FieldError {
+    name: FormNamePath;
+    errors: ReactNode[];
+}
+export interface FormInstance<T extends Record<string, unknown> = Record<string, unknown>> {
+    getFieldValue: (name: FormNamePath) => unknown;
+    getFieldsValue: () => Partial<T>;
+    setFieldValue: (name: FormNamePath, value: unknown) => void;
+    setFieldsValue: (values: Partial<T>) => void;
+    resetFields: (names?: FormNamePath[]) => void;
+    validateFields: (names?: FormNamePath[]) => Promise<Partial<T>>;
+    submit: () => void;
+}
+export interface FormContextValue {
+    form: FormInstance;
+    disabled?: boolean;
+    layout: FormLayout;
+    labelCol?: unknown;
+    wrapperCol?: unknown;
+    colon?: boolean;
+    requiredMark?: boolean;
+    registerField: (name: FormNamePath, rules?: FormRule[]) => () => void;
+    getFieldError: (name: FormNamePath) => ReactNode[];
+    setFieldError: (name: FormNamePath, errors: ReactNode[]) => void;
+}
+export interface FormProps<T extends Record<string, unknown> = Record<string, unknown>> extends Omit<ComponentProps<"form">, "children" | "onSubmit" | "onFinish" | "onChange"> {
+    children?: ReactNode;
+    form?: FormInstance<T>;
+    initialValues?: Partial<T>;
+    layout?: FormLayout;
+    disabled?: boolean;
+    labelCol?: unknown;
+    wrapperCol?: unknown;
+    colon?: boolean;
+    requiredMark?: boolean;
+    onFinish?: (values: Partial<T>) => void;
+    onFinishFailed?: (errorInfo: {
+        errorFields: FieldError[];
+        values: Partial<T>;
+    }) => void;
+    onValuesChange?: (changedValues: Partial<T>, values: Partial<T>) => void;
+}
+export interface FormItemProps extends Omit<ComponentProps<"div">, "children" | "onChange" | "title"> {
+    children?: ReactNode;
+    name?: FormNamePath;
+    label?: ReactNode;
+    rules?: FormRule[];
+    required?: boolean;
+    valuePropName?: string;
+    trigger?: string;
+    extra?: ReactNode;
+    help?: ReactNode;
+    noStyle?: boolean;
+}
+export interface FormListFieldData {
+    key: number;
+    name: number;
+    fieldKey: number;
+}
+export interface FormListOperation {
+    add: (defaultValue?: unknown, insertIndex?: number) => void;
+    remove: (index: number | number[]) => void;
+    move: (from: number, to: number) => void;
+}
+export interface FormListProps {
+    name: FormNamePath;
+    initialValue?: unknown[];
+    children: (fields: FormListFieldData[], operation: FormListOperation, meta: {
+        errors: ReactNode[];
+    }) => ReactNode;
+}
+export interface ErrorListProps extends ComponentProps<"div"> {
+    errors?: ReactNode[];
+}
+export interface FormProviderProps {
+    children?: ReactNode;
+    onFormChange?: (name: string, info: {
+        changedFields: unknown[];
+        forms: Record<string, FormInstance>;
+    }) => void;
+    onFormFinish?: (name: string, info: {
+        values: unknown;
+        forms: Record<string, FormInstance>;
+    }) => void;
+}
+export type FormItemComponent = ForwardRefExoticComponent<FormItemProps & RefAttributes<HTMLDivElement>>;
+export type FormListComponent = (props: FormListProps) => ReactElement | null;
+export interface FormComponent {
+    <T extends Record<string, unknown> = Record<string, unknown>>(props: FormProps<T> & RefAttributes<FormInstance<T>>): ReactElement | null;
+    useForm: <T extends Record<string, unknown> = Record<string, unknown>>(form?: FormInstance<T>) => [FormInstance<T>];
+    useFormInstance: () => FormInstance;
+    useWatch: (name: FormNamePath, form?: FormInstance) => unknown;
+    Item: FormItemComponent;
+    List: FormListComponent;
+    ErrorList: ForwardRefExoticComponent<ErrorListProps & RefAttributes<HTMLDivElement>>;
+    Provider: (props: FormProviderProps) => ReactElement | null;
+    Context: Context<FormContextValue | null>;
+    create: () => void;
+}

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

@@ -0,0 +1,2 @@
+export { Form, FormContext } from "./Form";
+export type { ErrorListProps, FieldError, FormComponent, FormContextValue, FormInstance, FormItemProps, FormListFieldData, FormListOperation, FormListProps, FormNamePath, FormProps, FormProviderProps, FormRule, } from "./Form.types";