jy-headless 0.2.29 → 0.2.31

package/buttons/index.d.ts

@@ -1 +1 @@
-export { default } from './Button/Button';
+export * as Button from './Button/Button';

package/cjs/buttons/index.d.ts

@@ -1 +1 @@
-export { default } from './Button/Button';
+export * as Button from './Button/Button';

package/cjs/index.js

@@ -1,11 +1,23 @@
 'use strict';
 
-require('react/jsx-runtime');
+var Button = require('./buttons/Button/Button.js');
+var Input = require('./inputs/Input/Input.js');
+var ImageInput = require('./inputs/ImageInput/ImageInput.js');
+var Dropdown = require('./selectors/Dropdown/Dropdown.js');
 require('react');
-require('./selectors/Dropdown/Dropdown.js');
 var useDropdown = require('./hooks/useDropdown.js');
 
+function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, default: e }); }
 
+var Button__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Button);
+var Input__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Input);
+var Dropdown__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Dropdown);
 
+
+
+exports.Button = Button__namespace;
+exports.Input = Input__namespace;
+exports.ImageInput = ImageInput;
+exports.Dropdown = Dropdown__namespace;
 exports.DropdownContext = useDropdown.DropdownContext;
 exports.useDropdownContext = useDropdown.useDropdownContext;

package/cjs/inputs/ImageInput/ImageInput.d.ts

@@ -0,0 +1,7 @@
+import { ImageAttribute, ImageInputContextData, ImageInputProps, LabelAttribute } from '../../types';
+export declare const ImageInputContext: import("react").Context<ImageInputContextData | null>;
+declare const ImageInput: (({ accepts, id, value, draggable, onChange, children, ...props }: ImageInputProps) => import("react/jsx-runtime").JSX.Element) & {
+    Preview: ({ src: defaultSrc, ...props }: ImageAttribute) => import("react/jsx-runtime").JSX.Element;
+    Uploader: ({ children, ...props }: LabelAttribute) => import("react/jsx-runtime").JSX.Element;
+};
+export default ImageInput;

package/cjs/inputs/ImageInput/ImageInput.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const ImageInputContext = react.createContext(null);
+const getAccepts = (accepts) => {
+    return accepts && accepts.length > 0 ? accepts.map((it) => `image/${it}`).join() : 'image/*';
+};
+const ImageInputRoot = ({ accepts, id, value, draggable = false, onChange, children, ...props }) => {
+    const [previewUrl, setPreviewUrl] = react.useState('');
+    const [dragOver, setDragOver] = react.useState(false);
+    const inputId = [id, 'image-input'].join('-');
+    react.useEffect(() => {
+        if (!value)
+            setPreviewUrl('');
+    }, [value]);
+    const setImagePreview = (file) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            setPreviewUrl(e.target.result);
+        };
+        reader.readAsDataURL(file);
+    };
+    const onImageChange = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        setImagePreview(file);
+        onChange?.(file);
+    };
+    const onDrop = (e) => {
+        if (!draggable)
+            return;
+        e.preventDefault();
+        setDragOver(false);
+        const file = e.dataTransfer.files?.[0];
+        if (file && file.type.startsWith('image/')) {
+            setImagePreview(file);
+            onChange?.(file);
+        }
+    };
+    const onDragOver = (e) => {
+        if (!draggable)
+            return;
+        e.preventDefault();
+        setDragOver(true);
+    };
+    const onDragLeave = () => setDragOver(false);
+    return (jsxRuntime.jsxs("span", { ...props, onDrop: onDrop, onDragOver: onDragOver, onDragEnter: onDragOver, onDragLeave: onDragLeave, children: [jsxRuntime.jsx("input", { "data-testid": inputId, id: inputId, type: 'file', accept: getAccepts(accepts ?? []), onChange: onImageChange, style: { display: 'none' } }), jsxRuntime.jsx(ImageInputContext.Provider, { value: { id: inputId, previewUrl, dragOver }, children: children })] }));
+};
+const ImageInputUploader = ({ children, ...props }) => {
+    const context = react.useContext(ImageInputContext);
+    if (!context) {
+        throw new Error('ImageInput.* 컴포넌트는 ImageInput 내에서만 사용해야 합니다.');
+    }
+    const { id } = context;
+    return (jsxRuntime.jsx("label", { htmlFor: id ?? '', ...props, children: children }));
+};
+const ImageInputPreview = ({ src: defaultSrc, ...props }) => {
+    const context = react.useContext(ImageInputContext);
+    if (!context) {
+        throw new Error('ImageInput.* 컴포넌트는 ImageInput 내에서만 사용해야 합니다.');
+    }
+    const { previewUrl } = context;
+    return jsxRuntime.jsx("img", { ...props, src: previewUrl ?? defaultSrc ?? '' });
+};
+const ImageInput = Object.assign(ImageInputRoot, {
+    Preview: ImageInputPreview,
+    Uploader: ImageInputUploader,
+});
+
+exports.ImageInputContext = ImageInputContext;
+exports.default = ImageInput;

package/cjs/inputs/index.d.ts

@@ -1 +1,2 @@
-export { default } from './Input/Input';
+export * as Input from './Input/Input';
+export * as ImageInput from './ImageInput/ImageInput';

package/cjs/selectors/Dropdown/Dropdown.js

@@ -45,9 +45,11 @@ const DropdownOption = ({ children, value, ...props }) => {
     const { select } = useDropdown.useDropdownContext();
     return (jsxRuntime.jsx("div", { role: "option", onClick: () => select(value), ...props, children: children }));
 };
-Object.assign(DropdownRoot, {
+const Dropdown = Object.assign(DropdownRoot, {
     Button: DropdownButton,
     Options: DropdownOptions,
     Option: DropdownOption,
     Viewer: DropdownViewer,
 });
+
+module.exports = Dropdown;

package/cjs/selectors/index.d.ts

@@ -1 +1 @@
-export { default } from './Dropdown/Dropdown';
+export * as Dropdown from './Dropdown/Dropdown';

package/cjs/types/common/index.d.ts

@@ -1,7 +1,11 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ImgHTMLAttributes } from 'react';
 export interface DivAttribute<T> extends HTMLAttributes<HTMLDivElement> {
     value?: T;
 }
 export interface SpanAttribute<T> extends HTMLAttributes<HTMLSpanElement> {
     value?: T;
 }
+export interface LabelAttribute extends HTMLAttributes<HTMLLabelElement> {
+}
+export interface ImageAttribute extends ImgHTMLAttributes<HTMLImageElement> {
+}

package/cjs/types/inputs/index.d.ts

@@ -7,3 +7,15 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     useThrottle?: boolean;
     timeout?: number;
 }
+export interface ImageInputContextData {
+    id?: string;
+    previewUrl?: string;
+    dragOver?: boolean;
+}
+export type ImageType = 'jpeg' | 'png' | 'gif' | 'svg' | 'bmp' | 'webp' | 'heic' | 'heif' | 'tiff' | 'x-icon' | 'vn';
+export interface ImageInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    accepts?: ImageType[];
+    draggable?: boolean;
+    onChange?: (file: File) => void;
+    value?: File;
+}

package/index.js

@@ -1,4 +1,10 @@
-import 'react/jsx-runtime';
+import * as Button from './buttons/Button/Button.js';
+export { Button };
+import * as Input from './inputs/Input/Input.js';
+export { Input };
+import * as ImageInput from './inputs/ImageInput/ImageInput.js';
+export { ImageInput };
+import * as Dropdown from './selectors/Dropdown/Dropdown.js';
+export { Dropdown };
 import 'react';
-import './selectors/Dropdown/Dropdown.js';
 export { DropdownContext, useDropdownContext } from './hooks/useDropdown.js';

package/inputs/ImageInput/ImageInput.d.ts

@@ -0,0 +1,7 @@
+import { ImageAttribute, ImageInputContextData, ImageInputProps, LabelAttribute } from '../../types';
+export declare const ImageInputContext: import("react").Context<ImageInputContextData | null>;
+declare const ImageInput: (({ accepts, id, value, draggable, onChange, children, ...props }: ImageInputProps) => import("react/jsx-runtime").JSX.Element) & {
+    Preview: ({ src: defaultSrc, ...props }: ImageAttribute) => import("react/jsx-runtime").JSX.Element;
+    Uploader: ({ children, ...props }: LabelAttribute) => import("react/jsx-runtime").JSX.Element;
+};
+export default ImageInput;

package/inputs/ImageInput/ImageInput.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useContext } from 'react';
+
+const ImageInputContext = createContext(null);
+const getAccepts = (accepts) => {
+    return accepts && accepts.length > 0 ? accepts.map((it) => `image/${it}`).join() : 'image/*';
+};
+const ImageInputRoot = ({ accepts, id, value, draggable = false, onChange, children, ...props }) => {
+    const [previewUrl, setPreviewUrl] = useState('');
+    const [dragOver, setDragOver] = useState(false);
+    const inputId = [id, 'image-input'].join('-');
+    useEffect(() => {
+        if (!value)
+            setPreviewUrl('');
+    }, [value]);
+    const setImagePreview = (file) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            setPreviewUrl(e.target.result);
+        };
+        reader.readAsDataURL(file);
+    };
+    const onImageChange = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        setImagePreview(file);
+        onChange?.(file);
+    };
+    const onDrop = (e) => {
+        if (!draggable)
+            return;
+        e.preventDefault();
+        setDragOver(false);
+        const file = e.dataTransfer.files?.[0];
+        if (file && file.type.startsWith('image/')) {
+            setImagePreview(file);
+            onChange?.(file);
+        }
+    };
+    const onDragOver = (e) => {
+        if (!draggable)
+            return;
+        e.preventDefault();
+        setDragOver(true);
+    };
+    const onDragLeave = () => setDragOver(false);
+    return (jsxs("span", { ...props, onDrop: onDrop, onDragOver: onDragOver, onDragEnter: onDragOver, onDragLeave: onDragLeave, children: [jsx("input", { "data-testid": inputId, id: inputId, type: 'file', accept: getAccepts(accepts ?? []), onChange: onImageChange, style: { display: 'none' } }), jsx(ImageInputContext.Provider, { value: { id: inputId, previewUrl, dragOver }, children: children })] }));
+};
+const ImageInputUploader = ({ children, ...props }) => {
+    const context = useContext(ImageInputContext);
+    if (!context) {
+        throw new Error('ImageInput.* 컴포넌트는 ImageInput 내에서만 사용해야 합니다.');
+    }
+    const { id } = context;
+    return (jsx("label", { htmlFor: id ?? '', ...props, children: children }));
+};
+const ImageInputPreview = ({ src: defaultSrc, ...props }) => {
+    const context = useContext(ImageInputContext);
+    if (!context) {
+        throw new Error('ImageInput.* 컴포넌트는 ImageInput 내에서만 사용해야 합니다.');
+    }
+    const { previewUrl } = context;
+    return jsx("img", { ...props, src: previewUrl ?? defaultSrc ?? '' });
+};
+const ImageInput = Object.assign(ImageInputRoot, {
+    Preview: ImageInputPreview,
+    Uploader: ImageInputUploader,
+});
+
+export { ImageInputContext, ImageInput as default };

package/inputs/index.d.ts

@@ -1 +1,2 @@
-export { default } from './Input/Input';
+export * as Input from './Input/Input';
+export * as ImageInput from './ImageInput/ImageInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jy-headless",
-  "version": "0.2.29",
+  "version": "0.2.31",
   "description": "A lightweight and customizable headless UI library for React components",
   "license": "MIT",
   "repository": "https://github.com/yCZwIqY/jy-headless",
@@ -43,6 +43,11 @@
       "require": "./cjs/index.js",
       "types": "./index.d.ts"
     },
+    "./ImageInput": {
+      "import": "./inputs/ImageInput/ImageInput.js",
+      "require": "./cjs/inputs/ImageInput/ImageInput.js",
+      "types": "./inputs/ImageInput/ImageInput.d.ts"
+    },
     "./Input": {
       "import": "./inputs/Input/Input.js",
       "require": "./cjs/inputs/Input/Input.js",

package/selectors/Dropdown/Dropdown.js

@@ -43,9 +43,11 @@ const DropdownOption = ({ children, value, ...props }) => {
     const { select } = useDropdownContext();
     return (jsx("div", { role: "option", onClick: () => select(value), ...props, children: children }));
 };
-Object.assign(DropdownRoot, {
+const Dropdown = Object.assign(DropdownRoot, {
     Button: DropdownButton,
     Options: DropdownOptions,
     Option: DropdownOption,
     Viewer: DropdownViewer,
 });
+
+export { Dropdown as default };

package/selectors/index.d.ts

@@ -1 +1 @@
-export { default } from './Dropdown/Dropdown';
+export * as Dropdown from './Dropdown/Dropdown';

package/types/common/index.d.ts

@@ -1,7 +1,11 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ImgHTMLAttributes } from 'react';
 export interface DivAttribute<T> extends HTMLAttributes<HTMLDivElement> {
     value?: T;
 }
 export interface SpanAttribute<T> extends HTMLAttributes<HTMLSpanElement> {
     value?: T;
 }
+export interface LabelAttribute extends HTMLAttributes<HTMLLabelElement> {
+}
+export interface ImageAttribute extends ImgHTMLAttributes<HTMLImageElement> {
+}

package/types/inputs/index.d.ts

@@ -7,3 +7,15 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     useThrottle?: boolean;
     timeout?: number;
 }
+export interface ImageInputContextData {
+    id?: string;
+    previewUrl?: string;
+    dragOver?: boolean;
+}
+export type ImageType = 'jpeg' | 'png' | 'gif' | 'svg' | 'bmp' | 'webp' | 'heic' | 'heif' | 'tiff' | 'x-icon' | 'vn';
+export interface ImageInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    accepts?: ImageType[];
+    draggable?: boolean;
+    onChange?: (file: File) => void;
+    value?: File;
+}

package/version.txt

@@ -1 +1 @@
-0.2.29
+0.2.31

package/cjs/selectors/Dropdown/DropdownDefaultTrigger.d.ts

@@ -1,4 +0,0 @@
-declare const DropdownDefaultTrigger: ({ value }: {
-    value: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export default DropdownDefaultTrigger;

package/selectors/Dropdown/DropdownDefaultTrigger.d.ts

@@ -1,4 +0,0 @@
-declare const DropdownDefaultTrigger: ({ value }: {
-    value: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export default DropdownDefaultTrigger;