@duskmoon-dev/components 0.1.2

package/dist/components/auto-complete/AutoComplete.d.ts

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

package/dist/components/auto-complete/AutoComplete.types.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type AutoCompleteSize = "sm" | "md" | "lg";
+export interface AutoCompleteOptionType {
+    value: string;
+    label?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export type AutoCompleteFilterOption = boolean | ((inputValue: string, option: AutoCompleteOptionType) => boolean);
+export interface AutoCompleteProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSelect"> {
+    allowClear?: boolean;
+    children?: ReactNode;
+    defaultOpen?: boolean;
+    defaultValue?: string;
+    disabled?: boolean;
+    filterOption?: AutoCompleteFilterOption;
+    notFoundContent?: ReactNode;
+    onChange?: (value: string, option?: AutoCompleteOptionType) => void;
+    onSearch?: (value: string) => void;
+    onSelect?: (value: string, option: AutoCompleteOptionType) => void;
+    open?: boolean;
+    options?: AutoCompleteOptionType[];
+    placeholder?: string;
+    size?: AutoCompleteSize;
+    value?: string;
+}
+export interface AutoCompleteOptionProps extends Omit<ComponentProps<"div">, "children"> {
+    children?: ReactNode;
+    disabled?: boolean;
+    value: string;
+}
+export type AutoCompleteComponent = ForwardRefExoticComponent<AutoCompleteProps & RefAttributes<HTMLDivElement>> & {
+    Option: ForwardRefExoticComponent<AutoCompleteOptionProps & RefAttributes<HTMLDivElement>>;
+};

package/dist/components/auto-complete/index.d.ts

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

package/dist/components/auto-complete/index.js

@@ -0,0 +1,339 @@
+"use client";
+
+// src/components/auto-complete/AutoComplete.tsx
+import React, {
+  forwardRef,
+  useId,
+  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/auto-complete.ts
+var autoCompleteBaseClass = "autocomplete";
+var autoCompleteInputWrapperClass = "autocomplete-input-wrapper";
+var autoCompleteInputClass = "autocomplete-input";
+var autoCompleteToggleClass = "autocomplete-toggle";
+var autoCompleteDropdownClass = "autocomplete-dropdown";
+var autoCompleteDropdownOpenClass = "autocomplete-dropdown-open";
+var autoCompleteOptionsClass = "autocomplete-options";
+var autoCompleteOptionClass = "autocomplete-option";
+var autoCompleteOptionSelectedClass = "autocomplete-option-selected";
+var autoCompleteOptionFocusedClass = "autocomplete-option-focused";
+var autoCompleteOptionDisabledClass = "autocomplete-option-disabled";
+var autoCompleteClearClass = "autocomplete-clear";
+var autoCompleteNoOptionsClass = "autocomplete-no-options";
+var autoCompleteSizeClasses = {
+  sm: "autocomplete-sm",
+  md: "",
+  lg: "autocomplete-lg"
+};
+function getAutoCompleteClasses({
+  disabled,
+  open,
+  className
+}) {
+  return cn(autoCompleteBaseClass, disabled && "autocomplete-disabled", open && "autocomplete-open", className);
+}
+function getAutoCompleteInputClasses({
+  size = "md",
+  className
+}) {
+  return cn(autoCompleteInputClass, autoCompleteSizeClasses[size], className);
+}
+function getAutoCompleteDropdownClasses({
+  open,
+  className
+}) {
+  return cn(autoCompleteDropdownClass, open && autoCompleteDropdownOpenClass, className);
+}
+function getAutoCompleteOptionClasses({
+  selected,
+  focused,
+  disabled,
+  className
+}) {
+  return cn(autoCompleteOptionClass, selected && autoCompleteOptionSelectedClass, focused && autoCompleteOptionFocusedClass, disabled && autoCompleteOptionDisabledClass, className);
+}
+
+// src/components/auto-complete/AutoComplete.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function optionLabel(option) {
+  return option.label ?? option.value;
+}
+function optionText(option) {
+  const label = optionLabel(option);
+  return typeof label === "string" || typeof label === "number" ? String(label) : option.value;
+}
+function optionsFromChildren(children) {
+  const result = [];
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child) || child.type !== Option) {
+      return;
+    }
+    const props = child.props;
+    result.push({
+      value: props.value,
+      label: props.children,
+      disabled: props.disabled,
+      className: props.className
+    });
+  });
+  return result;
+}
+function filterOptions(options, inputValue, filterOption) {
+  if (filterOption === false) {
+    return options;
+  }
+  if (typeof filterOption === "function") {
+    return options.filter((option) => filterOption(inputValue, option));
+  }
+  const query = inputValue.trim().toLowerCase();
+  if (query.length === 0) {
+    return options;
+  }
+  return options.filter((option) => optionText(option).toLowerCase().includes(query));
+}
+var Option = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  children
+}));
+Option.displayName = "AutoComplete.Option";
+var AutoCompleteRoot = forwardRef(({
+  allowClear,
+  children,
+  className,
+  defaultOpen,
+  defaultValue = "",
+  disabled,
+  filterOption,
+  notFoundContent = "No data",
+  onChange,
+  onSearch,
+  onSelect,
+  open,
+  options,
+  placeholder,
+  size = "md",
+  value,
+  ...props
+}, ref) => {
+  const inputId = useId();
+  const listboxId = useId();
+  const inputRef = useRef(null);
+  const sourceOptions = useMemo(() => options ?? optionsFromChildren(children), [children, options]);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const controlledValue = value !== undefined;
+  const controlledOpen = open !== undefined;
+  const currentValue = controlledValue ? value : internalValue;
+  const isOpen = controlledOpen ? open : internalOpen;
+  const visibleOptions = useMemo(() => filterOptions(sourceOptions, currentValue, filterOption), [currentValue, filterOption, sourceOptions]);
+  const selectedIndex = visibleOptions.findIndex((option) => option.value === currentValue);
+  const activeIndex = focusedIndex >= 0 ? focusedIndex : selectedIndex;
+  const activeOption = activeIndex >= 0 ? visibleOptions[activeIndex] : undefined;
+  const activeDescendant = activeOption ? `${listboxId}-option-${activeIndex}` : undefined;
+  const showClear = allowClear && !disabled && currentValue.length > 0;
+  function setOpenState(nextOpen) {
+    if (!controlledOpen) {
+      setInternalOpen(nextOpen);
+    }
+    if (!nextOpen) {
+      setFocusedIndex(-1);
+    }
+  }
+  function emitChange(nextValue, option) {
+    if (!controlledValue) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue, option);
+  }
+  function handleInputChange(event) {
+    const nextValue = event.currentTarget.value;
+    emitChange(nextValue);
+    onSearch?.(nextValue);
+    if (!disabled) {
+      setOpenState(true);
+    }
+  }
+  function selectOption(option) {
+    if (disabled || option.disabled) {
+      return;
+    }
+    emitChange(option.value, option);
+    onSelect?.(option.value, option);
+    setOpenState(false);
+  }
+  function clearValue() {
+    if (disabled) {
+      return;
+    }
+    emitChange("");
+    onSearch?.("");
+    setOpenState(false);
+    inputRef.current?.focus();
+  }
+  function moveFocus(step) {
+    if (visibleOptions.length === 0) {
+      return;
+    }
+    setOpenState(true);
+    setFocusedIndex((current) => {
+      const start = current >= 0 ? current : selectedIndex;
+      const next = start + step;
+      if (next < 0) {
+        return visibleOptions.length - 1;
+      }
+      if (next >= visibleOptions.length) {
+        return 0;
+      }
+      return next;
+    });
+  }
+  function handleKeyDown(event) {
+    if (disabled) {
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveFocus(1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveFocus(-1);
+      return;
+    }
+    if (event.key === "Enter" && isOpen && activeOption) {
+      event.preventDefault();
+      selectOption(activeOption);
+      return;
+    }
+    if (event.key === "Escape") {
+      setOpenState(false);
+    }
+  }
+  function renderOption(option, index) {
+    const selected = option.value === currentValue;
+    const focused = index === activeIndex;
+    return /* @__PURE__ */ jsx("button", {
+      type: "button",
+      id: `${listboxId}-option-${index}`,
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": option.disabled || undefined,
+      disabled: option.disabled,
+      className: getAutoCompleteOptionClasses({
+        selected,
+        focused,
+        disabled: option.disabled,
+        className: option.className
+      }),
+      onMouseDown: (event) => event.preventDefault(),
+      onMouseEnter: () => setFocusedIndex(index),
+      onClick: () => selectOption(option),
+      children: optionLabel(option)
+    }, option.value);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getAutoCompleteClasses({
+      disabled,
+      open: isOpen,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: autoCompleteInputWrapperClass,
+        children: [
+          /* @__PURE__ */ jsx("input", {
+            ref: inputRef,
+            id: inputId,
+            role: "combobox",
+            "aria-autocomplete": "list",
+            "aria-controls": isOpen ? listboxId : undefined,
+            "aria-expanded": isOpen,
+            "aria-activedescendant": activeDescendant,
+            "aria-disabled": disabled || undefined,
+            className: getAutoCompleteInputClasses({ size }),
+            disabled,
+            placeholder,
+            value: currentValue,
+            onChange: handleInputChange,
+            onFocus: () => {
+              if (!disabled) {
+                setOpenState(true);
+              }
+            },
+            onKeyDown: handleKeyDown
+          }),
+          showClear ? /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: autoCompleteClearClass,
+            "aria-label": "Clear selection",
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: clearValue,
+            children: "x"
+          }) : null,
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: autoCompleteToggleClass,
+            "aria-label": isOpen ? "Close options" : "Open options",
+            "aria-controls": listboxId,
+            "aria-expanded": isOpen,
+            disabled,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => setOpenState(!isOpen),
+            children: "v"
+          })
+        ]
+      }),
+      isOpen ? /* @__PURE__ */ jsx("div", {
+        id: listboxId,
+        role: "listbox",
+        className: getAutoCompleteDropdownClasses({ open: isOpen }),
+        children: visibleOptions.length > 0 ? /* @__PURE__ */ jsx("div", {
+          className: autoCompleteOptionsClass,
+          children: visibleOptions.map(renderOption)
+        }) : notFoundContent != null ? /* @__PURE__ */ jsx("div", {
+          className: autoCompleteNoOptionsClass,
+          children: notFoundContent
+        }) : null
+      }) : null
+    ]
+  });
+});
+AutoCompleteRoot.displayName = "AutoComplete";
+var AutoComplete = AutoCompleteRoot;
+AutoComplete.Option = Option;
+export {
+  AutoComplete
+};

package/dist/components/avatar/Avatar.d.ts

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

package/dist/components/avatar/Avatar.types.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarShape = "circle" | "square";
+export interface AvatarProps extends ComponentProps<"span"> {
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    src?: string;
+    alt?: string;
+    fallback?: React.ReactNode;
+}

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

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

package/dist/components/avatar/index.js

@@ -0,0 +1,81 @@
+"use client";
+
+// src/components/avatar/Avatar.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/avatar.ts
+var avatarBaseClass = "avatar";
+var avatarSizeClasses = {
+  xs: "avatar-xs",
+  sm: "avatar-sm",
+  md: "avatar-md",
+  lg: "avatar-lg",
+  xl: "avatar-xl"
+};
+var avatarShapeClasses = {
+  circle: "avatar-circle",
+  square: "avatar-square"
+};
+function getAvatarClasses({
+  size = "md",
+  shape = "circle",
+  className
+}) {
+  return cn(avatarBaseClass, avatarSizeClasses[size], avatarShapeClasses[shape], className);
+}
+
+// src/components/avatar/Avatar.tsx
+import { jsx } from "react/jsx-runtime";
+var Avatar = forwardRef(({
+  size = "md",
+  shape = "circle",
+  src,
+  alt,
+  fallback,
+  children,
+  className,
+  ...props
+}, ref) => {
+  const [hasError, setHasError] = useState(false);
+  const classes = getAvatarClasses({ size, shape, className });
+  return /* @__PURE__ */ jsx("span", {
+    ref,
+    className: classes,
+    ...props,
+    children: src && !hasError ? /* @__PURE__ */ jsx("img", {
+      src,
+      alt,
+      onError: () => setHasError(true),
+      className: "avatar-image"
+    }) : fallback || children
+  });
+});
+Avatar.displayName = "Avatar";
+export {
+  Avatar
+};

package/dist/components/back-top/BackTop.d.ts

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

package/dist/components/back-top/BackTop.types.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface BackTopProps extends Omit<ComponentProps<"button">, "children"> {
+    visibilityHeight?: number;
+    target?: () => Window | HTMLElement | null;
+    children?: ReactNode;
+}

package/dist/components/back-top/index.d.ts

@@ -0,0 +1,2 @@
+export { BackTop } from "./BackTop";
+export type { BackTopProps } from "./BackTop.types";

package/dist/components/back-top/index.js

@@ -0,0 +1,108 @@
+"use client";
+
+// src/components/back-top/BackTop.tsx
+import { forwardRef, useEffect, 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/back-top.ts
+var backTopBaseClass = "back-top";
+var backTopVisibleClass = "back-top-visible";
+function getBackTopClasses({
+  visible,
+  className
+}) {
+  return cn(backTopBaseClass, visible && backTopVisibleClass, className);
+}
+
+// src/components/back-top/BackTop.tsx
+import { jsx } from "react/jsx-runtime";
+function getTarget(target) {
+  if (typeof window === "undefined")
+    return null;
+  return target?.() ?? window;
+}
+function getTop(target) {
+  if (!target)
+    return 0;
+  return target instanceof Window ? target.scrollY : target.scrollTop;
+}
+function scrollToTop(target) {
+  if (!target)
+    return;
+  if (target instanceof Window) {
+    target.scrollTo({ top: 0, behavior: "smooth" });
+  } else {
+    target.scrollTo({ top: 0, behavior: "smooth" });
+  }
+}
+var BackTop = forwardRef(({
+  visibilityHeight = 400,
+  target,
+  children,
+  className,
+  onClick,
+  type = "button",
+  ...props
+}, ref) => {
+  const [visible, setVisible] = useState(false);
+  const visibleRef = useRef(visible);
+  visibleRef.current = visible;
+  useEffect(() => {
+    const scrollTarget = getTarget(target);
+    if (!scrollTarget)
+      return;
+    function updateVisible() {
+      const nextVisible = getTop(scrollTarget) >= visibilityHeight;
+      if (nextVisible !== visibleRef.current) {
+        visibleRef.current = nextVisible;
+        setVisible(nextVisible);
+      }
+    }
+    updateVisible();
+    scrollTarget.addEventListener("scroll", updateVisible);
+    return () => scrollTarget.removeEventListener("scroll", updateVisible);
+  }, [target, visibilityHeight]);
+  return /* @__PURE__ */ jsx("button", {
+    ...props,
+    ref,
+    type,
+    className: getBackTopClasses({ visible, className }),
+    hidden: !visible,
+    "aria-label": props["aria-label"] ?? "Back to top",
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) {
+        scrollToTop(getTarget(target));
+      }
+    },
+    children: children ?? "Top"
+  });
+});
+BackTop.displayName = "BackTop";
+export {
+  BackTop
+};

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { BadgeProps } from "./Badge.types";
+export declare function Badge({ color, appearance, size, className, children, ref, ...props }: BadgeProps): React.JSX.Element;

package/dist/components/badge/Badge.types.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+export type BadgeColor = "primary" | "secondary" | "info" | "success" | "warning" | "error";
+export type BadgeAppearance = "filled" | "outline" | "tonal" | "ghost";
+export type BadgeSize = "sm" | "md" | "lg";
+export interface BadgeProps extends ComponentProps<"div"> {
+    color?: BadgeColor;
+    appearance?: BadgeAppearance;
+    size?: BadgeSize;
+}

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

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