@machinemetrics/mm-react-components 1.1.0 → 1.1.1-1

package/CHANGELOG.md

@@ -5,7 +5,35 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.0] - 2025-02-04
+## [1.1.1] - 2026-02-17
+
+### Added
+
+- **Badge `shape` prop:** Use `shape="pill"` for compact rounded pill badges (e.g. counts) instead of custom classes. Combines with all variants: `<Badge shape="pill" variant="secondary">12</Badge>`.
+
+### Fixed
+
+- **Badge formatting / colors:** Badge `secondary` and `outline` variants now have explicit Carbide theme rules in `carbide.css`. Previously only `default` and `destructive` were themed; secondary/outline relied on Tailwind utilities and could lose colors or contrast when consumers used theme-only CSS or misconfigured setup. All four variants now use theme-driven background, text, and border.
+- **Alert formatting / colors:** Alert `default` and `destructive` variants now have explicit Carbide theme rules in `carbide.css`. Previously only `success` and `warning` were themed; default/destructive relied on Tailwind utilities. All four Alert variants (default, destructive, success, warning) are now theme-driven.
+- **Alert variant type:** Alert `variant` prop now correctly accepts `"success"` and `"warning"` in TypeScript (previously narrowed to `default` | `destructive` when intersecting with base component props).
+
+### Changed
+
+- Badge preview uses `shape="pill"` and shows all four variants in pill form.
+- Alert preview shows all four variants (default, destructive, success, warning).
+- Skill and agent-docs: reference and init guides now note that Badge (and themed components) require the library styles import and a parent with class `carbide` for correct colors and contrast.
+
+---
+
+## [1.1.0] - 2026-02-13
+
+### Added
+
+- **VirtualizedCombobox:** Popover + Command + ScrollArea combobox with `useLazyComboboxOptions` (lazy load on open, infinite scroll, debounced search).
+
+---
+
+## [1.0.0] - 2026-02-04
 
 Summary of changes from v0.2.x (main) to 1.0: full shadcn component set, one-command init, Carbide AI skill, zero-config default, and package/docs cleanup.
 

package/agent-docs/agent-documentation-reference.md

@@ -52,7 +52,8 @@ This directory contains comprehensive documentation and tools for AI agents work
 
 | Component      | Exports                                                                                                                           | Description                               |
 | -------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
-| **Card**       | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`                                                 | Content container with sections           |
+| **Card**       | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`                                                 | Content container with sections (no built-in scroll) |
+| **ScrollArea** | `ScrollArea`, `ScrollBar`                                                                                                         | Scrollable region; use when content can overflow a fixed-height box |
 | **Separator**  | `Separator`                                                                                                                       | Visual divider                            |
 | **Tabs**       | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`                                                                                  | Tabbed interface                          |
 | **Breadcrumb** | `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` | Navigation breadcrumbs                    |
@@ -123,6 +124,43 @@ All components follow shadcn/ui patterns with Carbide theme integration for indu
 
 ## Component Usage Guides
 
+### Scrolling content: Card vs ScrollArea
+
+**There is no "Panel" component.** For a panel-like or card-like region where content may be longer than the visible area, use **ScrollArea** around the scrollable content. **Card** is a structural container (border, padding, sections) and does not add scrolling.
+
+- **Card**: Use for layout and visual grouping (CardHeader, CardTitle, CardContent, CardFooter). Card does not scroll; overflowing content will clip or spill.
+- **ScrollArea**: Use when content can exceed the box height. Give ScrollArea a fixed or max height (e.g. `className="h-[300px]"` or `max-h-[50vh]`) and put the long content inside it.
+
+**Pattern for a scrollable card/panel:**
+
+```tsx
+import { Card, CardHeader, CardTitle, CardContent, ScrollArea } from '@machinemetrics/mm-react-components';
+
+<Card className="flex max-h-[80vh] flex-col">
+  <CardHeader>
+    <CardTitle>Panel title</CardTitle>
+  </CardHeader>
+  <ScrollArea className="flex-1 min-h-0">
+    <CardContent>
+      {/* Long content here scrolls inside the card */}
+    </CardContent>
+  </ScrollArea>
+</Card>
+```
+
+Or wrap only the body in ScrollArea with a fixed height:
+
+```tsx
+<Card>
+  <CardHeader><CardTitle>Title</CardTitle></CardHeader>
+  <ScrollArea className="h-[200px] rounded-md border">
+    <div className="p-4">{/* long content */}</div>
+  </ScrollArea>
+</Card>
+```
+
+Use ScrollArea for: side panels, detail panels, card bodies with variable/long content, list regions inside dialogs or sheets. Do not rely on Card alone for scroll.
+
 ### DataTable: Server-Side Pagination
 
 The `DataTable` component supports both client-side and server-side pagination. When implementing server-side pagination, use the following pattern:

package/dist/components/ui/alert.d.ts

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 export { AlertTitle, AlertDescription } from '@/components/shadcn/alert';
+import { Alert as BaseAlert } from '@/components/shadcn/alert';
 declare const alertVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const Alert: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type AlertProps = Omit<React.ComponentProps<typeof BaseAlert>, 'variant'> & VariantProps<typeof alertVariants>;
+declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Alert, alertVariants };
 //# sourceMappingURL=alert.d.ts.map

package/dist/components/ui/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAOzE,QAAA,MAAM,aAAa;;8EAiBlB,CAAC;AAGF,QAAA,MAAM,KAAK;;;;8HAcT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAGzE,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAI/D,QAAA,MAAM,aAAa;;8EAiBlB,CAAC;AAGF,KAAK,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,SAAS,CAAC,GACvE,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,QAAA,MAAM,KAAK,gGAcV,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/ui/badge.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { Badge as BaseBadge } from '@/components/shadcn/badge';
 declare const badgeVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    shape?: "default" | "pill" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const Badge: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & import("class-variance-authority").VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-    asChild?: boolean;
-}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+type BadgeProps = React.ComponentProps<typeof BaseBadge> & VariantProps<typeof badgeVariants>;
+declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Badge, badgeVariants };
 //# sourceMappingURL=badge.d.ts.map

package/dist/components/ui/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,QAAA,MAAM,aAAa;;8EAoBlB,CAAC;AAGF,QAAA,MAAM,KAAK;;;;iDAeT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAK/D,QAAA,MAAM,aAAa;;;8EAyBlB,CAAC;AAGF,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GACtD,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,QAAA,MAAM,KAAK,iGAoBV,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG5D,QAAA,MAAM,MAAM;;;;;mDAeV,CAAC;AAIH,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG5D,QAAA,MAAM,MAAM;;;;;mDAiBV,CAAC;AAIH,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/ui/menubar.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
-export { MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, } from '@/components/shadcn/menubar';
+export { MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, } from '@/components/shadcn/menubar';
+declare const MenubarItem: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarItemProps & React.RefAttributes<HTMLDivElement> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const Menubar: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Menubar };
+export { Menubar, MenubarItem };
 //# sourceMappingURL=menubar.d.ts.map

package/dist/components/ui/menubar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/menubar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EACL,aAAa,EACb,WAAW,EACX,cAAc,EACd,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,6BAA6B,CAAC;AAGrC,QAAA,MAAM,OAAO,0KAKX,CAAC;AAIH,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/menubar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EACL,aAAa,EACb,WAAW,EACX,cAAc,EACd,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,6BAA6B,CAAC;AAGrC,QAAA,MAAM,WAAW;;;gDAKf,CAAC;AAIH,QAAA,MAAM,OAAO,0KAKX,CAAC;AAIH,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ui/toggle-group.d.ts

@@ -1,2 +1,6 @@
-export { ToggleGroup, ToggleGroupItem } from '@/components/shadcn/toggle-group';
+import * as React from 'react';
+import { ToggleGroup as BaseToggleGroup, ToggleGroupItem as BaseToggleGroupItem } from '@/components/shadcn/toggle-group';
+declare function ToggleGroup({ variant, size, ...props }: React.ComponentProps<typeof BaseToggleGroup>): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItem({ variant, size, ...props }: React.ComponentProps<typeof BaseToggleGroupItem>): import("react/jsx-runtime").JSX.Element;
+export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=toggle-group.d.ts.map

package/dist/components/ui/toggle-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,EACvC,MAAM,kCAAkC,CAAC;AAG1C,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,2CAU9C;AAED,iBAAS,eAAe,CAAC,EACvB,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,2CAUlD;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}

package/dist/cursor-skill/mm-carbide/SKILL.md

@@ -33,6 +33,8 @@ description: Generate UIs and widgets with Carbide and MachineMetrics React Comp
 
 **Avoid:** Hardcoded colors (e.g. `bg-blue-600`, `text-gray-500`); inline brand styling; non-semantic HTML; missing focus or labels on interactive elements.
 
+**Scrolling:** There is no Panel component. For panel-like or card-like regions where content can be longer than the box, use **ScrollArea** with a fixed or max height (e.g. `h-[300px]` or `max-h-[50vh]`) around the scrollable content. Card is for structure only and does not scroll—wrap CardContent (or the scrollable body) in ScrollArea when content may overflow.
+
 ## Widget rules
 
 - **Visual, not textual**: Every widget must include at least one chart, graph, or visual data representation. Text is for titles, labels, and brief annotations only (80% visuals / 20% text max).

package/dist/cursor-skill/mm-carbide/reference.md

@@ -17,7 +17,7 @@
 
 Import from the package main entry (see `src/index.ts` in the repo for the full list).
 
-**Layout and structure**: PageHeader, Card (CardHeader, CardTitle, CardDescription, CardContent, CardFooter), Tabs (TabsList, TabsTrigger, TabsContent), Sidebar, Breadcrumb, Field (FieldLabel, FieldDescription, FieldError, FieldGroup, etc.), Item (ItemMedia, ItemContent, ItemActions, etc.).
+**Layout and structure**: PageHeader, Card (CardHeader, CardTitle, CardDescription, CardContent, CardFooter), **ScrollArea** (ScrollBar), Tabs (TabsList, TabsTrigger, TabsContent), Sidebar, Breadcrumb, Field (FieldLabel, FieldDescription, FieldError, FieldGroup, etc.), Item (ItemMedia, ItemContent, ItemActions, etc.).
 
 **Overlays and dialogs**: Dialog (DialogTrigger, DialogContent, DialogHeader, DialogFooter, etc.), Sheet, Drawer, AlertDialog, Popover, Tooltip (TooltipTrigger, TooltipContent, TooltipProvider), DropdownMenu, HoverCard, ContextMenu.
 
@@ -27,7 +27,16 @@ Import from the package main entry (see `src/index.ts` in the repo for the full
 
 **Feedback and actions**: Button, buttonVariants, ButtonGroup; Toaster, toast; Alert, AlertTitle, AlertDescription; Spinner, SpinnerCarbide; Pagination, SimplePagination; Empty (EmptyHeader, EmptyTitle, EmptyDescription, etc.).
 
-**Other**: Accordion, Collapsible, Separator, ScrollArea, Dropzone, ResizablePanelGroup, Carousel, Command, CodePreview, Kbd, cn (utility). Theme: activateCarbideTheme, toggleCarbideTheme, isCarbideThemeActive, etc.
+**Other**: Accordion, Collapsible, Separator, Dropzone, ResizablePanelGroup, Carousel, Command, CodePreview, Kbd, cn (utility). Theme: activateCarbideTheme, toggleCarbideTheme, isCarbideThemeActive, etc.
+
+## Scrolling: Card vs ScrollArea
+
+There is no "Panel" component. For panel-like or card-like regions where content may be longer than the visible area, use **ScrollArea** for the scrollable region. **Card** is structure only (border, sections) and does not scroll.
+
+- Use **ScrollArea** with a fixed or max height (e.g. `className="h-[300px]"` or `max-h-[50vh]`) when content can overflow.
+- Put long content inside ScrollArea; use Card for the outer container and ScrollArea inside CardContent (or as the body) when the body should scroll.
+
+Example: scrollable card body — wrap the body in ScrollArea with a height so the card doesn’t grow past the viewport; the content inside scrolls.
 
 ## Patterns