myoperator-ui 0.0.73 → 0.0.74

package/dist/index.js

@@ -226,6 +226,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-[#343E55] text-white hover:bg-[#343E55]/90",
+        primary: "bg-[#343E55] text-white hover:bg-[#343E55]/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
@@ -356,6 +357,7 @@ const badgeVariants = cva(
         failed: "bg-[#FFECEC] text-[#FF3B3B]",
         disabled: "bg-[#F3F5F6] text-[#6B7280]",
         default: "bg-[#F3F5F6] text-[#333333]",
+        primary: "bg-[#F3F5F6] text-[#333333]",
         // shadcn-style variants (new)
         secondary: "bg-[#F3F4F6] text-[#333333]",
         outline: "border border-[#E5E7EB] bg-transparent text-[#333333]",
@@ -382,6 +384,8 @@ const badgeVariants = cva(
  * <Badge variant="active">Active</Badge>
  * <Badge variant="failed">Failed</Badge>
  * <Badge variant="disabled">Disabled</Badge>
+ * <Badge variant="default">Default</Badge>
+ * <Badge variant="primary">Primary</Badge>
  * <Badge variant="outline">Outline</Badge>
  * <Badge variant="secondary">Secondary</Badge>
  * <Badge variant="destructive">Destructive</Badge>
@@ -2590,11 +2594,13 @@ const tagVariants = cva(
     variants: {
       variant: {
         default: "bg-[#F3F4F6] text-[#333333]",
-        primary: "bg-[#343E55]/10 text-[#343E55]",
+        primary: "bg-[#F3F4F6] text-[#333333]",
+        accent: "bg-[#343E55]/10 text-[#343E55]",
         secondary: "bg-[#E5E7EB] text-[#374151]",
         success: "bg-[#E5FFF5] text-[#00A651]",
         warning: "bg-[#FFF8E5] text-[#F59E0B]",
         error: "bg-[#FFECEC] text-[#FF3B3B]",
+        destructive: "bg-[#FFECEC] text-[#FF3B3B]",
       },
       size: {
         default: "px-2 py-1",
@@ -3216,16 +3222,14 @@ export const EventSelector = React.forwardRef<HTMLDivElement, EventSelectorProps
                   )}
                 </div>
                 {/* Category Groups */}
-                <div className="p-4 space-y-3 bg-[#F9FAFB]">
+                <div className="divide-y divide-[#E5E7EB]">
                   {renderGroups(categoryGroups)}
                 </div>
               </div>
             )
           })}
           {/* Render orphan groups outside categories */}
-          {orphanGroups.length > 0 && (
-            <div className="space-y-3">{renderGroups(orphanGroups)}</div>
-          )}
+          {orphanGroups.length > 0 && renderGroups(orphanGroups)}
         </>
       )
     }
@@ -3250,7 +3254,9 @@ export const EventSelector = React.forwardRef<HTMLDivElement, EventSelectorProps
         </div>
 
         {/* Groups */}
-        <div className="space-y-3">{renderCategories()}</div>
+        <div className="border border-[#E5E7EB] rounded-lg overflow-hidden divide-y divide-[#E5E7EB]">
+          {renderCategories()}
+        </div>
       </div>
     )
   }
@@ -3334,17 +3340,47 @@ export const EventGroupComponent = React.forwardRef<
       }
     }
 
+    // Single event in group: render as flat item (no accordion)
+    if (events.length === 1) {
+      const event = events[0]
+      const isSelected = selectedEvents.includes(event.id)
+
+      return (
+        <div
+          ref={ref}
+          className={cn("bg-white p-4", className)}
+          {...props}
+        >
+          <div className="flex items-start gap-3">
+            <Checkbox
+              checked={isSelected}
+              onCheckedChange={(checked) =>
+                handleEventSelection(event.id, checked === true)
+              }
+              aria-label={\`Select \${event.name}\`}
+              className="mt-0.5"
+            />
+            <div className="flex-1 min-w-0">
+              <span className="font-medium text-[#333333]">{event.name}</span>
+              <p className="text-sm text-[#6B7280] mt-0.5">{event.description}</p>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    // Multiple events: render as collapsible accordion
     return (
       <div
         ref={ref}
-        className={cn("bg-[#F9FAFB] rounded-lg", className)}
+        className={cn("bg-white", className)}
         {...props}
       >
         <Accordion type="multiple">
           <AccordionItem value={group.id}>
             <AccordionTrigger
               showChevron={true}
-              className="w-full p-4 hover:bg-[#F3F4F6] rounded-lg"
+              className="w-full p-4 hover:bg-[#F9FAFB]"
             >
               <div className="flex items-center gap-3 flex-1">
                 <Checkbox

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",