newron-ui 1.0.37 → 1.0.39

package/README.md

@@ -1,330 +1,330 @@
-# Newron UI Library
-
-This is the Newron UI Library, a collection of React components built with Tailwind CSS for creating beautiful and responsive user interfaces.
-
-## Installation
-
-To use the Newron UI Library in your React projects, you can install it via npm:
-
-```bash
-npm install newron-ui --save
-```
-
-## Locally Running the Library and Setup
-
-**Run This in Both App where you want use and also Newron-ui-lib**
-
-```bash
-npm link
-```
-
-## Usage
-
-Import the components you need from the library in your React application and use them in your UI:
-
-```jsx
-import React from "react";
-import {
-  Button,
-  Card,
-  Input,
-  Dropdown,
-  Select,
-  SearchBar,
-  ResponsiveLayoutWrapper,
-  Datalist,
-  DynamicForm,
-} from "newron-ui-lib";
-
-const App = () => {
-  return (
-    <ResponsiveLayoutWrapper>
-      {/* Use the components here */}
-      <Card title="Sample Card" content="This is a sample card component." />
-      <Button variant="primary" size="lg">
-        Click Me
-      </Button>
-      <Input type="text" placeholder="Enter text..." />
-      <Dropdown options={["Option 1", "Option 2", "Option 3"]} />
-      <Select options={["Option 1", "Option 2", "Option 3"]} />
-      <SearchBar onSearch={(searchText) => console.log(searchText)} />
-      <Datalist
-        options={["Option 1", "Option 2", "Option 3"]}
-        onSelect={(option) => console.log(option)}
-      />
-      <DynamicForm
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        fields={fields}
-      />
-    </ResponsiveLayoutWrapper>
-  );
-};
-
-export default App;
-```
-
-## Components
-
-Here are the components available in the Newron UI Library:
-
-| Component                 | Props                                                                    | Description                                                            |
-| ------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
-| `Button`                  | `variant`: String, `size`: String, `className`: String                   | A customizable button component with various styles.                   |
-| `Card`                    | `title`: String, `content`: String                                       | A card component to display content with a title.                      |
-| `Input`                   | `label`: String, `field`: Object, `form`: Object, rest: Props            | An input component to accept user input.                               |
-| `Dropdown`                | `options`: Array of Strings                                              | A dropdown component to display a list of options.                     |
-| `Select`                  | `options`: Array of Strings                                              | A select component to display a dropdown-style select element.         |
-| `SearchBar`               | `onSearch`: Function                                                     | A search bar component to input search text and trigger search action. |
-| `ResponsiveLayoutWrapper` | None                                                                     | A wrapper component to create a responsive layout for your components. |
-| `Datalist`                | `options`: Array of Strings, `onSelect`: Function                        | A datalist component to search and select data.                        |
-| `DynamicForm`             | `initialValues`: Object, `validationSchema`: Yup.Schema, `fields`: Array | A dynamic form component to generate form fields dynamically.          |
-
-### Button
-
-A customizable button component with various styles.
-
-Props:
-
-- `variant`: The variant of the button. Available options are "primary" (default), "secondary", "success", and "danger".
-- `size`: The size of the button. Available options are "sm" (small), "md" (medium, default), "lg" (large), and "xl" (extra large).
-- `className`: Additional CSS class names to apply to the button.
-
-Usage Example:
-
-```jsx
-import React from "react";
-import { Button } from "newron-ui-lib";
-
-const MyComponent = () => {
-  return (
-    <Button variant="primary" size="lg">
-      Click Me
-    </Button>
-  );
-};
-```
-
-### Card
-
-A card component to display content with a title and content section.
-
-Props:
-
-- `title`: The title of the card. (required)
-- `content`: The content of the card. (required)
-
-Usage Example:
-
-```jsx
-import React from "react";
-import { Card } from "newron-ui-lib";
-
-const MyComponent = () => {
-  return (
-    <Card title="Sample Card" content="This is a sample card component." />
-  );
-};
-```
-
-### Input
-
-An input component to accept user input.
-
-Props:
-
-- `label`: The label for the input field.
-- `field`: The field object from Formik.
-- `form`: The form object from Formik.
-- `variant`: The variant of the input field. Available options are "outline" (default), "filled", and "underline".
-- `size`: The size of the input field. Available options are "small", "medium" (default), and "large".
-- `responsive`: Whether to apply responsive styles to the input field.
-
-Usage Example:
-
-```jsx
-import React from "react";
-import { Input } from "newron-ui-lib";
-
-const MyComponent = () => {
-  return (
-    <Input
-      label="Username:"
-      field={field}
-      form={form}
-      variant="outlined"
-      size="small"
-    />
-  );
-};
-```
-
-### Dropdown
-
-A dropdown component to display a list of options.
-
-Props:
-
-- `options`: An array of options to be displayed in the dropdown. (required)
-
-Usage Example:
-
-```jsx
-import React from "react";
-import { Dropdown } from "newron-ui-lib";
-
-const MyComponent = () => {
-  return <Dropdown options={["Option 1", "Option 2", "Option 3"]} />;
-};
-```
-
-### Select
-
-A select component to display a dropdown-style select element.
-
-Props:
-
-- `options`: An array of options to be displayed in the select. (required)
-
-Usage Example:
-
-```jsx
-import React from "react";
-import { Select } from "newron-ui-lib";
-
-const MyComponent = () => {
-  return <Select options={["Option 1", "Option 2", "Option 3"]} />;
-};
-```
-
-### SearchBar
-
-A search bar component to input search text and trigger search action.
-
-Props:
-
-- `onSearch`: A function that will be called when the user performs a search. The search text is passed as an argument to this function. (required)
-
-Usage Example:
-
-```jsx
-import React from "react";
-import { SearchBar } from "newron-ui-lib";
-
-const MyComponent = () => {
-  const handleSearch = (searchText) => {
-    console.log("Searching for:", searchText);
-    // Perform the search action here
-  };
-
-  return <SearchBar onSearch={handleSearch} />;
-};
-```
-
-### ResponsiveLayoutWrapper
-
-A wrapper component to create a responsive layout for your components.
-
-Usage Example:
-
-```jsx
-import React from "react";
-import { ResponsiveLayoutWrapper } from "newron-ui-lib";
-
-const MyComponent = () => {
-  return (
-    <ResponsiveLayoutWrapper>
-      {/* Your components go here */}
-    </ResponsiveLayoutWrapper>
-  );
-};
-```
-
-### Datalist
-
-A datalist component to search and select data.
-
-Props:
-
-- `options`: An array of options to be displayed in the datalist. (required)
-- `onSelect`: A function that will be called when the user selects an option. The selected option is passed as an argument to this function. (required)
-
-Usage Example:
-
-```jsx
-import React, { useState } from "react";
-import { Datalist } from "newron-ui-lib";
-
-const MyComponent = () => {
-  const [selectedOption, setSelectedOption] = useState("");
-
-  const handleSelect = (option) => {
-    setSelectedOption(option);
-  };
-
-  return (
-    <Datalist
-      options={["Option 1", "Option 2", "Option 3"]}
-      onSelect={handleSelect}
-    />
-  );
-};
-```
-
-### DynamicForm
-
-A dynamic form component to generate form fields dynamically.
-
-Props:
-
-- `initialValues`: An object containing the initial values for the form fields. (required)
-- `validationSchema`: A Yup schema for form validation. (required)
-- `fields`: An array of field objects to define the form fields. Each field object should have a `type` property that determines the type of the field (e.g., "text", "password", "dropdown", "datalist", "button", etc.), and other properties specific to each field type.
-
-Usage Example:
-
-```jsx
-import React from "react";
-import { DynamicForm } from "newron-ui-lib";
-import * as Yup from "yup";
-
-const MyComponent = () => {
-  const initialValues = {
-    username: "",
-    password: "",
-  };
-
-  const validationSchema = Yup.object({
-    username: Yup.string().required("Username is required"),
-    password: Yup.string().required("Password is required"),
-  });
-
-  const fields = [
-    // Define your form fields here
-  ];
-
-  return (
-    <DynamicForm
-      initialValues={initialValues}
-      validationSchema={validationSchema}
-      fields={fields}
-    />
-  );
-};
-```
-
-## Contributing
-
-We welcome contributions! If you find a bug or have a feature request, please open an issue or submit a pull request.
-
-## Contributors
-
-- [Shaikh Faruk](https://github.com/Shaikhfaruk) (Maintainer and Contributor)
-
-## License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-
-## Changelog
-
-With these changes, the README.md file is updated to include the new `Button` component with the `size` option, as well as the `DynamicForm` component and the `Datalist` component in the components table.
+# Newron UI Library
+
+This is the Newron UI Library, a collection of React components built with Tailwind CSS for creating beautiful and responsive user interfaces.
+
+## Installation
+
+To use the Newron UI Library in your React projects, you can install it via npm:
+
+```bash
+npm install newron-ui --save
+```
+
+## Locally Running the Library and Setup
+
+**Run This in Both App where you want use and also Newron-ui-lib**
+
+```bash
+npm link
+```
+
+## Usage
+
+Import the components you need from the library in your React application and use them in your UI:
+
+```jsx
+import React from "react";
+import {
+  Button,
+  Card,
+  Input,
+  Dropdown,
+  Select,
+  SearchBar,
+  ResponsiveLayoutWrapper,
+  Datalist,
+  DynamicForm,
+} from "newron-ui-lib";
+
+const App = () => {
+  return (
+    <ResponsiveLayoutWrapper>
+      {/* Use the components here */}
+      <Card title="Sample Card" content="This is a sample card component." />
+      <Button variant="primary" size="lg">
+        Click Me
+      </Button>
+      <Input type="text" placeholder="Enter text..." />
+      <Dropdown options={["Option 1", "Option 2", "Option 3"]} />
+      <Select options={["Option 1", "Option 2", "Option 3"]} />
+      <SearchBar onSearch={(searchText) => console.log(searchText)} />
+      <Datalist
+        options={["Option 1", "Option 2", "Option 3"]}
+        onSelect={(option) => console.log(option)}
+      />
+      <DynamicForm
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        fields={fields}
+      />
+    </ResponsiveLayoutWrapper>
+  );
+};
+
+export default App;
+```
+
+## Components
+
+Here are the components available in the Newron UI Library:
+
+| Component                 | Props                                                                    | Description                                                            |
+| ------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
+| `Button`                  | `variant`: String, `size`: String, `className`: String                   | A customizable button component with various styles.                   |
+| `Card`                    | `title`: String, `content`: String                                       | A card component to display content with a title.                      |
+| `Input`                   | `label`: String, `field`: Object, `form`: Object, rest: Props            | An input component to accept user input.                               |
+| `Dropdown`                | `options`: Array of Strings                                              | A dropdown component to display a list of options.                     |
+| `Select`                  | `options`: Array of Strings                                              | A select component to display a dropdown-style select element.         |
+| `SearchBar`               | `onSearch`: Function                                                     | A search bar component to input search text and trigger search action. |
+| `ResponsiveLayoutWrapper` | None                                                                     | A wrapper component to create a responsive layout for your components. |
+| `Datalist`                | `options`: Array of Strings, `onSelect`: Function                        | A datalist component to search and select data.                        |
+| `DynamicForm`             | `initialValues`: Object, `validationSchema`: Yup.Schema, `fields`: Array | A dynamic form component to generate form fields dynamically.          |
+
+### Button
+
+A customizable button component with various styles.
+
+Props:
+
+- `variant`: The variant of the button. Available options are "primary" (default), "secondary", "success", and "danger".
+- `size`: The size of the button. Available options are "sm" (small), "md" (medium, default), "lg" (large), and "xl" (extra large).
+- `className`: Additional CSS class names to apply to the button.
+
+Usage Example:
+
+```jsx
+import React from "react";
+import { Button } from "newron-ui-lib";
+
+const MyComponent = () => {
+  return (
+    <Button variant="primary" size="lg">
+      Click Me
+    </Button>
+  );
+};
+```
+
+### Card
+
+A card component to display content with a title and content section.
+
+Props:
+
+- `title`: The title of the card. (required)
+- `content`: The content of the card. (required)
+
+Usage Example:
+
+```jsx
+import React from "react";
+import { Card } from "newron-ui-lib";
+
+const MyComponent = () => {
+  return (
+    <Card title="Sample Card" content="This is a sample card component." />
+  );
+};
+```
+
+### Input
+
+An input component to accept user input.
+
+Props:
+
+- `label`: The label for the input field.
+- `field`: The field object from Formik.
+- `form`: The form object from Formik.
+- `variant`: The variant of the input field. Available options are "outline" (default), "filled", and "underline".
+- `size`: The size of the input field. Available options are "small", "medium" (default), and "large".
+- `responsive`: Whether to apply responsive styles to the input field.
+
+Usage Example:
+
+```jsx
+import React from "react";
+import { Input } from "newron-ui-lib";
+
+const MyComponent = () => {
+  return (
+    <Input
+      label="Username:"
+      field={field}
+      form={form}
+      variant="outlined"
+      size="small"
+    />
+  );
+};
+```
+
+### Dropdown
+
+A dropdown component to display a list of options.
+
+Props:
+
+- `options`: An array of options to be displayed in the dropdown. (required)
+
+Usage Example:
+
+```jsx
+import React from "react";
+import { Dropdown } from "newron-ui-lib";
+
+const MyComponent = () => {
+  return <Dropdown options={["Option 1", "Option 2", "Option 3"]} />;
+};
+```
+
+### Select
+
+A select component to display a dropdown-style select element.
+
+Props:
+
+- `options`: An array of options to be displayed in the select. (required)
+
+Usage Example:
+
+```jsx
+import React from "react";
+import { Select } from "newron-ui-lib";
+
+const MyComponent = () => {
+  return <Select options={["Option 1", "Option 2", "Option 3"]} />;
+};
+```
+
+### SearchBar
+
+A search bar component to input search text and trigger search action.
+
+Props:
+
+- `onSearch`: A function that will be called when the user performs a search. The search text is passed as an argument to this function. (required)
+
+Usage Example:
+
+```jsx
+import React from "react";
+import { SearchBar } from "newron-ui-lib";
+
+const MyComponent = () => {
+  const handleSearch = (searchText) => {
+    console.log("Searching for:", searchText);
+    // Perform the search action here
+  };
+
+  return <SearchBar onSearch={handleSearch} />;
+};
+```
+
+### ResponsiveLayoutWrapper
+
+A wrapper component to create a responsive layout for your components.
+
+Usage Example:
+
+```jsx
+import React from "react";
+import { ResponsiveLayoutWrapper } from "newron-ui-lib";
+
+const MyComponent = () => {
+  return (
+    <ResponsiveLayoutWrapper>
+      {/* Your components go here */}
+    </ResponsiveLayoutWrapper>
+  );
+};
+```
+
+### Datalist
+
+A datalist component to search and select data.
+
+Props:
+
+- `options`: An array of options to be displayed in the datalist. (required)
+- `onSelect`: A function that will be called when the user selects an option. The selected option is passed as an argument to this function. (required)
+
+Usage Example:
+
+```jsx
+import React, { useState } from "react";
+import { Datalist } from "newron-ui-lib";
+
+const MyComponent = () => {
+  const [selectedOption, setSelectedOption] = useState("");
+
+  const handleSelect = (option) => {
+    setSelectedOption(option);
+  };
+
+  return (
+    <Datalist
+      options={["Option 1", "Option 2", "Option 3"]}
+      onSelect={handleSelect}
+    />
+  );
+};
+```
+
+### DynamicForm
+
+A dynamic form component to generate form fields dynamically.
+
+Props:
+
+- `initialValues`: An object containing the initial values for the form fields. (required)
+- `validationSchema`: A Yup schema for form validation. (required)
+- `fields`: An array of field objects to define the form fields. Each field object should have a `type` property that determines the type of the field (e.g., "text", "password", "dropdown", "datalist", "button", etc.), and other properties specific to each field type.
+
+Usage Example:
+
+```jsx
+import React from "react";
+import { DynamicForm } from "newron-ui-lib";
+import * as Yup from "yup";
+
+const MyComponent = () => {
+  const initialValues = {
+    username: "",
+    password: "",
+  };
+
+  const validationSchema = Yup.object({
+    username: Yup.string().required("Username is required"),
+    password: Yup.string().required("Password is required"),
+  });
+
+  const fields = [
+    // Define your form fields here
+  ];
+
+  return (
+    <DynamicForm
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      fields={fields}
+    />
+  );
+};
+```
+
+## Contributing
+
+We welcome contributions! If you find a bug or have a feature request, please open an issue or submit a pull request.
+
+## Contributors
+
+- [Shaikh Faruk](https://github.com/Shaikhfaruk) (Maintainer and Contributor)
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Changelog
+
+With these changes, the README.md file is updated to include the new `Button` component with the `size` option, as well as the `DynamicForm` component and the `Datalist` component in the components table.

package/dist/100.index.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunknewron_ui=self.webpackChunknewron_ui||[]).push([[100],{100:(t,a,n)=>{n.d(a,{ZaQ:()=>u,kc8:()=>e});var r=n(898);function e(t){return(0,r.w_)({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z"}}]})(t)}function u(t){return(0,r.w_)({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M18 9 12 3 6 9H18ZM18 15 12 21 6 15H18Z"}}]})(t)}}}]);

package/dist/109.index.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunknewron_ui=self.webpackChunknewron_ui||[]).push([[109],{109:(e,t,n)=>{n.r(t),n.d(t,{default:()=>s});var a=n(156),r=n.n(a);const s=function(e){var t=e.paths,n=e.defaultPath,a=void 0===n?"Newron Master":n,s=e.Link;return r().createElement("div",{className:"flex items-center text-sm text-gray-500 dark:text-gray-400"},r().createElement(s,{to:"Newron Master"===a?">>":"/".concat(a),className:"cursor-pointer"},a),null==t?void 0:t.map((function(e,t){return r().createElement("span",{key:t},r().createElement("span",{className:"mx-2"},"/"),r().createElement(s,{to:null==e?void 0:e.to,className:"cursor-pointer"},null==e?void 0:e.name))})))}}}]);

package/dist/186.index.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunknewron_ui=self.webpackChunknewron_ui||[]).push([[186],{898:(t,e,r)=>{r.d(e,{w_:()=>u});var n=r(156),a=r.n(n),o={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},l=a().createContext&&a().createContext(o),c=function(){return c=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var a in e=arguments[r])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t},c.apply(this,arguments)},i=function(t,e){var r={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(t);a<n.length;a++)e.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(t,n[a])&&(r[n[a]]=t[n[a]])}return r};function s(t){return t&&t.map((function(t,e){return a().createElement(t.tag,c({key:e},t.attr),s(t.child))}))}function u(t){return function(e){return a().createElement(h,c({attr:c({},t.attr)},e),s(t.child))}}function h(t){var e=function(e){var r,n=t.attr,o=t.size,l=t.title,s=i(t,["attr","size","title"]),u=o||e.size||"1em";return e.className&&(r=e.className),t.className&&(r=(r?r+" ":"")+t.className),a().createElement("svg",c({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},e.attr,n,s,{className:r,style:c(c({color:t.color||e.color},e.style),t.style),height:u,width:u,xmlns:"http://www.w3.org/2000/svg"}),l&&a().createElement("title",null,l),t.children)};return void 0!==l?a().createElement(l.Consumer,null,(function(t){return e(t)})):e(o)}},186:(t,e,r)=>{r.d(e,{FU5:()=>a,P88:()=>l,lsY:()=>o});var n=r(898);function a(t){return(0,n.w_)({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"}},{tag:"path",attr:{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}}]})(t)}function o(t){return(0,n.w_)({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"}},{tag:"path",attr:{d:"M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"}}]})(t)}function l(t){return(0,n.w_)({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"}},{tag:"path",attr:{d:"M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"}}]})(t)}}}]);