@duskmoon-dev/components 0.1.2

package/dist/components/tour/index.js

@@ -0,0 +1,507 @@
+"use client";
+
+// ../../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/button.ts
+var buttonBaseClass = "btn";
+var buttonColorClasses = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  tertiary: "btn-tertiary",
+  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",
+  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], block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
+}
+
+// src/components/button/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Button({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  disabled,
+  ref,
+  ...props
+}) {
+  const classes = getButtonClasses({
+    color,
+    appearance,
+    shape,
+    size,
+    block,
+    isLoading,
+    className
+  });
+  return /* @__PURE__ */ jsxs("button", {
+    ref,
+    className: classes,
+    disabled: disabled || isLoading,
+    "aria-busy": isLoading,
+    "aria-disabled": disabled || isLoading,
+    ...props,
+    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
+      })
+    ]
+  });
+}
+// src/components/tour/Tour.tsx
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useState
+} from "react";
+
+// src/classes/tour.ts
+var tourRootClass = "tour-root";
+var tourOpenClass = "tour-open";
+var tourMaskClass = "tour-mask";
+var tourMaskHiddenClass = "tour-mask-hidden";
+var tourTargetClass = "tour-target";
+var tourPanelClass = "tour-panel popover";
+var tourArrowClass = "tour-arrow popover-arrow";
+var tourHeaderClass = "tour-header";
+var tourTitleClass = "tour-title";
+var tourCloseClass = "tour-close";
+var tourBodyClass = "tour-body";
+var tourCoverClass = "tour-cover";
+var tourFooterClass = "tour-footer";
+var tourIndicatorsClass = "tour-indicators";
+var tourIndicatorClass = "tour-indicator";
+var tourIndicatorActiveClass = "tour-indicator-active";
+var tourActionsClass = "tour-actions";
+var tourPlacementClasses = {
+  top: "popover-top tour-top",
+  bottom: "popover-bottom tour-bottom",
+  left: "popover-left tour-left",
+  right: "popover-right tour-right",
+  topLeft: "popover-top tour-top-left",
+  topRight: "popover-top tour-top-right",
+  bottomLeft: "popover-bottom tour-bottom-left",
+  bottomRight: "popover-bottom tour-bottom-right",
+  leftTop: "popover-left tour-left-top",
+  leftBottom: "popover-left tour-left-bottom",
+  rightTop: "popover-right tour-right-top",
+  rightBottom: "popover-right tour-right-bottom"
+};
+function getTourRootClasses({
+  open,
+  className
+}) {
+  return cn(tourRootClass, open && tourOpenClass, className);
+}
+function getTourMaskClasses({
+  visible,
+  className
+}) {
+  return cn(tourMaskClass, !visible && tourMaskHiddenClass, className);
+}
+function getTourPanelClasses({
+  placement = "bottom",
+  className
+}) {
+  return cn(tourPanelClass, "popover-show", tourPlacementClasses[placement], className);
+}
+function getTourIndicatorClasses({ active }) {
+  return cn(tourIndicatorClass, active && tourIndicatorActiveClass);
+}
+
+// src/components/tour/Tour.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultCloseIcon = "x";
+var fallbackRect = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0
+};
+function clampCurrent(current, total) {
+  if (total <= 0)
+    return 0;
+  return Math.max(0, Math.min(current, total - 1));
+}
+function resolveTarget(target) {
+  if (typeof document === "undefined" || target === null)
+    return null;
+  if (typeof target === "function")
+    return target();
+  if (typeof target === "string")
+    return document.querySelector(target);
+  return target ?? null;
+}
+function getTargetRect(target) {
+  if (!target)
+    return fallbackRect;
+  const rect = target.getBoundingClientRect();
+  return {
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function isMaskConfig(mask) {
+  return typeof mask === "object" && mask !== null;
+}
+function getMaskConfig(mask) {
+  return isMaskConfig(mask) ? mask : undefined;
+}
+function getPanelStyle({
+  gap,
+  placement,
+  rect,
+  style
+}) {
+  const hasTarget = rect.width > 0 || rect.height > 0;
+  if (!hasTarget) {
+    return {
+      position: "fixed",
+      left: "50%",
+      top: "50%",
+      transform: "translate(-50%, -50%)",
+      ...style
+    };
+  }
+  const verticalCenter = rect.top + rect.height / 2;
+  const horizontalCenter = rect.left + rect.width / 2;
+  const base = { position: "fixed", ...style };
+  if (placement.startsWith("top")) {
+    return {
+      ...base,
+      left: placement === "topLeft" ? rect.left : horizontalCenter,
+      top: rect.top - gap,
+      transform: placement === "topLeft" ? "translateY(-100%)" : "translate(-50%, -100%)"
+    };
+  }
+  if (placement.startsWith("left")) {
+    return {
+      ...base,
+      left: rect.left - gap,
+      top: placement === "leftTop" ? rect.top : verticalCenter,
+      transform: placement === "leftTop" ? "translateX(-100%)" : "translate(-100%, -50%)"
+    };
+  }
+  if (placement.startsWith("right")) {
+    return {
+      ...base,
+      left: rect.left + rect.width + gap,
+      top: placement === "rightTop" ? rect.top : verticalCenter,
+      transform: placement === "rightTop" ? undefined : "translateY(-50%)"
+    };
+  }
+  return {
+    ...base,
+    left: placement === "bottomLeft" ? rect.left : horizontalCenter,
+    top: rect.top + rect.height + gap,
+    transform: placement === "bottomLeft" ? undefined : "translateX(-50%)"
+  };
+}
+function getHighlightStyle(rect, gap) {
+  return {
+    position: "fixed",
+    left: rect.left - gap / 2,
+    top: rect.top - gap / 2,
+    width: rect.width + gap,
+    height: rect.height + gap
+  };
+}
+function mergeButtonProps(rootProps, stepProps) {
+  return { ...rootProps, ...stepProps };
+}
+var Tour = forwardRef(({
+  steps = [],
+  open,
+  defaultOpen = false,
+  current,
+  defaultCurrent = 0,
+  placement = "bottom",
+  mask = true,
+  indicators = true,
+  indicatorsRender,
+  closeIcon = defaultCloseIcon,
+  disabledInteraction = false,
+  zIndex,
+  gap = 12,
+  nextButtonProps,
+  prevButtonProps,
+  className,
+  style,
+  onClose,
+  onChange,
+  onFinish,
+  id,
+  ...props
+}, ref) => {
+  const generatedId = useId();
+  const rootId = id ?? generatedId;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [internalCurrent, setInternalCurrent] = useState(defaultCurrent);
+  const controlledOpen = open !== undefined;
+  const controlledCurrent = current !== undefined;
+  const visible = controlledOpen ? open : internalOpen;
+  const mergedCurrent = clampCurrent(controlledCurrent ? current : internalCurrent, steps.length);
+  const step = steps[mergedCurrent];
+  const mergedPlacement = step?.placement ?? placement;
+  const mergedMask = step?.mask ?? mask;
+  const maskConfig = getMaskConfig(mergedMask);
+  const hasMask = mergedMask !== false;
+  const [targetRect, setTargetRect] = useState(fallbackRect);
+  useEffect(() => {
+    if (!visible)
+      return;
+    const target = resolveTarget(step?.target);
+    setTargetRect(getTargetRect(target));
+  }, [step?.target, visible]);
+  if (!visible || !step) {
+    return null;
+  }
+  const titleId = `${rootId}-title`;
+  const descriptionId = `${rootId}-description`;
+  const lastStep = mergedCurrent >= steps.length - 1;
+  const showHighlight = hasMask && (targetRect.width > 0 || targetRect.height > 0);
+  const rootStyle = { ...style, ...zIndex !== undefined ? { zIndex } : undefined };
+  const currentCloseIcon = step.closeIcon ?? closeIcon;
+  const currentNextButtonProps = mergeButtonProps(nextButtonProps, step.nextButtonProps);
+  const currentPrevButtonProps = mergeButtonProps(prevButtonProps, step.prevButtonProps);
+  function setVisible(nextOpen) {
+    if (!controlledOpen) {
+      setInternalOpen(nextOpen);
+    }
+  }
+  function setStep(nextCurrent) {
+    const normalized = clampCurrent(nextCurrent, steps.length);
+    if (!controlledCurrent) {
+      setInternalCurrent(normalized);
+    }
+    onChange?.(normalized);
+  }
+  function close() {
+    step.onClose?.(mergedCurrent);
+    onClose?.(mergedCurrent);
+    setVisible(false);
+  }
+  function next() {
+    if (lastStep) {
+      onFinish?.();
+      close();
+      return;
+    }
+    setStep(mergedCurrent + 1);
+  }
+  function previous() {
+    setStep(mergedCurrent - 1);
+  }
+  function renderIndicators() {
+    if (indicators === false)
+      return null;
+    if (typeof indicators === "function") {
+      return indicators(mergedCurrent, steps.length);
+    }
+    if (indicatorsRender) {
+      return indicatorsRender(mergedCurrent, steps.length);
+    }
+    return /* @__PURE__ */ jsx2("div", {
+      className: tourIndicatorsClass,
+      "aria-label": "Tour steps",
+      children: steps.map((_, index) => /* @__PURE__ */ jsx2("button", {
+        type: "button",
+        className: getTourIndicatorClasses({
+          active: index === mergedCurrent
+        }),
+        "aria-label": `Go to step ${index + 1}`,
+        "aria-current": index === mergedCurrent ? "step" : undefined,
+        onClick: () => setStep(index)
+      }, index))
+    });
+  }
+  return /* @__PURE__ */ jsxs2("div", {
+    ...props,
+    ref,
+    id: rootId,
+    className: getTourRootClasses({ open: visible, className }),
+    style: rootStyle,
+    children: [
+      hasMask ? /* @__PURE__ */ jsx2("div", {
+        className: getTourMaskClasses({
+          visible: true,
+          className: maskConfig?.className
+        }),
+        style: {
+          backgroundColor: maskConfig?.color,
+          ...maskConfig?.style
+        },
+        "aria-hidden": "true"
+      }) : null,
+      showHighlight ? /* @__PURE__ */ jsx2("div", {
+        className: tourTargetClass,
+        style: getHighlightStyle(targetRect, gap),
+        "aria-hidden": "true"
+      }) : null,
+      /* @__PURE__ */ jsxs2("div", {
+        role: "dialog",
+        "aria-modal": hasMask ? true : undefined,
+        "aria-labelledby": step.title ? titleId : undefined,
+        "aria-describedby": step.description ? descriptionId : undefined,
+        className: getTourPanelClasses({
+          placement: mergedPlacement,
+          className: step.className
+        }),
+        style: getPanelStyle({
+          gap,
+          placement: mergedPlacement,
+          rect: targetRect,
+          style: step.style
+        }),
+        children: [
+          disabledInteraction ? /* @__PURE__ */ jsx2("div", {
+            "aria-hidden": "true"
+          }) : null,
+          /* @__PURE__ */ jsxs2("div", {
+            className: tourHeaderClass,
+            children: [
+              step.title ? /* @__PURE__ */ jsx2("h2", {
+                id: titleId,
+                className: tourTitleClass,
+                children: step.title
+              }) : null,
+              currentCloseIcon !== null && currentCloseIcon !== false ? /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                className: tourCloseClass,
+                "aria-label": "Close tour",
+                onClick: close,
+                children: currentCloseIcon
+              }) : null
+            ]
+          }),
+          step.cover ? /* @__PURE__ */ jsx2("div", {
+            className: tourCoverClass,
+            children: step.cover
+          }) : null,
+          step.description ? /* @__PURE__ */ jsx2("div", {
+            id: descriptionId,
+            className: tourBodyClass,
+            children: step.description
+          }) : null,
+          /* @__PURE__ */ jsxs2("div", {
+            className: tourFooterClass,
+            children: [
+              renderIndicators(),
+              /* @__PURE__ */ jsxs2("div", {
+                className: tourActionsClass,
+                children: [
+                  mergedCurrent > 0 ? /* @__PURE__ */ jsx2(Button, {
+                    appearance: "text",
+                    color: "secondary",
+                    size: "sm",
+                    ...currentPrevButtonProps,
+                    onClick: (event) => {
+                      currentPrevButtonProps?.onClick?.(event);
+                      if (!event.defaultPrevented)
+                        previous();
+                    },
+                    children: currentPrevButtonProps?.children ?? "Previous"
+                  }) : null,
+                  /* @__PURE__ */ jsx2(Button, {
+                    color: "primary",
+                    size: "sm",
+                    ...currentNextButtonProps,
+                    onClick: (event) => {
+                      currentNextButtonProps?.onClick?.(event);
+                      if (!event.defaultPrevented)
+                        next();
+                    },
+                    children: currentNextButtonProps?.children ?? (lastStep ? "Finish" : "Next")
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx2("span", {
+            className: tourArrowClass,
+            "aria-hidden": "true"
+          })
+        ]
+      })
+    ]
+  });
+});
+Tour.displayName = "Tour";
+export {
+  Tour
+};

package/dist/components/transfer/Transfer.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { TransferComponent, TransferOperationProps, TransferSearchProps } from "./Transfer.types";
+export declare const TransferSearch: React.ForwardRefExoticComponent<Omit<TransferSearchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const TransferOperation: React.ForwardRefExoticComponent<Omit<TransferOperationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Transfer: TransferComponent;

package/dist/components/transfer/Transfer.types.d.ts

@@ -0,0 +1,88 @@
+import type { ComponentProps, CSSProperties, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes } from "react";
+export type TransferDirection = "left" | "right";
+export type TransferKey = string;
+export interface TransferItem {
+    key: TransferKey;
+    title?: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+    [name: string]: unknown;
+}
+export type TransferRenderResult = ReactNode | {
+    label: ReactNode;
+    value: string;
+};
+export type TransferRender<T extends TransferItem = TransferItem> = (item: T) => TransferRenderResult;
+export type TransferFilterOption<T extends TransferItem = TransferItem> = (inputValue: string, item: T, direction: TransferDirection) => boolean;
+export interface TransferPaginationConfig {
+    pageSize?: number;
+}
+export interface TransferLocale {
+    itemUnit?: string;
+    itemsUnit?: string;
+    notFoundContent?: ReactNode;
+    searchPlaceholder?: string;
+}
+export interface TransferListProps<T extends TransferItem = TransferItem> extends Omit<ComponentProps<"div">, "children" | "title"> {
+    direction: TransferDirection;
+    title?: ReactNode;
+    items: T[];
+    selectedKeys?: TransferKey[];
+    disabled?: boolean;
+    showSearch?: boolean;
+    searchValue?: string;
+    searchPlaceholder?: string;
+    notFoundContent?: ReactNode;
+    render?: TransferRender<T>;
+    filterOption?: TransferFilterOption<T>;
+    pagination?: boolean | TransferPaginationConfig;
+    listStyle?: CSSProperties | ((style: {
+        direction: TransferDirection;
+    }) => CSSProperties);
+    onSearch?: (direction: TransferDirection, value: string) => void;
+    onItemSelect?: (key: TransferKey, selected: boolean) => void;
+}
+export interface TransferSearchProps extends Omit<ComponentProps<"input">, "onChange" | "size"> {
+    onChange?: (value: string) => void;
+}
+export interface TransferOperationProps extends Omit<ComponentProps<"div">, "children"> {
+    disabled?: boolean;
+    oneWay?: boolean;
+    operations?: ReactNode[];
+    moveToRightDisabled?: boolean;
+    moveToLeftDisabled?: boolean;
+    onMoveToRight?: () => void;
+    onMoveToLeft?: () => void;
+}
+export interface TransferProps<T extends TransferItem = TransferItem> extends Omit<ComponentProps<"div">, "children" | "onChange" | "title"> {
+    dataSource?: T[];
+    targetKeys?: TransferKey[];
+    defaultTargetKeys?: TransferKey[];
+    selectedKeys?: TransferKey[];
+    defaultSelectedKeys?: TransferKey[];
+    render?: TransferRender<T>;
+    showSearch?: boolean;
+    filterOption?: TransferFilterOption<T>;
+    pagination?: boolean | TransferPaginationConfig;
+    oneWay?: boolean;
+    operations?: ReactNode[];
+    titles?: ReactNode[];
+    disabled?: boolean;
+    listStyle?: CSSProperties | ((style: {
+        direction: TransferDirection;
+    }) => CSSProperties);
+    rowKey?: (item: T) => TransferKey;
+    locale?: TransferLocale;
+    onChange?: (targetKeys: TransferKey[], direction: TransferDirection, moveKeys: TransferKey[]) => void;
+    onSelectChange?: (sourceSelectedKeys: TransferKey[], targetSelectedKeys: TransferKey[]) => void;
+    onSearch?: (direction: TransferDirection, value: string) => void;
+}
+export type TransferSearchComponent = ForwardRefExoticComponent<TransferSearchProps & RefAttributes<HTMLInputElement>>;
+export type TransferOperationComponent = ForwardRefExoticComponent<TransferOperationProps & RefAttributes<HTMLDivElement>>;
+export type TransferListComponent = <T extends TransferItem = TransferItem>(props: TransferListProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+export type TransferComponent = (<T extends TransferItem = TransferItem>(props: TransferProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null) & {
+    Search: TransferSearchComponent;
+    Operation: TransferOperationComponent;
+    List: TransferListComponent;
+    displayName?: string;
+};

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

@@ -0,0 +1,2 @@
+export { Transfer } from "./Transfer";
+export type { TransferComponent, TransferDirection, TransferFilterOption, TransferItem, TransferKey, TransferListComponent, TransferListProps, TransferLocale, TransferOperationComponent, TransferOperationProps, TransferPaginationConfig, TransferProps, TransferRender, TransferRenderResult, TransferSearchComponent, TransferSearchProps, } from "./Transfer.types";