@ikatec/nebula-react 1.6.0-beta.5 → 1.7.0-beta.1

package/dist/index.d.mts

@@ -461,9 +461,11 @@ interface DropdownMenuContentProps {
     portal?: boolean;
 }
 declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+interface DropdownMenuItemProps {
     inset?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>>;
+    variant?: 'primary' | 'danger';
+}
+declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {

package/dist/index.d.ts

@@ -461,9 +461,11 @@ interface DropdownMenuContentProps {
     portal?: boolean;
 }
 declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+interface DropdownMenuItemProps {
     inset?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>>;
+    variant?: 'primary' | 'danger';
+}
+declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {

package/dist/index.js

@@ -4063,15 +4063,17 @@ var DropdownMenuSubTrigger = React25__namespace.forwardRef(({ className, inset,
         select-none
         items-center
         gap-2
-        px-4
-        h-11
+        px-2
+        h-9
         text-sm
-        text-listItem-text-default
-        active:text-listItem-text-selected
+        text-listItem-primary-text-default
+        active:text-listItem-primary-text-selected
         active:font-semibold
-        active:bg-listItem-background-default
-        focus:bg-listItem-background-hover
+        active:bg-listItem-primary-background-default
+        focus:bg-listItem-primary-background-hover
+        focus:text-listItem-primary-text-hover
         outline-none
+        rounded-lg
       `,
       inset && "pl-8",
       className
@@ -4090,18 +4092,23 @@ var DropdownMenuSubContent = React25__namespace.forwardRef(({ className, portal
     DropdownMenuPrimitive__namespace.SubContent,
     {
       ref,
+      sideOffset: 6,
       className: cn(
         `
           z-50
           min-w-[8rem]
           overflow-hidden
-          rounded-2xl
+          rounded-xl
           border
           border-dropdownMenu-border
           bg-dropdownMenu-background
-          text-listItem-text-default
+          text-listItem-primary-text-default
           shadow-md
           shadow-dropdownMenu-shadow
+          p-[6px]
+          flex 
+          flex-col 
+          gap-[1px]
         `,
         className
       ),
@@ -4124,13 +4131,17 @@ var DropdownMenuContent = React25__namespace.forwardRef(({ className, sideOffset
           min-w-32
           overflow-y-auto
           overflow-x-hidden
-          rounded-2xl
+          rounded-xl
           border
           border-dropdownMenu-border
           bg-dropdownMenu-background
-          text-listItem-text-default
+          text-listItem-primary-text-default
           shadow-md
           shadow-dropdownMenu-shadow
+          p-[6px]
+          flex 
+          flex-col 
+          gap-[1px]
         `,
         className
       ),
@@ -4139,32 +4150,58 @@ var DropdownMenuContent = React25__namespace.forwardRef(({ className, sideOffset
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-var DropdownMenuItem = React25__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var dropdownMenuItemVariantsConfig = classVarianceAuthority.cva(
+  `
+    relative
+    flex
+    cursor-pointer
+    select-none
+    items-center
+    gap-2
+    px-2
+    h-9
+    text-sm
+    outline-none
+    transition-colors
+    duration-150 
+    ease-out
+    active:font-semibold
+    data-[disabled]:pointer-events-none
+    data-[disabled]:opacity-50
+    [&>svg]:size-4
+    [&>svg]:shrink-0
+    rounded-lg
+  `,
+  {
+    variants: {
+      variant: {
+        primary: `
+          text-listItem-primary-text-default
+          focus:bg-listItem-primary-background-hover
+          focus:text-listItem-primary-text-hover
+          active:bg-listItem-primary-background-selected
+          active:text-listItem-primary-text-selected
+        `,
+        danger: `
+          text-listItem-danger-text-default
+          focus:bg-listItem-danger-background-hover
+          focus:text-listItem-danger-text-hover
+          active:bg-listItem-danger-background-selected
+          active:text-listItem-danger-text-selected
+        `
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
+var DropdownMenuItem = React25__namespace.forwardRef(({ className, inset, variant: variant3 = "primary", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Item,
   {
     ref,
     className: cn(
-      `
-        relative
-        flex
-        cursor-pointer
-        select-none
-        items-center
-        gap-2
-        px-4
-        h-11
-        text-sm
-        outline-none
-        transition-colors
-        active:text-listItem-text-selected
-        active:font-semibold
-        active:bg-listItem-background-default
-        focus:bg-listItem-background-hover
-        data-[disabled]:pointer-events-none
-        data-[disabled]:opacity-50
-        [&>svg]:size-4
-        [&>svg]:shrink-0
-      `,
+      dropdownMenuItemVariantsConfig({ variant: variant3 }),
       inset && "pl-8",
       className
     ),
@@ -4183,21 +4220,25 @@ var DropdownMenuCheckboxItem = React25__namespace.forwardRef(({ className, child
         cursor-pointer
         select-none
         items-center
-        h-11
+        h-9
         pl-10
         pr-4
-        text-listItem-text-default
+        text-listItem-primary-text-default
+        text-sm
         outline-none
         transition-colors
+        duration-150 
+        ease-out
         font-normal
-        active:text-listItem-text-selected
+        active:text-listItem-primary-text-selected
         active:font-semibold
-        active:bg-listItem-background-default
-        focus:bg-listItem-background-hover
+        active:bg-listItem-primary-background-default
+        focus:bg-listItem-primary-background-hover
         data-[disabled]:pointer-events-none
         data-[disabled]:opacity-50
         data-[state=checked]:font-semibold
-        data-[state=checked]:text-listItem-text-selected
+        data-[state=checked]:text-listItem-primary-text-selected
+        rounded-lg
        `,
       className
     ),
@@ -4221,26 +4262,30 @@ var DropdownMenuRadioItem = React25__namespace.forwardRef(({ className, children
         cursor-pointer
         select-none
         items-center
-        h-11
+        h-9
         pl-8
         pr-2
-        text-listItem-text-default
+        text-sm
+        text-listItem-primary-text-default
         outline-none
         transition-colors
-        active:text-listItem-text-selected
+        duration-150 
+        ease-out
+        active:text-listItem-primary-text-selected
         active:font-semibold
-        active:bg-listItem-background-default
-        focus:bg-listItem-background-hover
+        active:bg-listItem-primary-background-default
+        focus:bg-listItem-primary-background-hover
         data-[disabled]:pointer-events-none
         data-[disabled]:opacity-50
         data-[state=checked]:font-semibold
-        data-[state=checked]:text-listItem-text-selected
+        data-[state=checked]:text-listItem-primary-text-selected
+        rounded-lg
       `,
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { className: "nebula-ds absolute left-4 flex h-11 w-2 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "nebula-ds h-2 w-2 fill-current" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { className: "nebula-ds absolute left-4 flex h-9 w-1.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "nebula-ds h-1.5 w-1.5 fill-current" }) }),
       children
     ]
   }
@@ -4252,12 +4297,12 @@ var DropdownMenuLabel = React25__namespace.forwardRef(({ className, inset, ...pr
     ref,
     className: cn(
       `
-        px-4
-        h-8
+        px-2
+        h-6
         flex
         items-center
         text-sm
-        text-listItem-text-header
+        text-listItem-primary-text-header
       `,
       inset && "pl-8",
       className
@@ -4275,6 +4320,7 @@ var DropdownMenuSeparator = React25__namespace.forwardRef(({ className, ...props
         -mx-1
         h-px
         bg-dropdownMenu-border
+        my-[6px]
       `,
       className
     ),

package/dist/index.mjs

@@ -4020,15 +4020,17 @@ var DropdownMenuSubTrigger = React25.forwardRef(({ className, inset, children, .
         select-none
         items-center
         gap-2
-        px-4
-        h-11
+        px-2
+        h-9
         text-sm
-        text-listItem-text-default
-        active:text-listItem-text-selected
+        text-listItem-primary-text-default
+        active:text-listItem-primary-text-selected
         active:font-semibold
-        active:bg-listItem-background-default
-        focus:bg-listItem-background-hover
+        active:bg-listItem-primary-background-default
+        focus:bg-listItem-primary-background-hover
+        focus:text-listItem-primary-text-hover
         outline-none
+        rounded-lg
       `,
       inset && "pl-8",
       className
@@ -4047,18 +4049,23 @@ var DropdownMenuSubContent = React25.forwardRef(({ className, portal = false, ..
     DropdownMenuPrimitive.SubContent,
     {
       ref,
+      sideOffset: 6,
       className: cn(
         `
           z-50
           min-w-[8rem]
           overflow-hidden
-          rounded-2xl
+          rounded-xl
           border
           border-dropdownMenu-border
           bg-dropdownMenu-background
-          text-listItem-text-default
+          text-listItem-primary-text-default
           shadow-md
           shadow-dropdownMenu-shadow
+          p-[6px]
+          flex 
+          flex-col 
+          gap-[1px]
         `,
         className
       ),
@@ -4081,13 +4088,17 @@ var DropdownMenuContent = React25.forwardRef(({ className, sideOffset = 4, porta
           min-w-32
           overflow-y-auto
           overflow-x-hidden
-          rounded-2xl
+          rounded-xl
           border
           border-dropdownMenu-border
           bg-dropdownMenu-background
-          text-listItem-text-default
+          text-listItem-primary-text-default
           shadow-md
           shadow-dropdownMenu-shadow
+          p-[6px]
+          flex 
+          flex-col 
+          gap-[1px]
         `,
         className
       ),
@@ -4096,32 +4107,58 @@ var DropdownMenuContent = React25.forwardRef(({ className, sideOffset = 4, porta
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React25.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var dropdownMenuItemVariantsConfig = cva(
+  `
+    relative
+    flex
+    cursor-pointer
+    select-none
+    items-center
+    gap-2
+    px-2
+    h-9
+    text-sm
+    outline-none
+    transition-colors
+    duration-150 
+    ease-out
+    active:font-semibold
+    data-[disabled]:pointer-events-none
+    data-[disabled]:opacity-50
+    [&>svg]:size-4
+    [&>svg]:shrink-0
+    rounded-lg
+  `,
+  {
+    variants: {
+      variant: {
+        primary: `
+          text-listItem-primary-text-default
+          focus:bg-listItem-primary-background-hover
+          focus:text-listItem-primary-text-hover
+          active:bg-listItem-primary-background-selected
+          active:text-listItem-primary-text-selected
+        `,
+        danger: `
+          text-listItem-danger-text-default
+          focus:bg-listItem-danger-background-hover
+          focus:text-listItem-danger-text-hover
+          active:bg-listItem-danger-background-selected
+          active:text-listItem-danger-text-selected
+        `
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
+var DropdownMenuItem = React25.forwardRef(({ className, inset, variant: variant3 = "primary", ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
     className: cn(
-      `
-        relative
-        flex
-        cursor-pointer
-        select-none
-        items-center
-        gap-2
-        px-4
-        h-11
-        text-sm
-        outline-none
-        transition-colors
-        active:text-listItem-text-selected
-        active:font-semibold
-        active:bg-listItem-background-default
-        focus:bg-listItem-background-hover
-        data-[disabled]:pointer-events-none
-        data-[disabled]:opacity-50
-        [&>svg]:size-4
-        [&>svg]:shrink-0
-      `,
+      dropdownMenuItemVariantsConfig({ variant: variant3 }),
       inset && "pl-8",
       className
     ),
@@ -4140,21 +4177,25 @@ var DropdownMenuCheckboxItem = React25.forwardRef(({ className, children, checke
         cursor-pointer
         select-none
         items-center
-        h-11
+        h-9
         pl-10
         pr-4
-        text-listItem-text-default
+        text-listItem-primary-text-default
+        text-sm
         outline-none
         transition-colors
+        duration-150 
+        ease-out
         font-normal
-        active:text-listItem-text-selected
+        active:text-listItem-primary-text-selected
         active:font-semibold
-        active:bg-listItem-background-default
-        focus:bg-listItem-background-hover
+        active:bg-listItem-primary-background-default
+        focus:bg-listItem-primary-background-hover
         data-[disabled]:pointer-events-none
         data-[disabled]:opacity-50
         data-[state=checked]:font-semibold
-        data-[state=checked]:text-listItem-text-selected
+        data-[state=checked]:text-listItem-primary-text-selected
+        rounded-lg
        `,
       className
     ),
@@ -4178,26 +4219,30 @@ var DropdownMenuRadioItem = React25.forwardRef(({ className, children, ...props
         cursor-pointer
         select-none
         items-center
-        h-11
+        h-9
         pl-8
         pr-2
-        text-listItem-text-default
+        text-sm
+        text-listItem-primary-text-default
         outline-none
         transition-colors
-        active:text-listItem-text-selected
+        duration-150 
+        ease-out
+        active:text-listItem-primary-text-selected
         active:font-semibold
-        active:bg-listItem-background-default
-        focus:bg-listItem-background-hover
+        active:bg-listItem-primary-background-default
+        focus:bg-listItem-primary-background-hover
         data-[disabled]:pointer-events-none
         data-[disabled]:opacity-50
         data-[state=checked]:font-semibold
-        data-[state=checked]:text-listItem-text-selected
+        data-[state=checked]:text-listItem-primary-text-selected
+        rounded-lg
       `,
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { className: "nebula-ds absolute left-4 flex h-11 w-2 items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "nebula-ds h-2 w-2 fill-current" }) }),
+      /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { className: "nebula-ds absolute left-4 flex h-9 w-1.5 items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "nebula-ds h-1.5 w-1.5 fill-current" }) }),
       children
     ]
   }
@@ -4209,12 +4254,12 @@ var DropdownMenuLabel = React25.forwardRef(({ className, inset, ...props }, ref)
     ref,
     className: cn(
       `
-        px-4
-        h-8
+        px-2
+        h-6
         flex
         items-center
         text-sm
-        text-listItem-text-header
+        text-listItem-primary-text-header
       `,
       inset && "pl-8",
       className
@@ -4232,6 +4277,7 @@ var DropdownMenuSeparator = React25.forwardRef(({ className, ...props }, ref) =>
         -mx-1
         h-px
         bg-dropdownMenu-border
+        my-[6px]
       `,
       className
     ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "1.6.0-beta.5",
+  "version": "1.7.0-beta.1",
   "description": "React components for Nebula Design System",
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.0",
     "@ikatec/eslint-config": "*",
-    "@ikatec/nebula-tokens": "1.5.0-beta.3",
+    "@ikatec/nebula-tokens": "1.6.0-beta.1",
     "@ikatec/typescript-config": "*",
     "ts-node": "^10.9.2",
     "tsup": "^8.3.5",