@duskmoon-dev/components 0.1.2

package/dist/components/checkbox/index.js

@@ -0,0 +1,134 @@
+"use client";
+
+// src/components/checkbox/Checkbox.tsx
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} 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/checkbox.ts
+var checkboxBaseClass = "checkbox";
+var checkboxInputClass = "checkbox-input";
+var checkboxBoxBaseClass = "checkbox-box";
+var checkboxCheckmarkClass = "checkbox-checkmark";
+var checkboxLabelBaseClass = "checkbox-label";
+var checkboxColorClasses = {
+  primary: "checkbox-primary",
+  secondary: "checkbox-secondary",
+  tertiary: "checkbox-tertiary"
+};
+var checkboxSizeClasses = {
+  sm: "checkbox-sm",
+  md: "",
+  lg: "checkbox-lg"
+};
+var checkboxLabelPositionClasses = {
+  left: "checkbox-label-left",
+  right: ""
+};
+var checkboxErrorClass = "checkbox-error";
+var checkboxLoadingClass = "checkbox-loading";
+function getCheckboxClasses({
+  size = "md",
+  error,
+  loading,
+  className
+}) {
+  return cn(checkboxBaseClass, checkboxSizeClasses[size], error && checkboxErrorClass, loading && checkboxLoadingClass, className);
+}
+function getCheckboxBoxClasses({
+  color = "primary"
+}) {
+  return cn(checkboxBoxBaseClass, checkboxColorClasses[color]);
+}
+function getCheckboxLabelClasses({
+  labelPosition = "right"
+}) {
+  return cn(checkboxLabelBaseClass, checkboxLabelPositionClasses[labelPosition]);
+}
+
+// src/components/checkbox/Checkbox.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Checkbox = forwardRef(({
+  color = "primary",
+  size = "md",
+  indeterminate = false,
+  error,
+  loading,
+  labelPosition = "right",
+  className,
+  children,
+  disabled,
+  "aria-checked": ariaChecked,
+  ...props
+}, ref) => {
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  const isDisabled = disabled || loading;
+  return /* @__PURE__ */ jsxs("label", {
+    className: getCheckboxClasses({
+      size,
+      error,
+      loading,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        ...props,
+        ref: inputRef,
+        type: "checkbox",
+        className: checkboxInputClass,
+        disabled: isDisabled,
+        "aria-checked": indeterminate ? "mixed" : ariaChecked
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: getCheckboxBoxClasses({ color }),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx("span", {
+          className: checkboxCheckmarkClass,
+          children: indeterminate ? "-" : "✓"
+        })
+      }),
+      children ? /* @__PURE__ */ jsx("span", {
+        className: getCheckboxLabelClasses({ labelPosition }),
+        children
+      }) : null
+    ]
+  });
+});
+Checkbox.displayName = "Checkbox";
+export {
+  Checkbox
+};

package/dist/components/col/Col.d.ts

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

package/dist/components/col/Col.types.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentProps, ReactNode } from "react";
+export type ColSpan = number;
+export type ColResponsiveValue = number | {
+    span?: number;
+    offset?: number;
+    order?: number;
+    push?: number;
+    pull?: number;
+};
+export interface ColProps extends ComponentProps<"div"> {
+    flex?: string | number;
+    offset?: number;
+    order?: number;
+    pull?: number;
+    push?: number;
+    span?: ColSpan;
+    xs?: ColResponsiveValue;
+    sm?: ColResponsiveValue;
+    md?: ColResponsiveValue;
+    lg?: ColResponsiveValue;
+    xl?: ColResponsiveValue;
+    xxl?: ColResponsiveValue;
+    children?: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { Col } from "./Col";
+export type { ColProps, ColResponsiveValue, ColSpan, } from "./Col.types";

package/dist/components/col/index.js

@@ -0,0 +1,100 @@
+"use client";
+
+// src/components/col/Col.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/col.ts
+var colBaseClass = "col";
+function getColClasses({ className }) {
+  return cn(colBaseClass, className);
+}
+
+// src/components/col/Col.tsx
+import { jsx } from "react/jsx-runtime";
+var breakpointOrder = ["xs", "sm", "md", "lg", "xl", "xxl"];
+function toResponsiveObject(value) {
+  if (typeof value === "number") {
+    return { span: value };
+  }
+  return value;
+}
+function spanToBasis(span) {
+  if (span === undefined)
+    return;
+  if (span <= 0)
+    return "0 0 0";
+  return `0 0 ${span / 24 * 100}%`;
+}
+function offsetToMargin(offset) {
+  return offset === undefined ? undefined : `${offset / 24 * 100}%`;
+}
+var Col = forwardRef(({
+  className,
+  flex,
+  offset,
+  order,
+  pull,
+  push,
+  span,
+  style,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  xxl,
+  ...props
+}, ref) => {
+  const responsive = { xs, sm, md, lg, xl, xxl };
+  const dataAttrs = Object.fromEntries(breakpointOrder.map((key) => {
+    const value = toResponsiveObject(responsive[key]);
+    return value ? [`data-${key}-span`, value.span] : undefined;
+  }).filter((entry) => Boolean(entry)));
+  const leftShift = push ? `${push / 24 * 100}%` : undefined;
+  const rightShift = pull ? `${pull / 24 * 100}%` : undefined;
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ...dataAttrs,
+    ref,
+    className: getColClasses({ className }),
+    style: {
+      flex: flex ?? spanToBasis(span),
+      maxWidth: span === undefined ? undefined : `${span / 24 * 100}%`,
+      marginInlineStart: offsetToMargin(offset),
+      order,
+      position: push || pull ? "relative" : undefined,
+      left: leftShift,
+      right: rightShift,
+      ...style
+    }
+  });
+});
+Col.displayName = "Col";
+export {
+  Col
+};

package/dist/components/collapse/Collapse.d.ts

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

package/dist/components/collapse/Collapse.types.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps, ReactNode } from "react";
+export type CollapseKey = string | number;
+export type CollapseSize = "sm" | "md" | "lg";
+export interface CollapseItem {
+    key: CollapseKey;
+    label: ReactNode;
+    children?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export interface CollapseProps extends Omit<ComponentProps<"div">, "children" | "onChange"> {
+    items?: CollapseItem[];
+    activeKey?: CollapseKey | CollapseKey[];
+    defaultActiveKey?: CollapseKey | CollapseKey[];
+    onChange?: (key: CollapseKey | CollapseKey[]) => void;
+    accordion?: boolean;
+    bordered?: boolean;
+    ghost?: boolean;
+    size?: CollapseSize;
+    children?: ReactNode;
+}

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

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

package/dist/components/collapse/index.js

@@ -0,0 +1,148 @@
+"use client";
+
+// src/components/collapse/Collapse.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/collapse.ts
+var collapseGroupClass = "collapse-group";
+var collapseBaseClass = "collapse";
+var collapseOpenClass = "collapse-open";
+var collapseClosedClass = "collapse-closed";
+var collapseTriggerClass = "collapse-trigger";
+var collapseIconClass = "collapse-icon";
+var collapseContentClass = "collapse-content";
+var collapseBorderedClass = "collapse-bordered";
+var collapseGhostClass = "collapse-ghost";
+var collapseDisabledClass = "collapse-disabled";
+var collapseSizeClasses = {
+  sm: "collapse-sm",
+  md: "",
+  lg: "collapse-lg"
+};
+function getCollapseGroupClasses({ className }) {
+  return cn(collapseGroupClass, className);
+}
+function getCollapseItemClasses({
+  open,
+  bordered,
+  ghost,
+  disabled,
+  size = "md",
+  className
+}) {
+  return cn(collapseBaseClass, open ? collapseOpenClass : collapseClosedClass, bordered && collapseBorderedClass, ghost && collapseGhostClass, disabled && collapseDisabledClass, collapseSizeClasses[size], className);
+}
+
+// src/components/collapse/Collapse.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function normalizeKeys(keys) {
+  if (keys === undefined)
+    return [];
+  return Array.isArray(keys) ? keys.map(String) : [String(keys)];
+}
+function denormalizeKeys(keys, accordion) {
+  return accordion ? keys[0] ?? "" : keys;
+}
+var Collapse = forwardRef(({
+  items,
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  accordion,
+  bordered = true,
+  ghost,
+  size = "md",
+  className,
+  children,
+  ...props
+}, ref) => {
+  const isControlled = activeKey !== undefined;
+  const [internalKeys, setInternalKeys] = useState(() => normalizeKeys(defaultActiveKey));
+  const openKeys = isControlled ? normalizeKeys(activeKey) : internalKeys;
+  const finalItems = items ?? (children ? [{ key: "default", label: "", children }] : []);
+  function toggleItem(item) {
+    if (item.disabled)
+      return;
+    const itemKey = String(item.key);
+    const isOpen = openKeys.includes(itemKey);
+    const nextKeys = accordion ? isOpen ? [] : [itemKey] : isOpen ? openKeys.filter((key) => key !== itemKey) : [...openKeys, itemKey];
+    if (!isControlled) {
+      setInternalKeys(nextKeys);
+    }
+    onChange?.(denormalizeKeys(nextKeys, accordion));
+  }
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    className: getCollapseGroupClasses({ className }),
+    children: finalItems.map((item) => {
+      const itemKey = String(item.key);
+      const open = openKeys.includes(itemKey);
+      const contentId = `collapse-content-${itemKey}`;
+      return /* @__PURE__ */ jsxs("div", {
+        className: getCollapseItemClasses({
+          open,
+          bordered,
+          ghost,
+          disabled: item.disabled,
+          size,
+          className: item.className
+        }),
+        children: [
+          /* @__PURE__ */ jsxs("button", {
+            type: "button",
+            className: collapseTriggerClass,
+            "aria-expanded": open,
+            "aria-controls": contentId,
+            disabled: item.disabled,
+            onClick: () => toggleItem(item),
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                children: item.label
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: collapseIconClass,
+                "aria-hidden": "true",
+                children: "v"
+              })
+            ]
+          }),
+          open ? /* @__PURE__ */ jsx("div", {
+            id: contentId,
+            className: collapseContentClass,
+            children: item.children
+          }) : null
+        ]
+      }, itemKey);
+    })
+  });
+});
+Collapse.displayName = "Collapse";
+export {
+  Collapse
+};

package/dist/components/color-picker/ColorPicker.d.ts

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

package/dist/components/color-picker/ColorPicker.types.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentPropsWithoutRef, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type ColorPickerFormat = "hex" | "rgb" | "hsb";
+export type ColorPickerTrigger = "hover" | "click";
+export type ColorPickerSize = "small" | "middle" | "large" | "sm" | "md" | "lg";
+export interface RGBColor {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}
+export interface HSBColor {
+    h: number;
+    s: number;
+    b: number;
+    a?: number;
+}
+export type ColorValue = string | RGBColor | HSBColor;
+export interface ColorPreset {
+    label?: ReactNode;
+    colors: ColorValue[];
+}
+export interface ColorPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue" | "onChange"> {
+    value?: ColorValue;
+    defaultValue?: ColorValue;
+    format?: ColorPickerFormat;
+    presets?: ColorPreset[];
+    trigger?: ColorPickerTrigger;
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    showText?: boolean | ((color: string) => ReactNode);
+    size?: ColorPickerSize;
+    panelRender?: (panel: ReactNode) => ReactNode;
+    onChange?: (value: ColorValue, css: string) => void;
+    onChangeComplete?: (value: ColorValue, css: string) => void;
+    onFormatChange?: (format: ColorPickerFormat) => void;
+    onOpenChange?: (open: boolean) => void;
+}
+export type ColorPickerComponent = ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;

package/dist/components/color-picker/index.d.ts

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