- The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a
- unified user experience across our products. It simplifies the design and development process by providing
- ready-to-use components that can be easily customized and integrated into various applications.
-
-
-
-
- How do I customize the color scheme of components?
-
-
- The Keep React offers a range of color variants for components. To customize the color scheme, you can use
- the available color options such as gray,info,error,warning and success. Simply set the desired color
- variant as a prop when using the component, and it will reflect the chosen color.
-
-
-
-
- Can I add additional content to notifications?
-
-
- Yes, the Notification component in the Keep React allows you to include extra content alongside the primary
- message. The additionalContent prop can be used to display supplementary information, such as buttons,
- links, or icons, within the notification to provide users with more context and options.
-
-
-
-
- )
-}
-
-const AccordionAlwaysOpenCode = `
-"use client";
-import { Accordion } from "keep-react";
-
-export const AccordionComponent = () => {
- return (
-
-
-
- What is the purpose of the Keep React?
-
-
-
- The Keep React is a collection of UI components, styles, and
- guidelines that ensure consistency and a unified user experience
- across our products. It simplifies the design and development
- process by providing ready-to-use components that can be easily
- customized and integrated into various applications.
-
-
-
-
-
- How do I customize the color scheme of components?
-
-
-
- The Keep React offers a range of color variants for
- components. To customize the color scheme, you can use the available
- color options such as gray,info,error,warning and success. Simply
- set the desired color variant as a prop when using the component,
- and it will reflect the chosen color.
-
-
-
-
-
- Can I add additional content to notifications?
-
-
-
- Yes, the Notification component in the Keep React allows you
- to include extra content alongside the primary message. The
- additionalContent prop can be used to display supplementary
- information, such as buttons, links, or icons, within the
- notification to provide users with more context and options.
-
-
-
-
- );
-};
-`
-
-export { AccordionAlwaysOpen, AccordionAlwaysOpenCode }
diff --git a/app/docs/components/accordion/variant/AccordionCollapseAll.tsx b/app/docs/components/accordion/variant/AccordionCollapseAll.tsx
deleted file mode 100644
index 27a8f8a1..00000000
--- a/app/docs/components/accordion/variant/AccordionCollapseAll.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-import { Accordion } from '~/src'
-
-const AccordionCollapseAll = () => {
- return (
-
-
- What is the purpose of the Keep React?
-
-
- The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a
- unified user experience across our products. It simplifies the design and development process by providing
- ready-to-use components that can be easily customized and integrated into various applications.
-
-
-
-
- How do I customize the color scheme of components?
-
-
- The Keep React offers a range of color variants for components. To customize the color scheme, you can use
- the available color options such as gray,info,error,warning and success. Simply set the desired color
- variant as a prop when using the component, and it will reflect the chosen color.
-
-
-
-
- Can I add additional content to notifications?
-
-
- Yes, the Notification component in the Keep React allows you to include extra content alongside the primary
- message. The additionalContent prop can be used to display supplementary information, such as buttons,
- links, or icons, within the notification to provide users with more context and options.
-
-
-
-
- )
-}
-
-const AccordionCollapseAllCode = `
-"use client"
-import { Accordion } from "keep-react";
-
-export const AccordionComponent = () => {
- return (
-
-
-
- What is the purpose of the Keep React?
-
-
-
- The Keep React is a collection of UI components, styles, and
- guidelines that ensure consistency and a unified user experience
- across our products. It simplifies the design and development
- process by providing ready-to-use components that can be easily
- customized and integrated into various applications.
-
-
-
-
-
- How do I customize the color scheme of components?
-
-
-
- The Keep React offers a range of color variants for
- components. To customize the color scheme, you can use the available
- color options such as gray,info,error,warning and success. Simply
- set the desired color variant as a prop when using the component,
- and it will reflect the chosen color.
-
-
-
-
-
- Can I add additional content to notifications?
-
-
-
- Yes, the Notification component in the Keep React allows you
- to include extra content alongside the primary message. The
- additionalContent prop can be used to display supplementary
- information, such as buttons, links, or icons, within the
- notification to provide users with more context and options.
-
-
-
-
- );
-};
-`
-
-export { AccordionCollapseAll, AccordionCollapseAllCode }
diff --git a/app/docs/components/accordion/variant/AccordionFlush.tsx b/app/docs/components/accordion/variant/AccordionFlush.tsx
new file mode 100644
index 00000000..8cdadaca
--- /dev/null
+++ b/app/docs/components/accordion/variant/AccordionFlush.tsx
@@ -0,0 +1,83 @@
+'use client'
+import { Accordion } from '~/src'
+
+const AccordionFlush = () => {
+ return (
+
+
+
+ What is the purpose of the Keep React?
+
+
+ The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified
+ user experience across our products. It simplifies the design and development process by providing
+ ready-to-use components that can be easily customized and integrated into various applications.
+
+
+
+
+ How do I customize the color scheme of components?
+
+
+ The Keep React offers a range of color variants for components. To customize the color scheme, you can use the
+ available color options such as gray,info,error,warning and success. Simply set the desired color variant as a
+ prop when using the component, and it will reflect the chosen color.
+
+
+
+
+ Can I add additional content to notifications?
+
+
+ Yes, the Notification component in the Keep React allows you to include extra content alongside the primary
+ message. The additionalContent prop can be used to display supplementary information, such as buttons, links,
+ or icons, within the notification to provide users with more context and options.
+
+
+
+ )
+}
+
+const AccordionFlushCode = `
+"use client"
+import { Accordion } from "keep-react";
+
+export const AccordionComponent = () => {
+ return (
+
+
+
+ What is the purpose of the Keep React?
+
+
+ The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified
+ user experience across our products. It simplifies the design and development process by providing
+ ready-to-use components that can be easily customized and integrated into various applications.
+
+
+
+
+ How do I customize the color scheme of components?
+
+
+ The Keep React offers a range of color variants for components. To customize the color scheme, you can use the
+ available color options such as gray,info,error,warning and success. Simply set the desired color variant as a
+ prop when using the component, and it will reflect the chosen color.
+
+
+
+
+ Can I add additional content to notifications?
+
+
+ Yes, the Notification component in the Keep React allows you to include extra content alongside the primary
+ message. The additionalContent prop can be used to display supplementary information, such as buttons, links,
+ or icons, within the notification to provide users with more context and options.
+
+
+
+ )
+}
+`
+
+export { AccordionFlush, AccordionFlushCode }
diff --git a/app/docs/components/accordion/variant/AccordionOpenPanel.tsx b/app/docs/components/accordion/variant/AccordionOpenPanel.tsx
new file mode 100644
index 00000000..2f01e70a
--- /dev/null
+++ b/app/docs/components/accordion/variant/AccordionOpenPanel.tsx
@@ -0,0 +1,83 @@
+'use client'
+import { Accordion } from '~/src'
+
+const AccordionOpenPanel = () => {
+ return (
+
+
+
+ What is the purpose of the Keep React?
+
+
+ The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified
+ user experience across our products. It simplifies the design and development process by providing
+ ready-to-use components that can be easily customized and integrated into various applications.
+
+
+
+
+ How do I customize the color scheme of components?
+
+
+ The Keep React offers a range of color variants for components. To customize the color scheme, you can use the
+ available color options such as gray,info,error,warning and success. Simply set the desired color variant as a
+ prop when using the component, and it will reflect the chosen color.
+
+
+
+
+ Can I add additional content to notifications?
+
+
+ Yes, the Notification component in the Keep React allows you to include extra content alongside the primary
+ message. The additionalContent prop can be used to display supplementary information, such as buttons, links,
+ or icons, within the notification to provide users with more context and options.
+
+
+
+ )
+}
+
+const AccordionOpenPanelCode = `
+"use client";
+import { Accordion } from "keep-react";
+
+export const AccordionComponent = () => {
+ return (
+
+
+
+ What is the purpose of the Keep React?
+
+
+ The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified
+ user experience across our products. It simplifies the design and development process by providing
+ ready-to-use components that can be easily customized and integrated into various applications.
+
+
+
+
+ How do I customize the color scheme of components?
+
+
+ The Keep React offers a range of color variants for components. To customize the color scheme, you can use
+ the available color options such as gray,info,error,warning and success. Simply set the desired color
+ variant as a prop when using the component, and it will reflect the chosen color.
+
+
+
+
+ Can I add additional content to notifications?
+
+
+ Yes, the Notification component in the Keep React allows you to include extra content alongside the primary
+ message. The additionalContent prop can be used to display supplementary information, such as buttons,
+ links, or icons, within the notification to provide users with more context and options.
+
+
+
+ )
+}
+`
+
+export { AccordionOpenPanel, AccordionOpenPanelCode }
diff --git a/app/docs/components/accordion/variant/AccordionWithCustomIcon.tsx b/app/docs/components/accordion/variant/AccordionWithCustomIcon.tsx
deleted file mode 100644
index c4ef4dd4..00000000
--- a/app/docs/components/accordion/variant/AccordionWithCustomIcon.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client'
-import { Accordion } from '~/src'
-import { CaretDown, CaretUp } from 'phosphor-react'
-
-const AccordionWithCustomIcon = () => {
- return (
- } closeIcon={} iconPosition="right" flush={true}>
-
- What is the purpose of the Keep React?
-
-
- The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a
- unified user experience across our products. It simplifies the design and development process by providing
- ready-to-use components that can be easily customized and integrated into various applications.
-
-
-
-
- How do I customize the color scheme of components?
-
-
- The Keep React offers a range of color variants for components. To customize the color scheme, you can use
- the available color options such as gray,info,error,warning and success. Simply set the desired color
- variant as a prop when using the component, and it will reflect the chosen color.
-
-
-
-
- Can I add additional content to notifications?
-
-
- Yes, the Notification component in the Keep React allows you to include extra content alongside the primary
- message. The additionalContent prop can be used to display supplementary information, such as buttons,
- links, or icons, within the notification to provide users with more context and options.
-
-
-
-
- )
-}
-
-const AccordionWithCustomIconCode = `
-"use client";
-import { Accordion } from "keep-react";
-import { CaretDown, CaretUp } from "phosphor-react";
-
-export const AccordionComponent = () => {
- return (
- }
- closeIcon={}
- iconPosition="right"
- flush={true}
- >
-
-
- What is the purpose of the Keep React?
-
-
-
- The Keep React is a collection of UI components, styles, and
- guidelines that ensure consistency and a unified user experience
- across our products. It simplifies the design and development
- process by providing ready-to-use components that can be easily
- customized and integrated into various applications.
-
-
-
-
-
- How do I customize the color scheme of components?
-
-
-
- The Keep React offers a range of color variants for
- components. To customize the color scheme, you can use the available
- color options such as gray,info,error,warning and success. Simply
- set the desired color variant as a prop when using the component,
- and it will reflect the chosen color.
-
-
-
-
-
- Can I add additional content to notifications?
-
-
-
- Yes, the Notification component in the Keep React allows you
- to include extra content alongside the primary message. The
- additionalContent prop can be used to display supplementary
- information, such as buttons, links, or icons, within the
- notification to provide users with more context and options.
-
-
-
-
- );
-};
-`
-
-export { AccordionWithCustomIcon, AccordionWithCustomIconCode }
diff --git a/app/docs/components/accordion/variant/AccordionWithIcon.tsx b/app/docs/components/accordion/variant/AccordionWithIcon.tsx
new file mode 100644
index 00000000..3a5f16be
--- /dev/null
+++ b/app/docs/components/accordion/variant/AccordionWithIcon.tsx
@@ -0,0 +1,103 @@
+'use client'
+import { Plus } from 'phosphor-react'
+import { Accordion } from '~/src'
+
+const AccordionWithIcon = () => {
+ return (
+
+
+
+ What is the purpose of the Keep React?
+
+
+
+
+
+ The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified
+ user experience across our products. It simplifies the design and development process by providing
+ ready-to-use components that can be easily customized and integrated into various applications.
+
+
+
+
+ How do I customize the color scheme of components?
+
+
+
+
+
+ The Keep React offers a range of color variants for components. To customize the color scheme, you can use the
+ available color options such as gray,info,error,warning and success. Simply set the desired color variant as a
+ prop when using the component, and it will reflect the chosen color.
+
+
+
+
+ Can I add additional content to notifications?
+
+
+
+
+
+ Yes, the Notification component in the Keep React allows you to include extra content alongside the primary
+ message. The additionalContent prop can be used to display supplementary information, such as buttons, links,
+ or icons, within the notification to provide users with more context and options.
+
+
+
+ )
+}
+
+const AccordionWithIconCode = `
+"use client";
+import { Accordion } from "keep-react";
+import { Plus } from "phosphor-react";
+
+export const AccordionComponent = () => {
+ return (
+
+
+
+ What is the purpose of the Keep React?
+
+
+
+
+
+ The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified
+ user experience across our products. It simplifies the design and development process by providing
+ ready-to-use components that can be easily customized and integrated into various applications.
+
+
+
+
+ How do I customize the color scheme of components?
+
+
+
+
+
+ The Keep React offers a range of color variants for components. To customize the color scheme, you can use the
+ available color options such as gray,info,error,warning and success. Simply set the desired color variant as a
+ prop when using the component, and it will reflect the chosen color.
+
+
+
+
+ Can I add additional content to notifications?
+
+
+
+
+
+ Yes, the Notification component in the Keep React allows you to include extra content alongside the primary
+ message. The additionalContent prop can be used to display supplementary information, such as buttons, links,
+ or icons, within the notification to provide users with more context and options.
+
+
+
+ )
+}
+`
+
+export { AccordionWithIcon, AccordionWithIconCode }
diff --git a/app/docs/components/accordion/variant/AccordionWithLeftSideIcon.tsx b/app/docs/components/accordion/variant/AccordionWithLeftSideIcon.tsx
deleted file mode 100644
index 9da3233b..00000000
--- a/app/docs/components/accordion/variant/AccordionWithLeftSideIcon.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-import { Accordion } from '~/src'
-
-const AccordionWithLeftSideIcon = () => {
- return (
-
-
- What is the purpose of the Keep React?
-
-
- The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a
- unified user experience across our products. It simplifies the design and development process by providing
- ready-to-use components that can be easily customized and integrated into various applications.
-
-
-
-
- How do I customize the color scheme of components?
-
-
- The Keep React offers a range of color variants for components. To customize the color scheme, you can use
- the available color options such as gray,info,error,warning and success. Simply set the desired color
- variant as a prop when using the component, and it will reflect the chosen color.
-
-
-
-
- Can I add additional content to notifications?
-
-
- Yes, the Notification component in the Keep React allows you to include extra content alongside the primary
- message. The additionalContent prop can be used to display supplementary information, such as buttons,
- links, or icons, within the notification to provide users with more context and options.
-
-
-
-
- )
-}
-
-const AccordionWithLeftSideIconCode = `
-"use client";
-import { Accordion } from "keep-react";
-
-export const AccordionComponent = () => {
- return (
-
-
-
- What is the purpose of the Keep React?
-
-
-
- The Keep React is a collection of UI components, styles, and
- guidelines that ensure consistency and a unified user experience
- across our products. It simplifies the design and development
- process by providing ready-to-use components that can be easily
- customized and integrated into various applications.
-
-
-
-
-
- How do I customize the color scheme of components?
-
-
-
- The Keep React offers a range of color variants for
- components. To customize the color scheme, you can use the available
- color options such as gray,info,error,warning and success. Simply
- set the desired color variant as a prop when using the component,
- and it will reflect the chosen color.
-
-
-
-
-
- Can I add additional content to notifications?
-
-
-
- Yes, the Notification component in the Keep React allows you
- to include extra content alongside the primary message. The
- additionalContent prop can be used to display supplementary
- information, such as buttons, links, or icons, within the
- notification to provide users with more context and options.
-
-
-
-
- );
-};
-`
-
-export { AccordionWithLeftSideIcon, AccordionWithLeftSideIconCode }
diff --git a/app/docs/components/accordion/variant/CustomizeAccordion.tsx b/app/docs/components/accordion/variant/CustomizeAccordion.tsx
new file mode 100644
index 00000000..0e893b04
--- /dev/null
+++ b/app/docs/components/accordion/variant/CustomizeAccordion.tsx
@@ -0,0 +1,51 @@
+'use client'
+import { Plus } from 'phosphor-react'
+import { Accordion } from '~/src'
+
+const CustomizeAccordion = () => {
+ return (
+
+
+
+ What is the of the Keep React?
+
+
+
+
+
+ The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified
+ user experience across our products. It simplifies the design and development process by providing
+ ready-to-use components that can be easily customized and integrated into various applications.
+
+
+
+ )
+}
+
+const CustomizeAccordionCode = `
+'use client'
+import { Plus } from 'phosphor-react'
+import { Accordion } from 'keep-react'
+
+export const AccordionComponent = () => {
+ return (
+
+
+
+ What is the of the Keep React?
+
+
+
+
+
+ The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified
+ user experience across our products. It simplifies the design and development process by providing
+ ready-to-use components that can be easily customized and integrated into various applications.
+
+
+
+ )
+}
+`
+
+export { CustomizeAccordion, CustomizeAccordionCode }
diff --git a/app/docs/components/accordion/variant/DefaultAccordion.tsx b/app/docs/components/accordion/variant/DefaultAccordion.tsx
index 31be7705..809f1a15 100644
--- a/app/docs/components/accordion/variant/DefaultAccordion.tsx
+++ b/app/docs/components/accordion/variant/DefaultAccordion.tsx
@@ -3,15 +3,15 @@ import { Accordion } from '~/src'
const DefaultAccordion = () => {
return (
-
+
- What is the of the Keep React?
+
+ What is the of the Keep React?
+
-
- The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a
- unified user experience across our products. It simplifies the design and development process by providing
- ready-to-use components that can be easily customized and integrated into various applications.
-
+ The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified
+ user experience across our products. It simplifies the design and development process by providing
+ ready-to-use components that can be easily customized and integrated into various applications.
@@ -24,22 +24,20 @@ import { Accordion } from "keep-react";
export const AccordionComponent = () => {
return (
-
+
- What is the of the Keep React?
+
+ What is the of the Keep React?
+
-
- The Keep React is a collection of UI components, styles, and
- guidelines that ensure consistency and a unified user experience
- across our products. It simplifies the design and development
- process by providing ready-to-use components that can be easily
- customized and integrated into various applications.
-
+ The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a
+ unified user experience across our products. It simplifies the design and development process by providing
+ ready-to-use components that can be easily customized and integrated into various applications.
- );
-};
+ )
+}
`
export { DefaultAccordion, DefaultAccordionCode }
diff --git a/app/docs/components/accordion/variant/DisabledAccordion.tsx b/app/docs/components/accordion/variant/DisabledAccordion.tsx
index e6e63c02..bce75982 100644
--- a/app/docs/components/accordion/variant/DisabledAccordion.tsx
+++ b/app/docs/components/accordion/variant/DisabledAccordion.tsx
@@ -3,22 +3,19 @@ import { Accordion } from '~/src'
const DisabledAccordion = () => {
return (
-
+
- What is keep Design?
+
+ What is keep Design?
+
keep Design is an open-source library of interactive components built on top of Tailwind CSS including
buttons, dropdowns, modals, navbar, and more.
- Check out this guide to learn how to
-
- get started
-
- and start developing websites even faster with components on top of Tailwind CSS.
+ Check out this guide to learn how to and start developing websites even faster with components on top of
+ Tailwind CSS.
@@ -27,25 +24,30 @@ const DisabledAccordion = () => {
}
const DisabledAccordionCode = `
-"use client";
-import { Accordion } from "keep-react";
+'use client'
+import { Accordion } from 'keep-react'
export const AccordionComponent = () => {
return (
-
+
- What is keep Design?
+
+ What is keep Design?
+
- keep Design is an open-source library of interactive components
- built on top of Tailwind CSS including buttons, dropdowns, modals,
- navbar, and more.
+ keep Design is an open-source library of interactive components built on top of Tailwind CSS including
+ buttons, dropdowns, modals, navbar, and more.
+
+
+ Check out this guide to learn how to and start developing websites even faster with components on top of
+ Tailwind CSS.
- );
-};
+ )
+}
`
export { DisabledAccordion, DisabledAccordionCode }
diff --git a/app/docs/components/alert/alert.mdx b/app/docs/components/alert/alert.mdx
index 73be4739..f9a9fd6d 100644
--- a/app/docs/components/alert/alert.mdx
+++ b/app/docs/components/alert/alert.mdx
@@ -3,6 +3,7 @@ import { AlertWithDismissIcon, AlertWithDismissIconCode } from './variant/AlertW
import { AlertWithRounded, AlertWithRoundedCode } from './variant/AlertWithRounded'
import { AlertWithColorVariant, AlertWithColorVariantCode } from './variant/AlertColorVariant'
import { AlertWithBorderAccent, AlertWithBorderAccentCode } from './variant/AlertWithBorderAccent'
+import { CustomizeAlert, CustomizeAlertCode } from './variant/CustomizeAlert'
import CodePreview from '~/components/CodePreview'
import CssThemePreview from '~/components/CssThemePreview'
@@ -53,6 +54,14 @@ Colors can convey the nature of alerts. While the default color is `info`, you c
+## Customize Alert
+
+Alert is fully customizable component. You can inject any className from tailwind as your desired.
+
+
+
+
+
## API Reference
Explore the available props for the Alert component
diff --git a/app/docs/components/alert/alertApi.ts b/app/docs/components/alert/alertApi.ts
index 064c501a..9c46c57b 100644
--- a/app/docs/components/alert/alertApi.ts
+++ b/app/docs/components/alert/alertApi.ts
@@ -3,8 +3,8 @@ export const alertApiData = [
id: 1,
propsName: 'color',
propsDescription: 'The color variant of the alert.',
- propsType: ['info', 'gray', 'success', 'warning', 'error'],
- default: 'info',
+ propsType: ['primary', 'metal', 'success', 'warning', 'error'],
+ default: 'primary',
},
{
id: 2,
@@ -34,13 +34,6 @@ export const alertApiData = [
propsType: 'boolean',
default: 'false',
},
- {
- id: 9,
- propsName: 'title',
- propsDescription: 'Alert title to be displayed in the alert.',
- propsType: 'string',
- default: 'Default message...',
- },
{
id: 6,
propsName: 'withBorder',
@@ -63,23 +56,16 @@ export const alertApiData = [
default: 'left',
},
{
- id: 10,
- propsName: 'className',
- propsDescription: 'Injects the class name',
- propsType: 'string',
- default: 'None',
- },
- {
- id: 11,
- propsName: 'titleStyle',
- propsDescription: 'Injects the class name in title',
+ id: 9,
+ propsName: 'BtnStyle',
+ propsDescription: 'Injects the class name in alert dismiss button.',
propsType: 'string',
default: 'None',
},
{
- id: 12,
- propsName: 'iconStyle',
- propsDescription: 'Injects the class name in icon',
+ id: 10,
+ propsName: 'className',
+ propsDescription: 'Injects the class name',
propsType: 'string',
default: 'None',
},
diff --git a/app/docs/components/alert/variant/AlertColorVariant.tsx b/app/docs/components/alert/variant/AlertColorVariant.tsx
index 8209e4fb..5cd63819 100644
--- a/app/docs/components/alert/variant/AlertColorVariant.tsx
+++ b/app/docs/components/alert/variant/AlertColorVariant.tsx
@@ -2,218 +2,258 @@
import Link from 'next/link'
import { Alert } from '~/src'
import { useState } from 'react'
-import { CheckCircle, Info, WarningCircle, XCircle } from 'phosphor-react'
+import { CheckCircle, Info, XCircle } from 'phosphor-react'
const AlertWithColorVariant = () => {
- const [showAlert, setShowAlert] = useState(false)
- const onDismiss = () => {
- setShowAlert(!showAlert)
+ const [dismiss, setDismiss] = useState([false, false, false, false, false])
+
+ const handleDismiss = (index: number) => {
+ const updatedDismissStates = [...dismiss]
+ updatedDismissStates[index] = true
+ setDismiss(updatedDismissStates)
}
return (
- Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short">
+ withBorderAccent={true}
+ color="primary">
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
handleDismiss(2)}
+ dismiss={dismiss[2]}
rounded={true}
withBorder={true}
- withBorderAccent
- withBorderAccentPosition="left"
- onDismiss={onDismiss}
- additionalContent={
-
- Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
-
- Link style
-
-
- }
- title="Default message - make it short"
- icon={}>
+ withBorderAccent={true}
+ color="success">
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
handleDismiss(3)}
+ dismiss={dismiss[3]}
rounded={true}
withBorder={true}
- withBorderAccent
- onDismiss={onDismiss}
- withBorderAccentPosition="left"
- additionalContent={
-
- Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
-
- Link style
-
-
- }
- title="Default message - make it short"
- icon={}
- />
+ withBorderAccent={true}
+ color="metal">
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+ handleDismiss(4)}
+ dismiss={dismiss[4]}
rounded={true}
withBorder={true}
- withBorderAccent
- onDismiss={onDismiss}
- withBorderAccentPosition="left"
- additionalContent={
-
- Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- />
+ withBorderAccent={true}
+ color="warning">
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+ handleDismiss(5)}
+ dismiss={dismiss[5]}
rounded={true}
withBorder={true}
- withBorderAccent
- onDismiss={onDismiss}
- withBorderAccentPosition="left"
- additionalContent={
-
- Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- />
+ withBorderAccent={true}
+ color="error">
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
)
}
const AlertWithColorVariantCode = `
-"use client";
-import Link from "next/link";
-import { useState } from "react";
-import { Alert } from "keep-react";
-import { CheckCircle, Info, WarningCircle, XCircle } from "phosphor-react";
+'use client'
+import Link from 'next/link'
+import { useState } from 'react'
+import { Alert } from 'keep-react'
+import { CheckCircle, Info, XCircle } from 'phosphor-react'
export const AlertComponent = () => {
- const [showAlert, setShowAlert] = useState(false);
+ const [showAlert, setShowAlert] = useState(false)
const onDismiss = () => {
- setShowAlert(!showAlert);
- };
+ setShowAlert(!showAlert)
+ }
return (
- Default message - Lorem Ipsum is simply dummy text of the printing
- and typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- >
+ withBorderAccent={true}
+ color="primary">
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
- Default message - Lorem Ipsum is simply dummy text of the printing
- and typesetting industry
-
- Link style
-
-
- }
- title="Default message - make it short"
- icon={}
- >
+ withBorderAccent={true}
+ color="success">
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
- Default message - Lorem Ipsum is simply dummy text of the printing
- and typesetting industry
-
- Link style
-
-
- }
- title="Default message - make it short"
- icon={}
- />
+ withBorderAccent={true}
+ color="metal">
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
- Default message - Lorem Ipsum is simply dummy text of the printing
- and typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- />
+ withBorderAccent={true}
+ color="warning">
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
- Default message - Lorem Ipsum is simply dummy text of the printing
- and typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- />
+ withBorderAccent={true}
+ color="error">
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
- );
+ )
}
`
diff --git a/app/docs/components/alert/variant/AlertWithBorderAccent.tsx b/app/docs/components/alert/variant/AlertWithBorderAccent.tsx
index 02ec59a1..85ddb216 100644
--- a/app/docs/components/alert/variant/AlertWithBorderAccent.tsx
+++ b/app/docs/components/alert/variant/AlertWithBorderAccent.tsx
@@ -10,24 +10,22 @@ const AlertWithBorderAccent = () => {
setShowAlert(!showAlert)
}
return (
-
- Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- />
+
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
)
}
@@ -39,32 +37,29 @@ import { Alert } from "keep-react";
import { Info } from "phosphor-react";
export const AlertComponent = () => {
- const [showAlert, setShowAlert] = useState(false);
+ const [showAlert, setShowAlert] = useState(false)
const onDismiss = () => {
- setShowAlert(!showAlert);
- };
+ setShowAlert(!showAlert)
+ }
return (
-
- Default message - Lorem Ipsum is simply dummy text of the printing and
- typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- />
- );
-};
+
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
+ )
+}
`
export { AlertWithBorderAccent, AlertWithBorderAccentCode }
diff --git a/app/docs/components/alert/variant/AlertWithDismissIcon.tsx b/app/docs/components/alert/variant/AlertWithDismissIcon.tsx
index 4c5fc479..a5089986 100644
--- a/app/docs/components/alert/variant/AlertWithDismissIcon.tsx
+++ b/app/docs/components/alert/variant/AlertWithDismissIcon.tsx
@@ -2,7 +2,7 @@
import Link from 'next/link'
import { Alert } from '~/src'
import { useState } from 'react'
-import { WarningCircle } from 'phosphor-react'
+import { Info } from 'phosphor-react'
const AlertWithDismissIcon = () => {
const [showAlert, setShowAlert] = useState(false)
@@ -10,53 +10,56 @@ const AlertWithDismissIcon = () => {
setShowAlert(!showAlert)
}
return (
-
- Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- />
+
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
)
}
const AlertWithDismissIconCode = `
-"use client";
-import Link from "next/link";
-import { useState } from "react";
-import { Alert } from "keep-react";
-import { WarningCircle } from "phosphor-react";
+'use client'
+import Link from 'next/link'
+import { useState } from 'react'
+import { Alert } from 'keep-react'
+import { Info } from 'phosphor-react'
-export const AlertComponent = () => {
- const [showAlert, setShowAlert] = useState(false);
+const AlertComponent = () => {
+ const [showAlert, setShowAlert] = useState(false)
const onDismiss = () => {
- setShowAlert(!showAlert);
- };
+ setShowAlert(!showAlert)
+ }
return (
-
- Default message - Lorem Ipsum is simply dummy text of the printing and
- typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- />
- );
-};
+
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
+ )
+}
`
export { AlertWithDismissIcon, AlertWithDismissIconCode }
diff --git a/app/docs/components/alert/variant/AlertWithRounded.tsx b/app/docs/components/alert/variant/AlertWithRounded.tsx
index 08f55684..44f14a74 100644
--- a/app/docs/components/alert/variant/AlertWithRounded.tsx
+++ b/app/docs/components/alert/variant/AlertWithRounded.tsx
@@ -10,57 +10,56 @@ const AlertWithRounded = () => {
setShowAlert(!showAlert)
}
return (
-
- Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- />
+
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
)
}
const AlertWithRoundedCode = `
-"use client";
-import Link from "next/link";
-import { useState } from "react";
-import { Alert } from "keep-react";
-import { Info } from "phosphor-react";
+'use client'
+import Link from 'next/link'
+import { useState } from 'react'
+import { Alert } from 'keep-react'
+import { Info } from 'phosphor-react'
-export const AlertComponent = () => {
- const [showAlert, setShowAlert] = useState(false);
+const AlertComponent = () => {
+ const [showAlert, setShowAlert] = useState(false)
const onDismiss = () => {
- setShowAlert(!showAlert);
- };
+ setShowAlert(!showAlert)
+ }
return (
-
- Default message - Lorem Ipsum is simply dummy text of the printing and
- typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- />
- );
-};
+
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
+ )
+}
`
export { AlertWithRounded, AlertWithRoundedCode }
diff --git a/app/docs/components/alert/variant/CustomizeAlert.tsx b/app/docs/components/alert/variant/CustomizeAlert.tsx
new file mode 100644
index 00000000..a3159751
--- /dev/null
+++ b/app/docs/components/alert/variant/CustomizeAlert.tsx
@@ -0,0 +1,54 @@
+'use client'
+import { Alert } from '~/src'
+import Link from 'next/link'
+import { Info } from 'phosphor-react'
+
+const CustomizeAlert = () => {
+ return (
+
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
+ )
+}
+
+const CustomizeAlertCode = `
+'use client'
+import Link from 'next/link'
+import { Alert } from 'keep-react'
+import { Info } from 'phosphor-react'
+
+export const AlertComponent = () => {
+ return (
+
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
+ )
+}
+`
+export { CustomizeAlert, CustomizeAlertCode }
diff --git a/app/docs/components/alert/variant/DefaultAlert.tsx b/app/docs/components/alert/variant/DefaultAlert.tsx
index d8dedb38..e4f51c4f 100644
--- a/app/docs/components/alert/variant/DefaultAlert.tsx
+++ b/app/docs/components/alert/variant/DefaultAlert.tsx
@@ -5,44 +5,51 @@ import { Info } from 'phosphor-react'
const DefaultAlert = () => {
return (
-
- Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- />
+
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
)
}
const DefaultAlertCode = `
-"use client";
-import Link from "next/link";
-import { Alert } from "keep-react";
-import { Info } from "phosphor-react";
+'use client'
+import Link from 'next/link'
+import { Alert } from 'keep-react'
+import { Info } from 'phosphor-react'
export const AlertComponent = () => {
return (
-
- Default message - Lorem Ipsum is simply dummy text of the printing and
- typesetting industry
-
- Link style
-
-
- }
- icon={}
- title="Default message - make it short"
- />
- );
-};
+
+
+
+
+
+
+ Default message - make it short
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry
+
+ Link style
+
+
+
+
+
+ )
+}
`
export { DefaultAlert, DefaultAlertCode }
diff --git a/app/docs/components/card/variant/CardWithIcon.tsx b/app/docs/components/card/variant/CardWithIcon.tsx
index 1089c322..36b50b23 100644
--- a/app/docs/components/card/variant/CardWithIcon.tsx
+++ b/app/docs/components/card/variant/CardWithIcon.tsx
@@ -39,14 +39,11 @@ const CardWithIcon = () => {
-
- Keep Design System
-
- }>
-
+
+ Keep Design System
+
+
+
@@ -122,19 +119,11 @@ export const CardComponent = () => {
-
- Keep Design System
-
- }
- >
-
+
+ Keep Design System
+
+
+
diff --git a/app/docs/components/datePicker/variant/DatePickerWithTwoMonth.tsx b/app/docs/components/datePicker/variant/DatePickerWithTwoMonth.tsx
index 315c8148..f632e996 100644
--- a/app/docs/components/datePicker/variant/DatePickerWithTwoMonth.tsx
+++ b/app/docs/components/datePicker/variant/DatePickerWithTwoMonth.tsx
@@ -7,7 +7,7 @@ const DatePickerWithTwoMonth = () => {
return (
+
+
+
+
+
+
+
+
+
+
+ Keep React is awesome
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+
+
+
+
+
+
+
+
+
+
+
+ Keep React is awesome
+
Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-
-
-
-
-
- }>
-
Welcome Keep Design
+
+
+
+
+
+
+
+
+
+ Can we store cookies?
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Keep React is awesome
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+
+
+
+
+
+
+
+
+
+
+
+ Keep React is awesome
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+
+
+
+
+
+
+
+
+ Can we store cookies?
+
+ Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+
+
+
+
+
+
+
+
-
- );
+
+
+ Popover title here
+
+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
+ some form, by injected humour
+
+
+
+
+
+
+
- }
- >
-
+
+ Popover title here
+
+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
+ some form, by injected humour
+
+
+
+
+
+
+
- );
+ )
}
`
diff --git a/app/docs/components/popover/variant/OneParagraphPopover.tsx b/app/docs/components/popover/variant/OneParagraphPopover.tsx
index 7d2992ba..c113756b 100644
--- a/app/docs/components/popover/variant/OneParagraphPopover.tsx
+++ b/app/docs/components/popover/variant/OneParagraphPopover.tsx
@@ -4,18 +4,16 @@ import { Button, Popover } from '~/src'
const OneParagraphPopover = () => {
return (
-
-
- There are many variations of passages of Lorem Ipsum available.
-
-
-
- }>
-
+
+ There are many variations of passages of Lorem Ipsum available.
+
+
+
+
+
+
- There are many variations of passages of Lorem Ipsum available.
-
-
-
- }
- >
-
+
+ There are many variations of passages of Lorem Ipsum available.
+
+
+
+
+
+
- );
+ )
}
`
diff --git a/app/docs/components/popover/variant/PopoverPosition.tsx b/app/docs/components/popover/variant/PopoverPosition.tsx
index ff5863a2..7646903e 100644
--- a/app/docs/components/popover/variant/PopoverPosition.tsx
+++ b/app/docs/components/popover/variant/PopoverPosition.tsx
@@ -3,12 +3,21 @@ import { Button, Popover } from '~/src'
const PopoverPosition = () => {
return (
-
-
-
+
+
+ Popover title here
+
+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
+ some form, by injected humour
+
+
+
+
+
+
+
)
@@ -20,14 +29,22 @@ import { Button, Popover } from "keep-react";
export const PopoverComponent = () => {
return (
-
-
+
+ Popover title here
+
+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
+ some form, by injected humour
+
+
+
+
+
+
+
- );
+ )
}
`
diff --git a/app/docs/components/popover/variant/SingleLinePopover.tsx b/app/docs/components/popover/variant/SingleLinePopover.tsx
index 0f388ac8..d5c6ec7e 100644
--- a/app/docs/components/popover/variant/SingleLinePopover.tsx
+++ b/app/docs/components/popover/variant/SingleLinePopover.tsx
@@ -3,13 +3,12 @@ import { Button, Popover } from '~/src'
const SingleLinePopover = () => {
return (
-
+
+ Popover title here
+
+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
+ some form, by injected humour
+
+
+
+
+
+
+
)
@@ -20,14 +29,22 @@ import { Button, Popover } from "keep-react";
export const PopoverComponent = () => {
return (
-
-
+
+ Popover title here
+
+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
+ some form, by injected humour
+
+
+
+
+
+
+
- );
+ )
}
`
diff --git a/app/docs/components/table/variant/BorderedTable.tsx b/app/docs/components/table/variant/BorderedTable.tsx
index 00978476..81961129 100644
--- a/app/docs/components/table/variant/BorderedTable.tsx
+++ b/app/docs/components/table/variant/BorderedTable.tsx
@@ -93,12 +93,9 @@ const BorderedTable = () => {