jy-headless 0.3.16 → 0.3.17

package/dist/cjs/Input/NumberInput.d.ts

@@ -1,55 +0,0 @@
-import { NumberInputProps } from './NumberInput.type';
-/**
- * 숫자 전용 Input 컴포넌트
- *
- * - 숫자만 입력 가능 (콤마는 내부적으로 제거 후 처리)
- * - max: 최대값 제한 (초과 시 자동으로 max로 보정)
- * - useThousandsSeparator: 천단위 콤마 자동 포맷팅
- * - 실제 onChange로 넘어가는 값은:
- *   - useThousandsSeparator=true → 콤마가 포함된 문자열
- *   - false → 순수 숫자 문자열
- *
- * @example
- * // 1) 기본 숫자 입력
- * <NumberInput
- *   placeholder="숫자 입력"
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 2) 최대값 제한
- * <NumberInput
- *   max={100}
- *   placeholder="최대 100"
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 3) 천단위 콤마 포맷
- * <NumberInput
- *   useThousandsSeparator
- *   placeholder="금액 입력"
- *   onChange={(e) => console.log(e.target.value)} // 10000 → "10,000"
- * />
- *
- * @example
- * // 4) max + 천단위 콤마 같이 사용
- * <NumberInput
- *   max={1000000}
- *   useThousandsSeparator
- *   placeholder="최대 1,000,000"
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 5) React Hook Form 등과 함께 사용할 때
- * // - 저장 시에는 콤마 제거 후 숫자로 변환하는 게 일반적
- * <NumberInput
- *   useThousandsSeparator
- *   onChange={(e) => {
- *     const numeric = Number(e.target.value.replace(/,/g, ''));
- *     console.log(numeric);
- *   }}
- * />
- */
-export declare const NumberInput: ({ max, useThousandsSeparator, onChange, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/Input/NumberInput.js

@@ -1,93 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var TextInput = require('./TextInput.js');
-
-/**
- * 숫자 전용 Input 컴포넌트
- *
- * - 숫자만 입력 가능 (콤마는 내부적으로 제거 후 처리)
- * - max: 최대값 제한 (초과 시 자동으로 max로 보정)
- * - useThousandsSeparator: 천단위 콤마 자동 포맷팅
- * - 실제 onChange로 넘어가는 값은:
- *   - useThousandsSeparator=true → 콤마가 포함된 문자열
- *   - false → 순수 숫자 문자열
- *
- * @example
- * // 1) 기본 숫자 입력
- * <NumberInput
- *   placeholder="숫자 입력"
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 2) 최대값 제한
- * <NumberInput
- *   max={100}
- *   placeholder="최대 100"
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 3) 천단위 콤마 포맷
- * <NumberInput
- *   useThousandsSeparator
- *   placeholder="금액 입력"
- *   onChange={(e) => console.log(e.target.value)} // 10000 → "10,000"
- * />
- *
- * @example
- * // 4) max + 천단위 콤마 같이 사용
- * <NumberInput
- *   max={1000000}
- *   useThousandsSeparator
- *   placeholder="최대 1,000,000"
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 5) React Hook Form 등과 함께 사용할 때
- * // - 저장 시에는 콤마 제거 후 숫자로 변환하는 게 일반적
- * <NumberInput
- *   useThousandsSeparator
- *   onChange={(e) => {
- *     const numeric = Number(e.target.value.replace(/,/g, ''));
- *     console.log(numeric);
- *   }}
- * />
- */
-const NumberInput = ({ max, useThousandsSeparator, onChange, ...props }) => {
-    const handleChange = (e) => {
-        const rawValue = e.target.value.replace(/,/g, '');
-        if (rawValue && isNaN(Number(rawValue)))
-            return;
-        let finalValue = rawValue;
-        if (max && Number(rawValue) > max) {
-            finalValue = String(max);
-        }
-        if (useThousandsSeparator && finalValue) {
-            const formattedValue = Number(finalValue).toLocaleString();
-            const syntheticEvent = {
-                ...e,
-                target: {
-                    ...e.target,
-                    value: formattedValue,
-                },
-            };
-            onChange?.(syntheticEvent);
-        }
-        else {
-            const syntheticEvent = {
-                ...e,
-                target: {
-                    ...e.target,
-                    value: finalValue,
-                },
-            };
-            onChange?.(syntheticEvent);
-        }
-    };
-    return jsxRuntime.jsx(TextInput.TextInput, { ...props, onChange: handleChange });
-};
-
-exports.NumberInput = NumberInput;

package/dist/cjs/Input/NumberInput.type.d.ts

@@ -1,31 +0,0 @@
-import { TextInputProps } from './TextInput.type';
-/**
- * 숫자 전용 입력 컴포넌트 props
- *
- * TextInput을 기반으로 하며,
- * 숫자 입력에 특화된 기능을 제공합니다.
- */
-export interface NumberInputProps extends TextInputProps {
-    /**
-     * 최대 허용 값
-     *
-     * 초과 시:
-     * - 입력 제한
-     * - 또는 validation 에러 처리 가능
-     *
-     * @example
-     * max={100}
-     */
-    max?: number;
-    /**
-     * 천 단위 구분자 사용 여부
-     *
-     * true일 경우:
-     * 10000 → 10,000
-     *
-     * 내부 값은 parse 단계에서 콤마 제거 권장
-     *
-     * @default false
-     */
-    useThousandsSeparator?: boolean;
-}

package/dist/cjs/Input/TextInput.d.ts

@@ -1,98 +0,0 @@
-import React from 'react';
-import { TextInputProps } from './TextInput.type';
-/**
- * 범용 TextInput 컴포넌트
- *
- * - maxLength: (조합 입력 중이 아닐 때) 최대 길이 제한
- * - pattern: 정규식 문자열(매 입력마다 test 통과해야 반영)
- * - disallowPattern: "허용" 정규식(현재 구현은 test가 false면 return)
- * - validator: 값 검증 (boolean | error message string 반환 가능)
- * - trimWhitespace: blur 시 앞뒤 공백 제거 후 onChange 호출
- * - debounceMs / onDebouncedChange: 디바운스된 값 콜백
- * - throttleMs / onThrottledChange: 스로틀된 값 콜백
- *
- * @example
- * // 1) 기본 사용
- * <TextInput
- *   placeholder="이름을 입력하세요"
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 2) maxLength + trimWhitespace (blur 시 공백 제거)
- * <TextInput
- *   maxLength={20}
- *   trimWhitespace
- *   placeholder="최대 20자, blur 시 공백 제거"
- *   onChange={(e) => console.log('change:', e.target.value)}
- * />
- *
- * @example
- * // 3) pattern(문자열)로 숫자만 허용
- * // - 입력값이 정규식에 매번 매칭되어야 반영됨
- * <TextInput
- *   pattern="^[0-9]*$"
- *   inputMode="numeric"
- *   placeholder="숫자만 입력"
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 4) disallowPattern(정규식)로 "허용 규칙" 적용 (현재 구현 기준)
- * // - test가 false면 반영되지 않음
- * // - 예: 영문/숫자/언더스코어만 허용
- * <TextInput
- *   disallowPattern={/^[a-zA-Z0-9_]*$/}
- *   placeholder="영문/숫자/_ 만"
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 5) validator + onValidate
- * // - validator가 false면 onChange가 호출되지 않음
- * // - 문자열 반환 시 그 문자열이 error로 넘어감
- * <TextInput
- *   placeholder="이메일"
- *   validator={(v) => {
- *     if (!v) return true; // 빈 값은 통과(원하면 false로 바꿔도 됨)
- *     const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
- *     return ok || '이메일 형식이 아니에요';
- *   }}
- *   onValidate={(isValid, error) => {
- *     console.log('valid:', isValid, 'error:', error);
- *   }}
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 6) debounce: 입력은 즉시 반영(onChange), 서버검색/자동완성은 디바운스로 처리
- * <TextInput
- *   placeholder="검색어 입력"
- *   debounceMs={300}
- *   onDebouncedChange={(value) => {
- *     // fetch(`/api/search?q=${encodeURIComponent(value)}`)
- *     console.log('debounced:', value);
- *   }}
- *   onChange={(e) => console.log('immediate:', e.target.value)}
- * />
- *
- * @example
- * // 7) throttle: 스크롤/리사이즈처럼 자주 쏘는 이벤트에 유용한 패턴
- * <TextInput
- *   placeholder="입력값 로깅(최대 200ms에 1번)"
- *   throttleMs={200}
- *   onThrottledChange={(value) => console.log('throttled:', value)}
- *   onChange={(e) => console.log('immediate:', e.target.value)}
- * />
- *
- * @example
- * // 8) IME(한글/일본어) 조합 이벤트 처리 예시
- * <TextInput
- *   placeholder="한글 입력"
- *   maxLength={10}
- *   onCompositionStart={() => console.log('compose start')}
- *   onCompositionEnd={() => console.log('compose end')}
- *   onChange={(e) => console.log(e.target.value)}
- * />
- */
-export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/Input/TextInput.js

@@ -1,174 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('react-dom');
-var useDebounce = require('../hooks/useDebounce.js');
-var useThrottle = require('../hooks/useThrottle.js');
-
-function mergeRefs(...refs) {
-    return (value) => {
-        refs.forEach((ref) => {
-            if (!ref)
-                return;
-            if (typeof ref === 'function')
-                ref(value);
-            else
-                ref.current = value;
-        });
-    };
-}
-/**
- * 범용 TextInput 컴포넌트
- *
- * - maxLength: (조합 입력 중이 아닐 때) 최대 길이 제한
- * - pattern: 정규식 문자열(매 입력마다 test 통과해야 반영)
- * - disallowPattern: "허용" 정규식(현재 구현은 test가 false면 return)
- * - validator: 값 검증 (boolean | error message string 반환 가능)
- * - trimWhitespace: blur 시 앞뒤 공백 제거 후 onChange 호출
- * - debounceMs / onDebouncedChange: 디바운스된 값 콜백
- * - throttleMs / onThrottledChange: 스로틀된 값 콜백
- *
- * @example
- * // 1) 기본 사용
- * <TextInput
- *   placeholder="이름을 입력하세요"
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 2) maxLength + trimWhitespace (blur 시 공백 제거)
- * <TextInput
- *   maxLength={20}
- *   trimWhitespace
- *   placeholder="최대 20자, blur 시 공백 제거"
- *   onChange={(e) => console.log('change:', e.target.value)}
- * />
- *
- * @example
- * // 3) pattern(문자열)로 숫자만 허용
- * // - 입력값이 정규식에 매번 매칭되어야 반영됨
- * <TextInput
- *   pattern="^[0-9]*$"
- *   inputMode="numeric"
- *   placeholder="숫자만 입력"
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 4) disallowPattern(정규식)로 "허용 규칙" 적용 (현재 구현 기준)
- * // - test가 false면 반영되지 않음
- * // - 예: 영문/숫자/언더스코어만 허용
- * <TextInput
- *   disallowPattern={/^[a-zA-Z0-9_]*$/}
- *   placeholder="영문/숫자/_ 만"
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 5) validator + onValidate
- * // - validator가 false면 onChange가 호출되지 않음
- * // - 문자열 반환 시 그 문자열이 error로 넘어감
- * <TextInput
- *   placeholder="이메일"
- *   validator={(v) => {
- *     if (!v) return true; // 빈 값은 통과(원하면 false로 바꿔도 됨)
- *     const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
- *     return ok || '이메일 형식이 아니에요';
- *   }}
- *   onValidate={(isValid, error) => {
- *     console.log('valid:', isValid, 'error:', error);
- *   }}
- *   onChange={(e) => console.log(e.target.value)}
- * />
- *
- * @example
- * // 6) debounce: 입력은 즉시 반영(onChange), 서버검색/자동완성은 디바운스로 처리
- * <TextInput
- *   placeholder="검색어 입력"
- *   debounceMs={300}
- *   onDebouncedChange={(value) => {
- *     // fetch(`/api/search?q=${encodeURIComponent(value)}`)
- *     console.log('debounced:', value);
- *   }}
- *   onChange={(e) => console.log('immediate:', e.target.value)}
- * />
- *
- * @example
- * // 7) throttle: 스크롤/리사이즈처럼 자주 쏘는 이벤트에 유용한 패턴
- * <TextInput
- *   placeholder="입력값 로깅(최대 200ms에 1번)"
- *   throttleMs={200}
- *   onThrottledChange={(value) => console.log('throttled:', value)}
- *   onChange={(e) => console.log('immediate:', e.target.value)}
- * />
- *
- * @example
- * // 8) IME(한글/일본어) 조합 이벤트 처리 예시
- * <TextInput
- *   placeholder="한글 입력"
- *   maxLength={10}
- *   onCompositionStart={() => console.log('compose start')}
- *   onCompositionEnd={() => console.log('compose end')}
- *   onChange={(e) => console.log(e.target.value)}
- * />
- */
-const TextInput = react.forwardRef(({ maxLength, onChange, pattern, onValidate, validator, onCompositionStart, onCompositionEnd, disallowPattern, trimWhitespace, debounceMs, throttleMs, onDebouncedChange, onThrottledChange, onBlur, ...props }, ref) => {
-    const [isComposing, setIsComposing] = react.useState(false);
-    const innerRef = react.useRef(null);
-    const combinedRef = react.useMemo(() => mergeRefs(innerRef, ref), [ref]);
-    const debouncedChange = useDebounce.useDebounce((value) => onDebouncedChange?.(value), debounceMs || 0);
-    const throttledChange = useThrottle.useThrottle((value) => onThrottledChange?.(value), throttleMs || 0);
-    const handleCompositionStart = (e) => {
-        setIsComposing(true);
-        onCompositionStart?.(e);
-    };
-    const handleCompositionEnd = (e) => {
-        setIsComposing(false);
-        onCompositionEnd?.(e);
-    };
-    const handleChange = (e) => {
-        if (maxLength && !isComposing && e.target.value.length > maxLength)
-            return;
-        if (pattern) {
-            const regex = new RegExp(pattern);
-            if (!regex.test(e.target.value))
-                return;
-        }
-        if (disallowPattern && !disallowPattern.test(e.target.value))
-            return;
-        if (debounceMs && onDebouncedChange)
-            debouncedChange(e.target.value);
-        if (throttleMs && onThrottledChange)
-            throttledChange(e.target.value);
-        if (validator) {
-            const result = validator(e.target.value);
-            const isValid = typeof result === 'boolean' ? result : true;
-            const error = typeof result === 'string' ? result : undefined;
-            onValidate?.(isValid, error);
-            if (!isValid)
-                return;
-        }
-        onChange?.(e);
-    };
-    const handleBlur = (e) => {
-        if (trimWhitespace && innerRef.current) {
-            const trimmedValue = e.target.value.trim();
-            if (trimmedValue !== e.target.value) {
-                innerRef.current.value = trimmedValue;
-                const syntheticEvent = {
-                    ...e,
-                    target: innerRef.current,
-                    currentTarget: innerRef.current,
-                    type: 'change',
-                };
-                onChange?.(syntheticEvent);
-            }
-        }
-        onBlur?.(e);
-    };
-    return (jsxRuntime.jsx("input", { ref: combinedRef, ...props, onBlur: handleBlur, onChange: handleChange, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }));
-});
-TextInput.displayName = 'TextInput';
-
-exports.TextInput = TextInput;

package/dist/cjs/Input/TextInput.type.d.ts

@@ -1,95 +0,0 @@
-import { ChangeEvent, CompositionEvent, InputHTMLAttributes } from 'react';
-/**
- * 고급 기능을 제공하는 TextInput 컴포넌트 props
- *
- * 기능:
- * - validation
- * - formatting/parsing
- * - debounce/throttle
- * - IME(한글 입력) 대응
- * - 공백 제어
- */
-export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
-    /**
-     * 입력값 검증 함수
-     *
-     * return:
-     * - true → 유효
-     * - false → 유효하지 않음
-     * - string → 에러 메시지
-     *
-     * @example
-     * validator={(v) => v.length > 3 || "최소 3자 이상"}
-     */
-    validator?: (value: string) => boolean | string;
-    /**
-     * 검증 결과 콜백
-     */
-    onValidate?: (isValid: boolean, error?: string) => void;
-    /**
-     * 표시용 값 포맷팅
-     *
-     * ex) 숫자 천단위 콤마
-     */
-    format?: (value: string) => string;
-    /**
-     * 실제 값으로 변환
-     *
-     * ex) 콤마 제거
-     */
-    parse?: (value: string) => string;
-    /**
-     * 입력을 막을 패턴
-     *
-     * @example 숫자만 허용
-     * disallowPattern={/[^0-9]/g}
-     */
-    disallowPattern?: RegExp;
-    /**
-     * 공백 제거 방식
-     *
-     * - true → 전체 trim
-     * - 'leading' → 앞 공백만
-     * - 'trailing' → 뒤 공백만
-     * - 'both' → 양쪽
-     */
-    trimWhitespace?: boolean | 'leading' | 'trailing' | 'both';
-    /**
-     * IME 입력 시작 이벤트
-     *
-     * 한글/중국어 입력 시 중요
-     */
-    onCompositionStart?: (e: CompositionEvent<HTMLInputElement>) => void;
-    /**
-     * IME 입력 종료 이벤트
-     */
-    onCompositionEnd?: (e: CompositionEvent<HTMLInputElement>) => void;
-    /**
-     * IME 입력 중 이벤트
-     */
-    onCompositionUpdate?: (e: CompositionEvent<HTMLInputElement>) => void;
-    /**
-     * debounce 지연(ms)
-     *
-     * @example 300
-     */
-    debounceMs?: number;
-    /**
-     * throttle 지연(ms)
-     */
-    throttleMs?: number;
-    /**
-     * debounce 후 값 변경 콜백
-     */
-    onDebouncedChange?: (value: string) => void;
-    /**
-     * throttle 후 값 변경 콜백
-     */
-    onThrottledChange?: (value: string) => void;
-    /**
-     * 기본 onChange override
-     *
-     * ⚠️ 일반 HTML onChange와 동일
-     */
-    onChange?: (value: ChangeEvent<HTMLInputElement>) => void;
-}

package/dist/cjs/Input/index.d.ts

@@ -1,4 +0,0 @@
-export * from './NumberInput';
-export * from './TextInput';
-export * from './TextInput.type';
-export * from './NumberInput.type';

package/dist/cjs/Select/Select.d.ts

@@ -1,51 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { SelectOptionProps, SelectOptionsProps, SelectProps, SelectTriggerProps } from './Select.type';
-/**
- * Select 내부 상태 공유용 Context
- */
-type SelectContextValue = {
-    /** 드롭다운 열림 여부 */
-    open: boolean;
-    /** 드롭다운 열기/닫기 */
-    setOpen: (v: boolean) => void;
-    /** 현재 선택된 값들 */
-    value: string[];
-    /** 값 토글 */
-    toggleValue: (v: string) => void;
-    /** 다중 선택 여부 */
-    multiple: boolean;
-    /** Trigger DOM ref */
-    triggerRef: React.RefObject<HTMLDivElement | null>;
-    /** Option DOM refs 목록 */
-    optionRefs: React.MutableRefObject<HTMLDivElement[]>;
-    /** 현재 포커스된 옵션 index */
-    focusedIndex: number | null;
-    /** 포커스 index 설정 */
-    setFocusedIndex: Dispatch<SetStateAction<number>>;
-};
-/**
- * Select Context 접근 훅
- *
- * @throws Select 외부에서 사용할 경우 에러
- */
-export declare const useSelectContext: () => SelectContextValue;
-/**
- * Compound Select 컴포넌트
- *
- * 사용 예시:
- *
- * @example
- * <Select value={value} onChange={setValue}>
- *   <Select.Trigger>열기</Select.Trigger>
- *   <Select.Options>
- *     <Select.Option value="a">A</Select.Option>
- *     <Select.Option value="b">B</Select.Option>
- *   </Select.Options>
- * </Select>
- */
-export declare const Select: (({ value, onChange, multiple, children }: SelectProps) => import("react/jsx-runtime").JSX.Element) & {
-    Trigger: (props: SelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
-    Options: ({ children, ...props }: SelectOptionsProps) => import("react").ReactPortal | null;
-    Option: ({ value, disabled, children, ...props }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
-};
-export {};