naria-ui 0.1.52 → 0.1.54

package/lib/components/Select/select.scss

@@ -0,0 +1,138 @@
+
+.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: 150px;
+    }
+
+    .nariaLoadingWrapper {
+      padding: 24px 0;
+      display: flex;
+      justify-content: center;
+
+    }
+
+    .nariaLoadingMoreWrapper {
+      position: sticky;
+      bottom: 0;
+      text-align: center;
+      width: 100%;
+
+      .nariaLoading {
+        width: 20px;
+      }
+    }
+    .nariaSelectMobileHeader {
+      position: sticky;
+      top: 0;
+      justify-content: end;
+      display: flex;
+      gap: 8px;
+      .nariaSearchInput {
+        flex-grow: 1;
+      }
+    }
+  }
+
+  .nariaSearchInput {
+    position: relative;
+    display: flex;
+
+    input {
+      width: 100%;
+    }
+
+    .nariaArrowIcon, .nariaSearchIcon {
+      position: absolute;
+      bottom: 0;
+      margin-top: auto;
+      margin-bottom: auto;
+      top: 0;
+      right: 0;
+      width: 12px;
+      height: 12px;
+      z-index: 1;
+    }
+
+  }
+
+  .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 {
+      .nariaArrowIcon, .nariaSearchIcon {
+        left: 0;
+        right: auto;
+      }
+    }
+  }
+}
+
+@keyframes fadeInTranslateY {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/lib/components/index.ts

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

package/lib/index.ts

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

package/package.json

@@ -5,7 +5,7 @@
     "name": "Mohammad Mehdi Mohammadi",
     "url": ""
   },
-  "version": "0.1.52",
+  "version": "0.1.54",
   "type": "module",
   "main": "./dist/naria-ui.cjs.js",
   "module": "./dist/naria-ui.es.js",
@@ -15,12 +15,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/naria-ui.es.js",
       "require": "./dist/naria-ui.cjs.js"
-    },
-    "./*": "./*"
+    }
   },
-  "files": [
-    "dist"
-  ],
   "publishConfig": {
     "access": "public"
   },

package/shared/loading/Loading.tsx

@@ -0,0 +1,35 @@
+import {FC} from "react";
+import './loading.scss';
+export interface props {
+    classNames?: {
+        wrapper: string;
+        color: string;
+
+    }
+}
+
+const Loading: FC<props> = ({
+                                classNames = {
+                                    wrapper: "",
+                                    color: ""
+                                },
+                            }) => {
+    return (
+        <svg className={`nariaLoading ${classNames.wrapper}`} data-prop = "wrapper" viewBox="0 0 64 64" fill="none"
+             xmlns="http://www.w3.org/2000/svg">
+            <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"></path>
+            <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={classNames.color} data-prop = "color">
+            </path>
+        </svg>
+
+
+    );
+};
+
+export default Loading;

package/shared/loading/loading.scss

@@ -0,0 +1,9 @@
+.nariaLoading {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/App.tsx

@@ -0,0 +1,81 @@
+import './App.css'
+import {Button, Input, Select} from "../lib";
+function App() {
+    return (
+        <>
+            <h1>Button</h1>
+            <p>Default</p>
+            <Button value="Default"/>
+            <p>Loading</p>
+            <Button value="Loading" isLoading = {true}/>
+            <p>Disabled</p>
+            <Button value="Disabled" isDisabled = {true}/>
+            <p>Loading | Disabled</p>
+            <Button value="Loading | Disabled" isDisabled = {true} isLoading = {true}/>
+            <hr/>
+            <h1>Input</h1>
+            <p>Default</p>
+            <Input title="Default"/>
+            <p>Placeholder</p>
+            <Input placeholder = "Placeholder" title="Placeholder"/>
+            <p>Disabled</p>
+            <Input disabled = {true} placeholder = "Placeholder" title="Disabled"/>
+            <hr/>
+            <h1>Select</h1>
+            <p>Primitive list</p>
+            <Select options={["Yellow", "Red", "Blue"]} classNames = {
+                {
+                    input: "input input-bordered w-full",
+                    title: "text-[var(--primary-800)] font-bold text-xs mr-2 mb-1.5",
+                }
+            }/>
+            <p>Non-primitive list</p>
+            <Select options={[{id: 1, name: "Yellow"}, {id: 2, name: "Red"}, {id: 3, name: "Blue"}]} label="id"
+                    value="name"/>
+            <p>Disabled</p>
+            <Select disabled={true} options={["Yellow", "Red", "Blue"]}/>
+            <p>Placeholder</p>
+            <Select options={["Yellow", "Red", "Blue"]} placeholder="Custom placeholder"/>
+            <p>Selected | Primitive</p>
+            <Select options={["Yellow", "Red", "Blue"]} selected="Yellow"/>
+            <p>Selected | Non-primitive list</p>
+            <Select options={[{id: 1, name: "Yellow"}, {id: 2, name: "Red"}, {id: 3, name: "Blue"}]} label="id"
+                    value="name" selected={3}/>
+            <p>Search with search field | Primitive</p>
+            <Select options={["Yellow", "Red", "Blue"]} hasSearch={true}/>
+            <p>Search with search field | Non-primitive</p>
+            <Select options={[{id: 1, name: "Yellow"}, {id: 2, name: "Red"}, {id: 3, name: "Blue"}]} label="id"
+                    value="name" hasSearch={true}/>
+            <p>Search with search field | Non-primitive | Custom filter prop</p>
+            <Select options={[{id: 1, name: "Yellow"}, {id: 2, name: "Red"}, {id: 3, name: "Blue"}]} label="id"
+                    value="name" hasSearch={true} optionFilterLabel = "name"/>
+            <p>Search with search field | primitive | Selected</p>
+            <Select options={["Yellow", "Red", "Blue"]} selected={"Red"} hasSearch={true}/>
+            <p>Search with search field | Non-primitive | Selected</p>
+            <Select options={[{id: 1, name: "Yellow"}, {id: 2, name: "Red"}, {id: 3, name: "Blue"}]}
+                    label="id" value="name"
+                    hasSearch={true}
+                    selected={2}/>
+            <h1>Call api</h1>
+            <p>Basic usage</p>
+            <Select api={"https://jsonplaceholder.typicode.com/users"} label="id" value="name"/>
+            <p>Pagination</p>
+            <Select api={"https://api.escuelajs.co/api/v1/products?offset=1&limit=3"} label="id" value="title"
+                    pagination={{
+                        pageLabel: 'offset',
+                        sizeLabel: 'limit'
+                    }}/>
+            <p>Pagination | Custom page and size</p>
+            <Select api={"https://api.escuelajs.co/api/v1/products?offset=1&limit=20"} label="id" value="title"
+                    pagination={{
+                        page: 5,
+                        pageLabel: 'offset',
+                        size: 10,
+                        sizeLabel: 'limit'
+                    }}/>
+
+        </>
+    )
+}
+
+export default App

package/src/main.tsx

@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+    <App />,
+)

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.app.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "declarationDir": "./",
+    "baseUrl": "./",
+    "jsx": "react-jsx",
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": false,
+    "types": [
+      "vite-plugin-svgr/client"
+    ]
+  },
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}

package/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./dist",
+    "declarationMap": false,
+    "noEmit": false
+  },
+  "include": ["lib/**/*"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/utils/navigator.ts

@@ -0,0 +1,29 @@
+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
+};

package/vite.config.ts

@@ -0,0 +1,50 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+import svgr from "vite-plugin-svgr";
+
+// https://vite.dev/config/
+export default defineConfig({
+  // Configure plugins for Vite
+  plugins: [
+    // React plugin for Vite
+    react(),
+    // Plugin to generate TypeScript declaration files (d.ts)
+    dts({
+      // Specify the path to the build-specific tsconfig file
+      tsconfigPath: "./tsconfig.build.json",
+    }),
+    svgr()
+  ],
+  // Build configuration options
+  build: {
+    // Library build options
+    lib: {
+      // Entry point for the library build
+      entry: "lib/index.ts",
+      // Function to determine the output file name based on the format
+      fileName: (format) => `naria-ui.${format}.js`,
+      // Output formats for the library
+      formats: ["es", "cjs"],
+    },
+    // Rollup specific options (used under the hood by Vite)
+    rollupOptions: {
+      // Specify dependencies that should not be bundled into the library
+      external: ["react", "react-dom"],
+      // Output options for Rollup
+      output: {
+        // Configure global variables for external dependencies
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+    // Empty the output directory before building
+    emptyOutDir: true,
+    // copy the public directory to the output directory
+    copyPublicDir: true,
+    // Minify the output code
+    minify: true,
+  },
+});

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

@@ -1,16 +0,0 @@
-import { default as React, FC, ReactNode } from 'react';
-export interface props extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
-    type?: "button" | "submit";
-    classNames?: {
-        button: string;
-        loading: {
-            wrapper: string;
-            color: string;
-        };
-    };
-    value: string;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    icon?: ReactNode;
-}
-export declare const Button: FC<props>;

package/dist/lib/components/Button/index.d.ts

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

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

@@ -1,18 +0,0 @@
-import { FC } from 'react';
-export interface props {
-    type?: "password" | "text";
-    classNames?: {
-        wrapper?: string;
-        label?: string;
-        input?: string;
-        errorText?: string;
-    };
-    placeholder: string;
-    label: string;
-    hasError?: string | null;
-    register?: any;
-    name?: string;
-    isDisabled?: boolean;
-    autocomplete?: boolean;
-}
-export declare const Input: FC<props>;

package/dist/lib/components/Input/index.d.ts

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

package/dist/lib/components/Select/Select.d.ts

@@ -1,36 +0,0 @@
-import { FC } from 'react';
-interface Pagination {
-    page?: number;
-    pageLabel?: string;
-    size?: number;
-    sizeLabel?: string;
-}
-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;
-    classNames?: {
-        wrapper: string;
-        label?: string;
-        title?: string;
-        button?: string;
-        input?: string;
-        listWrapper?: string;
-        list?: string;
-        option?: string;
-        optionActive?: string;
-        mobileHeader?: string;
-    };
-    onSelectChange?: any;
-}
-export declare const Select: FC<props>;
-export {};

package/dist/lib/components/Select/index.d.ts

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

package/dist/lib/components/index.d.ts

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

package/dist/lib/index.d.ts

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

package/dist/lib/utils/capitalize.d.ts

@@ -1 +0,0 @@
-export declare function capitalize(str: string): string;

package/dist/lib/utils/index.d.ts

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

package/dist/lib/utils/navigator.d.ts

@@ -1,3 +0,0 @@
-export declare const removeNavigation: () => void;
-export declare const addNavigation: (state: string) => void;
-export declare const onHashChanges: (state: string) => boolean;

package/dist/naria-ui.cjs.js

@@ -1,26 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react");function se(t){const i=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(i,o,d.get?d:{enumerable:!0,get:()=>t[o]})}}return i.default=t,Object.freeze(i)}const P=se(l);var V={exports:{}},H={};/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * 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(){if(ee)return H;ee=1;var t=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function o(d,s,u){var p=null;if(u!==void 0&&(p=""+u),s.key!==void 0&&(p=""+s.key),"key"in s){u={};for(var h in s)h!=="key"&&(u[h]=s[h])}else u=s;return s=u.ref,{$$typeof:t,type:d,key:p,ref:s!==void 0?s:null,props:u}}return H.Fragment=i,H.jsx=o,H.jsxs=o,H}var U={};/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var re;function ce(){return re||(re=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===T?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case k:return"Fragment";case R:return"Profiler";case B:return"StrictMode";case f:return"Suspense";case M:return"SuspenseList";case q: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 W:return"Portal";case G:return(e.displayName||"Context")+".Provider";case O:return(e._context.displayName||"Context")+".Consumer";case z:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case _:return n=e.displayName||null,n!==null?n:t(e.type)||"Memo";case C:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function i(e){return""+e}function o(e){try{i(e);var n=!1}catch{n=!0}if(n){n=console;var c=n.error,r=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return c.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",r),i(e)}}function d(e){if(e===k)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var n=t(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function s(){var e=v.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function p(e){if(Y.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function h(e,n){function c(){L||(L=!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))}c.isReactWarning=!0,Object.defineProperty(e,"key",{get:c,configurable:!0})}function E(){var e=t(this.type);return D[e]||(D[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 x(e,n,c,r,b,w,X,Z){return c=w.ref,e={$$typeof:I,type:e,key:n,props:w,_owner:b},(c!==void 0?c: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,c,r,b,w,X,Z){var m=n.children;if(m!==void 0)if(r)if(j(m)){for(r=0;r<m.length;r++)S(m[r]);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 S(m);if(Y.call(n,"key")){m=t(e);var $=Object.keys(n).filter(function(oe){return oe!=="key"});r=0<$.length?"{key: someKey, "+$.join(": ..., ")+": ...}":"{key: someKey}",J[m+r]||($=0<$.length?"{"+$.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} />`,r,m,$,m),J[m+r]=!0)}if(m=null,c!==void 0&&(o(c),m=""+c),p(n)&&(o(n.key),m=""+n.key),"key"in n){c={};for(var Q in n)Q!=="key"&&(c[Q]=n[Q])}else c=n;return m&&h(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),x(e,m,w,b,s(),c,X,Z)}function S(e){typeof e=="object"&&e!==null&&e.$$typeof===I&&e._store&&(e._store.validated=1)}var g=l,I=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),R=Symbol.for("react.profiler"),O=Symbol.for("react.consumer"),G=Symbol.for("react.context"),z=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),M=Symbol.for("react.suspense_list"),_=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),q=Symbol.for("react.activity"),T=Symbol.for("react.client.reference"),v=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,j=Array.isArray,y=console.createTask?console.createTask:function(){return null};g={"react-stack-bottom-frame":function(e){return e()}};var L,D={},A=g["react-stack-bottom-frame"].bind(g,u)(),F=y(d(u)),J={};U.Fragment=k,U.jsx=function(e,n,c,r,b){var w=1e4>v.recentlyCreatedOwnerStacks++;return N(e,n,c,!1,r,b,w?Error("react-stack-top-frame"):A,w?y(d(e)):F)},U.jsxs=function(e,n,c,r,b){var w=1e4>v.recentlyCreatedOwnerStacks++;return N(e,n,c,!0,r,b,w?Error("react-stack-top-frame"):A,w?y(d(e)):F)}}()),U}var te;function le(){return te||(te=1,process.env.NODE_ENV==="production"?V.exports=ie():V.exports=ce()),V.exports}var a=le();const K=({classNames:t={wrapper:"",color:""}})=>a.jsxs("svg",{className:`nariaLoading ${t.wrapper}`,"data-prop":"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,"data-prop":"color"})]}),ue=({type:t="button",classNames:i={button:"",loading:{wrapper:"",color:""}},value:o,icon:d=null,isLoading:s=!1,isDisabled:u=!1,...p})=>a.jsxs("button",{type:t,disabled:u,...p,className:`nariaButton ${u?"nariaButton-disabled":""} ${i?.button}`,"data-prop":"button",children:[s?a.jsx(K,{classNames:{wrapper:i.loading.wrapper,color:i.loading.color},"data-prop-wrapper":"wrapper","data-prop-color":"color"}):d,o]}),de=({type:t="text",placeholder:i,classNames:o={wrapper:"",label:"",input:"",errorText:""},label:d,hasError:s,register:u,name:p,isDisabled:h=!1,autocomplete:E=!1,...x})=>a.jsxs("div",{className:`nariaInputWrapper ${o.wrapper}`,"data-prop":"wrapper",children:[a.jsxs("label",{htmlFor:p,className:`${o.label} ${s&&"nariaInputLabel-error"}`,"data-prop":"label",children:[d,a.jsx("input",{disabled:h,autoComplete:E?"on":"off",id:p,...u,...x,type:t,name:p,className:`${o.input} ${s&&"nariaInput-error"}`,placeholder:i,"data-prop":"input"})]}),s&&a.jsx("p",{className:`nariaInputErrorText ${o?.errorText}`,"data-prop":"errorText",children:s})]}),ne=t=>P.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",...t},P.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=>P.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",...t},P.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"})),ae=t=>P.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",fill:"currentColor",...t},P.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"})),pe=()=>{const[t,i]=l.useState(typeof window<"u"?window.innerWidth:0),o=()=>i(typeof window<"u"?window.innerWidth:0);return l.useEffect(()=>(window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)),[t]),t},ge=()=>{const t=`${window.location.pathname}${window.location.search}`;window.history.replaceState(null,"",t)},me=t=>{window.location.hash=t},he=t=>{const[i,o]=l.useState(!1);return l.useEffect(()=>{const d=s=>{window.location.hash!==t?o(!0):o(!1)};return window.addEventListener("hashchange",d),()=>{window.removeEventListener("hashchange",d)}},[]),i},we=(t,i,o)=>{l.useEffect(()=>{function d(s){i.current&&!i.current.contains(s.target)&&t?.current&&!t?.current.contains(s.target)&&o()}return document.addEventListener("mousedown",d),()=>{document.removeEventListener("mousedown",d)}},[t,o])},ve=({options:t,label:i,hasError:o,title:d,value:s,api:u,selected:p,placeholder:h,disabled:E=!1,pagination:x,optionFilterLabel:N,hasSearch:S=!1,classNames:g={wrapper:"",label:"",title:"",button:"",input:"",listWrapper:"",list:"",option:"",optionActive:"",mobileHeader:""},onSelectChange:I})=>{let W=!0;const k=pe(),B=he("#select"),[R,O]=l.useState(!1),[G,z]=l.useState(!0),[f,M]=l.useState(null),[_,C]=l.useState(null),[q,T]=l.useState(""),[v,Y]=l.useState({page:1,pageLabel:"page",size:20,sizeLabel:"size",isLoading:!1}),j=l.useRef(void 0),y=l.useRef(void 0),L=l.useRef(void 0),D=async()=>{if(j?.current)try{const r=await fetch(j?.current);if(!r.ok)throw new Error(`Response status: ${r.status}`);return await r.json()}catch(r){console.error(r.message)}};l.useEffect(()=>()=>{W=!1},[]),l.useEffect(()=>{if(u?.length){if(j.current=u,j.current.includes(x?.pageLabel||"page")){const r=new URL(u);r.searchParams.set(x?.pageLabel||"page",(x?.page||v.page).toString()),r.searchParams.set(x?.sizeLabel||"size",(x?.size||v.size).toString()),j.current=r.href}z(!0),D().then(r=>{W&&(z(!1),C(r))})}},[u,x]),l.useEffect(()=>{if(v.isLoading){if(j.current.includes(x?.pageLabel||"page")){const r=new URL(j.current);r.searchParams.set(x?.pageLabel||"page",v.page.toString()),j.current=r.href}D().then(r=>{W&&(z(!1),Y({...v,isLoading:!1}),C([..._,...r]))})}},[v]),l.useEffect(()=>{k<768&&(R?(me("select"),document.body.style.overflow="hidden",L.current?.focus()):(window.location.hash&&!document.referrer.includes("#")&&ge(),document.body.style.overflow="auto"))},[R]),l.useEffect(()=>{p&&t?.length&&(t?.find(r=>r[i]===p)?M(t?.find(r=>r[i]===p)):M(p))},[p]),l.useEffect(()=>{f&&S&&(s?.length&&_?.find(r=>r[i]===f[i])?T(_?.find(r=>r[i]===f[i])[s]||""):T(f))},[f]),l.useEffect(()=>{B&&O(!1)},[B]),l.useEffect(()=>{t?.length&&C(t)},[t]);const A=()=>{S&&C(t),O(r=>!r)},F=()=>{S&&(C(t),T(typeof f=="string"?f:f?f[s]:"")),O(!1)},J=r=>{S&&(s?.length?T(r[s]):T(r)),M(r),A(),I&&I(r)},e=r=>{if(!f)return"";if(i?.length&&r[i]===f[i])return`nariaSelectOption-active ${g?.optionActive}`;if(r===f)return`nariaSelectOption-active ${g?.optionActive}`},n=r=>{u?.length&&_?.length&&!v.isLoading&&r.target.offsetHeight+r.target.scrollTop>=r.target.scrollHeight-100&&Y({page:v.page+1,isLoading:!0})},c=r=>{const b=r?.target?.value?.length?t.filter(w=>typeof w=="object"?w[N?.length?N:s].includes(r?.target?.value):w.includes(r?.target?.value)):t;C(b),T(r?.target?.value),R||O(!0)};return we(y,L,F),a.jsxs("div",{className:`nariaSelect ${E?"nariaSelect-disabled":""} ${g?.wrapper}`,"data-prop":"wrapper",children:[a.jsxs("label",{className:`${o&&"!text-danger-100"}
-                ${g?.label}`,"data-prop":"label",children:[a.jsx("span",{className:g?.title,"data-prop":"title",children:d}),S?a.jsxs("div",{className:"nariaSearchInput",children:[a.jsx("input",{ref:L,placeholder:h?.length?h:"Select",className:`${f?"text-dark-100":"text-grey-300"} 
-                                ${o&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${g?.input}`,value:q,disabled:E,type:"text",onClick:A,onChange:c,"data-prop":"input"}),R?a.jsx(ae,{className:"nariaSearchIcon"}):a.jsx(ne,{className:`nariaArrowIcon ${R?"nariaArrowIcon-rotate-180":""}`})]}):a.jsxs("button",{type:"button",ref:L,disabled:E,className:`nariaHandler ${f?"text-dark-100":"text-grey-300"} 
-                                ${o&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${g?.button}`,"data-prop":"button",onClick:A,children:[f?s?.length?f[s]:f:h?.length?h:"Select"," ",a.jsx(ne,{className:`nariaArrowIcon ${R?"nariaArrowIcon-rotate-180":""}`})]})]}),R?a.jsx("div",{className:`nariaListWrapper ${k<768?"nariaListWrapper-mobile":""} ${g?.listWrapper}`,"data-prop":"listWrapper",ref:y,children:a.jsx("div",{className:`nariaList ${k<768?"nariaList-mobile":"nariaList-desktop"} ${g?.list}`,"data-prop":"input",onScroll:n,children:u&&G?a.jsx("div",{className:"nariaLoadingWrapper",children:a.jsx(K,{})}):a.jsxs(a.Fragment,{children:[k<768?a.jsxs("div",{className:`nariaSelectMobileHeader ${g?.mobileHeader}`,"data-prop":"mobileHeader",children:[S?a.jsxs("div",{className:"nariaSearchInput",children:[a.jsx("input",{ref:L,placeholder:h?.length?h:"Select",className:`${f?"text-dark-100":"text-grey-300"} 
-                                                               ${o&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${g?.input}`,"data-prop":"input",value:q,disabled:E,type:"text",onChange:c}),a.jsx(ae,{className:"nariaSearchIcon"})]}):void 0,a.jsx("button",{className:"p-3",onClick:F,disabled:E,children:a.jsx(fe,{className:"w-6"})})]}):void 0,_?.length?a.jsx(a.Fragment,{children:_?.map((r,b)=>a.jsx("button",{type:"button",onClick:()=>J(r),disabled:E,className:`nariaSelectOption ${g?.option} ${e(r)}`,"data-prop":"option","data-prop-active":"optionActive",children:s?.length?r[s]:r},b.toString()))}):a.jsx("div",{children:"No Data"}),v.isLoading?a.jsx("div",{className:"nariaLoadingMoreWrapper",children:a.jsx(K,{})}):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=de;exports.Select=ve;exports.capitalize=be;

package/dist/naria-ui.css

@@ -1 +0,0 @@
-.nariaButton{display:flex;align-items:center;width:100%}.nariaButton .nariaLoading{width:14px;height:14px}.nariaLoading{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.nariaSelect{position:relative}.nariaSelect .nariaListWrapper{overflow:hidden}.nariaSelect .nariaListWrapper.nariaListWrapper-mobile{position:fixed;top:0;right:0;height:100%;width:100%;z-index:97}.nariaSelect .nariaList{display:flex;flex-direction:column;width:100%;z-index:99;position:relative;overflow:auto}.nariaSelect .nariaList.nariaList-mobile{position:relative;height:100%}.nariaSelect .nariaList.nariaList-desktop{position:absolute;animation:fadeInTranslateY .3s ease-out forwards;max-height:150px}.nariaSelect .nariaList .nariaLoadingWrapper{padding:24px 0;display:flex;justify-content:center}.nariaSelect .nariaList .nariaLoadingMoreWrapper{position:sticky;bottom:0;text-align:center;width:100%}.nariaSelect .nariaList .nariaLoadingMoreWrapper .nariaLoading{width:20px}.nariaSelect .nariaList .nariaSelectMobileHeader{position:sticky;top:0;justify-content:end;display:flex;gap:8px}.nariaSelect .nariaList .nariaSelectMobileHeader .nariaSearchInput{flex-grow:1}.nariaSelect .nariaSearchInput{position:relative;display:flex}.nariaSelect .nariaSearchInput input{width:100%}.nariaSelect .nariaSearchInput .nariaArrowIcon,.nariaSelect .nariaSearchInput .nariaSearchIcon{position:absolute;bottom:0;margin-top:auto;margin-bottom:auto;top:0;right:0;width:12px;height:12px;z-index:1}.nariaSelect .nariaHandler{position:relative;display:flex;gap:4px;width:100%;align-items:center;justify-content:space-between}.nariaSelect .nariaHandler .nariaArrowIcon{width:12px;height:12px;transition:transform .4s;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0)}.nariaSelect .nariaHandler .nariaArrowIcon.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 .nariaArrowIcon,html[dir=rtl] .nariaSelect .nariaSearchInput .nariaSearchIcon{left:0;right:auto}@keyframes fadeInTranslateY{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}