myoperator-ui 0.0.72 → 0.0.74

package/README.md

@@ -143,19 +143,19 @@ npx myoperator-ui update --help
 
 | Component | Description |
 |-----------|-------------|
-| `badge` | Status badge with active, failed, and disabled variants |
-| `button` | Customizable button with variants, sizes, icons, and loading state |
-| `checkbox` | Tri-state checkbox component with label support (checked, unchecked, indeterminate) |
-| `collapsible` | Expandable/collapsible section component with single or multiple mode support |
+| `accordion` | Expandable/collapsible accordion component with single or multiple mode support |
+| `badge` | Status badge with active, failed, disabled, outline, secondary, destructive variants and asChild support |
+| `button` | Customizable button with variants, sizes (including icon-lg), icons, and loading state |
+| `checkbox` | Tri-state checkbox built on Radix UI with label support (checked, unchecked, indeterminate) |
 | `dropdown-menu` | Dropdown menu for displaying actions and options |
 | `input` | Basic input component |
 | `multi-select` | Multi-select dropdown with search, tags, and keyboard navigation |
 | `select` | Single select dropdown component |
 | `select-field` | Select field with label, helper text, and validation states |
+| `switch` | Switch component built on Radix UI for boolean inputs with on/off states |
 | `table` | Composable table with size variants, loading/empty states, sticky columns |
 | `tag` | Tag component for event labels with optional bold label prefix |
 | `text-field` | Text input with label, icons, prefix/suffix, validation states, and character count |
-| `toggle` | Toggle/switch component for boolean inputs with on/off states |
 
 ## Configuration
 

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.72",
+  "version": "0.0.74",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",