@kbgarcia8/react-dynamic-form 1.1.4 → 1.1.26

package/README.md

@@ -1,2 +1,423 @@
 # react-dynamic-form
-NPM Package for a dynamic form showcasing editable, expandable and flexible inputs
+Reusable React dynamic form showcasing editable, expandable and flexible inputs
+---
+
+[![npm version](https://img.shields.io/npm/v/%40kbgarcia8%2Freact-dynamic-form
+)](https://www.npmjs.com/package/@kbgarcia8/react-dynamic-form)
+[![downloads](https://img.shields.io/npm/d18m/%40kbgarcia8%2Freact-dynamic-form
+)](https://www.npmjs.com/package/@kbgarcia8/react-dynamic-form)
+---
+
+## Table of Contents
+<!-- TOC start (generated with https://github.com/derlin/bitdowntoc) -->
+
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+   * [Case 1: Using fieldsets prop](#case-1-using-fieldsets-prop)
+      + [Supports multi-section forms that allows multiple groups of related inputs](#supports-multi-section-forms-that-allows-multiple-groups-of-related-inputs)
+         - [<u>Example Scenario:</u>](#example-scenario)
+   * [Case 2: Using formInputs prop](#case-2-using-forminputs-prop)
+      + [Supports single-section form that only needs one group of information](#supports-single-section-form-that-only-needs-one-group-of-information)
+         - [<u>Example Scenario:</u>](#example-scenario-1)
+- [API](#api)
+   * [Dynamic Form Props](#dynamic-form-props)
+   * [Additional Props information](#additional-props-information)
+      + [For editable input element of formInputs or inputs if fieldsets is used. Declared via inputEntryShape[] as NestedEditableOptionProps](#for-editable-input-element-of-forminputs-or-inputs-if-fieldsets-is-used-declared-via-inputentryshape-as-nestededitableoptionprops)
+      + [For editableInformation object inside editable input. Declared as EditableInformation interface. Below is the properties needed:](#for-editableinformation-object-inside-editable-input-declared-as-editableinformation-interface-below-is-the-properties-needed)
+      + [For more information on props types see:](#for-more-information-on-props-types-see)
+- [Customization](#customization)
+   * [Theme Support via styled components](#theme-support-via-styled-components)
+      + [Option 1: Users want theming via default Theme provided](#option-1-users-want-theming-via-default-theme-provided)
+      + [Option 2: Users want custom theme](#option-2-users-want-custom-theme)
+         - [Reminder for custom theme override:](#reminder-for-custom-theme-override)
+      + [Example usage of theme using styled-components](#example-usage-of-theme-using-styled-components)
+      + [Example usage of theme toggle inside component](#example-usage-of-theme-toggle-inside-component)
+   * [Styling components via styled-components](#styling-components-via-styled-components)
+      + [Available Default Class Names](#available-default-class-names)
+- [Local Development](#local-development)
+   * [License](#license)
+
+<!-- TOC end -->
+
+
+<!-- TOC --><a name="features"></a>
+## Features
+- 🖌️ Themeing support via styled components
+- 🆗 Typescript support
+- ↔️ Expandable and editable via nested form structure
+- 🧩 Ease of integration in any React project
+---
+<!-- TOC --><a name="installation"></a>
+## Installation
+```bash
+npm install @kbgarcia8/react-dynamic-form
+# or
+yarn add @kbgarcia8/react-dynamic-form
+```
+---
+<!-- TOC --><a name="usage"></a>
+## Usage
+
+<!-- TOC --><a name="case-1-using-fieldsets-prop"></a>
+### Case 1: Using fieldsets prop
+<!-- TOC --><a name="supports-multi-section-forms-that-allows-multiple-groups-of-related-inputs"></a>
+#### Supports multi-section forms that allows multiple groups of related inputs
+
+This is designed for scenarios where your for needs to be split into <b>multiple groups of input</b> each representing <b>different types of information</b>
+
+<!-- TOC --><a name="example-scenario"></a>
+##### <u>Example Scenario:</u>
+Cart Logic
+
+- Payment method information
+- Billing address
+- Shipping address
+- Contact details
+
+Each of these becomes its own fieldset inside a single DynamicForm.
+
+
+```tsx
+import { DynamicForm } from '@kbgarcia8/react-dynamic-form'
+import type { FieldsetShape } from '@kbgarcia8/react-dynamic-form'
+
+const addressInputsArray = [
+    {
+      //Input Props
+      type: ... as const, id: ..., isRequired: ...,
+      //dataAttributes is obtained through map
+      disabled: ..., name: ..., value: ..., placeholderText: ...,
+      //Start of Label Props
+      textLabel: ..., additionalInfo: ..., $labelFlexDirection: ... as const, svg: <.../>,
+      //Start of EditableInputProps
+      labelClass: ..., inputClass: ..., isEditable: ...,
+      //Additional in inputEntryShape
+      editIcon: <.../>, //=>editIcon in EditableInputProps
+      deleteIcon: <.../>,
+      editing: ...,
+      //These are informations editable within radio input acting as selection
+      editableInformation: [
+          {
+              name: ...,
+              info: ...,
+              type: ... as const
+          }
+      ],
+      //onClick functions obtained through map
+    }
+];
+
+const fieldsets:FieldsetShape[] = [
+	{
+        legend: "Address Informations",
+        inputs: addressInputsArray.map((address, index) => ({
+            ...address,
+            id: `${address.id}-${index}`,
+            onChange: ...,
+            onClickEdit: ...,
+            onClickDelete: ...,
+            onClickSave: ...,
+            onClickCancel: ...,
+            dataAttributes: {
+                "data-index": index
+            }
+        })),
+        isExpandable: true
+    },
+];
+
+function App() {
+  return (
+    <DynamicForm
+        className={'with-fieldsets'}
+        fieldsets={fieldsets}
+        id="address"
+        isExpandable={true}
+        {...props}
+    />
+  )
+}
+
+```
+
+<!-- TOC --><a name="case-2-using-forminputs-prop"></a>
+### Case 2: Using formInputs prop
+<!-- TOC --><a name="supports-single-section-form-that-only-needs-one-group-of-information"></a>
+#### Supports single-section form that only needs one group of information
+
+A legend text is optional in this part. This is a common/basic form scenario. It only needs an array of inputs which is rendered as a single form
+
+<!-- TOC --><a name="example-scenario-1"></a>
+##### <u>Example Scenario:</u>
+- Profile information
+- Login form
+- Address form
+- Single purpose editable section
+
+```tsx
+import { DynamicForm } from '@kbgarcia8/react-dynamic-form'
+import type { FieldsetShape } from '@kbgarcia8/react-dynamic-form'
+
+const addressInputsArray = [
+    {
+      //Input Props
+      type: ... as const, id: ..., isRequired: ...,
+      //dataAttributes is obtained through map
+      disabled: ..., name: ..., value: ..., placeholderText: ...,
+      //Start of Label Props
+      textLabel: ..., additionalInfo: ..., $labelFlexDirection: ... as const, svg: <.../>,
+      //Start of EditableInputProps
+      labelClass: ..., inputClass: ..., isEditable: ...,
+      //Additional in inputEntryShape
+      editIcon: <.../>, //=>editIcon in EditableInputProps
+      deleteIcon: <.../>,
+      editing: ...,
+      //These are informations editable within radio input acting as selection
+      editableInformation: [
+          {
+              name: ...,
+              info: ...,
+              type: ... as const
+          }
+      ],
+      //onClick functions obtained through map
+    }
+];
+
+const addressInputs = addressInputsArray.map((address, index) => ({
+    ...address,
+    id: `${address.id}-${index}`,
+    onChange: ...,
+    onClickEdit: ...,
+    onClickDelete: ...,
+    onClickSave: ...,
+    onClickCancel: ...,
+    dataAttributes: {
+        "data-index": index
+    }
+})),
+
+function App() {
+  return (
+    <DynamicForm
+        className={'with-fieldsets'}
+        legendText={'Address Information'}
+        formInputs={addressInputs}
+        id="address"
+        isExpandable={true}
+        {...props}
+    />
+  )
+}
+```
+
+<!-- TOC --><a name="api"></a>
+## API
+<!-- TOC --><a name="dynamic-form-props"></a>
+### Dynamic Form Props
+| Prop      | Type         | Default  | Description                     |
+| --------- | ------------ | -------- | ------------------------------- |
+| `fieldsets` | `FieldsetShape[]`     | `null`   | Used in multi-section form containing inputs divided into information groups<br><br>If used, legendText and formInputs is no longer needed  |
+| `legendText`   | `string`     | — |  |
+| `formInputs` | `inputEntryShape[]` | —  |  If no fieldsets is provided, this is an object containing information for label and inputs of a single-section form              |
+| `isExpandable`   | `boolean`     | `false` | If inputs are used as options commonly in type: checkbox/radio, this is to enabale a button for entry adding. If fieldset is null this is default to false  |
+| `id`   | `string`     | — | Form tag id  |
+| `labelAndInputContainerClass`   | `string`     | — | className for `<LabeledInput/>` component inside `<DynamicForm/>` |
+| `labelClass`   | `string`     | — | className for `<Label/>` component inside `<LabeledInput/>` component inside `<DynamicForm/>` |
+| `inputClass`   | `string`     | — | className for `<Input/>` component inside `<LabeledInput/>` component inside `<DynamicForm/>` |
+| `handleEditableInputEntryChange`   | `(e:React.ChangeEvent<HTMLInputElement\|HTMLTextAreaElement>) => void` | — | Function to handle onChange of editable inputs |
+| `handleAddingInputEntry`   | `(e:React.MouseEvent<HTMLButtonElement>) => void` | — | Function to add input entry. If isExpandable is false this is not enabled |
+| `hasSubmit`   | `boolean`     | `false` | This is to enable submit button for `<DynamicForm/>` |
+| `submitText`   | `string`     | `Submit` | Text inside submit button for `<DynamicForm/>` |
+| `handleSubmit`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle submit logic for `<DynamicForm/>` |
+| `hasReset`   | `boolean`     | `false` | This is to enable reset button for `<DynamicForm/>` |
+| `resetText`   | `string`     | `Reset` | Text inside reset button for `<DynamicForm/>` |
+| `handleReset`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle reset logic for `<DynamicForm/>` |
+| `hasCancel`   | `boolean`     | `false` | This is to cancel submit button for `<DynamicForm/>` |
+| `cancelText`   | `string`     | `Cancel` | Text inside cancel button for `<DynamicForm/>` |
+| `handleCancel`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle cancel logic for `<DynamicForm/>` |
+| `handleSubmitForm`   | `(e:React.FormEvent<HTMLFormElement>) => void`     | — | Function to handle form submit logic for `<DynamicForm/>` |
+| `className`   | `string`     | — | className for `<DynamicForm/>` |
+| `children`   | `React.ReactNode`     | — | React node/s or component placed after `<FormActionButtons/>` inside `<DynamicForm/>` |
+
+<!-- TOC --><a name="additional-props-information"></a>
+### Additional Props information
+<!-- TOC --><a name="for-editable-input-element-of-forminputs-or-inputs-if-fieldsets-is-used-declared-via-inputentryshape-as-nestededitableoptionprops"></a>
+#### For editable input element of formInputs or inputs if fieldsets is used. Declared via inputEntryShape[] as NestedEditableOptionProps
+| Prop      | Type         | Default  | Description                     |
+| --------- | ------------ | -------- | ------------------------------- |
+| `uniqueClass`   | `string`     | — | className to uniquely select/distinguish a LabeledInput container |
+| `isEditable`   | `boolean`     | — | To determine if an input is editable or not<br>If false, all props below are automatically not needed |
+| `editing`   | `boolean`     | — | To identify if an editable input is being modified<br>Can be used in open/close dialogs |
+| `onClickEdit`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle edit logic of editable input |
+| `editIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as an icon for edit button of editable input |
+| `onClickDelete`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle delete logic of editable input |
+| `deleteIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as an icon for delete button of editable input |
+| `onClickSave`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle save logic of editable input |
+| `onClickCancel`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle cancel logic of editable input |
+
+<!-- TOC --><a name="for-editableinformation-object-inside-editable-input-declared-as-editableinformation-interface-below-is-the-properties-needed"></a>
+#### For editableInformation object inside editable input. Declared as EditableInformation interface. Below is the properties needed:
+| Property      | Type         | Description                     |
+| --------- | ------------ | ------------------------------- |
+| `name`   | `string`     | Serves as placeholder text for editable input |
+| `info`   | `string`     | Serves as value for editable input |
+| `type`   | `string`     | Input type of editable input |
+
+
+<!-- TOC --><a name="for-more-information-on-props-types-see"></a>
+#### For more information on props types see:
+[![propTypes](https://img.shields.io/badge/dist%2Ftype%2FpropTypes.d.ts-blue?link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40kbgarcia8%2Freact-dynamic-form%3FactiveTab%3Dcode
+)](https://www.npmjs.com/package/@kbgarcia8/react-dynamic-form?activeTab=code)
+
+Note that types/interfaces are also exported via npm package and can be imported as shown below:
+
+```tsx
+import type { FieldsetShape, inputEntryShape } from '@kbgarcia8/react-dynamic-form'
+```
+
+<!-- TOC --><a name="customization"></a>
+## Customization
+<!-- TOC --><a name="theme-support-via-styled-components"></a>
+### Theme Support via styled components
+
+<!-- TOC --><a name="option-1-users-want-theming-via-default-theme-provided"></a>
+#### Option 1: Users want theming via default Theme provided
+```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ThemeContextProvider } from '@kbgarcia8/react-dynamic-form'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeContextProvider>
+      <App />
+    </ThemeContextProvider>
+  </StrictMode>,
+)
+```
+<!-- TOC --><a name="option-2-users-want-custom-theme"></a>
+#### Option 2: Users want custom theme
+You allow overriding currentTheme:
+```tsx
+<ThemeContextProvider initialTheme={myCustomLightTheme} secondTheme={myCustomDarkTheme}>
+  <DynamicForm />
+</ThemeContextProvider>
+```
+
+<!-- TOC --><a name="reminder-for-custom-theme-override"></a>
+##### Reminder for custom theme override:
+
+Below is the supported format for creating a theme object. Usually consisting of light and dark theme
+
+asColor function is used to ensure that color to be supplied in color properties are colors (e.g. hexcode and rgb code). Note that keys of colors are changeable since it has type ``
+
+```tsx
+import { asColor } from '@kbgarcia8/react-dynamic-form'
+
+export const lightTheme:Theme = {
+    name: 'light',
+    colors: {
+        text: asColor('#333446'),
+        bg: asColor('#EEEEEE'),
+        ...
+    }
+}
+
+export const darkTheme:Theme = {
+    name: 'dark',
+    colors: {
+        bg: asColor('#333446'),
+        text: asColor('#EEEEEE'),
+        ...
+    }
+}
+```
+
+<!-- TOC --><a name="example-usage-of-theme-using-styled-components"></a>
+#### Example usage of theme using styled-components
+Inside \<Component\>.styles.[ts | js]
+```tsx
+export const DefaultButton = styled.button`
+  color: ${({theme})=> theme.colors.bg || 'white'};
+`
+```
+
+<!-- TOC --><a name="example-usage-of-theme-toggle-inside-component"></a>
+#### Example usage of theme toggle inside component
+```tsx
+import useTheme from '@kbgarcia8/react-dynamic-form'
+
+const ThemeToggleButton = () => {
+  const { currentTheme, toggleTheme } = useTheme();
+
+  const isDark = currentTheme.name === 'dark' ? true : false;
+
+  return (
+    <Styled.Root
+      checked={isDark}
+      onCheckedChange={toggleTheme}
+    >
+      <Styled.Thumb $isDark={isDark}>
+        {isDark ? <Moon size={20} /> : <Sun size={20} />}
+      </Styled.Thumb>
+    </Styled.Root>
+  );
+}
+```
+
+<!-- TOC --><a name="styling-components-via-styled-components"></a>
+### Styling components via styled-components
+<!-- TOC --><a name="available-default-class-names"></a>
+#### Available Default Class Names
+Every renderable part of the form receives predictable classes or id:
+| Component                    | Default class name                                    | Notes                       |
+| ---------------------------- | ----------------------------------------------------- | --------------------------- |
+| **Form**                     | `${id}-form`                                          | Root form container         |
+| **Fieldset Wrapper**         | `${id}-fieldset-wrapper`                              | One per fieldset            |
+| **Fieldset**                 | `${legend}-fieldset`                                  | Based on fieldset legend    |
+| **Legend**                   | `${legend}-legend`                                    | Based on fieldset legend    |
+| **LabeledInput container**   | `${labelAndInputContainerClass} ${input.uniqueClass}` | User-controlled             |
+| **Label**                    | `${inputClass}`                                       | User-controlled (inside LabeledInput)             |
+| **Input**                    | `${labelAndInputContainerClass} ${input.uniqueClass}` | User-controlled (inside LabeledInput)             |
+| **Add Entry Button**         | `add-input-entry`                                     | Used when `isExpandable`    |
+| **Add Entry Button Wrapper** | `add-input-button-space`                              |                             |
+| **No Entry Message**         | *default styled component*                            | Target using parent wrapper |
+| **Children Container**       | `children-container`                                  |                             |
+
+```ts
+import styled from "styled-components";
+import { DynamicForm } from "@kbgarcia8/react-dynamic-form";
+
+const StyledMyForm = styled(DynamicForm)`
+  &.address-form {...}
+
+  .address-fieldset-wrapper {...}
+
+  .add-input-entry {...}
+
+  .children-container {...}
+
+  .<labelInputContainerClass> {...}
+
+  .<inputClass> {...}
+
+  .<labelClass> {...}
+`;
+```
+
+<!-- TOC --><a name="local-development"></a>
+## Local Development
+```bash
+git clone https://github.com/kbgarcia8/react-dynamic-form
+cd react-dynamic-form
+npm install
+npm run dev
+```
+<!-- TOC --><a name="license"></a>
+### License
+[![license](https://img.shields.io/github/license/kbgarcia8/react-dynamic-form
+)](https://github.com/kbgarcia8/react-dynamic-form/blob/main/LICENSE)

package/dist/components/atoms/Label/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,QAAA,MAAM,KAAK,GAAI,+FASZ,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,4CAWrC,CAAA;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,QAAA,MAAM,KAAK,GAAI,+FASZ,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,4CAarC,CAAA;AAED,eAAe,KAAK,CAAC"}

package/dist/components/atoms/Label/Label.styles.d.ts

@@ -1,5 +1,6 @@
 import type { LabelProps } from "../../../type/propTypes";
 export declare const DefaultLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, Pick<LabelProps, "$labelFlexDirection">>> & string;
+export declare const LabelTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const MainLabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const LabelIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const LabelAdditionalInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/components/atoms/Label/Label.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Label/Label.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,eAAO,MAAM,YAAY,qRAiBxB,CAAC;AAEF,eAAO,MAAM,aAAa,+NAEzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAI9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,+NAE/B,CAAC"}
+{"version":3,"file":"Label.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Label/Label.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,eAAO,MAAM,YAAY,qRAiBxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAM9B,CAAC;AAEF,eAAO,MAAM,aAAa,+NAEzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAI9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,+NAE/B,CAAC"}

package/dist/components/molecules/FormActionButtons/FormActionButtons.d.ts

@@ -1,4 +1,4 @@
 import type { FormActionButtonsProps } from "../../../type/propTypes";
-declare const FormActionButtons: ({ id, hasSubmit, submitText, handleSubmit, hasEdit, editText, handleEdit, hasCancel, cancelText, handleCancel, hasDelete, deleteText, handleDelete, }: FormActionButtonsProps) => import("react/jsx-runtime").JSX.Element;
+declare const FormActionButtons: ({ id, hasSubmit, submitText, handleSubmit, hasReset, resetText, handleReset, hasCancel, cancelText, handleCancel, }: FormActionButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export default FormActionButtons;
 //# sourceMappingURL=FormActionButtons.d.ts.map

package/dist/components/molecules/FormActionButtons/FormActionButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FormActionButtons/FormActionButtons.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,QAAA,MAAM,iBAAiB,GAAI,uJAczB,sBAAsB,4CASvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"FormActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FormActionButtons/FormActionButtons.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,QAAA,MAAM,iBAAiB,GAAI,qHAWzB,sBAAsB,4CAQvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/molecules/LabeledInput/LabeledInput.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { LabeledInputProps } from "../../../type/propTypes";
-declare const LabeledInput: (props: React.PropsWithChildren<LabeledInputProps>) => import("react/jsx-runtime").JSX.Element;
+import type { LabeledCheckboxOrRadio, LabeledTextLike } from "../../../type/propTypes";
+declare const LabeledInput: (props: React.PropsWithChildren<LabeledCheckboxOrRadio | LabeledTextLike>) => import("react/jsx-runtime").JSX.Element;
 export default LabeledInput;
 //# sourceMappingURL=LabeledInput.d.ts.map

package/dist/components/molecules/LabeledInput/LabeledInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabeledInput.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/LabeledInput/LabeledInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,yBAAyB,CAAC;AAE/E,QAAA,MAAM,YAAY,GAAI,OAAM,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,4CA8FrE,CAAA;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LabeledInput.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/LabeledInput/LabeledInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,eAAe,EAAgB,MAAM,yBAAyB,CAAC;AAErG,QAAA,MAAM,YAAY,GAAI,OAAM,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,GAAG,eAAe,CAAC,4CA8F5F,CAAA;AAED,eAAe,YAAY,CAAC"}

package/dist/components/organisms/DynamicForm/DynamicForm.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { DynamicFormProps } from "../../../type/propTypes";
-declare const DynamicForm: ({ fieldsets, legendText, isExpandable, id, formInputs, labelAndInputContainerClass, labelClass, inputClass, handleEditableInputEntryChange, handleAddingInputEntry, hasSubmit, hasCancel, hasDelete, hasEdit, submitText, handleSubmitForm, handleSubmit, cancelText, handleCancel, deleteText, handleDelete, editText, handleEdit, className, children }: React.PropsWithChildren<DynamicFormProps>) => import("react/jsx-runtime").JSX.Element;
+declare const DynamicForm: ({ fieldsets, legendText, isExpandable, id, formInputs, labelAndInputContainerClass, labelClass, inputClass, onChangeOfEditableOption, handleAddingInputEntry, hasSubmit, submitText, handleSubmit, hasReset, resetText, handleReset, hasCancel, cancelText, handleCancel, handleSubmitForm, className, children }: React.PropsWithChildren<DynamicFormProps>) => import("react/jsx-runtime").JSX.Element;
 export default DynamicForm;
 //# sourceMappingURL=DynamicForm.d.ts.map

package/dist/components/organisms/DynamicForm/DynamicForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAgB,gBAAgB,EAA+D,MAAM,yBAAyB,CAAC;AAE3I,QAAA,MAAM,WAAW,GAAI,2VA0BnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,4CAmJ1C,CAAA;AAGD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAgB,gBAAgB,EAA+D,MAAM,yBAAyB,CAAC;AAE3I,QAAA,MAAM,WAAW,GAAI,mTAuBnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,4CAkJ1C,CAAA;AAGD,eAAe,WAAW,CAAC"}

package/dist/context/ThemeContext.d.ts

@@ -1,4 +1,4 @@
 import type { themeContextValue } from "../type/propTypes";
-declare const ThemeContext: import("react").Context<themeContextValue | undefined>;
+declare const ThemeContext: import("react").Context<themeContextValue>;
 export default ThemeContext;
 //# sourceMappingURL=ThemeContext.d.ts.map

package/dist/context/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/context/ThemeContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAI3D,QAAA,MAAM,YAAY,wDAA0D,CAAC;AAE7E,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/context/ThemeContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAI3D,QAAA,MAAM,YAAY,4CAA4D,CAAC;AAE/E,eAAe,YAAY,CAAC"}

package/dist/context/ThemeContextWrapper.d.ts

@@ -1,3 +1,7 @@
+import type { Theme } from "../type/constantTypes";
 import type { ChildrenProp } from "../type/propTypes";
-export declare const ThemeContextProvider: ({ children }: ChildrenProp) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeContextProvider: ({ children, initialTheme, secondTheme }: ChildrenProp & {
+    initialTheme?: Theme;
+    secondTheme?: Theme;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ThemeContextWrapper.d.ts.map

package/dist/context/ThemeContextWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContextWrapper.d.ts","sourceRoot":"","sources":["../../src/context/ThemeContextWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAUtD,eAAO,MAAM,oBAAoB,GAAI,cAAW,YAAY,4CAY3D,CAAA"}
+{"version":3,"file":"ThemeContextWrapper.d.ts","sourceRoot":"","sources":["../../src/context/ThemeContextWrapper.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAUtD,eAAO,MAAM,oBAAoB,GAAI,yCAInC,YAAY,GAAG;IAAC,YAAY,CAAC,EAAC,KAAK,CAAC;IAAC,WAAW,CAAC,EAAC,KAAK,CAAA;CAAC,4CAYzD,CAAA"}

package/dist/hooks/useTheme.d.ts

@@ -1,3 +1,3 @@
-declare const useTheme: () => import("..").themeContextValue | undefined;
+declare const useTheme: () => import("..").themeContextValue;
 export default useTheme;
 //# sourceMappingURL=useTheme.d.ts.map

package/dist/hooks/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,QAAQ,kDAAyC,CAAC;AAExD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,QAAQ,sCAAyC,CAAC;AAExD,eAAe,QAAQ,CAAC"}

package/dist/index.d.ts

@@ -1,7 +1,8 @@
+import "./styles/styled";
 export { default as DynamicForm } from "./components/organisms/DynamicForm";
 export { ThemeContextProvider } from "./context/ThemeContextWrapper";
 export { default as ThemeContext } from "./context/ThemeContext";
 export { default as useTheme } from "./hooks/useTheme";
 export * from "./styles/theme";
-export type { FieldsetShape, inputEntryShape, DynamicFormProps, LabeledInputProps, FormActionButtonsProps, CheckedInput, GeneralInput, TextAreaInput, EditableInformation, NestedEditableOptionProps, ButtonProps, LabelProps, BaseInput, InputProps, ChildrenProp, themeContextValue } from './type/propTypes';
+export type { FieldsetShape, inputEntryShape, DynamicFormProps, LabeledCheckboxOrRadio, LabeledTextLike, FormActionButtonsProps, CheckedInput, GeneralInput, TextAreaInput, EditableInformation, NestedEditableOptionProps, ButtonProps, LabelProps, BaseInput, InputProps, ChildrenProp, themeContextValue } from './type/propTypes';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,cAAc,gBAAgB,CAAC;AAC/B,YAAY,EACV,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,yBAAyB,EACzB,WAAW,EACX,UAAU,EACV,SAAS,EACT,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,cAAc,gBAAgB,CAAC;AAC/B,YAAY,EACV,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,sBAAsB,EACtB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,yBAAyB,EACzB,WAAW,EACX,UAAU,EACV,SAAS,EACT,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,kBAAkB,CAAC"}