@ramong26/xp-components 1.0.10 → 1.0.13

package/dist/index.mjs

@@ -1,3 +1,9 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
 // src/App.tsx
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -20,6 +26,507 @@ function App() {
   ] });
 }
 var App_default = App;
+
+// src/components/Button/Button.tsx
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Button = ({
+  children,
+  variant = "default",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx2(
+    "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
+});
+import { useState as useState2, useEffect } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var paperTexture = "/xp-components/assets/paper.png";
+var Carousel = ({
+  items,
+  autoPlay = false,
+  interval = 3e3,
+  ...rest
+}) => {
+  const [currentIndex, setCurrentIndex] = useState2(0);
+  const [touchStartX, setTouchStartX] = useState2(null);
+  const [touchEndX, setTouchEndX] = useState2(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);
+  };
+  useEffect(() => {
+    if (!autoPlay) return;
+    const timer = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % items.length);
+    }, interval);
+    return () => clearInterval(timer);
+  }, [autoPlay, interval, items.length]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "carousel",
+      style: { backgroundImage: `url(${paperTexture})` },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "carousel__container",
+            ...rest,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            children: /* @__PURE__ */ jsx3(
+              "ul",
+              {
+                className: "carousel__list",
+                style: { transform: `translateX(-${currentIndex * 100}%)` },
+                children: items.map((item, index) => /* @__PURE__ */ jsxs2(
+                  "li",
+                  {
+                    className: "carousel__item",
+                    onClick: item.onClick,
+                    "aria-hidden": index !== currentIndex,
+                    children: [
+                      item.image && /* @__PURE__ */ jsx3(
+                        "img",
+                        {
+                          src: item.image,
+                          alt: item.title ?? "",
+                          className: "carousel__image",
+                          style: {
+                            backgroundImage: `url(${paperTexture})`,
+                            ...item.imageStyle
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs2("div", { className: "carousel__content", children: [
+                        item.title && /* @__PURE__ */ jsx3("h2", { className: "carousel__title", children: item.title }),
+                        item.text && /* @__PURE__ */ jsx3("p", { className: "carousel__text", children: item.text })
+                      ] })
+                    ]
+                  },
+                  index
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { className: "carousel__indicators", children: items.map((_, index) => /* @__PURE__ */ jsx3(
+          "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
+});
+import React2 from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var paperTexture2 = "/xp-components/assets/paper.png";
+var Checkbox = ({ label, ...rest }) => {
+  const reactId = React2.useId();
+  const id = rest.id ?? reactId;
+  return /* @__PURE__ */ jsxs3("label", { htmlFor: id, className: "checkbox", children: [
+    /* @__PURE__ */ jsx4(
+      "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
+});
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var paperTexture3 = "/xp-components/assets/paper.png";
+var Chips = ({
+  children,
+  onRemove,
+  selected,
+  onClick,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs4(
+    "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__ */ jsx5("span", { className: "chip-label", children }),
+        onRemove && /* @__PURE__ */ jsx5(
+          "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
+});
+import { useId } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var paperTexture4 = "/xp-components/assets/paper.png";
+var Input = ({
+  label,
+  variant = "default",
+  id: propId,
+  type = "text",
+  className = "",
+  ...rest
+}) => {
+  const reactId = useId();
+  const id = propId || reactId;
+  return /* @__PURE__ */ jsxs5("div", { className: `input__wrapper`, children: [
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        id,
+        type,
+        className: `input input--${variant} ${className}`,
+        style: { backgroundImage: `url(${paperTexture4})` },
+        ...rest
+      }
+    ),
+    variant === "title" && label && /* @__PURE__ */ jsx6(
+      "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
+});
+import { useState as useState3, useRef, useEffect as useEffect2, useMemo } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var paperTexture5 = "/xp-components/assets/paper.png";
+var Select = ({
+  label,
+  options,
+  value,
+  onChange,
+  ...rest
+}) => {
+  const [open, setOpen] = useState3(false);
+  const [focusedIdx, setFocusedIdx] = useState3(null);
+  const rootRef = useRef(null);
+  const ulRef = useRef(null);
+  useEffect2(() => {
+    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);
+    }
+  };
+  useEffect2(() => {
+    if (open) setFocusedIdx(0);
+    else setFocusedIdx(null);
+  }, [open]);
+  useEffect2(() => {
+    var _a;
+    if (open) (_a = ulRef.current) == null ? void 0 : _a.focus();
+  }, [open]);
+  const selectedLabel = useMemo(
+    () => {
+      var _a;
+      return ((_a = options.find((opt) => opt.value === value)) == null ? void 0 : _a.label) ?? label;
+    },
+    [options, value, label]
+  );
+  return /* @__PURE__ */ jsxs6("div", { className: "select", ref: rootRef, children: [
+    /* @__PURE__ */ jsx7(
+      "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__ */ jsx7(
+      "ul",
+      {
+        className: "select__list",
+        style: { backgroundImage: `url(${paperTexture5})` },
+        role: "listbox",
+        id: "select-list",
+        onKeyDown: handleKeyDown,
+        ref: ulRef,
+        children: options.map((opt, idx) => /* @__PURE__ */ jsx7(
+          "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
+});
+import React5, { useState as useState4 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "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] = useState4(value ?? min);
+  const handleChange = (e) => {
+    const newValue = Number(e.target.value);
+    setInternalValue(newValue);
+    onChange == null ? void 0 : onChange(newValue);
+  };
+  React5.useEffect(() => {
+    if (typeof value === "number") {
+      setInternalValue(value);
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxs7("div", { className: "slider", children: [
+    /* @__PURE__ */ jsx8(
+      "input",
+      {
+        style: { backgroundImage: `url(${paperTexture6})` },
+        type: "range",
+        min,
+        max,
+        step,
+        value: internalValue,
+        onChange: handleChange,
+        className: "slider__input"
+      }
+    ),
+    showValue && /* @__PURE__ */ jsx8(
+      "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
+});
+import React6 from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var paperTexture7 = "/xp-components/assets/paper.png";
+var Switch = ({ label, disabled, ...rest }) => {
+  const reactId = React6.useId();
+  const id = rest.id ?? reactId;
+  return /* @__PURE__ */ jsxs8("label", { className: `switch${disabled ? " switch--disabled" : ""}`, children: [
+    /* @__PURE__ */ jsx9(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        className: "switch__input",
+        disabled,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      "span",
+      {
+        className: "switch__slider",
+        style: { backgroundImage: `url(${paperTexture7})` }
+      }
+    ),
+    label && /* @__PURE__ */ jsx9("span", { className: "switch__label", children: label })
+  ] });
+};
+var Switch_default = Switch;
+
+// src/components/Tag/Tag.tsx
+var Tag_exports = {};
+__export(Tag_exports, {
+  default: () => Tag_default
+});
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var paperTexture8 = "/xp-components/assets/paper.png";
+var Tag = ({
+  children,
+  variant = "default",
+  size = "md",
+  icon,
+  closable,
+  onClose,
+  className = "",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs9(
+    "span",
+    {
+      ...rest,
+      className: `tag tag--${variant} tag--${size} ${className}`,
+      style: { backgroundImage: `url(${paperTexture8})` },
+      children: [
+        icon && /* @__PURE__ */ jsx10("span", { className: "tag__icon", children: icon }),
+        children,
+        closable && /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "tag__close",
+            "aria-label": "\uB2EB\uAE30",
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+var Tag_default = Tag;
 export {
-  App_default as App
+  App_default as App,
+  Button_exports as Button,
+  Carousel_exports as Carousel,
+  Checkbox_exports as Checkbox,
+  Chips_exports as Chips,
+  Input_exports as Input,
+  Select_exports as Select,
+  Slider_exports as Slider,
+  Switch_exports as Switch,
+  Tag_exports as Tag
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ramong26/xp-components",
   "private": false,
-  "version": "1.0.10",
+  "version": "1.0.13",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.mjs",
@@ -74,6 +74,7 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
+    "@ramong26/xp-components": "file:/home/runner/work/xp-components/xp-components/ramong26-xp-components-1.0.13.tgz",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1"
   },