Keep/change component structure (#93)

* Added: Alert Component Re-Structure

* Added: Accordion added

* Added: Accordion added

* Added: Accordion Added

* Added: Empty Component Re-structure done

* Popover: Change popover structure

* Popover

* Delete: Popover Delete

* Card

* Update: cn function updated

* Added: Typography component added

* Added: Typography documentation added

* Added: Notification component restructure done

* Fixed: Carousel responsive issue

* Added: Modal Animation added

* Added: Popover re-structure done

* Fixed: Input Focus fixed

* Completed: Noted component Re-structure done

* Fixed: Fixed Package Issue

* Added: Npm package

* Fixed: Fix all the issue

* Added: Typography search added

* Added: Readme installation process update

CHANGELOG.md

@@ -19,4 +19,20 @@ All notable changes to this project will be documented in this file.
  - Fixed Typography Error
  - Update Documentation
  - Add className Props in every component
- - customClass props removed with className props
+ - customClass props removed with className props
+
+ ### v1.1.0 (2023-12-18)
+
+ #### Features
+ - Alert component props and structure changed
+ - Accordion component props and structure changed
+ - Notification component props and structure changed
+ - Popover component props and structure changed
+ - Added Modal and Notification component open animation
+ - Added Typography component
+ - CSS Import Style changed
+ - Keep Preset import styles changed
+
+#### Bug fixes
+ - Date Picker Type Issue
+ - Popover width Issue

README.md

@@ -53,7 +53,7 @@ pnpm add keep-react
 following code:
 
 ```jsx
-import keepPreset from "keep-react/src/keep-preset.js";
+import keepPreset from "keep-react/preset";
 export default {
   content: ["node_modules/keep-react/**/*.{js,jsx,ts,tsx}"],
   presets: [keepPreset],
@@ -63,7 +63,7 @@ export default {
 `Step 4:` Add Tailwind CSS to index.css File:
 
 ```css
-@import "keep-react/src/main.min.css";
+@import "keep-react/css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -107,14 +107,14 @@ following code
 ```js
 module.exports = {
     content: ["node_modules/keep-react/**/*.{js,jsx,ts,tsx}"],
-    presets: [require("keep-react/src/keep-preset.js")],
+    presets: [require("keep-react/preset")],
 };
 ```
 
 `Step 4:` Add Tailwind CSS to globals.css File:
 
 ```css
-@import "keep-react/src/main.min.css";
+@import "keep-react/css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

app/docs/components/accordion/accordion.mdx

@@ -1,9 +1,9 @@
 import { DefaultAccordion, DefaultAccordionCode } from './variant/DefaultAccordion'
-import { AccordionCollapseAll, AccordionCollapseAllCode } from './variant/AccordionCollapseAll'
-import { AccordionWithLeftSideIcon, AccordionWithLeftSideIconCode } from './variant/AccordionWithLeftSideIcon'
-import { AccordionAlwaysOpen, AccordionAlwaysOpenCode } from './variant/AccordionAlwaysOpen'
+import { AccordionFlush, AccordionFlushCode } from './variant/AccordionFlush'
+import { AccordionOpenPanel, AccordionOpenPanelCode } from './variant/AccordionOpenPanel'
 import { DisabledAccordionCode, DisabledAccordion } from './variant/DisabledAccordion'
-import { AccordionWithCustomIcon, AccordionWithCustomIconCode } from './variant/AccordionWithCustomIcon'
+import { AccordionWithIcon, AccordionWithIconCode } from './variant/AccordionWithIcon'
+import { CustomizeAccordion, CustomizeAccordionCode } from './variant/CustomizeAccordion'
 import CodePreview from '~/components/CodePreview'
 import CssThemePreview from '~/components/CssThemePreview'
 import ComponentApi from '~/components/ComponentApi'
@@ -15,50 +15,50 @@ The Accordion Component in the Keep React allows you to create collapsible secti
 
 ## Default Accordion
 
-The Default Accordion Component allows you to craft collapsible content sections. Users can reveal and hide the content by simply clicking on the disclosure button.
+The default Accordion component allows users to reveal and hide content by simply clicking on the disclosure button.
 
 <CodePreview github="Accordion" code={DefaultAccordionCode}>
   <DefaultAccordion />
 </CodePreview>
 
-## Controlling Collapse Behavior
+## Flush Accordion
 
-The `collapseAll` property lets you control the initial state of accordion panels. When set to `true`, all panels are collapsed by default. Users can then expand individual panels as needed.
+Control the initial state of accordion panels with the `flush` property.
 
-<CodePreview github="Accordion" code={AccordionCollapseAllCode}>
-  <AccordionCollapseAll />
+<CodePreview github="Accordion" code={AccordionFlushCode}>
+  <AccordionFlush />
 </CodePreview>
 
-## Visual Context with Left-Side Icons
+## Accordion First Open Panel
 
-Using the `iconPosition="left"` property in the AccordionPanel, you can position icons on the left side of the panel header. This allows you to offer context or indicate the content within the panel.
+Use the `openFirstPanel` property to set the first accordion panel to be open by default.
 
-<CodePreview github="Accordion" code={AccordionWithLeftSideIconCode}>
-  <AccordionWithLeftSideIcon />
+<CodePreview github="Accordion" code={AccordionOpenPanelCode}>
+  <AccordionOpenPanel />
 </CodePreview>
 
-## Customizing Icons
+## Accordion With Icon
 
-If you prefer custom icons, you have the freedom to choose your preferred icons for the accordion's open and close states. Utilize the `openIcon` and `closeIcon` props for this purpose.
+Enhance your accordion with icons for a more visually appealing experience.
 
-<CodePreview github="Accordion" code={AccordionWithCustomIconCode}>
-  <AccordionWithCustomIcon />
+<CodePreview github="Accordion" code={AccordionWithIconCode}>
+  <AccordionWithIcon />
 </CodePreview>
 
-## Panels That Stay Open
+## Disabled Accordions
 
-With the `alwaysOpen={true}` property, you can configure all panels to remain expanded. This eliminates the need for users to manually toggle panels, ensuring all content is consistently visible.
+Control user interactions by making specific AccordionPanel components non-interactive with the `disabled` property.
 
-<CodePreview github="Accordion" code={AccordionAlwaysOpenCode}>
-  <AccordionAlwaysOpen />
+<CodePreview github="Accordion" code={DisabledAccordionCode}>
+  <DisabledAccordion />
 </CodePreview>
 
-## Disabled Accordions
+## Customize Accordion
 
-If you need to control which panels users can interact with, the `disabled` property on specific AccordionPanel components makes certain panels non-interactive.
+Tailor the accordion to fit your design preferences with custom styling.
 
-<CodePreview github="Accordion" code={DisabledAccordionCode}>
-  <DisabledAccordion />
+<CodePreview github="Accordion" code={CustomizeAccordionCode}>
+  <CustomizeAccordion />
 </CodePreview>
 
 ## API Reference

app/docs/components/accordion/accordionApi.ts

@@ -1,7 +1,7 @@
 export const accordionApiData = [
   {
     id: 1,
-    propsName: 'alwaysOpen',
+    propsName: 'openFirstPanel',
     propsType: 'boolean',
     propsDescription: 'Keep first panels always open.',
     default: 'false',
@@ -10,24 +10,9 @@ export const accordionApiData = [
     id: 3,
     propsName: 'flush',
     propsType: 'boolean',
-    propsDescription: 'Accordion without outer border and rounded corners.',
+    propsDescription: 'Accordion without outer border and and background color',
     default: 'false',
   },
-  {
-    id: 4,
-    propsName: 'collapseAll',
-    propsType: 'boolean',
-    propsDescription: 'Collapse panels by default.',
-    default: 'false',
-  },
-
-  {
-    id: 6,
-    propsName: 'iconPosition',
-    propsType: ['left', 'right'],
-    propsDescription: 'Position of the arrow icon.',
-    default: 'left',
-  },
   {
     id: 7,
     propsName: 'disabled',