@poodle-kit/ui 0.1.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 poodle-kit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,148 @@
+# @poodle-kit/ui
+
+TypeScript와 Tailwind CSS로 만든 React UI 컴포넌트 라이브러리예요.
+
+## 📦 설치하기
+
+```bash
+npm install @poodle-kit/ui
+```
+
+### 같이 필요한 패키지들
+
+```bash
+npm install react@">=18" react-dom@">=18"
+```
+
+## 💡 사용 방법
+
+### 기본 예제
+
+```tsx
+import { Button } from '@poodle-kit/ui';
+import '@poodle-kit/ui/styles.css';
+
+function App() {
+  return (
+    <Button
+      label="클릭해주세요"
+      variant="primary"
+      onClick={() => alert('클릭했어요!')}
+    />
+  );
+}
+```
+
+### TypeScript와 함께 사용하기
+
+```tsx
+import { Button, ButtonProps } from '@poodle-kit/ui';
+import '@poodle-kit/ui/styles.css';
+
+const MyButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />;
+};
+```
+
+## 🎨 컴포넌트
+
+### Button
+
+다양한 스타일과 크기를 지원하는 버튼 컴포넌트예요.
+
+#### Props
+
+| Prop        | 타입                                              | 기본값      | 설명                            |
+| ----------- | ------------------------------------------------- | ----------- | ------------------------------- |
+| `label`     | `string`                                          | -           | 버튼에 표시될 텍스트 **(필수)** |
+| `variant`   | `"primary" \| "secondary" \| "ghost" \| "danger"` | `"primary"` | 버튼의 스타일 종류              |
+| `size`      | `"sm" \| "md" \| "lg"`                            | `"md"`      | 버튼의 크기                     |
+| `fullWidth` | `boolean`                                         | `false`     | 버튼을 전체 너비로 만들기       |
+| `disabled`  | `boolean`                                         | `false`     | 버튼 비활성화하기               |
+| `onClick`   | `() => void`                                      | -           | 클릭 이벤트 핸들러              |
+
+일반적인 HTML button 속성들도 모두 사용할 수 있어요.
+
+#### 예제
+
+**다양한 스타일**
+
+```tsx
+<Button label="Primary" variant="primary" />
+<Button label="Secondary" variant="secondary" />
+<Button label="Ghost" variant="ghost" />
+<Button label="Danger" variant="danger" />
+```
+
+**다양한 크기**
+
+```tsx
+<Button label="작아요" size="sm" />
+<Button label="보통이에요" size="md" />
+<Button label="커요" size="lg" />
+```
+
+**전체 너비로 만들기**
+
+```tsx
+<Button label="전체 너비 버튼" fullWidth />
+```
+
+**비활성화 상태**
+
+```tsx
+<Button label="비활성화된 버튼" disabled />
+```
+
+## 🎨 스타일링
+
+이 라이브러리는 Tailwind CSS를 사용해요. 스타일을 꼭 import 해주세요:
+
+```tsx
+import '@poodle-kit/ui/styles.css';
+```
+
+### 커스텀 스타일 적용하기
+
+className을 통해 추가 스타일을 적용할 수 있어요:
+
+```tsx
+<Button label="커스텀" className="my-custom-class" />
+```
+
+## 🔧 TypeScript 지원
+
+TypeScript로 작성되어 완벽한 타입 정의를 제공해요.
+
+```tsx
+import type { ButtonProps } from '@poodle-kit/ui';
+```
+
+## 🌐 브라우저 지원
+
+- Chrome (최신 버전)
+- Firefox (최신 버전)
+- Safari (최신 버전)
+- Edge (최신 버전)
+
+## 🛠️ 개발하기
+
+### 빌드
+
+```bash
+npm run build
+```
+
+### Watch 모드
+
+```bash
+npm run dev
+```
+
+## 📦 리포지토리
+
+[GitHub](https://github.com/poodle-kit/poodle-kit/tree/main/packages/ui)
+
+## 📄 라이선스
+
+MIT

package/dist/components/image-uploader/image-uploader.d.mts

@@ -0,0 +1,4 @@
+import 'react';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+export { E as ExistingImage, I as ImageUploader, b as ImageUploaderProps, N as NewImageFile, i as imageUploaderVariants } from '../../image-uploader-BFvQ4s0a.mjs';

package/dist/components/image-uploader/image-uploader.d.ts

@@ -0,0 +1,4 @@
+import 'react';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+export { E as ExistingImage, I as ImageUploader, b as ImageUploaderProps, N as NewImageFile, i as imageUploaderVariants } from '../../image-uploader-BFvQ4s0a.js';

package/dist/components/image-uploader/image-uploader.js

@@ -0,0 +1,471 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/image-uploader/image-uploader.tsx
+var image_uploader_exports = {};
+__export(image_uploader_exports, {
+  ImageUploader: () => ImageUploader,
+  imageUploaderVariants: () => imageUploaderVariants
+});
+module.exports = __toCommonJS(image_uploader_exports);
+var import_react2 = require("react");
+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));
+}
+
+// src/icons/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function createIcon(paths, defaultSize = 24) {
+  return function Icon({
+    width = defaultSize,
+    height = defaultSize,
+    ...props
+  }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14" })
+  ] })
+);
+var XIcon = createIcon(
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
+  ] }),
+  12
+);
+
+// src/components/image-uploader/use-image-uploader.ts
+var import_react = 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
+}) {
+  const [newImages, setNewImages] = (0, import_react.useState)([]);
+  const [deletedIds, setDeletedIds] = (0, import_react.useState)([]);
+  const [isDragActive, setIsDragActive] = (0, import_react.useState)(false);
+  const inputRef = (0, import_react.useRef)(null);
+  const onFileSelectRef = (0, import_react.useRef)(onFileSelect);
+  const onDeleteExistingRef = (0, import_react.useRef)(onDeleteExisting);
+  const onErrorRef = (0, import_react.useRef)(onError);
+  (0, import_react.useEffect)(() => {
+    onFileSelectRef.current = onFileSelect;
+    onDeleteExistingRef.current = onDeleteExisting;
+    onErrorRef.current = onError;
+  });
+  const newImagesRef = (0, import_react.useRef)([]);
+  const deletedIdsRef = (0, import_react.useRef)([]);
+  const existingCountRef = (0, import_react.useRef)(0);
+  const existingImages = (0, import_react.useMemo)(
+    () => (initialImages != null ? initialImages : []).filter(
+      (img) => !deletedIds.includes(img.id)
+    ),
+    [initialImages, deletedIds]
+  );
+  (0, import_react.useEffect)(() => {
+    newImagesRef.current = newImages;
+  }, [newImages]);
+  (0, import_react.useEffect)(() => {
+    deletedIdsRef.current = deletedIds;
+  }, [deletedIds]);
+  (0, import_react.useEffect)(() => {
+    existingCountRef.current = existingImages.length;
+  }, [existingImages.length]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      newImagesRef.current.forEach(
+        (item) => URL.revokeObjectURL(item.preview)
+      );
+    };
+  }, []);
+  const processFiles = (0, import_react.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_react.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_react.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_react.useCallback)(
+    (e) => {
+      if (!e.target.files) return;
+      processFiles(Array.from(e.target.files));
+      e.target.value = "";
+    },
+    [processFiles]
+  );
+  const handleDragOver = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(true);
+  }, []);
+  const handleDragLeave = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    setIsDragActive(false);
+  }, []);
+  const handleDrop = (0, import_react.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_runtime2 = require("react/jsx-runtime");
+var imageUploaderVariants = (0, import_class_variance_authority.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_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      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_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PlusIcon, { className: "w-5 h-5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsxs)("div", { className: "relative shrink-0 w-20 h-20 group/item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "img",
+      {
+        src,
+        alt,
+        draggable: false,
+        className: "w-full h-full object-cover rounded-lg"
+      }
+    ),
+    !disabled && /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)(XIcon, { strokeWidth: "2.5" })
+      }
+    )
+  ] });
+}
+var ImageUploader = (0, import_react2.forwardRef)(
+  ({
+    className,
+    layout,
+    disabled,
+    placeholder,
+    initialImages,
+    maxImages = 4,
+    maxSizeMb,
+    accept,
+    onFileSelect,
+    onDeleteExisting,
+    onError
+  }, ref) => {
+    const uid = (0, import_react2.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_runtime2.jsxs)("div", { ref, className: cn("flex flex-col gap-2", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("span", { role: "alert", className: "sr-only", children: "\uD30C\uC77C\uC744 \uC5EC\uAE30\uC5D0 \uB193\uC544\uC8FC\uC138\uC694" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          id: `${uid}-input`,
+          type: "file",
+          tabIndex: -1,
+          "aria-hidden": "true",
+          className: "sr-only",
+          disabled,
+          ...inputProps
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)(
+              AddButton,
+              {
+                onClick: openFilePicker,
+                disabled,
+                current: totalCount,
+                max: maxImages,
+                children: placeholder
+              }
+            ),
+            sortBySequence(existingImages).map((img, index) => /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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);
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImageUploader,
+  imageUploaderVariants
+});
+//# sourceMappingURL=image-uploader.js.map