feat: menubar, dropdown menu, badge & table

.todo

@@ -40,3 +40,7 @@
 
 - (done) refactor: remove barrell imports to better support treeshaking with different bundlers/frameworks
 - (for some reason polymorphic only makes container a client component and use client needs to be used) feat: add polymorphic ability wherever not possible but could be
+- ring-offset-offset is possibly wrong in buttonClasses
+
+export trigger primitives as well as triggers
+fix: badge border color

app.tsx

@@ -1,69 +1,167 @@
+import { Badge } from '@/components/badge/components/badge'
 import {
-	Button,
-	Dialog,
-	DialogContent,
-	DialogTrigger,
-	HoverCard,
-	HoverCardContent,
-	HoverCardTrigger,
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-	Sheet,
-	SheetContent,
-	SheetTrigger,
+	Card,
+	CardBody,
+	CardFooter,
+	CardHeader,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+	Menubar,
+	MenubarCheckboxItem,
+	MenubarContent,
+	MenubarItem,
+	MenubarMenu,
+	MenubarPortal,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarSeparator,
+	MenubarSub,
+	MenubarSubContent,
+	MenubarSubTrigger,
+	MenubarTrigger,
+	Separator,
+	Skeleton,
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from '@/index'
 
 const App = () => {
 	return (
-		<div className='h-screen w-full flex justify-center items-center gap-8'>
-			{/* <div className='w-[300px]'>
-				<Carousel>
-					{({ scrollTo }) => (
-						<div>
-							<CarouselViewport>
-								<CarouselSlider>
-									{[1, 2, 3].map((_, index) => (
-										<CarouselItem key={index}>
-											<img
-												src='https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=1200:*'
-												alt=''
-												className='w-[300px]'
-											/>
-										</CarouselItem>
-									))}
-								</CarouselSlider>
-
-								<CarouselPrevious>
-									<ChevronLeftIcon />
-								</CarouselPrevious>
-
-								<CarouselNext>
-									<ChevronRightIcon />
-								</CarouselNext>
-
-								<CarouselIndicators />
-								<CarouselProgress />
-							</CarouselViewport>
-							<div onClick={() => scrollTo(0)}>1</div>
-							<div onClick={() => scrollTo(1)}>2</div>
-							<div onClick={() => scrollTo(2)}>3</div>
-						</div>
-					)}
-				</Carousel>
-			</div> */}
-			<Popover>
-				<PopoverTrigger>Trigger</PopoverTrigger>
-				<PopoverContent>Content</PopoverContent>
-			</Popover>
-			<HoverCard>
-				<HoverCardTrigger>Trigger</HoverCardTrigger>
-				<HoverCardContent>Content</HoverCardContent>
-			</HoverCard>
-			<Dialog>
-				<DialogTrigger>Trigger</DialogTrigger>
-				<DialogContent>Content</DialogContent>
-			</Dialog>
+		<div className='h-screen w-full  justify-center items-center gap-8'>
+			<Table className='my-10 max-w-[800px] mx-auto'>
+				<TableHeader>
+					<TableRow>
+						<TableHead className='w-[100px]'>Invoice</TableHead>
+						<TableHead>Status</TableHead>
+						<TableHead>Method</TableHead>
+						<TableHead className='text-right'>Amount</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					<TableRow>
+						<TableCell className='font-medium'>INV001</TableCell>
+						<TableCell>Paid</TableCell>
+						<TableCell>Credit Card</TableCell>
+						<TableCell className='text-right'>$250.00</TableCell>
+					</TableRow>
+				</TableBody>
+				<TableFooter>
+					<TableRow>
+						<TableCell colSpan={3}>Total</TableCell>
+						<TableCell className='text-right'>$2,500.00</TableCell>
+					</TableRow>
+				</TableFooter>
+				<TableCaption>A list of your recent invoices.</TableCaption>
+			</Table>
+			<Menubar>
+				<MenubarMenu>
+					<MenubarTrigger>File</MenubarTrigger>
+					<MenubarContent>
+						<MenubarItem>New Tab</MenubarItem>
+						<MenubarItem>New Window</MenubarItem>
+						<MenubarItem disabled>New Incognito Window</MenubarItem>
+						<MenubarSeparator />
+						<MenubarSub>
+							<MenubarSubTrigger>Share</MenubarSubTrigger>
+							<MenubarSubContent>
+								<MenubarItem>Email link</MenubarItem>
+								<MenubarItem>Messages</MenubarItem>
+								<MenubarItem>Notes</MenubarItem>
+							</MenubarSubContent>
+						</MenubarSub>
+						<MenubarSeparator />
+						<MenubarItem>Print...</MenubarItem>
+					</MenubarContent>
+				</MenubarMenu>
+				<MenubarMenu>
+					<MenubarTrigger>Edit</MenubarTrigger>
+					<MenubarContent>
+						<MenubarItem>Undo</MenubarItem>
+						<MenubarItem>Redo</MenubarItem>
+						<MenubarSeparator />
+						<MenubarSub>
+							<MenubarSubTrigger>Find</MenubarSubTrigger>
+							<MenubarSubContent>
+								<MenubarItem>Search the web</MenubarItem>
+								<MenubarSeparator />
+								<MenubarItem>Find...</MenubarItem>
+								<MenubarItem>Find Next</MenubarItem>
+								<MenubarItem>Find Previous</MenubarItem>
+							</MenubarSubContent>
+						</MenubarSub>
+						<MenubarSeparator />
+						<MenubarItem>Cut</MenubarItem>
+						<MenubarItem>Copy</MenubarItem>
+						<MenubarItem>Paste</MenubarItem>
+					</MenubarContent>
+				</MenubarMenu>
+				<MenubarMenu>
+					<MenubarTrigger>View</MenubarTrigger>
+					<MenubarContent>
+						<MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+						<MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
+						<MenubarSeparator />
+						<MenubarItem inset>Reload</MenubarItem>
+						<MenubarItem disabled inset>
+							Force Reload
+						</MenubarItem>
+						<MenubarSeparator />
+						<MenubarItem inset>Toggle Fullscreen</MenubarItem>
+						<MenubarSeparator />
+						<MenubarItem inset>Hide Sidebar</MenubarItem>
+					</MenubarContent>
+				</MenubarMenu>
+				<MenubarMenu>
+					<MenubarTrigger>Profiles</MenubarTrigger>
+					<MenubarContent>
+						<MenubarRadioGroup value='benoit'>
+							<MenubarRadioItem value='andy'>Andy</MenubarRadioItem>
+							<MenubarRadioItem value='benoit'>Benoit</MenubarRadioItem>
+							<MenubarRadioItem value='Luis'>Luis</MenubarRadioItem>
+						</MenubarRadioGroup>
+						<MenubarSeparator />
+						<MenubarItem inset>Edit...</MenubarItem>
+						<MenubarSeparator />
+						<MenubarItem inset>Add Profile...</MenubarItem>
+					</MenubarContent>
+				</MenubarMenu>
+			</Menubar>
+			<div className='pt-2'>
+				<Separator className='w-full bg-red-500' />
+			</div>
+			<Skeleton className='h-[60px]' />
+			<Card>
+				<CardHeader>Header</CardHeader>
+				<CardBody>Body</CardBody>
+				<CardFooter>Footer</CardFooter>
+			</Card>
+			<div className='pt-4'>
+				<Badge tabIndex={0}>Badge</Badge>
+			</div>
+			<DropdownMenu>
+				<DropdownMenuTrigger>Open</DropdownMenuTrigger>
+				<DropdownMenuContent>
+					<DropdownMenuLabel>My Account</DropdownMenuLabel>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem>Profile</DropdownMenuItem>
+					<DropdownMenuItem>Billing</DropdownMenuItem>
+					<DropdownMenuItem>Team</DropdownMenuItem>
+					<DropdownMenuItem>Subscription</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+			<Card>
+				<CardBody>aefeaea</CardBody>
+			</Card>
 		</div>
 	)
 }

globals.css

@@ -9,6 +9,25 @@
     --timing-function: cubic-bezier(0.16, 1, 0.3, 1);
     --background: 255, 255, 255;
     --foreground: 10, 10, 10;
+    --mode-50: 20, 20, 20;
+    --mode-100: 25, 25, 25;
+    --mode-150: 38, 38, 38;
+    --mode-200: 51, 51, 51;
+    --mode-250: 64, 64, 64;
+    --mode-300: 76, 76, 76;
+    --mode-350: 89, 89, 89;
+    --mode-400: 102, 102, 102;
+    --mode-450: 115, 115, 115;
+    --mode-500: 127, 127, 127;
+    --mode-550: 140, 140, 140;
+    --mode-600: 153, 153, 153;
+    --mode-650: 166, 166, 166;
+    --mode-700: 178, 178, 178;
+    --mode-750: 191, 191, 191;
+    --mode-800: 204, 204, 204;
+    --mode-850: 217, 217, 217;
+    --mode-900: 230, 230, 230;
+    --mode-950: 245, 245, 245;
     --mode: 255, 255, 255;
     --mode-foreground: 10, 10, 10;
     --mode-contrast: 10, 10, 10;
@@ -50,15 +69,29 @@
     --muted: 245, 245, 245;
     --muted-foreground: 115, 115, 115;
     --radius: 0.5rem;
-    --border: 228, 228, 228;
-
-    /* components */
-    --card: 254, 254, 254;
-    --skeleton: 16, 16, 235;
   }
   .dark {
     --background: 10, 10, 10;
     --foreground: 255, 255, 255;
+    --mode-50: 240, 240, 240;
+    --mode-100: 230, 230, 230;
+    --mode-150: 220, 220, 220;
+    --mode-200: 204, 204, 204;
+    --mode-250: 190, 190, 190;
+    --mode-300: 178, 178, 178;
+    --mode-350: 165, 165, 165;
+    --mode-400: 153, 153, 153;
+    --mode-450: 140, 140, 140;
+    --mode-500: 127, 127, 127;
+    --mode-550: 115, 115, 115;
+    --mode-600: 102, 102, 102;
+    --mode-650: 89, 89, 89;
+    --mode-700: 76, 76, 76;
+    --mode-750: 64, 64, 64;
+    --mode-800: 51, 51, 51;
+    --mode-850: 38, 38, 38;
+    --mode-900: 25, 25, 25;
+    --mode-950: 15, 15, 15;
     --mode: 10, 10, 10;
     --mode-foreground: 255, 255, 255;
     --mode-contrast: 255, 255, 255;
@@ -67,8 +100,6 @@
     --mode-accent-foreground: 255, 255, 255;
     --mode-contrast-accent: 235, 235, 235;
     --mode-contrast-accent-foreground: 10, 10, 10;
-    --mode-accent-high: 64, 64, 64;
-    --mode-contrast-accent-high: 191, 191, 191;
     --neutral: 87, 87, 87;
     --neutral-foreground: 255, 255, 255;
     --primary: 0, 112, 240;
@@ -100,12 +131,6 @@
     --screen-lg: 1024px;
     --screen-xl: 1280px;
     --screen-2xl: 1536px;
-
-    /* Components */
-    --card: 26, 26, 26;
-    --border: 38, 38, 38;
-    --separator: 64, 64, 64;
-    --skeleton: 64, 64, 64;
   }
 
   * {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@renderui/core",
-	"version": "1.8.4",
+	"version": "1.9.0",
 	"private": false,
 	"sideEffects": false,
 	"description": "React UI library with highly modular and ready-out-of-the-box components",
@@ -35,7 +35,9 @@
 		"@radix-ui/react-accordion": "^1.2.0",
 		"@radix-ui/react-collapsible": "^1.1.0",
 		"@radix-ui/react-dialog": "^1.1.1",
+		"@radix-ui/react-dropdown-menu": "^2.1.1",
 		"@radix-ui/react-hover-card": "^1.1.1",
+		"@radix-ui/react-menubar": "^1.1.1",
 		"@radix-ui/react-navigation-menu": "^1.2.0",
 		"@radix-ui/react-popover": "^1.1.1",
 		"@radix-ui/react-portal": "^1.1.1",
@@ -57,7 +59,6 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.8.3",
-		"@biomejs/monorepo": "biomejs/biome",
 		"@changesets/cli": "^2.26.0",
 		"@commitlint/cli": "^18.6.1",
 		"@commitlint/config-conventional": "^18.6.2",

src/components/_shared/components/icons/circle-icon.tsx

@@ -0,0 +1,17 @@
+const CircleIcon = (props: React.ComponentPropsWithRef<'svg'>) => {
+	return (
+		<svg
+			viewBox='0 0 24 24'
+			fill='none'
+			stroke='currentColor'
+			strokeWidth='2'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+			{...props}
+		>
+			<circle cx='12' cy='12' r='10' />
+		</svg>
+	)
+}
+
+export { CircleIcon }

src/components/_shared/variants/text-size.ts

@@ -2,7 +2,7 @@ const textSizeVariants = {
 	'xs': 'text-xs',
 	'sm': 'text-sm',
 	'base': 'text-base',
-	'md': 'text-1.0675rem leading-1.5675rem',
+	'md': 'text-[1.0675rem] leading-[1.5675rem]',
 	'lg': 'text-lg',
 	'xl': 'text-xl',
 	'2xl': 'text-2xl',

src/components/badge/components/badge.tsx

@@ -0,0 +1,13 @@
+import { DEFAULT_BADGE_CONSTANTS } from '@/components/badge/constants/constants'
+import type { BadgeProps } from '@/components/badge/types/badge'
+import { cn, polymorphic } from '@renderui/utils'
+
+const Badge = (props: BadgeProps) => {
+	const { asChild, className, ...restProps } = props
+
+	const Component = polymorphic(asChild, 'div')
+
+	return <Component className={cn(DEFAULT_BADGE_CONSTANTS, className)} {...restProps} />
+}
+
+export { Badge }

src/components/badge/constants/constants.ts

@@ -0,0 +1,4 @@
+const DEFAULT_BADGE_CONSTANTS =
+	'_badge inline-flex items-center bg-mode-accent rounded-full px-2.5 py-0.5 text-xs font-medium transition-[background-color,shadow] duration-fast outline-none focus:ring-ring-width ring-ring-color [&]:ring-ring-offset ring-offset-background'
+
+export { DEFAULT_BADGE_CONSTANTS }