@djangocfg/ui-core 2.1.314 → 2.1.316

package/README.md

@@ -104,6 +104,14 @@ import { Button, Dialog, Table } from '@djangocfg/ui-core';
 ### Navigation (8)
 `Tabs` `Accordion` `Collapsible` `Command` `ContextMenu` `DropdownMenu` `Menubar` `NavigationMenu`
 
+`ContextMenuItem`, `DropdownMenuItem`, and `MenubarItem` accept `variant?: 'default' | 'destructive'`. The `destructive` variant turns the row red on focus — use it for delete/remove actions:
+
+```tsx
+<DropdownMenuItem variant="destructive" onClick={remove}>
+  <Trash className="mr-2 size-4" /> Delete
+</DropdownMenuItem>
+```
+
 ### Data (10)
 `Table` `Badge` `Avatar` `Progress` `Calendar` `Carousel` `Chart` `Toggle` `ToggleGroup` `DatePicker`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.314",
+  "version": "2.1.316",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -91,7 +91,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.314",
+    "@djangocfg/i18n": "^2.1.316",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -160,9 +160,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.314",
+    "@djangocfg/i18n": "^2.1.316",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.314",
+    "@djangocfg/typescript-config": "^2.1.316",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/navigation/context-menu/index.tsx

@@ -76,13 +76,17 @@ const ContextMenuItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
     inset?: boolean
+    /** Visual style. `destructive` paints the row red on focus. */
+    variant?: "default" | "destructive"
     key?: React.Key
   }
->(({ className, inset, ...props }, ref) => (
+>(({ className, inset, variant = "default", ...props }, ref) => (
   <ContextMenuPrimitive.Item
     ref={ref}
+    data-variant={variant}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive",
       inset && "pl-8",
       className
     )}

package/src/components/navigation/dropdown-menu/index.tsx

@@ -81,18 +81,21 @@ const DropdownMenuItem = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean
     href?: string
+    /** Visual style. `destructive` paints the row red on focus. */
+    variant?: "default" | "destructive"
     key?: React.Key
   }
->(({ className, inset, href, children, ...props }, ref) => {
+>(({ className, inset, href, variant = "default", children, ...props }, ref) => {
   const classes = cn(
     "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+    "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive",
     inset && "pl-8",
     className
   )
 
   if (href) {
     return (
-      <DropdownMenuPrimitive.Item asChild ref={ref} {...props}>
+      <DropdownMenuPrimitive.Item asChild ref={ref} data-variant={variant} {...props}>
         <Link href={href} className={classes}>
           {children}
         </Link>
@@ -103,6 +106,7 @@ const DropdownMenuItem = React.forwardRef<
   return (
     <DropdownMenuPrimitive.Item
       ref={ref}
+      data-variant={variant}
       className={classes}
       {...props}
     >

package/src/components/navigation/menubar/index.tsx

@@ -133,18 +133,21 @@ const MenubarItem = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
     inset?: boolean
     href?: string
+    /** Visual style. `destructive` paints the row red on focus. */
+    variant?: "default" | "destructive"
     key?: React.Key
   }
->(({ className, inset, href, children, ...props }, ref) => {
+>(({ className, inset, href, variant = "default", children, ...props }, ref) => {
   const classes = cn(
     "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive",
     inset && "pl-8",
     className
   )
 
   if (href) {
     return (
-      <MenubarPrimitive.Item asChild ref={ref} {...props}>
+      <MenubarPrimitive.Item asChild ref={ref} data-variant={variant} {...props}>
         <Link href={href} className={classes}>
           {children}
         </Link>
@@ -155,6 +158,7 @@ const MenubarItem = React.forwardRef<
   return (
     <MenubarPrimitive.Item
       ref={ref}
+      data-variant={variant}
       className={classes}
       {...props}
     >

package/src/styles/base.css

@@ -10,7 +10,7 @@
 }
 
 html {
-  font-weight: 500;
+  font-weight: 400;
 }
 
 body {