@ramong26/xp-components 1.0.16 → 1.0.17

package/dist/index.mjs

@@ -25,180 +25,123 @@ var App_default = App;
 import { jsx as jsx2 } from "react/jsx-runtime";
 var Button = ({
   children,
-  variant = "default",
+  variant = "primary",
+  size = "md",
+  className,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      className: `btn btn--${variant}`,
-      ...rest,
-      style: { backgroundImage: `url(/assets/paper.png)` },
-      children
-    }
-  );
+  const resolvedVariant = variant === "default" ? "primary" : variant;
+  const classes = ["btn", `btn--${resolvedVariant}`, `btn--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2("button", { className: classes, ...rest, children });
 };
 var Button_default = Button;
 
 // src/components/Carousel/Carousel.tsx
 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,
+  variant = "default",
+  showIndicators = true,
+  className,
   ...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 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);
-    }
+    if (delta > 50) setCurrentIndex((prev) => (prev + 1) % items.length);
+    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);
+    if (!autoPlay || items.length < 2) 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
-        )) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs2("div", { className: ["carousel", `carousel--${variant}`, className].filter(Boolean).join(" "), 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: 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)) }) }),
+    showIndicators && /* @__PURE__ */ jsx3("div", { className: "carousel__indicators", children: items.map((_, index) => /* @__PURE__ */ jsx3(
+      "button",
+      {
+        className: `carousel__indicator ${index === currentIndex ? "active" : ""}`,
+        onClick: () => setCurrentIndex(index),
+        "aria-label": `Go to slide ${index + 1}`,
+        type: "button"
+      },
+      index
+    )) })
+  ] });
 };
 var Carousel_default = Carousel;
 
 // src/components/Checkbox/Checkbox.tsx
 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 }) => {
+var Checkbox = ({ label, variant = "default", className, ...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
+  const classes = ["checkbox", `checkbox--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs3("label", { htmlFor: id, className: classes, children: [
+    /* @__PURE__ */ jsx4("input", { id, type: "checkbox", className: "checkbox__input", ...rest }),
+    /* @__PURE__ */ jsx4("span", { className: "checkbox__box", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx4("span", { className: "checkbox__label", children: label })
   ] });
 };
 var Checkbox_default = Checkbox;
 
 // src/components/Chips/Chips.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var paperTexture3 = "/xp-components/assets/paper.png";
 var Chips = ({
   children,
   onRemove,
   selected,
   onClick,
+  variant = "default",
+  className,
   ...rest
 }) => {
+  const classes = ["chip", `chip--${variant}`, selected && "is-selected", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      style: { backgroundImage: `url(${paperTexture3})` },
-      className: `chip${selected ? " selected" : ""}`,
+      className: classes,
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       onClick,
-      onKeyDown: (e) => onClick && e.key === "Enter" && onClick(),
+      onKeyDown: (e) => {
+        if (onClick && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onClick();
+        }
+      },
       ...rest,
       children: [
-        /* @__PURE__ */ jsx5("span", { className: "chip-label", children }),
+        /* @__PURE__ */ jsx5("span", { className: "chip__label", children }),
         onRemove && /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
-            className: "chip-remove",
+            className: "chip__remove",
             "aria-label": "Remove chip",
             onClick: (e) => {
               e.stopPropagation();
               onRemove();
             },
-            children: "\xD7"
+            children: "x"
           }
         )
       ]
@@ -210,37 +153,20 @@ var Chips_default = Chips;
 // src/components/Input/Input.tsx
 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 = "",
+  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
-      }
-    )
+  const classes = ["input", `input--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs5("div", { className: "input__wrapper", children: [
+    /* @__PURE__ */ jsx6("input", { id, type, className: classes, ...rest }),
+    (variant === "title" || variant === "search") && label && /* @__PURE__ */ jsx6("label", { htmlFor: id, className: "input__label", children: label })
   ] });
 };
 var Input_default = Input;
@@ -248,14 +174,7 @@ var Input_default = Input;
 // src/components/Select/Select.tsx
 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
-}) => {
+var Select = ({ label, options, value, onChange, variant = "default", className, ...rest }) => {
   const [open, setOpen] = useState3(false);
   const [focusedIdx, setFocusedIdx] = useState3(null);
   const rootRef = useRef(null);
@@ -268,22 +187,21 @@ var Select = ({
       }
     };
     window.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      window.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [open]);
+    return () => window.removeEventListener("mousedown", handleClickOutside);
+  }, []);
   const handleKeyDown = (e) => {
+    if (!open && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      setOpen(true);
+      return;
+    }
     if (!open) return;
     if (e.key === "ArrowDown") {
       e.preventDefault();
-      setFocusedIdx(
-        (prev) => prev === null || prev === options.length - 1 ? 0 : prev + 1
-      );
+      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
-      );
+      setFocusedIdx((prev) => prev === null || prev === 0 ? options.length - 1 : prev - 1);
     } else if (e.key === "Enter" && focusedIdx !== null) {
       e.preventDefault();
       const selectedOption = options[focusedIdx];
@@ -303,20 +221,16 @@ var Select = ({
     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(
+  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", `select--${variant}`, className].filter(Boolean).join(" "), ref: rootRef, children: [
+    /* @__PURE__ */ jsxs6(
       "button",
       {
         ...rest,
         className: "select__button",
-        style: { backgroundImage: `url(${paperTexture5})` },
         onClick: () => setOpen((v) => !v),
         type: "button",
         "aria-haspopup": "listbox",
@@ -324,38 +238,30 @@ var Select = ({
         "aria-controls": "select-list",
         "aria-label": label,
         onKeyDown: handleKeyDown,
-        children: selectedLabel
+        children: [
+          /* @__PURE__ */ jsx7("span", { children: selectedLabel }),
+          /* @__PURE__ */ jsx7("span", { className: "select__caret", "aria-hidden": "true", children: open ? "-" : "+" })
+        ]
       }
     ),
-    open && /* @__PURE__ */ jsx7(
-      "ul",
+    open && /* @__PURE__ */ jsx7("ul", { className: "select__list", role: "listbox", id: "select-list", onKeyDown: handleKeyDown, ref: ulRef, tabIndex: -1, children: options.map((opt, idx) => /* @__PURE__ */ jsx7(
+      "li",
       {
-        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
-        ))
-      }
-    )
+        className: `select__item ${focusedIdx === idx ? "is-focused" : ""} ${value === opt.value ? "is-selected" : ""}`,
+        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;
@@ -363,14 +269,15 @@ var Select_default = Select;
 // src/components/Slider/Slider.tsx
 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
+  showValue = true,
+  variant = "default",
+  className
 }) => {
   const [internalValue, setInternalValue] = useState4(value ?? min);
   const handleChange = (e) => {
@@ -383,11 +290,10 @@ var Slider = ({
       setInternalValue(value);
     }
   }, [value]);
-  return /* @__PURE__ */ jsxs7("div", { className: "slider", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: ["slider", `slider--${variant}`, className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsx8(
       "input",
       {
-        style: { backgroundImage: `url(${paperTexture6})` },
         type: "range",
         min,
         max,
@@ -397,14 +303,7 @@ var Slider = ({
         className: "slider__input"
       }
     ),
-    showValue && /* @__PURE__ */ jsx8(
-      "span",
-      {
-        style: { backgroundImage: ` url(${paperTexture6})` },
-        className: "slider__value",
-        children: internalValue
-      }
-    )
+    showValue && /* @__PURE__ */ jsx8("span", { className: "slider__value", children: internalValue })
   ] });
 };
 var Slider_default = Slider;
@@ -412,28 +311,13 @@ var Slider_default = Slider;
 // src/components/Switch/Switch.tsx
 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 }) => {
+var Switch = ({ label, disabled, variant = "default", className, ...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})` }
-      }
-    ),
+  const classes = ["switch", `switch--${variant}`, disabled && "switch--disabled", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs8("label", { className: classes, htmlFor: id, children: [
+    /* @__PURE__ */ jsx9("input", { id, type: "checkbox", className: "switch__input", disabled, ...rest }),
+    /* @__PURE__ */ jsx9("span", { className: "switch__slider" }),
     label && /* @__PURE__ */ jsx9("span", { className: "switch__label", children: label })
   ] });
 };
@@ -441,7 +325,6 @@ var Switch_default = Switch;
 
 // src/components/Tag/Tag.tsx
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var paperTexture8 = "/xp-components/assets/paper.png";
 var Tag = ({
   children,
   variant = "default",
@@ -452,28 +335,11 @@ var Tag = ({
   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"
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs9("span", { ...rest, className: ["tag", `tag--${variant}`, `tag--${size}`, className].filter(Boolean).join(" "), children: [
+    icon && /* @__PURE__ */ jsx10("span", { className: "tag__icon", children: icon }),
+    /* @__PURE__ */ jsx10("span", { className: "tag__label", children }),
+    closable && /* @__PURE__ */ jsx10("button", { type: "button", onClick: onClose, className: "tag__close", "aria-label": "Close tag", children: "x" })
+  ] });
 };
 var Tag_default = Tag;
 export {