@duskmoon-dev/components 0.1.2

package/dist/components/spin/index.js

@@ -0,0 +1,138 @@
+"use client";
+
+// src/components/spin/Spin.tsx
+import { forwardRef, useEffect, 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/spin.ts
+var spinBaseClass = "spin";
+var spinSpinningClass = "spin-spinning";
+var spinNestedLoadingClass = "spin-nested-loading";
+var spinContainerClass = "spin-container";
+var spinBlurClass = "spin-blur";
+var spinDotClass = "spin-dot";
+var spinTipClass = "spin-tip";
+var spinFullscreenClass = "spin-fullscreen";
+var spinSizeClasses = {
+  small: "spin-sm progress-circular-sm",
+  default: "spin-md progress-circular-md",
+  large: "spin-lg progress-circular-lg"
+};
+function getSpinClasses({
+  spinning,
+  size = "default",
+  fullscreen,
+  className
+}) {
+  return cn(spinBaseClass, "progress-circular progress-circular-indeterminate", spinSizeClasses[size], spinning && spinSpinningClass, fullscreen && spinFullscreenClass, className);
+}
+
+// src/components/spin/Spin.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultIndicator;
+function setDefaultIndicator(indicator) {
+  defaultIndicator = indicator;
+}
+function useDelayedSpinning(spinning, delay) {
+  const [delayedActive, setDelayedActive] = useState(false);
+  const hasDelay = Boolean(delay && delay > 0);
+  useEffect(() => {
+    if (!hasDelay) {
+      return;
+    }
+    if (!spinning) {
+      const resetTimer2 = window.setTimeout(() => setDelayedActive(false), 0);
+      return () => window.clearTimeout(resetTimer2);
+    }
+    const resetTimer = window.setTimeout(() => setDelayedActive(false), 0);
+    const showTimer = window.setTimeout(() => setDelayedActive(true), delay);
+    return () => {
+      window.clearTimeout(resetTimer);
+      window.clearTimeout(showTimer);
+    };
+  }, [delay, hasDelay, spinning]);
+  if (!hasDelay) {
+    return spinning;
+  }
+  return spinning && delayedActive;
+}
+var SpinBase = forwardRef(({
+  spinning = true,
+  size = "default",
+  tip,
+  indicator,
+  delay,
+  fullscreen,
+  wrapperClassName,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const active = useDelayedSpinning(spinning, delay);
+  const finalIndicator = indicator ?? defaultIndicator;
+  const spin = /* @__PURE__ */ jsxs("div", {
+    ref,
+    role: "status",
+    "aria-live": "polite",
+    "aria-busy": active,
+    className: getSpinClasses({
+      spinning: active,
+      size,
+      fullscreen,
+      className
+    }),
+    ...props,
+    children: [
+      finalIndicator ?? /* @__PURE__ */ jsx("span", {
+        className: spinDotClass
+      }),
+      tip ? /* @__PURE__ */ jsx("div", {
+        className: spinTipClass,
+        children: tip
+      }) : null
+    ]
+  });
+  if (!children) {
+    return spin;
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn(spinNestedLoadingClass, wrapperClassName),
+    children: [
+      active ? spin : null,
+      /* @__PURE__ */ jsx("div", {
+        className: cn(spinContainerClass, active && spinBlurClass),
+        children
+      })
+    ]
+  });
+});
+SpinBase.displayName = "Spin";
+var Spin = SpinBase;
+Spin.setDefaultIndicator = setDefaultIndicator;
+export {
+  Spin
+};

package/dist/components/splitter/Splitter.d.ts

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

package/dist/components/splitter/Splitter.types.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps, CSSProperties, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type SplitterLayout = "horizontal" | "vertical";
+export type SplitterSize = number | string;
+export interface SplitterResizeInfo {
+    sizes: SplitterSize[];
+}
+export interface SplitterProps extends Omit<ComponentProps<"div">, "onResize"> {
+    layout?: SplitterLayout;
+    sizes?: SplitterSize[];
+    defaultSizes?: SplitterSize[];
+    onResize?: (sizes: SplitterSize[], info: SplitterResizeInfo) => void;
+}
+export interface SplitterPanelProps extends Omit<ComponentProps<"div">, "children"> {
+    children?: ReactNode;
+    defaultSize?: SplitterSize;
+    size?: SplitterSize;
+    min?: SplitterSize;
+    max?: SplitterSize;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    resizable?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
+    style?: CSSProperties;
+}
+export type SplitterPanelComponent = ForwardRefExoticComponent<SplitterPanelProps & RefAttributes<HTMLDivElement>>;
+export type SplitterComponent = ForwardRefExoticComponent<SplitterProps & RefAttributes<HTMLDivElement>> & {
+    Panel: SplitterPanelComponent;
+};

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

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

package/dist/components/splitter/index.js

@@ -0,0 +1,227 @@
+"use client";
+
+// src/components/splitter/Splitter.tsx
+import React, {
+  forwardRef,
+  useMemo,
+  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/splitter.ts
+var splitterBaseClass = "splitter";
+var splitterPanelClass = "splitter-panel";
+var splitterPanelCollapsedClass = "splitter-panel-collapsed";
+var splitterHandleClass = "splitter-handle";
+var splitterHandleDisabledClass = "splitter-handle-disabled";
+var splitterLayoutClasses = {
+  horizontal: "splitter-horizontal",
+  vertical: "splitter-vertical"
+};
+function getSplitterClasses({
+  layout,
+  className
+}) {
+  return cn(splitterBaseClass, splitterLayoutClasses[layout], className);
+}
+function getSplitterPanelClasses({
+  collapsed,
+  className
+}) {
+  return cn(splitterPanelClass, collapsed && splitterPanelCollapsedClass, className);
+}
+function getSplitterHandleClasses({
+  disabled,
+  className
+}) {
+  return cn(splitterHandleClass, disabled && splitterHandleDisabledClass, className);
+}
+
+// src/components/splitter/Splitter.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function toCssSize(size) {
+  if (typeof size === "number")
+    return `${size}px`;
+  return size;
+}
+function isPanelElement(child) {
+  return React.isValidElement(child);
+}
+function getInitialSizes(panels, sizes, defaultSizes) {
+  return panels.map((panel, index) => {
+    const propSize = panel.props.size;
+    const defaultSize = panel.props.defaultSize;
+    return sizes?.[index] ?? propSize ?? defaultSizes?.[index] ?? defaultSize ?? "1fr";
+  });
+}
+function clampNumericSize(value, min, max) {
+  if (typeof value !== "number")
+    return value;
+  const withMin = typeof min === "number" ? Math.max(min, value) : value;
+  return typeof max === "number" ? Math.min(max, withMin) : withMin;
+}
+function nextSize(size, delta) {
+  if (typeof size === "number")
+    return Math.max(0, size + delta);
+  return 120 + delta;
+}
+var SplitterPanel = forwardRef((props, ref) => {
+  const { children, className, collapsed, defaultCollapsed, style } = props;
+  const domProps = { ...props };
+  delete domProps.children;
+  delete domProps.className;
+  delete domProps.collapsed;
+  delete domProps.collapsible;
+  delete domProps.defaultCollapsed;
+  delete domProps.defaultSize;
+  delete domProps.max;
+  delete domProps.min;
+  delete domProps.onCollapse;
+  delete domProps.resizable;
+  delete domProps.size;
+  delete domProps.style;
+  return /* @__PURE__ */ jsx("div", {
+    ...domProps,
+    ref,
+    className: getSplitterPanelClasses({
+      collapsed: collapsed ?? defaultCollapsed,
+      className
+    }),
+    style,
+    children
+  });
+});
+SplitterPanel.displayName = "Splitter.Panel";
+var SplitterRoot = forwardRef(({
+  children,
+  className,
+  defaultSizes,
+  layout = "horizontal",
+  onResize,
+  sizes,
+  style,
+  ...props
+}, ref) => {
+  const panels = useMemo(() => React.Children.toArray(children).filter(isPanelElement), [children]);
+  const controlled = sizes !== undefined;
+  const [internalSizes, setInternalSizes] = useState(() => getInitialSizes(panels, sizes, defaultSizes));
+  const [collapsedIndexes, setCollapsedIndexes] = useState(() => panels.map((panel) => panel.props.defaultCollapsed ?? false));
+  const mergedSizes = controlled ? sizes : internalSizes;
+  const isHorizontal = layout === "horizontal";
+  function commitSizes(nextSizes) {
+    if (!controlled) {
+      setInternalSizes(nextSizes);
+    }
+    onResize?.(nextSizes, { sizes: nextSizes });
+  }
+  function resizeAt(index, direction) {
+    const panel = panels[index];
+    const nextPanel = panels[index + 1];
+    if (panel.props.resizable === false || nextPanel?.props.resizable === false) {
+      return;
+    }
+    const delta = direction * 16;
+    const nextSizes = [...mergedSizes];
+    nextSizes[index] = clampNumericSize(nextSize(nextSizes[index], delta), panel.props.min, panel.props.max);
+    if (nextSizes[index + 1] !== undefined) {
+      nextSizes[index + 1] = clampNumericSize(nextSize(nextSizes[index + 1], -delta), nextPanel.props.min, nextPanel.props.max);
+    }
+    commitSizes(nextSizes);
+  }
+  function toggleCollapse(index) {
+    const panel = panels[index];
+    const nextCollapsed = !(panel.props.collapsed ?? collapsedIndexes[index]);
+    const nextCollapsedIndexes = [...collapsedIndexes];
+    nextCollapsedIndexes[index] = nextCollapsed;
+    setCollapsedIndexes(nextCollapsedIndexes);
+    panel.props.onCollapse?.(nextCollapsed);
+  }
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    className: getSplitterClasses({ layout, className }),
+    style: {
+      display: "flex",
+      flexDirection: isHorizontal ? "row" : "column",
+      ...style
+    },
+    children: panels.map((panel, index) => {
+      const collapsed = panel.props.collapsed ?? collapsedIndexes[index];
+      const size = collapsed ? 0 : mergedSizes[index];
+      const panelStyle = {
+        [isHorizontal ? "width" : "height"]: toCssSize(size),
+        [isHorizontal ? "minWidth" : "minHeight"]: collapsed ? 0 : toCssSize(panel.props.min),
+        [isHorizontal ? "maxWidth" : "maxHeight"]: toCssSize(panel.props.max),
+        flex: typeof size === "number" || collapsed ? `0 0 ${toCssSize(size)}` : size,
+        ...panel.props.style
+      };
+      const handleDisabled = panel.props.resizable === false || panels[index + 1]?.props.resizable === false;
+      return /* @__PURE__ */ jsxs(React.Fragment, {
+        children: [
+          React.cloneElement(panel, {
+            className: panel.props.className,
+            collapsed,
+            style: panelStyle
+          }),
+          index < panels.length - 1 ? /* @__PURE__ */ jsxs("span", {
+            className: getSplitterHandleClasses({
+              disabled: handleDisabled
+            }),
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                "aria-label": "Resize previous panel smaller",
+                disabled: handleDisabled,
+                onClick: () => resizeAt(index, -1),
+                children: "-"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                "aria-label": "Resize previous panel larger",
+                disabled: handleDisabled,
+                onClick: () => resizeAt(index, 1),
+                children: "+"
+              }),
+              panel.props.collapsible ? /* @__PURE__ */ jsx("button", {
+                type: "button",
+                "aria-label": collapsed ? "Expand panel" : "Collapse panel",
+                onClick: () => toggleCollapse(index),
+                children: collapsed ? ">" : "<"
+              }) : null
+            ]
+          }) : null
+        ]
+      }, panel.key ?? index);
+    })
+  });
+});
+SplitterRoot.displayName = "Splitter";
+SplitterRoot.Panel = SplitterPanel;
+var Splitter = SplitterRoot;
+export {
+  Splitter
+};

package/dist/components/statistic/Statistic.d.ts

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

package/dist/components/statistic/Statistic.types.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+export type StatisticValue = string | number;
+export interface StatisticProps extends Omit<ComponentProps<"div">, "prefix" | "title"> {
+    title?: ReactNode;
+    value?: StatisticValue;
+    precision?: number;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    formatter?: (value: StatisticValue | undefined) => ReactNode;
+    valueStyle?: CSSProperties;
+}
+export type CountdownValue = number | string | Date;
+export interface CountdownProps extends Omit<StatisticProps, "value" | "formatter" | "precision" | "onChange"> {
+    value: CountdownValue;
+    format?: string;
+    onFinish?: () => void;
+    onChange?: (value: number) => void;
+}
+export interface StatisticComponent {
+    (props: StatisticProps): ReactNode;
+    Countdown: (props: CountdownProps) => ReactNode;
+}

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

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

package/dist/components/statistic/index.js

@@ -0,0 +1,150 @@
+"use client";
+
+// src/components/statistic/Statistic.tsx
+import { useEffect, useMemo, 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/statistic.ts
+var statisticBaseClass = "statistic";
+var statisticTitleClass = "statistic-title";
+var statisticContentClass = "statistic-content";
+var statisticPrefixClass = "statistic-prefix";
+var statisticValueClass = "statistic-value";
+var statisticSuffixClass = "statistic-suffix";
+function getStatisticClasses({ className }) {
+  return cn(statisticBaseClass, className);
+}
+
+// src/components/statistic/Statistic.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatStatisticValue(value, precision) {
+  if (value === undefined || value === null)
+    return;
+  if (typeof value === "number" && precision !== undefined) {
+    return value.toFixed(precision);
+  }
+  return value;
+}
+function toTimestamp(value) {
+  if (value instanceof Date)
+    return value.getTime();
+  if (typeof value === "number")
+    return value;
+  const timestamp = new Date(value).getTime();
+  return Number.isNaN(timestamp) ? Date.now() : timestamp;
+}
+function pad(value, size = 2) {
+  return String(value).padStart(size, "0");
+}
+function formatCountdown(remaining, format = "HH:mm:ss") {
+  const totalMilliseconds = Math.max(0, remaining);
+  const totalSeconds = Math.floor(totalMilliseconds / 1000);
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor(totalSeconds % 86400 / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  const milliseconds = totalMilliseconds % 1000;
+  return format.replace(/DD/g, pad(days)).replace(/D/g, String(days)).replace(/HH/g, pad(hours)).replace(/H/g, String(hours)).replace(/mm/g, pad(minutes)).replace(/m/g, String(minutes)).replace(/ss/g, pad(seconds)).replace(/s/g, String(seconds)).replace(/SSS/g, pad(milliseconds, 3));
+}
+function StatisticBase({
+  title,
+  value,
+  precision,
+  prefix,
+  suffix,
+  formatter,
+  valueStyle,
+  className,
+  ref,
+  ...props
+}) {
+  const renderedValue = formatter ? formatter(value) : formatStatisticValue(value, precision);
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: getStatisticClasses({ className }),
+    ...props,
+    children: [
+      title !== undefined && /* @__PURE__ */ jsx("div", {
+        className: statisticTitleClass,
+        children: title
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: statisticContentClass,
+        children: [
+          prefix !== undefined && /* @__PURE__ */ jsx("span", {
+            className: statisticPrefixClass,
+            children: prefix
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: statisticValueClass,
+            style: valueStyle,
+            children: renderedValue
+          }),
+          suffix !== undefined && /* @__PURE__ */ jsx("span", {
+            className: statisticSuffixClass,
+            children: suffix
+          })
+        ]
+      })
+    ]
+  });
+}
+function Countdown({
+  value,
+  format = "HH:mm:ss",
+  onFinish,
+  onChange,
+  ...props
+}) {
+  const target = useMemo(() => toTimestamp(value), [value]);
+  const [remaining, setRemaining] = useState(() => Math.max(0, target - Date.now()));
+  const finishedRef = useRef(false);
+  useEffect(() => {
+    finishedRef.current = false;
+    const tick = () => {
+      const nextRemaining = Math.max(0, target - Date.now());
+      setRemaining(nextRemaining);
+      onChange?.(nextRemaining);
+      if (nextRemaining <= 0 && !finishedRef.current) {
+        finishedRef.current = true;
+        onFinish?.();
+      }
+    };
+    tick();
+    const interval = window.setInterval(tick, 1000);
+    return () => window.clearInterval(interval);
+  }, [target, onChange, onFinish]);
+  return /* @__PURE__ */ jsx(StatisticBase, {
+    ...props,
+    value: formatCountdown(remaining, format)
+  });
+}
+var Statistic = StatisticBase;
+Statistic.Countdown = Countdown;
+export {
+  Statistic
+};

package/dist/components/steps/Steps.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { StepProps, StepsComponent } from "./Steps.types";
+export declare const Step: React.ForwardRefExoticComponent<Omit<StepProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Steps: StepsComponent;

package/dist/components/steps/Steps.types.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentProps, CSSProperties, ForwardRefExoticComponent, Key, ReactNode, RefAttributes } from "react";
+export type StepsDirection = "horizontal" | "vertical";
+export type StepsStatus = "wait" | "process" | "finish" | "error";
+export interface StepsProgressDotInfo {
+    index: number;
+    status: StepsStatus;
+    title?: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode;
+}
+export type StepsProgressDotRender = (iconDot: ReactNode, info: StepsProgressDotInfo) => ReactNode;
+export interface StepItem {
+    key?: Key;
+    title?: ReactNode;
+    subTitle?: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode;
+    children?: ReactNode;
+    icon?: ReactNode;
+    status?: StepsStatus;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface StepProps extends Omit<ComponentProps<"div">, "children" | "content" | "title"> {
+    title?: ReactNode;
+    subTitle?: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode;
+    children?: ReactNode;
+    icon?: ReactNode;
+    status?: StepsStatus;
+    disabled?: boolean;
+}
+export interface StepsProps extends Omit<ComponentProps<"div">, "children" | "onChange"> {
+    items?: StepItem[];
+    current?: number;
+    status?: StepsStatus;
+    direction?: StepsDirection;
+    progressDot?: boolean | StepsProgressDotRender;
+    percent?: number;
+    initial?: number;
+    onChange?: (current: number) => void;
+    children?: ReactNode;
+}
+export type StepComponent = ForwardRefExoticComponent<StepProps & RefAttributes<HTMLDivElement>>;
+export type StepsComponent = ForwardRefExoticComponent<StepsProps & RefAttributes<HTMLDivElement>> & {
+    Step: StepComponent;
+};

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

@@ -0,0 +1,2 @@
+export { Step, Steps } from "./Steps";
+export type { StepComponent, StepItem, StepProps, StepsComponent, StepsDirection, StepsProgressDotInfo, StepsProgressDotRender, StepsProps, StepsStatus, } from "./Steps.types";