jy-headless 0.3.13 → 0.3.15

package/README.md

@@ -18,6 +18,12 @@ React용 Headless UI 라이브러리
 
 ---
 
+## 스토리북
+
+[Storybook](https://6795bdd4b570ec0f79b87452-rmxhztnaqg.chromatic.com/?path=/docs/components-autocomplete--docs) 에서
+컴포넌트를 테스트 해 볼 수 있습니다
+___
+
 ## 제공 요소
 
 ### Components

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import type { AutocompleteInputProps, AutocompleteOptionProps, AutocompleteOptionsProps, AutocompleteProps } from './Autocomplete.type';
-declare const Autocomplete: (({ value, onChange, inputValue, onInputChange, disabled, filterFn, children, }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const Autocomplete: (({ value, onChange, inputValue, onInputChange, disabled, filterFn, children, }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element) & {
     Input: ({ onKeyDown, onFocus, onChange, onCompositionStart, onCompositionEnd, ...props }: AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
     Options: ({ items, renderItem, itemHeight, maxVisibleItems, overscan, children, ...props }: AutocompleteOptionsProps) => React.ReactPortal | null;
     Option: ({ value, label, disabled, children, ...props }: AutocompleteOptionProps) => import("react/jsx-runtime").JSX.Element | null;
 };
-export default Autocomplete;

package/dist/Autocomplete/Autocomplete.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createContext, useState, useRef, useId, useMemo, useEffect, useContext } from 'react';
 import usePortal from '../hooks/usePortal.js';
-import TextInput from '../Input/TextInput.js';
+import { TextInput } from '../Input/TextInput.js';
 
 const AutocompleteContext = createContext(null);
 const useAutocomplete = () => {
@@ -290,8 +290,10 @@ const Option = ({ value, label, disabled, children, ...props }) => {
             setActiveIndex(-1);
         }, ...props, children: children ?? label }));
 };
-Object.assign(AutocompleteContainer, {
+const Autocomplete = Object.assign(AutocompleteContainer, {
     Input,
     Options,
     Option,
 });
+
+export { Autocomplete };

package/dist/Input/NumberInput.d.ts

@@ -1,3 +1,2 @@
 import { NumberInputProps } from './NumberInput.type';
-declare const NumberInput: ({ max, useThousandsSeparator, onChange, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
-export default NumberInput;
+export declare const NumberInput: ({ max, useThousandsSeparator, onChange, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Input/NumberInput.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { TextInput } from './TextInput.js';
+
+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 jsx(TextInput, { ...props, onChange: handleChange });
+};
+
+export { NumberInput };

package/dist/Input/TextInput.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { TextInputProps } from './TextInput.type';
-declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
-export default TextInput;
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/Input/TextInput.js

@@ -74,4 +74,4 @@ const TextInput = forwardRef(({ maxLength, onChange, pattern, onValidate, valida
 });
 TextInput.displayName = 'TextInput';
 
-export { TextInput as default };
+export { TextInput };

package/dist/Select/Select.d.ts

@@ -43,9 +43,9 @@ export declare const useSelectContext: () => SelectContextValue;
  *   </Select.Options>
  * </Select>
  */
-declare const Select: (({ value, onChange, multiple, children }: SelectProps) => import("react/jsx-runtime").JSX.Element) & {
+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 default Select;
+export {};

package/dist/Select/Select.js

@@ -167,10 +167,10 @@ const Option = ({ value, disabled, children, ...props }) => {
  *   </Select.Options>
  * </Select>
  */
-Object.assign(SelectContainer, {
+const Select = Object.assign(SelectContainer, {
     Trigger,
     Options,
     Option,
 });
 
-export { useSelectContext };
+export { Select, useSelectContext };

package/dist/cjs/Autocomplete/Autocomplete.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import type { AutocompleteInputProps, AutocompleteOptionProps, AutocompleteOptionsProps, AutocompleteProps } from './Autocomplete.type';
-declare const Autocomplete: (({ value, onChange, inputValue, onInputChange, disabled, filterFn, children, }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const Autocomplete: (({ value, onChange, inputValue, onInputChange, disabled, filterFn, children, }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element) & {
     Input: ({ onKeyDown, onFocus, onChange, onCompositionStart, onCompositionEnd, ...props }: AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
     Options: ({ items, renderItem, itemHeight, maxVisibleItems, overscan, children, ...props }: AutocompleteOptionsProps) => React.ReactPortal | null;
     Option: ({ value, label, disabled, children, ...props }: AutocompleteOptionProps) => import("react/jsx-runtime").JSX.Element | null;
 };
-export default Autocomplete;

package/dist/cjs/Autocomplete/Autocomplete.js

@@ -119,7 +119,7 @@ const Input = ({ onKeyDown, onFocus, onChange, onCompositionStart, onComposition
         setOpen(true);
         setActiveIndex(activeIndex < 0 ? 0 : (activeIndex + delta + filtered.length) % filtered.length);
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextInput, { ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": open, "aria-controls": listboxId, "aria-activedescendant": activeId, disabled: disabled, value: query, onFocus: (e) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextInput.TextInput, { ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": open, "aria-controls": listboxId, "aria-activedescendant": activeId, disabled: disabled, value: query, onFocus: (e) => {
                     if (!disabled) {
                         setOpen(true);
                         setActiveIndex(filtered.length ? 0 : -1);
@@ -292,8 +292,10 @@ const Option = ({ value, label, disabled, children, ...props }) => {
             setActiveIndex(-1);
         }, ...props, children: children ?? label }));
 };
-Object.assign(AutocompleteContainer, {
+const Autocomplete = Object.assign(AutocompleteContainer, {
     Input,
     Options,
     Option,
 });
+
+exports.Autocomplete = Autocomplete;

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

@@ -1,3 +1,2 @@
 import { NumberInputProps } from './NumberInput.type';
-declare const NumberInput: ({ max, useThousandsSeparator, onChange, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
-export default NumberInput;
+export declare const NumberInput: ({ max, useThousandsSeparator, onChange, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/Input/NumberInput.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var TextInput = require('./TextInput.js');
+
+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/TextInput.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { TextInputProps } from './TextInput.type';
-declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
-export default TextInput;
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/Input/TextInput.js

@@ -76,4 +76,4 @@ const TextInput = react.forwardRef(({ maxLength, onChange, pattern, onValidate,
 });
 TextInput.displayName = 'TextInput';
 
-module.exports = TextInput;
+exports.TextInput = TextInput;

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

@@ -43,9 +43,9 @@ export declare const useSelectContext: () => SelectContextValue;
  *   </Select.Options>
  * </Select>
  */
-declare const Select: (({ value, onChange, multiple, children }: SelectProps) => import("react/jsx-runtime").JSX.Element) & {
+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 default Select;
+export {};

package/dist/cjs/Select/Select.js

@@ -169,10 +169,11 @@ const Option = ({ value, disabled, children, ...props }) => {
  *   </Select.Options>
  * </Select>
  */
-Object.assign(SelectContainer, {
+const Select = Object.assign(SelectContainer, {
     Trigger,
     Options,
     Option,
 });
 
+exports.Select = Select;
 exports.useSelectContext = useSelectContext;

package/dist/cjs/index.js

@@ -6,13 +6,18 @@ require('react-dom');
 var useDebounce = require('./hooks/useDebounce.js');
 var useThrottle = require('./hooks/useThrottle.js');
 var Tooltip = require('./Tooltip/Tooltip.js');
-require('./Input/TextInput.js');
+var NumberInput = require('./Input/NumberInput.js');
+var TextInput = require('./Input/TextInput.js');
 var Select = require('./Select/Select.js');
-require('./Autocomplete/Autocomplete.js');
+var Autocomplete = require('./Autocomplete/Autocomplete.js');
 
 
 
 exports.useDebounce = useDebounce.useDebounce;
 exports.useThrottle = useThrottle.useThrottle;
 exports.Tooltip = Tooltip.Tooltip;
+exports.NumberInput = NumberInput.NumberInput;
+exports.TextInput = TextInput.TextInput;
+exports.Select = Select.Select;
 exports.useSelectContext = Select.useSelectContext;
+exports.Autocomplete = Autocomplete.Autocomplete;

package/dist/index.js

@@ -4,6 +4,7 @@ import 'react-dom';
 export { useDebounce } from './hooks/useDebounce.js';
 export { useThrottle } from './hooks/useThrottle.js';
 export { Tooltip } from './Tooltip/Tooltip.js';
-import './Input/TextInput.js';
-export { useSelectContext } from './Select/Select.js';
-import './Autocomplete/Autocomplete.js';
+export { NumberInput } from './Input/NumberInput.js';
+export { TextInput } from './Input/TextInput.js';
+export { Select, useSelectContext } from './Select/Select.js';
+export { Autocomplete } from './Autocomplete/Autocomplete.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jy-headless",
-  "version": "0.3.13",
+  "version": "0.3.15",
   "description": "A lightweight and customizable headless UI library for React components",
   "main": "dist/index.js",
   "module": "dist/index.js",