@duskmoon-dev/components 0.1.2

package/dist/components/image/index.js

@@ -0,0 +1,171 @@
+"use client";
+
+// src/components/image/Image.tsx
+import { forwardRef, useEffect, 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/image.ts
+var imageBaseClass = "image";
+var imageImgClass = "image-img";
+var imagePlaceholderClass = "image-placeholder";
+var imageErrorClass = "image-error";
+var imagePreviewClass = "image-preview";
+var imagePreviewDisabledClass = "image-preview-disabled";
+var imagePreviewMaskClass = "image-preview-mask";
+var imagePreviewGroupClass = "image-preview-group";
+function getImageClasses({
+  preview,
+  error,
+  className
+}) {
+  return cn(imageBaseClass, preview ? imagePreviewClass : imagePreviewDisabledClass, error && imageErrorClass, className);
+}
+function getImagePreviewGroupClasses({
+  className
+}) {
+  return cn(imagePreviewGroupClass, className);
+}
+
+// src/components/image/Image.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function previewEnabled(preview) {
+  return preview !== false;
+}
+function previewConfig(preview) {
+  return typeof preview === "object" && preview !== null ? preview : {};
+}
+function renderPlaceholder(placeholder) {
+  if (placeholder === false || placeholder === undefined || placeholder === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("span", {
+    className: imagePlaceholderClass,
+    children: placeholder === true ? null : placeholder
+  });
+}
+var ImageBase = forwardRef(({
+  src,
+  alt,
+  fallback,
+  placeholder,
+  preview = true,
+  width,
+  height,
+  className,
+  imgClassName,
+  wrapperClassName,
+  onError,
+  onLoad,
+  ...imgProps
+}, ref) => {
+  const [currentSrc, setCurrentSrc] = useState(src);
+  const [loading, setLoading] = useState(Boolean(src));
+  const [failed, setFailed] = useState(false);
+  const [internalPreviewVisible, setInternalPreviewVisible] = useState(false);
+  const config = previewConfig(preview);
+  const isPreviewEnabled = previewEnabled(preview);
+  const previewVisible = config.visible ?? internalPreviewVisible;
+  const hasImage = Boolean(currentSrc);
+  useEffect(() => {
+    setCurrentSrc(src);
+    setLoading(Boolean(src));
+    setFailed(false);
+  }, [src]);
+  function setPreviewVisible(nextVisible) {
+    const previousVisible = previewVisible;
+    setInternalPreviewVisible(nextVisible);
+    config.onVisibleChange?.(nextVisible, previousVisible);
+  }
+  function handleLoad(event) {
+    setLoading(false);
+    setFailed(false);
+    onLoad?.(event);
+  }
+  function handleError(event) {
+    onError?.(event);
+    if (fallback && currentSrc !== fallback) {
+      setCurrentSrc(fallback);
+      setLoading(true);
+      setFailed(false);
+      return;
+    }
+    setLoading(false);
+    setFailed(true);
+  }
+  return /* @__PURE__ */ jsxs("span", {
+    ref,
+    className: cn(getImageClasses({
+      preview: isPreviewEnabled,
+      error: failed,
+      className
+    }), wrapperClassName),
+    style: { width, height },
+    "data-preview-enabled": isPreviewEnabled || undefined,
+    "data-preview-visible": previewVisible || undefined,
+    children: [
+      hasImage ? /* @__PURE__ */ jsx("img", {
+        ...imgProps,
+        src: currentSrc,
+        alt,
+        width,
+        height,
+        className: cn(imageImgClass, imgClassName),
+        onLoad: handleLoad,
+        onError: handleError
+      }) : null,
+      !hasImage || loading ? renderPlaceholder(placeholder) : null,
+      isPreviewEnabled && hasImage && !failed ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: imagePreviewMaskClass,
+        "aria-label": "Preview image",
+        onClick: () => setPreviewVisible(!previewVisible),
+        children: config.mask
+      }) : null,
+      previewVisible && isPreviewEnabled ? /* @__PURE__ */ jsx("img", {
+        src: config.src ?? currentSrc,
+        alt,
+        className: cn(imageImgClass, "image-preview-img"),
+        "aria-hidden": "true"
+      }) : null
+    ]
+  });
+});
+ImageBase.displayName = "Image";
+var PreviewGroup = forwardRef(({ preview = true, className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: getImagePreviewGroupClasses({ className }),
+  "data-preview-enabled": previewEnabled(preview) || undefined,
+  children
+}));
+PreviewGroup.displayName = "Image.PreviewGroup";
+var Image = Object.assign(ImageBase, {
+  PreviewGroup
+});
+export {
+  Image
+};

package/dist/components/input/Input.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { InputComponent, PasswordProps, SearchProps, TextAreaProps } from "./Input.types";
+declare const Search: React.ForwardRefExoticComponent<Omit<SearchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Password: React.ForwardRefExoticComponent<Omit<PasswordProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+declare const Group: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Input: InputComponent;
+export { Group, Password, Search, TextArea };

package/dist/components/input/Input.types.d.ts

@@ -0,0 +1,46 @@
+import type { ChangeEvent, ComponentProps, ForwardRefExoticComponent, KeyboardEvent, MouseEvent, ReactNode, RefAttributes } from "react";
+export type InputSize = "sm" | "md" | "lg";
+export type InputStatus = "error" | "success";
+export type InputVariant = "filled" | "outlined";
+export type TextAreaResize = "none" | "both" | "horizontal" | "vertical";
+export type InputChangeEvent = ChangeEvent<HTMLInputElement>;
+export type TextAreaChangeEvent = ChangeEvent<HTMLTextAreaElement>;
+export interface InputProps extends Omit<ComponentProps<"input">, "children" | "className" | "prefix" | "size" | "suffix" | "type"> {
+    allowClear?: boolean;
+    className?: string;
+    prefix?: ReactNode;
+    size?: InputSize;
+    status?: InputStatus;
+    suffix?: ReactNode;
+    type?: ComponentProps<"input">["type"];
+    variant?: InputVariant;
+    onChange?: (event: InputChangeEvent) => void;
+}
+export interface SearchProps extends Omit<InputProps, "suffix" | "type"> {
+    enterButton?: ReactNode;
+    loading?: boolean;
+    onSearch?: (value: string, event?: KeyboardEvent<HTMLInputElement> | MouseEvent<HTMLElement>) => void;
+}
+export interface PasswordProps extends Omit<InputProps, "suffix" | "type"> {
+    visibilityToggle?: boolean;
+}
+export interface TextAreaProps extends Omit<ComponentProps<"textarea">, "children" | "className" | "size"> {
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    className?: string;
+    showCount?: boolean;
+    size?: InputSize;
+    status?: InputStatus;
+    variant?: InputVariant;
+    resize?: TextAreaResize;
+    onChange?: (event: TextAreaChangeEvent) => void;
+}
+export type InputGroupProps = ComponentProps<"div">;
+export type InputComponent = ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>> & {
+    Search: ForwardRefExoticComponent<SearchProps & RefAttributes<HTMLInputElement>>;
+    Password: ForwardRefExoticComponent<PasswordProps & RefAttributes<HTMLInputElement>>;
+    TextArea: ForwardRefExoticComponent<TextAreaProps & RefAttributes<HTMLTextAreaElement>>;
+    Group: ForwardRefExoticComponent<InputGroupProps & RefAttributes<HTMLDivElement>>;
+};

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

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

package/dist/components/input/index.js

@@ -0,0 +1,352 @@
+"use client";
+
+// src/components/input/Input.tsx
+import {
+  forwardRef,
+  useImperativeHandle,
+  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/input.ts
+var inputBaseClass = "input";
+var inputWrapperClass = "input-wrapper";
+var inputAffixWrapperClass = "input-affix-wrapper";
+var inputPrefixClass = "input-prefix";
+var inputSuffixClass = "input-suffix";
+var inputClearClass = "input-clear";
+var inputSearchClass = "input-search";
+var inputSearchButtonClass = "input-search-button";
+var inputPasswordClass = "input-password";
+var inputPasswordToggleClass = "input-password-toggle";
+var inputGroupClass = "input-group";
+var textAreaBaseClass = "textarea";
+var textAreaWrapperClass = "textarea-wrapper";
+var textAreaCountClass = "textarea-counter";
+var textAreaCountExceededClass = "textarea-counter-exceeded";
+var textAreaAutoSizeClass = "textarea-auto-resize";
+var inputVariantClasses = {
+  filled: "input-filled",
+  outlined: "input-outlined"
+};
+var inputSizeClasses = {
+  sm: "input-sm",
+  md: "input-md",
+  lg: "input-lg"
+};
+var inputStatusClasses = {
+  error: "input-error",
+  success: "input-success"
+};
+var textAreaVariantClasses = {
+  filled: "textarea-filled",
+  outlined: "textarea-outlined"
+};
+var textAreaSizeClasses = {
+  sm: "textarea-sm",
+  md: "",
+  lg: "textarea-lg"
+};
+var textAreaStatusClasses = {
+  error: "textarea-error",
+  success: "textarea-success"
+};
+var textAreaResizeClasses = {
+  none: "textarea-resize-none",
+  both: "textarea-resize-both",
+  horizontal: "textarea-resize-horizontal",
+  vertical: "textarea-resize-vertical"
+};
+function getInputClasses({
+  size = "md",
+  status,
+  variant = "outlined",
+  className
+}) {
+  return cn(inputBaseClass, inputVariantClasses[variant], inputSizeClasses[size], status && inputStatusClasses[status], className);
+}
+function getInputWrapperClasses({
+  affixed,
+  className
+}) {
+  return cn(inputWrapperClass, affixed && inputAffixWrapperClass, className);
+}
+function getSearchWrapperClasses({ className }) {
+  return cn(inputSearchClass, className);
+}
+function getPasswordWrapperClasses({
+  className
+}) {
+  return cn(inputPasswordClass, className);
+}
+function getTextAreaClasses({
+  size = "md",
+  status,
+  variant = "outlined",
+  resize = "vertical",
+  autoSize,
+  className
+}) {
+  return cn(textAreaBaseClass, textAreaVariantClasses[variant], textAreaSizeClasses[size], status && textAreaStatusClasses[status], textAreaResizeClasses[resize], autoSize && textAreaAutoSizeClass, className);
+}
+function getTextAreaCountClasses({ exceeded }) {
+  return cn(textAreaCountClass, exceeded && textAreaCountExceededClass);
+}
+
+// src/components/input/Input.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function toTextValue(value) {
+  if (Array.isArray(value)) {
+    return value.join(",");
+  }
+  return value == null ? "" : String(value);
+}
+var InputRoot = forwardRef(({
+  allowClear,
+  className,
+  defaultValue,
+  disabled,
+  onChange,
+  prefix,
+  size = "md",
+  status,
+  suffix,
+  type = "text",
+  value,
+  variant = "outlined",
+  ...props
+}, ref) => {
+  const inputRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(() => toTextValue(defaultValue));
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? toTextValue(value) : internalValue;
+  const hasAffix = prefix != null || suffix != null || allowClear;
+  useImperativeHandle(ref, () => inputRef.current);
+  function handleChange(event) {
+    if (!isControlled) {
+      setInternalValue(event.currentTarget.value);
+    }
+    onChange?.(event);
+  }
+  function handleClear() {
+    const input = inputRef.current;
+    if (!input || disabled) {
+      return;
+    }
+    input.value = "";
+    if (!isControlled) {
+      setInternalValue("");
+    }
+    onChange?.({
+      currentTarget: input,
+      target: input,
+      type: "change"
+    });
+    input.focus();
+  }
+  const control = /* @__PURE__ */ jsx("input", {
+    ...props,
+    ref: inputRef,
+    type,
+    className: getInputClasses({ size, status, variant, className }),
+    disabled,
+    value: currentValue,
+    onChange: handleChange
+  });
+  if (!hasAffix) {
+    return control;
+  }
+  const showClear = allowClear && !disabled && currentValue.length > 0;
+  return /* @__PURE__ */ jsxs("span", {
+    className: getInputWrapperClasses({ affixed: hasAffix }),
+    children: [
+      prefix != null ? /* @__PURE__ */ jsx("span", {
+        className: inputPrefixClass,
+        children: prefix
+      }) : null,
+      control,
+      showClear ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: inputClearClass,
+        "aria-label": "Clear input",
+        onClick: handleClear,
+        children: "x"
+      }) : null,
+      suffix != null ? /* @__PURE__ */ jsx("span", {
+        className: inputSuffixClass,
+        children: suffix
+      }) : null
+    ]
+  });
+});
+InputRoot.displayName = "Input";
+var Search = forwardRef(({
+  className,
+  disabled,
+  enterButton,
+  loading,
+  onKeyDown,
+  onSearch,
+  ...props
+}, ref) => {
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current);
+  function emitSearch(event) {
+    onSearch?.(inputRef.current?.value ?? "", event);
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented && event.key === "Enter") {
+      emitSearch(event);
+    }
+  }
+  const buttonContent = enterButton === true ? "Search" : enterButton ?? "Search";
+  return /* @__PURE__ */ jsxs("span", {
+    className: getSearchWrapperClasses({ className }),
+    children: [
+      /* @__PURE__ */ jsx(InputRoot, {
+        ...props,
+        ref: inputRef,
+        disabled,
+        onKeyDown: handleKeyDown
+      }),
+      enterButton || loading ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: inputSearchButtonClass,
+        disabled: disabled || loading,
+        "aria-busy": loading || undefined,
+        onClick: emitSearch,
+        children: loading ? "Loading" : buttonContent
+      }) : null
+    ]
+  });
+});
+Search.displayName = "Input.Search";
+var Password = forwardRef(({ className, disabled, visibilityToggle = true, ...props }, ref) => {
+  const [visible, setVisible] = useState(false);
+  const type = visible ? "text" : "password";
+  const toggle = visibilityToggle ? /* @__PURE__ */ jsx("button", {
+    type: "button",
+    className: inputPasswordToggleClass,
+    disabled,
+    "aria-label": visible ? "Hide password" : "Show password",
+    onClick: () => {
+      setVisible((current) => !current);
+    },
+    children: visible ? "Hide" : "Show"
+  }) : undefined;
+  return /* @__PURE__ */ jsx("span", {
+    className: getPasswordWrapperClasses({ className }),
+    children: /* @__PURE__ */ jsx(InputRoot, {
+      ...props,
+      ref,
+      disabled,
+      type,
+      suffix: toggle
+    })
+  });
+});
+Password.displayName = "Input.Password";
+var TextArea = forwardRef(({
+  autoSize,
+  className,
+  defaultValue,
+  maxLength,
+  onChange,
+  resize = "vertical",
+  showCount,
+  size = "md",
+  status,
+  value,
+  variant = "outlined",
+  ...props
+}, ref) => {
+  const [internalValue, setInternalValue] = useState(() => toTextValue(defaultValue));
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? toTextValue(value) : internalValue;
+  const count = currentValue.length;
+  const exceeded = maxLength !== undefined && count > maxLength;
+  function handleChange(event) {
+    if (!isControlled) {
+      setInternalValue(event.currentTarget.value);
+    }
+    onChange?.(event);
+  }
+  const control = /* @__PURE__ */ jsx("textarea", {
+    ...props,
+    ref,
+    className: getTextAreaClasses({
+      size,
+      status,
+      variant,
+      resize,
+      autoSize: Boolean(autoSize),
+      className
+    }),
+    maxLength,
+    value: currentValue,
+    onChange: handleChange
+  });
+  if (!showCount) {
+    return control;
+  }
+  return /* @__PURE__ */ jsxs("span", {
+    className: textAreaWrapperClass,
+    children: [
+      control,
+      /* @__PURE__ */ jsxs("span", {
+        className: getTextAreaCountClasses({ exceeded }),
+        children: [
+          count,
+          maxLength !== undefined ? ` / ${maxLength}` : null
+        ]
+      })
+    ]
+  });
+});
+TextArea.displayName = "Input.TextArea";
+var Group = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(inputGroupClass, className),
+  children
+}));
+Group.displayName = "Input.Group";
+var Input = Object.assign(InputRoot, {
+  Search,
+  Password,
+  TextArea,
+  Group
+});
+export {
+  TextArea,
+  Search,
+  Password,
+  Input,
+  Group
+};

package/dist/components/input-number/InputNumber.d.ts

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

package/dist/components/input-number/InputNumber.types.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+export type InputNumberValue = number | null;
+export type InputNumberSize = "sm" | "md" | "lg";
+export type InputNumberStatus = "error" | "success";
+export interface InputNumberProps extends Omit<ComponentProps<"input">, "children" | "defaultValue" | "onChange" | "size" | "status" | "value"> {
+    value?: InputNumberValue;
+    defaultValue?: InputNumberValue;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    formatter?: (value: InputNumberValue) => string;
+    parser?: (displayValue: string) => InputNumberValue;
+    controls?: boolean;
+    keyboard?: boolean;
+    status?: InputNumberStatus;
+    size?: InputNumberSize;
+    onChange?: (value: InputNumberValue) => void;
+    onStep?: (value: InputNumberValue, info: {
+        offset: number;
+        type: "up" | "down";
+    }) => void;
+}

package/dist/components/input-number/index.d.ts

@@ -0,0 +1,2 @@
+export { InputNumber } from "./InputNumber";
+export type { InputNumberProps, InputNumberSize, InputNumberStatus, InputNumberValue, } from "./InputNumber.types";