jy-headless 0.0.7 → 0.0.9

package/dist/.storybook/main.d.ts

@@ -0,0 +1,3 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+declare const config: StorybookConfig;
+export default config;

package/dist/.storybook/preview.d.ts

@@ -0,0 +1,3 @@
+import type { Preview } from '@storybook/react';
+declare const preview: Preview;
+export default preview;

package/dist/index.css

@@ -0,0 +1 @@
+@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/dist/index.esm.css

@@ -0,0 +1 @@
+@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/dist/index.esm.js

@@ -1,9 +1,126 @@
 import React from 'react';
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var Spinner = function (_a) {
+    var color = _a.color, size = _a.size, spinTime = _a.spinTime;
+    return (React.createElement(React.Fragment, 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" }))))))));
+};
+
 var Button = function (_a) {
-    var label = _a.label;
-    return React.createElement("button", null, label);
+    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) }),
+        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) },
+        prefixElement,
+        React.createElement("input", __assign({}, restProps, { className: className, style: __assign({ outline: 'none', border: 'none', flex: 1 }, style) })),
+        suffixElement));
+};
+
+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;
+    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" }),
+        React.createElement("g", { id: "SVGRepo_iconCarrier" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z", fill: color }))));
+};
+// COLLECTION: Wave Oval Interface Icons
+// LICENSE: PD License
+// 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;
+    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" }),
+        React.createElement("g", { id: "SVGRepo_iconCarrier" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.36343 6.36195C7.24343 5.43495 7.55443 5.17495 7.92943 5.05395C8.18895 4.98595 8.46112 4.98217 8.72243 5.04295C9.06643 5.14295 9.15743 5.21895 10.2854 6.34295C11.2764 7.32995 11.3754 7.43695 11.4704 7.62995C11.6521 7.96873 11.6805 8.36894 11.5484 8.72995C11.4484 9.00495 11.3064 9.18695 10.7054 9.78995L10.3134 10.183C10.2105 10.2876 10.1863 10.4464 10.2534 10.577C11.1244 12.0628 12.36 13.3019 13.8434 14.177C14.0142 14.2684 14.2245 14.2389 14.3634 14.104L14.7404 13.733C14.9734 13.4941 15.2202 13.2691 15.4794 13.059C15.8866 12.809 16.3939 12.7867 16.8214 13C17.0304 13.1 17.0994 13.162 18.1214 14.182C19.1754 15.233 19.2054 15.266 19.3214 15.507C19.5397 15.9059 19.5374 16.3891 19.3154 16.786C19.2024 17.01 19.1334 17.091 18.5404 17.697C18.1824 18.063 17.8454 18.397 17.7914 18.446C17.3022 18.851 16.6746 19.0497 16.0414 19C14.883 18.8944 13.7617 18.5363 12.7564 17.951C10.5296 16.7711 8.63383 15.0521 7.24243 12.951C6.93937 12.5112 6.66994 12.0492 6.43643 11.569C5.81001 10.4953 5.48653 9.27189 5.50043 8.02895C5.54825 7.37871 5.86008 6.77637 6.36343 6.36195Z", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))));
+};
+// COLLECTION: Xnix Circular Interface Icons
+// LICENSE: CC Attribution License
+// 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;
+    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" }),
+        React.createElement("g", { id: "SVGRepo_iconCarrier" },
+            React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.867 15.8321L18.873 10.0391L14.75 5.92908C13.5057 4.69031 11.4942 4.69031 10.25 5.92908L6.13599 10.0291V15.8291C6.1393 17.5833 7.56377 19.0028 9.31799 19.0001H15.685C17.438 19.0029 18.862 17.5851 18.867 15.8321Z", stroke: color, "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+            React.createElement("path", { d: "M19.624 6.01807C19.624 5.60385 19.2882 5.26807 18.874 5.26807C18.4598 5.26807 18.124 5.60385 18.124 6.01807H19.624ZM18.874 10.0391H18.124C18.124 10.2384 18.2033 10.4295 18.3445 10.5702L18.874 10.0391ZM19.9705 12.1912C20.2638 12.4837 20.7387 12.4829 21.0311 12.1896C21.3236 11.8962 21.3229 11.4214 21.0295 11.1289L19.9705 12.1912ZM6.66552 10.5602C6.95886 10.2678 6.95959 9.79289 6.66714 9.49955C6.3747 9.20621 5.89982 9.20548 5.60648 9.49793L6.66552 10.5602ZM3.97048 11.1289C3.67714 11.4214 3.67641 11.8962 3.96886 12.1896C4.2613 12.4829 4.73618 12.4837 5.02952 12.1912L3.97048 11.1289ZM13.75 19.0001C13.75 19.4143 14.0858 19.7501 14.5 19.7501C14.9142 19.7501 15.25 19.4143 15.25 19.0001H13.75ZM9.75 19.0001C9.75 19.4143 10.0858 19.7501 10.5 19.7501C10.9142 19.7501 11.25 19.4143 11.25 19.0001H9.75ZM18.124 6.01807V10.0391H19.624V6.01807H18.124ZM18.3445 10.5702L19.9705 12.1912L21.0295 11.1289L19.4035 9.50792L18.3445 10.5702ZM5.60648 9.49793L3.97048 11.1289L5.02952 12.1912L6.66552 10.5602L5.60648 9.49793ZM15.25 19.0001V17.2201H13.75V19.0001H15.25ZM15.25 17.2201C15.25 15.7013 14.0188 14.4701 12.5 14.4701V15.9701C13.1904 15.9701 13.75 16.5297 13.75 17.2201H15.25ZM12.5 14.4701C10.9812 14.4701 9.75 15.7013 9.75 17.2201H11.25C11.25 16.5297 11.8096 15.9701 12.5 15.9701V14.4701ZM9.75 17.2201V19.0001H11.25V17.2201H9.75Z", fill: color }))));
+};
+// COLLECTION: Xnix Circular Interface Icons
+// LICENSE: CC Attribution License
+// AUTHOR: Ankush Syal
+// https://www.svgrepo.com/svg/520794/home-20
+
+var Icons = {
+    CloseIcon: CloseIcon,
+    HomeIcon: HomeIcon,
+    CallIcon: CallIcon,
 };
 
-export { Button };
+export { Button, Icons, Input };
 //# 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

@@ -2,10 +2,129 @@
 
 var React = require('react');
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var Spinner = function (_a) {
+    var color = _a.color, size = _a.size, spinTime = _a.spinTime;
+    return (React.createElement(React.Fragment, 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" }))))))));
+};
+
 var Button = function (_a) {
-    var label = _a.label;
-    return React.createElement("button", null, label);
+    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) }),
+        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) },
+        prefixElement,
+        React.createElement("input", __assign({}, restProps, { className: className, style: __assign({ outline: 'none', border: 'none', flex: 1 }, style) })),
+        suffixElement));
+};
+
+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;
+    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" }),
+        React.createElement("g", { id: "SVGRepo_iconCarrier" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z", fill: color }))));
+};
+// COLLECTION: Wave Oval Interface Icons
+// LICENSE: PD License
+// 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;
+    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" }),
+        React.createElement("g", { id: "SVGRepo_iconCarrier" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.36343 6.36195C7.24343 5.43495 7.55443 5.17495 7.92943 5.05395C8.18895 4.98595 8.46112 4.98217 8.72243 5.04295C9.06643 5.14295 9.15743 5.21895 10.2854 6.34295C11.2764 7.32995 11.3754 7.43695 11.4704 7.62995C11.6521 7.96873 11.6805 8.36894 11.5484 8.72995C11.4484 9.00495 11.3064 9.18695 10.7054 9.78995L10.3134 10.183C10.2105 10.2876 10.1863 10.4464 10.2534 10.577C11.1244 12.0628 12.36 13.3019 13.8434 14.177C14.0142 14.2684 14.2245 14.2389 14.3634 14.104L14.7404 13.733C14.9734 13.4941 15.2202 13.2691 15.4794 13.059C15.8866 12.809 16.3939 12.7867 16.8214 13C17.0304 13.1 17.0994 13.162 18.1214 14.182C19.1754 15.233 19.2054 15.266 19.3214 15.507C19.5397 15.9059 19.5374 16.3891 19.3154 16.786C19.2024 17.01 19.1334 17.091 18.5404 17.697C18.1824 18.063 17.8454 18.397 17.7914 18.446C17.3022 18.851 16.6746 19.0497 16.0414 19C14.883 18.8944 13.7617 18.5363 12.7564 17.951C10.5296 16.7711 8.63383 15.0521 7.24243 12.951C6.93937 12.5112 6.66994 12.0492 6.43643 11.569C5.81001 10.4953 5.48653 9.27189 5.50043 8.02895C5.54825 7.37871 5.86008 6.77637 6.36343 6.36195Z", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))));
+};
+// COLLECTION: Xnix Circular Interface Icons
+// LICENSE: CC Attribution License
+// 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;
+    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" }),
+        React.createElement("g", { id: "SVGRepo_iconCarrier" },
+            React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.867 15.8321L18.873 10.0391L14.75 5.92908C13.5057 4.69031 11.4942 4.69031 10.25 5.92908L6.13599 10.0291V15.8291C6.1393 17.5833 7.56377 19.0028 9.31799 19.0001H15.685C17.438 19.0029 18.862 17.5851 18.867 15.8321Z", stroke: color, "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+            React.createElement("path", { d: "M19.624 6.01807C19.624 5.60385 19.2882 5.26807 18.874 5.26807C18.4598 5.26807 18.124 5.60385 18.124 6.01807H19.624ZM18.874 10.0391H18.124C18.124 10.2384 18.2033 10.4295 18.3445 10.5702L18.874 10.0391ZM19.9705 12.1912C20.2638 12.4837 20.7387 12.4829 21.0311 12.1896C21.3236 11.8962 21.3229 11.4214 21.0295 11.1289L19.9705 12.1912ZM6.66552 10.5602C6.95886 10.2678 6.95959 9.79289 6.66714 9.49955C6.3747 9.20621 5.89982 9.20548 5.60648 9.49793L6.66552 10.5602ZM3.97048 11.1289C3.67714 11.4214 3.67641 11.8962 3.96886 12.1896C4.2613 12.4829 4.73618 12.4837 5.02952 12.1912L3.97048 11.1289ZM13.75 19.0001C13.75 19.4143 14.0858 19.7501 14.5 19.7501C14.9142 19.7501 15.25 19.4143 15.25 19.0001H13.75ZM9.75 19.0001C9.75 19.4143 10.0858 19.7501 10.5 19.7501C10.9142 19.7501 11.25 19.4143 11.25 19.0001H9.75ZM18.124 6.01807V10.0391H19.624V6.01807H18.124ZM18.3445 10.5702L19.9705 12.1912L21.0295 11.1289L19.4035 9.50792L18.3445 10.5702ZM5.60648 9.49793L3.97048 11.1289L5.02952 12.1912L6.66552 10.5602L5.60648 9.49793ZM15.25 19.0001V17.2201H13.75V19.0001H15.25ZM15.25 17.2201C15.25 15.7013 14.0188 14.4701 12.5 14.4701V15.9701C13.1904 15.9701 13.75 16.5297 13.75 17.2201H15.25ZM12.5 14.4701C10.9812 14.4701 9.75 15.7013 9.75 17.2201H11.25C11.25 16.5297 11.8096 15.9701 12.5 15.9701V14.4701ZM9.75 17.2201V19.0001H11.25V17.2201H9.75Z", fill: color }))));
+};
+// COLLECTION: Xnix Circular Interface Icons
+// LICENSE: CC Attribution License
+// AUTHOR: Ankush Syal
+// https://www.svgrepo.com/svg/520794/home-20
+
+var Icons = {
+    CloseIcon: CloseIcon,
+    HomeIcon: HomeIcon,
+    CallIcon: CallIcon,
 };
 
 exports.Button = Button;
+exports.Icons = Icons;
+exports.Input = Input;
 //# 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/dist/src/components/button/Button.d.ts

@@ -0,0 +1,9 @@
+import React, { ButtonHTMLAttributes, ReactNode } from 'react';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    loading?: boolean;
+    spinner?: ReactNode;
+    prefixElement?: ReactNode;
+    suffixElement?: ReactNode;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

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

@@ -0,0 +1,4 @@
+import { IconProps } from './index';
+import React from 'react';
+declare const CallIcon: React.FC<IconProps>;
+export default CallIcon;

package/dist/src/components/icons/CloseIcon.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from './index';
+import React from 'react';
+declare const CloseIcon: React.FC<IconProps>;
+export default CloseIcon;

package/dist/src/components/icons/HomeIcon.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from './index';
+import React from 'react';
+declare const HomeIcon: React.FC<IconProps>;
+export default HomeIcon;

package/dist/src/components/icons/SearchIcon.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from './index';
+import React from 'react';
+declare const SearchIcon: React.FC<IconProps>;
+export default SearchIcon;

package/dist/src/components/icons/index.d.ts

@@ -0,0 +1,10 @@
+export { default as CloseIcon } from './CloseIcon';
+export { default as CallIcon } from './CallIcon';
+export { default as HomeIcon } from './HomeIcon';
+export { default as SearchIcon } from './SearchIcon';
+export interface IconProps {
+    color?: string;
+    size?: string;
+    fill?: string;
+    bgColor?: string;
+}

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

@@ -0,0 +1,10 @@
+import React, { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    clearable?: boolean;
+    containerStyle?: CSSProperties;
+    containerClassName?: string;
+    prefixElement?: ReactNode;
+    suffixElement?: ReactNode;
+}
+declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/src/components/spinner/Spinner.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import '../style.css';
+interface SpinnerProps {
+    color?: string;
+    size?: string;
+    spinTime?: string;
+    className?: string;
+}
+declare const Spinner: React.FC<SpinnerProps>;
+export default Spinner;

package/dist/src/index.d.ts

@@ -0,0 +1,8 @@
+import Button from './components/button/Button';
+import Input from './components/input/Input';
+declare const Icons: {
+    CloseIcon: import("react").FC<import("./components/icons").IconProps>;
+    HomeIcon: import("react").FC<import("./components/icons").IconProps>;
+    CallIcon: import("react").FC<import("./components/icons").IconProps>;
+};
+export { Button, Input, Icons };

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import Button from '../src/components/button/Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+export declare const Default: {
+    args: {
+        children: string;
+    };
+};
+export declare const Loading: {
+    args: {
+        children: string;
+        loading: boolean;
+    };
+};
+export declare const WithPrefix: {
+    args: {
+        prefixElement: React.JSX.Element;
+        children: string;
+    };
+};
+export declare const WithSuffix: {
+    args: {
+        suffixElement: React.JSX.Element;
+        children: string;
+    };
+};

package/dist/stories/Input.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Input from '../src/components/input/Input';
+declare const meta: Meta<typeof Input>;
+export default meta;
+export declare const Default: StoryObj<typeof Input>;
+export declare const WithPrefix: StoryObj<typeof Input>;
+export declare const WithSuffix: StoryObj<typeof Input>;

package/dist/stories/Spinner.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/react';
+import Spinner from '../src/components/spinner/Spinner';
+declare const meta: Meta<typeof Spinner>;
+export default meta;
+export declare const Default: {
+    args: {
+        size: string;
+    };
+};

package/package.json

@@ -1,26 +1,55 @@
 {
   "name": "jy-headless",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
+  "typings": "dist/index.d.ts",
   "module": "dist/index.esm.js",
-  "types": "dist/types/index.d.ts",
   "scripts": {
-    "build": "rollup -c"
+    "build": " rollup -c",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "types": {
+      "import": "./dist/index.d.ts",
+      "require": "./dist/index.d.cts"
+    },
+    "import": "./dist/index.esm.js",
+    "require": "./dist/index.cjs"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "type": "module",
   "devDependencies": {
+    "@chromatic-com/storybook": "3.2.4",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
+    "@storybook/addon-essentials": "8.5.0",
+    "@storybook/addon-interactions": "8.5.0",
+    "@storybook/addon-onboarding": "8.5.0",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/blocks": "8.5.0",
+    "@storybook/react": "8.5.0",
+    "@storybook/react-vite": "8.5.0",
+    "@storybook/test": "8.5.0",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
+    "postcss": "^8.5.1",
+    "prettier": "^3.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rollup": "^4.31.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
+    "storybook": "8.5.0",
     "typescript": "^5.7.3"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
   }
 }

package/.idea/aws.xml

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="accountSettings">
-    <option name="activeRegion" value="us-east-1" />
-    <option name="recentlyUsedRegions">
-      <list>
-        <option value="us-east-1" />
-      </list>
-    </option>
-  </component>
-</project>

package/.idea/git_toolbox_prj.xml

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="GitToolBoxProjectSettings">
-    <option name="commitMessageIssueKeyValidationOverride">
-      <BoolValueOverride>
-        <option name="enabled" value="true" />
-      </BoolValueOverride>
-    </option>
-    <option name="commitMessageValidationEnabledOverride">
-      <BoolValueOverride>
-        <option name="enabled" value="true" />
-      </BoolValueOverride>
-    </option>
-  </component>
-</project>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/jpa-buddy.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JpaBuddyIdeaProjectConfig">
-    <option name="renamerInitialized" value="true" />
-  </component>
-</project>

package/.idea/jy-headless.iml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/misc.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="openjdk-21" project-jdk-type="JavaSDK">
-    <output url="file://$PROJECT_DIR$/out" />
-  </component>
-  <component name="ProjectType">
-    <option name="id" value="jpab" />
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/jy-headless.iml" filepath="$PROJECT_DIR$/.idea/jy-headless.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

package/dist/components/button/Button.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface ButtonProps {
-    label: string;
-}
-declare const Button: React.FC<ButtonProps>;
-export default Button;

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-import Button from './components/button/Button';
-export { Button };

package/rollup.config.mjs

@@ -1,27 +0,0 @@
-import typescript from 'rollup-plugin-typescript2';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-
-export default {
-	input: 'src/index.tsx',
-	output: [
-		{
-			file: 'dist/index.js',
-			format: 'cjs',
-			sourcemap: true,
-		},
-		{
-			file: 'dist/index.esm.js',
-			format: 'esm',
-			sourcemap: true,
-		},
-	],
-	plugins: [
-		resolve(),
-		commonjs(),
-		typescript({
-			tsconfig: './tsconfig.json',
-		}),
-	],
-	external: ['react', 'react-dom'],
-};

package/src/components/button/Button.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-interface ButtonProps {
-    label: string;
-}
-
-const Button: React.FC<ButtonProps> = ({ label }) => {
-    return <button>{label}</button>;
-};
-
-export default Button;

package/src/index.tsx

@@ -1,3 +0,0 @@
-import Button from './components/button/Button';
-
-export { Button };

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES5",
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "jsx": "react",
-    "declaration": true,
-    "declarationDir": "dist/types",
-    "outDir": "dist",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["src/**/*"]
-}