jy-headless 0.0.24 → 0.0.27

package/dist/components/icons/DownArrowIcon.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from './index';
+import React from 'react';
+declare const DownArrowIcon: ({ color, size, bgColor, fill, }: IconProps) => React.JSX.Element;
+export default DownArrowIcon;

package/dist/components/icons/UpArrowIcon.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from './index';
+import React from 'react';
+declare const UpArrowIcon: ({ color, size, bgColor, fill, }: IconProps) => React.JSX.Element;
+export default UpArrowIcon;

package/dist/components/input/Input.d.ts

@@ -1,6 +1,6 @@
 import React, { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-    clearable?: boolean;
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    showLimit?: boolean;
     containerStyle?: CSSProperties;
     containerClassName?: string;
     prefixElement?: ReactNode;

package/dist/components/input/NumberInput.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { InputProps } from './Input';
+interface NumberInputProps extends InputProps {
+    increaseElement?: ReactNode;
+    decreaseElement?: ReactNode;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+declare const NumberInput: React.FC<NumberInputProps>;
+export default NumberInput;

package/dist/components/modal/Modal.d.ts

@@ -15,6 +15,6 @@ interface ModalOverlayProps {
     zIndex?: number;
     children: ReactNode;
     style?: CSSProperties;
-    className: string;
+    className?: string;
 }
 export default Modal;

package/dist/components/tabs/Tab.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+interface TabItem {
+    label: string;
+    id: string | number;
+    redner: ReactNode;
+}
+interface TabProps {
+    tab: TabItem[];
+}
+declare const Tab: ({ tab }: TabProps) => void;
+export default Tab;

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import Button from './components/button/Button';
 import Input from './components/input/Input';
+import NumberInput from './components/input/NumberInput';
 import DesktopKeyboardInput from './components/input/DesktopKeyboardInput';
 import Spinner from './components/spinner/Spinner';
 import RadioInput from './components/radio/RadioInput';
 import RadioGroup from './components/radio/RadioGroup';
 import Modal from './components/modal/Modal';
 import { CallIcon, CloseIcon, HomeIcon, SearchIcon } from './components/icons';
-export { Button, Input, DesktopKeyboardInput, Spinner, CallIcon, CloseIcon, HomeIcon, SearchIcon, RadioInput, RadioGroup, Modal, };
+export { Button, Input, DesktopKeyboardInput, Spinner, CallIcon, CloseIcon, HomeIcon, SearchIcon, RadioInput, RadioGroup, Modal, NumberInput, };

package/dist/index.esm.js

@@ -54,7 +54,7 @@ const Spinner = ({ color = 'black', size = '1em', spinTime = '2s' }) => {
                 React.createElement("title", null, "ic_fluent_spinner_ios_20_filled"),
                 React.createElement("desc", null, "Created with Sketch."),
                 React.createElement("g", { id: "\uD83D\uDD0D-System-Icons", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
-                    React.createElement("g", { id: "ic_fluent_spinner_ios_20_filled", fill: "#212121", fillRule: "nonzero" },
+                    React.createElement("g", { id: "ic_fluent_spinner_ios_20_filled", fill: color, fillRule: "nonzero" },
                         React.createElement("path", { d: "M10,3.5 C6.41015,3.5 3.5,6.41015 3.5,10 C3.5,10.4142 3.16421,10.75 2.75,10.75 C2.33579,10.75 2,10.4142 2,10 C2,5.58172 5.58172,2 10,2 C14.4183,2 18,5.58172 18,10 C18,14.4183 14.4183,18 10,18 C9.58579,18 9.25,17.6642 9.25,17.25 C9.25,16.8358 9.58579,16.5 10,16.5 C13.5899,16.5 16.5,13.5899 16.5,10 C16.5,6.41015 13.5899,3.5 10,3.5 Z", id: "\uD83C\uDFA8-Color" })))))));
 };
 
@@ -67,13 +67,79 @@ const Button = (_a) => {
 };
 
 const Input = (_a) => {
-    var { prefixElement, suffixElement, className, style, containerStyle, containerClassName, showError = false, error } = _a, restProps = __rest(_a, ["prefixElement", "suffixElement", "className", "style", "containerStyle", "containerClassName", "showError", "error"]);
+    var _b;
+    var { prefixElement, suffixElement, className, style, containerStyle, containerClassName, showError = false, error, maxLength, showLimit = false } = _a, restProps = __rest(_a, ["prefixElement", "suffixElement", "className", "style", "containerStyle", "containerClassName", "showError", "error", "maxLength", "showLimit"]);
+    const [inputValue, setInputValue] = useState(restProps.value);
+    const onChange = (e) => {
+        setInputValue(e.target.value);
+        restProps.onChange(e);
+    };
     return (React.createElement("span", { className: containerClassName, style: Object.assign({ position: 'relative', display: 'inline-flex', alignItems: 'center' }, containerStyle) },
         prefixElement,
-        React.createElement("input", Object.assign({}, restProps, { className: className, style: Object.assign({ all: 'unset' }, style) })),
+        React.createElement("input", Object.assign({}, restProps, { value: inputValue, onChange: onChange, maxLength: maxLength, className: className, style: Object.assign({ all: 'unset' }, style) })),
+        showLimit && maxLength && (React.createElement("span", { className: 'max-length' }, (_b = (inputValue !== null && inputValue !== undefined ? inputValue : '').toString().length) !== null && _b !== undefined ? _b : 0,
+            "/",
+            maxLength)),
         suffixElement,
         showError &&
-            (typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error))));
+            (typeof error === 'string' ? (React.createElement("span", { className: 'error-message', style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error))));
+};
+
+const UpArrowIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
+    return (React.createElement("svg", { width: size, height: size, fill: color, style: { backgroundColor: bgColor }, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
+        React.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("g", { id: "SVGRepo_iconCarrier" },
+            React.createElement("path", { d: "M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z" }))));
+};
+// COLLECTION: Boxicons Filled Icons
+// LICENSE: CC Attribution License
+// AUTHOR: boxicons
+// https://www.svgrepo.com/svg/334957/up-arrow
+
+const DownArrowIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
+    return (React.createElement("svg", { width: size, height: size, fill: color, style: { backgroundColor: bgColor }, viewBox: "0 0 24 24", transform: "matrix(1, 0, 0, -1, 0, 0)", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
+        React.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("g", { id: "SVGRepo_iconCarrier" },
+            React.createElement("path", { d: "M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z" }))));
+};
+// COLLECTION: Boxicons Filled Icons
+// LICENSE: CC Attribution License
+// AUTHOR: boxicons
+// https://www.svgrepo.com/svg/334957/up-arrow
+
+const NumberInput = (_a) => {
+    var { increaseElement = React.createElement(UpArrowIcon, null), decreaseElement = React.createElement(DownArrowIcon, null), step = 1, min = -Infinity, max = Infinity, value, onChange } = _a, restProps = __rest(_a, ["increaseElement", "decreaseElement", "step", "min", "max", "value", "onChange"]);
+    const onNumberInput = (e) => {
+        const newValue = Number(e.target.value);
+        if (isNaN(newValue)) {
+            return;
+        }
+        onChange(Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { value: newValue.toString() }) }));
+    };
+    const onNumberChange = (dir) => {
+        if (isNaN(value)) {
+            onChange(null);
+            return;
+        }
+        let newValue = (value !== null && value !== undefined ? value : 0) + dir * (step || 1);
+        if (newValue > max)
+            newValue = max;
+        if (newValue < min)
+            newValue = min;
+        const event = {
+            target: Object.assign(Object.assign({}, {}), { value: newValue.toString() }),
+        };
+        onChange(event);
+    };
+    const onIncrease = () => {
+        onNumberChange(1);
+    };
+    const onDecrease = () => {
+        onNumberChange(-1);
+    };
+    return (React.createElement(Input, Object.assign({}, restProps, { value: value, onChange: onNumberInput, prefixElement: React.cloneElement(decreaseElement, { onClick: onDecrease }), suffixElement: React.cloneElement(increaseElement, { onClick: onIncrease }) })));
 };
 
 const functionRow = [
@@ -381,7 +447,7 @@ const ModalContext = createContext({
     setIsShow: (value) => { },
 });
 
-const Modal = ({ opener, children, targetSelector = 'root', }) => {
+const Modal = ({ opener, children, targetSelector = '#root', }) => {
     const [isShow, setIsShow] = useState(false);
     const onHandleShow = () => {
         setIsShow(true);
@@ -461,5 +527,5 @@ const SearchIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fil
 // AUTHOR: Ankush Syal
 // https://www.svgrepo.com/svg/520583/call
 
-export { Button, CallIcon, CloseIcon, DesktopKeyboardInput, HomeIcon, Input, Modal, RadioGroup, RadioInput, SearchIcon, Spinner };
+export { Button, CallIcon, CloseIcon, DesktopKeyboardInput, HomeIcon, Input, Modal, NumberInput, RadioGroup, RadioInput, SearchIcon, Spinner };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -56,7 +56,7 @@ const Spinner = ({ color = 'black', size = '1em', spinTime = '2s' }) => {
                 React.createElement("title", null, "ic_fluent_spinner_ios_20_filled"),
                 React.createElement("desc", null, "Created with Sketch."),
                 React.createElement("g", { id: "\uD83D\uDD0D-System-Icons", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
-                    React.createElement("g", { id: "ic_fluent_spinner_ios_20_filled", fill: "#212121", fillRule: "nonzero" },
+                    React.createElement("g", { id: "ic_fluent_spinner_ios_20_filled", fill: color, fillRule: "nonzero" },
                         React.createElement("path", { d: "M10,3.5 C6.41015,3.5 3.5,6.41015 3.5,10 C3.5,10.4142 3.16421,10.75 2.75,10.75 C2.33579,10.75 2,10.4142 2,10 C2,5.58172 5.58172,2 10,2 C14.4183,2 18,5.58172 18,10 C18,14.4183 14.4183,18 10,18 C9.58579,18 9.25,17.6642 9.25,17.25 C9.25,16.8358 9.58579,16.5 10,16.5 C13.5899,16.5 16.5,13.5899 16.5,10 C16.5,6.41015 13.5899,3.5 10,3.5 Z", id: "\uD83C\uDFA8-Color" })))))));
 };
 
@@ -69,13 +69,79 @@ const Button = (_a) => {
 };
 
 const Input = (_a) => {
-    var { prefixElement, suffixElement, className, style, containerStyle, containerClassName, showError = false, error } = _a, restProps = __rest(_a, ["prefixElement", "suffixElement", "className", "style", "containerStyle", "containerClassName", "showError", "error"]);
+    var _b;
+    var { prefixElement, suffixElement, className, style, containerStyle, containerClassName, showError = false, error, maxLength, showLimit = false } = _a, restProps = __rest(_a, ["prefixElement", "suffixElement", "className", "style", "containerStyle", "containerClassName", "showError", "error", "maxLength", "showLimit"]);
+    const [inputValue, setInputValue] = React.useState(restProps.value);
+    const onChange = (e) => {
+        setInputValue(e.target.value);
+        restProps.onChange(e);
+    };
     return (React.createElement("span", { className: containerClassName, style: Object.assign({ position: 'relative', display: 'inline-flex', alignItems: 'center' }, containerStyle) },
         prefixElement,
-        React.createElement("input", Object.assign({}, restProps, { className: className, style: Object.assign({ all: 'unset' }, style) })),
+        React.createElement("input", Object.assign({}, restProps, { value: inputValue, onChange: onChange, maxLength: maxLength, className: className, style: Object.assign({ all: 'unset' }, style) })),
+        showLimit && maxLength && (React.createElement("span", { className: 'max-length' }, (_b = (inputValue !== null && inputValue !== undefined ? inputValue : '').toString().length) !== null && _b !== undefined ? _b : 0,
+            "/",
+            maxLength)),
         suffixElement,
         showError &&
-            (typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error))));
+            (typeof error === 'string' ? (React.createElement("span", { className: 'error-message', style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error))));
+};
+
+const UpArrowIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
+    return (React.createElement("svg", { width: size, height: size, fill: color, style: { backgroundColor: bgColor }, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
+        React.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("g", { id: "SVGRepo_iconCarrier" },
+            React.createElement("path", { d: "M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z" }))));
+};
+// COLLECTION: Boxicons Filled Icons
+// LICENSE: CC Attribution License
+// AUTHOR: boxicons
+// https://www.svgrepo.com/svg/334957/up-arrow
+
+const DownArrowIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
+    return (React.createElement("svg", { width: size, height: size, fill: color, style: { backgroundColor: bgColor }, viewBox: "0 0 24 24", transform: "matrix(1, 0, 0, -1, 0, 0)", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
+        React.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("g", { id: "SVGRepo_iconCarrier" },
+            React.createElement("path", { d: "M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z" }))));
+};
+// COLLECTION: Boxicons Filled Icons
+// LICENSE: CC Attribution License
+// AUTHOR: boxicons
+// https://www.svgrepo.com/svg/334957/up-arrow
+
+const NumberInput = (_a) => {
+    var { increaseElement = React.createElement(UpArrowIcon, null), decreaseElement = React.createElement(DownArrowIcon, null), step = 1, min = -Infinity, max = Infinity, value, onChange } = _a, restProps = __rest(_a, ["increaseElement", "decreaseElement", "step", "min", "max", "value", "onChange"]);
+    const onNumberInput = (e) => {
+        const newValue = Number(e.target.value);
+        if (isNaN(newValue)) {
+            return;
+        }
+        onChange(Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { value: newValue.toString() }) }));
+    };
+    const onNumberChange = (dir) => {
+        if (isNaN(value)) {
+            onChange(null);
+            return;
+        }
+        let newValue = (value !== null && value !== undefined ? value : 0) + dir * (step || 1);
+        if (newValue > max)
+            newValue = max;
+        if (newValue < min)
+            newValue = min;
+        const event = {
+            target: Object.assign(Object.assign({}, {}), { value: newValue.toString() }),
+        };
+        onChange(event);
+    };
+    const onIncrease = () => {
+        onNumberChange(1);
+    };
+    const onDecrease = () => {
+        onNumberChange(-1);
+    };
+    return (React.createElement(Input, Object.assign({}, restProps, { value: value, onChange: onNumberInput, prefixElement: React.cloneElement(decreaseElement, { onClick: onDecrease }), suffixElement: React.cloneElement(increaseElement, { onClick: onIncrease }) })));
 };
 
 const functionRow = [
@@ -383,7 +449,7 @@ const ModalContext = React.createContext({
     setIsShow: (value) => { },
 });
 
-const Modal = ({ opener, children, targetSelector = 'root', }) => {
+const Modal = ({ opener, children, targetSelector = '#root', }) => {
     const [isShow, setIsShow] = React.useState(false);
     const onHandleShow = () => {
         setIsShow(true);
@@ -470,6 +536,7 @@ exports.DesktopKeyboardInput = DesktopKeyboardInput;
 exports.HomeIcon = HomeIcon;
 exports.Input = Input;
 exports.Modal = Modal;
+exports.NumberInput = NumberInput;
 exports.RadioGroup = RadioGroup;
 exports.RadioInput = RadioInput;
 exports.SearchIcon = SearchIcon;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jy-headless",
-  "version": "0.0.24",
+  "version": "0.0.27",
   "description": "",
   "main": "dist/index.cjs",
   "typings": "dist/index.d.ts",