@duskmoon-dev/components 0.1.2

package/dist/components/radio/index.js

@@ -0,0 +1,118 @@
+"use client";
+
+// src/components/radio/Radio.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/radio.ts
+var radioBaseClass = "radio";
+var radioInputClass = "radio-input";
+var radioCircleBaseClass = "radio-circle";
+var radioDotClass = "radio-dot";
+var radioLabelBaseClass = "radio-label";
+var radioColorClasses = {
+  primary: "radio-primary",
+  secondary: "radio-secondary",
+  tertiary: "radio-tertiary"
+};
+var radioSizeClasses = {
+  sm: "radio-sm",
+  md: "",
+  lg: "radio-lg"
+};
+var radioLabelPositionClasses = {
+  left: "radio-label-left",
+  right: ""
+};
+var radioErrorClass = "radio-error";
+var radioLoadingClass = "radio-loading";
+function getRadioClasses({
+  size = "md",
+  error,
+  loading,
+  className
+}) {
+  return cn(radioBaseClass, radioSizeClasses[size], error && radioErrorClass, loading && radioLoadingClass, className);
+}
+function getRadioCircleClasses({
+  color = "primary"
+}) {
+  return cn(radioCircleBaseClass, radioColorClasses[color]);
+}
+function getRadioLabelClasses({
+  labelPosition = "right"
+}) {
+  return cn(radioLabelBaseClass, radioLabelPositionClasses[labelPosition]);
+}
+
+// src/components/radio/Radio.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Radio = forwardRef(({
+  color = "primary",
+  size = "md",
+  error,
+  loading,
+  labelPosition = "right",
+  className,
+  children,
+  disabled,
+  ...props
+}, ref) => {
+  const isDisabled = disabled || loading;
+  return /* @__PURE__ */ jsxs("label", {
+    className: getRadioClasses({
+      size,
+      error,
+      loading,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        ...props,
+        ref,
+        type: "radio",
+        className: radioInputClass,
+        disabled: isDisabled
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: getRadioCircleClasses({ color }),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx("span", {
+          className: radioDotClass
+        })
+      }),
+      children ? /* @__PURE__ */ jsx("span", {
+        className: getRadioLabelClasses({ labelPosition }),
+        children
+      }) : null
+    ]
+  });
+});
+Radio.displayName = "Radio";
+export {
+  Radio
+};

package/dist/components/rate/Rate.d.ts

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

package/dist/components/rate/Rate.types.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps, ReactNode } from "react";
+export type RateSize = "sm" | "md" | "lg" | "xl";
+export type RateColor = "primary" | "secondary" | "tertiary" | "warning";
+export interface RateCharacterRenderInfo {
+    index: number;
+    value: number;
+}
+export type RateCharacter = ReactNode | ((info: RateCharacterRenderInfo) => ReactNode);
+export interface RateProps extends Omit<ComponentProps<"div">, "children" | "className" | "color" | "defaultValue" | "onChange"> {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    count?: number;
+    allowHalf?: boolean;
+    allowClear?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    character?: RateCharacter;
+    tooltips?: string[];
+    className?: string;
+    size?: RateSize;
+    color?: RateColor;
+}

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

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

package/dist/components/rate/index.js

@@ -0,0 +1,202 @@
+"use client";
+
+// src/components/rate/Rate.tsx
+import {
+  forwardRef,
+  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/rate.ts
+var rateBaseClass = "rating";
+var rateItemBaseClass = "rating-item";
+var rateItemFilledClass = "rating-item-filled";
+var rateItemHalfClass = "rating-item-half";
+var rateDisabledClass = "rating-disabled";
+var rateReadOnlyClass = "rating-readonly";
+var rateInteractiveClass = "rating-interactive";
+var rateSizeClasses = {
+  sm: "rating-sm",
+  md: "",
+  lg: "rating-lg",
+  xl: "rating-xl"
+};
+var rateColorClasses = {
+  primary: "",
+  secondary: "rating-secondary",
+  tertiary: "rating-tertiary",
+  warning: "rating-warning"
+};
+function getRateClasses({
+  size = "md",
+  color = "primary",
+  disabled,
+  readOnly,
+  interactive,
+  className
+}) {
+  return cn(rateBaseClass, rateSizeClasses[size], rateColorClasses[color], disabled && rateDisabledClass, readOnly && rateReadOnlyClass, interactive && rateInteractiveClass, className);
+}
+function getRateItemClasses({
+  filled,
+  half,
+  className
+}) {
+  return cn(rateItemBaseClass, filled && rateItemFilledClass, half && rateItemHalfClass, className);
+}
+
+// src/components/rate/Rate.tsx
+import { jsx } from "react/jsx-runtime";
+function clampValue(value, count, allowHalf) {
+  if (!Number.isFinite(value))
+    return 0;
+  const clamped = Math.min(count, Math.max(0, value));
+  const stepped = allowHalf ? Math.round(clamped * 2) / 2 : Math.round(clamped);
+  return Math.min(count, Math.max(0, stepped));
+}
+function getClickValue(index, allowHalf, event) {
+  if (!allowHalf)
+    return index;
+  const rect = event.currentTarget.getBoundingClientRect();
+  const isLeftHalf = rect.width > 0 && event.clientX <= rect.left + rect.width / 2;
+  return isLeftHalf ? index - 0.5 : index;
+}
+function getCharacter({
+  character,
+  info
+}) {
+  if (typeof character === "function") {
+    return character(info);
+  }
+  return character;
+}
+var Rate = forwardRef(({
+  value,
+  defaultValue = 0,
+  onChange,
+  count = 5,
+  allowHalf = false,
+  allowClear = true,
+  disabled = false,
+  readOnly = false,
+  character = "★",
+  tooltips,
+  className,
+  size = "md",
+  color = "primary",
+  onKeyDown,
+  tabIndex,
+  "aria-label": ariaLabel,
+  ...props
+}, ref) => {
+  const safeCount = Math.max(0, Math.floor(count));
+  const [internalValue, setInternalValue] = useState(() => clampValue(defaultValue, safeCount, allowHalf));
+  const isControlled = value !== undefined;
+  const currentValue = clampValue(isControlled ? value : internalValue, safeCount, allowHalf);
+  const isInteractive = !disabled && !readOnly;
+  function commitValue(nextValue) {
+    if (!isInteractive)
+      return;
+    const normalizedValue = clampValue(nextValue, safeCount, allowHalf);
+    const finalValue = allowClear && normalizedValue === currentValue ? 0 : normalizedValue;
+    if (finalValue === currentValue)
+      return;
+    if (!isControlled) {
+      setInternalValue(finalValue);
+    }
+    onChange?.(finalValue);
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || !isInteractive)
+      return;
+    const step = allowHalf ? 0.5 : 1;
+    const keyValues = {
+      ArrowRight: currentValue + step,
+      ArrowUp: currentValue + step,
+      ArrowLeft: currentValue - step,
+      ArrowDown: currentValue - step,
+      Home: 0,
+      End: safeCount
+    };
+    if (event.key in keyValues) {
+      event.preventDefault();
+      commitValue(keyValues[event.key]);
+    }
+  }
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    role: "radiogroup",
+    "aria-label": ariaLabel ?? "Rate",
+    "aria-disabled": disabled || undefined,
+    "aria-readonly": readOnly || undefined,
+    tabIndex: tabIndex ?? -1,
+    className: getRateClasses({
+      size,
+      color,
+      disabled,
+      readOnly,
+      interactive: isInteractive,
+      className
+    }),
+    onKeyDown: handleKeyDown,
+    children: Array.from({ length: safeCount }, (_, itemIndex) => {
+      const index = itemIndex + 1;
+      const filled = currentValue >= index;
+      const half = allowHalf && !filled && currentValue >= index - 0.5;
+      const checked = currentValue > 0 && Math.ceil(currentValue) === index;
+      const focusable = isInteractive && (checked || currentValue === 0 && index === 1);
+      const itemValue = half ? index - 0.5 : index;
+      return /* @__PURE__ */ jsx("span", {
+        role: "radio",
+        "aria-checked": checked,
+        "aria-disabled": disabled || undefined,
+        "aria-label": `${itemValue} of ${safeCount}`,
+        tabIndex: focusable ? 0 : -1,
+        title: tooltips?.[itemIndex],
+        className: getRateItemClasses({ filled, half }),
+        onClick: (event) => commitValue(getClickValue(index, allowHalf, event)),
+        onKeyDown: (event) => {
+          if (!isInteractive || event.key !== "Enter" && event.key !== " ") {
+            return;
+          }
+          event.preventDefault();
+          commitValue(itemValue);
+        },
+        children: getCharacter({
+          character,
+          info: { index, value: itemValue }
+        })
+      }, index);
+    })
+  });
+});
+Rate.displayName = "Rate";
+export {
+  Rate
+};

package/dist/components/result/Result.d.ts

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

package/dist/components/result/Result.types.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps, ReactNode } from "react";
+export type ResultNormalizedStatus = "success" | "error" | "info" | "warning" | "404" | "403" | "500";
+export type ResultStatus = ResultNormalizedStatus | 404 | 403 | 500;
+export interface ResultProps extends Omit<ComponentProps<"div">, "title"> {
+    status?: ResultStatus;
+    title?: ReactNode;
+    subTitle?: ReactNode;
+    icon?: ReactNode;
+    extra?: ReactNode;
+}

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

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

package/dist/components/result/index.js

@@ -0,0 +1,205 @@
+"use client";
+
+// src/components/result/Result.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/result.ts
+var resultBaseClass = "result";
+var resultIconClass = "result-icon";
+var resultTitleClass = "result-title";
+var resultSubTitleClass = "result-subtitle";
+var resultExtraClass = "result-extra";
+var resultPresentedIconClass = "result-presented-icon";
+var resultStatusClasses = {
+  success: "result-success",
+  error: "result-error",
+  info: "result-info",
+  warning: "result-warning",
+  "404": "result-404",
+  "403": "result-403",
+  "500": "result-500"
+};
+var resultPresentedIconClasses = {
+  success: "result-presented-icon-success",
+  error: "result-presented-icon-error",
+  info: "result-presented-icon-info",
+  warning: "result-presented-icon-warning",
+  "404": "result-presented-icon-404",
+  "403": "result-presented-icon-403",
+  "500": "result-presented-icon-500"
+};
+function normalizeResultStatus(status = "info") {
+  return String(status);
+}
+function getResultClasses({
+  status = "info",
+  className
+}) {
+  const normalizedStatus = normalizeResultStatus(status);
+  return cn(resultBaseClass, resultStatusClasses[normalizedStatus], className);
+}
+function getResultPresentedIconClasses(status = "info") {
+  const normalizedStatus = normalizeResultStatus(status);
+  return cn(resultPresentedIconClass, resultPresentedIconClasses[normalizedStatus]);
+}
+
+// src/components/result/Result.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var statusLabels = {
+  success: "Success",
+  error: "Error",
+  info: "Info",
+  warning: "Warning",
+  "404": "Not found",
+  "403": "Forbidden",
+  "500": "Server error"
+};
+function PresentedIconGlyph({
+  status
+}) {
+  if (status === "404" || status === "403" || status === "500") {
+    return /* @__PURE__ */ jsx("span", {
+      "aria-hidden": "true",
+      children: status
+    });
+  }
+  if (status === "success") {
+    return /* @__PURE__ */ jsx("svg", {
+      "aria-hidden": "true",
+      focusable: "false",
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ jsx("path", {
+        d: "M5 12.5l4.25 4.25L19 7",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2.5"
+      })
+    });
+  }
+  if (status === "warning") {
+    return /* @__PURE__ */ jsxs("svg", {
+      "aria-hidden": "true",
+      focusable: "false",
+      viewBox: "0 0 24 24",
+      children: [
+        /* @__PURE__ */ jsx("path", {
+          d: "M12 4l8 15H4L12 4z",
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinejoin: "round",
+          strokeWidth: "2"
+        }),
+        /* @__PURE__ */ jsx("path", {
+          d: "M12 9v4M12 17h.01",
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeWidth: "2"
+        })
+      ]
+    });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsx("svg", {
+      "aria-hidden": "true",
+      focusable: "false",
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ jsx("path", {
+        d: "M8 8l8 8M16 8l-8 8",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeWidth: "2.5"
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M12 11v6M12 7h.01",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: "2.5"
+    })
+  });
+}
+function PresentedIcon({ status }) {
+  const normalizedStatus = normalizeResultStatus(status);
+  return /* @__PURE__ */ jsx("span", {
+    className: getResultPresentedIconClasses(normalizedStatus),
+    "aria-label": statusLabels[normalizedStatus],
+    role: "img",
+    children: /* @__PURE__ */ jsx(PresentedIconGlyph, {
+      status: normalizedStatus
+    })
+  });
+}
+var Result = forwardRef(({
+  status = "info",
+  title,
+  subTitle,
+  icon,
+  extra,
+  className,
+  role = "status",
+  ...props
+}, ref) => /* @__PURE__ */ jsxs("div", {
+  ref,
+  role,
+  className: getResultClasses({ status, className }),
+  ...props,
+  children: [
+    /* @__PURE__ */ jsx("div", {
+      className: resultIconClass,
+      children: icon ?? /* @__PURE__ */ jsx(PresentedIcon, {
+        status
+      })
+    }),
+    title ? /* @__PURE__ */ jsx("div", {
+      className: resultTitleClass,
+      children: title
+    }) : null,
+    subTitle ? /* @__PURE__ */ jsx("div", {
+      className: resultSubTitleClass,
+      children: subTitle
+    }) : null,
+    extra ? /* @__PURE__ */ jsx("div", {
+      className: resultExtraClass,
+      children: extra
+    }) : null
+  ]
+}));
+Result.displayName = "Result";
+export {
+  Result
+};

package/dist/components/row/Row.d.ts

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

package/dist/components/row/Row.types.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, ReactNode } from "react";
+export type RowAlign = "top" | "middle" | "bottom" | "stretch";
+export type RowJustify = "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly";
+export type RowGutter = number | [number, number];
+export interface RowProps extends ComponentProps<"div"> {
+    align?: RowAlign;
+    justify?: RowJustify;
+    gutter?: RowGutter;
+    wrap?: boolean;
+    children?: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { Row } from "./Row";
+export type { RowAlign, RowGutter, RowJustify, RowProps } from "./Row.types";