@okam/stack-ui 1.25.2 → 1.25.3

package/src/components/icons/Twitter.tsx

@@ -0,0 +1,16 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 256 256" {...props}>
+    <path
+      fill="currentColor"
+      strokeMiterlimit="10"
+      strokeWidth="0"
+      d="M81 231A147 147 0 0 0 228 76c11-7 19-16 26-27-9 5-19 7-29 9 10-7 18-17 22-29-10 6-21 10-33 12a52 52 0 0 0-88 48C83 87 45 66 19 35a52 52 0 0 0 16 69c-8 0-16-3-23-7v1c0 25 17 46 41 51a52 52 0 0 1-23 1c6 20 26 35 48 36a104 104 0 0 1-77 21c23 15 51 24 80 24"
+    />
+  </svg>
+)
+
+const Twitter = memo(SvgComponent, isEqual)
+export default Twitter

package/src/components/icons/TwitterColored.tsx

@@ -0,0 +1,16 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 256 256" {...props}>
+    <path
+      fill="#1da1f2"
+      strokeMiterlimit="10"
+      strokeWidth="0"
+      d="M81 230.6c95.4 0 147.6-79 147.6-147.6 0-2.3 0-4.5-.2-6.7 10.2-7.4 19-16.5 25.9-26.9-9.5 4.2-19.5 7-29.8 8.2a52 52 0 0 0 22.8-28.7 104 104 0 0 1-33 12.6A52 52 0 0 0 126 88.8C84.2 86.7 45.4 67 19 34.6a52 52 0 0 0 16 69.2 51.5 51.5 0 0 1-23.5-6.5v.7c0 24.7 17.4 46 41.6 50.9-7.6 2-15.6 2.4-23.4.9a52 52 0 0 0 48.5 36 104.1 104.1 0 0 1-76.8 21.5A146.9 146.9 0 0 0 81 230.6"
+    />
+  </svg>
+)
+
+const TwitterColored = memo(SvgComponent, isEqual)
+export default TwitterColored

package/src/components/icons/Upload.tsx

@@ -0,0 +1,14 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      d="M17 21H7a4 4 0 0 1-4-4v-1a1 1 0 1 1 2 0v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 1 2 0v1a4 4 0 0 1-4 4Zm-5-4a1 1 0 0 1-1-1V6.41l-2.29 2.3a1.004 1.004 0 0 1-1.42-1.42l4-4a1 1 0 0 1 .33-.21A1 1 0 0 1 12 3a1 1 0 0 1 .38.08 1 1 0 0 1 .33.21l4 4a1.004 1.004 0 1 1-1.42 1.42L13 6.41V16a1 1 0 0 1-1 1Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+const Upload = memo(SvgComponent, isEqual)
+export default Upload

package/src/components/icons/X.tsx

@@ -0,0 +1,14 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={25} viewBox="0 0 24 25" fill="none" {...props}>
+    <path
+      d="M14.119 11.7052L20.4486 4.5H18.9492L13.4509 10.7549L9.0626 4.5H4L10.6374 13.9594L4 21.5142H5.4994L11.3021 14.9074L15.9374 21.5142H21M6.04057 5.60727H8.34407L18.9481 20.4613H16.644"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+const X = memo(SvgComponent, isEqual)
+export default X

package/src/components/icons/YouTube.tsx

@@ -0,0 +1,16 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 256 256" {...props}>
+    <path
+      fill="currentColor"
+      strokeMiterlimit="10"
+      strokeWidth="0"
+      d="M249 67c-3-11-11-19-22-22-20-6-99-6-99-6s-79 0-99 6C18 48 10 56 7 67c-6 20-6 61-6 61s0 41 6 61c3 11 11 19 22 22 20 5 99 5 99 5s79 0 99-5c11-3 19-11 22-22 5-20 5-61 5-61s0-41-5-61zm-146 99V90l65 38-65 38z"
+    />
+  </svg>
+)
+
+const YouTube = memo(SvgComponent, isEqual)
+export default YouTube

package/src/components/icons/YouTubeColored.tsx

@@ -0,0 +1,17 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 256 256" {...props}>
+    <g fill="currentColor" strokeMiterlimit="10" strokeWidth="0">
+      <path
+        fill="red"
+        d="M249.02 66.99a31.68 31.68 0 0 0-22.36-22.36c-19.72-5.29-98.8-5.29-98.8-5.29s-79.09 0-98.8 5.29A31.68 31.68 0 0 0 6.68 66.99c-5.28 19.72-5.28 60.87-5.28 60.87s0 41.15 5.28 60.87a31.68 31.68 0 0 0 22.36 22.36c19.72 5.28 98.8 5.28 98.8 5.28s79.1 0 98.81-5.28a31.68 31.68 0 0 0 22.36-22.36c5.29-19.72 5.29-60.87 5.29-60.87s0-41.15-5.29-60.87z"
+      />
+      <path fill="#fff" d="m102.57 165.8 65.7-37.94-65.7-37.94z" />
+    </g>
+  </svg>
+)
+
+const YouTubeColored = memo(SvgComponent, isEqual)
+export default YouTubeColored

package/src/components/icons/index.ts

@@ -0,0 +1,24 @@
+export { default as ArrowDown } from './ArrowDown'
+export { default as ArrowLeft } from './ArrowLeft'
+export { default as ArrowRight } from './ArrowRight'
+export { default as Check } from './Check'
+export { default as ChevronLeft } from './ChevronLeft'
+export { default as ChevronRight } from './ChevronRight'
+export { default as CloseBtn } from './CloseBtn'
+export { default as Facebook } from './Facebook'
+export { default as FacebookColored } from './FacebookColored'
+export { default as FacebookRounded } from './FacebookRounded'
+export { default as Globe } from './Globe'
+export { default as Instagram } from './Instagram'
+export { default as InstagramColored } from './InstagramColored'
+export { default as Link } from './Link'
+export { default as LinkedIn } from './LinkedIn'
+export { default as Mail } from './Mail'
+export { default as Plus } from './Plus'
+export { default as Share } from './Share'
+export { default as Twitter } from './Twitter'
+export { default as TwitterColored } from './TwitterColored'
+export { default as Upload } from './Upload'
+export { default as X } from './X'
+export { default as YouTube } from './YouTube'
+export { default as YouTubeColored } from './YouTubeColored'

package/src/examples/PageLayout/index.tsx

@@ -0,0 +1,61 @@
+import Box from '../../components/Box'
+import type { TBoxProps } from '../../components/Box/interface'
+import Typography from '../../components/Typography'
+
+const Main = ({ children }: TBoxProps) => {
+  return (
+    <Box as="main" themeName="main">
+      {children}
+    </Box>
+  )
+}
+
+const Container = ({ children, ...props }: TBoxProps) => {
+  return (
+    <Box themeName="container" {...props}>
+      {children}
+    </Box>
+  )
+}
+
+const Grid = ({ children, ...props }: TBoxProps) => {
+  return (
+    <Box themeName="grid" {...props}>
+      {children}
+    </Box>
+  )
+}
+
+const GridItem = ({ children, ...props }: TBoxProps) => {
+  return (
+    <Box as="li" themeName="gridItem" {...props}>
+      {children}
+    </Box>
+  )
+}
+
+const PageLayoutExample = () => (
+  <Main>
+    <Container tokens={{ spacing: 'small' }}>
+      <Typography as="h1" tokens={{ size: 'h1', align: 'center' }}>
+        Hello world
+      </Typography>
+    </Container>
+    <Container tokens={{ spacing: 'large' }}>
+      <Grid as="ul">
+        <GridItem tokens={{ size: 'medium' }}>1</GridItem>
+        <GridItem>2</GridItem>
+        <GridItem>3</GridItem>
+        <GridItem>4</GridItem>
+        <GridItem>5</GridItem>
+      </Grid>
+    </Container>
+    <Container tokens={{ fullWidth: true, className: 'bg-red-200 py-8' }}>
+      <Grid as="ul">
+        <GridItem tokens={{ size: 'large', className: 'h-96' }}>Large</GridItem>
+      </Grid>
+    </Container>
+  </Main>
+)
+
+export default PageLayoutExample

package/src/examples/PageLayout/layout.stories.mdx

@@ -0,0 +1,35 @@
+{/* layout.stories.mdx */}
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import PageLayoutExample from './index'
+
+<Meta title="LAYOUT EXAMPLE/Simple" component={PageLayoutExample} />
+
+export const Template = (args) => (
+  <>
+    <style>
+      {`
+        #storybook-root {
+          width: 100%;
+          padding: 0! important;
+        }
+      `}
+    </style>
+    <PageLayoutExample {...args} />
+  </>
+)
+
+# Box
+
+Box component. Generic wrapper for your website or app.
+
+<Canvas layout="fullscreen">
+  <Story
+    name="Box"
+    args={{
+      as: 'div',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/{index.d.ts → src/index.ts}

@@ -1,57 +1,72 @@
-export { default as ThemeProvider } from './theme';
-export { default as Typography } from './components/Typography';
-export { default as Accordion } from './components/Accordion';
-export { default as AccordionItem } from './components/Accordion/components/AccordionItem';
-export { default as Button, ButtonWithForwardRef } from './components/Button';
-export { default as ShareButton } from './components/ShareButton';
-export { default as SidePanel } from './components/SidePanel';
-export { default as Lightbox } from './components/Lightbox';
-export { default as Popover } from './components/Popover';
-export { default as Carousel } from './components/Carousel';
-export { default as WysiwygBlock } from './components/WysiwygBlock';
-export { default as Icon } from './components/Icon';
-export { default as Date } from './components/Date';
-export { default as Select, ReactHookFormSelect } from './components/fields/Select/Select';
-export { default as Checkbox } from './components/fields/Checkbox';
-export { default as SearchField } from './components/fields/SearchField';
-export { default as CheckboxGroup } from './components/fields/CheckboxGroup';
-export { default as CheckboxGroupItem } from './components/fields/CheckboxGroup/components/CheckboxGroupItem';
-export { default as TextArea, ReactHookFormTextArea } from './components/fields/TextArea';
-export { default as TextInputField, ReactHookFormInput } from './components/fields/TextInputField';
-export { default as DatePicker } from './components/fields/DatePicker';
-export { default as DateRangePicker } from './components/fields/DatePicker/DateRangePicker';
-export { default as Box, BoxWithForwardRef } from './components/Box';
-export { default as Calendar } from './components/Calendar';
-export { default as Modal } from './components/Modal';
-export { default as Radio, ReactHookFormRadio } from './components/fields/Radio';
-export { default as RadioGroup } from './components/fields/RadioGroup';
-export { default as RenderWithSlide } from './transitions/RenderWithSlide';
-export { default as Menu } from './components/Menu/Menu';
-export { default as MenuSidePanel } from './components/Menu/MenuSidePanel';
-export { default as MenuItems } from './components/Menu/components/MenuItems';
-export { default as TabContainer } from './components/Menu/components/TabContainer';
-export { default as Alerts } from './components/Alerts';
-export { default as AlertsItem } from './components/Alerts/components/AlertsItem';
-export { default as SelectItem } from './components/fields/SelectItem/SelectItem';
-export { default as DirectusImg } from './components/DirectusImg';
-export { default as Img } from './components/Img';
-export * from './components/icons';
-export { makeTheme, createThemeProvider, useTheme, ThemeContextProvider } from './providers/Theme';
-export { default as useThemeContext } from './providers/Theme/hooks';
-export { useIsClient, IsClientContextProvider } from './providers/Client';
-export { useSidePanel, SidePanelContextProvider } from './providers/SidePanel';
-export { MenuContextProvider, useMenu } from './providers/Menu';
-export { RadioGroupProvider, useRadioGroupCtx } from './providers/RadioGroup/RadioGroup';
-export { AccordionContextProvider, useAccordionCtx } from './providers/Accordion';
-export { SearchBarProvider } from './providers/UserSearchQuery';
-export type { TButtonProps } from './components/Button/interface';
-export type { TTypographyProps } from './components/Typography/interface';
-export type { TTheme, TToken, TCustomTheme, TStyle, TDefaultTheme, TStyleCollection, TStyleValue, } from './providers/Theme/interface';
-export type { TMenuProps, TMenuItemProps } from './components/Menu/interface';
-export type { TDefaultComponent, Nullable } from './types/components';
-export { default as generateUtmTags } from './components/ShareButton/utils/generateUtmTags';
-export { default as useWindow } from './components/ShareButton/utils/useWindow';
-export { default as useFacebookShareUrl } from './components/ShareButton/utils/useFacebookShareUrl';
-export { default as useMailToShareUrl } from './components/ShareButton/utils/useMailToShareUrl';
-export { default as useTwitterShareUrl } from './components/ShareButton/utils/useTwitterShareUrl';
-export { default as useAccordionState } from './components/Accordion/hooks/useAccordionState';
+export { default as ThemeProvider } from './theme'
+
+export { default as Typography } from './components/Typography'
+export { default as Accordion } from './components/Accordion'
+export { default as AccordionItem } from './components/Accordion/components/AccordionItem'
+export { default as Button, ButtonWithForwardRef } from './components/Button'
+export { default as ShareButton } from './components/ShareButton'
+export { default as SidePanel } from './components/SidePanel'
+export { default as Lightbox } from './components/Lightbox'
+export { default as Popover } from './components/Popover'
+export { default as Carousel } from './components/Carousel'
+export { default as WysiwygBlock } from './components/WysiwygBlock'
+export { default as Icon } from './components/Icon'
+export { default as Date } from './components/Date'
+export { default as Select, ReactHookFormSelect } from './components/fields/Select/Select'
+export { default as Checkbox } from './components/fields/Checkbox'
+export { default as SearchField } from './components/fields/SearchField'
+export { default as CheckboxGroup } from './components/fields/CheckboxGroup'
+export { default as CheckboxGroupItem } from './components/fields/CheckboxGroup/components/CheckboxGroupItem'
+export { default as TextArea, ReactHookFormTextArea } from './components/fields/TextArea'
+export { default as TextInputField, ReactHookFormInput } from './components/fields/TextInputField'
+export { default as DatePicker } from './components/fields/DatePicker'
+export { default as DateRangePicker } from './components/fields/DatePicker/DateRangePicker'
+export { default as Box, BoxWithForwardRef } from './components/Box'
+export { default as Calendar } from './components/Calendar'
+export { default as Modal } from './components/Modal'
+export { default as Radio, ReactHookFormRadio } from './components/fields/Radio'
+export { default as RadioGroup } from './components/fields/RadioGroup'
+export { default as RenderWithSlide } from './transitions/RenderWithSlide'
+export { default as Menu } from './components/Menu/Menu'
+export { default as MenuSidePanel } from './components/Menu/MenuSidePanel'
+export { default as MenuItems } from './components/Menu/components/MenuItems'
+export { default as TabContainer } from './components/Menu/components/TabContainer'
+export { default as Alerts } from './components/Alerts'
+export { default as AlertsItem } from './components/Alerts/components/AlertsItem'
+export { default as SelectItem } from './components/fields/SelectItem/SelectItem'
+export { default as DirectusImg } from './components/DirectusImg'
+export { default as Img } from './components/Img'
+export * from './components/icons'
+
+// providers
+export { makeTheme, createThemeProvider, useTheme, ThemeContextProvider } from './providers/Theme'
+export { default as useThemeContext } from './providers/Theme/hooks'
+export { useIsClient, IsClientContextProvider } from './providers/Client'
+export { useSidePanel, SidePanelContextProvider } from './providers/SidePanel'
+export { MenuContextProvider, useMenu } from './providers/Menu'
+export { RadioGroupProvider, useRadioGroupCtx } from './providers/RadioGroup/RadioGroup'
+export { AccordionContextProvider, useAccordionCtx } from './providers/Accordion'
+export { SearchBarProvider } from './providers/UserSearchQuery'
+
+// types & interfaces
+export type { TButtonProps } from './components/Button/interface'
+export type { TTypographyProps } from './components/Typography/interface'
+export type {
+  TTheme,
+  TToken,
+  TCustomTheme,
+  TStyle,
+  TDefaultTheme,
+  TStyleCollection,
+  TStyleValue,
+} from './providers/Theme/interface'
+export type { TMenuProps, TMenuItemProps } from './components/Menu/interface'
+export type { TDefaultComponent, Nullable } from './types/components'
+
+// utils
+export { default as generateUtmTags } from './components/ShareButton/utils/generateUtmTags'
+export { default as useWindow } from './components/ShareButton/utils/useWindow'
+export { default as useFacebookShareUrl } from './components/ShareButton/utils/useFacebookShareUrl'
+export { default as useMailToShareUrl } from './components/ShareButton/utils/useMailToShareUrl'
+export { default as useTwitterShareUrl } from './components/ShareButton/utils/useTwitterShareUrl'
+export { default as useAccordionState } from './components/Accordion/hooks/useAccordionState'

package/src/message.tsx

@@ -0,0 +1,8 @@
+import type { FC } from 'react'
+
+type Props = {
+  message: string
+  children?: never
+}
+
+export const Message: FC<Props> = ({ message }) => <span>{message}</span>

package/src/providers/Accordion/index.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { createCtxNullable } from '@okam/core-lib'
+import { useMemo } from 'react'
+import type { TAccordionContext, TAccordionProviderProps } from './interface'
+
+export const [useAccordionCtx, AccordionProvider] = createCtxNullable<TAccordionContext>()
+
+export function AccordionContextProvider(props: TAccordionProviderProps) {
+  const { state, children, TransitionAnimation } = props
+
+  const value = useMemo<TAccordionContext>(() => ({ state, TransitionAnimation }), [state, TransitionAnimation])
+
+  return <AccordionProvider value={value}>{children}</AccordionProvider>
+}

package/src/providers/Accordion/interface.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+import type { TreeState } from 'react-stately'
+import type { TAccordionItemProps, TAccordionProps } from '../../components/Accordion/interface'
+
+type TAccordion = NonNullable<Pick<TAccordionProps, 'TransitionAnimation'>>
+
+export interface TAccordionProviderProps extends TAccordion {
+  children: ReactNode
+  state: TreeState<TAccordionItemProps>
+}
+
+export type TAccordionContext = TAccordion & {
+  state: TreeState<TAccordionItemProps>
+}

package/src/providers/Alerts/index.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { createCtxNullable } from '@okam/core-lib'
+import { useMemo } from 'react'
+import type { TAlertsControllerContext, TAlertsControllerProviderProps } from './interface'
+
+export const [useAlertsController, AlertsControllerProvider] = createCtxNullable<TAlertsControllerContext>()
+
+export function AlertsControllerContextProvider(props: TAlertsControllerProviderProps) {
+  const { controller, children } = props
+
+  const value = useMemo<TAlertsControllerContext>(() => ({ controller }), [controller])
+
+  return <AlertsControllerProvider value={value}>{children}</AlertsControllerProvider>
+}

package/src/providers/Alerts/interface.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+import type { SwiperClass } from 'swiper/react'
+
+export interface TAlertsControllerProviderProps {
+  children: ReactNode
+  controller: SwiperClass | undefined
+}
+
+export type TAlertsControllerContext = {
+  controller: SwiperClass | undefined
+}

package/src/providers/CheckboxGroup/index.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import type { CheckboxGroupState } from '@react-stately/checkbox'
+import { createContext, useContext } from 'react'
+import type { TCheckboxGroupContext } from './interface'
+
+const CheckboxGroupContext = createContext<CheckboxGroupState | null>(null)
+
+const CheckboxGroupProvider = (props: TCheckboxGroupContext) => {
+  const { children, state } = props
+
+  return <CheckboxGroupContext.Provider value={state}>{children}</CheckboxGroupContext.Provider>
+}
+
+function useCheckboxGroupCtx() {
+  const context = useContext(CheckboxGroupContext)
+
+  if (!context) return null
+  return context
+}
+
+export { CheckboxGroupProvider, useCheckboxGroupCtx }

package/{providers/CheckboxGroup/interface.d.ts → src/providers/CheckboxGroup/interface.ts}

@@ -1,6 +1,7 @@
-import type React from 'react';
-import type { CheckboxGroupProps, CheckboxGroupState } from 'react-stately';
+import type React from 'react'
+import type { CheckboxGroupProps, CheckboxGroupState } from 'react-stately'
+
 export interface TCheckboxGroupContext extends CheckboxGroupProps {
-    children: React.ReactNode;
-    state: CheckboxGroupState;
+  children: React.ReactNode
+  state: CheckboxGroupState
 }

package/src/providers/Client/index.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { createCtx } from '@okam/core-lib'
+import { useEffect, useMemo, useState } from 'react'
+import type { TClientContext, TClientProps, TClientProviderProps } from './interface'
+
+const [useIsClient, IsClientProvider] = createCtx<TClientProps>()
+
+export { useIsClient }
+
+export function IsClientContextProvider({ children }: TClientProviderProps) {
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  const value = useMemo<TClientContext>(() => ({ isClient }), [isClient])
+
+  return <IsClientProvider value={value}>{children}</IsClientProvider>
+}

package/src/providers/Client/interface.ts

@@ -0,0 +1,13 @@
+import type React from 'react'
+
+export type TClientProviderProps = {
+  children: React.ReactNode
+}
+
+export type TClientProps = {
+  isClient: boolean
+}
+
+export type TClientContext = {
+  isClient: boolean
+}

package/src/providers/Menu/index.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { createCtxNullable } from '@okam/core-lib'
+import { useMemo } from 'react'
+import { useTabListState } from 'react-stately'
+import { SidePanelContextProvider } from '../SidePanel'
+import type { IMenuProviderProps, TMenuContext } from './interface'
+
+export const [useMenu, MenuProvider] = createCtxNullable<TMenuContext>()
+
+export function MenuContextProvider({
+  children,
+  defaultSelectedKey,
+  defaultIsOpen,
+  onCloseCallback,
+  onOpenCallback,
+  tabs,
+  openBtn,
+  closeBtn,
+  ...rest
+}: IMenuProviderProps) {
+  const tabState = useTabListState({ ...rest, children: tabs, defaultSelectedKey })
+  const value = useMemo<TMenuContext>(
+    () => ({ openBtn, closeBtn, tabState, defaultSelectedKey }),
+    [openBtn, closeBtn, tabState, defaultSelectedKey],
+  )
+
+  return (
+    <MenuProvider value={value}>
+      <SidePanelContextProvider
+        onCloseCallback={() => {
+          onCloseCallback?.()
+          tabState?.setSelectedKey?.(defaultSelectedKey)
+        }}
+        onOpenCallback={onOpenCallback}
+        defaultIsOpen={defaultIsOpen}
+        defaultSelectedKey={defaultSelectedKey.toString()}
+      >
+        {children}
+      </SidePanelContextProvider>
+    </MenuProvider>
+  )
+}

package/src/providers/Menu/interface.ts

@@ -0,0 +1,32 @@
+import type { CollectionChildren } from '@react-types/shared'
+import type React from 'react'
+import type { AriaTabListProps } from 'react-aria'
+import type { TabListState } from 'react-stately'
+
+export type TMenuProviderProps = {
+  children: React.ReactNode
+  tabs?: CollectionChildren<object>
+  defaultSelectedKey: string
+  defaultIsOpen?: boolean
+  onCloseCallback?: () => void
+  onOpenCallback?: () => void
+  openBtn?: () => JSX.Element
+  closeBtn?: () => JSX.Element
+  secondaryOpenBtn?: () => JSX.Element
+}
+
+export type IMenuProviderProps = AriaTabListProps<TMenuProviderProps> & TMenuProviderProps
+
+export type TMenuContext = {
+  openBtn?: () => JSX.Element
+  closeBtn?: () => JSX.Element
+  secondaryOpenBtn?: () => JSX.Element
+  tabState: TabListState<object>
+  defaultSelectedKey: string
+}
+
+export type TMenuProps = {
+  openBtn?: () => JSX.Element
+  closeBtn?: () => JSX.Element
+  secondaryOpenBtn?: () => JSX.Element
+}

package/src/providers/RadioGroup/RadioGroup.interface.ts

@@ -0,0 +1,8 @@
+import type { RadioGroupProps } from '@react-types/radio'
+import type { ReactNode } from 'react'
+import type { RadioGroupState } from 'react-stately'
+
+export interface TRadioGroupContext extends RadioGroupProps {
+  children: ReactNode
+  state: RadioGroupState
+}

package/src/providers/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import type { RadioGroupState } from '@react-stately/radio'
+import { createContext, useContext } from 'react'
+import type { TRadioGroupContext } from './RadioGroup.interface'
+
+const RadioGroupContext = createContext<RadioGroupState | null>(null)
+
+const RadioGroupProvider = (props: TRadioGroupContext) => {
+  const { children, state } = props
+
+  return <RadioGroupContext.Provider value={state}>{children}</RadioGroupContext.Provider>
+}
+
+function useRadioGroupCtx() {
+  const context = useContext(RadioGroupContext)
+
+  if (context !== null) {
+    return context
+  }
+
+  return null
+}
+
+export { RadioGroupProvider, useRadioGroupCtx }