naria-ui 0.1.38 → 0.1.39

package/dist/naria-ui.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react");function oe(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const d=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(s,o,d.get?d:{enumerable:!0,get:()=>t[o]})}}return s.default=t,Object.freeze(s)}const I=oe(i);var V={exports:{}},U={};/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react");function oe(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const d=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(a,o,d.get?d:{enumerable:!0,get:()=>t[o]})}}return a.default=t,Object.freeze(a)}const z=oe(i);var V={exports:{}},U={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var K;function ce(){if(K)return U;K=1;var t=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function o(d,c,f){var p=null;if(f!==void 0&&(p=""+f),c.key!==void 0&&(p=""+c.key),"key"in c){f={};for(var g in c)g!=="key"&&(f[g]=c[g])}else f=c;return c=f.ref,{$$typeof:t,type:d,key:p,ref:c!==void 0?c:null,props:f}}return U.Fragment=s,U.jsx=o,U.jsxs=o,U}var H={};/**
+ */var K;function ce(){if(K)return U;K=1;var t=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function o(d,c,f){var p=null;if(f!==void 0&&(p=""+f),c.key!==void 0&&(p=""+c.key),"key"in c){f={};for(var g in c)g!=="key"&&(f[g]=c[g])}else f=c;return c=f.ref,{$$typeof:t,type:d,key:p,ref:c!==void 0?c:null,props:f}}return U.Fragment=a,U.jsx=o,U.jsxs=o,U}var H={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,13 +14,13 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var ee;function ie(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===b?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case L:return"Fragment";case O:return"Profiler";case S:return"StrictMode";case M:return"Suspense";case _:return"SuspenseList";case C:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case N:return"Portal";case W:return(e.displayName||"Context")+".Provider";case G:return(e._context.displayName||"Context")+".Consumer";case u:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case T:return n=e.displayName||null,n!==null?n:t(e.type)||"Memo";case Y:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function s(e){return""+e}function o(e){try{s(e);var n=!1}catch{n=!0}if(n){n=console;var r=n.error,l=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",l),s(e)}}function d(e){if(e===L)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===Y)return"<...>";try{var n=t(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function c(){var e=A.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function p(e){if(x.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function g(e,n){function r(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function E(){var e=t(this.type);return P[e]||(P[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function h(e,n,r,l,w,j,X,Z){return r=j.ref,e={$$typeof:y,type:e,key:n,props:j,_owner:w},(r!==void 0?r:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:E}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function z(e,n,r,l,w,j,X,Z){var m=n.children;if(m!==void 0)if(l)if(q(m)){for(l=0;l<m.length;l++)v(m[l]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else v(m);if(x.call(n,"key")){m=t(e);var $=Object.keys(n).filter(function(se){return se!=="key"});l=0<$.length?"{key: someKey, "+$.join(": ..., ")+": ...}":"{key: someKey}",J[m+l]||($=0<$.length?"{"+$.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var ee;function ie(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===b?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case O:return"Fragment";case A:return"Profiler";case S:return"StrictMode";case M:return"Suspense";case _:return"SuspenseList";case C:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case y:return"Portal";case W:return(e.displayName||"Context")+".Provider";case G:return(e._context.displayName||"Context")+".Consumer";case u:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case T:return n=e.displayName||null,n!==null?n:t(e.type)||"Memo";case Y:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function a(e){return""+e}function o(e){try{a(e);var n=!1}catch{n=!0}if(n){n=console;var r=n.error,l=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",l),a(e)}}function d(e){if(e===O)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===Y)return"<...>";try{var n=t(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function c(){var e=P.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function p(e){if(x.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function g(e,n){function r(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function E(){var e=t(this.type);return $[e]||($[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function h(e,n,r,l,w,j,X,Z){return r=j.ref,e={$$typeof:L,type:e,key:n,props:j,_owner:w},(r!==void 0?r:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:E}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,n,r,l,w,j,X,Z){var m=n.children;if(m!==void 0)if(l)if(q(m)){for(l=0;l<m.length;l++)v(m[l]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else v(m);if(x.call(n,"key")){m=t(e);var I=Object.keys(n).filter(function(ae){return ae!=="key"});l=0<I.length?"{key: someKey, "+I.join(": ..., ")+": ...}":"{key: someKey}",J[m+l]||(I=0<I.length?"{"+I.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,l,m,$,m),J[m+l]=!0)}if(m=null,r!==void 0&&(o(r),m=""+r),p(n)&&(o(n.key),m=""+n.key),"key"in n){r={};for(var Q in n)Q!=="key"&&(r[Q]=n[Q])}else r=n;return m&&g(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),h(e,m,j,w,c(),r,X,Z)}function v(e){typeof e=="object"&&e!==null&&e.$$typeof===y&&e._store&&(e._store.validated=1)}var R=i,y=Symbol.for("react.transitional.element"),N=Symbol.for("react.portal"),L=Symbol.for("react.fragment"),S=Symbol.for("react.strict_mode"),O=Symbol.for("react.profiler"),G=Symbol.for("react.consumer"),W=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),M=Symbol.for("react.suspense"),_=Symbol.for("react.suspense_list"),T=Symbol.for("react.memo"),Y=Symbol.for("react.lazy"),C=Symbol.for("react.activity"),b=Symbol.for("react.client.reference"),A=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,x=Object.prototype.hasOwnProperty,q=Array.isArray,k=console.createTask?console.createTask:function(){return null};R={"react-stack-bottom-frame":function(e){return e()}};var D,P={},F=R["react-stack-bottom-frame"].bind(R,f)(),B=k(d(f)),J={};H.Fragment=L,H.jsx=function(e,n,r,l,w){var j=1e4>A.recentlyCreatedOwnerStacks++;return z(e,n,r,!1,l,w,j?Error("react-stack-top-frame"):F,j?k(d(e)):B)},H.jsxs=function(e,n,r,l,w){var j=1e4>A.recentlyCreatedOwnerStacks++;return z(e,n,r,!0,l,w,j?Error("react-stack-top-frame"):F,j?k(d(e)):B)}}()),H}var re;function le(){return re||(re=1,process.env.NODE_ENV==="production"?V.exports=ce():V.exports=ie()),V.exports}var a=le();const ue=({type:t="button",value:s})=>a.jsx("button",{type:t,children:s}),fe=({type:t="text",placeholder:s,wrapperClass:o="",labelClass:d="",inputClass:c="",errorClass:f="",label:p,hasError:g,register:E,name:h,isDisabled:z=!1,autocomplete:v=!1,...R})=>a.jsxs("div",{className:o,children:[a.jsxs("label",{htmlFor:h,className:`${d} ${g&&"error"}`,children:[p,a.jsx("input",{disabled:z,autoComplete:v?"on":"off",id:h,...E,...R,type:t,name:h,className:`${c} ${g&&"error"} ${f}`,placeholder:s})]}),g&&a.jsx("p",{className:f,children:g})]}),te=t=>I.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",...t},I.createElement("path",{fill:"currentColor",d:"M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z"})),de=t=>I.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",...t},I.createElement("path",{fill:"currentColor",d:"M7.5 105c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l151 151 151-151c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-151 151 151 151c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-151-151-151 151c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l151-151-151-151z"})),ne=t=>I.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",fill:"currentColor",...t},I.createElement("path",{fill:"currentColor",d:"M368 208a160 160 0 1 0 -320 0 160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z"})),ge=()=>{const[t,s]=i.useState(typeof window<"u"?window.innerWidth:0),o=()=>s(typeof window<"u"?window.innerWidth:0);return i.useEffect(()=>(window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)),[t]),t},ae=({classNames:t={wrapper:"",color:""}})=>a.jsxs("svg",{className:`nariaLoading ${t.wrapper}`,viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[a.jsx("path",{d:"M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z",stroke:"currentColor",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round"}),a.jsx("path",{d:"M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762",stroke:"currentColor",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",className:t.color})]}),me=()=>{const t=`${window.location.pathname}${window.location.search}`;window.history.replaceState(null,"",t)},he=t=>{window.location.hash=t},pe=t=>{const[s,o]=i.useState(!1);return i.useEffect(()=>{const d=c=>{window.location.hash!==t?o(!0):o(!1)};return window.addEventListener("hashchange",d),()=>{window.removeEventListener("hashchange",d)}},[]),s},we=(t,s,o)=>{i.useEffect(()=>{function d(c){s.current&&!s.current.contains(c.target)&&t?.current&&!t?.current.contains(c.target)&&o()}return document.addEventListener("mousedown",d),()=>{document.removeEventListener("mousedown",d)}},[t,o])},ve=({options:t,label:s,hasError:o,title:d,value:c,api:f,selected:p,placeholder:g,disabled:E=!1,pagination:h,optionFilterLabel:z,hasSearch:v=!1,onSelectChange:R})=>{let y=!0;const N=ge(),L=pe("#select"),[S,O]=i.useState(!1),[G,W]=i.useState(!0),[u,M]=i.useState(null),[_,T]=i.useState(null),[Y,C]=i.useState(""),[b,A]=i.useState({page:1,pageLabel:"page",size:20,sizeLabel:"size",isLoading:!1}),x=i.useRef(void 0),q=i.useRef(void 0),k=i.useRef(void 0),D=async()=>{if(x?.current)try{const r=await fetch(x?.current);if(!r.ok)throw new Error(`Response status: ${r.status}`);return await r.json()}catch(r){console.error(r.message)}};i.useEffect(()=>()=>{y=!1},[]),i.useEffect(()=>{if(f?.length){if(x.current=f,x.current.includes(h?.pageLabel||"page")){const r=new URL(f);r.searchParams.set(h?.pageLabel||"page",(h?.page||b.page).toString()),r.searchParams.set(h?.sizeLabel||"size",(h?.size||b.size).toString()),x.current=r.href}W(!0),D().then(r=>{y&&(W(!1),T(r))})}},[f,h]),i.useEffect(()=>{if(b.isLoading){if(x.current.includes(h?.pageLabel||"page")){const r=new URL(x.current);r.searchParams.set(h?.pageLabel||"page",b.page.toString()),x.current=r.href}D().then(r=>{y&&(W(!1),A({...b,isLoading:!1}),T([..._,...r]))})}},[b]),i.useEffect(()=>{N<768&&(S?(he("select"),document.body.style.overflow="hidden",k.current?.focus()):(window.location.hash&&!document.referrer.includes("#")&&me(),document.body.style.overflow="auto"))},[S]),i.useEffect(()=>{p&&t?.length&&(t?.find(r=>r[s]===p)?M(t?.find(r=>r[s]===p)):M(p))},[p]),i.useEffect(()=>{u&&v&&(c?.length&&_?.find(r=>r[s]===u[s])?C(_?.find(r=>r[s]===u[s])[c]||""):C(u))},[u]),i.useEffect(()=>{L&&O(!1)},[L]),i.useEffect(()=>{t?.length&&T(t)},[t]);const P=()=>{v&&T(t),O(r=>!r)},F=()=>{v&&(T(t),C(typeof u=="string"?u:u?u[c]:"")),O(!1)},B=r=>{v&&(c?.length?C(r[c]):C(r)),M(r),P(),R&&R(r)},J=r=>{if(!u)return"";if(s?.length&&r[s]===u[s]||r===u)return"bg-grey-100"},e=r=>{_?.length&&!b.isLoading&&r.target.offsetHeight+r.target.scrollTop>=r.target.scrollHeight-100&&A({page:b.page+1,isLoading:!0})},n=r=>{const l=r?.target?.value?.length?t.filter(w=>typeof w=="object"?w[c].includes(r?.target?.value):w.includes(r?.target?.value)):t;T(l),C(r?.target?.value),S||O(!0)};return we(q,k,F),a.jsxs("div",{className:`nariaSelect ${E?"nariaSelect-disabled":""}`,children:[a.jsxs("label",{className:`cursor-pointer
-                ${o&&"!text-danger-100"}`,children:[a.jsx("span",{className:"",children:d}),v?a.jsxs("div",{className:"nariaSearchInput",children:[a.jsx("input",{ref:k,placeholder:g?.length?g:"Select",className:`${u?"text-dark-100":"text-grey-300"} 
-                                ${o&&"!border-danger-100 focus:border-danger-100 outline-danger-100"}`,value:Y,disabled:E,type:"text",onClick:P,onChange:n}),S?a.jsx(ne,{className:"nariaSearchIcon"}):a.jsx(te,{className:`nariaArrowIcon ${S?"nariaArrowIcon-rotate-180":""}`})]}):a.jsxs("button",{type:"button",ref:k,disabled:E,className:`nariaHandler ${u?"text-dark-100":"text-grey-300"} 
-                                ${o&&"!border-danger-100 focus:border-danger-100 outline-danger-100"}`,onClick:P,children:[u?c?.length?u[c]:u:g?.length?g:"Select"," ",a.jsx(te,{className:`nariaArrowIcon ${S?"nariaArrowIcon-rotate-180":""}`})]})]}),S?a.jsxs("div",{className:`nariaListWrapper ${N<768?"nariaListWrapper-mobile":""}`,ref:q,children:[v&&N<768?a.jsxs("div",{className:"nariaSearchInput",children:[a.jsx("input",{ref:k,placeholder:g?.length?g:"Select",className:`${u?"text-dark-100":"text-grey-300"} 
-                                ${o&&"!border-danger-100 focus:border-danger-100 outline-danger-100"}`,value:Y,disabled:E,type:"text",onChange:n}),a.jsx(ne,{className:"nariaSearchIcon"})]}):void 0,a.jsx("div",{className:`nariaList ${N<768?"nariaList-mobile":"nariaList-desktop"}`,onScroll:e,children:f&&G?a.jsx("div",{className:"nariaLoadingWrapper",children:a.jsx(ae,{})}):a.jsxs(a.Fragment,{children:[N<768?a.jsx("div",{className:"sticky top-0 text-left",children:a.jsx("button",{className:"p-3",onClick:F,disabled:E,children:a.jsx(de,{className:"w-6"})})}):void 0,_?.length?a.jsx(a.Fragment,{children:_?.map((r,l)=>a.jsx("button",{type:"button",onClick:()=>B(r),disabled:E,className:`text-right py-2.5 px-4 text-base hover:bg-grey-100 rounded-lg ${J(r)}`,children:c?.length?r[c]:r},l.toString()))}):a.jsx("div",{children:"No Data"}),b.isLoading?a.jsx("div",{className:"nariaLoadingMoreWrapper",children:a.jsx(ae,{})}):void 0]})})]}):void 0,o&&a.jsx("p",{className:"text-xs mt-1 text-danger-100",children:o})]})};function be(t){return t.charAt(0).toUpperCase()+t.slice(1)}exports.Button=ue;exports.Input=fe;exports.Select=ve;exports.capitalize=be;
+  <%s key={someKey} {...props} />`,l,m,I,m),J[m+l]=!0)}if(m=null,r!==void 0&&(o(r),m=""+r),p(n)&&(o(n.key),m=""+n.key),"key"in n){r={};for(var Q in n)Q!=="key"&&(r[Q]=n[Q])}else r=n;return m&&g(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),h(e,m,j,w,c(),r,X,Z)}function v(e){typeof e=="object"&&e!==null&&e.$$typeof===L&&e._store&&(e._store.validated=1)}var R=i,L=Symbol.for("react.transitional.element"),y=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),S=Symbol.for("react.strict_mode"),A=Symbol.for("react.profiler"),G=Symbol.for("react.consumer"),W=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),M=Symbol.for("react.suspense"),_=Symbol.for("react.suspense_list"),T=Symbol.for("react.memo"),Y=Symbol.for("react.lazy"),C=Symbol.for("react.activity"),b=Symbol.for("react.client.reference"),P=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,x=Object.prototype.hasOwnProperty,q=Array.isArray,k=console.createTask?console.createTask:function(){return null};R={"react-stack-bottom-frame":function(e){return e()}};var D,$={},F=R["react-stack-bottom-frame"].bind(R,f)(),B=k(d(f)),J={};H.Fragment=O,H.jsx=function(e,n,r,l,w){var j=1e4>P.recentlyCreatedOwnerStacks++;return N(e,n,r,!1,l,w,j?Error("react-stack-top-frame"):F,j?k(d(e)):B)},H.jsxs=function(e,n,r,l,w){var j=1e4>P.recentlyCreatedOwnerStacks++;return N(e,n,r,!0,l,w,j?Error("react-stack-top-frame"):F,j?k(d(e)):B)}}()),H}var re;function le(){return re||(re=1,process.env.NODE_ENV==="production"?V.exports=ce():V.exports=ie()),V.exports}var s=le();const ue=({type:t="button",value:a})=>s.jsx("button",{type:t,children:a}),fe=({type:t="text",placeholder:a,wrapperClass:o="",labelClass:d="",inputClass:c="",errorClass:f="",label:p,hasError:g,register:E,name:h,isDisabled:N=!1,autocomplete:v=!1,...R})=>s.jsxs("div",{className:o,children:[s.jsxs("label",{htmlFor:h,className:`${d} ${g&&"error"}`,children:[p,s.jsx("input",{disabled:N,autoComplete:v?"on":"off",id:h,...E,...R,type:t,name:h,className:`${c} ${g&&"error"} ${f}`,placeholder:a})]}),g&&s.jsx("p",{className:f,children:g})]}),te=t=>z.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",...t},z.createElement("path",{fill:"currentColor",d:"M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z"})),de=t=>z.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",...t},z.createElement("path",{fill:"currentColor",d:"M7.5 105c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l151 151 151-151c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-151 151 151 151c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-151-151-151 151c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l151-151-151-151z"})),ne=t=>z.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",fill:"currentColor",...t},z.createElement("path",{fill:"currentColor",d:"M368 208a160 160 0 1 0 -320 0 160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z"})),ge=()=>{const[t,a]=i.useState(typeof window<"u"?window.innerWidth:0),o=()=>a(typeof window<"u"?window.innerWidth:0);return i.useEffect(()=>(window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)),[t]),t},se=({classNames:t={wrapper:"",color:""}})=>s.jsxs("svg",{className:`nariaLoading ${t.wrapper}`,viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[s.jsx("path",{d:"M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z",stroke:"currentColor",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round"}),s.jsx("path",{d:"M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762",stroke:"currentColor",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",className:t.color})]}),me=()=>{const t=`${window.location.pathname}${window.location.search}`;window.history.replaceState(null,"",t)},he=t=>{window.location.hash=t},pe=t=>{const[a,o]=i.useState(!1);return i.useEffect(()=>{const d=c=>{window.location.hash!==t?o(!0):o(!1)};return window.addEventListener("hashchange",d),()=>{window.removeEventListener("hashchange",d)}},[]),a},we=(t,a,o)=>{i.useEffect(()=>{function d(c){a.current&&!a.current.contains(c.target)&&t?.current&&!t?.current.contains(c.target)&&o()}return document.addEventListener("mousedown",d),()=>{document.removeEventListener("mousedown",d)}},[t,o])},ve=({options:t,label:a,hasError:o,title:d,value:c,api:f,selected:p,placeholder:g,disabled:E=!1,pagination:h,optionFilterLabel:N,hasSearch:v=!1,onSelectChange:R})=>{let L=!0;const y=ge(),O=pe("#select"),[S,A]=i.useState(!1),[G,W]=i.useState(!0),[u,M]=i.useState(null),[_,T]=i.useState(null),[Y,C]=i.useState(""),[b,P]=i.useState({page:1,pageLabel:"page",size:20,sizeLabel:"size",isLoading:!1}),x=i.useRef(void 0),q=i.useRef(void 0),k=i.useRef(void 0),D=async()=>{if(x?.current)try{const r=await fetch(x?.current);if(!r.ok)throw new Error(`Response status: ${r.status}`);return await r.json()}catch(r){console.error(r.message)}};i.useEffect(()=>()=>{L=!1},[]),i.useEffect(()=>{if(f?.length){if(x.current=f,x.current.includes(h?.pageLabel||"page")){const r=new URL(f);r.searchParams.set(h?.pageLabel||"page",(h?.page||b.page).toString()),r.searchParams.set(h?.sizeLabel||"size",(h?.size||b.size).toString()),x.current=r.href}W(!0),D().then(r=>{L&&(W(!1),T(r))})}},[f,h]),i.useEffect(()=>{if(b.isLoading){if(x.current.includes(h?.pageLabel||"page")){const r=new URL(x.current);r.searchParams.set(h?.pageLabel||"page",b.page.toString()),x.current=r.href}D().then(r=>{L&&(W(!1),P({...b,isLoading:!1}),T([..._,...r]))})}},[b]),i.useEffect(()=>{y<768&&(S?(he("select"),document.body.style.overflow="hidden",k.current?.focus()):(window.location.hash&&!document.referrer.includes("#")&&me(),document.body.style.overflow="auto"))},[S]),i.useEffect(()=>{p&&t?.length&&(t?.find(r=>r[a]===p)?M(t?.find(r=>r[a]===p)):M(p))},[p]),i.useEffect(()=>{u&&v&&(c?.length&&_?.find(r=>r[a]===u[a])?C(_?.find(r=>r[a]===u[a])[c]||""):C(u))},[u]),i.useEffect(()=>{O&&A(!1)},[O]),i.useEffect(()=>{t?.length&&T(t)},[t]);const $=()=>{v&&T(t),A(r=>!r)},F=()=>{v&&(T(t),C(typeof u=="string"?u:u?u[c]:"")),A(!1)},B=r=>{v&&(c?.length?C(r[c]):C(r)),M(r),$(),R&&R(r)},J=r=>{if(!u)return"";if(a?.length&&r[a]===u[a]||r===u)return"bg-grey-100"},e=r=>{_?.length&&!b.isLoading&&r.target.offsetHeight+r.target.scrollTop>=r.target.scrollHeight-100&&P({page:b.page+1,isLoading:!0})},n=r=>{const l=r?.target?.value?.length?t.filter(w=>typeof w=="object"?w[N?.length?N:c].includes(r?.target?.value):w.includes(r?.target?.value)):t;T(l),C(r?.target?.value),S||A(!0)};return we(q,k,F),s.jsxs("div",{className:`nariaSelect ${E?"nariaSelect-disabled":""}`,children:[s.jsxs("label",{className:`cursor-pointer
+                ${o&&"!text-danger-100"}`,children:[s.jsx("span",{className:"",children:d}),v?s.jsxs("div",{className:"nariaSearchInput",children:[s.jsx("input",{ref:k,placeholder:g?.length?g:"Select",className:`${u?"text-dark-100":"text-grey-300"} 
+                                ${o&&"!border-danger-100 focus:border-danger-100 outline-danger-100"}`,value:Y,disabled:E,type:"text",onClick:$,onChange:n}),S?s.jsx(ne,{className:"nariaSearchIcon"}):s.jsx(te,{className:`nariaArrowIcon ${S?"nariaArrowIcon-rotate-180":""}`})]}):s.jsxs("button",{type:"button",ref:k,disabled:E,className:`nariaHandler ${u?"text-dark-100":"text-grey-300"} 
+                                ${o&&"!border-danger-100 focus:border-danger-100 outline-danger-100"}`,onClick:$,children:[u?c?.length?u[c]:u:g?.length?g:"Select"," ",s.jsx(te,{className:`nariaArrowIcon ${S?"nariaArrowIcon-rotate-180":""}`})]})]}),S?s.jsxs("div",{className:`nariaListWrapper ${y<768?"nariaListWrapper-mobile":""}`,ref:q,children:[v&&y<768?s.jsxs("div",{className:"nariaSearchInput",children:[s.jsx("input",{ref:k,placeholder:g?.length?g:"Select",className:`${u?"text-dark-100":"text-grey-300"} 
+                                ${o&&"!border-danger-100 focus:border-danger-100 outline-danger-100"}`,value:Y,disabled:E,type:"text",onChange:n}),s.jsx(ne,{className:"nariaSearchIcon"})]}):void 0,s.jsx("div",{className:`nariaList ${y<768?"nariaList-mobile":"nariaList-desktop"}`,onScroll:e,children:f&&G?s.jsx("div",{className:"nariaLoadingWrapper",children:s.jsx(se,{})}):s.jsxs(s.Fragment,{children:[y<768?s.jsx("div",{className:"sticky top-0 text-left",children:s.jsx("button",{className:"p-3",onClick:F,disabled:E,children:s.jsx(de,{className:"w-6"})})}):void 0,_?.length?s.jsx(s.Fragment,{children:_?.map((r,l)=>s.jsx("button",{type:"button",onClick:()=>B(r),disabled:E,className:`text-right py-2.5 px-4 text-base hover:bg-grey-100 rounded-lg ${J(r)}`,children:c?.length?r[c]:r},l.toString()))}):s.jsx("div",{children:"No Data"}),b.isLoading?s.jsx("div",{className:"nariaLoadingMoreWrapper",children:s.jsx(se,{})}):void 0]})})]}):void 0,o&&s.jsx("p",{className:"text-xs mt-1 text-danger-100",children:o})]})};function be(t){return t.charAt(0).toUpperCase()+t.slice(1)}exports.Button=ue;exports.Input=fe;exports.Select=ve;exports.capitalize=be;

package/dist/naria-ui.es.js

@@ -1,4 +1,4 @@
-import * as z from "react";
+import * as W from "react";
 import ie, { useState as N, useEffect as b, useRef as ee } from "react";
 var G = { exports: {} }, H = {};
 /**
@@ -51,13 +51,13 @@ function ue() {
         return e.$$typeof === v ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case A:
-          return "Fragment";
         case O:
+          return "Fragment";
+        case P:
           return "Profiler";
         case C:
           return "StrictMode";
-        case F:
+        case M:
           return "Suspense";
         case S:
           return "SuspenseList";
@@ -68,7 +68,7 @@ function ue() {
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case L:
+          case y:
             return "Portal";
           case Y:
             return (e.displayName || "Context") + ".Provider";
@@ -79,7 +79,7 @@ function ue() {
             return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case T:
             return n = e.displayName || null, n !== null ? n : t(e.type) || "Memo";
-          case M:
+          case D:
             n = e._payload, e = e._init;
             try {
               return t(e(n));
@@ -109,8 +109,8 @@ function ue() {
       }
     }
     function g(e) {
-      if (e === A) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === M)
+      if (e === O) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === D)
         return "<...>";
       try {
         var n = t(e);
@@ -120,7 +120,7 @@ function ue() {
       }
     }
     function o() {
-      var e = P.A;
+      var e = $.A;
       return e === null ? null : e.getOwner();
     }
     function u() {
@@ -135,7 +135,7 @@ function ue() {
     }
     function d(e, n) {
       function r() {
-        D || (D = !0, console.error(
+        F || (F = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           n
         ));
@@ -147,13 +147,13 @@ function ue() {
     }
     function E() {
       var e = t(this.type);
-      return $[e] || ($[e] = !0, console.error(
+      return I[e] || (I[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
     function m(e, n, r, i, p, R, Z, Q) {
       return r = R.ref, e = {
-        $$typeof: y,
+        $$typeof: A,
         type: e,
         key: n,
         props: R,
@@ -183,7 +183,7 @@ function ue() {
         value: Q
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function W(e, n, r, i, p, R, Z, Q) {
+    function L(e, n, r, i, p, R, Z, Q) {
       var f = n.children;
       if (f !== void 0)
         if (i)
@@ -198,10 +198,10 @@ function ue() {
         else w(f);
       if (x.call(n, "key")) {
         f = t(e);
-        var I = Object.keys(n).filter(function(ce) {
+        var z = Object.keys(n).filter(function(ce) {
           return ce !== "key";
         });
-        i = 0 < I.length ? "{key: someKey, " + I.join(": ..., ") + ": ...}" : "{key: someKey}", V[f + i] || (I = 0 < I.length ? "{" + I.join(": ..., ") + ": ...}" : "{}", console.error(
+        i = 0 < z.length ? "{key: someKey, " + z.join(": ..., ") + ": ...}" : "{key: someKey}", V[f + i] || (z = 0 < z.length ? "{" + z.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -210,7 +210,7 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           i,
           f,
-          I,
+          z,
           f
         ), V[f + i] = !0);
       }
@@ -234,9 +234,9 @@ React keys must be passed directly to JSX without using spread:
       );
     }
     function w(e) {
-      typeof e == "object" && e !== null && e.$$typeof === y && e._store && (e._store.validated = 1);
+      typeof e == "object" && e !== null && e.$$typeof === A && e._store && (e._store.validated = 1);
     }
-    var j = ie, y = Symbol.for("react.transitional.element"), L = Symbol.for("react.portal"), A = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), O = Symbol.for("react.profiler"), X = Symbol.for("react.consumer"), Y = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), F = Symbol.for("react.suspense"), S = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), M = Symbol.for("react.lazy"), k = Symbol.for("react.activity"), v = Symbol.for("react.client.reference"), P = j.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, x = Object.prototype.hasOwnProperty, q = Array.isArray, _ = console.createTask ? console.createTask : function() {
+    var j = ie, A = Symbol.for("react.transitional.element"), y = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), P = Symbol.for("react.profiler"), X = Symbol.for("react.consumer"), Y = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), M = Symbol.for("react.suspense"), S = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), k = Symbol.for("react.activity"), v = Symbol.for("react.client.reference"), $ = j.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, x = Object.prototype.hasOwnProperty, q = Array.isArray, _ = console.createTask ? console.createTask : function() {
       return null;
     };
     j = {
@@ -244,13 +244,13 @@ React keys must be passed directly to JSX without using spread:
         return e();
       }
     };
-    var D, $ = {}, U = j["react-stack-bottom-frame"].bind(
+    var F, I = {}, U = j["react-stack-bottom-frame"].bind(
       j,
       u
     )(), B = _(g(u)), V = {};
-    J.Fragment = A, J.jsx = function(e, n, r, i, p) {
-      var R = 1e4 > P.recentlyCreatedOwnerStacks++;
-      return W(
+    J.Fragment = O, J.jsx = function(e, n, r, i, p) {
+      var R = 1e4 > $.recentlyCreatedOwnerStacks++;
+      return L(
         e,
         n,
         r,
@@ -261,8 +261,8 @@ React keys must be passed directly to JSX without using spread:
         R ? _(g(e)) : B
       );
     }, J.jsxs = function(e, n, r, i, p) {
-      var R = 1e4 > P.recentlyCreatedOwnerStacks++;
-      return W(
+      var R = 1e4 > $.recentlyCreatedOwnerStacks++;
+      return L(
         e,
         n,
         r,
@@ -291,7 +291,7 @@ const xe = ({ type: t = "button", value: s }) => /* @__PURE__ */ a.jsx("button",
   hasError: d,
   register: E,
   name: m,
-  isDisabled: W = !1,
+  isDisabled: L = !1,
   autocomplete: w = !1,
   ...j
 }) => /* @__PURE__ */ a.jsxs("div", { className: c, children: [
@@ -305,7 +305,7 @@ const xe = ({ type: t = "button", value: s }) => /* @__PURE__ */ a.jsx("button",
         /* @__PURE__ */ a.jsx(
           "input",
           {
-            disabled: W,
+            disabled: L,
             autoComplete: w ? "on" : "off",
             id: m,
             ...E,
@@ -320,7 +320,7 @@ const xe = ({ type: t = "button", value: s }) => /* @__PURE__ */ a.jsx("button",
     }
   ),
   d && /* @__PURE__ */ a.jsx("p", { className: u, children: d })
-] }), ae = (t) => /* @__PURE__ */ z.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", fill: "currentColor", ...t }, /* @__PURE__ */ z.createElement("path", { fill: "currentColor", d: "M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z" })), fe = (t) => /* @__PURE__ */ z.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", fill: "currentColor", ...t }, /* @__PURE__ */ z.createElement("path", { fill: "currentColor", d: "M7.5 105c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l151 151 151-151c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-151 151 151 151c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-151-151-151 151c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l151-151-151-151z" })), oe = (t) => /* @__PURE__ */ z.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", fill: "currentColor", ...t }, /* @__PURE__ */ z.createElement("path", { fill: "currentColor", d: "M368 208a160 160 0 1 0 -320 0 160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z" })), ge = () => {
+] }), ae = (t) => /* @__PURE__ */ W.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", fill: "currentColor", ...t }, /* @__PURE__ */ W.createElement("path", { fill: "currentColor", d: "M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z" })), fe = (t) => /* @__PURE__ */ W.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", fill: "currentColor", ...t }, /* @__PURE__ */ W.createElement("path", { fill: "currentColor", d: "M7.5 105c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l151 151 151-151c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-151 151 151 151c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-151-151-151 151c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l151-151-151-151z" })), oe = (t) => /* @__PURE__ */ W.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", fill: "currentColor", ...t }, /* @__PURE__ */ W.createElement("path", { fill: "currentColor", d: "M368 208a160 160 0 1 0 -320 0 160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z" })), ge = () => {
   const [t, s] = N(typeof window < "u" ? window.innerWidth : 0), c = () => s(typeof window < "u" ? window.innerWidth : 0);
   return b(() => (window.addEventListener("resize", c), () => window.removeEventListener("resize", c)), [t]), t;
 }, se = ({
@@ -394,18 +394,18 @@ const xe = ({ type: t = "button", value: s }) => /* @__PURE__ */ a.jsx("button",
   placeholder: d,
   disabled: E = !1,
   pagination: m,
-  optionFilterLabel: W,
+  optionFilterLabel: L,
   hasSearch: w = !1,
   onSelectChange: j
 }) => {
-  let y = !0;
-  const L = ge(), A = pe("#select"), [C, O] = N(!1), [X, Y] = N(!0), [l, F] = N(null), [S, T] = N(null), [M, k] = N(""), [v, P] = N({
+  let A = !0;
+  const y = ge(), O = pe("#select"), [C, P] = N(!1), [X, Y] = N(!0), [l, M] = N(null), [S, T] = N(null), [D, k] = N(""), [v, $] = N({
     page: 1,
     pageLabel: "page",
     size: 20,
     sizeLabel: "size",
     isLoading: !1
-  }), x = ee(void 0), q = ee(void 0), _ = ee(void 0), D = async () => {
+  }), x = ee(void 0), q = ee(void 0), _ = ee(void 0), F = async () => {
     if (x?.current)
       try {
         const r = await fetch(x?.current);
@@ -417,15 +417,15 @@ const xe = ({ type: t = "button", value: s }) => /* @__PURE__ */ a.jsx("button",
       }
   };
   b(() => () => {
-    y = !1;
+    A = !1;
   }, []), b(() => {
     if (u?.length) {
       if (x.current = u, x.current.includes(m?.pageLabel || "page")) {
         const r = new URL(u);
         r.searchParams.set(m?.pageLabel || "page", (m?.page || v.page).toString()), r.searchParams.set(m?.sizeLabel || "size", (m?.size || v.size).toString()), x.current = r.href;
       }
-      Y(!0), D().then((r) => {
-        y && (Y(!1), T(r));
+      Y(!0), F().then((r) => {
+        A && (Y(!1), T(r));
       });
     }
   }, [u, m]), b(() => {
@@ -434,8 +434,8 @@ const xe = ({ type: t = "button", value: s }) => /* @__PURE__ */ a.jsx("button",
         const r = new URL(x.current);
         r.searchParams.set(m?.pageLabel || "page", v.page.toString()), x.current = r.href;
       }
-      D().then((r) => {
-        y && (Y(!1), P({
+      F().then((r) => {
+        A && (Y(!1), $({
           ...v,
           isLoading: !1
         }), T([
@@ -445,35 +445,35 @@ const xe = ({ type: t = "button", value: s }) => /* @__PURE__ */ a.jsx("button",
       });
     }
   }, [v]), b(() => {
-    L < 768 && (C ? (he("select"), document.body.style.overflow = "hidden", _.current?.focus()) : (window.location.hash && !document.referrer.includes("#") && me(), document.body.style.overflow = "auto"));
+    y < 768 && (C ? (he("select"), document.body.style.overflow = "hidden", _.current?.focus()) : (window.location.hash && !document.referrer.includes("#") && me(), document.body.style.overflow = "auto"));
   }, [C]), b(() => {
-    h && t?.length && (t?.find((r) => r[s] === h) ? F(t?.find((r) => r[s] === h)) : F(h));
+    h && t?.length && (t?.find((r) => r[s] === h) ? M(t?.find((r) => r[s] === h)) : M(h));
   }, [h]), b(() => {
     l && w && (o?.length && S?.find((r) => r[s] === l[s]) ? k(S?.find((r) => r[s] === l[s])[o] || "") : k(l));
   }, [l]), b(() => {
-    A && O(!1);
-  }, [A]), b(() => {
+    O && P(!1);
+  }, [O]), b(() => {
     t?.length && T(t);
   }, [t]);
-  const $ = () => {
-    w && T(t), O((r) => !r);
+  const I = () => {
+    w && T(t), P((r) => !r);
   }, U = () => {
-    w && (T(t), k(typeof l == "string" ? l : l ? l[o] : "")), O(!1);
+    w && (T(t), k(typeof l == "string" ? l : l ? l[o] : "")), P(!1);
   }, B = (r) => {
-    w && (o?.length ? k(r[o]) : k(r)), F(r), $(), j && j(r);
+    w && (o?.length ? k(r[o]) : k(r)), M(r), I(), j && j(r);
   }, V = (r) => {
     if (!l)
       return "";
     if (s?.length && r[s] === l[s] || r === l)
       return "bg-grey-100";
   }, e = (r) => {
-    S?.length && !v.isLoading && r.target.offsetHeight + r.target.scrollTop >= r.target.scrollHeight - 100 && P({
+    S?.length && !v.isLoading && r.target.offsetHeight + r.target.scrollTop >= r.target.scrollHeight - 100 && $({
       page: v.page + 1,
       isLoading: !0
     });
   }, n = (r) => {
-    const i = r?.target?.value?.length ? t.filter((p) => typeof p == "object" ? p[o].includes(r?.target?.value) : p.includes(r?.target?.value)) : t;
-    T(i), k(r?.target?.value), C || O(!0);
+    const i = r?.target?.value?.length ? t.filter((p) => typeof p == "object" ? p[L?.length ? L : o].includes(r?.target?.value) : p.includes(r?.target?.value)) : t;
+    T(i), k(r?.target?.value), C || P(!0);
   };
   return we(q, _, U), /* @__PURE__ */ a.jsxs("div", { className: `nariaSelect ${E ? "nariaSelect-disabled" : ""}`, children: [
     /* @__PURE__ */ a.jsxs(
@@ -491,10 +491,10 @@ const xe = ({ type: t = "button", value: s }) => /* @__PURE__ */ a.jsx("button",
                 placeholder: d?.length ? d : "Select",
                 className: `${l ? "text-dark-100" : "text-grey-300"} 
                                 ${c && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`,
-                value: M,
+                value: D,
                 disabled: E,
                 type: "text",
-                onClick: $,
+                onClick: I,
                 onChange: n
               }
             ),
@@ -517,7 +517,7 @@ const xe = ({ type: t = "button", value: s }) => /* @__PURE__ */ a.jsx("button",
               disabled: E,
               className: `nariaHandler ${l ? "text-dark-100" : "text-grey-300"} 
                                 ${c && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`,
-              onClick: $,
+              onClick: I,
               children: [
                 l ? o?.length ? l[o] : l : d?.length ? d : "Select",
                 " ",
@@ -536,10 +536,10 @@ const xe = ({ type: t = "button", value: s }) => /* @__PURE__ */ a.jsx("button",
     C ? /* @__PURE__ */ a.jsxs(
       "div",
       {
-        className: `nariaListWrapper ${L < 768 ? "nariaListWrapper-mobile" : ""}`,
+        className: `nariaListWrapper ${y < 768 ? "nariaListWrapper-mobile" : ""}`,
         ref: q,
         children: [
-          w && L < 768 ? /* @__PURE__ */ a.jsxs("div", { className: "nariaSearchInput", children: [
+          w && y < 768 ? /* @__PURE__ */ a.jsxs("div", { className: "nariaSearchInput", children: [
             /* @__PURE__ */ a.jsx(
               "input",
               {
@@ -547,7 +547,7 @@ const xe = ({ type: t = "button", value: s }) => /* @__PURE__ */ a.jsx("button",
                 placeholder: d?.length ? d : "Select",
                 className: `${l ? "text-dark-100" : "text-grey-300"} 
                                 ${c && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`,
-                value: M,
+                value: D,
                 disabled: E,
                 type: "text",
                 onChange: n
@@ -563,10 +563,10 @@ const xe = ({ type: t = "button", value: s }) => /* @__PURE__ */ a.jsx("button",
           /* @__PURE__ */ a.jsx(
             "div",
             {
-              className: `nariaList ${L < 768 ? "nariaList-mobile" : "nariaList-desktop"}`,
+              className: `nariaList ${y < 768 ? "nariaList-mobile" : "nariaList-desktop"}`,
               onScroll: e,
               children: u && X ? /* @__PURE__ */ a.jsx("div", { className: "nariaLoadingWrapper", children: /* @__PURE__ */ a.jsx(se, {}) }) : /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-                L < 768 ? /* @__PURE__ */ a.jsx("div", { className: "sticky top-0 text-left", children: /* @__PURE__ */ a.jsx("button", { className: "p-3", onClick: U, disabled: E, children: /* @__PURE__ */ a.jsx(fe, { className: "w-6" }) }) }) : void 0,
+                y < 768 ? /* @__PURE__ */ a.jsx("div", { className: "sticky top-0 text-left", children: /* @__PURE__ */ a.jsx("button", { className: "p-3", onClick: U, disabled: E, children: /* @__PURE__ */ a.jsx(fe, { className: "w-6" }) }) }) : void 0,
                 S?.length ? /* @__PURE__ */ a.jsx(a.Fragment, { children: S?.map((r, i) => /* @__PURE__ */ a.jsx(
                   "button",
                   {

package/package.json

@@ -5,7 +5,7 @@
     "name": "Mohammad Mehdi Mohammadi",
     "url": ""
   },
-  "version": "0.1.38",
+  "version": "0.1.39",
   "type": "module",
   "main": "dist/naria-ui.cjs.js",
   "module": "dist/naria-ui.es.js",
@@ -19,7 +19,9 @@
     "./dist/*.css": "./dist/*.css",
     "./assets/*.css": "./assets/*.css"
   },
-  "files": ["*.md", "dist", "lib", "es"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },

package/lib/components/Button/Button.tsx

@@ -1,16 +0,0 @@
-import React, {FC} from "react";
-
-export interface props extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
-  type?: "button" | "submit";
-  value: string;
-}
-export const Button: FC<props> = ({type = "button", value}) => {
-
-  return (
-    <button type={type}>
-      {value}
-    </button>
-  );
-};
-
-

package/lib/components/Button/index.ts

@@ -1 +0,0 @@
-export { Button } from './Button';

package/lib/components/Input/Input.tsx

@@ -1,59 +0,0 @@
-import {FC} from "react";
-
-export interface props {
-    type?: "password" | "text";
-    wrapperClass?: string;
-    labelClass?: string;
-    inputClass?: string;
-    errorClass?: string;
-    placeholder: string;
-    label: string;
-    hasError?: string | null;
-    register?: any;
-    name?: string;
-    isDisabled?: boolean;
-    autocomplete?: boolean;
-}
-
-export const Input: FC<props> = ({
-                                     type = "text",
-                                     placeholder,
-                                     wrapperClass = "",
-                                     labelClass = "",
-                                     inputClass = "",
-                                     errorClass = "",
-                                     label,
-                                     hasError,
-                                     register, name,
-                                     isDisabled = false,
-                                     autocomplete = false,
-                                     ...otherProps
-                                 }) => {
-
-    return (
-        <div className={wrapperClass}>
-            <label
-                htmlFor={name}
-                className={`${labelClass} ${hasError && "error"}`}>
-                {label}
-                <input
-                    disabled={isDisabled}
-                    autoComplete={autocomplete ? "on" : "off"}
-                    id={name}
-                    {...register}
-                    {...otherProps}
-                    type={type}
-                    name={name}
-                    className={`${inputClass} ${hasError && "error"} ${errorClass}`}
-                    placeholder={placeholder}
-                />
-            </label>
-            {
-                hasError &&
-                <p className={errorClass}>{hasError}</p>
-            }
-        </div>
-    );
-};
-
-

package/lib/components/Input/index.ts

@@ -1 +0,0 @@
-export { Input } from './Input';

package/lib/components/Select/Select.tsx

@@ -1,380 +0,0 @@
-import {FC, useEffect, useRef, useState} from "react";
-import AngleDown from "../../../assets/icons/angle-down.svg?react";
-import Close from '../../../assets/icons/close.svg?react';
-import Search from '../../../assets/icons/search.svg?react';
-import {useWidth} from "../../../hooks/use-width";
-import Loading from "../../../shared/loading/Loading";
-import './select.scss';
-import {addNavigation, onHashChanges, removeNavigation} from "../../utils/navigator";
-import useClickOutside from "../../../hooks/click-outside";
-
-interface Pagination {
-    page?: number;
-    pageLabel?: string;
-    size?: number;
-    sizeLabel?: string;
-}
-
-interface SDS extends Pagination {
-    isLoading?: boolean;
-}
-
-export interface props {
-    options?: any[];
-    label?: string;
-    title: string;
-    value?: string;
-    api?: string;
-    hasError?: string | null;
-    selected?: any;
-    placeholder?: string;
-    disabled?: boolean;
-    pagination?: Pagination;
-    optionFilterLabel?: string;
-    hasSearch?: boolean;
-    onSelectChange?: any;
-}
-
-export const Select: FC<props> = ({
-                                      options,
-                                      label,
-                                      hasError,
-                                      title,
-                                      value,
-                                      api,
-                                      selected,
-                                      placeholder,
-                                      disabled = false,
-                                      pagination,
-                                      optionFilterLabel,
-                                      hasSearch = false,
-                                      onSelectChange
-                                  }) => {
-    let isSubscribed = true;
-    const getDeviceWidth = useWidth();
-
-    const isHashChanged = onHashChanges('#select');
-    const [isShow, setIsShow] = useState(false);
-    const [isLoading, setIsLoading] = useState(true);
-    const [localSelected, setLocalSelected] = useState<string | null>(null);
-    const [localOptions, setLocalOptions] = useState(null);
-    const [searchTerm, setSearchTerm] = useState("");
-    const [localPagination, setLocalPagination] = useState<SDS>({
-        page: 1,
-        pageLabel: 'page',
-        size: 20,
-        sizeLabel: 'size',
-        isLoading: false
-    });
-    const localApi = useRef<string | undefined>(undefined);
-    const wrapperRef = useRef(undefined);
-    const handlerRef = useRef(undefined);
-
-    const getData = async () => {
-        if (localApi?.current) {
-            try {
-                const response = await fetch(localApi?.current);
-                if (!response.ok) {
-                    throw new Error(`Response status: ${response.status}`);
-                }
-                return await response.json();
-            } catch (error) {
-                console.error(error.message);
-            }
-        }
-
-    }
-
-    useEffect(() => {
-        return () => {
-            isSubscribed = false;
-        };
-    }, [])
-    useEffect(() => {
-        if (api?.length) {
-            localApi.current = api;
-            if (localApi.current.includes(pagination?.pageLabel || 'page')) {
-                const url = new URL(api);
-                url.searchParams.set(pagination?.pageLabel || 'page', (pagination?.page || localPagination.page).toString());
-                url.searchParams.set(pagination?.sizeLabel || 'size', (pagination?.size || localPagination.size).toString());
-                localApi.current = url.href;
-            }
-            setIsLoading(true);
-            getData().then((res) => {
-                if (isSubscribed) {
-                    setIsLoading(false);
-                    setLocalOptions(res);
-                }
-            })
-        }
-    }, [api, pagination]);
-
-    useEffect(() => {
-        if (localPagination.isLoading) {
-            if (localApi.current.includes(pagination?.pageLabel || 'page')) {
-                const url = new URL(localApi.current);
-                url.searchParams.set(pagination?.pageLabel || 'page', (localPagination.page).toString());
-                localApi.current = url.href;
-            }
-            getData().then((res) => {
-                if (isSubscribed) {
-                    setIsLoading(false);
-                    setLocalPagination({
-                        ...localPagination,
-                        isLoading: false
-                    })
-                    setLocalOptions([
-                        ...localOptions,
-                        ...res
-                    ]);
-                }
-            })
-        }
-    }, [localPagination]);
-    useEffect(() => {
-        if (getDeviceWidth < 768) {
-            if (isShow) {
-                addNavigation('select');
-                document.body.style.overflow = 'hidden';
-                handlerRef.current?.focus();
-            } else {
-                if (window.location.hash && !document.referrer.includes('#')) {
-                    removeNavigation();
-                }
-                document.body.style.overflow = 'auto';
-            }
-        }
-    }, [isShow]);
-
-    useEffect(() => {
-        if (selected && options?.length) {
-            if (options?.find(item => item[label] === selected)) {
-                setLocalSelected(options?.find(item => item[label] === selected));
-            } else {
-                setLocalSelected(selected);
-            }
-        }
-    }, [selected]);
-
-    useEffect(() => {
-        if (localSelected) {
-            if (hasSearch) {
-                if (value?.length && localOptions?.find(item => item[label] === localSelected[label])) {
-                    setSearchTerm(localOptions?.find(item => item[label] === localSelected[label])[value] || '');
-                } else {
-                    setSearchTerm(localSelected);
-                }
-            }
-        }
-    }, [localSelected]);
-
-    useEffect(() => {
-        if (isHashChanged) {
-            setIsShow(false)
-        }
-    }, [isHashChanged])
-
-
-    useEffect(() => {
-        if (options?.length) {
-            setLocalOptions(options)
-        }
-    }, [options]);
-
-    const onToggle = () => {
-        if (hasSearch) {
-            setLocalOptions(options)
-        }
-        setIsShow(prevState => !prevState);
-    }
-    const onClose = () => {
-        if (hasSearch) {
-            setLocalOptions(options)
-            if (typeof localSelected === "string") {
-                setSearchTerm(localSelected);
-            } else {
-                setSearchTerm(localSelected ? localSelected[value] : "")
-            }
-        }
-        setIsShow(false);
-    }
-    const onSelect = (item) => {
-        if (hasSearch) {
-            if (value?.length) {
-                setSearchTerm(item[value]);
-            } else {
-                setSearchTerm(item);
-            }
-        }
-        setLocalSelected(item);
-        onToggle();
-        if (onSelectChange) {
-            onSelectChange(item);
-        }
-    }
-
-    const getActiveClass = (item) => {
-        if (!localSelected) {
-            return "";
-        }
-        if (label?.length && item[label] === localSelected[label]) {
-            return "bg-grey-100"
-        }
-        if (item === localSelected) {
-            return "bg-grey-100"
-        }
-    }
-    const onScroll = (e) => {
-        if (localOptions?.length && !localPagination.isLoading) {
-            const bottom = e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight - 100;
-
-            if (bottom) {
-                setLocalPagination({
-                    page: localPagination.page + 1,
-                    isLoading: true
-                })
-            }
-        }
-
-    }
-    const onSearch = (e) => {
-        const tempList = e?.target?.value?.length ? options.filter(val => typeof val === "object" ? val[value].includes(e?.target?.value) : val.includes(e?.target?.value)) : options
-        setLocalOptions(tempList)
-        setSearchTerm(e?.target?.value)
-        if (!isShow) {
-            setIsShow(true)
-        }
-    }
-    useClickOutside(wrapperRef, handlerRef, onClose);
-    return (
-        <div className={`nariaSelect ${disabled ? 'nariaSelect-disabled' : ''}`}>
-            <label
-                className={`cursor-pointer
-                ${hasError && "!text-danger-100"}`}>
-                <span className={``}>{title}</span>
-                {
-                    hasSearch ? (
-                        <div className="nariaSearchInput">
-                            <input ref={handlerRef}
-                                   placeholder={placeholder?.length ? placeholder : "Select"}
-                                   className={`${localSelected ? "text-dark-100" : "text-grey-300"} 
-                                ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`}
-                                   value={searchTerm}
-                                   disabled={disabled} type="text" onClick={onToggle} onChange={onSearch}/>
-                            {
-                                isShow ? (
-                                    <Search
-                                        className="nariaSearchIcon"/>
-                                ) : (
-                                    <AngleDown
-                                        className={`nariaArrowIcon ${isShow ? "nariaArrowIcon-rotate-180" : ""}`}/>
-                                )
-                            }
-
-
-                        </div>
-                    ) : (
-                        <button type="button"
-                                ref={handlerRef}
-                                disabled={disabled}
-                                className={`nariaHandler ${localSelected ? "text-dark-100" : "text-grey-300"} 
-                                ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`}
-                                onClick={onToggle}>
-                            {
-                                localSelected ? (
-                                    value?.length ? localSelected[value] : localSelected
-                                ) : (placeholder?.length ? placeholder : "Select")
-                            } <AngleDown
-                            className={`nariaArrowIcon ${isShow ? "nariaArrowIcon-rotate-180" : ""}`}/>
-                        </button>
-                    )
-                }
-
-            </label>
-
-            {
-                isShow ? (
-                    <div
-                        className={`nariaListWrapper ${getDeviceWidth < 768 ? "nariaListWrapper-mobile" : ""}`}
-                        ref={wrapperRef}>
-                        {
-                            hasSearch && getDeviceWidth < 768 ? (
-                                <div className="nariaSearchInput">
-                                    <input ref={handlerRef}
-                                           placeholder={placeholder?.length ? placeholder : "Select"}
-                                           className={`${localSelected ? "text-dark-100" : "text-grey-300"} 
-                                ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`}
-                                           value={searchTerm}
-                                           disabled={disabled} type="text" onChange={onSearch}/>
-                                    <Search
-                                        className="nariaSearchIcon"/>
-
-
-                                </div>
-                            ) : undefined
-                        }
-                        <div
-                            className={`nariaList ${getDeviceWidth < 768 ? "nariaList-mobile" : `nariaList-desktop`}`}
-                            onScroll={onScroll}>
-                            {
-                                api && isLoading ? (
-                                    <div className="nariaLoadingWrapper">
-                                        <Loading/>
-                                    </div>
-                                ) : (
-                                    <>
-                                        {
-                                            getDeviceWidth < 768 ? (
-                                                <div className="sticky top-0 text-left">
-                                                    <button className="p-3" onClick={onClose} disabled={disabled}>
-                                                        <Close className="w-6"/>
-                                                    </button>
-                                                </div>
-                                            ) : undefined
-                                        }
-                                        {
-                                            localOptions?.length ? (
-                                                <>
-                                                    {
-                                                        localOptions?.map((item, index) => {
-                                                            return (
-                                                                <button type="button" onClick={() => onSelect(item)}
-                                                                        disabled={disabled}
-                                                                        key={index.toString()}
-                                                                        className={`text-right py-2.5 px-4 text-base hover:bg-grey-100 rounded-lg ${getActiveClass(item)}`}>
-                                                                    {value?.length ? item[value] : item}
-                                                                </button>
-                                                            )
-                                                        })
-                                                    }
-                                                </>
-                                            ) : (
-                                                <div>
-                                                    No Data
-                                                </div>
-                                            )
-                                        }
-
-
-                                        {
-                                            localPagination.isLoading ? (
-                                                <div className="nariaLoadingMoreWrapper">
-                                                    <Loading/>
-                                                </div>
-                                            ) : undefined
-                                        }
-                                    </>
-                                )
-                            }
-                        </div>
-                    </div>
-                ) : undefined
-            }
-            {
-                hasError &&
-                <p className="text-xs mt-1 text-danger-100">{hasError}</p>
-            }
-
-        </div>
-    );
-};

package/lib/components/Select/index.ts

@@ -1 +0,0 @@
-export { Select } from './Select';

package/lib/components/Select/select.scss

@@ -1,132 +0,0 @@
-
-.nariaSelect {
-  position: relative;
-
-  .nariaListWrapper {
-    overflow: hidden;
-
-    &.nariaListWrapper-mobile {
-      position: fixed;
-      top: 0;
-      right: 0;
-      height: 100%;
-      width: 100%;
-      z-index: 97;
-    }
-  }
-
-  .nariaList {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    z-index: 99;
-    position: relative;
-    overflow: auto;
-
-    &.nariaList-mobile {
-      position: relative;
-      height: 100%;
-    }
-
-    &.nariaList-desktop {
-      position: absolute;
-      animation: fadeInTranslateY 0.3s ease-out forwards;
-      max-height: 100px;
-    }
-
-    .nariaLoadingWrapper {
-      padding: 24px 0;
-      display: flex;
-      justify-content: center;
-
-    }
-
-    .nariaLoadingMoreWrapper {
-      position: sticky;
-      bottom: 0;
-      text-align: center;
-      width: 100%;
-
-      .nariaLoading {
-        width: 20px;
-      }
-    }
-  }
-
-  .nariaSearchInput {
-    position: relative;
-    display: flex;
-
-    input {
-      width: 100%;
-      padding-right: 20px;
-    }
-
-    .nariaArrowIcon, .nariaSearchIcon {
-      position: absolute;
-      bottom: 0;
-      margin-top: auto;
-      margin-bottom: auto;
-      top: 0;
-      right: 6px;
-      width: 12px;
-      height: 12px;
-    }
-
-  }
-
-  .nariaHandler {
-    position: relative;
-    display: flex;
-    gap: 4px;
-    width: 100%;
-    align-items: center;
-    justify-content: space-between;
-
-    .nariaArrowIcon {
-      width: 12px;
-      height: 12px;
-      transition: transform 0.4s;
-
-      -webkit-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
-      -ms-transform: rotate(0deg);
-      transform: rotate(0deg);
-
-      &.nariaArrowIcon-rotate-180 {
-        -webkit-transform: rotate(180deg);
-        -moz-transform: rotate(180deg);
-        -o-transform: rotate(180deg);
-        -ms-transform: rotate(180deg);
-        transform: rotate(180deg);
-      }
-    }
-  }
-}
-
-html[dir="rtl"] {
-  .nariaSelect {
-    .nariaSearchInput {
-      input {
-        padding-left: 20px;
-        padding-right: 0;
-      }
-      .nariaArrowIcon, .nariaSearchIcon {
-        left: 6px;
-        right: auto;
-      }
-    }
-  }
-}
-
-@keyframes fadeInTranslateY {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

package/lib/components/index.ts

@@ -1,3 +0,0 @@
-export * from './Button'
-export * from './Input'
-export * from './Select'

package/lib/index.ts

@@ -1,2 +0,0 @@
-export * from './components';
-export * from './utils'; 

package/lib/utils/capitalize.ts

@@ -1,4 +0,0 @@
-export function capitalize(str: string): string {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-

package/lib/utils/index.ts

@@ -1,2 +0,0 @@
-export * from './capitalize';
-

package/lib/utils/navigator.ts

@@ -1,29 +0,0 @@
-import {useEffect, useState} from "react";
-
-export const removeNavigation = () => {
-    const newUrl = `${window.location.pathname}${window.location.search}`;
-    window.history.replaceState(null, '', newUrl);
-}
-
-export const addNavigation = (state: string) => {
-    window.location.hash = state;
-}
-
-
-export const onHashChanges = (state: string) => {
-    const [isHashChanged, setIsHashChanged] = useState(false)
-    useEffect(() => {
-        const handleHashChange = (e) => {
-            if(window.location.hash !== state) {
-                setIsHashChanged(true);
-            } else {
-                setIsHashChanged(false);
-            }
-        };
-        window.addEventListener('hashchange', handleHashChange);
-        return () => {
-            window.removeEventListener('hashchange', handleHashChange);
-        };
-    }, [])
-    return isHashChanged
-};