@poodle-kit/ui 0.1.1 → 0.3.0

package/dist/index.mjs

@@ -1,46 +1,987 @@
-// src/components/Button.tsx
-import { jsx } from "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
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
 }
-function Button({
-  label,
+
+// src/components/button/button.tsx
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = 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 = forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        type: "button",
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/input/input.tsx
+import {
+  forwardRef as forwardRef2
+} from "react";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var inputVariants = cva2(
+  "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 = forwardRef2(
+  ({
+    className,
+    inputClassName,
+    size,
+    error,
+    success,
+    label,
+    id,
+    leftIcon,
+    rightIcon,
+    onLeftIconClick,
+    onRightIconClick,
+    required,
+    disabled,
+    ...props
+  }, ref) => {
+    const state = error ? "error" : success ? "success" : "default";
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
+      label && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: id,
+          className: cn(
+            "text-sm font-medium",
+            disabled && "opacity-50"
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx2("span", { className: "ml-1 text-danger", "aria-label": "\uD544\uC218", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        leftIcon && /* @__PURE__ */ jsx2(
+          "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__ */ jsx2(
+          "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__ */ jsx2(
+          "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
+import { jsx as jsx3 } from "react/jsx-runtime";
+function InputMessage({
   children,
-  variant = "primary",
-  size = "md",
-  fullWidth = false,
-  className,
-  ...rest
+  error,
+  className
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
+    "p",
+    {
+      className: cn(
+        "text-xs",
+        error ? "text-danger" : "text-muted-foreground",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/image-uploader/image-uploader.tsx
+import { forwardRef as forwardRef3, useId } from "react";
+import { cva as cva3 } from "class-variance-authority";
+
+// src/icons/index.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function createIcon(paths, defaultSize = 24) {
+  return function Icon({
+    width = defaultSize,
+    height = defaultSize,
+    ...props
+  }) {
+    return /* @__PURE__ */ jsx4(
+      "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__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsx4("path", { d: "M12 5v14" })
+  ] })
+);
+var XIcon = createIcon(
+  /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx4("path", { d: "m6 6 12 12" })
+  ] }),
+  12
+);
+
+// src/components/image-uploader/use-image-uploader.ts
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "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
+}) {
+  const [newImages, setNewImages] = useState([]);
+  const [deletedIds, setDeletedIds] = useState([]);
+  const [isDragActive, setIsDragActive] = useState(false);
+  const inputRef = useRef(null);
+  const onFileSelectRef = useRef(onFileSelect);
+  const onDeleteExistingRef = useRef(onDeleteExisting);
+  const onErrorRef = useRef(onError);
+  useEffect(() => {
+    onFileSelectRef.current = onFileSelect;
+    onDeleteExistingRef.current = onDeleteExisting;
+    onErrorRef.current = onError;
+  });
+  const newImagesRef = useRef([]);
+  const deletedIdsRef = useRef([]);
+  const existingCountRef = useRef(0);
+  const existingImages = useMemo(
+    () => (initialImages != null ? initialImages : []).filter(
+      (img) => !deletedIds.includes(img.id)
+    ),
+    [initialImages, deletedIds]
+  );
+  useEffect(() => {
+    newImagesRef.current = newImages;
+  }, [newImages]);
+  useEffect(() => {
+    deletedIdsRef.current = deletedIds;
+  }, [deletedIds]);
+  useEffect(() => {
+    existingCountRef.current = existingImages.length;
+  }, [existingImages.length]);
+  useEffect(() => {
+    return () => {
+      newImagesRef.current.forEach(
+        (item) => URL.revokeObjectURL(item.preview)
+      );
+    };
+  }, []);
+  const processFiles = 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 = 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 = 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 = useCallback(
+    (e) => {
+      if (!e.target.files) return;
+      processFiles(Array.from(e.target.files));
+      e.target.value = "";
+    },
+    [processFiles]
+  );
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    setIsDragActive(false);
+  }, []);
+  const handleDrop = 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
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var imageUploaderVariants = cva3("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__ */ jsx5(
     "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"
       ),
-      ...rest,
-      children: children || label
+      children: children != null ? children : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx5(PlusIcon, { className: "w-5 h-5" }),
+        /* @__PURE__ */ jsxs3("span", { className: "text-[10px] font-medium leading-none tabular-nums", children: [
+          current,
+          "/",
+          max
+        ] })
+      ] })
     }
   );
 }
+function ImageItem({ src, alt, onRemove, disabled }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "relative shrink-0 w-20 h-20 group/item", children: [
+    /* @__PURE__ */ jsx5(
+      "img",
+      {
+        src,
+        alt,
+        draggable: false,
+        className: "w-full h-full object-cover rounded-lg"
+      }
+    ),
+    !disabled && /* @__PURE__ */ jsx5(
+      "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__ */ jsx5(XIcon, { strokeWidth: "2.5" })
+      }
+    )
+  ] });
+}
+var ImageUploader = forwardRef3(
+  ({
+    className,
+    layout,
+    disabled,
+    placeholder,
+    initialImages,
+    maxImages = 4,
+    maxSizeMb,
+    accept,
+    onFileSelect,
+    onDeleteExisting,
+    onError
+  }, ref) => {
+    const uid = 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__ */ jsxs3("div", { ref, className: cn("flex flex-col gap-2", className), children: [
+      /* @__PURE__ */ jsx5(
+        "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__ */ jsx5("span", { role: "alert", className: "sr-only", children: "\uD30C\uC77C\uC744 \uC5EC\uAE30\uC5D0 \uB193\uC544\uC8FC\uC138\uC694" }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          ref: inputRef,
+          id: `${uid}-input`,
+          type: "file",
+          tabIndex: -1,
+          "aria-hidden": "true",
+          className: "sr-only",
+          disabled,
+          ...inputProps
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        "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__ */ jsx5(
+              AddButton,
+              {
+                onClick: openFilePicker,
+                disabled,
+                current: totalCount,
+                max: maxImages,
+                children: placeholder
+              }
+            ),
+            sortBySequence(existingImages).map((img, index) => /* @__PURE__ */ jsx5(
+              ImageItem,
+              {
+                src: img.url,
+                alt: `\uC774\uBBF8\uC9C0 ${index + 1}`,
+                onRemove: () => removeExisting(img.id),
+                disabled
+              },
+              `existing-${img.id}`
+            )),
+            newImages.map((item, index) => /* @__PURE__ */ jsx5(
+              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
+import {
+  createContext,
+  useEffect as useEffect2,
+  useState as useState2,
+  useMemo as useMemo2
+} from "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
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ThemeContext = createContext(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "poodle-ui-theme",
+  config,
+  darkConfig,
+  customThemes = {},
+  enableColorSchemeSync = true
+}) {
+  const [theme, setTheme] = useState2(() => {
+    if (typeof window === "undefined") {
+      return defaultTheme;
+    }
+    try {
+      return localStorage.getItem(storageKey) || defaultTheme;
+    } catch {
+      return defaultTheme;
+    }
+  });
+  const lightCssVars = useMemo2(
+    () => config ? themeToCssVars(config) : null,
+    [config]
+  );
+  const darkCssVars = useMemo2(
+    () => darkConfig ? themeToCssVars(darkConfig) : null,
+    [darkConfig]
+  );
+  useEffect2(() => {
+    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
+  ]);
+  useEffect2(() => {
+    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__ */ jsx6(ThemeContext.Provider, { value, children });
+}
+
+// src/theme/use-theme.ts
+import { useContext } from "react";
+function useTheme() {
+  const context = 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"
+  }
+});
 export {
-  Button
+  Button,
+  ImageUploader,
+  Input,
+  InputMessage,
+  ThemeProvider,
+  buttonVariants,
+  cn,
+  defaultDarkTheme,
+  defaultLightTheme,
+  defineTheme,
+  generateThemeCss,
+  imageUploaderVariants,
+  inputVariants,
+  useImageUploader,
+  useTheme
 };
 //# sourceMappingURL=index.mjs.map