@duskmoon-dev/components 0.1.2

package/dist/components/popover/index.js

@@ -0,0 +1,219 @@
+"use client";
+
+// src/components/popover/Popover.tsx
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useId,
+  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/popover.ts
+var popoverWrapperClass = "popover-wrapper";
+var popoverBaseClass = "popover";
+var popoverShowClass = "popover-show";
+var popoverArrowClass = "popover-arrow";
+var popoverNoArrowClass = "popover-no-arrow";
+var popoverPlacementClasses = {
+  top: "popover-top",
+  bottom: "popover-bottom",
+  left: "popover-left",
+  right: "popover-right"
+};
+function getPopoverClasses({
+  placement = "top",
+  open,
+  arrow = true,
+  className
+}) {
+  return cn(popoverBaseClass, popoverPlacementClasses[placement], open && popoverShowClass, !arrow && popoverNoArrowClass, className);
+}
+
+// src/components/popover/Popover.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function callHandler(handler, event) {
+  handler?.(event);
+}
+function getHandlersByTrigger(trigger, open, setOpen) {
+  if (trigger === "hover") {
+    return {
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false)
+    };
+  }
+  if (trigger === "click") {
+    return {
+      onClick: () => setOpen(!open)
+    };
+  }
+  if (trigger === "focus") {
+    return {
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false)
+    };
+  }
+  return {
+    onContextMenu: (event) => {
+      event.preventDefault();
+      setOpen(!open);
+    }
+  };
+}
+var Popover = forwardRef(({
+  children,
+  className,
+  content,
+  title,
+  placement = "top",
+  trigger = "hover",
+  open,
+  defaultOpen,
+  arrow = true,
+  destroyTooltipOnHide,
+  onOpenChange,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  onContextMenu,
+  onClick,
+  id,
+  ...props
+}, ref) => {
+  const isControlled = open !== undefined;
+  const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
+  const generatedId = useId();
+  const tooltipId = id ? `${id}-popover` : generatedId;
+  const visible = isControlled ? open : internalOpen;
+  function updateOpen(nextOpen) {
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }
+  const triggerHandlers = getHandlersByTrigger(trigger, Boolean(visible), updateOpen);
+  function handleMouseEnter(event) {
+    onMouseEnter?.(event);
+    triggerHandlers.onMouseEnter?.();
+  }
+  function handleMouseLeave(event) {
+    onMouseLeave?.(event);
+    triggerHandlers.onMouseLeave?.();
+  }
+  function handleFocus(event) {
+    onFocus?.(event);
+    triggerHandlers.onFocus?.();
+  }
+  function handleBlur(event) {
+    onBlur?.(event);
+    triggerHandlers.onBlur?.();
+  }
+  function handleContextMenu(event) {
+    onContextMenu?.(event);
+    if (triggerHandlers.onContextMenu) {
+      triggerHandlers.onContextMenu(event);
+    }
+  }
+  function handleClick(event) {
+    onClick?.(event);
+    if (triggerHandlers.onClick) {
+      triggerHandlers.onClick();
+      event.preventDefault();
+    }
+  }
+  const hasContent = Boolean(content || title);
+  const shouldRenderContent = !destroyTooltipOnHide || visible;
+  const triggerProps = {
+    "aria-describedby": hasContent && visible ? tooltipId : undefined,
+    onMouseEnter: triggerHandlers.onMouseEnter ? handleMouseEnter : undefined,
+    onMouseLeave: triggerHandlers.onMouseLeave ? handleMouseLeave : undefined,
+    onFocus: triggerHandlers.onFocus ? handleFocus : undefined,
+    onBlur: triggerHandlers.onBlur ? handleBlur : undefined,
+    onContextMenu: triggerHandlers.onContextMenu ? handleContextMenu : undefined,
+    onClick: triggerHandlers.onClick ? handleClick : undefined
+  };
+  const triggerNode = isValidElement(children) ? cloneElement(children, {
+    "aria-describedby": triggerProps["aria-describedby"] ?? children.props["aria-describedby"],
+    onMouseEnter: (event) => {
+      callHandler(children.props.onMouseEnter, event);
+      triggerProps.onMouseEnter?.(event);
+    },
+    onMouseLeave: (event) => {
+      callHandler(children.props.onMouseLeave, event);
+      triggerProps.onMouseLeave?.(event);
+    },
+    onFocus: (event) => {
+      callHandler(children.props.onFocus, event);
+      triggerProps.onFocus?.(event);
+    },
+    onBlur: (event) => {
+      callHandler(children.props.onBlur, event);
+      triggerProps.onBlur?.(event);
+    },
+    onContextMenu: (event) => {
+      callHandler(children.props.onContextMenu, event);
+      triggerProps.onContextMenu?.(event);
+    },
+    onClick: (event) => {
+      callHandler(children.props.onClick, event);
+      triggerProps.onClick?.(event);
+    }
+  }) : children;
+  return /* @__PURE__ */ jsxs("span", {
+    ...props,
+    ref,
+    className: popoverWrapperClass,
+    children: [
+      triggerNode,
+      shouldRenderContent ? /* @__PURE__ */ jsxs("span", {
+        id: tooltipId,
+        role: "tooltip",
+        className: getPopoverClasses({
+          placement,
+          open: visible,
+          arrow,
+          className
+        }),
+        children: [
+          title ? /* @__PURE__ */ jsx("strong", {
+            children: title
+          }) : null,
+          content ?? null,
+          arrow ? /* @__PURE__ */ jsx("span", {
+            className: popoverArrowClass
+          }) : null
+        ]
+      }) : null
+    ]
+  });
+});
+Popover.displayName = "Popover";
+export {
+  Popover
+};

package/dist/components/progress/Progress.d.ts

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

package/dist/components/progress/Progress.types.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+export type ProgressColor = "primary" | "secondary" | "tertiary" | "success" | "error" | "warning" | "info";
+export type ProgressSize = "sm" | "md" | "lg" | "xl";
+export interface ProgressProps extends ComponentProps<"div"> {
+    color?: ProgressColor;
+    size?: ProgressSize;
+    indeterminate?: boolean;
+    percent?: number;
+    showInfo?: boolean;
+    format?: (percent: number) => React.ReactNode;
+}

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

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

package/dist/components/progress/index.js

@@ -0,0 +1,106 @@
+"use client";
+
+// src/components/progress/Progress.tsx
+import { forwardRef } 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/progress.ts
+var progressBaseClass = "progress";
+var progressColorClasses = {
+  primary: "",
+  secondary: "progress-secondary",
+  tertiary: "progress-tertiary",
+  success: "progress-success",
+  error: "progress-error",
+  warning: "progress-warning",
+  info: "progress-info"
+};
+var progressSizeClasses = {
+  sm: "progress-sm",
+  md: "progress-md",
+  lg: "progress-lg",
+  xl: "progress-xl"
+};
+var progressIndeterminateClass = "progress-indeterminate";
+function getProgressClasses({
+  color = "primary",
+  size = "md",
+  indeterminate,
+  className
+}) {
+  return cn(progressBaseClass, progressColorClasses[color], progressSizeClasses[size], indeterminate && progressIndeterminateClass, className);
+}
+
+// src/components/progress/Progress.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function clampPercent(percent) {
+  if (Number.isNaN(percent))
+    return 0;
+  return Math.min(100, Math.max(0, percent));
+}
+var Progress = forwardRef(({
+  color = "primary",
+  size = "md",
+  indeterminate,
+  percent = 0,
+  showInfo = false,
+  format = (value) => `${Math.round(value)}%`,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const safePercent = clampPercent(percent);
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    role: "progressbar",
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": indeterminate ? undefined : safePercent,
+    className: getProgressClasses({
+      color,
+      size,
+      indeterminate,
+      className: cn(showInfo && "progress-labeled", className)
+    }),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "progress-bar",
+        style: indeterminate ? undefined : { width: `${safePercent}%` }
+      }),
+      showInfo && /* @__PURE__ */ jsx("span", {
+        className: "progress-label",
+        children: format(safePercent)
+      }),
+      children
+    ]
+  });
+});
+Progress.displayName = "Progress";
+export {
+  Progress
+};

package/dist/components/qr-code/QRCode.d.ts

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

package/dist/components/qr-code/QRCode.types.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from "react";
+export type QRCodeType = "canvas" | "svg";
+export type QRCodeStatus = "active" | "expired" | "loading" | "scanned";
+export type QRCodeErrorLevel = "L" | "M" | "Q" | "H";
+export interface QRCodeProps extends Omit<ComponentProps<"div">, "children" | "onRefresh"> {
+    value?: string;
+    type?: QRCodeType;
+    size?: number;
+    icon?: string | ReactNode;
+    iconSize?: number;
+    status?: QRCodeStatus;
+    errorLevel?: QRCodeErrorLevel;
+    color?: string;
+    bgColor?: string;
+    bordered?: boolean;
+    onRefresh?: () => void;
+}

package/dist/components/qr-code/index.d.ts

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

package/dist/components/qr-code/index.js

@@ -0,0 +1,224 @@
+"use client";
+
+// src/components/qr-code/QRCode.tsx
+import { forwardRef } 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/qr-code.ts
+var qrCodeBaseClass = "qr-code";
+var qrCodeCanvasClass = "qr-code-canvas";
+var qrCodeSvgClass = "qr-code-svg";
+var qrCodeModulesClass = "qr-code-modules";
+var qrCodeModuleClass = "qr-code-module";
+var qrCodeIconClass = "qr-code-icon";
+var qrCodeMaskClass = "qr-code-mask";
+var qrCodeMaskTitleClass = "qr-code-mask-title";
+var qrCodeRefreshClass = "qr-code-refresh";
+var qrCodeTypeClasses = {
+  canvas: "qr-code-type-canvas",
+  svg: "qr-code-type-svg"
+};
+var qrCodeStatusClasses = {
+  active: "qr-code-active",
+  expired: "qr-code-expired",
+  loading: "qr-code-loading",
+  scanned: "qr-code-scanned"
+};
+var qrCodeErrorLevelClasses = {
+  L: "qr-code-error-l",
+  M: "qr-code-error-m",
+  Q: "qr-code-error-q",
+  H: "qr-code-error-h"
+};
+function getQRCodeClasses({
+  type,
+  status,
+  errorLevel,
+  className
+}) {
+  return cn(qrCodeBaseClass, qrCodeTypeClasses[type], qrCodeStatusClasses[status], qrCodeErrorLevelClasses[errorLevel], className);
+}
+
+// src/components/qr-code/QRCode.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var moduleCountByErrorLevel = {
+  L: 21,
+  M: 25,
+  Q: 29,
+  H: 33
+};
+function hashValue(value) {
+  let hash = 2166136261;
+  for (let index = 0;index < value.length; index += 1) {
+    hash ^= value.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function isFinder(row, col, count) {
+  const top = row < 7;
+  const left = col < 7;
+  const right = col >= count - 7;
+  return top && left || top && right || row >= count - 7 && left;
+}
+function isFinderDark(row, col, count) {
+  const localRow = row >= count - 7 ? row - (count - 7) : row;
+  const localCol = col >= count - 7 ? col - (count - 7) : col;
+  const edge = localRow === 0 || localRow === 6 || localCol === 0 || localCol === 6;
+  const center = localRow >= 2 && localRow <= 4 && localCol >= 2 && localCol <= 4;
+  return edge || center;
+}
+function createModules(value, errorLevel) {
+  const count = moduleCountByErrorLevel[errorLevel];
+  const seed = hashValue(value || " ");
+  return Array.from({ length: count }, (_, row) => Array.from({ length: count }, (_unused, col) => {
+    if (isFinder(row, col, count))
+      return isFinderDark(row, col, count);
+    const mixed = seed + row * 1103515245 + col * 12345 + row * col * 97;
+    return (mixed >>> (row + col) % 16 & 1) === 1;
+  }));
+}
+function renderIcon(icon, iconSize) {
+  if (!icon)
+    return null;
+  return /* @__PURE__ */ jsx("span", {
+    className: qrCodeIconClass,
+    style: { width: iconSize, height: iconSize },
+    children: typeof icon === "string" ? /* @__PURE__ */ jsx("img", {
+      src: icon,
+      alt: ""
+    }) : icon
+  });
+}
+function QRCodeModules({
+  modules,
+  color
+}) {
+  const count = modules.length;
+  return /* @__PURE__ */ jsx("svg", {
+    className: qrCodeSvgClass,
+    viewBox: `0 0 ${count} ${count}`,
+    role: "img",
+    "aria-label": "QR code",
+    shapeRendering: "crispEdges",
+    children: modules.map((row, rowIndex) => row.map((dark, colIndex) => dark ? /* @__PURE__ */ jsx("rect", {
+      x: colIndex,
+      y: rowIndex,
+      width: 1,
+      height: 1,
+      fill: color
+    }, `${rowIndex}-${colIndex}`) : null))
+  });
+}
+function CSSModules({
+  modules,
+  color
+}) {
+  return /* @__PURE__ */ jsx("span", {
+    className: qrCodeModulesClass,
+    style: { gridTemplateColumns: `repeat(${modules.length}, 1fr)` },
+    role: "img",
+    "aria-label": "QR code",
+    children: modules.flatMap((row, rowIndex) => row.map((dark, colIndex) => /* @__PURE__ */ jsx("span", {
+      className: cn(qrCodeModuleClass, dark && "qr-code-module-dark"),
+      style: dark ? { backgroundColor: color } : undefined
+    }, `${rowIndex}-${colIndex}`)))
+  });
+}
+function statusLabel(status) {
+  if (status === "expired")
+    return "QR code expired";
+  if (status === "loading")
+    return "QR code loading";
+  if (status === "scanned")
+    return "QR code scanned";
+  return null;
+}
+var QRCode = forwardRef(({
+  value = "",
+  type = "canvas",
+  size = 160,
+  icon,
+  iconSize = 40,
+  status = "active",
+  errorLevel = "M",
+  color = "#000",
+  bgColor = "#fff",
+  bordered = true,
+  className,
+  style,
+  onRefresh,
+  ...props
+}, ref) => {
+  const modules = createModules(value, errorLevel);
+  const label = statusLabel(status);
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getQRCodeClasses({ type, status, errorLevel, className }),
+    style: {
+      width: size,
+      height: size,
+      backgroundColor: bgColor,
+      border: bordered ? undefined : "0",
+      ...style
+    },
+    "data-value": value,
+    children: [
+      type === "svg" ? /* @__PURE__ */ jsx(QRCodeModules, {
+        modules,
+        color
+      }) : /* @__PURE__ */ jsx("span", {
+        className: qrCodeCanvasClass,
+        children: /* @__PURE__ */ jsx(CSSModules, {
+          modules,
+          color
+        })
+      }),
+      renderIcon(icon, iconSize),
+      label ? /* @__PURE__ */ jsxs("span", {
+        className: qrCodeMaskClass,
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: qrCodeMaskTitleClass,
+            children: label
+          }),
+          status === "expired" && onRefresh ? /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: qrCodeRefreshClass,
+            onClick: onRefresh,
+            children: "Refresh"
+          }) : null
+        ]
+      }) : null
+    ]
+  });
+});
+QRCode.displayName = "QRCode";
+export {
+  QRCode
+};

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { RadioProps } from "./Radio.types";
+export declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/radio/Radio.types.d.ts

@@ -0,0 +1,14 @@
+import type { ChangeEvent, ComponentProps, ReactNode } from "react";
+export type RadioColor = "primary" | "secondary" | "tertiary";
+export type RadioSize = "sm" | "md" | "lg";
+export type RadioLabelPosition = "left" | "right";
+export interface RadioProps extends Omit<ComponentProps<"input">, "children" | "className" | "size" | "type"> {
+    color?: RadioColor;
+    size?: RadioSize;
+    error?: boolean;
+    loading?: boolean;
+    labelPosition?: RadioLabelPosition;
+    className?: string;
+    children?: ReactNode;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}

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

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