@duskmoon-dev/components 0.1.2

package/dist/components/dm-splitter/DmSplitter.d.ts

@@ -0,0 +1,3 @@
+import type { DmSplitterComponent } from "./DmSplitter.types";
+export declare const DmSplitter: DmSplitterComponent;
+export default DmSplitter;

package/dist/components/dm-splitter/DmSplitter.types.d.ts

@@ -0,0 +1,32 @@
+import type { ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes } from "react";
+import type { SplitterPanelComponent, SplitterPanelProps, SplitterProps, SplitterSize } from "../splitter/Splitter.types";
+export interface DmSplitterPersistenceAdapter {
+    fetch: (key: string) => Promise<SplitterSize[] | {
+        sizes?: SplitterSize[];
+    } | null>;
+    update: (key: string, data: {
+        sizes: SplitterSize[];
+    }) => Promise<unknown>;
+}
+export interface DmSplitterPersistence {
+    persistenceKey: string;
+    persistenceType?: "localStorage" | DmSplitterPersistenceAdapter;
+}
+export interface DmSplitterProps extends Omit<SplitterProps, "sizes" | "defaultSizes" | "onResize"> {
+    children: ReactNode;
+    sizes?: SplitterSize[];
+    defaultSizes?: SplitterSize[];
+    persistence?: DmSplitterPersistence;
+    gap?: number | string;
+    collapseBarOffsetTop?: string;
+    min?: SplitterSize[];
+    max?: SplitterSize[];
+    resettable?: boolean;
+    resetLabel?: ReactNode;
+    onResize?: (sizes: SplitterSize[]) => void;
+}
+export type DmSplitterPanelProps = SplitterPanelProps;
+export type DmSplitterComponent = ForwardRefExoticComponent<DmSplitterProps & RefAttributes<HTMLDivElement>> & {
+    Panel: SplitterPanelComponent;
+};
+export type DmSplitterElement = ReactElement<DmSplitterProps>;

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

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

package/dist/components/dm-splitter/index.js

@@ -0,0 +1,406 @@
+"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;
+// src/components/dm-splitter/DmSplitter.tsx
+import React2, {
+  Children,
+  forwardRef as forwardRef2,
+  isValidElement,
+  useEffect,
+  useMemo as useMemo2,
+  useState as useState2
+} from "react";
+
+// src/classes/dm-splitter.ts
+var dmSplitterBaseClass = "dm-splitter";
+var dmSplitterInnerClass = "dm-splitter-inner";
+var dmSplitterResetClass = "dm-splitter-reset";
+var dmSplitterPersistedClass = "dm-splitter-persisted";
+var dmSplitterLayoutClasses = {
+  horizontal: "dm-splitter-horizontal",
+  vertical: "dm-splitter-vertical"
+};
+function getDmSplitterClasses({
+  layout,
+  persisted,
+  className
+}) {
+  return cn(dmSplitterBaseClass, dmSplitterLayoutClasses[layout], persisted && dmSplitterPersistedClass, className);
+}
+
+// src/components/dm-splitter/DmSplitter.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function storageAvailable() {
+  return typeof window !== "undefined" && Boolean(window.localStorage);
+}
+function readLocalSizes(key) {
+  if (!storageAvailable())
+    return;
+  try {
+    const parsed = JSON.parse(window.localStorage.getItem(key) ?? "null");
+    if (Array.isArray(parsed))
+      return parsed;
+    if (Array.isArray(parsed?.sizes))
+      return parsed.sizes;
+  } catch {
+    return;
+  }
+  return;
+}
+function writeLocalSizes(key, sizes) {
+  if (!storageAvailable())
+    return;
+  window.localStorage.setItem(key, JSON.stringify({ sizes }));
+}
+function removeLocalSizes(key) {
+  if (!storageAvailable())
+    return;
+  window.localStorage.removeItem(key);
+}
+function sizesFromAdapterPayload(payload) {
+  if (Array.isArray(payload))
+    return payload;
+  if (Array.isArray(payload?.sizes))
+    return payload.sizes;
+  return;
+}
+function panelDefaults(children, fallback) {
+  return Children.toArray(children).filter(isValidElement).map((child, index) => fallback?.[index] ?? child.props.size ?? child.props.defaultSize ?? "1fr");
+}
+function withIndexedBounds(children, min, max) {
+  if (!min && !max)
+    return children;
+  return Children.map(children, (child, index) => {
+    if (!isValidElement(child))
+      return child;
+    return React2.cloneElement(child, {
+      min: child.props.min ?? min?.[index],
+      max: child.props.max ?? max?.[index]
+    });
+  });
+}
+function persistenceKey(persistence) {
+  return persistence?.persistenceKey;
+}
+var DmSplitterRoot = forwardRef2(({
+  children,
+  className,
+  style,
+  layout = "horizontal",
+  sizes,
+  defaultSizes,
+  persistence,
+  gap = 0,
+  collapseBarOffsetTop,
+  min,
+  max,
+  resettable,
+  resetLabel = "Reset",
+  onResize,
+  ...props
+}, ref) => {
+  const key = persistenceKey(persistence);
+  const [persistedSizes, setPersistedSizes] = useState2(() => key ? readLocalSizes(key) : undefined);
+  const initialSizes = useMemo2(() => panelDefaults(children, defaultSizes), [children, defaultSizes]);
+  const mergedSizes = sizes ?? persistedSizes;
+  const hasPersistence = Boolean(key);
+  const shouldRenderReset = resettable ?? hasPersistence;
+  const gapValue = typeof gap === "number" ? `${gap}px` : gap;
+  useEffect(() => {
+    if (!key || persistence?.persistenceType === "localStorage")
+      return;
+    if (!persistence?.persistenceType)
+      return;
+    let active = true;
+    persistence.persistenceType.fetch(key).then((payload) => {
+      if (!active)
+        return;
+      const nextSizes = sizesFromAdapterPayload(payload);
+      if (nextSizes)
+        setPersistedSizes(nextSizes);
+    });
+    return () => {
+      active = false;
+    };
+  }, [key, persistence?.persistenceType]);
+  function persist(nextSizes) {
+    if (!key || sizes !== undefined)
+      return;
+    setPersistedSizes(nextSizes);
+    if (!persistence?.persistenceType || persistence.persistenceType === "localStorage") {
+      writeLocalSizes(key, nextSizes);
+      return;
+    }
+    persistence.persistenceType.update(key, { sizes: nextSizes });
+  }
+  function handleResize(nextSizes) {
+    persist(nextSizes);
+    onResize?.(nextSizes);
+  }
+  function handleReset() {
+    if (key && (!persistence?.persistenceType || persistence.persistenceType === "localStorage")) {
+      removeLocalSizes(key);
+    }
+    setPersistedSizes(initialSizes);
+    onResize?.(initialSizes);
+  }
+  const wrapperStyle = {
+    "--dm-splitter-gap": gapValue,
+    "--dm-splitter-collapse-offset-top": collapseBarOffsetTop,
+    gap: gapValue,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs2("div", {
+    className: getDmSplitterClasses({
+      layout,
+      persisted: hasPersistence,
+      className
+    }),
+    style: wrapperStyle,
+    children: [
+      shouldRenderReset ? /* @__PURE__ */ jsx2("button", {
+        type: "button",
+        className: dmSplitterResetClass,
+        onClick: handleReset,
+        children: resetLabel
+      }) : null,
+      /* @__PURE__ */ jsx2(Splitter, {
+        ...props,
+        ref,
+        layout,
+        sizes: mergedSizes,
+        defaultSizes,
+        onResize: handleResize,
+        className: dmSplitterInnerClass,
+        children: withIndexedBounds(children, min, max)
+      })
+    ]
+  });
+});
+DmSplitterRoot.displayName = "DmSplitter";
+DmSplitterRoot.Panel = Splitter.Panel;
+var DmSplitter = DmSplitterRoot;
+export {
+  DmSplitter
+};

package/dist/components/dm-status/DmStatus.d.ts

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

package/dist/components/dm-status/DmStatus.types.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+import type { SpinProps } from "../spin";
+export type DmStatusType = "empty" | "loading" | "error" | "success";
+export interface DmStatusProps extends Omit<ComponentProps<"div">, "children"> {
+    status?: DmStatusType;
+    height?: string | number;
+    loadingProps?: SpinProps;
+    description?: ReactNode;
+    image?: string | ReactNode;
+    children?: ReactNode;
+    imageStyle?: CSSProperties;
+}

package/dist/components/dm-status/index.d.ts

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