jy-headless 0.0.23 → 0.0.25

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { ButtonProps } from '../button/Button';
 interface ModalProps {
     opener: ReactNode;
@@ -14,5 +14,7 @@ interface ModalOverlayProps {
     backgroundColor?: string;
     zIndex?: number;
     children: ReactNode;
+    style?: CSSProperties;
+    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.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,22 @@ 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 functionRow = [
@@ -381,36 +390,31 @@ 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);
     };
     return (React.createElement(ModalContext.Provider, { value: { isShow, setIsShow } },
-        React.cloneElement(opener, {
-            onClick: onHandleShow,
-        }),
+        React.isValidElement(opener) &&
+            React.cloneElement(opener, {
+                onClick: onHandleShow,
+            }),
         isShow &&
             document.querySelector(targetSelector) &&
             createPortal(children, document.querySelector(targetSelector))));
 };
-const ModalOverlay = ({ backgroundColor = 'rgba(0,0,0,0.5)', children, zIndex = 999, }) => {
-    return (React.createElement("div", { style: {
-            position: 'fixed',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            zIndex,
-            backgroundColor,
-        } }, children));
+const ModalOverlay = ({ backgroundColor = 'rgba(0,0,0,0.5)', children, style, className, zIndex = 999, }) => {
+    return (React.createElement("div", { className: className, style: Object.assign({ position: 'fixed', display: 'flex', justifyContent: 'center', alignItems: 'center', top: 0, right: 0, bottom: 0, left: 0, zIndex,
+            backgroundColor }, style) }, children));
 };
 const ModalCloseButton = (_a) => {
     var props = __rest(_a, []);
-    const { setIsShow } = useContext(ModalContext);
+    const context = useContext(ModalContext);
+    if (!context) {
+        throw new Error('ModalCloseButton must be used within a ModalContext.Provider');
+    }
+    const { setIsShow } = context;
     return React.createElement(Button, Object.assign({}, props, { onClick: () => setIsShow(false) }));
 };
 Modal.Overlay = ModalOverlay;

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,22 @@ 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 functionRow = [
@@ -383,36 +392,31 @@ 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);
     };
     return (React.createElement(ModalContext.Provider, { value: { isShow, setIsShow } },
-        React.cloneElement(opener, {
-            onClick: onHandleShow,
-        }),
+        React.isValidElement(opener) &&
+            React.cloneElement(opener, {
+                onClick: onHandleShow,
+            }),
         isShow &&
             document.querySelector(targetSelector) &&
             reactDom.createPortal(children, document.querySelector(targetSelector))));
 };
-const ModalOverlay = ({ backgroundColor = 'rgba(0,0,0,0.5)', children, zIndex = 999, }) => {
-    return (React.createElement("div", { style: {
-            position: 'fixed',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            zIndex,
-            backgroundColor,
-        } }, children));
+const ModalOverlay = ({ backgroundColor = 'rgba(0,0,0,0.5)', children, style, className, zIndex = 999, }) => {
+    return (React.createElement("div", { className: className, style: Object.assign({ position: 'fixed', display: 'flex', justifyContent: 'center', alignItems: 'center', top: 0, right: 0, bottom: 0, left: 0, zIndex,
+            backgroundColor }, style) }, children));
 };
 const ModalCloseButton = (_a) => {
     var props = __rest(_a, []);
-    const { setIsShow } = React.useContext(ModalContext);
+    const context = React.useContext(ModalContext);
+    if (!context) {
+        throw new Error('ModalCloseButton must be used within a ModalContext.Provider');
+    }
+    const { setIsShow } = context;
     return React.createElement(Button, Object.assign({}, props, { onClick: () => setIsShow(false) }));
 };
 Modal.Overlay = ModalOverlay;

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.23",
+  "version": "0.0.25",
   "description": "",
   "main": "dist/index.cjs",
   "typings": "dist/index.d.ts",