@ramong26/xp-components 1.0.10 → 1.0.13

package/README.md

@@ -1,20 +1,20 @@
-# @ramong26/xp-components
-
-React와 TypeScript로 만든 최소한의 UI 컴포넌트 라이브러리입니다.  
-React 18과 19 모두 호환됩니다.
-
----
-
-## 설치
-
-```bash
-# pnpm 사용
-pnpm add @ramong26/xp-components
-
-# npm 사용
-npm install @ramong26/xp-components
-```
-
----
-
-사용법은 위키에 자세히 추가 될 예정입니다
+# @ramong26/xp-components
+
+React와 TypeScript로 만든 최소한의 UI 컴포넌트 라이브러리입니다.  
+현재는 테스트 중입니다. 
+
+---
+
+## 설치
+
+```bash
+# pnpm 사용
+pnpm add @ramong26/xp-components
+
+# npm 사용
+npm install @ramong26/xp-components
+```
+
+---
+
+사용법은 위키에 자세히 추가 될 예정입니다

package/dist/index.cjs.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,12 +17,29 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  App: () => App_default
+  App: () => App_default,
+  Button: () => Button_exports,
+  Carousel: () => Carousel_exports,
+  Checkbox: () => Checkbox_exports,
+  Chips: () => Chips_exports,
+  Input: () => Input_exports,
+  Select: () => Select_exports,
+  Slider: () => Slider_exports,
+  Switch: () => Switch_exports,
+  Tag: () => Tag_exports
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -46,7 +65,508 @@ function App() {
   ] });
 }
 var App_default = App;
+
+// src/components/Button/Button.tsx
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = ({
+  children,
+  variant = "default",
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      className: `btn btn--${variant}`,
+      ...rest,
+      style: { backgroundImage: `url(/assets/paper.png)` },
+      children
+    }
+  );
+};
+var Button_default = Button;
+
+// src/components/Carousel/Carousel.tsx
+var Carousel_exports = {};
+__export(Carousel_exports, {
+  default: () => Carousel_default
+});
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var paperTexture = "/xp-components/assets/paper.png";
+var Carousel = ({
+  items,
+  autoPlay = false,
+  interval = 3e3,
+  ...rest
+}) => {
+  const [currentIndex, setCurrentIndex] = (0, import_react2.useState)(0);
+  const [touchStartX, setTouchStartX] = (0, import_react2.useState)(null);
+  const [touchEndX, setTouchEndX] = (0, import_react2.useState)(null);
+  const handleTouchStart = (e) => {
+    setTouchStartX(e.touches[0].clientX);
+  };
+  const handleTouchMove = (e) => {
+    setTouchEndX(e.touches[0].clientX);
+  };
+  const handleTouchEnd = () => {
+    if (touchStartX === null || touchEndX === null) return;
+    const delta = touchStartX - touchEndX;
+    if (delta > 50) {
+      setCurrentIndex((prev) => (prev + 1) % items.length);
+    } else if (delta < -50) {
+      setCurrentIndex((prev) => (prev - 1 + items.length) % items.length);
+    }
+    setTouchStartX(null);
+    setTouchEndX(null);
+  };
+  (0, import_react2.useEffect)(() => {
+    if (!autoPlay) return;
+    const timer = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % items.length);
+    }, interval);
+    return () => clearInterval(timer);
+  }, [autoPlay, interval, items.length]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: "carousel",
+      style: { backgroundImage: `url(${paperTexture})` },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: "carousel__container",
+            ...rest,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "ul",
+              {
+                className: "carousel__list",
+                style: { transform: `translateX(-${currentIndex * 100}%)` },
+                children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "li",
+                  {
+                    className: "carousel__item",
+                    onClick: item.onClick,
+                    "aria-hidden": index !== currentIndex,
+                    children: [
+                      item.image && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "img",
+                        {
+                          src: item.image,
+                          alt: item.title ?? "",
+                          className: "carousel__image",
+                          style: {
+                            backgroundImage: `url(${paperTexture})`,
+                            ...item.imageStyle
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "carousel__content", children: [
+                        item.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "carousel__title", children: item.title }),
+                        item.text && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "carousel__text", children: item.text })
+                      ] })
+                    ]
+                  },
+                  index
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "carousel__indicators", children: items.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            style: { backgroundImage: `url(${paperTexture})` },
+            className: `carousel__indicator ${index === currentIndex ? "active" : ""}`,
+            onClick: () => setCurrentIndex(index),
+            "aria-label": `Go to slide ${index + 1}`
+          },
+          index
+        )) })
+      ]
+    }
+  );
+};
+var Carousel_default = Carousel;
+
+// src/components/Checkbox/Checkbox.tsx
+var Checkbox_exports = {};
+__export(Checkbox_exports, {
+  default: () => Checkbox_default
+});
+var import_react3 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var paperTexture2 = "/xp-components/assets/paper.png";
+var Checkbox = ({ label, ...rest }) => {
+  const reactId = import_react3.default.useId();
+  const id = rest.id ?? reactId;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { htmlFor: id, className: "checkbox", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        className: "checkbox_input",
+        ...rest,
+        style: { backgroundImage: `url(${paperTexture2})` }
+      }
+    ),
+    label
+  ] });
+};
+var Checkbox_default = Checkbox;
+
+// src/components/Chips/Chips.tsx
+var Chips_exports = {};
+__export(Chips_exports, {
+  default: () => Chips_default
+});
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var paperTexture3 = "/xp-components/assets/paper.png";
+var Chips = ({
+  children,
+  onRemove,
+  selected,
+  onClick,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      style: { backgroundImage: `url(${paperTexture3})` },
+      className: `chip${selected ? " selected" : ""}`,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onClick,
+      onKeyDown: (e) => onClick && e.key === "Enter" && onClick(),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "chip-label", children }),
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "chip-remove",
+            "aria-label": "Remove chip",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+var Chips_default = Chips;
+
+// src/components/Input/Input.tsx
+var Input_exports = {};
+__export(Input_exports, {
+  default: () => Input_default
+});
+var import_react4 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var paperTexture4 = "/xp-components/assets/paper.png";
+var Input = ({
+  label,
+  variant = "default",
+  id: propId,
+  type = "text",
+  className = "",
+  ...rest
+}) => {
+  const reactId = (0, import_react4.useId)();
+  const id = propId || reactId;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `input__wrapper`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "input",
+      {
+        id,
+        type,
+        className: `input input--${variant} ${className}`,
+        style: { backgroundImage: `url(${paperTexture4})` },
+        ...rest
+      }
+    ),
+    variant === "title" && label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "label",
+      {
+        htmlFor: id,
+        className: "input__placeholder",
+        style: { backgroundImage: `url(${paperTexture4})` },
+        children: label
+      }
+    )
+  ] });
+};
+var Input_default = Input;
+
+// src/components/Select/Select.tsx
+var Select_exports = {};
+__export(Select_exports, {
+  default: () => Select_default
+});
+var import_react5 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var paperTexture5 = "/xp-components/assets/paper.png";
+var Select = ({
+  label,
+  options,
+  value,
+  onChange,
+  ...rest
+}) => {
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const [focusedIdx, setFocusedIdx] = (0, import_react5.useState)(null);
+  const rootRef = (0, import_react5.useRef)(null);
+  const ulRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (rootRef.current && !rootRef.current.contains(event.target)) {
+        setOpen(false);
+        setFocusedIdx(null);
+      }
+    };
+    window.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      window.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open]);
+  const handleKeyDown = (e) => {
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setFocusedIdx(
+        (prev) => prev === null || prev === options.length - 1 ? 0 : prev + 1
+      );
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setFocusedIdx(
+        (prev) => prev === null || prev === 0 ? options.length - 1 : prev - 1
+      );
+    } else if (e.key === "Enter" && focusedIdx !== null) {
+      e.preventDefault();
+      const selectedOption = options[focusedIdx];
+      onChange == null ? void 0 : onChange(selectedOption.value);
+      setOpen(false);
+      setFocusedIdx(null);
+    } else if (e.key === "Escape") {
+      setOpen(false);
+      setFocusedIdx(null);
+    }
+  };
+  (0, import_react5.useEffect)(() => {
+    if (open) setFocusedIdx(0);
+    else setFocusedIdx(null);
+  }, [open]);
+  (0, import_react5.useEffect)(() => {
+    var _a;
+    if (open) (_a = ulRef.current) == null ? void 0 : _a.focus();
+  }, [open]);
+  const selectedLabel = (0, import_react5.useMemo)(
+    () => {
+      var _a;
+      return ((_a = options.find((opt) => opt.value === value)) == null ? void 0 : _a.label) ?? label;
+    },
+    [options, value, label]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "select", ref: rootRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        ...rest,
+        className: "select__button",
+        style: { backgroundImage: `url(${paperTexture5})` },
+        onClick: () => setOpen((v) => !v),
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": "select-list",
+        "aria-label": label,
+        onKeyDown: handleKeyDown,
+        children: selectedLabel
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "ul",
+      {
+        className: "select__list",
+        style: { backgroundImage: `url(${paperTexture5})` },
+        role: "listbox",
+        id: "select-list",
+        onKeyDown: handleKeyDown,
+        ref: ulRef,
+        children: options.map((opt, idx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "li",
+          {
+            className: `select__item ${focusedIdx === idx ? "focused" : ""}`,
+            role: "option",
+            tabIndex: focusedIdx === idx ? 0 : -1,
+            "aria-selected": value === opt.value,
+            onClick: () => {
+              onChange == null ? void 0 : onChange(opt.value);
+              setOpen(false);
+              setFocusedIdx(null);
+            },
+            onMouseEnter: () => setFocusedIdx(idx),
+            onMouseLeave: () => setFocusedIdx(null),
+            children: opt.label
+          },
+          opt.value
+        ))
+      }
+    )
+  ] });
+};
+var Select_default = Select;
+
+// src/components/Slider/Slider.tsx
+var Slider_exports = {};
+__export(Slider_exports, {
+  default: () => Slider_default
+});
+var import_react6 = __toESM(require("react"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var paperTexture6 = "/xp-components/assets/paper.png";
+var Slider = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  onChange,
+  showValue = true
+}) => {
+  const [internalValue, setInternalValue] = (0, import_react6.useState)(value ?? min);
+  const handleChange = (e) => {
+    const newValue = Number(e.target.value);
+    setInternalValue(newValue);
+    onChange == null ? void 0 : onChange(newValue);
+  };
+  import_react6.default.useEffect(() => {
+    if (typeof value === "number") {
+      setInternalValue(value);
+    }
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "slider", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "input",
+      {
+        style: { backgroundImage: `url(${paperTexture6})` },
+        type: "range",
+        min,
+        max,
+        step,
+        value: internalValue,
+        onChange: handleChange,
+        className: "slider__input"
+      }
+    ),
+    showValue && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "span",
+      {
+        style: { backgroundImage: ` url(${paperTexture6})` },
+        className: "slider__value",
+        children: internalValue
+      }
+    )
+  ] });
+};
+var Slider_default = Slider;
+
+// src/components/Switch/Switch.tsx
+var Switch_exports = {};
+__export(Switch_exports, {
+  default: () => Switch_default
+});
+var import_react7 = __toESM(require("react"), 1);
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var paperTexture7 = "/xp-components/assets/paper.png";
+var Switch = ({ label, disabled, ...rest }) => {
+  const reactId = import_react7.default.useId();
+  const id = rest.id ?? reactId;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: `switch${disabled ? " switch--disabled" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        className: "switch__input",
+        disabled,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "span",
+      {
+        className: "switch__slider",
+        style: { backgroundImage: `url(${paperTexture7})` }
+      }
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "switch__label", children: label })
+  ] });
+};
+var Switch_default = Switch;
+
+// src/components/Tag/Tag.tsx
+var Tag_exports = {};
+__export(Tag_exports, {
+  default: () => Tag_default
+});
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var paperTexture8 = "/xp-components/assets/paper.png";
+var Tag = ({
+  children,
+  variant = "default",
+  size = "md",
+  icon,
+  closable,
+  onClose,
+  className = "",
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "span",
+    {
+      ...rest,
+      className: `tag tag--${variant} tag--${size} ${className}`,
+      style: { backgroundImage: `url(${paperTexture8})` },
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "tag__icon", children: icon }),
+        children,
+        closable && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "tag__close",
+            "aria-label": "\uB2EB\uAE30",
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+var Tag_default = Tag;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  App
+  App,
+  Button,
+  Carousel,
+  Checkbox,
+  Chips,
+  Input,
+  Select,
+  Slider,
+  Switch,
+  Tag
 });