jy-headless 0.0.13 → 0.0.16

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

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

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

@@ -5,6 +5,8 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     containerClassName?: string;
     prefixElement?: ReactNode;
     suffixElement?: ReactNode;
+    showError?: boolean;
+    error?: ReactNode | string;
 }
 declare const Input: React.FC<InputProps>;
 export default Input;

package/dist/components/radio/RadioGroup.d.ts

@@ -0,0 +1,28 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { RadioInputProps } from './RadioInput';
+export interface RadioGroupContextProps {
+    selectedValues: string[] | null;
+    onToggle: (value: string) => void;
+    clearable?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+}
+export interface ItemComposition {
+    Item?: React.FC<RadioInputProps>;
+}
+export interface RadioGroupProps {
+    children: ReactNode;
+    value?: string[];
+    onChange?: (value: string) => void;
+    title?: ReactNode | string;
+    style?: CSSProperties;
+    className?: string;
+    allowMultiSelect?: boolean;
+    clearable?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    showError?: boolean;
+    error?: ReactNode | string;
+}
+declare const RadioGroup: React.FC<RadioGroupProps> & ItemComposition;
+export default RadioGroup;

package/dist/components/radio/RadioInput.d.ts

@@ -0,0 +1,9 @@
+import React, { InputHTMLAttributes, ReactNode } from 'react';
+export interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    clearable?: boolean;
+    onToggle?: (e: any) => void;
+    showError?: boolean;
+    error?: ReactNode | string;
+}
+declare const RadioInput: React.FC<RadioInputProps>;
+export default RadioInput;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import Button from './components/button/Button';
 import Input from './components/input/Input';
 import Spinner from './components/spinner/Spinner';
+import RadioInput from './components/radio/RadioInput';
+import RadioGroup from './components/radio/RadioGroup';
 import { CallIcon, CloseIcon, HomeIcon, SearchIcon } from './components/icons';
-export { Button, Input, Spinner, CallIcon, CloseIcon, HomeIcon, SearchIcon };
+export { Button, Input, Spinner, CallIcon, CloseIcon, HomeIcon, SearchIcon, RadioInput, RadioGroup, };

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useMemo, useEffect, createContext, useContext } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -17,17 +17,6 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
 function __rest(s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -45,41 +34,119 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var Spin = function () { return (React.createElement("style", null, "@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n")); };
-var Spinner = function (_a) {
-    var color = _a.color, size = _a.size, spinTime = _a.spinTime;
+const Spin = () => (React.createElement("style", null, `@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+`));
+const Spinner = ({ color = 'black', size = '1em', spinTime = '2s' }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(Spin, null),
-        React.createElement("span", { style: { animation: "spin ".concat(spinTime || '2s', " 0s linear infinite") } },
-            React.createElement("svg", { viewBox: "0 0 20 20", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: size || '30px', height: size || '30px', xmlnsXlink: "http://www.w3.org/1999/xlink", fill: color || 'black' },
-                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("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("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" }))))))));
+        React.createElement("svg", { style: { animation: `spin ${spinTime} 0s linear infinite` }, viewBox: "0 0 20 20", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, xmlnsXlink: "http://www.w3.org/1999/xlink", fill: color },
+            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("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("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" })))))));
 };
 
-var Button = function (_a) {
-    var prefixElement = _a.prefixElement, suffixElement = _a.suffixElement, children = _a.children, _b = _a.loading, loading = _b === undefined ? false : _b, _c = _a.spinner, spinner = _c === undefined ? React.createElement(Spinner, { color: 'black', size: '9px' }) : _c, style = _a.style, restProps = __rest(_a, ["prefixElement", "suffixElement", "children", "loading", "spinner", "style"]);
-    return (React.createElement("button", __assign({}, restProps, { style: __assign({ display: 'inline-flex', justifyContent: 'space-between', alignItems: 'center', paddingRight: '4px', paddingLeft: '4px' }, style) }),
+const Button = (_a) => {
+    var { prefixElement, suffixElement, children, loading = false, spinner = React.createElement(Spinner, { color: 'black', size: '9px' }), style } = _a, restProps = __rest(_a, ["prefixElement", "suffixElement", "children", "loading", "spinner", "style"]);
+    return (React.createElement("button", Object.assign({}, restProps, { style: Object.assign({ display: 'inline-flex', alignItems: 'center' }, style) }),
         prefixElement,
         loading ? spinner : children,
         suffixElement));
 };
 
-var Input = function (_a) {
-    var prefixElement = _a.prefixElement, suffixElement = _a.suffixElement, className = _a.className, style = _a.style, containerStyle = _a.containerStyle, containerClassName = _a.containerClassName, restProps = __rest(_a, ["prefixElement", "suffixElement", "className", "style", "containerStyle", "containerClassName"]);
-    return (React.createElement("span", { className: containerClassName, style: __assign({ display: 'inline-flex', justifyContent: 'space-between', alignItems: 'center', paddingRight: '4px', paddingLeft: '4px' }, containerStyle) },
+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"]);
+    return (React.createElement("span", { className: containerClassName, style: Object.assign({ position: 'relative', display: 'inline-flex', alignItems: 'center' }, containerStyle) },
         prefixElement,
-        React.createElement("input", __assign({}, restProps, { className: className, style: __assign({ outline: 'none', border: 'none', flex: 1 }, style) })),
-        suffixElement));
+        React.createElement("input", Object.assign({}, restProps, { className: className, style: Object.assign({ all: 'unset' }, style) })),
+        suffixElement,
+        showError && typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error)));
+};
+
+const RadioInput = (_a) => {
+    var { clearable = false, children = '', checked = false, onChange, onToggle, style, className, id, defaultChecked, readOnly, showError = false, error = null } = _a, restProps = __rest(_a, ["clearable", "children", "checked", "onChange", "onToggle", "style", "className", "id", "defaultChecked", "readOnly", "showError", "error"]);
+    const [selected, setSelected] = useState(checked || false);
+    const uniqueId = useMemo(() => id || `radio-${crypto.randomUUID()}`, [id]);
+    useEffect(() => {
+        setSelected(checked || false);
+    }, [checked]);
+    const onClick = (e) => {
+        if (readOnly || restProps.disabled)
+            return;
+        const result = clearable ? !selected : true;
+        setSelected(result);
+        onToggle === null || onToggle === undefined ? undefined : onToggle(Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { id: uniqueId, checked: result, value: result }) }));
+    };
+    return (React.createElement("span", { className: className, style: Object.assign({ position: 'relative' }, style) },
+        React.createElement("input", Object.assign({ id: uniqueId, type: 'radio', readOnly: true }, restProps, { checked: selected, onClick: onClick })),
+        React.createElement("label", { htmlFor: uniqueId }, children),
+        showError && typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error)));
+};
+
+const RadioGroupContext = createContext({
+    selectedValues: [],
+    onToggle: () => { },
+    clearable: false,
+    readOnly: false,
+    disabled: false,
+});
+const RadioGroup = ({ title, style, className, children, value = [], onChange, clearable = false, allowMultiSelect = false, readOnly = false, disabled = false, showError = false, error, }) => {
+    const [selectedValues, setSelectedValues] = useState(value);
+    useEffect(() => {
+        setSelectedValues(value);
+    }, [value]);
+    const onToggle = (name) => {
+        if (readOnly || disabled)
+            return;
+        let result;
+        if (selectedValues === null || selectedValues === undefined ? undefined : selectedValues.includes(name)) {
+            if (clearable) {
+                result = selectedValues.filter((it) => it !== name);
+            }
+            else {
+                return;
+            }
+        }
+        else {
+            if (allowMultiSelect) {
+                result = [...selectedValues, name];
+            }
+            else {
+                result = [name];
+            }
+        }
+        setSelectedValues(() => result);
+        onChange === null || onChange === undefined ? undefined : onChange(result);
+    };
+    return (React.createElement(RadioGroupContext, { value: { selectedValues, onToggle, clearable, readOnly, disabled } },
+        React.createElement("span", { role: 'radiogroup', style: Object.assign({ position: 'relative' }, style), className: className },
+            typeof title === 'string' ? React.createElement("h3", null, title) : title,
+            children,
+            showError && typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error))));
+};
+const RadioGroupItem = (props) => {
+    const { selectedValues, onToggle, clearable, readOnly, disabled } = useContext(RadioGroupContext);
+    const uniqueId = useMemo(() => { var _a; return (_a = props.id) !== null && _a !== undefined ? _a : `radio-${crypto.randomUUID()}`; }, [props.id]);
+    return (React.createElement(RadioInput, Object.assign({}, props, { readOnly: readOnly, disabled: disabled, id: uniqueId, checked: selectedValues === null || selectedValues === undefined ? undefined : selectedValues.includes(uniqueId), onChange: (e) => {
+            if (readOnly || disabled)
+                return;
+            onToggle(e.target.id);
+        } })));
 };
+RadioGroup.Item = RadioGroupItem;
 
-var CloseIcon = function (_a) {
-    var _b = _a.color, color = _b === undefined ? '#000' : _b, _c = _a.size, size = _c === undefined ? '20px' : _c, _d = _a.bgColor, bgColor = _d === undefined ? 'transparent' : _d;
+const CloseIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', }) => {
     return (React.createElement("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", style: { backgroundColor: bgColor }, 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" }),
@@ -91,8 +158,7 @@ var CloseIcon = function (_a) {
 // AUTHOR: Arthur Kazais
 // https://www.svgrepo.com/svg/499592/close-x
 
-var CallIcon = function (_a) {
-    var _b = _a.color, color = _b === undefined ? '#000' : _b, _c = _a.size, size = _c === undefined ? '20px' : _c, _d = _a.bgColor, bgColor = _d === undefined ? 'transparent' : _d, _e = _a.fill, fill = _e === undefined ? 'none' : _e;
+const CallIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
     return (React.createElement("svg", { viewBox: "0 -0.5 25 25", width: size, height: size, fill: fill, style: { backgroundColor: bgColor }, 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" }),
@@ -104,8 +170,7 @@ var CallIcon = function (_a) {
 // AUTHOR: Ankush Syal
 // https://www.svgrepo.com/svg/520583/call
 
-var HomeIcon = function (_a) {
-    var _b = _a.color, color = _b === undefined ? '#000' : _b, _c = _a.size, size = _c === undefined ? '20px' : _c, _d = _a.bgColor, bgColor = _d === undefined ? 'transparent' : _d, _e = _a.fill, fill = _e === undefined ? 'none' : _e;
+const HomeIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
     return (React.createElement("svg", { viewBox: "0 -0.5 25 25", width: size, height: size, fill: fill, style: { backgroundColor: bgColor }, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("g", { id: "SVGRepo_bgCarrier", "stroke-width": "0" }),
         React.createElement("g", { id: "SVGRepo_tracerCarrier", "stroke-linecap": "round", "stroke-linejoin": "round" }),
@@ -118,8 +183,7 @@ var HomeIcon = function (_a) {
 // AUTHOR: Ankush Syal
 // https://www.svgrepo.com/svg/520794/home-20
 
-var SearchIcon = function (_a) {
-    var _b = _a.color, color = _b === undefined ? '#000' : _b, _c = _a.size, size = _c === undefined ? '20px' : _c, _d = _a.bgColor, bgColor = _d === undefined ? 'transparent' : _d, _e = _a.fill, fill = _e === undefined ? 'none' : _e;
+const SearchIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
     return (React.createElement("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: fill, style: { backgroundColor: bgColor }, 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" }),
@@ -132,5 +196,5 @@ var SearchIcon = function (_a) {
 // AUTHOR: Ankush Syal
 // https://www.svgrepo.com/svg/520583/call
 
-export { Button, CallIcon, CloseIcon, HomeIcon, Input, SearchIcon, Spinner };
+export { Button, CallIcon, CloseIcon, HomeIcon, Input, 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

@@ -19,17 +19,6 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
 function __rest(s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -47,41 +36,119 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var Spin = function () { return (React.createElement("style", null, "@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n")); };
-var Spinner = function (_a) {
-    var color = _a.color, size = _a.size, spinTime = _a.spinTime;
+const Spin = () => (React.createElement("style", null, `@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+`));
+const Spinner = ({ color = 'black', size = '1em', spinTime = '2s' }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(Spin, null),
-        React.createElement("span", { style: { animation: "spin ".concat(spinTime || '2s', " 0s linear infinite") } },
-            React.createElement("svg", { viewBox: "0 0 20 20", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: size || '30px', height: size || '30px', xmlnsXlink: "http://www.w3.org/1999/xlink", fill: color || 'black' },
-                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("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("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" }))))))));
+        React.createElement("svg", { style: { animation: `spin ${spinTime} 0s linear infinite` }, viewBox: "0 0 20 20", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, xmlnsXlink: "http://www.w3.org/1999/xlink", fill: color },
+            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("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("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" })))))));
 };
 
-var Button = function (_a) {
-    var prefixElement = _a.prefixElement, suffixElement = _a.suffixElement, children = _a.children, _b = _a.loading, loading = _b === undefined ? false : _b, _c = _a.spinner, spinner = _c === undefined ? React.createElement(Spinner, { color: 'black', size: '9px' }) : _c, style = _a.style, restProps = __rest(_a, ["prefixElement", "suffixElement", "children", "loading", "spinner", "style"]);
-    return (React.createElement("button", __assign({}, restProps, { style: __assign({ display: 'inline-flex', justifyContent: 'space-between', alignItems: 'center', paddingRight: '4px', paddingLeft: '4px' }, style) }),
+const Button = (_a) => {
+    var { prefixElement, suffixElement, children, loading = false, spinner = React.createElement(Spinner, { color: 'black', size: '9px' }), style } = _a, restProps = __rest(_a, ["prefixElement", "suffixElement", "children", "loading", "spinner", "style"]);
+    return (React.createElement("button", Object.assign({}, restProps, { style: Object.assign({ display: 'inline-flex', alignItems: 'center' }, style) }),
         prefixElement,
         loading ? spinner : children,
         suffixElement));
 };
 
-var Input = function (_a) {
-    var prefixElement = _a.prefixElement, suffixElement = _a.suffixElement, className = _a.className, style = _a.style, containerStyle = _a.containerStyle, containerClassName = _a.containerClassName, restProps = __rest(_a, ["prefixElement", "suffixElement", "className", "style", "containerStyle", "containerClassName"]);
-    return (React.createElement("span", { className: containerClassName, style: __assign({ display: 'inline-flex', justifyContent: 'space-between', alignItems: 'center', paddingRight: '4px', paddingLeft: '4px' }, containerStyle) },
+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"]);
+    return (React.createElement("span", { className: containerClassName, style: Object.assign({ position: 'relative', display: 'inline-flex', alignItems: 'center' }, containerStyle) },
         prefixElement,
-        React.createElement("input", __assign({}, restProps, { className: className, style: __assign({ outline: 'none', border: 'none', flex: 1 }, style) })),
-        suffixElement));
+        React.createElement("input", Object.assign({}, restProps, { className: className, style: Object.assign({ all: 'unset' }, style) })),
+        suffixElement,
+        showError && typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error)));
+};
+
+const RadioInput = (_a) => {
+    var { clearable = false, children = '', checked = false, onChange, onToggle, style, className, id, defaultChecked, readOnly, showError = false, error = null } = _a, restProps = __rest(_a, ["clearable", "children", "checked", "onChange", "onToggle", "style", "className", "id", "defaultChecked", "readOnly", "showError", "error"]);
+    const [selected, setSelected] = React.useState(checked || false);
+    const uniqueId = React.useMemo(() => id || `radio-${crypto.randomUUID()}`, [id]);
+    React.useEffect(() => {
+        setSelected(checked || false);
+    }, [checked]);
+    const onClick = (e) => {
+        if (readOnly || restProps.disabled)
+            return;
+        const result = clearable ? !selected : true;
+        setSelected(result);
+        onToggle === null || onToggle === undefined ? undefined : onToggle(Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { id: uniqueId, checked: result, value: result }) }));
+    };
+    return (React.createElement("span", { className: className, style: Object.assign({ position: 'relative' }, style) },
+        React.createElement("input", Object.assign({ id: uniqueId, type: 'radio', readOnly: true }, restProps, { checked: selected, onClick: onClick })),
+        React.createElement("label", { htmlFor: uniqueId }, children),
+        showError && typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error)));
+};
+
+const RadioGroupContext = React.createContext({
+    selectedValues: [],
+    onToggle: () => { },
+    clearable: false,
+    readOnly: false,
+    disabled: false,
+});
+const RadioGroup = ({ title, style, className, children, value = [], onChange, clearable = false, allowMultiSelect = false, readOnly = false, disabled = false, showError = false, error, }) => {
+    const [selectedValues, setSelectedValues] = React.useState(value);
+    React.useEffect(() => {
+        setSelectedValues(value);
+    }, [value]);
+    const onToggle = (name) => {
+        if (readOnly || disabled)
+            return;
+        let result;
+        if (selectedValues === null || selectedValues === undefined ? undefined : selectedValues.includes(name)) {
+            if (clearable) {
+                result = selectedValues.filter((it) => it !== name);
+            }
+            else {
+                return;
+            }
+        }
+        else {
+            if (allowMultiSelect) {
+                result = [...selectedValues, name];
+            }
+            else {
+                result = [name];
+            }
+        }
+        setSelectedValues(() => result);
+        onChange === null || onChange === undefined ? undefined : onChange(result);
+    };
+    return (React.createElement(RadioGroupContext, { value: { selectedValues, onToggle, clearable, readOnly, disabled } },
+        React.createElement("span", { role: 'radiogroup', style: Object.assign({ position: 'relative' }, style), className: className },
+            typeof title === 'string' ? React.createElement("h3", null, title) : title,
+            children,
+            showError && typeof error === 'string' ? (React.createElement("span", { style: { position: 'absolute', top: '100%', left: 0 } }, error)) : (error))));
+};
+const RadioGroupItem = (props) => {
+    const { selectedValues, onToggle, clearable, readOnly, disabled } = React.useContext(RadioGroupContext);
+    const uniqueId = React.useMemo(() => { var _a; return (_a = props.id) !== null && _a !== undefined ? _a : `radio-${crypto.randomUUID()}`; }, [props.id]);
+    return (React.createElement(RadioInput, Object.assign({}, props, { readOnly: readOnly, disabled: disabled, id: uniqueId, checked: selectedValues === null || selectedValues === undefined ? undefined : selectedValues.includes(uniqueId), onChange: (e) => {
+            if (readOnly || disabled)
+                return;
+            onToggle(e.target.id);
+        } })));
 };
+RadioGroup.Item = RadioGroupItem;
 
-var CloseIcon = function (_a) {
-    var _b = _a.color, color = _b === undefined ? '#000' : _b, _c = _a.size, size = _c === undefined ? '20px' : _c, _d = _a.bgColor, bgColor = _d === undefined ? 'transparent' : _d;
+const CloseIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', }) => {
     return (React.createElement("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", style: { backgroundColor: bgColor }, 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" }),
@@ -93,8 +160,7 @@ var CloseIcon = function (_a) {
 // AUTHOR: Arthur Kazais
 // https://www.svgrepo.com/svg/499592/close-x
 
-var CallIcon = function (_a) {
-    var _b = _a.color, color = _b === undefined ? '#000' : _b, _c = _a.size, size = _c === undefined ? '20px' : _c, _d = _a.bgColor, bgColor = _d === undefined ? 'transparent' : _d, _e = _a.fill, fill = _e === undefined ? 'none' : _e;
+const CallIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
     return (React.createElement("svg", { viewBox: "0 -0.5 25 25", width: size, height: size, fill: fill, style: { backgroundColor: bgColor }, 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" }),
@@ -106,8 +172,7 @@ var CallIcon = function (_a) {
 // AUTHOR: Ankush Syal
 // https://www.svgrepo.com/svg/520583/call
 
-var HomeIcon = function (_a) {
-    var _b = _a.color, color = _b === undefined ? '#000' : _b, _c = _a.size, size = _c === undefined ? '20px' : _c, _d = _a.bgColor, bgColor = _d === undefined ? 'transparent' : _d, _e = _a.fill, fill = _e === undefined ? 'none' : _e;
+const HomeIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
     return (React.createElement("svg", { viewBox: "0 -0.5 25 25", width: size, height: size, fill: fill, style: { backgroundColor: bgColor }, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("g", { id: "SVGRepo_bgCarrier", "stroke-width": "0" }),
         React.createElement("g", { id: "SVGRepo_tracerCarrier", "stroke-linecap": "round", "stroke-linejoin": "round" }),
@@ -120,8 +185,7 @@ var HomeIcon = function (_a) {
 // AUTHOR: Ankush Syal
 // https://www.svgrepo.com/svg/520794/home-20
 
-var SearchIcon = function (_a) {
-    var _b = _a.color, color = _b === undefined ? '#000' : _b, _c = _a.size, size = _c === undefined ? '20px' : _c, _d = _a.bgColor, bgColor = _d === undefined ? 'transparent' : _d, _e = _a.fill, fill = _e === undefined ? 'none' : _e;
+const SearchIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
     return (React.createElement("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: fill, style: { backgroundColor: bgColor }, 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" }),
@@ -139,6 +203,8 @@ exports.CallIcon = CallIcon;
 exports.CloseIcon = CloseIcon;
 exports.HomeIcon = HomeIcon;
 exports.Input = Input;
+exports.RadioGroup = RadioGroup;
+exports.RadioInput = RadioInput;
 exports.SearchIcon = SearchIcon;
 exports.Spinner = Spinner;
 //# sourceMappingURL=index.js.map

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