diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 1c917e9f..f31fa586 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -7,6 +7,7 @@ "@material-tailwind/react": "^2.1.7", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", + "@radix-ui/react-tabs": "^1.0.4", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -77,6 +78,6 @@ "eslint-plugin-prettier": "^5.0.1", "eslint-plugin-react": "^7.33.2", "prettier": "^3.1.0", - "tailwindcss": "^3.3.6" + "tailwindcss": "^3.4.1" } } diff --git a/packages/frontend/src/components/shared/CustomIcon/GlobeIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/GlobeIcon.tsx new file mode 100644 index 00000000..f2a23cab --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/GlobeIcon.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const GlobeIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index aeb7c87e..6479a1dd 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -7,3 +7,4 @@ export * from './ChevronRight'; export * from './WarningIcon'; export * from './SearchIcon'; export * from './CrossIcon'; +export * from './GlobeIcon'; diff --git a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts new file mode 100644 index 00000000..4667fe83 --- /dev/null +++ b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts @@ -0,0 +1,80 @@ +import { tv, type VariantProps } from 'tailwind-variants'; + +export type TabsVariants = VariantProps; + +export const tabsTheme = tv({ + slots: { + root: ['flex', 'data-[orientation=horizontal]:w-full'], + triggerWrapper: [ + // Horizontal – default + 'px-1', + 'pb-5', + 'text-elements-low-em', + 'border-b-2', + 'border-transparent', + 'hover:border-border-interactive/10', + 'hover:text-elements-mid-em', + 'focus-within:border-border-interactive/10', + 'data-[state=active]:font-medium', + 'data-[state=active]:text-elements-high-em', + 'data-[state=active]:border-elements-high-em', + // Vertical + 'data-[orientation=vertical]:px-3', + 'data-[orientation=vertical]:py-3', + 'data-[orientation=vertical]:min-w-[240px]', + 'data-[orientation=vertical]:focus-ring', + 'data-[orientation=vertical]:rounded-xl', + 'data-[orientation=vertical]:border-transparent', + 'data-[orientation=vertical]:hover:bg-base-bg-emphasized', + 'data-[orientation=vertical]:hover:text-elements-mid-em', + 'data-[orientation=vertical]:hover:border-transparent', + 'data-[orientation=vertical]:focus-visible:border-transparent', + 'data-[orientation=vertical]:focus-visible:bg-base-bg-emphasized', + 'data-[orientation=vertical]:focus-visible:text-elements-mid-em', + 'data-[orientation=vertical]:data-[state=active]:font-normal', + 'data-[orientation=vertical]:data-[state=active]:bg-base-bg-emphasized', + 'data-[orientation=vertical]:data-[state=active]:border-transparent', + 'data-[orientation=vertical]:data-[state=active]:hover:text-elements-high-em', + 'data-[orientation=vertical]:data-[state=active]:focus-visible:text-elements-high-em', + ], + trigger: [ + 'flex', + 'gap-1.5', + 'cursor-default', + 'select-none', + 'items-center', + 'justify-center', + 'outline-none', + 'leading-none', + 'tracking-[-0.006em]', + 'rounded-md', + // Horizontal – default + 'data-[orientation=horizontal]:focus-ring', + // Vertical + 'data-[orientation=vertical]:gap-2', + ], + triggerList: [ + 'flex', + 'shrink-0', + 'gap-5', + 'border-b', + 'border-transparent', + // Horizontal – default + 'data-[orientation=horizontal]:border-border-interactive/10', + // Vertical + 'data-[orientation=vertical]:flex-col', + 'data-[orientation=vertical]:gap-0.5', + ], + content: ['text-elements-high-em', 'grow', 'outline-none', 'tab-content'], + }, + variants: { + fillWidth: { + true: { + trigger: ['flex-1'], + }, + }, + }, + defaultVariants: { + fillWidth: false, + }, +}); diff --git a/packages/frontend/src/components/shared/Tabs/Tabs.tsx b/packages/frontend/src/components/shared/Tabs/Tabs.tsx new file mode 100644 index 00000000..af1c65db --- /dev/null +++ b/packages/frontend/src/components/shared/Tabs/Tabs.tsx @@ -0,0 +1,51 @@ +import React, { type ComponentPropsWithoutRef } from 'react'; +import { Root as TabsRoot } from '@radix-ui/react-tabs'; + +import { tabsTheme } from './Tabs.theme'; +import TabsContent from './TabsContent'; +import TabsList from './TabsList'; +import TabsTrigger from './TabsTrigger'; +import TabsProvider, { TabsProviderProps } from './TabsProvider'; + +export interface TabsProps extends ComponentPropsWithoutRef { + /** + * The configuration for the tabs component. + */ + config?: TabsProviderProps; +} + +/** + * A component that allows users to switch between different tabs. + * @returns JSX element representing the tabs component. + */ +export const Tabs = ({ + config, + className, + orientation = 'horizontal', + ...props +}: TabsProps) => { + const { root } = tabsTheme(config); + + return ( + + + + ); +}; + +/** + * Assigns the TabsTrigger class to the Trigger property of the Tabs object. + */ +Tabs.Trigger = TabsTrigger; +/** + * Assigns the TabsList object to the List property of the Tabs object. + */ +Tabs.List = TabsList; +/** + * Assigns the TabsContent component to the Content property of the Tabs component. + */ +Tabs.Content = TabsContent; diff --git a/packages/frontend/src/components/shared/Tabs/TabsContent/TabsContent.tsx b/packages/frontend/src/components/shared/Tabs/TabsContent/TabsContent.tsx new file mode 100644 index 00000000..21200991 --- /dev/null +++ b/packages/frontend/src/components/shared/Tabs/TabsContent/TabsContent.tsx @@ -0,0 +1,26 @@ +import React, { + forwardRef, + type ComponentPropsWithoutRef, + type ElementRef, +} from 'react'; +import { Content } from '@radix-ui/react-tabs'; + +import { tabsTheme } from '../Tabs.theme'; + +export interface TabsContentProps + extends ComponentPropsWithoutRef {} + +/** + * A component that represents the content of the tabs component. + */ +const TabsContent = forwardRef, TabsContentProps>( + ({ className, ...props }, ref) => { + const { content } = tabsTheme(); + return ; + }, +); + +// Assigns the display name to the TabsContent component. +TabsContent.displayName = 'TabsContent'; + +export { TabsContent }; diff --git a/packages/frontend/src/components/shared/Tabs/TabsContent/index.ts b/packages/frontend/src/components/shared/Tabs/TabsContent/index.ts new file mode 100644 index 00000000..0e80ffbd --- /dev/null +++ b/packages/frontend/src/components/shared/Tabs/TabsContent/index.ts @@ -0,0 +1,3 @@ +import { TabsContent } from './TabsContent'; + +export default TabsContent; diff --git a/packages/frontend/src/components/shared/Tabs/TabsList/TabsList.tsx b/packages/frontend/src/components/shared/Tabs/TabsList/TabsList.tsx new file mode 100644 index 00000000..f5eb1498 --- /dev/null +++ b/packages/frontend/src/components/shared/Tabs/TabsList/TabsList.tsx @@ -0,0 +1,25 @@ +import React, { + forwardRef, + type ComponentPropsWithoutRef, + type ElementRef, +} from 'react'; +import { List } from '@radix-ui/react-tabs'; + +import { tabsTheme } from 'components/shared/Tabs/Tabs.theme'; + +export interface TabsListProps extends ComponentPropsWithoutRef {} + +/** + * A component that represents the list of tabs. + */ +const TabsList = forwardRef, TabsListProps>( + ({ className, ...props }, ref) => { + const { triggerList } = tabsTheme({ className }); + return ; + }, +); + +// Assigns the display name to the TabsList component. +TabsList.displayName = 'TabsList'; + +export { TabsList }; diff --git a/packages/frontend/src/components/shared/Tabs/TabsList/index.ts b/packages/frontend/src/components/shared/Tabs/TabsList/index.ts new file mode 100644 index 00000000..f02fd4e5 --- /dev/null +++ b/packages/frontend/src/components/shared/Tabs/TabsList/index.ts @@ -0,0 +1,3 @@ +import { TabsList } from './TabsList'; + +export default TabsList; diff --git a/packages/frontend/src/components/shared/Tabs/TabsProvider.tsx b/packages/frontend/src/components/shared/Tabs/TabsProvider.tsx new file mode 100644 index 00000000..b51c680b --- /dev/null +++ b/packages/frontend/src/components/shared/Tabs/TabsProvider.tsx @@ -0,0 +1,47 @@ +import React, { + createContext, + useContext, + type PropsWithChildren, + ComponentPropsWithoutRef, +} from 'react'; +import { TabsVariants } from './Tabs.theme'; +import { Root as TabsRoot } from '@radix-ui/react-tabs'; + +export interface TabsProviderProps + extends Partial, + ComponentPropsWithoutRef {} + +type TabsProviderContext = ReturnType; + +const TabsContext = createContext>({}); + +// For inferring return type +const useTabsValues = (props: TabsProviderProps) => { + return props; +}; + +/** + * A provider component that allows users to switch between different tabs. + * @returns JSX element representing the tabs provider component. + */ +export const TabsProvider = ({ + children, + ...props +}: PropsWithChildren): JSX.Element => { + const values = useTabsValues(props); + return {children}; +}; + +/** + * A hook that returns the context of the tabs provider. + * @returns The context of the tabs provider. + */ +export const useTabs = () => { + const context = useContext(TabsContext); + if (context === undefined) { + throw new Error('useTabs was used outside of its Provider'); + } + return context; +}; + +export default TabsProvider; diff --git a/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx b/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx new file mode 100644 index 00000000..61093bff --- /dev/null +++ b/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx @@ -0,0 +1,59 @@ +import React, { + forwardRef, + type ComponentPropsWithoutRef, + type ElementRef, + type PropsWithChildren, + type ReactNode, +} from 'react'; +import { Trigger } from '@radix-ui/react-tabs'; + +import { tabsTheme } from 'components/shared/Tabs/Tabs.theme'; +import { useTabs } from 'components/shared/Tabs/TabsProvider'; + +export interface TabsTriggerProps + extends ComponentPropsWithoutRef { + /** + * The icon to display in the trigger. + */ + icon?: ReactNode; +} + +/** + * A component that represents the trigger for the tabs component. + */ +const TabsTrigger = forwardRef< + ElementRef, + PropsWithChildren +>(({ className, icon, children, ...props }, ref) => { + const config = useTabs(); + const { triggerWrapper, trigger } = tabsTheme(config); + const orientation = config.orientation; + + return ( + + {/* Need to add button in the trigger children because there's focus state inside the children */} + + + ); +}); + +TabsTrigger.displayName = 'TabsTrigger'; + +export { TabsTrigger }; diff --git a/packages/frontend/src/components/shared/Tabs/TabsTrigger/index.ts b/packages/frontend/src/components/shared/Tabs/TabsTrigger/index.ts new file mode 100644 index 00000000..57b0b3e6 --- /dev/null +++ b/packages/frontend/src/components/shared/Tabs/TabsTrigger/index.ts @@ -0,0 +1,3 @@ +import { TabsTrigger } from './TabsTrigger'; + +export default TabsTrigger; diff --git a/packages/frontend/src/components/shared/Tabs/index.ts b/packages/frontend/src/components/shared/Tabs/index.ts new file mode 100644 index 00000000..856dbbb3 --- /dev/null +++ b/packages/frontend/src/components/shared/Tabs/index.ts @@ -0,0 +1 @@ +export * from './Tabs'; diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx index 8cf092d5..1a76f3af 100644 --- a/packages/frontend/src/pages/components/index.tsx +++ b/packages/frontend/src/pages/components/index.tsx @@ -1,3 +1,4 @@ +import React, { useState } from 'react'; import { Avatar, AvatarVariants } from 'components/shared/Avatar'; import { Badge, BadgeProps } from 'components/shared/Badge'; import { Button, ButtonOrLinkProps } from 'components/shared/Button'; @@ -5,40 +6,24 @@ import { Calendar } from 'components/shared/Calendar'; import { Checkbox } from 'components/shared/Checkbox'; import { SearchIcon, CrossIcon, PlusIcon } from 'components/shared/CustomIcon'; import { Input } from 'components/shared/Input'; -import React, { useState } from 'react'; import { Value } from 'react-calendar/dist/cjs/shared/types'; - -const avatarSizes: AvatarVariants['size'][] = [18, 20, 24, 28, 32, 36, 40, 44]; -const avatarVariants: AvatarVariants['type'][] = ['gray', 'orange', 'blue']; +import { + renderCheckbox, + renderCheckboxWithDescription, +} from './renders/checkbox'; +import { avatars, avatarsFallback } from './renders/avatar'; +import { renderBadges } from './renders/badge'; +import { renderButtonIcons, renderButtons } from './renders/button'; +import { + renderTabWithBadges, + renderTabs, + renderVerticalTabs, +} from './renders/tabs'; const Page = () => { const [singleDate, setSingleDate] = useState(); const [dateRange, setDateRange] = useState(); - const avatars = avatarSizes.map((size) => { - return ( - - ); - }); - - const avatarsFallback = avatarVariants.map((color) => { - return avatarSizes.map((size) => { - return ( - - ); - }); - }); - return (
@@ -52,7 +37,7 @@ const Page = () => {
- {/* Insert Components here */} + {/* Button */}

Input

@@ -109,110 +94,32 @@ const Page = () => {

Button

- {['primary', 'secondary', 'tertiary', 'danger'].map( - (variant, index) => ( -
- {['lg', 'md', 'sm', 'xs', 'disabled'].map((size) => ( - - ))} -
- ), - )} - {[ - 'primary', - 'secondary', - 'tertiary', - 'ghost', - 'danger', - 'danger-ghost', - ].map((variant, index) => ( -
- {['lg', 'md', 'sm', 'xs', 'disabled'].map((size) => ( - - ))} -
- ))} + {renderButtons()} + {renderButtonIcons()}
+ {/* Badge */}

Badge

-
- {['primary', 'secondary', 'tertiary', 'inset'].map( - (variant, index) => ( -
- {['sm', 'xs'].map((size) => ( - - 1 - - ))} -
- ), - )} -
+
{renderBadges()}
+ {/* Checkbox */}

Checkbox

+
{renderCheckbox()}
- {Array.from({ length: 5 }).map((_, index) => ( - - ))} -
-
- {Array.from({ length: 2 }).map((_, index) => ( - - ))} + {renderCheckboxWithDescription()}
+ {/* Calendar */}

Calendar

@@ -239,18 +146,31 @@ const Page = () => { />
+
-
+
- {/* Avatar */} -
-

Avatar

-
- {avatars} - {avatarsFallback} -
+ {/* Avatar */} +
+

Avatar

+
+ {avatars} + {avatarsFallback}
+ +
+ + {/* Tabs */} +
+

Tabs

+
+ {renderTabs()} + {renderTabWithBadges()} +
+

Vertical Tabs

+ {renderVerticalTabs()} +
diff --git a/packages/frontend/src/pages/components/renders/avatar.tsx b/packages/frontend/src/pages/components/renders/avatar.tsx new file mode 100644 index 00000000..9ebaa03f --- /dev/null +++ b/packages/frontend/src/pages/components/renders/avatar.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Avatar, AvatarVariants } from 'components/shared/Avatar'; + +const avatarSizes: AvatarVariants['size'][] = [18, 20, 24, 28, 32, 36, 40, 44]; +const avatarVariants: AvatarVariants['type'][] = ['gray', 'orange', 'blue']; + +export const avatars = avatarSizes.map((size) => { + return ( + + ); +}); + +export const avatarsFallback = avatarVariants.map((color) => { + return avatarSizes.map((size) => { + return ( + + ); + }); +}); diff --git a/packages/frontend/src/pages/components/renders/badge.tsx b/packages/frontend/src/pages/components/renders/badge.tsx new file mode 100644 index 00000000..e4eb3114 --- /dev/null +++ b/packages/frontend/src/pages/components/renders/badge.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import { Badge } from 'components/shared/Badge'; +import { BadgeTheme } from 'components/shared/Badge/Badge.theme'; + +export const renderBadges = () => { + return ['primary', 'secondary', 'tertiary', 'inset'].map((variant, index) => ( +
+ {['sm', 'xs'].map((size) => ( + + 1 + + ))} +
+ )); +}; diff --git a/packages/frontend/src/pages/components/renders/button.tsx b/packages/frontend/src/pages/components/renders/button.tsx new file mode 100644 index 00000000..c1c69c48 --- /dev/null +++ b/packages/frontend/src/pages/components/renders/button.tsx @@ -0,0 +1,49 @@ +import { Button, ButtonTheme } from 'components/shared/Button'; +import { PlusIcon } from 'components/shared/CustomIcon'; +import React from 'react'; + +export const renderButtons = () => { + return ['primary', 'secondary', 'tertiary', 'danger'].map( + (variant, index) => ( +
+ {['lg', 'md', 'sm', 'xs', 'disabled'].map((size) => ( + + ))} +
+ ), + ); +}; + +export const renderButtonIcons = () => { + return [ + 'primary', + 'secondary', + 'tertiary', + 'ghost', + 'danger', + 'danger-ghost', + ].map((variant, index) => ( +
+ {['lg', 'md', 'sm', 'xs', 'disabled'].map((size) => ( + + ))} +
+ )); +}; diff --git a/packages/frontend/src/pages/components/renders/checkbox.tsx b/packages/frontend/src/pages/components/renders/checkbox.tsx new file mode 100644 index 00000000..66c9eef5 --- /dev/null +++ b/packages/frontend/src/pages/components/renders/checkbox.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Checkbox } from 'components/shared/Checkbox'; + +export const renderCheckbox = () => { + return Array.from({ length: 5 }).map((_, index) => ( + + )); +}; + +export const renderCheckboxWithDescription = () => { + return Array.from({ length: 2 }).map((_, index) => ( + + )); +}; diff --git a/packages/frontend/src/pages/components/renders/tabs.tsx b/packages/frontend/src/pages/components/renders/tabs.tsx new file mode 100644 index 00000000..d344317e --- /dev/null +++ b/packages/frontend/src/pages/components/renders/tabs.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { Tabs } from 'components/shared/Tabs'; +import { Badge } from 'components/shared/Badge'; +import { GlobeIcon } from 'components/shared/CustomIcon'; + +const tabs = Array.from({ length: 8 }); + +export const renderTabs = () => { + return ( + + + {tabs.map((_, index) => ( + + Tab item {index} + + ))} + + + ); +}; + +export const renderTabWithBadges = () => { + return ( + + + {tabs.map((_, index) => ( + {index}} + > + Tab item + + ))} + + + ); +}; + +export const renderVerticalTabs = () => { + return ( + + + {tabs.slice(0, 4).map((_, index) => ( + } + value={index.toString()} + > + Tab item {index} + + ))} + + + ); +}; diff --git a/yarn.lock b/yarn.lock index d451b22d..c8881430 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3310,6 +3310,17 @@ "@radix-ui/react-use-previous" "1.0.1" "@radix-ui/react-use-size" "1.0.1" +"@radix-ui/react-collection@1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159" + integrity sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "1.0.1" + "@radix-ui/react-context" "1.0.1" + "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-slot" "1.0.2" + "@radix-ui/react-compose-refs@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989" @@ -3324,6 +3335,21 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-direction@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b" + integrity sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-id@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0" + integrity sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-layout-effect" "1.0.1" + "@radix-ui/react-presence@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba" @@ -3341,6 +3367,22 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-slot" "1.0.2" +"@radix-ui/react-roving-focus@1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974" + integrity sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.1" + "@radix-ui/react-collection" "1.0.3" + "@radix-ui/react-compose-refs" "1.0.1" + "@radix-ui/react-context" "1.0.1" + "@radix-ui/react-direction" "1.0.1" + "@radix-ui/react-id" "1.0.1" + "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-use-callback-ref" "1.0.1" + "@radix-ui/react-use-controllable-state" "1.0.1" + "@radix-ui/react-slot@1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab" @@ -3349,6 +3391,21 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-compose-refs" "1.0.1" +"@radix-ui/react-tabs@^1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz#993608eec55a5d1deddd446fa9978d2bc1053da2" + integrity sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.1" + "@radix-ui/react-context" "1.0.1" + "@radix-ui/react-direction" "1.0.1" + "@radix-ui/react-id" "1.0.1" + "@radix-ui/react-presence" "1.0.1" + "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-roving-focus" "1.0.4" + "@radix-ui/react-use-controllable-state" "1.0.1" + "@radix-ui/react-use-callback-ref@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a" @@ -15195,7 +15252,7 @@ tailwind-variants@^0.2.0: dependencies: tailwind-merge "^2.2.0" -tailwindcss@^3.0.2, tailwindcss@^3.3.6: +tailwindcss@^3.0.2: version "3.3.6" resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz" integrity sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw== @@ -15223,6 +15280,34 @@ tailwindcss@^3.0.2, tailwindcss@^3.3.6: resolve "^1.22.2" sucrase "^3.32.0" +tailwindcss@^3.4.1: + version "3.4.1" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.1.tgz#f512ca5d1dd4c9503c7d3d28a968f1ad8f5c839d" + integrity sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA== + dependencies: + "@alloc/quick-lru" "^5.2.0" + arg "^5.0.2" + chokidar "^3.5.3" + didyoumean "^1.2.2" + dlv "^1.1.3" + fast-glob "^3.3.0" + glob-parent "^6.0.2" + is-glob "^4.0.3" + jiti "^1.19.1" + lilconfig "^2.1.0" + micromatch "^4.0.5" + normalize-path "^3.0.0" + object-hash "^3.0.0" + picocolors "^1.0.0" + postcss "^8.4.23" + postcss-import "^15.1.0" + postcss-js "^4.0.1" + postcss-load-config "^4.0.1" + postcss-nested "^6.0.1" + postcss-selector-parser "^6.0.11" + resolve "^1.22.2" + sucrase "^3.32.0" + tapable@^1.0.0: version "1.1.3" resolved "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz"