@poodle-kit/ui 0.1.1 → 0.3.0

package/dist/index.js

@@ -20,54 +20,996 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Button: () => Button
+  Button: () => Button,
+  ImageUploader: () => ImageUploader,
+  Input: () => Input,
+  InputMessage: () => InputMessage,
+  ThemeProvider: () => ThemeProvider,
+  buttonVariants: () => buttonVariants,
+  cn: () => cn,
+  defaultDarkTheme: () => defaultDarkTheme,
+  defaultLightTheme: () => defaultLightTheme,
+  defineTheme: () => defineTheme,
+  generateThemeCss: () => generateThemeCss,
+  imageUploaderVariants: () => imageUploaderVariants,
+  inputVariants: () => inputVariants,
+  useImageUploader: () => useImageUploader,
+  useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/Button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var base = "inline-flex items-center justify-center rounded-lg font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
-var sizes = {
-  sm: "h-8 px-3 text-sm",
-  md: "h-10 px-4 text-sm",
-  lg: "h-12 px-5 text-base"
-};
-var variants = {
-  primary: "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600 shadow-sm",
-  secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:ring-gray-400 border border-gray-200",
-  ghost: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-400",
-  danger: "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-600 shadow-sm"
-};
-function cx(...classes) {
-  return classes.filter(Boolean).join(" ");
+// src/components/button/button.tsx
+var import_react = require("react");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/lib/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
-function Button({
-  label,
+
+// src/components/button/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center rounded-[var(--radius-md)] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        info: "bg-info text-info-foreground hover:bg-info/90",
+        danger: "bg-danger text-danger-foreground hover:bg-danger/90",
+        warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+        success: "bg-success text-success-foreground hover:bg-success/90",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-[var(--radius-md)] px-3",
+        lg: "h-11 rounded-[var(--radius-md)] px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = (0, import_react.forwardRef)(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        type: "button",
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/input/input.tsx
+var import_react2 = require("react");
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var inputVariants = (0, import_class_variance_authority2.cva)(
+  "flex w-full rounded-[var(--radius-md)] border border-input bg-background text-sm placeholder:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        default: "h-10 px-3 py-2",
+        sm: "h-9 px-2 text-xs",
+        lg: "h-11 px-4"
+      },
+      state: {
+        default: "focus-visible:ring-ring",
+        error: "border-danger focus-visible:ring-danger",
+        success: "border-success focus-visible:ring-success"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      state: "default"
+    }
+  }
+);
+var Input = (0, import_react2.forwardRef)(
+  ({
+    className,
+    inputClassName,
+    size,
+    error,
+    success,
+    label,
+    id,
+    leftIcon,
+    rightIcon,
+    onLeftIconClick,
+    onRightIconClick,
+    required,
+    disabled,
+    ...props
+  }, ref) => {
+    const state = error ? "error" : success ? "success" : "default";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("flex flex-col gap-1", className), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "label",
+        {
+          htmlFor: id,
+          className: cn(
+            "text-sm font-medium",
+            disabled && "opacity-50"
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-1 text-danger", "aria-label": "\uD544\uC218", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            disabled: !onLeftIconClick,
+            "aria-label": "left icon",
+            className: cn(
+              "absolute left-3 top-1/2 z-10 -translate-y-1/2",
+              onLeftIconClick ? "cursor-pointer" : "pointer-events-none cursor-default",
+              disabled && "opacity-50"
+            ),
+            onClick: onLeftIconClick,
+            children: leftIcon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            id,
+            ref,
+            required,
+            disabled,
+            "aria-invalid": error || void 0,
+            className: cn(
+              inputVariants({ size, state }),
+              // 아이콘이 있을 때 텍스트가 아이콘에 가리지 않도록 패딩 추가
+              leftIcon && "pl-9",
+              rightIcon && "pr-9",
+              inputClassName
+            ),
+            ...props
+          }
+        ),
+        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            disabled: !onRightIconClick,
+            "aria-label": "right icon",
+            className: cn(
+              "absolute right-3 top-1/2 z-10 -translate-y-1/2",
+              onRightIconClick ? "cursor-pointer" : "pointer-events-none cursor-default",
+              disabled && "opacity-50"
+            ),
+            onClick: onRightIconClick,
+            children: rightIcon
+          }
+        )
+      ] })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/input/input-message.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function InputMessage({
   children,
-  variant = "primary",
-  size = "md",
-  fullWidth = false,
-  className,
-  ...rest
+  error,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "p",
+    {
+      className: cn(
+        "text-xs",
+        error ? "text-danger" : "text-muted-foreground",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/image-uploader/image-uploader.tsx
+var import_react4 = require("react");
+var import_class_variance_authority3 = require("class-variance-authority");
+
+// src/icons/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function createIcon(paths, defaultSize = 24) {
+  return function Icon({
+    width = defaultSize,
+    height = defaultSize,
+    ...props
+  }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width,
+        height,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        ...props,
+        children: paths
+      }
+    );
+  };
+}
+var PlusIcon = createIcon(
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 5v14" })
+  ] })
+);
+var XIcon = createIcon(
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 6 12 12" })
+  ] }),
+  12
+);
+
+// src/components/image-uploader/use-image-uploader.ts
+var import_react3 = require("react");
+function matchesAccept(file, accept) {
+  return accept.split(",").map((s) => s.trim().toLowerCase()).some((pattern) => {
+    if (pattern === "*" || pattern === "*/*") return true;
+    if (pattern.startsWith("."))
+      return file.name.toLowerCase().endsWith(pattern);
+    if (pattern.endsWith("/*"))
+      return file.type.startsWith(pattern.slice(0, -2));
+    return file.type === pattern;
+  });
+}
+function useImageUploader({
+  initialImages,
+  maxImages = 4,
+  maxSizeMb,
+  accept = "image/*",
+  onFileSelect,
+  onDeleteExisting,
+  onError
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const [newImages, setNewImages] = (0, import_react3.useState)([]);
+  const [deletedIds, setDeletedIds] = (0, import_react3.useState)([]);
+  const [isDragActive, setIsDragActive] = (0, import_react3.useState)(false);
+  const inputRef = (0, import_react3.useRef)(null);
+  const onFileSelectRef = (0, import_react3.useRef)(onFileSelect);
+  const onDeleteExistingRef = (0, import_react3.useRef)(onDeleteExisting);
+  const onErrorRef = (0, import_react3.useRef)(onError);
+  (0, import_react3.useEffect)(() => {
+    onFileSelectRef.current = onFileSelect;
+    onDeleteExistingRef.current = onDeleteExisting;
+    onErrorRef.current = onError;
+  });
+  const newImagesRef = (0, import_react3.useRef)([]);
+  const deletedIdsRef = (0, import_react3.useRef)([]);
+  const existingCountRef = (0, import_react3.useRef)(0);
+  const existingImages = (0, import_react3.useMemo)(
+    () => (initialImages != null ? initialImages : []).filter(
+      (img) => !deletedIds.includes(img.id)
+    ),
+    [initialImages, deletedIds]
+  );
+  (0, import_react3.useEffect)(() => {
+    newImagesRef.current = newImages;
+  }, [newImages]);
+  (0, import_react3.useEffect)(() => {
+    deletedIdsRef.current = deletedIds;
+  }, [deletedIds]);
+  (0, import_react3.useEffect)(() => {
+    existingCountRef.current = existingImages.length;
+  }, [existingImages.length]);
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      newImagesRef.current.forEach(
+        (item) => URL.revokeObjectURL(item.preview)
+      );
+    };
+  }, []);
+  const processFiles = (0, import_react3.useCallback)(
+    (files) => {
+      const currentTotal = existingCountRef.current + newImagesRef.current.length;
+      const onErr = onErrorRef.current;
+      const onSelect = onFileSelectRef.current;
+      if (currentTotal >= maxImages) {
+        onErr == null ? void 0 : onErr({
+          type: "MAX_IMAGES",
+          message: `\uC774\uBBF8\uC9C0\uB294 \uCD5C\uB300 ${maxImages}\uC7A5\uAE4C\uC9C0 \uCD94\uAC00\uD560 \uC218 \uC788\uC5B4\uC694.`,
+          maxImages
+        });
+        return;
+      }
+      const remainingSlots = maxImages - currentTotal;
+      if (files.length > remainingSlots) {
+        onErr == null ? void 0 : onErr({
+          type: "MAX_IMAGES",
+          message: `\uC774\uBBF8\uC9C0\uB294 \uCD5C\uB300 ${maxImages}\uC7A5\uAE4C\uC9C0 \uCD94\uAC00\uD560 \uC218 \uC788\uC5B4\uC694.`,
+          maxImages
+        });
+      }
+      const validFiles = [];
+      for (const file of files.slice(0, remainingSlots)) {
+        if (!matchesAccept(file, accept)) {
+          onErr == null ? void 0 : onErr({
+            type: "INVALID_TYPE",
+            message: `\uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uD30C\uC77C \uD615\uC2DD\uC774\uC5D0\uC694.`,
+            file,
+            accept
+          });
+          continue;
+        }
+        if (maxSizeMb !== void 0 && file.size > maxSizeMb * 1024 * 1024) {
+          onErr == null ? void 0 : onErr({
+            type: "MAX_SIZE",
+            message: `${file.name}\uC758 \uD06C\uAE30\uAC00 ${maxSizeMb}MB\uB97C \uCD08\uACFC\uD574\uC694.`,
+            maxSizeMb,
+            file
+          });
+          continue;
+        }
+        validFiles.push({
+          file,
+          preview: URL.createObjectURL(file),
+          id: crypto.randomUUID()
+        });
+      }
+      if (validFiles.length === 0) return;
+      const next = [...newImagesRef.current, ...validFiles];
+      newImagesRef.current = next;
+      setNewImages(next);
+      onSelect == null ? void 0 : onSelect(next.map((item) => item.file));
+    },
+    [maxImages, accept, maxSizeMb]
+  );
+  const removeExisting = (0, import_react3.useCallback)((id) => {
+    var _a;
+    const next = [...deletedIdsRef.current, id];
+    deletedIdsRef.current = next;
+    setDeletedIds(next);
+    (_a = onDeleteExistingRef.current) == null ? void 0 : _a.call(onDeleteExistingRef, next);
+  }, []);
+  const removeNew = (0, import_react3.useCallback)((id) => {
+    var _a;
+    const current = newImagesRef.current;
+    const toRemove = current.find((item) => item.id === id);
+    if (toRemove) URL.revokeObjectURL(toRemove.preview);
+    const next = current.filter((item) => item.id !== id);
+    newImagesRef.current = next;
+    setNewImages(next);
+    (_a = onFileSelectRef.current) == null ? void 0 : _a.call(onFileSelectRef, next.map((item) => item.file));
+  }, []);
+  const handleChange = (0, import_react3.useCallback)(
+    (e) => {
+      if (!e.target.files) return;
+      processFiles(Array.from(e.target.files));
+      e.target.value = "";
+    },
+    [processFiles]
+  );
+  const handleDragOver = (0, import_react3.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(true);
+  }, []);
+  const handleDragLeave = (0, import_react3.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    setIsDragActive(false);
+  }, []);
+  const handleDrop = (0, import_react3.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragActive(false);
+      processFiles(Array.from(e.dataTransfer.files));
+    },
+    [processFiles]
+  );
+  return {
+    existingImages,
+    newImages,
+    totalCount: existingImages.length + newImages.length,
+    isDragActive,
+    inputRef,
+    openFilePicker: () => {
+      var _a;
+      return (_a = inputRef.current) == null ? void 0 : _a.click();
+    },
+    removeExisting,
+    removeNew,
+    dragHandlers: {
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
+    },
+    inputProps: {
+      onChange: handleChange,
+      accept,
+      multiple: true
+    }
+  };
+}
+
+// src/components/image-uploader/image-uploader.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var imageUploaderVariants = (0, import_class_variance_authority3.cva)("flex gap-2", {
+  variants: {
+    layout: {
+      /** 가로 스크롤 행 (기본값) */
+      row: "flex-row flex-nowrap overflow-x-auto",
+      /** 자동 줄바꿈 격자 */
+      grid: "flex-wrap"
+    }
+  },
+  defaultVariants: { layout: "row" }
+});
+function AddButton({
+  onClick,
+  disabled,
+  current,
+  max,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     {
       type: "button",
-      className: cx(
-        base,
-        sizes[size],
-        variants[variant],
-        fullWidth && "w-full",
-        className
+      onClick,
+      disabled,
+      "aria-label": `\uC774\uBBF8\uC9C0 \uCD94\uAC00 (${current}/${max})`,
+      className: cn(
+        "shrink-0 w-20 h-20",
+        "flex flex-col items-center justify-center gap-1",
+        "rounded-lg",
+        "border-2 border-dashed border-border",
+        "bg-muted text-muted-foreground",
+        "cursor-pointer select-none",
+        "transition-colors duration-150",
+        "hover:bg-accent hover:text-accent-foreground hover:border-border",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50"
+      ),
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PlusIcon, { className: "w-5 h-5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-[10px] font-medium leading-none tabular-nums", children: [
+          current,
+          "/",
+          max
+        ] })
+      ] })
+    }
+  );
+}
+function ImageItem({ src, alt, onRemove, disabled }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative shrink-0 w-20 h-20 group/item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "img",
+      {
+        src,
+        alt,
+        draggable: false,
+        className: "w-full h-full object-cover rounded-lg"
+      }
+    ),
+    !disabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onRemove,
+        "aria-label": `${alt} \uC0AD\uC81C`,
+        className: cn(
+          "absolute -top-1.5 -right-1.5",
+          "w-5 h-5 rounded-full",
+          "flex items-center justify-center",
+          "bg-foreground text-background",
+          "transition-all duration-150",
+          "opacity-0 scale-75",
+          "group-hover/item:opacity-100 group-hover/item:scale-100",
+          "group-focus-within/item:opacity-100 group-focus-within/item:scale-100",
+          "hover:scale-110 active:scale-90",
+          "focus-visible:opacity-100 focus-visible:scale-100",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(XIcon, { strokeWidth: "2.5" })
+      }
+    )
+  ] });
+}
+var ImageUploader = (0, import_react4.forwardRef)(
+  ({
+    className,
+    layout,
+    disabled,
+    placeholder,
+    initialImages,
+    maxImages = 4,
+    maxSizeMb,
+    accept,
+    onFileSelect,
+    onDeleteExisting,
+    onError
+  }, ref) => {
+    const uid = (0, import_react4.useId)();
+    const {
+      existingImages,
+      newImages,
+      totalCount,
+      isDragActive,
+      inputRef,
+      openFilePicker,
+      removeExisting,
+      removeNew,
+      dragHandlers,
+      inputProps
+    } = useImageUploader({
+      initialImages,
+      maxImages,
+      maxSizeMb,
+      accept,
+      onFileSelect,
+      onDeleteExisting,
+      onError
+    });
+    const canAdd = !disabled && totalCount < maxImages;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref, className: cn("flex flex-col gap-2", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          role: "status",
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          className: "sr-only",
+          children: totalCount > 0 ? `\uC774\uBBF8\uC9C0 ${totalCount}\uAC1C \uC120\uD0DD\uB428. \uCD5C\uB300 ${maxImages}\uAC1C\uAE4C\uC9C0 \uCD94\uAC00\uD560 \uC218 \uC788\uC5B4\uC694.` : `\uC774\uBBF8\uC9C0\uB97C \uCD94\uAC00\uD574\uC8FC\uC138\uC694. \uCD5C\uB300 ${maxImages}\uAC1C\uAE4C\uC9C0 \uCD94\uAC00\uD560 \uC218 \uC788\uC5B4\uC694.`
+        }
+      ),
+      isDragActive && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { role: "alert", className: "sr-only", children: "\uD30C\uC77C\uC744 \uC5EC\uAE30\uC5D0 \uB193\uC544\uC8FC\uC138\uC694" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          id: `${uid}-input`,
+          type: "file",
+          tabIndex: -1,
+          "aria-hidden": "true",
+          className: "sr-only",
+          disabled,
+          ...inputProps
+        }
       ),
-      ...rest,
-      children: children || label
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          role: "group",
+          "aria-label": `\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB354, ${totalCount}/${maxImages}\uAC1C \uC120\uD0DD\uB428`,
+          className: cn(
+            imageUploaderVariants({ layout }),
+            "rounded-lg p-1 -ml-1",
+            "transition-all duration-200",
+            isDragActive && "ring-2 ring-primary ring-offset-2 bg-primary/5"
+          ),
+          ...canAdd ? dragHandlers : {},
+          children: [
+            canAdd && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              AddButton,
+              {
+                onClick: openFilePicker,
+                disabled,
+                current: totalCount,
+                max: maxImages,
+                children: placeholder
+              }
+            ),
+            sortBySequence(existingImages).map((img, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ImageItem,
+              {
+                src: img.url,
+                alt: `\uC774\uBBF8\uC9C0 ${index + 1}`,
+                onRemove: () => removeExisting(img.id),
+                disabled
+              },
+              `existing-${img.id}`
+            )),
+            newImages.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ImageItem,
+              {
+                src: item.preview,
+                alt: `\uC0C8 \uC774\uBBF8\uC9C0 ${existingImages.length + index + 1}`,
+                onRemove: () => removeNew(item.id),
+                disabled
+              },
+              `new-${item.id}`
+            ))
+          ]
+        }
+      )
+    ] });
+  }
+);
+ImageUploader.displayName = "ImageUploader";
+function sortBySequence(images) {
+  return [...images].sort(
+    (a, b) => {
+      var _a, _b;
+      return ((_a = a.sequence) != null ? _a : 0) - ((_b = b.sequence) != null ? _b : 0);
+    }
+  );
+}
+
+// src/theme/provider.tsx
+var import_react5 = require("react");
+
+// src/theme/theme-to-css-vars.ts
+function themeToCssVars(theme) {
+  const cssVars = {};
+  if (theme.colors) {
+    Object.entries(theme.colors).forEach(([key, value]) => {
+      if (typeof value === "string") {
+        cssVars[`--color-${key}`] = value;
+      } else if (typeof value === "object" && value !== null) {
+        if ("DEFAULT" in value) {
+          cssVars[`--color-${key}`] = value.DEFAULT;
+        }
+        if ("foreground" in value) {
+          cssVars[`--color-${key}-foreground`] = value.foreground;
+        }
+      }
+    });
+  }
+  if (theme.radius) {
+    Object.entries(theme.radius).forEach(([key, value]) => {
+      cssVars[`--radius-${key}`] = value;
+    });
+  }
+  if (theme.fontSize) {
+    Object.entries(theme.fontSize).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        const [size, config] = value;
+        cssVars[`--text-${key}`] = size;
+        if (config.lineHeight) {
+          cssVars[`--leading-${key}`] = config.lineHeight;
+        }
+      } else {
+        cssVars[`--text-${key}`] = value;
+      }
+    });
+  }
+  if (theme.fontFamily) {
+    Object.entries(theme.fontFamily).forEach(([key, value]) => {
+      cssVars[`--font-${key}`] = value.join(", ");
+    });
+  }
+  if (theme.fontWeight) {
+    Object.entries(theme.fontWeight).forEach(([key, value]) => {
+      cssVars[`--font-weight-${key}`] = value;
+    });
+  }
+  if (theme.shadows) {
+    Object.entries(theme.shadows).forEach(([key, value]) => {
+      cssVars[`--shadow-${key}`] = value;
+    });
+  }
+  if (theme.zIndex) {
+    Object.entries(theme.zIndex).forEach(([key, value]) => {
+      cssVars[`--z-${key}`] = value.toString();
+    });
+  }
+  if (theme.animation) {
+    if (theme.animation.duration) {
+      Object.entries(theme.animation.duration).forEach(
+        ([key, value]) => {
+          cssVars[`--duration-${key}`] = value;
+        }
+      );
+    }
+    if (theme.animation.ease) {
+      Object.entries(theme.animation.ease).forEach(([key, value]) => {
+        cssVars[`--ease-${key}`] = value;
+      });
+    }
+  }
+  if (theme.spacing) {
+    Object.entries(theme.spacing).forEach(([key, value]) => {
+      cssVars[`--spacing-${key}`] = value;
+    });
+  }
+  return cssVars;
+}
+function applyCssVars(element, cssVars) {
+  Object.entries(cssVars).forEach(([key, value]) => {
+    element.style.setProperty(key, value);
+  });
+}
+function formatCssVars(cssVars) {
+  return Object.entries(cssVars).map(([key, value]) => `  ${key}: ${value};`).join("\n");
+}
+function generateThemeCss(theme) {
+  const cssVars = themeToCssVars(theme);
+  return formatCssVars(cssVars);
+}
+
+// src/theme/provider.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react5.createContext)(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "poodle-ui-theme",
+  config,
+  darkConfig,
+  customThemes = {},
+  enableColorSchemeSync = true
+}) {
+  const [theme, setTheme] = (0, import_react5.useState)(() => {
+    if (typeof window === "undefined") {
+      return defaultTheme;
+    }
+    try {
+      return localStorage.getItem(storageKey) || defaultTheme;
+    } catch {
+      return defaultTheme;
     }
+  });
+  const lightCssVars = (0, import_react5.useMemo)(
+    () => config ? themeToCssVars(config) : null,
+    [config]
   );
+  const darkCssVars = (0, import_react5.useMemo)(
+    () => darkConfig ? themeToCssVars(darkConfig) : null,
+    [darkConfig]
+  );
+  (0, import_react5.useEffect)(() => {
+    var _a, _b;
+    const root = window.document.documentElement;
+    root.classList.remove(
+      "light",
+      "dark",
+      ...Object.keys(customThemes)
+    );
+    let actualTheme;
+    if (theme === "system") {
+      actualTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    } else {
+      actualTheme = theme;
+    }
+    root.classList.add(actualTheme);
+    if (enableColorSchemeSync) {
+      const isDark = actualTheme === "dark" || ((_a = customThemes[actualTheme]) == null ? void 0 : _a.dark);
+      root.style.colorScheme = isDark ? "dark" : "light";
+    }
+    if (actualTheme === "light" && lightCssVars) {
+      applyCssVars(root, lightCssVars);
+    } else if (actualTheme === "dark" && darkCssVars) {
+      applyCssVars(root, darkCssVars);
+    } else if ((_b = customThemes[actualTheme]) == null ? void 0 : _b.cssVars) {
+      Object.entries(customThemes[actualTheme].cssVars).forEach(
+        ([key, value2]) => {
+          root.style.setProperty(key, value2);
+        }
+      );
+    }
+  }, [
+    theme,
+    lightCssVars,
+    darkCssVars,
+    customThemes,
+    enableColorSchemeSync
+  ]);
+  (0, import_react5.useEffect)(() => {
+    if (theme !== "system") return;
+    const mediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    );
+    const handler = () => {
+      setTheme("system");
+    };
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [theme]);
+  const handleSetTheme = (newTheme) => {
+    try {
+      localStorage.setItem(storageKey, newTheme);
+    } catch {
+    }
+    setTheme(newTheme);
+  };
+  const value = {
+    theme,
+    setTheme: handleSetTheme
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ThemeContext.Provider, { value, children });
 }
+
+// src/theme/use-theme.ts
+var import_react6 = require("react");
+function useTheme() {
+  const context = (0, import_react6.useContext)(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+// src/theme/types.ts
+function defineTheme(config) {
+  return config;
+}
+
+// src/theme/defaults/default.ts
+var defaultLightTheme = defineTheme({
+  colors: {
+    // Page & Container colors
+    background: {
+      DEFAULT: "oklch(1 0 0)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    muted: {
+      DEFAULT: "oklch(0.96 0 0)",
+      foreground: "oklch(0.45 0 0)"
+    },
+    accent: {
+      DEFAULT: "oklch(0.96 0 0)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    card: {
+      DEFAULT: "oklch(1 0 0)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    popover: {
+      DEFAULT: "oklch(1 0 0)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    // Brand & Action colors
+    primary: {
+      DEFAULT: "oklch(0.09 0 0)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    secondary: {
+      DEFAULT: "oklch(0.45 0 0)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    // Semantic colors
+    info: {
+      DEFAULT: "oklch(0.55 0.15 250)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    danger: {
+      DEFAULT: "oklch(0.576 0.204 27.325)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    warning: {
+      DEFAULT: "oklch(0.75 0.15 75)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    success: {
+      DEFAULT: "oklch(0.60 0.15 145)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    // Border & Input colors
+    border: "oklch(0.90 0 0)",
+    input: "oklch(0.90 0 0)",
+    ring: "oklch(0.09 0 0)"
+  },
+  radius: {
+    none: "0",
+    sm: "0.125rem",
+    base: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px"
+  }
+});
+var defaultDarkTheme = defineTheme({
+  colors: {
+    // Page & Container colors
+    background: {
+      DEFAULT: "oklch(0.09 0 0)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    muted: {
+      DEFAULT: "oklch(0.17 0 0)",
+      foreground: "oklch(0.65 0 0)"
+    },
+    accent: {
+      DEFAULT: "oklch(0.17 0 0)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    card: {
+      DEFAULT: "oklch(0.09 0 0)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    popover: {
+      DEFAULT: "oklch(0.09 0 0)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    // Brand & Action colors
+    primary: {
+      DEFAULT: "oklch(0.98 0 0)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    secondary: {
+      DEFAULT: "oklch(0.65 0 0)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    // Semantic colors
+    info: {
+      DEFAULT: "oklch(0.65 0.15 250)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    danger: {
+      DEFAULT: "oklch(0.701 0.191 29.234)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    warning: {
+      DEFAULT: "oklch(0.80 0.15 75)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    success: {
+      DEFAULT: "oklch(0.70 0.15 145)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    // Border & Input colors
+    border: "oklch(0.27 0 0)",
+    input: "oklch(0.27 0 0)",
+    ring: "oklch(0.98 0 0)"
+  },
+  radius: {
+    none: "0",
+    sm: "0.125rem",
+    base: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px"
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Button
+  Button,
+  ImageUploader,
+  Input,
+  InputMessage,
+  ThemeProvider,
+  buttonVariants,
+  cn,
+  defaultDarkTheme,
+  defaultLightTheme,
+  defineTheme,
+  generateThemeCss,
+  imageUploaderVariants,
+  inputVariants,
+  useImageUploader,
+  useTheme
 });
 //# sourceMappingURL=index.js.map