@duskmoon-dev/components 0.1.2

package/dist/components/slider/index.js

@@ -0,0 +1,425 @@
+"use client";
+
+// src/components/slider/Slider.tsx
+import React, {
+  forwardRef,
+  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/slider.ts
+var sliderBaseClass = "slider";
+var sliderTrackClass = "slider-track";
+var sliderTrackFilledClass = "slider-track-filled";
+var sliderThumbClass = "slider-thumb";
+var sliderThumbLabelClass = "slider-thumb-label";
+var sliderInputClass = "slider-input";
+var sliderMarksClass = "slider-marks";
+var sliderMarkClass = "slider-mark";
+var sliderMarkActiveClass = "slider-mark-active";
+var sliderMarkLabelClass = "slider-mark-label";
+var sliderRangeClass = "slider-range";
+var sliderVerticalClass = "slider-vertical";
+var sliderDisabledClass = "slider-disabled";
+var sliderLabelsAlwaysClass = "slider-labels-always";
+var sliderSizeClasses = {
+  sm: "slider-sm",
+  md: "",
+  lg: "slider-lg"
+};
+var sliderColorClasses = {
+  primary: "",
+  secondary: "slider-secondary",
+  tertiary: "slider-tertiary"
+};
+function getSliderClasses({
+  size = "md",
+  color = "primary",
+  range,
+  vertical,
+  disabled,
+  tooltipOpen,
+  className
+}) {
+  return cn(sliderBaseClass, sliderSizeClasses[size], sliderColorClasses[color], range && sliderRangeClass, vertical && sliderVerticalClass, disabled && sliderDisabledClass, tooltipOpen && sliderLabelsAlwaysClass, className);
+}
+function getSliderMarkClasses({
+  active,
+  className
+}) {
+  return cn(sliderMarkClass, active && sliderMarkActiveClass, className);
+}
+
+// src/components/slider/Slider.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var hiddenInputStyle = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  opacity: 0,
+  cursor: "inherit",
+  margin: 0,
+  pointerEvents: "auto"
+};
+function isRangeValue(value) {
+  return Array.isArray(value);
+}
+function clamp(value, min, max) {
+  if (!Number.isFinite(value))
+    return min;
+  return Math.min(max, Math.max(min, value));
+}
+function getSafeBounds(min, max) {
+  return min <= max ? [min, max] : [max, min];
+}
+function normalizeStep(step) {
+  if (step === null || step === undefined)
+    return;
+  return Number.isFinite(step) && step > 0 ? step : undefined;
+}
+function snapToStep(value, min, max, step) {
+  const safeStep = normalizeStep(step);
+  const clampedValue = clamp(value, min, max);
+  if (!safeStep)
+    return clampedValue;
+  const snapped = Math.round((clampedValue - min) / safeStep) * safeStep + min;
+  const decimals = `${safeStep}`.split(".")[1]?.length ?? 0;
+  return clamp(Number(snapped.toFixed(decimals)), min, max);
+}
+function normalizeScalarValue({
+  value,
+  min,
+  max,
+  step
+}) {
+  return snapToStep(value, min, max, step);
+}
+function normalizeRangeValue({
+  value,
+  min,
+  max,
+  step
+}) {
+  const nextValue = isRangeValue(value) ? value : [min, value ?? min];
+  const lower = normalizeScalarValue({ value: nextValue[0], min, max, step });
+  const upper = normalizeScalarValue({ value: nextValue[1], min, max, step });
+  return lower <= upper ? [lower, upper] : [upper, lower];
+}
+function normalizeValue({
+  value,
+  min,
+  max,
+  step,
+  range
+}) {
+  if (range) {
+    return normalizeRangeValue({ value, min, max, step });
+  }
+  return normalizeScalarValue({
+    value: isRangeValue(value) ? value[0] : value ?? min,
+    min,
+    max,
+    step
+  });
+}
+function valuesEqual(first, second) {
+  if (Array.isArray(first) || Array.isArray(second)) {
+    return Array.isArray(first) && Array.isArray(second) && first[0] === second[0] && first[1] === second[1];
+  }
+  return first === second;
+}
+function getPercent(value, min, max, reverse) {
+  if (max === min)
+    return 0;
+  const percent = (value - min) / (max - min) * 100;
+  return reverse ? 100 - percent : percent;
+}
+function getFilledStyle({
+  value,
+  min,
+  max,
+  reverse,
+  vertical
+}) {
+  if (Array.isArray(value)) {
+    const first = getPercent(value[0], min, max, reverse);
+    const second = getPercent(value[1], min, max, reverse);
+    const start = Math.min(first, second);
+    const end = Math.max(first, second);
+    const size = `${end - start}%`;
+    return vertical ? { bottom: `${start}%`, height: size } : { left: `${start}%`, width: size };
+  }
+  const percent = getPercent(value, min, max, reverse);
+  if (vertical) {
+    return reverse ? { top: 0, height: `${percent}%` } : { bottom: 0, height: `${percent}%` };
+  }
+  return reverse ? { left: `${percent}%`, width: `${100 - percent}%` } : { left: 0, width: `${percent}%` };
+}
+function getThumbStyle({
+  value,
+  min,
+  max,
+  reverse,
+  vertical
+}) {
+  const percent = getPercent(value, min, max, reverse);
+  return vertical ? { bottom: `${percent}%` } : { left: `${percent}%` };
+}
+function isMarkConfig(mark) {
+  return typeof mark === "object" && mark !== null && !React.isValidElement(mark) && (("label" in mark) || ("style" in mark) || ("className" in mark));
+}
+function getMarkLabel(mark) {
+  return isMarkConfig(mark) ? mark.label : mark;
+}
+function getMarkStyle(mark) {
+  return isMarkConfig(mark) ? mark.style : undefined;
+}
+function getMarkClassName(mark) {
+  return isMarkConfig(mark) ? mark.className : undefined;
+}
+function isMarkActive(value, markValue) {
+  if (Array.isArray(value)) {
+    return markValue >= value[0] && markValue <= value[1];
+  }
+  return markValue <= value;
+}
+function getTooltipLabel(tooltip, value) {
+  if (tooltip === false)
+    return null;
+  if (typeof tooltip === "function") {
+    return tooltip(value);
+  }
+  if (typeof tooltip === "object" && tooltip !== null && "formatter" in tooltip) {
+    return tooltip.formatter === null ? null : tooltip.formatter?.(value);
+  }
+  return value;
+}
+function shouldShowTooltipAlways(tooltip) {
+  return typeof tooltip === "object" && tooltip !== null && tooltip.open;
+}
+var Slider = forwardRef(({
+  value,
+  defaultValue,
+  onChange,
+  onAfterChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  range = false,
+  disabled = false,
+  vertical = false,
+  marks,
+  tooltip,
+  reverse = false,
+  size = "md",
+  color = "primary",
+  className,
+  onInputKeyDown,
+  ...props
+}, ref) => {
+  const [safeMin, safeMax] = getSafeBounds(min, max);
+  const isRange = Boolean(range) || isRangeValue(value) || isRangeValue(defaultValue);
+  const isControlled = value !== undefined;
+  const initialValue = useMemo(() => normalizeValue({
+    value: defaultValue,
+    min: safeMin,
+    max: safeMax,
+    step,
+    range: isRange
+  }), [defaultValue, isRange, safeMax, safeMin, step]);
+  const [internalValue, setInternalValue] = useState(initialValue);
+  const currentValue = normalizeValue({
+    value: isControlled ? value : internalValue,
+    min: safeMin,
+    max: safeMax,
+    step,
+    range: isRange
+  });
+  const lastCommittedValue = useRef(currentValue);
+  useEffect(() => {
+    lastCommittedValue.current = currentValue;
+  }, [currentValue]);
+  function commitValue(nextValue) {
+    if (disabled)
+      return;
+    const normalizedValue = normalizeValue({
+      value: nextValue,
+      min: safeMin,
+      max: safeMax,
+      step,
+      range: isRange
+    });
+    lastCommittedValue.current = normalizedValue;
+    if (!isControlled) {
+      setInternalValue(normalizedValue);
+    }
+    if (!valuesEqual(currentValue, normalizedValue)) {
+      onChange?.(normalizedValue);
+    }
+  }
+  function commitThumbValue(index, nextThumbValue) {
+    if (!isRange) {
+      commitValue(nextThumbValue);
+      return;
+    }
+    const rangeValue = Array.isArray(currentValue) ? currentValue : normalizeRangeValue({
+      value: currentValue,
+      min: safeMin,
+      max: safeMax,
+      step
+    });
+    const nextRange = index === 0 ? [nextThumbValue, rangeValue[1]] : [rangeValue[0], nextThumbValue];
+    commitValue(nextRange);
+  }
+  function emitAfterChange() {
+    if (!disabled) {
+      onAfterChange?.(lastCommittedValue.current);
+    }
+  }
+  function handleInputKeyDown(event, index) {
+    onInputKeyDown?.(event);
+    if (event.defaultPrevented || disabled)
+      return;
+    const safeStep = normalizeStep(step) ?? 1;
+    const currentThumbValue = Array.isArray(currentValue) ? currentValue[index] : currentValue;
+    const reverseFactor = reverse ? -1 : 1;
+    const deltas = {
+      ArrowRight: safeStep * reverseFactor,
+      ArrowUp: safeStep,
+      ArrowLeft: -safeStep * reverseFactor,
+      ArrowDown: -safeStep
+    };
+    if (event.key === "Home") {
+      event.preventDefault();
+      commitThumbValue(index, safeMin);
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      commitThumbValue(index, safeMax);
+      return;
+    }
+    if (event.key in deltas) {
+      event.preventDefault();
+      commitThumbValue(index, currentThumbValue + deltas[event.key]);
+    }
+  }
+  const rootClassName = getSliderClasses({
+    size,
+    color,
+    range: isRange,
+    vertical,
+    disabled,
+    tooltipOpen: shouldShowTooltipAlways(tooltip),
+    className
+  });
+  const values = Array.isArray(currentValue) ? currentValue : [currentValue];
+  const markEntries = Object.entries(marks ?? {}).map(([markValue, mark]) => [Number(markValue), mark]).filter(([markValue]) => Number.isFinite(markValue)).sort(([first], [second]) => first - second);
+  const inputStep = step === null ? undefined : step;
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    "aria-disabled": disabled || undefined,
+    className: rootClassName,
+    children: /* @__PURE__ */ jsxs("div", {
+      className: sliderTrackClass,
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          className: sliderTrackFilledClass,
+          style: getFilledStyle({
+            value: currentValue,
+            min: safeMin,
+            max: safeMax,
+            reverse,
+            vertical
+          })
+        }),
+        markEntries.length > 0 ? /* @__PURE__ */ jsx("div", {
+          className: sliderMarksClass,
+          "aria-hidden": "true",
+          children: markEntries.map(([markValue, mark]) => {
+            const percent = getPercent(markValue, safeMin, safeMax, reverse);
+            const offsetStyle = vertical ? { bottom: `${percent}%` } : { left: `${percent}%` };
+            return /* @__PURE__ */ jsx("span", {
+              className: getSliderMarkClasses({
+                active: isMarkActive(currentValue, markValue),
+                className: getMarkClassName(mark)
+              }),
+              style: { ...offsetStyle, ...getMarkStyle(mark) },
+              children: /* @__PURE__ */ jsx("span", {
+                className: sliderMarkLabelClass,
+                children: getMarkLabel(mark)
+              })
+            }, markValue);
+          })
+        }) : null,
+        values.map((thumbValue, index) => {
+          const tooltipLabel = getTooltipLabel(tooltip, thumbValue);
+          return /* @__PURE__ */ jsx("span", {
+            className: sliderThumbClass,
+            style: getThumbStyle({
+              value: thumbValue,
+              min: safeMin,
+              max: safeMax,
+              reverse,
+              vertical
+            }),
+            children: tooltipLabel !== null ? /* @__PURE__ */ jsx("span", {
+              className: sliderThumbLabelClass,
+              children: tooltipLabel
+            }) : null
+          }, index);
+        }),
+        values.map((thumbValue, index) => /* @__PURE__ */ jsx("input", {
+          type: "range",
+          "aria-label": isRange ? index === 0 ? "Minimum value" : "Maximum value" : "Slider value",
+          className: sliderInputClass,
+          min: safeMin,
+          max: safeMax,
+          step: inputStep,
+          disabled,
+          value: thumbValue,
+          style: hiddenInputStyle,
+          onChange: (event) => commitThumbValue(index, Number(event.currentTarget.value)),
+          onMouseUp: emitAfterChange,
+          onTouchEnd: emitAfterChange,
+          onBlur: emitAfterChange,
+          onKeyDown: (event) => handleInputKeyDown(event, index),
+          onKeyUp: emitAfterChange
+        }, index))
+      ]
+    })
+  });
+});
+Slider.displayName = "Slider";
+export {
+  Slider
+};

package/dist/components/space/Space.d.ts

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

package/dist/components/space/Space.types.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps, ReactNode } from "react";
+export type SpaceSize = "small" | "middle" | "large" | number;
+export type SpaceDirection = "horizontal" | "vertical";
+export type SpaceAlign = "start" | "end" | "center" | "baseline";
+export interface SpaceProps extends ComponentProps<"div"> {
+    size?: SpaceSize | [SpaceSize, SpaceSize];
+    direction?: SpaceDirection;
+    align?: SpaceAlign;
+    split?: ReactNode;
+    wrap?: boolean;
+}
+export interface SpaceCompactProps extends ComponentProps<"div"> {
+    block?: boolean;
+    direction?: SpaceDirection;
+    size?: SpaceSize;
+}
+export interface SpaceComponent extends React.ForwardRefExoticComponent<SpaceProps & React.RefAttributes<HTMLDivElement>> {
+    Compact: React.ForwardRefExoticComponent<SpaceCompactProps & React.RefAttributes<HTMLDivElement>>;
+}

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

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

package/dist/components/space/index.js

@@ -0,0 +1,144 @@
+"use client";
+
+// src/components/space/Space.tsx
+import React, { Children, forwardRef, isValidElement } 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/space.ts
+var spaceBaseClass = "space";
+var spaceItemClass = "space-item";
+var spaceSplitClass = "space-split";
+var spaceWrapClass = "space-wrap";
+var spaceCompactClass = "space-compact";
+var spaceCompactBlockClass = "space-compact-block";
+var spaceDirectionClasses = {
+  horizontal: "space-horizontal",
+  vertical: "space-vertical"
+};
+function getSpaceClasses({
+  direction = "horizontal",
+  wrap,
+  className
+}) {
+  return cn(spaceBaseClass, spaceDirectionClasses[direction], wrap && spaceWrapClass, className);
+}
+function getSpaceCompactClasses({
+  block,
+  direction = "horizontal",
+  className
+}) {
+  return cn(spaceCompactClass, `space-compact-${direction}`, block && spaceCompactBlockClass, className);
+}
+
+// src/components/space/Space.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeMap = {
+  small: 8,
+  middle: 16,
+  large: 24
+};
+var alignMap = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  baseline: "baseline"
+};
+function resolveSize(size) {
+  if (Array.isArray(size)) {
+    return size.map((item) => sizeMap[item] ?? item);
+  }
+  return sizeMap[size] ?? sizeMap.small;
+}
+var SpaceBase = forwardRef(({
+  size = "small",
+  direction = "horizontal",
+  align,
+  split,
+  wrap,
+  className,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const gap = resolveSize(size);
+  const childList = Children.toArray(children).filter((child) => child !== null && child !== undefined);
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    className: getSpaceClasses({ direction, wrap, className }),
+    style: {
+      display: "inline-flex",
+      flexDirection: direction === "vertical" ? "column" : undefined,
+      flexWrap: wrap ? "wrap" : undefined,
+      alignItems: align ? alignMap[align] : undefined,
+      gap: Array.isArray(gap) ? `${gap[0]}px ${gap[1]}px` : gap,
+      ...style
+    },
+    children: childList.map((child, index) => /* @__PURE__ */ jsxs(React.Fragment, {
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          className: spaceItemClass,
+          children: child
+        }),
+        split && index < childList.length - 1 ? /* @__PURE__ */ jsx("span", {
+          className: spaceSplitClass,
+          children: split
+        }) : null
+      ]
+    }, isValidElement(child) ? child.key : index))
+  });
+});
+SpaceBase.displayName = "Space";
+var Compact = forwardRef(({
+  block,
+  direction = "horizontal",
+  size = "middle",
+  className,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const gap = resolveSize(size);
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    className: getSpaceCompactClasses({ block, direction, className }),
+    style: {
+      display: block ? "flex" : "inline-flex",
+      flexDirection: direction === "vertical" ? "column" : undefined,
+      gap: typeof gap === "number" ? gap : undefined,
+      ...style
+    },
+    children
+  });
+});
+Compact.displayName = "Space.Compact";
+var Space = SpaceBase;
+Space.Compact = Compact;
+export {
+  Space
+};

package/dist/components/spin/Spin.d.ts

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

package/dist/components/spin/Spin.types.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps, ReactNode } from "react";
+export type SpinSize = "small" | "default" | "large";
+export interface SpinProps extends Omit<ComponentProps<"div">, "children"> {
+    spinning?: boolean;
+    size?: SpinSize;
+    tip?: ReactNode;
+    indicator?: ReactNode;
+    delay?: number;
+    fullscreen?: boolean;
+    wrapperClassName?: string;
+    children?: ReactNode;
+}
+export interface SpinComponent extends React.ForwardRefExoticComponent<SpinProps & React.RefAttributes<HTMLDivElement>> {
+    setDefaultIndicator: (indicator?: ReactNode) => void;
+}

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

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