diff --git a/packages/react/.storybook/fonts/Nunito/Nunito-Bold.svg b/packages/react/.storybook/fonts/Nunito/Nunito-Bold.svg
new file mode 100644
index 0000000..b2f857f
--- /dev/null
+++ b/packages/react/.storybook/fonts/Nunito/Nunito-Bold.svg
@@ -0,0 +1,9602 @@
+
+
+
diff --git a/packages/react/.storybook/fonts/Nunito/Nunito-Bold.ttf b/packages/react/.storybook/fonts/Nunito/Nunito-Bold.ttf
new file mode 100644
index 0000000..04d8608
Binary files /dev/null and b/packages/react/.storybook/fonts/Nunito/Nunito-Bold.ttf differ
diff --git a/packages/react/.storybook/fonts/Nunito/Nunito-Bold.woff b/packages/react/.storybook/fonts/Nunito/Nunito-Bold.woff
new file mode 100644
index 0000000..60a35ae
Binary files /dev/null and b/packages/react/.storybook/fonts/Nunito/Nunito-Bold.woff differ
diff --git a/packages/react/.storybook/fonts/Nunito/Nunito-Bold.woff2 b/packages/react/.storybook/fonts/Nunito/Nunito-Bold.woff2
new file mode 100644
index 0000000..cdafe40
Binary files /dev/null and b/packages/react/.storybook/fonts/Nunito/Nunito-Bold.woff2 differ
diff --git a/packages/react/.storybook/fonts/Nunito/Nunito-Regular.svg b/packages/react/.storybook/fonts/Nunito/Nunito-Regular.svg
new file mode 100644
index 0000000..6a1f107
--- /dev/null
+++ b/packages/react/.storybook/fonts/Nunito/Nunito-Regular.svg
@@ -0,0 +1,9519 @@
+
+
+
diff --git a/packages/react/.storybook/fonts/Nunito/Nunito-Regular.ttf b/packages/react/.storybook/fonts/Nunito/Nunito-Regular.ttf
new file mode 100644
index 0000000..0196704
Binary files /dev/null and b/packages/react/.storybook/fonts/Nunito/Nunito-Regular.ttf differ
diff --git a/packages/react/.storybook/fonts/Nunito/Nunito-Regular.woff b/packages/react/.storybook/fonts/Nunito/Nunito-Regular.woff
new file mode 100644
index 0000000..622f587
Binary files /dev/null and b/packages/react/.storybook/fonts/Nunito/Nunito-Regular.woff differ
diff --git a/packages/react/.storybook/fonts/Nunito/Nunito-Regular.woff2 b/packages/react/.storybook/fonts/Nunito/Nunito-Regular.woff2
new file mode 100644
index 0000000..1bd312d
Binary files /dev/null and b/packages/react/.storybook/fonts/Nunito/Nunito-Regular.woff2 differ
diff --git a/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Bold.svg b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Bold.svg
new file mode 100644
index 0000000..5d945a8
--- /dev/null
+++ b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Bold.svg
@@ -0,0 +1,3903 @@
+
+
+
diff --git a/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Bold.ttf b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Bold.ttf
new file mode 100644
index 0000000..4653b76
Binary files /dev/null and b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Bold.ttf differ
diff --git a/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Bold.woff b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Bold.woff
new file mode 100644
index 0000000..44b5b73
Binary files /dev/null and b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Bold.woff differ
diff --git a/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Bold.woff2 b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Bold.woff2
new file mode 100644
index 0000000..397d876
Binary files /dev/null and b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Bold.woff2 differ
diff --git a/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Regular.svg b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Regular.svg
new file mode 100644
index 0000000..e2346f3
--- /dev/null
+++ b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Regular.svg
@@ -0,0 +1,3899 @@
+
+
+
diff --git a/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Regular.ttf b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Regular.ttf
new file mode 100644
index 0000000..a49862c
Binary files /dev/null and b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Regular.ttf differ
diff --git a/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Regular.woff b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Regular.woff
new file mode 100644
index 0000000..caa21ea
Binary files /dev/null and b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Regular.woff differ
diff --git a/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Regular.woff2 b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Regular.woff2
new file mode 100644
index 0000000..159297c
Binary files /dev/null and b/packages/react/.storybook/fonts/SourceCodePro/SourceCodePro-Regular.woff2 differ
diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts
index f72d9f0..cc86a72 100644
--- a/packages/react/.storybook/main.ts
+++ b/packages/react/.storybook/main.ts
@@ -14,6 +14,7 @@ const config: StorybookConfig = {
name: '@storybook/react-vite',
options: {},
},
+ staticDirs: ['./fonts'],
stories: ['../src/**/*.stories.@(ts|tsx)'],
viteFinal: (config) =>
mergeConfig(config, {
diff --git a/packages/react/.storybook/preview.tsx b/packages/react/.storybook/preview.tsx
index e5395a9..f42d4a4 100644
--- a/packages/react/.storybook/preview.tsx
+++ b/packages/react/.storybook/preview.tsx
@@ -2,6 +2,9 @@ import { ArgTypes, Description, Title } from '@storybook/addon-docs';
import type { Preview } from '@storybook/react';
import { useEffect } from 'react';
+// styles
+import './styles/index.css';
+
// theme
import theme from '@/theme';
diff --git a/packages/react/.storybook/styles/fonts.css b/packages/react/.storybook/styles/fonts.css
new file mode 100644
index 0000000..3702906
--- /dev/null
+++ b/packages/react/.storybook/styles/fonts.css
@@ -0,0 +1,43 @@
+/* nunito */
+@font-face {
+ font-family: "Nunito";
+ font-style: normal;
+ font-weight: 600 700;
+ font-display: swap;
+ src: url("../fonts/Nunito/Nunito-Bold.woff2") format("woff2"),
+ url("../fonts/Nunito/Nunito-Bold.woff") format("woff"),
+ url("../fonts/Nunito/Nunito-Bold.ttf") format("truetype"),
+ url("../fonts/Nunito/Nunito-Bold.svg#Nunito-Bold") format("svg");
+}
+@font-face {
+ font-family: "Nunito";
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url("../fonts/Nunito/Nunito-Regular.woff2") format("woff2"),
+ url("../fonts/Nunito/Nunito-Regular.woff") format("woff"),
+ url("../fonts/Nunito/Nunito-Regular.ttf") format("truetype"),
+ url("../fonts/Nunito/Nunito-Regular.svg#Nunito-Regular") format("svg");
+}
+
+/* source code pro */
+@font-face {
+ font-family: 'SourceCodePro';
+ font-style: normal;
+ font-weight: 600 700;
+ font-display: swap;
+ src: url('../fonts/SourceCodePro/SourceCodePro-Bold.woff2') format('woff2'),
+ url('../fonts/SourceCodePro/SourceCodePro-Bold.woff') format('woff'),
+ url('../fonts/SourceCodePro/SourceCodePro-Bold.ttf') format('truetype'),
+ url('../fonts/SourceCodePro/SourceCodePro-Bold.svg#SourceCodePro-Bold') format('svg');
+}
+@font-face {
+ font-family: 'SourceCodePro';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url('../fonts/SourceCodePro/SourceCodePro-Regular.woff2') format('woff2'),
+ url('../fonts/SourceCodePro/SourceCodePro-Regular.woff') format('woff'),
+ url('../fonts/SourceCodePro/SourceCodePro-Regular.ttf') format('truetype'),
+ url('../fonts/SourceCodePro/SourceCodePro-Regular.svg#SourceCodePro-Regular') format('svg');
+}
diff --git a/packages/react/.storybook/styles/index.css b/packages/react/.storybook/styles/index.css
new file mode 100644
index 0000000..6cf7746
--- /dev/null
+++ b/packages/react/.storybook/styles/index.css
@@ -0,0 +1 @@
+@import "fonts.css";
diff --git a/packages/react/src/components/accounts/AccountSelectModal.tsx b/packages/react/src/components/accounts/AccountSelectModal.tsx
index 0a2bc40..ac8dbda 100644
--- a/packages/react/src/components/accounts/AccountSelectModal.tsx
+++ b/packages/react/src/components/accounts/AccountSelectModal.tsx
@@ -43,10 +43,10 @@ const AccountSelectModal: FC = ({
const { t } = useTranslation();
// hooks
const backgroundColor = useBackgroundColor(colorMode);
- const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
- const defaultTextColor = useDefaultTextColor();
- const primaryColorPalette = usePrimaryColorPalette();
- const subTextColor = useSubTextColor();
+ const buttonHoverBackgroundColor = useButtonHoverBackgroundColor(colorMode);
+ const defaultTextColor = useDefaultTextColor(colorMode);
+ const primaryColorPalette = usePrimaryColorPalette(colorMode);
+ const subTextColor = useSubTextColor(colorMode);
// memo
const context = useMemo(() => randomString(8), []);
// states
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 70acaf5..eeec6d1 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -3,3 +3,4 @@ export * from './buttons';
export * from './forms';
export * from './layouts';
export * from './loaders';
+export * from './typography';
diff --git a/packages/react/src/components/layouts/Modal.tsx b/packages/react/src/components/layouts/Modal.tsx
index e83a0bf..a4b995f 100644
--- a/packages/react/src/components/layouts/Modal.tsx
+++ b/packages/react/src/components/layouts/Modal.tsx
@@ -10,13 +10,14 @@ import { IoClose } from 'react-icons/io5';
import { IconButton } from '@/components';
// hooks
-import { useDesktopAndUp, useTabletAndUp } from '@/hooks';
+import { useBackgroundColor, useDesktopAndUp, useTabletAndUp } from '@/hooks';
// types
import type { TModalProps } from '@/types';
-const Modal: FC = ({ body, closeButton, colorMode = 'dark', footer, header, onClose, open }) => {
+const Modal: FC = ({ body, closeButton, closeOnEscape, closeOnInteractOutside, colorMode, footer, header, onClose, open }) => {
// hooks
+ const backgroundColor = useBackgroundColor(colorMode);
const isDesktopAndUp = useDesktopAndUp();
const isTabletAndUp = useTabletAndUp();
// memos
@@ -26,7 +27,7 @@ const Modal: FC = ({ body, closeButton, colorMode = 'dark', footer,
}
if (isTabletAndUp) {
- return 'full';
+ return 'lg';
}
return 'full';
@@ -40,6 +41,8 @@ const Modal: FC = ({ body, closeButton, colorMode = 'dark', footer,
return (
= ({ body, closeButton, colorMode = 'dark', footer,
-
+
{/*header*/}
{header}
@@ -81,4 +84,6 @@ const Modal: FC = ({ body, closeButton, colorMode = 'dark', footer,
);
};
+Modal.displayName = 'Modal';
+
export default Modal;
diff --git a/packages/react/src/components/typography/Heading.stories.tsx b/packages/react/src/components/typography/Heading.stories.tsx
new file mode 100644
index 0000000..16c1464
--- /dev/null
+++ b/packages/react/src/components/typography/Heading.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+// components
+import Heading from './Heading';
+
+// containers
+import { KibisisAppProvider } from '@/providers';
+
+// types
+import type { THeadingProps } from '@/types';
+
+const meta: Meta = {
+ component: Heading,
+ globals: {
+ theme: 'dark',
+ },
+ title: 'Components/Heading',
+};
+
+export const WithDarkTheme: StoryObj = {
+ globals: {
+ theme: 'dark',
+ },
+ render: (props) => (
+
+
+ Hello humie
+
+
+ ),
+};
+
+export const WithLightTheme: StoryObj = {
+ globals: {
+ theme: 'light',
+ },
+ render: (props) => (
+
+
+ Hello humie
+
+
+ ),
+};
+
+export default meta;
diff --git a/packages/react/src/components/typography/Heading.tsx b/packages/react/src/components/typography/Heading.tsx
new file mode 100644
index 0000000..4275ebb
--- /dev/null
+++ b/packages/react/src/components/typography/Heading.tsx
@@ -0,0 +1,34 @@
+import { Heading as ChakraHeading } from '@chakra-ui/react';
+import {
+ type PropsWithoutRef,
+ type ForwardRefExoticComponent,
+ forwardRef,
+ type RefAttributes,
+} from 'react';
+
+// hooks
+import { useDefaultTextColor } from '@/hooks';
+
+// types
+import type { THeadingProps } from '@/types';
+
+const Heading: ForwardRefExoticComponent<
+ PropsWithoutRef & RefAttributes
+> = forwardRef(
+ ({ colorMode, ...otherProps }, ref) => {
+ // hooks
+ const defaultTextColor = useDefaultTextColor(colorMode);
+
+ return (
+
+ );
+ }
+);
+
+Heading.displayName = 'Heading';
+
+export default Heading;
diff --git a/packages/react/src/components/typography/Text.stories.tsx b/packages/react/src/components/typography/Text.stories.tsx
new file mode 100644
index 0000000..143ea2f
--- /dev/null
+++ b/packages/react/src/components/typography/Text.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+// components
+import Text from './Text';
+
+// containers
+import { KibisisAppProvider } from '@/providers';
+
+// types
+import type { TTextProps } from '@/types';
+
+const meta: Meta = {
+ component: Text,
+ globals: {
+ theme: 'dark',
+ },
+ title: 'Components/Text',
+};
+
+export const WithDarkTheme: StoryObj = {
+ globals: {
+ theme: 'dark',
+ },
+ render: (props) => (
+
+
+ Hello humie
+
+
+ ),
+};
+
+export const WithLightTheme: StoryObj = {
+ globals: {
+ theme: 'light',
+ },
+ render: (props) => (
+
+
+ Hello humie
+
+
+ ),
+};
+
+export default meta;
diff --git a/packages/react/src/components/typography/Text.tsx b/packages/react/src/components/typography/Text.tsx
new file mode 100644
index 0000000..f48dc78
--- /dev/null
+++ b/packages/react/src/components/typography/Text.tsx
@@ -0,0 +1,34 @@
+import { Text as ChakraText } from '@chakra-ui/react';
+import {
+ type PropsWithoutRef,
+ type ForwardRefExoticComponent,
+ forwardRef,
+ type RefAttributes,
+} from 'react';
+
+// hooks
+import { useDefaultTextColor } from '@/hooks';
+
+// types
+import type { TTextProps } from '@/types';
+
+const Text: ForwardRefExoticComponent<
+ PropsWithoutRef & RefAttributes
+> = forwardRef(
+ ({ colorMode, ...otherProps }, ref) => {
+ // hooks
+ const defaultTextColor = useDefaultTextColor(colorMode);
+
+ return (
+
+ );
+ }
+);
+
+Text.displayName = 'Text';
+
+export default Text;
diff --git a/packages/react/src/components/typography/index.ts b/packages/react/src/components/typography/index.ts
new file mode 100644
index 0000000..465872a
--- /dev/null
+++ b/packages/react/src/components/typography/index.ts
@@ -0,0 +1,2 @@
+export { default as Heading } from './Heading';
+export { default as Text } from './Text';
diff --git a/packages/react/src/theme.ts b/packages/react/src/theme.ts
index 36ee349..bf337ee 100644
--- a/packages/react/src/theme.ts
+++ b/packages/react/src/theme.ts
@@ -88,7 +88,7 @@ export default createSystem(
value: '{colors.primaryDark.500}', // main button bg
},
subtle: {
- value: '{colors.primaryDark.200}', // subtle bg
+ value: '{colors.primaryDark.500}', // subtle bg
},
},
primaryLight: {
@@ -99,19 +99,19 @@ export default createSystem(
value: '{colors.primaryLight.700}',
},
fg: {
- value: '{colors.primaryLight.100}',
+ value: '{colors.primaryLight.500}',
},
focusRing: {
value: '{colors.primaryLight.500}',
},
muted: {
- value: '{colors.primaryLight.100}',
+ value: '{colors.primaryLight.500}',
},
solid: {
value: '{colors.primaryLight.500}',
},
subtle: {
- value: '{colors.primaryLight.200}',
+ value: '{colors.primaryLight.500}',
},
},
},
@@ -166,16 +166,16 @@ export default createSystem(
800: { value: '#520159' },
900: { value: '#3D0143' },
},
- fonts: {
- heading: {
- value: '"Nunito", sans-serif',
- },
- body: {
- value: '"Nunito", sans-serif',
- },
- mono: {
- value: '"SourceCodePro", monospace',
- },
+ },
+ fonts: {
+ heading: {
+ value: '"Nunito", sans-serif',
+ },
+ body: {
+ value: '"Nunito", sans-serif',
+ },
+ mono: {
+ value: '"SourceCodePro", monospace',
},
},
},
diff --git a/packages/react/src/types/index.ts b/packages/react/src/types/index.ts
index 606821e..360d1cd 100644
--- a/packages/react/src/types/index.ts
+++ b/packages/react/src/types/index.ts
@@ -5,3 +5,4 @@ export * from './forms';
export * from './layouts';
export * from './loaders';
export * from './strings';
+export * from './typography';
diff --git a/packages/react/src/types/layouts/TModalProps.ts b/packages/react/src/types/layouts/TModalProps.ts
index 2ac5598..e508362 100644
--- a/packages/react/src/types/layouts/TModalProps.ts
+++ b/packages/react/src/types/layouts/TModalProps.ts
@@ -6,6 +6,8 @@ import type { IBaseComponentProps } from '@/types';
export interface IModalProps {
body: ReactNode;
closeButton?: boolean;
+ closeOnEscape?: boolean;
+ closeOnInteractOutside?: boolean;
footer?: ReactNode;
header?: ReactNode;
onClose?: () => void;
diff --git a/packages/react/src/types/typography/THeadingProps.ts b/packages/react/src/types/typography/THeadingProps.ts
new file mode 100644
index 0000000..367a8b8
--- /dev/null
+++ b/packages/react/src/types/typography/THeadingProps.ts
@@ -0,0 +1,8 @@
+import type { HeadingProps } from '@chakra-ui/react';
+
+// types
+import type { IBaseComponentProps } from '@/types';
+
+type THeadingProps = IBaseComponentProps & HeadingProps;
+
+export default THeadingProps;
diff --git a/packages/react/src/types/typography/TTextProps.ts b/packages/react/src/types/typography/TTextProps.ts
new file mode 100644
index 0000000..0d87cc3
--- /dev/null
+++ b/packages/react/src/types/typography/TTextProps.ts
@@ -0,0 +1,8 @@
+import type { TextProps } from '@chakra-ui/react';
+
+// types
+import type { IBaseComponentProps } from '@/types';
+
+type TTextProps = IBaseComponentProps & TextProps;
+
+export default TTextProps;
diff --git a/packages/react/src/types/typography/index.ts b/packages/react/src/types/typography/index.ts
new file mode 100644
index 0000000..2a0d327
--- /dev/null
+++ b/packages/react/src/types/typography/index.ts
@@ -0,0 +1,2 @@
+export type { default as THeadingProps } from './THeadingProps';
+export type { default as TTextProps } from './TTextProps';