From 006187c52d2fd48699c748a0454b51d571f795c2 Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Wed, 10 Jul 2024 13:08:04 +0600 Subject: [PATCH] Added: Component Converted into single color. --- app/components/Community.tsx | 12 +- app/components/DesktopMenu.tsx | 7 +- app/components/Faq.tsx | 4 +- app/components/Hero.tsx | 7 +- app/docs/components/alert/alert.mdx | 8 - .../alert/variant/AlertColorVariant.tsx | 101 ++++++---- .../alert/variant/AlertWithBgColor.tsx | 63 +++--- .../alert/variant/AlertWithCard.tsx | 30 +-- .../alert/variant/AlertWithDismissIcon.tsx | 16 +- .../components/alert/variant/DefaultAlert.tsx | 21 +- app/docs/components/avatar/avatar.mdx | 41 +--- app/docs/components/avatar/avatarApi.ts | 52 +---- app/docs/components/avatar/page.tsx | 4 +- .../components/avatar/variant/AvatarGroup.tsx | 45 +++-- .../avatar/variant/DefaultAvatar.tsx | 17 +- .../avatar/variant/ImageOfAvatar.tsx | 20 +- .../components/avatar/variant/ShapeAvatar.tsx | 25 --- .../avatar/variant/SizesOfAvatar.tsx | 31 --- .../avatar/variant/StatusOfAvatar.tsx | 26 ++- app/docs/components/badge/badge.mdx | 19 +- app/docs/components/badge/badgeApi.ts | 40 +--- .../components/badge/variant/BadgeWithDot.tsx | 51 ----- .../badge/variant/ColorsOfBadge.tsx | 31 +++ .../components/badge/variant/DefaultBadge.tsx | 19 +- .../components/badge/variant/SizesOfBadge.tsx | 57 ------ .../badge/variant/VariantOfBadge.tsx | 8 +- .../button/variant/KeepButtonSize.tsx | 2 +- .../card/variant/CardWithAvatar.tsx | 44 +++-- .../components/card/variant/ProductCard.tsx | 8 +- .../components/card/variant/RegisterCard.tsx | 14 +- .../carousel/variant/CarouselWithAutoPlay.tsx | 4 +- .../carousel/variant/CarouselWithLoop.tsx | 4 +- .../carousel/variant/DefaultCarousel.tsx | 4 +- .../carousel/variant/SlidesToScroll.tsx | 4 +- .../drawer/variant/DefaultDrawer.tsx | 4 +- .../drawer/variant/DrawerPosition.tsx | 6 +- .../dropdown/variant/CustomDropdown.tsx | 32 ++- .../components/empty/variant/DefaultEmpty.tsx | 14 +- .../components/empty/variant/EmptyFolder.tsx | 14 +- .../components/empty/variant/NoDataFound.tsx | 14 +- .../components/empty/variant/NoResultPage.tsx | 14 +- .../components/empty/variant/NotFoundPage.tsx | 14 +- .../empty/variant/PageNotAvailable.tsx | 14 +- .../modal/variant/CustomizeModal.tsx | 23 +-- .../components/modal/variant/DefaultModal.tsx | 32 +-- .../navbar/variant/NavbarLayout4.tsx | 9 +- .../variant/DefaultNotification.tsx | 10 +- .../variant/NotificationPosition.tsx | 20 +- .../variant/NotificationWithCard.tsx | 14 +- app/docs/components/popover/popoverApi.ts | 7 - .../popover/variant/CardPopover.tsx | 68 +++---- .../popover/variant/DefaultPopover.tsx | 80 ++++---- .../popover/variant/IconPopover.tsx | 112 +++++------ .../sidebar/variant/DefaultSidebar.tsx | 10 +- .../sidebar/variant/SidebarWithDropdown.tsx | 10 +- .../spinner/variant/DefaultSpinner.tsx | 6 +- .../spinner/variant/SpinnerButton.tsx | 30 ++- .../spinner/variant/SpinnerColors.tsx | 2 - .../spinner/variant/SpinnerSizes.tsx | 4 +- .../steps/variant/InterActiveStep.tsx | 2 - .../components/table/variant/OrdersTable.tsx | 184 ++++++++++-------- .../components/table/variant/ProductTable.tsx | 14 +- .../components/table/variant/TeamTable.tsx | 29 ++- .../components/tag/variant/DefaultTag.tsx | 6 +- .../components/tag/variant/DisabledTag.tsx | 2 - .../components/toast/variant/DefaultToast.tsx | 8 +- .../components/toast/variant/ToastVariant.tsx | 57 +----- .../toast/variant/ToastWithAction.tsx | 6 - .../toast/variant/ToastWithDescription.tsx | 6 - .../toast/variant/ToastWithPromise.tsx | 6 - app/src/components/Alert/Alert.tsx | 25 +-- app/src/components/Alert/Body.tsx | 2 +- app/src/components/Alert/Container.tsx | 2 +- app/src/components/Alert/Description.tsx | 7 +- app/src/components/Alert/Dismiss.tsx | 19 +- app/src/components/Alert/Icon.tsx | 76 ++++---- app/src/components/Alert/Link.tsx | 24 ++- app/src/components/Alert/Title.tsx | 7 +- app/src/components/Alert/theme.ts | 52 +++-- app/src/components/Avatar/Avatar.tsx | 124 +++--------- app/src/components/Avatar/AvatarBadge.tsx | 28 +++ .../Avatar/{Group.tsx => AvatarGroup.tsx} | 2 +- app/src/components/Avatar/AvatarImage.tsx | 42 ++++ app/src/components/Avatar/AvatarText.tsx | 31 +++ app/src/components/Avatar/Counter.tsx | 29 --- app/src/components/Avatar/Verify.tsx | 40 ---- app/src/components/Avatar/index.tsx | 6 +- app/src/components/Avatar/theme.ts | 132 ------------- app/src/components/Badge/Badge.tsx | 64 +----- app/src/components/Badge/index.tsx | 1 + app/src/components/Badge/theme.ts | 87 +++------ app/src/components/Button/Button.tsx | 39 +--- app/src/components/Button/index.tsx | 1 + app/src/components/Button/theme.ts | 100 ++++++---- app/src/components/Card/Card.tsx | 17 +- app/src/components/Card/Content.tsx | 2 +- app/src/components/Card/Description.tsx | 2 +- app/src/components/Card/Footer.tsx | 2 +- app/src/components/Card/Header.tsx | 2 +- app/src/components/Checkbox/Checkbox.tsx | 1 + app/src/components/Drawer/DrawerAction.tsx | 2 +- app/src/components/Drawer/DrawerOverlay.tsx | 2 +- app/src/components/Dropdown/Action.tsx | 7 +- app/src/components/Modal/ModalAction.tsx | 2 +- app/src/components/Modal/ModalOverlay.tsx | 2 +- .../Notification/NotificationAction.tsx | 2 +- app/src/components/Popover/Action.tsx | 12 +- app/src/components/Popover/Content.tsx | 2 +- app/src/components/Popover/Title.tsx | 2 +- app/src/components/Tooltip/Action.tsx | 2 +- app/src/components/Upload/Icon.tsx | 2 +- 111 files changed, 1125 insertions(+), 1600 deletions(-) delete mode 100644 app/docs/components/avatar/variant/ShapeAvatar.tsx delete mode 100644 app/docs/components/avatar/variant/SizesOfAvatar.tsx delete mode 100644 app/docs/components/badge/variant/BadgeWithDot.tsx create mode 100644 app/docs/components/badge/variant/ColorsOfBadge.tsx delete mode 100644 app/docs/components/badge/variant/SizesOfBadge.tsx create mode 100644 app/src/components/Avatar/AvatarBadge.tsx rename app/src/components/Avatar/{Group.tsx => AvatarGroup.tsx} (91%) create mode 100644 app/src/components/Avatar/AvatarImage.tsx create mode 100644 app/src/components/Avatar/AvatarText.tsx delete mode 100644 app/src/components/Avatar/Counter.tsx delete mode 100644 app/src/components/Avatar/Verify.tsx delete mode 100644 app/src/components/Avatar/theme.ts diff --git a/app/components/Community.tsx b/app/components/Community.tsx index 40b4b1b6..effbb5af 100644 --- a/app/components/Community.tsx +++ b/app/components/Community.tsx @@ -2,7 +2,7 @@ import Link from 'next/link' import { ArrowLineUpRight } from 'phosphor-react' import { useEffect, useState } from 'react' -import { Avatar, AvatarGroup } from '../src' +import { Avatar, AvatarGroup, AvatarImage } from '../src' interface Contributor { login: string @@ -51,13 +51,9 @@ const Community = () => { {contributors?.length ? ( {contributors?.map((user) => ( - + + + ))} ) : null} diff --git a/app/components/DesktopMenu.tsx b/app/components/DesktopMenu.tsx index 59dcd0fd..5dfa2577 100644 --- a/app/components/DesktopMenu.tsx +++ b/app/components/DesktopMenu.tsx @@ -7,6 +7,8 @@ import { useEffect, useState } from 'react' import { navbarRoutes } from '~/routes/routes' import KeepDarkLogo from '../../public/images/keep-dark.svg' import KeepLogo from '../../public/images/keep.svg' +import { buttonVariants } from '../src' +import { cn } from '../src/helpers/cn' import Search from './Search' import ThemeSwitcher from './ThemeSwitcher' @@ -21,6 +23,7 @@ const DesktopMenu = () => { useEffect(() => { setIsOpen(false) }, [pathname]) + return ( <>
@@ -66,9 +69,7 @@ const DesktopMenu = () => { className="rounded-lg bg-primary-25 p-2.5 transition-all duration-300 hover:bg-primary-50 dark:border dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600"> discord - + get started diff --git a/app/components/Faq.tsx b/app/components/Faq.tsx index ed801d4e..c3cb6f6a 100644 --- a/app/components/Faq.tsx +++ b/app/components/Faq.tsx @@ -52,7 +52,7 @@ const Faq = () => {
{faqs.slice(0, 3).map((faq) => ( - + {faq.question} @@ -65,7 +65,7 @@ const Faq = () => {
{faqs.slice(3).map((faq) => ( - + {faq.question} diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx index e5174902..530b3623 100644 --- a/app/components/Hero.tsx +++ b/app/components/Hero.tsx @@ -4,6 +4,7 @@ import Link from 'next/link' import { Check, Clipboard } from 'phosphor-react' import useCopy from '~/hooks/useCopy' import HeroImg from '../../public/images/home/hero-1.png' +import { buttonVariants } from '../src' const Hero = () => { const { copy, copyToClipboard } = useCopy() @@ -39,14 +40,12 @@ const Hero = () => { {copy ? : }
- + Get Started

- ⭐ Got 1.2k stars on Github Repository + ⭐ Got 1.3k stars on Github Repository

diff --git a/app/docs/components/alert/alert.mdx b/app/docs/components/alert/alert.mdx index 1b7cf18b..5300fccd 100644 --- a/app/docs/components/alert/alert.mdx +++ b/app/docs/components/alert/alert.mdx @@ -37,14 +37,6 @@ Switch the background color of alerts using the `withBg={true}` prop. By default -## Alert With Card - -Display the alert message with a card view, and access all the available props for customization. - - - - - ## Dismissible Alerts Dismiss alert messages by using the `dismiss` prop. The default behavior is server-side rendering. If you want to use a click event handler, set the alert as a client-side component. diff --git a/app/docs/components/alert/variant/AlertColorVariant.tsx b/app/docs/components/alert/variant/AlertColorVariant.tsx index f29de50a..40dc64cc 100644 --- a/app/docs/components/alert/variant/AlertColorVariant.tsx +++ b/app/docs/components/alert/variant/AlertColorVariant.tsx @@ -14,47 +14,57 @@ const AlertWithColorVariant = () => { - Alert here - A short description followed by two actions items.. + Primary Alert + A short description followed by two actions items. + + + Learn More + - Learn More - - Alert here - A short description followed by two actions items.. + Secondary Alert + A short description followed by two actions items. + + + Learn More + - Learn More - - Alert here - A short description followed by two actions items.. + Success Alert + A short description followed by two actions items. + + + Learn More + - Learn More - - Alert here - A short description followed by two actions items.. + Warning Alert + A short description followed by two actions items. + + + Learn More + - Learn More - - Alert here - A short description followed by two actions items.. + Error Alert + A short description followed by two actions items. + + + Learn More + - Learn More - ) @@ -77,51 +87,62 @@ export const AlertComponent = () => { - Alert here - A short description followed by two actions items.. + Primary Alert + A short description followed by two actions items. + + + Learn More + - Learn More - - Alert here - A short description followed by two actions items.. + Secondary Alert + A short description followed by two actions items. + + + Learn More + - Learn More - - Alert here - A short description followed by two actions items.. + Success Alert + A short description followed by two actions items. + + + Learn More + - Learn More - - Alert here - A short description followed by two actions items.. + Warning Alert + A short description followed by two actions items. + + + Learn More + - Learn More - - Alert here - A short description followed by two actions items.. + Error Alert + A short description followed by two actions items. + + + Learn More + - Learn More - ) } + ` export { AlertWithColorVariant, AlertWithColorVariantCode } diff --git a/app/docs/components/alert/variant/AlertWithBgColor.tsx b/app/docs/components/alert/variant/AlertWithBgColor.tsx index 2ebbc266..2eb1a769 100644 --- a/app/docs/components/alert/variant/AlertWithBgColor.tsx +++ b/app/docs/components/alert/variant/AlertWithBgColor.tsx @@ -14,54 +14,63 @@ const AlertWithBgColor = () => { - Alert here - A short description followed by two actions items.. + Primary Alert + A short description followed by two actions items. + + + Learn More + - Learn More - - Alert here - A short description followed by two actions items.. + Secondary Alert + A short description followed by two actions items. + + + Learn More + - Learn More - - Alert here - A short description followed by two actions items.. + Success Alert + A short description followed by two actions items. + + + Learn More + - Learn More - - Alert here - A short description followed by two actions items.. + Warning Alert + A short description followed by two actions items. + + + Learn More + - Learn More - - Alert here - A short description followed by two actions items.. + Error Alert + A short description followed by two actions items. + + + Learn More + - Learn More - ) } const AlertWithBgColorCode = ` - import { Alert, AlertContainer, @@ -74,14 +83,16 @@ import { export const AlertComponent = () => { return ( - + - Alert here - A short description followed by two actions items.. + Secondary Alert + A short description followed by two actions items. + + + Learn More + - Learn More - ) } diff --git a/app/docs/components/alert/variant/AlertWithCard.tsx b/app/docs/components/alert/variant/AlertWithCard.tsx index ef6a1a0a..c082ddb9 100644 --- a/app/docs/components/alert/variant/AlertWithCard.tsx +++ b/app/docs/components/alert/variant/AlertWithCard.tsx @@ -1,20 +1,7 @@ -import { - Alert, - AlertBody, - AlertContainer, - AlertDescription, - AlertDismiss, - AlertIcon, - AlertTitle, - Button, - Checkbox, - Label, -} from '../../../../src' - const AlertWithCard = () => { return (
- + {/* @@ -39,14 +26,15 @@ const AlertWithCard = () => { - - + */} + {/* - Alert here + Keep Design System Alert - A short description followed by two actions items. + Keep Design System is an world first design system ecosystem for designers, developers, agencies and + startups.
@@ -65,8 +53,8 @@ const AlertWithCard = () => { - - + */} + {/* @@ -143,7 +131,7 @@ const AlertWithCard = () => { - + */}
) } diff --git a/app/docs/components/alert/variant/AlertWithDismissIcon.tsx b/app/docs/components/alert/variant/AlertWithDismissIcon.tsx index af3e6511..453d05d5 100644 --- a/app/docs/components/alert/variant/AlertWithDismissIcon.tsx +++ b/app/docs/components/alert/variant/AlertWithDismissIcon.tsx @@ -16,14 +16,16 @@ const AlertWithDismissIcon = () => { setShowAlert(!showAlert) } return ( - + Alert here A short description followed by two actions items. - Learn More - + + Learn More + + ) } @@ -47,14 +49,16 @@ const AlertComponent = () => { setShowAlert(!showAlert) } return ( - + Alert here A short description followed by two actions items. - Learn More - + + Learn More + + ) } diff --git a/app/docs/components/alert/variant/DefaultAlert.tsx b/app/docs/components/alert/variant/DefaultAlert.tsx index 3dbedaf4..263e4f3e 100644 --- a/app/docs/components/alert/variant/DefaultAlert.tsx +++ b/app/docs/components/alert/variant/DefaultAlert.tsx @@ -10,14 +10,16 @@ import { const DefaultAlert = () => { return ( - + - Alert here + Default Alert A short description followed by two actions items. - Learn More - + + Learn More + + ) } @@ -35,18 +37,19 @@ import { export const AlertComponent = () => { return ( - + - Alert here + Default Alert A short description followed by two actions items. - Learn More - + + Learn More + + ) } - ` export { DefaultAlert, DefaultAlertCode } diff --git a/app/docs/components/avatar/avatar.mdx b/app/docs/components/avatar/avatar.mdx index 92ff63fc..292b78b6 100644 --- a/app/docs/components/avatar/avatar.mdx +++ b/app/docs/components/avatar/avatar.mdx @@ -1,56 +1,35 @@ import { DefaultAvatar, DefaultAvatarCode } from './variant/DefaultAvatar' -import { ShapeAvatar, ShapeAvatarCode } from './variant/ShapeAvatar' -import { SizesOfAvatar, SizesOfAvatarCode } from './variant/SizesOfAvatar' import { ImageOfAvatar, ImageOfAvatarCode } from './variant/ImageOfAvatar' import { StatusOfAvatar, StatusOfAvatarCode } from './variant/StatusOfAvatar' import { AvatarGroupComponent, AvatarGroupCode } from './variant/AvatarGroup' -import { avatarApiData } from './avatarApi' import CodePreview from '../../../components/CodePreview' -import ComponentApi from '../../../components/ComponentApi' - ## Table of Contents -The Avatar component in the Keep React allows you to display user avatars or profile images in a consistent and visually appealing manner. With customizable options for placeholders, shapes, status icons, and sizes, you can create versatile avatars to suit your design needs. +The Avatar component in the Keep React allows you to display user avatars or profile images in a consistent and visually appealing manner. ## Default Avatar When you enable the placeholder option, a default avatar image appears when there's no user image available. - + -## Avatar Shapes - -Choose between two avatar shapes: rounded and circle. Utilize the shape prop with values `"circle"` or `"rounded"`. - - - - - -## Avatar Sizes - -There are various avatar sizes to fit your design. To change the size, use the `size` prop with values: `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"2xl"`. - - - - - ## Using User Images -Display a user's image using the `img` prop. Provide the path to the user's image, whether it's a local or remote URL. +Display a image using the `src` prop. Provide the path to the user's image, whether it's a local or remote URL. - + ## Avatar Status -The avatar's status reflects the user's availability. Show the user's status using the `"active"` prop, and use the `"verified"` prop to indicate a verified status. +The avatar's status reflects the user's availability. - + @@ -58,12 +37,6 @@ The avatar's status reflects the user's availability. Show the user's status usi Display multiple avatars in a group setting. Customize the layout for visually appealing designs. - + - -## API Reference - -For detailed information about all the props and options, refer to the API section below. - - diff --git a/app/docs/components/avatar/avatarApi.ts b/app/docs/components/avatar/avatarApi.ts index 9722a848..f13f7141 100644 --- a/app/docs/components/avatar/avatarApi.ts +++ b/app/docs/components/avatar/avatarApi.ts @@ -1,51 +1 @@ -export const avatarApiData = [ - { - id: 1, - propsName: 'alt', - propsType: 'string', - propsDescription: 'Alternative text for the avatar image.', - default: 'avatar', - }, - { - id: 2, - propsName: 'img', - propsType: 'string', - propsDescription: "Path to the user's image", - default: '/avatar.png', - }, - { - id: 3, - propsName: 'size', - propsType: ['sm', 'md', 'lg', 'xl', '2xl'], - propsDescription: 'Specifies the size of the avatar', - default: 'md', - }, - { - id: 7, - propsName: 'color', - propsType: ['primary', 'secondary', 'success', 'warning', 'error'], - propsDescription: 'Specifies the color of the avatar', - default: 'secondary', - }, - { - id: 4, - propsName: 'shape', - propsType: ['circle', 'rounded'], - propsDescription: 'The shape of the avatar.', - default: 'circle', - }, - { - id: 5, - propsName: 'status', - propsType: 'boolean', - propsDescription: "Reflects the user's availability status.", - default: 'false', - }, - { - id: 6, - propsName: 'className', - propsType: 'string', - propsDescription: 'Injects the class name in avatar', - default: 'None', - }, -] +export const avatarApiData = [] diff --git a/app/docs/components/avatar/page.tsx b/app/docs/components/avatar/page.tsx index 384048b2..c1f5a802 100644 --- a/app/docs/components/avatar/page.tsx +++ b/app/docs/components/avatar/page.tsx @@ -1,10 +1,10 @@ import type { Metadata, NextPage } from 'next' -import { DocsContentLayout } from '../../../components/DocsContentLayout' import AvatarDocs from '.' +import { DocsContentLayout } from '../../../components/DocsContentLayout' export const metadata: Metadata = { description: - 'The Avatar component in the Keep React allows you to display user avatars or profile images in a consistent and visually appealing manner. With customizable options for placeholders, shapes, status icons, and sizes, you can create versatile avatars to suit your design needs.', + 'The Avatar component in the Keep React allows you to display user avatars or profile images in a consistent and visually appealing manner.', title: 'Avatar - Keep React', } diff --git a/app/docs/components/avatar/variant/AvatarGroup.tsx b/app/docs/components/avatar/variant/AvatarGroup.tsx index 66ef1516..6597349b 100644 --- a/app/docs/components/avatar/variant/AvatarGroup.tsx +++ b/app/docs/components/avatar/variant/AvatarGroup.tsx @@ -1,31 +1,52 @@ -import { Avatar, AvatarCounter, AvatarGroup } from '../../../../src' +import { Avatar, AvatarGroup, AvatarImage } from '../../../../src' const AvatarGroupComponent = () => { return ( - - - - - +9 + + + + + + + + + + + + + + + ) } const AvatarGroupCode = ` -import { Avatar, AvatarCounter, AvatarGroup } from 'keep-react' +import { Avatar, AvatarGroup, AvatarImage } from 'keep-react' const AvatarGroupComponent = () => { return ( - - - - - +9 + + + + + + + + + + + + + + + ) } + ` export { AvatarGroupCode, AvatarGroupComponent } diff --git a/app/docs/components/avatar/variant/DefaultAvatar.tsx b/app/docs/components/avatar/variant/DefaultAvatar.tsx index 7ea70170..f2a67339 100644 --- a/app/docs/components/avatar/variant/DefaultAvatar.tsx +++ b/app/docs/components/avatar/variant/DefaultAvatar.tsx @@ -1,15 +1,22 @@ -import { Avatar } from '../../../../src' +import { Avatar, AvatarText } from '../../../../src' const DefaultAvatar = () => { - return + return ( + + KR + + ) } const DefaultAvatarCode = ` - -import { Avatar } from 'keep-react' +import { Avatar, AvatarText } from 'keep-react' export const AvatarComponent = () => { - return + return ( + + KR + + ) } ` diff --git a/app/docs/components/avatar/variant/ImageOfAvatar.tsx b/app/docs/components/avatar/variant/ImageOfAvatar.tsx index cf2611b7..2c9c8b52 100644 --- a/app/docs/components/avatar/variant/ImageOfAvatar.tsx +++ b/app/docs/components/avatar/variant/ImageOfAvatar.tsx @@ -1,22 +1,30 @@ -import { Avatar } from '../../../../src' +import { Avatar, AvatarImage } from '../../../../src' const ImageOfAvatar = () => { return (
- - + + + + + +
) } const ImageOfAvatarCode = ` -import { Avatar } from "keep-react" +import { Avatar, AvatarImage } from "keep-react" export const AvatarComponent = () => { return ( <> - - + + + + + + ) } diff --git a/app/docs/components/avatar/variant/ShapeAvatar.tsx b/app/docs/components/avatar/variant/ShapeAvatar.tsx deleted file mode 100644 index 3e5212cf..00000000 --- a/app/docs/components/avatar/variant/ShapeAvatar.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Avatar } from '../../../../src' - -const ShapeAvatar = () => { - return ( -
- - -
- ) -} - -const ShapeAvatarCode = ` -import { Avatar } from "keep-react" - -export const AvatarComponent = () => { - return ( - <> - - - - ) -} -` - -export { ShapeAvatar, ShapeAvatarCode } diff --git a/app/docs/components/avatar/variant/SizesOfAvatar.tsx b/app/docs/components/avatar/variant/SizesOfAvatar.tsx deleted file mode 100644 index e517290d..00000000 --- a/app/docs/components/avatar/variant/SizesOfAvatar.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Avatar } from '../../../../src' - -const SizesOfAvatar = () => { - return ( -
- - - - - -
- ) -} - -const SizesOfAvatarCode = ` -import { Avatar } from "keep-react" - -export const AvatarComponent = () => { - return ( - <> - - - - - - - ) -} -` - -export { SizesOfAvatar, SizesOfAvatarCode } diff --git a/app/docs/components/avatar/variant/StatusOfAvatar.tsx b/app/docs/components/avatar/variant/StatusOfAvatar.tsx index e2d53b6e..0b1c4f0a 100644 --- a/app/docs/components/avatar/variant/StatusOfAvatar.tsx +++ b/app/docs/components/avatar/variant/StatusOfAvatar.tsx @@ -1,22 +1,34 @@ -import { Avatar } from '../../../../src' +import { Avatar, AvatarBadge, AvatarImage } from '../../../../src' const StatusOfAvatar = () => { return ( -
- - +
+ + + + + + + +
) } const StatusOfAvatarCode = ` -import { Avatar } from "keep-react"; +import { Avatar, AvatarBadge, AvatarImage } from 'keep-react' export const AvatarComponent = () => { return ( <> - - + + + + + + + + ); } diff --git a/app/docs/components/badge/badge.mdx b/app/docs/components/badge/badge.mdx index 1ebb9ff4..6c931d79 100644 --- a/app/docs/components/badge/badge.mdx +++ b/app/docs/components/badge/badge.mdx @@ -1,7 +1,6 @@ import { DefaultBadge, DefaultBadgeCode } from './variant/DefaultBadge' -import { SizesOfBadge, SizesOfBadgeCode } from './variant/SizesOfBadge' import { VariantOfBadge, VariantOfBadgeCode } from './variant/VariantOfBadge' -import { BadgeWithDot, BadgeWithDotCode } from './variant/BadgeWithDot' +import { ColorsOfBadge, ColorsOfBadgeCode } from './variant/ColorsOfBadge' import { badgeApiData } from './badgeApi' import CodePreview from '../../../components/CodePreview' @@ -20,12 +19,12 @@ The default badge is a versatile component that allows you to add visual indicat -## Sizes of Badge +## Colors of Badge -Choose from two available sizes for the Badge component: `sm` (small) and `md` (medium). This flexibility allows you to tailor the badge to your specific design needs. +Here are the available color variants for the Badge component, each with its own unique color scheme: `primary` `secondary` `success` `warning` and `error`. - - + + ## Variant of Badge @@ -36,14 +35,6 @@ The Badge component offers three variants: `variant="base"`, `variant="border"`, -## Badge With Dot - -Display a badge with a dot by setting the `showIcon` prop to `true`. Customize the position of the dot with the `iconPosition` prop, choosing between `left` and `right`. - - - - - ## API Reference Explore the available props for the Badge component diff --git a/app/docs/components/badge/badgeApi.ts b/app/docs/components/badge/badgeApi.ts index 8f3c09d8..81f6d6c4 100644 --- a/app/docs/components/badge/badgeApi.ts +++ b/app/docs/components/badge/badgeApi.ts @@ -4,49 +4,13 @@ export const badgeApiData = [ propsName: 'color', propsType: ['primary', 'secondary', 'success', 'warning', 'error'], propsDescription: 'Available Badge color.', - default: 'primary', + default: 'secondary', }, { id: 2, propsName: 'variant', propsType: ['base', 'border', 'background'], propsDescription: 'Variant the badge', - default: 'base', - }, - { - id: 3, - propsName: 'size', - propsType: ['xs', 'sm'], - propsDescription: 'Size variant of the badge.', - default: 'sm', - }, - - { - id: 4, - propsName: 'showIcon', - propsType: 'boolean', - propsDescription: 'Icon show in badge show or not?', - default: 'false', - }, - { - id: 5, - propsName: 'iconPosition', - propsType: ['left', 'right'], - propsDescription: 'Position of the icon inside the badge.', - default: 'right', - }, - { - id: 6, - propsName: 'className', - propsType: 'string', - propsDescription: 'Custom CSS class to be added to the badge.', - default: 'None', - }, - { - id: 7, - propsName: 'dotStyle', - propsType: 'string', - propsDescription: 'Custom style to be added to the badge.', - default: 'None', + default: 'background', }, ] diff --git a/app/docs/components/badge/variant/BadgeWithDot.tsx b/app/docs/components/badge/variant/BadgeWithDot.tsx deleted file mode 100644 index 7c8a2054..00000000 --- a/app/docs/components/badge/variant/BadgeWithDot.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Badge } from '../../../../src' - -const BadgeWithDot = () => { - return ( -
- - Primary - - - Secondary - - - Success - - - Warning - - - Error - -
- ) -} - -const BadgeWithDotCode = ` -import { Badge } from 'keep-react' - -export const BadgeComponent = () => { - return ( -
- - Primary - - - Secondary - - - Success - - - Warning - - - Error - -
- ) -} -` - -export { BadgeWithDot, BadgeWithDotCode } diff --git a/app/docs/components/badge/variant/ColorsOfBadge.tsx b/app/docs/components/badge/variant/ColorsOfBadge.tsx new file mode 100644 index 00000000..69d90d1d --- /dev/null +++ b/app/docs/components/badge/variant/ColorsOfBadge.tsx @@ -0,0 +1,31 @@ +import { Badge } from '../../../../src' + +const ColorsOfBadge = () => { + return ( +
+ Primary + Secondary + Success + Warning + Error +
+ ) +} + +const ColorsOfBadgeCode = ` +import { Badge } from 'keep-react' + +export const BadgeComponent = () => { + return ( + <> + Primary + Secondary + Success + Warning + Error + + ) +} +` + +export { ColorsOfBadge, ColorsOfBadgeCode } diff --git a/app/docs/components/badge/variant/DefaultBadge.tsx b/app/docs/components/badge/variant/DefaultBadge.tsx index a1360524..a2498d43 100644 --- a/app/docs/components/badge/variant/DefaultBadge.tsx +++ b/app/docs/components/badge/variant/DefaultBadge.tsx @@ -2,12 +2,8 @@ import { Badge } from '../../../../src' const DefaultBadge = () => { return ( -
- Primary - Secondary - Success - Warning - Error +
+ Default Badge
) } @@ -16,17 +12,8 @@ const DefaultBadgeCode = ` import { Badge } from 'keep-react' export const BadgeComponent = () => { - return ( - <> - Primary - Secondary - Success - Warning - Error - - ) + return Default Badge } - ` export { DefaultBadge, DefaultBadgeCode } diff --git a/app/docs/components/badge/variant/SizesOfBadge.tsx b/app/docs/components/badge/variant/SizesOfBadge.tsx deleted file mode 100644 index 3d23c576..00000000 --- a/app/docs/components/badge/variant/SizesOfBadge.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { Badge } from '../../../../src' - -const SizesOfBadge = () => { - return ( -
-
- - Primary - - - Secondary - - - Success - - - Warning - - - Error - -
-
- - Primary - - - Secondary - - - Success - - - Warning - - - Error - -
-
- ) -} - -const SizesOfBadgeCode = ` -import { Badge } from 'keep-react' - -export const BadgeComponent = () => { - return ( - <> - Small Badge - Medium Badge - - ); -}; -` - -export { SizesOfBadge, SizesOfBadgeCode } diff --git a/app/docs/components/badge/variant/VariantOfBadge.tsx b/app/docs/components/badge/variant/VariantOfBadge.tsx index d7fd723f..4e12b5be 100644 --- a/app/docs/components/badge/variant/VariantOfBadge.tsx +++ b/app/docs/components/badge/variant/VariantOfBadge.tsx @@ -2,7 +2,7 @@ import { Badge } from '../../../../src' const VariantOfBadge = () => { return ( -
+
Primary @@ -64,9 +64,9 @@ import { Badge } from 'keep-react' export const BadgeComponent = () => { return ( <> - Base - Border - Background + Base + Border + Background ); }; diff --git a/app/docs/components/button/variant/KeepButtonSize.tsx b/app/docs/components/button/variant/KeepButtonSize.tsx index 5052a9ee..decfecfc 100644 --- a/app/docs/components/button/variant/KeepButtonSize.tsx +++ b/app/docs/components/button/variant/KeepButtonSize.tsx @@ -3,7 +3,7 @@ import { Button } from '../../../../src' const KeepButtonSize = () => { return ( -
+
diff --git a/app/docs/components/card/variant/CardWithAvatar.tsx b/app/docs/components/card/variant/CardWithAvatar.tsx index aa7ec9be..85861f0d 100644 --- a/app/docs/components/card/variant/CardWithAvatar.tsx +++ b/app/docs/components/card/variant/CardWithAvatar.tsx @@ -1,4 +1,4 @@ -import { Avatar, AvatarCounter, AvatarGroup, Card, CardContent, CardDescription, CardTitle } from '../../../../src' +import { Avatar, AvatarGroup, AvatarImage, Card, CardContent, CardDescription, CardTitle } from '../../../../src' const CardWithAvatar = () => { return ( @@ -7,11 +7,21 @@ const CardWithAvatar = () => { Our Contributors They help us to grow up the keep react component library - - - - - +9 + + + + + + + + + + + + + + + @@ -19,7 +29,7 @@ const CardWithAvatar = () => { } const CardWithAvatarCode = ` -import { Avatar, AvatarCounter, AvatarGroup, Card, CardContent, CardDescription, CardTitle } from 'keep-react' +import { Avatar, AvatarGroup, AvatarImage, Card, CardContent, CardDescription, CardTitle } from 'keep-react' export const CardComponent = () => { return ( @@ -28,11 +38,21 @@ export const CardComponent = () => { Our Contributors They help us to grow up the keep react component library - - - - - +9 + + + + + + + + + + + + + + + diff --git a/app/docs/components/card/variant/ProductCard.tsx b/app/docs/components/card/variant/ProductCard.tsx index ae95e0d6..c15e0c30 100644 --- a/app/docs/components/card/variant/ProductCard.tsx +++ b/app/docs/components/card/variant/ProductCard.tsx @@ -12,9 +12,7 @@ const ProductCard = () => { Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam animi voluptas perspiciatis quidem esse! - + ) @@ -35,9 +33,7 @@ export const CardComponent = () => { Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam animi voluptas perspiciatis quidem esse! - + ) diff --git a/app/docs/components/card/variant/RegisterCard.tsx b/app/docs/components/card/variant/RegisterCard.tsx index f41be24e..320e18b2 100644 --- a/app/docs/components/card/variant/RegisterCard.tsx +++ b/app/docs/components/card/variant/RegisterCard.tsx @@ -22,11 +22,11 @@ const RegisterCard = () => { If you don't have any account then just click here
- - @@ -51,7 +51,7 @@ const RegisterCard = () => {
- @@ -71,8 +71,8 @@ import { CardHeader, CardTitle, Divider, - InputIcon, Input, + InputIcon, Label, } from 'keep-react' @@ -85,11 +85,11 @@ export const CardComponent = () => { If you don't have any account then just click here
- - @@ -114,7 +114,7 @@ export const CardComponent = () => {
- diff --git a/app/docs/components/carousel/variant/CarouselWithAutoPlay.tsx b/app/docs/components/carousel/variant/CarouselWithAutoPlay.tsx index 5dddc4f9..f8a20dff 100644 --- a/app/docs/components/carousel/variant/CarouselWithAutoPlay.tsx +++ b/app/docs/components/carousel/variant/CarouselWithAutoPlay.tsx @@ -16,7 +16,7 @@ const CarouselWithAutoPlay = () => { {[1, 2, 3, 4, 5].map((slide) => ( -
+

{slide}

@@ -53,7 +53,7 @@ export const CarouselComponent = () => { {[1, 2, 3, 4, 5].map((slide) => ( -
+

{slide}

diff --git a/app/docs/components/carousel/variant/CarouselWithLoop.tsx b/app/docs/components/carousel/variant/CarouselWithLoop.tsx index b498d8e8..e7e969b7 100644 --- a/app/docs/components/carousel/variant/CarouselWithLoop.tsx +++ b/app/docs/components/carousel/variant/CarouselWithLoop.tsx @@ -15,7 +15,7 @@ const CarouselWithLoop = () => { {[1, 2, 3, 4, 5].map((slide) => ( -
+

{slide}

@@ -50,7 +50,7 @@ export const CarouselComponent = () => ( {[1, 2, 3, 4, 5].map((slide) => ( -
+

{slide}

diff --git a/app/docs/components/carousel/variant/DefaultCarousel.tsx b/app/docs/components/carousel/variant/DefaultCarousel.tsx index 11a791ce..8a92aee2 100644 --- a/app/docs/components/carousel/variant/DefaultCarousel.tsx +++ b/app/docs/components/carousel/variant/DefaultCarousel.tsx @@ -15,7 +15,7 @@ const DefaultCarousel = () => { {[1, 2, 3, 4, 5].map((slide) => ( -
+

{slide}

@@ -50,7 +50,7 @@ export const CarouselComponent = () => ( {[1, 2, 3, 4, 5].map((slide) => ( -
+

{slide}

diff --git a/app/docs/components/carousel/variant/SlidesToScroll.tsx b/app/docs/components/carousel/variant/SlidesToScroll.tsx index 326af68f..85385b86 100644 --- a/app/docs/components/carousel/variant/SlidesToScroll.tsx +++ b/app/docs/components/carousel/variant/SlidesToScroll.tsx @@ -15,7 +15,7 @@ const SlidesToScroll = () => { {[1, 2, 3, 4, 5].map((slide) => ( -
+

{slide}

@@ -50,7 +50,7 @@ export const CarouselComponent = () => ( {[1, 2, 3, 4, 5].map((slide) => ( -
+

{slide}

diff --git a/app/docs/components/drawer/variant/DefaultDrawer.tsx b/app/docs/components/drawer/variant/DefaultDrawer.tsx index d72fff0a..8de8940b 100644 --- a/app/docs/components/drawer/variant/DefaultDrawer.tsx +++ b/app/docs/components/drawer/variant/DefaultDrawer.tsx @@ -13,7 +13,7 @@ const DefaultDrawer = () => { for efficient development and bring your ideas to life with ease.

- +
@@ -38,7 +38,7 @@ export const DrawerComponent = () => { for efficient development and bring your ideas to life with ease.

- +
diff --git a/app/docs/components/drawer/variant/DrawerPosition.tsx b/app/docs/components/drawer/variant/DrawerPosition.tsx index 3c752c12..ae0d394b 100644 --- a/app/docs/components/drawer/variant/DrawerPosition.tsx +++ b/app/docs/components/drawer/variant/DrawerPosition.tsx @@ -15,7 +15,6 @@ const DrawerPosition = () => { setIsOpen(!isOpen) setPosition(position as 'bottom' | 'top' | 'left' | 'right') }} - color="secondary" className="capitalize"> {position} @@ -31,7 +30,7 @@ const DrawerPosition = () => { resources for efficient development and bring your ideas to life with ease.

- +
@@ -59,7 +58,6 @@ export const DrawerComponent = () => { setIsOpen(!isOpen) setPosition(position as 'bottom' | 'top' | 'left' | 'right') }} - color="secondary" className="capitalize"> {position} @@ -75,7 +73,7 @@ export const DrawerComponent = () => { resources for efficient development and bring your ideas to life with ease.

- +
diff --git a/app/docs/components/dropdown/variant/CustomDropdown.tsx b/app/docs/components/dropdown/variant/CustomDropdown.tsx index 7a96ddb5..5ab3c3f1 100644 --- a/app/docs/components/dropdown/variant/CustomDropdown.tsx +++ b/app/docs/components/dropdown/variant/CustomDropdown.tsx @@ -1,4 +1,12 @@ -import { Avatar, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src' +import { + Avatar, + AvatarImage, + Dropdown, + DropdownAction, + DropdownContent, + DropdownItem, + DropdownList, +} from '../../../../src' const dropdownData = [ { @@ -42,7 +50,9 @@ const CustomDropdown = () => { {dropdownData.map((data) => (
- + + +

{data.name}

@@ -57,7 +67,15 @@ const CustomDropdown = () => { } const CustomDropdownCode = ` -import { Avatar, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from 'keep-react' +import { + Avatar, + AvatarImage, + Dropdown, + DropdownAction, + DropdownContent, + DropdownItem, + DropdownList, +} from 'keep-react' export const DropdownComponent = () => { return ( @@ -68,11 +86,13 @@ export const DropdownComponent = () => { {dropdownData.map((data) => (
- + + +
-

{data.name}

-

{data.title}

+

{data.name}

+

{data.title}

 ))} diff --git a/app/docs/components/empty/variant/DefaultEmpty.tsx b/app/docs/components/empty/variant/DefaultEmpty.tsx index 631e5750..50845a8a 100644 --- a/app/docs/components/empty/variant/DefaultEmpty.tsx +++ b/app/docs/components/empty/variant/DefaultEmpty.tsx @@ -1,5 +1,6 @@ import Image from 'next/image' -import { Button, Empty, EmptyDescription, EmptyImage, EmptyTitle } from '../../../../src' +import Link from 'next/link' +import { buttonVariants, Empty, EmptyDescription, EmptyImage, EmptyTitle } from '../../../../src' const DefaultEmpty = () => { return ( @@ -16,16 +17,17 @@ const DefaultEmpty = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } const DefaultEmptyCode = ` +import Link from 'next/link' import Image from 'next/image' -import { Button, Empty, EmptyDescription, EmptyImage, EmptyTitle } from 'keep-react' +import { Button,buttonVariants, Empty, EmptyDescription, EmptyImage, EmptyTitle } from 'keep-react' export const EmptyComponent = () => { return ( @@ -42,7 +44,9 @@ export const EmptyComponent = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + + Go to home + ) } diff --git a/app/docs/components/empty/variant/EmptyFolder.tsx b/app/docs/components/empty/variant/EmptyFolder.tsx index cbbd1b9f..97edc49c 100644 --- a/app/docs/components/empty/variant/EmptyFolder.tsx +++ b/app/docs/components/empty/variant/EmptyFolder.tsx @@ -1,5 +1,6 @@ import Image from 'next/image' -import { Button, Empty, EmptyDescription, EmptyImage, EmptyTitle } from '../../../../src' +import Link from 'next/link' +import { buttonVariants, Empty, EmptyDescription, EmptyImage, EmptyTitle } from '../../../../src' const EmptyFolder = () => { return ( @@ -16,16 +17,17 @@ const EmptyFolder = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } const EmptyFolderCode = ` import Image from 'next/image' -import { Button, Empty, EmptyDescription, EmptyImage, EmptyTitle } from 'keep-react' +import Link from 'next/link' +import { buttonVariants, Empty, EmptyDescription, EmptyImage, EmptyTitle } from 'keep-react' export const EmptyComponent = () => { return ( @@ -42,7 +44,9 @@ export const EmptyComponent = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + + Go to home + ) } diff --git a/app/docs/components/empty/variant/NoDataFound.tsx b/app/docs/components/empty/variant/NoDataFound.tsx index 37945753..71abc851 100644 --- a/app/docs/components/empty/variant/NoDataFound.tsx +++ b/app/docs/components/empty/variant/NoDataFound.tsx @@ -1,5 +1,6 @@ import Image from 'next/image' -import { Button, Empty, EmptyDescription, EmptyImage, EmptyTitle } from '../../../../src' +import Link from 'next/link' +import { buttonVariants, Empty, EmptyDescription, EmptyImage, EmptyTitle } from '../../../../src' const NoDataFound = () => { return ( @@ -16,16 +17,17 @@ const NoDataFound = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } const NoDataFoundCode = ` import Image from 'next/image' -import { Button, Empty, EmptyDescription, EmptyImage, EmptyTitle } from 'keep-react' +import Link from 'next/link' +import { buttonVariants, Empty, EmptyDescription, EmptyImage, EmptyTitle } from 'keep-react' export const EmptyComponent = () => { return ( @@ -42,7 +44,9 @@ export const EmptyComponent = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + + Go to home + ) } diff --git a/app/docs/components/empty/variant/NoResultPage.tsx b/app/docs/components/empty/variant/NoResultPage.tsx index 66687c25..00739bd9 100644 --- a/app/docs/components/empty/variant/NoResultPage.tsx +++ b/app/docs/components/empty/variant/NoResultPage.tsx @@ -1,5 +1,6 @@ import Image from 'next/image' -import { Button, Empty, EmptyDescription, EmptyImage, EmptyTitle } from '../../../../src' +import Link from 'next/link' +import { buttonVariants, Empty, EmptyDescription, EmptyImage, EmptyTitle } from '../../../../src' const NoResultPage = () => { return ( @@ -16,16 +17,17 @@ const NoResultPage = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } const NoResultPageCode = ` import Image from 'next/image' -import { Button, Empty, EmptyDescription, EmptyImage, EmptyTitle } from 'keep-react' +import Link from 'next/link' +import { buttonVariants, Empty, EmptyDescription, EmptyImage, EmptyTitle } from 'keep-react' export const EmptyComponent = () => { return ( @@ -42,7 +44,9 @@ export const EmptyComponent = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + + Go to home + ) } diff --git a/app/docs/components/empty/variant/NotFoundPage.tsx b/app/docs/components/empty/variant/NotFoundPage.tsx index 2227eee5..cba25c54 100644 --- a/app/docs/components/empty/variant/NotFoundPage.tsx +++ b/app/docs/components/empty/variant/NotFoundPage.tsx @@ -1,5 +1,6 @@ import Image from 'next/image' -import { Button, Empty, EmptyDescription, EmptyImage, EmptyTitle } from '../../../../src' +import Link from 'next/link' +import { buttonVariants, Empty, EmptyDescription, EmptyImage, EmptyTitle } from '../../../../src' const NotFoundPage = () => { return ( @@ -16,16 +17,17 @@ const NotFoundPage = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } const NotFoundPageCode = ` import Image from 'next/image' -import { Button, Empty, EmptyDescription, EmptyImage, EmptyTitle } from 'keep-react' +import Link from 'next/link' +import { buttonVariants, Empty, EmptyDescription, EmptyImage, EmptyTitle } from 'keep-react' export const EmptyComponent = () => { return ( @@ -42,7 +44,9 @@ export const EmptyComponent = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + + Go to home + ) } diff --git a/app/docs/components/empty/variant/PageNotAvailable.tsx b/app/docs/components/empty/variant/PageNotAvailable.tsx index d94473cf..5b42d321 100644 --- a/app/docs/components/empty/variant/PageNotAvailable.tsx +++ b/app/docs/components/empty/variant/PageNotAvailable.tsx @@ -1,5 +1,6 @@ import Image from 'next/image' -import { Button, Empty, EmptyDescription, EmptyImage, EmptyTitle } from '../../../../src' +import Link from 'next/link' +import { buttonVariants, Empty, EmptyDescription, EmptyImage, EmptyTitle } from '../../../../src' const PageNotAvailable = () => { return ( @@ -16,16 +17,17 @@ const PageNotAvailable = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } const PageNotAvailableCode = ` import Image from 'next/image' -import { Button, Empty, EmptyDescription, EmptyImage, EmptyTitle } from 'keep-react' +import Link from 'next/link' +import { buttonVariants, Empty, EmptyDescription, EmptyImage, EmptyTitle } from 'keep-react' export const EmptyComponent = () => { return ( @@ -42,7 +44,9 @@ export const EmptyComponent = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + + Go to home + ) } diff --git a/app/docs/components/modal/variant/CustomizeModal.tsx b/app/docs/components/modal/variant/CustomizeModal.tsx index 1e0c7728..d244e9e1 100644 --- a/app/docs/components/modal/variant/CustomizeModal.tsx +++ b/app/docs/components/modal/variant/CustomizeModal.tsx @@ -17,15 +17,13 @@ const CustomizeModal = () => { return ( - + -
+
@@ -37,9 +35,7 @@ const CustomizeModal = () => { - + @@ -68,15 +64,13 @@ export const ModalComponent = () => { return ( - + - + -
+
@@ -88,9 +82,7 @@ export const ModalComponent = () => { - + @@ -98,6 +90,7 @@ export const ModalComponent = () => { ) } + ` export { CustomizeModal, CustomizeModalCode } diff --git a/app/docs/components/modal/variant/DefaultModal.tsx b/app/docs/components/modal/variant/DefaultModal.tsx index 33625f49..71c1284f 100644 --- a/app/docs/components/modal/variant/DefaultModal.tsx +++ b/app/docs/components/modal/variant/DefaultModal.tsx @@ -17,16 +17,14 @@ const DefaultModal = () => { return ( - + -
- +
+
Update Modal Status @@ -37,14 +35,10 @@ const DefaultModal = () => { - + - + @@ -74,16 +68,14 @@ export const ModalComponent = () => { return ( - + -
- +
+
Update Modal Status @@ -94,14 +86,10 @@ export const ModalComponent = () => { - + - + diff --git a/app/docs/components/navbar/variant/NavbarLayout4.tsx b/app/docs/components/navbar/variant/NavbarLayout4.tsx index bb373626..f8ce2d50 100644 --- a/app/docs/components/navbar/variant/NavbarLayout4.tsx +++ b/app/docs/components/navbar/variant/NavbarLayout4.tsx @@ -3,6 +3,7 @@ import KeepDarkLogo from '../../../../../public/images/keep-dark.svg' import KeepLogo from '../../../../../public/images/keep.svg' import { Avatar, + AvatarImage, Dropdown, DropdownAction, DropdownContent, @@ -34,7 +35,9 @@ const NavbarLayout4 = () => { - + + + @@ -92,7 +95,9 @@ export const NavbarComponent = () => { - + + + diff --git a/app/docs/components/notification/variant/DefaultNotification.tsx b/app/docs/components/notification/variant/DefaultNotification.tsx index 30ee4fa3..a423cf39 100644 --- a/app/docs/components/notification/variant/DefaultNotification.tsx +++ b/app/docs/components/notification/variant/DefaultNotification.tsx @@ -23,12 +23,10 @@ const DefaultNotification = () => { - + - + @@ -62,10 +60,10 @@ export const NotificationComponent = () => { - + - diff --git a/app/docs/components/notification/variant/NotificationPosition.tsx b/app/docs/components/notification/variant/NotificationPosition.tsx index 88334860..24d62ab5 100644 --- a/app/docs/components/notification/variant/NotificationPosition.tsx +++ b/app/docs/components/notification/variant/NotificationPosition.tsx @@ -1,6 +1,14 @@ 'use client' import { useState } from 'react' -import { Avatar, Button, ButtonGroup, Notification, NotificationBody, NotificationContent } from '../../../../src' +import { + Avatar, + AvatarImage, + Button, + ButtonGroup, + Notification, + NotificationBody, + NotificationContent, +} from '../../../../src' const NotificationPosition = () => { const [isOpen, setIsOpen] = useState(false) @@ -48,7 +56,9 @@ const NotificationPosition = () => {
- + + +

@@ -67,7 +77,7 @@ const NotificationPosition = () => { const NotificationPositionCode = ` 'use client' import { useState } from 'react' -import { Avatar, Button, ButtonGroup, Notification, NotificationBody, NotificationContent } from 'keep-react' +import { Avatar, AvatarImage, Button, ButtonGroup, Notification, NotificationBody, NotificationContent } from 'keep-react' export const NotificationComponent = () => { const [isOpen, setIsOpen] = useState(false) @@ -115,7 +125,9 @@ export const NotificationComponent = () => {

- + + +

diff --git a/app/docs/components/notification/variant/NotificationWithCard.tsx b/app/docs/components/notification/variant/NotificationWithCard.tsx index 1f93a152..15e973a8 100644 --- a/app/docs/components/notification/variant/NotificationWithCard.tsx +++ b/app/docs/components/notification/variant/NotificationWithCard.tsx @@ -21,8 +21,8 @@ const NotificationWithCard = () => { image

@@ -33,12 +33,10 @@ const NotificationWithCard = () => {
- + - + @@ -73,8 +71,8 @@ export const NotificationComponent = () => { src="https://via.placeholder.com/600x400" alt="image" width={600} - className="rounded-lg" height={400} + className="rounded-lg" />
Can we store cookies? @@ -84,10 +82,10 @@ export const NotificationComponent = () => {
- + - diff --git a/app/docs/components/popover/popoverApi.ts b/app/docs/components/popover/popoverApi.ts index 7c85e468..e48e5afa 100644 --- a/app/docs/components/popover/popoverApi.ts +++ b/app/docs/components/popover/popoverApi.ts @@ -1,13 +1,6 @@ export const popoverAPI = [ { id: 1, - propsName: 'className', - propsType: ['string'], - propsDescription: 'Custom CSS class for styling the popover.', - default: 'None', - }, - { - id: 2, propsName: 'placement', propsType: [ 'top', diff --git a/app/docs/components/popover/variant/CardPopover.tsx b/app/docs/components/popover/variant/CardPopover.tsx index 83cda78f..8e2d5102 100644 --- a/app/docs/components/popover/variant/CardPopover.tsx +++ b/app/docs/components/popover/variant/CardPopover.tsx @@ -18,14 +18,12 @@ const CardPopover = () => { width={600} height={300} /> -
- Popover title +
+ Keep Design System You can customize the styles and behavior of this component according to your requirements. - +
@@ -41,14 +39,12 @@ const CardPopover = () => { width={600} height={300} /> -
- Popover title +
+ Keep Design System You can customize the styles and behavior of this component according to your requirements. - +
@@ -64,14 +60,12 @@ const CardPopover = () => { width={600} height={300} /> -
- Popover title +
+ Keep Design System You can customize the styles and behavior of this component according to your requirements. - +
@@ -87,14 +81,12 @@ const CardPopover = () => { width={600} height={300} /> -
- Popover title +
+ Keep Design System You can customize the styles and behavior of this component according to your requirements. - +
@@ -113,26 +105,24 @@ export const PopoverComponent = () => { return ( - + - - image -
- Popover title - - You can customize the styles and behavior of this component according to your requirements. - - -
- + + image +
+ Keep Design System + + You can customize the styles and behavior of this component according to your requirements. + + +
+ ) } diff --git a/app/docs/components/popover/variant/DefaultPopover.tsx b/app/docs/components/popover/variant/DefaultPopover.tsx index 14f54d01..5183640f 100644 --- a/app/docs/components/popover/variant/DefaultPopover.tsx +++ b/app/docs/components/popover/variant/DefaultPopover.tsx @@ -2,6 +2,7 @@ import { CaretDown, CaretLeft, CaretRight, CaretUp } from 'phosphor-react' import { Avatar, + AvatarImage, Button, Popover, PopoverContent, @@ -18,30 +19,33 @@ const DefaultPopover = () => { -
- Popover title - demo_email@email.com + + +
- +
+ Keep Designer + keepdesign@email.com +
+ - -
- Popover title - demo_email@email.com + + +
- +
+ Keep Designer + keepdesign@email.com +
+ @@ -49,14 +53,16 @@ const DefaultPopover = () => { -
- Popover title - demo_email@email.com + + + +
+
+ Keep Designer + keepdesign@email.com
- + @@ -64,14 +70,16 @@ const DefaultPopover = () => { -
- Popover title - demo_email@email.com + + + +
+
+ Keep Designer + keepdesign@email.com
- +
@@ -82,30 +90,34 @@ const DefaultPopoverCode = ` 'use client' import { Avatar, + AvatarImage, Button, Popover, PopoverContent, PopoverDescription, PopoverHeading, PopoverTrigger, -} from 'phosphor-react' +} from 'keep-react' + import { CaretRight } from 'phosphor-react' -export const PopoverComponent = () => { +export const PopoverComponent = () => { return ( - - + +
+ + + +
- Popover title - demo_email@email.com + Keep Designer + keepdesign@email.com
- + ) diff --git a/app/docs/components/popover/variant/IconPopover.tsx b/app/docs/components/popover/variant/IconPopover.tsx index d6ee4cf0..f3a6987d 100644 --- a/app/docs/components/popover/variant/IconPopover.tsx +++ b/app/docs/components/popover/variant/IconPopover.tsx @@ -9,25 +9,23 @@ const IconPopover = () => { - -
- + +
+
-
- Popover title +
+ Keep Design System Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since
-

Step - 1 / 5

+

Step - 1 / 5

- - +
@@ -35,25 +33,23 @@ const IconPopover = () => { - -
- + +
+
-
- Popover title +
+ Keep Design System Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since
-

Step - 1 / 5

+

Step - 1 / 5

- - +
@@ -61,25 +57,23 @@ const IconPopover = () => { - -
- + +
+
-
- Popover title +
+ Keep Design System Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since
-

Step - 1 / 5

+

Step - 1 / 5

- - +
@@ -87,25 +81,23 @@ const IconPopover = () => { - -
- + +
+
-
- Popover title +
+ Keep Design System Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since
-

Step - 1 / 5

+

Step - 1 / 5

- - +
@@ -124,28 +116,24 @@ export const PopoverComponent = () => { - -
- -
-
- Popover title - - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the - industrys standard dummy text ever since - -
-

- Step - 1 / 5 -

-
- - -
+ +
+ +
+
+ Keep Design System + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industrys standard dummy text ever since + +
+

Step - 1 / 5

+
+ + +
) diff --git a/app/docs/components/sidebar/variant/DefaultSidebar.tsx b/app/docs/components/sidebar/variant/DefaultSidebar.tsx index 22e52d5a..c3f19139 100644 --- a/app/docs/components/sidebar/variant/DefaultSidebar.tsx +++ b/app/docs/components/sidebar/variant/DefaultSidebar.tsx @@ -13,6 +13,7 @@ import { } from 'phosphor-react' import { Avatar, + AvatarImage, Input, InputIcon, Sidebar, @@ -74,7 +75,9 @@ const DefaultSidebar = () => { - + + +

Enzo Farnandez

enzo123@gmail.com

@@ -101,6 +104,7 @@ import { } from 'phosphor-react' import { Avatar, + AvatarImage, Input, InputIcon, Sidebar, @@ -161,7 +165,9 @@ export const SidebarComponent = () => { - + + +

Enzo Farnandez

enzo123@gmail.com

diff --git a/app/docs/components/sidebar/variant/SidebarWithDropdown.tsx b/app/docs/components/sidebar/variant/SidebarWithDropdown.tsx index fa76e79d..53138aea 100644 --- a/app/docs/components/sidebar/variant/SidebarWithDropdown.tsx +++ b/app/docs/components/sidebar/variant/SidebarWithDropdown.tsx @@ -16,6 +16,7 @@ import { import { Avatar, + AvatarImage, Input, InputIcon, Sidebar, @@ -115,7 +116,9 @@ const SidebarWithDropdown = () => {
- + + +

Enzo Farnandez

enzo123@gmail.com

@@ -146,6 +149,7 @@ import { import { Avatar, + AvatarImage, Input, InputIcon, Sidebar, @@ -244,7 +248,9 @@ export const SidebarComponent = () => {
- + + +

Enzo Farnandez

enzo123@gmail.com

diff --git a/app/docs/components/spinner/variant/DefaultSpinner.tsx b/app/docs/components/spinner/variant/DefaultSpinner.tsx index 79956aa9..c21113f7 100644 --- a/app/docs/components/spinner/variant/DefaultSpinner.tsx +++ b/app/docs/components/spinner/variant/DefaultSpinner.tsx @@ -1,4 +1,3 @@ -'use client' import { Spinner } from '../../../../src' const DefaultSpinner = () => { @@ -10,11 +9,10 @@ const DefaultSpinner = () => { } const DefaultSpinnerCode = ` -"use client"; -import { Spinner } from "keep-react"; +import { Spinner } from 'keep-react' export const SpinnerComponent = () => { - return ; + return } ` diff --git a/app/docs/components/spinner/variant/SpinnerButton.tsx b/app/docs/components/spinner/variant/SpinnerButton.tsx index 69a06455..9ab819f6 100644 --- a/app/docs/components/spinner/variant/SpinnerButton.tsx +++ b/app/docs/components/spinner/variant/SpinnerButton.tsx @@ -1,46 +1,44 @@ -'use client' import { Button, Spinner } from '../../../../src' const SpinnerButton = () => { return (
-
) } const SpinnerButtonCode = ` -"use client"; -import { Button,Spinner } from "keep-react"; +import { Button, Spinner } from 'keep-react' -export const SpinnerButtonComponent = () => { +export const SpinnerComponent = () => { return ( <> - - - ); + ) } ` diff --git a/app/docs/components/spinner/variant/SpinnerColors.tsx b/app/docs/components/spinner/variant/SpinnerColors.tsx index 1c6d0f86..d80e5524 100644 --- a/app/docs/components/spinner/variant/SpinnerColors.tsx +++ b/app/docs/components/spinner/variant/SpinnerColors.tsx @@ -1,4 +1,3 @@ -'use client' import { Spinner } from '../../../../src' const SpinnerColors = () => { @@ -16,7 +15,6 @@ const SpinnerColors = () => { } const SpinnerColorsCode = ` -"use client"; import { Spinner } from "keep-react"; export const SpinnerComponent = () => { diff --git a/app/docs/components/spinner/variant/SpinnerSizes.tsx b/app/docs/components/spinner/variant/SpinnerSizes.tsx index e15f9ca4..4890e12c 100644 --- a/app/docs/components/spinner/variant/SpinnerSizes.tsx +++ b/app/docs/components/spinner/variant/SpinnerSizes.tsx @@ -1,4 +1,3 @@ -'use client' import { Spinner } from '../../../../src' const SpinnerSizes = () => { @@ -14,8 +13,7 @@ const SpinnerSizes = () => { } const SpinnerSizesCode = ` -"use client"; -import { Spinner } from "keep-react"; +import { Spinner } from 'keep-react' export const SpinnerComponent = () => { return ( diff --git a/app/docs/components/steps/variant/InterActiveStep.tsx b/app/docs/components/steps/variant/InterActiveStep.tsx index 399eb1ee..fe23d1da 100644 --- a/app/docs/components/steps/variant/InterActiveStep.tsx +++ b/app/docs/components/steps/variant/InterActiveStep.tsx @@ -57,7 +57,6 @@ const InterActiveStep = () => {
- - @@ -119,8 +119,6 @@ const OrdersTable = () => { {item.status} @@ -183,90 +181,120 @@ import { export const TableComponent = () => { return ( - +
-
+
-

Orders

+

Total Orders

+ 200 Orders
- -
- - -

Order no.

- - } - iconPosition="left"> - Date - - } iconPosition="left"> - Country - - } iconPosition="left"> - State - - } iconPosition="left"> - Quant. - - } - iconPosition="left"> - Total Price - - } iconPosition="left"> - Location - - - - - - -

DL - 19266755

- - -

Jan 19, 2022

-

3:45 pm

- - - - - -
- Delivered -
- - -

3

- - -

$21,000

- - -

285 Great North Road, Grey Lynn.

- - - - + + + + + + +

+ + Type +

+ + +

+ + Date +

+ + +

+ + Country +

+ + +

+ + Status +

+ + +

+ + Quant. +

+ + +

+ + Total Price +

+ + +

+ + Location +

+ + + + + {data2.map((item) => ( + + + + + {item.type} + +
+

{item.date.day}

+

{item.date.time}

+
+ + + flag + + + + {item.status} + + + {item.quant} + {item.price.toLocaleString()} + {item.location} + + + + + + + + Edit + Move + Delete + + + + + + ))}
) diff --git a/app/docs/components/table/variant/ProductTable.tsx b/app/docs/components/table/variant/ProductTable.tsx index 858ef6e4..f668ad07 100644 --- a/app/docs/components/table/variant/ProductTable.tsx +++ b/app/docs/components/table/variant/ProductTable.tsx @@ -25,16 +25,14 @@ const ProductTable = () => {

Total Product

- - 500 Product - + 500 Product
- - @@ -119,16 +117,16 @@ export const TableComponent = () => {

Total Product

- + 500 Product
- - diff --git a/app/docs/components/table/variant/TeamTable.tsx b/app/docs/components/table/variant/TeamTable.tsx index 0a8e3bd2..1aac41da 100644 --- a/app/docs/components/table/variant/TeamTable.tsx +++ b/app/docs/components/table/variant/TeamTable.tsx @@ -2,6 +2,7 @@ import { DotsThreeOutlineVertical, MagnifyingGlass, Plus } from 'phosphor-react' import { Avatar, + AvatarImage, Badge, Button, Checkbox, @@ -30,11 +31,11 @@ const TeamTable = () => { 200 Member
- - @@ -65,7 +66,9 @@ const TeamTable = () => {
- + + +

{item.user.name}

{item.user.position}

@@ -73,21 +76,14 @@ const TeamTable = () => {
- - {item.status} - + {item.status} {item.role} {item.email}
{item.team.map((t, i) => ( - + {t} ))} @@ -125,6 +121,7 @@ const TeamTableCode = ` import { DotsThreeOutlineVertical, MagnifyingGlass, Plus } from 'phosphor-react' import { Avatar, + AvatarImage, Badge, Button, Checkbox, @@ -152,11 +149,11 @@ export const TableComponent = () => { 200 Member
- - @@ -187,7 +184,9 @@ export const TableComponent = () => {
- + + +

{item.user.name}

{item.user.position}

diff --git a/app/docs/components/tag/variant/DefaultTag.tsx b/app/docs/components/tag/variant/DefaultTag.tsx index b85696a4..5a15b6cc 100644 --- a/app/docs/components/tag/variant/DefaultTag.tsx +++ b/app/docs/components/tag/variant/DefaultTag.tsx @@ -1,4 +1,3 @@ -'use client' import { Tag } from '../../../../src' const DefaultTag = () => { @@ -6,11 +5,10 @@ const DefaultTag = () => { } const DefaultTagCode = ` -"use client"; -import { Tag } from "keep-react"; +import { Tag } from 'keep-react' export const TagComponent = () => { - return Default Tag; + return Default Tag } ` diff --git a/app/docs/components/tag/variant/DisabledTag.tsx b/app/docs/components/tag/variant/DisabledTag.tsx index 3ae5c688..e520d339 100644 --- a/app/docs/components/tag/variant/DisabledTag.tsx +++ b/app/docs/components/tag/variant/DisabledTag.tsx @@ -1,4 +1,3 @@ -'use client' import { Tag } from '../../../../src' const DisabledTag = () => { @@ -6,7 +5,6 @@ const DisabledTag = () => { } const DisabledTagCode = ` -'use client' import { Tag } from 'keep-react' export const TagComponent = () => { diff --git a/app/docs/components/toast/variant/DefaultToast.tsx b/app/docs/components/toast/variant/DefaultToast.tsx index 12119fb0..71d498b0 100644 --- a/app/docs/components/toast/variant/DefaultToast.tsx +++ b/app/docs/components/toast/variant/DefaultToast.tsx @@ -2,11 +2,7 @@ import { Button, toast } from '../../../../src' const DefaultToast = () => { - return ( - - ) + return } const ToastWrapperCode = ` @@ -44,7 +40,7 @@ import { Button, toast } from 'keep-react' export const ToastComponent = () => { return ( - ) diff --git a/app/docs/components/toast/variant/ToastVariant.tsx b/app/docs/components/toast/variant/ToastVariant.tsx index 477012ec..1f8fe0d8 100644 --- a/app/docs/components/toast/variant/ToastVariant.tsx +++ b/app/docs/components/toast/variant/ToastVariant.tsx @@ -4,30 +4,10 @@ import { Button, toast } from '../../../../src' const ToastWithColorVariant = () => { return (
- - - - + + + +
) } @@ -39,33 +19,14 @@ import { Button, toast } from 'keep-react' export const ToastComponent = () => { return (
- - - - + + + +
) } + ` export { ToastWithColorVariant, ToastWithColorVariantCode } diff --git a/app/docs/components/toast/variant/ToastWithAction.tsx b/app/docs/components/toast/variant/ToastWithAction.tsx index d684a01e..0fd27b2a 100644 --- a/app/docs/components/toast/variant/ToastWithAction.tsx +++ b/app/docs/components/toast/variant/ToastWithAction.tsx @@ -4,9 +4,6 @@ import { Button, toast } from '../../../../src' const ToastWithAction = () => { return ( ) }, ) -ButtonComponent.displayName = 'Button' -ButtonGroup.displayName = 'Button.Group' - -const Button = Object.assign(ButtonComponent, { - Group: ButtonGroup, -}) +Button.displayName = 'Button' export { Button } diff --git a/app/src/components/Button/index.tsx b/app/src/components/Button/index.tsx index 4d0a670f..2c3ba5ef 100644 --- a/app/src/components/Button/index.tsx +++ b/app/src/components/Button/index.tsx @@ -1 +1,2 @@ export { Button } from './Button' +export { buttonVariants } from './theme' diff --git a/app/src/components/Button/theme.ts b/app/src/components/Button/theme.ts index ffecb5aa..78492d97 100644 --- a/app/src/components/Button/theme.ts +++ b/app/src/components/Button/theme.ts @@ -1,3 +1,5 @@ +import { cn } from '../../helpers/cn' + export interface ButtonColorVariant { primary: string secondary: string @@ -32,59 +34,50 @@ interface keepButtonTheme { } export const buttonTheme: keepButtonTheme = { - base: 'active:focus:scale-95 duration-150 transition-all rounded-lg flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', + base: 'disabled:pointer-events-none focus-visible:ring-1 focus-visible:ring-metal-100 disabled:opacity-50 transition-all focus-visible:outline-none inline-flex items-center justify-center whitespace-nowrap disabled:cursor-not-allowed', color: { - primary: - 'bg-primary-500 hover:bg-primary-600 text-white focus-visible:ring-primary-100 disabled:cursor-not-allowed disabled:bg-primary-100', + primary: 'bg-primary-500 hover:bg-primary-600 text-white disabled:bg-primary-100', secondary: - 'bg-metal-600 hover:bg-metal-700 dark:bg-metal-25 dark:hover:bg-metal-50 dark:text-metal-900 text-white focus-visible:ring-metal-200 disabled:cursor-not-allowed disabled:bg-metal-200 dark:disabled:bg-metal-600', - success: - 'bg-success-500 hover:bg-success-600 text-white focus-visible:ring-success-100 disabled:cursor-not-allowed disabled:bg-success-100', - warning: - 'bg-warning-500 hover:bg-warning-600 text-white focus-visible:ring-warning-100 disabled:cursor-not-allowed disabled:bg-warning-100', - error: - 'bg-error-500 hover:bg-error-600 text-white focus-visible:ring-error-100 disabled:cursor-not-allowed disabled:bg-error-100', + 'bg-metal-900 hover:bg-metal-800 dark:bg-white dark:hover:bg-metal-25 dark:text-metal-900 text-white disabled:bg-metal-200 dark:disabled:bg-metal-600', + success: 'bg-success-500 hover:bg-success-600 text-white disabled:bg-success-100', + warning: 'bg-warning-500 hover:bg-warning-600 text-white disabled:bg-warning-100', + error: 'bg-error-500 hover:bg-error-600 text-white disabled:bg-error-100', }, size: { - xs: 'text-body-4 px-[14px] py-2 font-medium rounded-lg', - sm: 'text-body-4 px-5 py-2.5 font-medium', - md: 'text-body-3 px-6 py-3 font-medium', - lg: 'text-body-2 px-6 py-4 font-medium', - xl: 'text-body-2 px-6 py-[17px] font-medium', - '2xl': 'text-body-1 px-6 py-[18px] font-medium', + xs: 'text-body-5 px-2 py-1 h-6 font-medium rounded-lg', + sm: 'text-body-4 px-2.5 py-2 h-9 font-medium rounded-lg', + md: 'text-body-4 px-4 py-2.5 h-10 font-medium rounded-lg', + lg: 'text-body-3 px-5 py-3 h-12 font-medium rounded-[10px]', + xl: 'text-body-2 px-5 py-4 h-14 font-medium rounded-[10px]', + '2xl': 'text-body-2 px-5 py-[17px] h-[58px] font-medium rounded-xl', }, iconBtn: { - xs: 'h-6 w-6', - sm: 'h-9 w-9', - md: 'h-10 w-10', - lg: 'h-12 w-12', - xl: 'h-14 w-14', - '2xl': 'h-[58px] w-[58px]', + xs: 'fill-white size-6 !p-1', + sm: 'fill-white size-8 !p-1.5', + md: 'fill-white size-9 !p-2', + lg: 'fill-white size-12 !p-3', + xl: 'fill-white size-14 !p-[14px]', + '2xl': 'fill-white w-[58px] h-[58px] !p-[14px]', }, variant: { link: { - primary: - 'bg-transparent hover:bg-transparent hover:text-primary-600 text-primary-500 focus-visible:ring-info-100 disabled:cursor-not-allowed disabled:bg-transparent', - secondary: - 'bg-transparent hover:bg-transparent hover:text-metal-600 text-metal-500 focus-visible:ring-metal-200 disabled:cursor-not-allowed disabled:bg-transparent', - success: - 'bg-transparent hover:bg-transparent hover:text-success-600 text-success-500 focus-visible:ring-success-100 disabled:cursor-not-allowed disabled:bg-transparent', - warning: - 'bg-transparent hover:bg-transparent hover:text-warning-600 text-warning-500 focus-visible:ring-warning-100 disabled:cursor-not-allowed disabled:bg-transparent', - error: - 'bg-transparent hover:bg-transparent hover:text-error-600 text-error-500 focus-visible:ring-error-100 disabled:cursor-not-allowed disabled:bg-transparent', + primary: 'bg-transparent hover:bg-transparent hover:text-primary-600 text-primary-500 disabled:bg-transparent', + secondary: 'bg-transparent hover:bg-transparent hover:text-metal-600 text-metal-500 disabled:bg-transparent', + success: 'bg-transparent hover:bg-transparent hover:text-success-600 text-success-500 disabled:bg-transparent', + warning: 'bg-transparent hover:bg-transparent hover:text-warning-600 text-warning-500 disabled:bg-transparent', + error: 'bg-transparent hover:bg-transparent hover:text-error-600 text-error-500 disabled:bg-transparent', }, outline: { primary: - 'bg-transparent border border-primary-500 hover:bg-transparent hover:text-primary-600 text-primary-500 focus-visible:ring-primary-100 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-primary-200 disabled:border-primary-100', + 'bg-transparent border border-primary-500 hover:bg-transparent hover:text-primary-600 text-primary-500 disabled:bg-transparent disabled:text-primary-200 disabled:border-primary-100', secondary: - 'bg-transparent border border-metal-300 dark:border-metal-800 hover:bg-transparent dark:hover:bg-transparent dark:hover:text-metal-300 dark:text-metal-300 hover:text-metal-500 text-metal-600 focus-visible:ring-metal-100 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-metal-200 disabled:border-metal-200', + 'bg-transparent border border-metal-300 dark:border-metal-800 hover:bg-transparent dark:hover:bg-transparent dark:hover:text-metal-300 dark:text-metal-300 hover:text-metal-500 text-metal-600 disabled:bg-transparent disabled:text-metal-200 disabled:border-metal-200', success: - 'bg-transparent border border-success-500 hover:bg-transparent dar:hover:bg-transparent hover:text-success-700 text-success-600 focus-visible:ring-success-100 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-success-100 disabled:border-success-100', + 'bg-transparent border border-success-500 hover:bg-transparent dar:hover:bg-transparent hover:text-success-700 text-success-600 disabled:bg-transparent disabled:text-success-100 disabled:border-success-100', warning: - 'bg-transparent border border-warning-600 hover:bg-transparent hover:text-warning-700 text-warning-600 focus-visible:ring-warning-200 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-warning-100 disabled:border-warning-100', + 'bg-transparent border border-warning-600 hover:bg-transparent hover:text-warning-700 text-warning-600 disabled:bg-transparent disabled:text-warning-100 disabled:border-warning-100', error: - 'bg-transparent border border-error-500 hover:bg-transparent hover:text-error-700 text-error-600 focus-visible:ring-error-200 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-error-100 disabled:border-error-100', + 'bg-transparent border border-error-500 hover:bg-transparent hover:text-error-700 text-error-600 disabled:bg-transparent disabled:text-error-100 disabled:border-error-100', }, }, position: { @@ -93,3 +86,36 @@ export const buttonTheme: keepButtonTheme = { center: '!rounded-none !border-x-0', }, } + +type ButtonVariants = (options?: { + color?: keyof typeof buttonTheme.color + size?: keyof typeof buttonTheme.size + variant?: 'link' | 'outline' + shape?: 'circle' | 'icon' + position?: 'start' | 'end' | 'center' +}) => string + +const buttonVariants: ButtonVariants = ({ size = 'md', color = 'secondary', variant, shape, position } = {}) => { + const classNames = { + base: buttonTheme.base, + size: !shape && buttonTheme.size[size], + iconBtn: (shape === 'icon' || shape === 'circle') && buttonTheme.iconBtn[size], + roundedFull: shape === 'circle' && 'rounded-full', + color: !variant && buttonTheme.color[color], + link: variant === 'link' && buttonTheme.variant.link[color], + outline: variant === 'outline' && buttonTheme.variant.outline[color], + position: position && buttonTheme.position[position], + } + return cn( + classNames.base, + classNames.size, + classNames.iconBtn, + classNames.roundedFull, + classNames.color, + classNames.link, + classNames.outline, + classNames.position, + ) +} + +export { buttonVariants } diff --git a/app/src/components/Card/Card.tsx b/app/src/components/Card/Card.tsx index f93ebb05..8ed27cbb 100644 --- a/app/src/components/Card/Card.tsx +++ b/app/src/components/Card/Card.tsx @@ -1,13 +1,8 @@ 'use client' import { HTMLAttributes, Ref, forwardRef } from 'react' import { cn } from '../../helpers/cn' -import { CardContent } from './Content' -import { CardDescription } from './Description' -import { CardFooter } from './Footer' -import { CardHeader } from './Header' -import { CardTitle } from './Title' -const CardComponent = forwardRef>( +const Card = forwardRef>( ({ children, className, ...props }, ref: Ref) => { return (
> }, ) -CardComponent.displayName = 'Card' - -const Card = Object.assign(CardComponent, { - Footer: CardFooter, - Content: CardContent, - Header: CardHeader, - Title: CardTitle, - Description: CardDescription, -}) +Card.displayName = 'Card' export { Card } diff --git a/app/src/components/Card/Content.tsx b/app/src/components/Card/Content.tsx index 7205aa27..b55437c9 100644 --- a/app/src/components/Card/Content.tsx +++ b/app/src/components/Card/Content.tsx @@ -12,6 +12,6 @@ const CardContent = forwardRef>( }, ) -CardContent.displayName = 'Card.Content' +CardContent.displayName = 'CardContent' export { CardContent } diff --git a/app/src/components/Card/Description.tsx b/app/src/components/Card/Description.tsx index 6da47961..5e14e442 100644 --- a/app/src/components/Card/Description.tsx +++ b/app/src/components/Card/Description.tsx @@ -21,6 +21,6 @@ const CardDescription = forwardRef( ) }, ) -CardDescription.displayName = 'Card.Description' +CardDescription.displayName = 'CardDescription' export { CardDescription } diff --git a/app/src/components/Card/Footer.tsx b/app/src/components/Card/Footer.tsx index 65c2eb7e..23d3daa1 100644 --- a/app/src/components/Card/Footer.tsx +++ b/app/src/components/Card/Footer.tsx @@ -12,6 +12,6 @@ const CardFooter = forwardRef>( }, ) -CardFooter.displayName = 'Card.Footer' +CardFooter.displayName = 'CardFooter' export { CardFooter } diff --git a/app/src/components/Card/Header.tsx b/app/src/components/Card/Header.tsx index 79661c0d..d7ba347e 100644 --- a/app/src/components/Card/Header.tsx +++ b/app/src/components/Card/Header.tsx @@ -10,6 +10,6 @@ const CardHeader = forwardRef>( ), ) -CardHeader.displayName = 'Card.Header' +CardHeader.displayName = 'CardHeader' export { CardHeader } diff --git a/app/src/components/Checkbox/Checkbox.tsx b/app/src/components/Checkbox/Checkbox.tsx index eb7e1872..bdc9d1f3 100644 --- a/app/src/components/Checkbox/Checkbox.tsx +++ b/app/src/components/Checkbox/Checkbox.tsx @@ -15,6 +15,7 @@ const Checkbox = forwardRef(({ className, variant if (variant === 'dashed' || variant === 'checked') { btnClass = cn(checkboxTheme.button.base, checkboxTheme.button.shape[variant], className) } + return ( diff --git a/app/src/components/Drawer/DrawerAction.tsx b/app/src/components/Drawer/DrawerAction.tsx index 66e20921..96d4a7a6 100644 --- a/app/src/components/Drawer/DrawerAction.tsx +++ b/app/src/components/Drawer/DrawerAction.tsx @@ -19,7 +19,7 @@ const DrawerAction = forwardRef(({ childre } return ( - ) diff --git a/app/src/components/Drawer/DrawerOverlay.tsx b/app/src/components/Drawer/DrawerOverlay.tsx index 4559172e..f7ebcd66 100644 --- a/app/src/components/Drawer/DrawerOverlay.tsx +++ b/app/src/components/Drawer/DrawerOverlay.tsx @@ -5,7 +5,7 @@ import { cn } from '../../helpers/cn' const DrawerOverlay = forwardRef>( ({ children, className, ...props }, ref: Ref) => { return ( -
+
{children}
) diff --git a/app/src/components/Dropdown/Action.tsx b/app/src/components/Dropdown/Action.tsx index b399824a..a63b5e0a 100644 --- a/app/src/components/Dropdown/Action.tsx +++ b/app/src/components/Dropdown/Action.tsx @@ -28,12 +28,7 @@ export const DropdownAction = forwardRef ) } return ( - ) diff --git a/app/src/components/Modal/ModalAction.tsx b/app/src/components/Modal/ModalAction.tsx index ea9715b3..7e537806 100644 --- a/app/src/components/Modal/ModalAction.tsx +++ b/app/src/components/Modal/ModalAction.tsx @@ -19,7 +19,7 @@ export const ModalAction = forwardRef(({ ch } return ( - ) diff --git a/app/src/components/Modal/ModalOverlay.tsx b/app/src/components/Modal/ModalOverlay.tsx index 32e00d08..f81a682a 100644 --- a/app/src/components/Modal/ModalOverlay.tsx +++ b/app/src/components/Modal/ModalOverlay.tsx @@ -8,7 +8,7 @@ const ModalOverlay = forwardRef>(
diff --git a/app/src/components/Notification/NotificationAction.tsx b/app/src/components/Notification/NotificationAction.tsx index 09915db0..362e67e4 100644 --- a/app/src/components/Notification/NotificationAction.tsx +++ b/app/src/components/Notification/NotificationAction.tsx @@ -20,7 +20,7 @@ const NotificationAction = forwardRef + ) diff --git a/app/src/components/Popover/Action.tsx b/app/src/components/Popover/Action.tsx index ef7cb951..55884359 100644 --- a/app/src/components/Popover/Action.tsx +++ b/app/src/components/Popover/Action.tsx @@ -1,7 +1,7 @@ 'use client' import { useMergeRefs } from '@floating-ui/react' import { HTMLProps, cloneElement, forwardRef, isValidElement } from 'react' -import { cn } from '../../helpers/cn' +import { Button } from '../Button' import { usePopoverContext } from './Context' export interface PopoverTriggerProps { @@ -27,17 +27,13 @@ export const PopoverTrigger = forwardRef & P } return ( - + ) }, ) diff --git a/app/src/components/Popover/Content.tsx b/app/src/components/Popover/Content.tsx index 3a9f559b..599cef3c 100644 --- a/app/src/components/Popover/Content.tsx +++ b/app/src/components/Popover/Content.tsx @@ -20,7 +20,7 @@ export const PopoverContent = forwardRef {props.children} diff --git a/app/src/components/Popover/Title.tsx b/app/src/components/Popover/Title.tsx index c0db1bf0..45ceba6d 100644 --- a/app/src/components/Popover/Title.tsx +++ b/app/src/components/Popover/Title.tsx @@ -19,7 +19,7 @@ export const PopoverHeading = forwardRef + className={cn('text-body-3 font-medium text-metal-900 dark:text-white', className)}> {children} ) diff --git a/app/src/components/Tooltip/Action.tsx b/app/src/components/Tooltip/Action.tsx index 4081c79f..815ea02f 100644 --- a/app/src/components/Tooltip/Action.tsx +++ b/app/src/components/Tooltip/Action.tsx @@ -27,7 +27,7 @@ export const TooltipAction = forwardRef( ) } return ( - ) diff --git a/app/src/components/Upload/Icon.tsx b/app/src/components/Upload/Icon.tsx index 119d9d10..620861e3 100644 --- a/app/src/components/Upload/Icon.tsx +++ b/app/src/components/Upload/Icon.tsx @@ -8,7 +8,7 @@ const UploadIcon = forwardRef>(