bmj-ui 1.0.16 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bmj-ui",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Headless component library meticulously crafted for rapid dashboard development. Professional, polished, and ready for production.",
   "license": "ISC",
   "author": "",

package/src/components/ThemeToggle.tsx

@@ -34,9 +34,9 @@ export function ThemeToggle({ className }: { className?: string }) {
       aria-label="Toggle theme"
     >
       {theme === "light" ? (
-        <Moon className="w-5 h-5 transition-all" />
+        <Moon className="bmj-theme-toggle-icon" />
       ) : (
-        <Sun className="w-5 h-5 transition-all" />
+        <Sun className="bmj-theme-toggle-icon" />
       )}
     </Button>
   );

package/src/components/bmj-ui/AppSidebar.tsx

@@ -52,7 +52,7 @@ export default function AppSidebar({
   const isCollapsed = state === "collapsed";
 
   return (
-    <Sidebar variant="inset" collapsible="icon">
+    <Sidebar variant="sidebar" collapsible="icon">
       <SidebarHeader className="bmj-sidebar-header">
         <div className="bmj-sidebar-logo-container">
           <div className="bmj-sidebar-logo-box">B</div>
@@ -63,7 +63,7 @@ export default function AppSidebar({
                 animate={{ opacity: 1, x: 0 }}
                 exit={{ opacity: 0, x: -10 }}
                 transition={{ duration: 0.2 }}
-                className="whitespace-nowrap"
+                className="bmj-sidebar-logo-text"
               >
                 BMJ UI
               </motion.span>
@@ -99,9 +99,9 @@ export default function AppSidebar({
                     render={
                       <button
                         type="button"
-                        className="flex items-center w-full"
+                        className="bmj-sidebar-menu-button-inner"
                       >
-                        <item.icon className="shrink-0" />
+                        <item.icon className="bmj-sidebar-menu-icon" />
                         <AnimatePresence mode="wait">
                           {!isCollapsed && (
                             <motion.span
@@ -113,7 +113,7 @@ export default function AppSidebar({
                               }}
                               exit={{ opacity: 0, width: 0, marginLeft: 0 }}
                               transition={{ duration: 0.2 }}
-                              className="overflow-hidden whitespace-nowrap"
+                              className="bmj-sidebar-menu-text"
                             >
                               {item.title}
                             </motion.span>
@@ -140,8 +140,8 @@ export default function AppSidebar({
                 transition={{ duration: 0.2 }}
                 className="bmj-sidebar-user-info"
               >
-                <span className="text-sm font-medium">Bahry Jarbou</span>
-                <span className="text-xs text-muted-foreground">Admin</span>
+                <span className="bmj-sidebar-user-name">Bahry Jarbou</span>
+                <span className="bmj-sidebar-user-role">Admin</span>
               </motion.div>
             )}
           </AnimatePresence>

package/src/components/bmj-ui/ChartCard.tsx

@@ -36,6 +36,18 @@ interface ChartCardProps {
   type?: "area" | "bar" | "line" | "scatter";
 }
 
+interface ChartCardProps {
+  title: string;
+  description?: string;
+  data: any[];
+  dataKey: string;
+  categoryKey: string;
+  color?: string;
+  className?: string;
+  loading?: boolean;
+  type?: "area" | "bar" | "line" | "scatter";
+}
+
 export default function ChartCard({
   title,
   description,
@@ -51,11 +63,11 @@ export default function ChartCard({
     return (
       <Card className={cn("bmj-chart-card", className)}>
         <CardHeader>
-          <Skeleton className="h-6 w-40 mb-2" />
-          <Skeleton className="h-4 w-64" />
+          <Skeleton className="bmj-chart-card-skeleton-title" />
+          <Skeleton className="bmj-chart-card-skeleton-desc" />
         </CardHeader>
         <CardContent className="bmj-chart-content">
-          <Skeleton className="h-full w-full rounded-lg" />
+          <Skeleton className="bmj-chart-card-skeleton-chart" />
         </CardContent>
       </Card>
     );
@@ -191,7 +203,7 @@ export default function ChartCard({
   return (
     <Card className={cn("bmj-chart-card", className)}>
       <CardHeader>
-        <CardTitle className="text-lg font-semibold">{title}</CardTitle>
+        <CardTitle className="bmj-chart-card-title">{title}</CardTitle>
         {description && <CardDescription>{description}</CardDescription>}
       </CardHeader>
       <CardContent className="bmj-chart-content">

package/src/components/bmj-ui/DashboardLayout.tsx

@@ -10,6 +10,13 @@ interface DashboardLayoutProps {
   activeSidebarItem?: string;
 }
 
+interface DashboardLayoutProps {
+  children: React.ReactNode;
+  sidebarItems?: SidebarItem[];
+  onSidebarItemClick?: (title: string) => void;
+  activeSidebarItem?: string;
+}
+
 export default function DashboardLayout({
   children,
   sidebarItems,
@@ -23,7 +30,7 @@ export default function DashboardLayout({
         onItemClick={onSidebarItemClick}
         activeItem={activeSidebarItem}
       />
-      <SidebarInset className="flex flex-col">
+      <SidebarInset className="bmj-dashboard-inset">
         <Topbar />
         <main className="bmj-dashboard-main">{children}</main>
       </SidebarInset>

package/src/components/bmj-ui/StatCard.tsx

@@ -18,6 +18,19 @@ interface StatCardProps {
   loading?: boolean;
 }
 
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  description?: string;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+  icon?: LucideIcon;
+  className?: string;
+  loading?: boolean;
+}
+
 export default function StatCard({
   title,
   value,
@@ -31,12 +44,12 @@ export default function StatCard({
     return (
       <Card className={cn("bmj-stat-card", className)}>
         <CardHeader className="bmj-stat-card-header">
-          <Skeleton className="h-4 w-24" />
-          <Skeleton className="h-4 w-4 rounded-full" />
+          <Skeleton className="bmj-stat-card-skeleton-title" />
+          <Skeleton className="bmj-stat-card-skeleton-icon" />
         </CardHeader>
-        <CardContent className="space-y-2">
-          <Skeleton className="h-8 w-32" />
-          <Skeleton className="h-3 w-40" />
+        <CardContent className="bmj-stat-card-skeleton-content">
+          <Skeleton className="bmj-stat-card-skeleton-value" />
+          <Skeleton className="bmj-stat-card-skeleton-desc" />
         </CardContent>
       </Card>
     );
@@ -67,9 +80,9 @@ export default function StatCard({
                   )}
                 >
                   {trend.isPositive ? (
-                    <TrendingUp className="w-3 h-3 mr-1" />
+                    <TrendingUp className="bmj-stat-card-trend-icon" />
                   ) : (
-                    <TrendingDown className="w-3 h-3 mr-1" />
+                    <TrendingDown className="bmj-stat-card-trend-icon" />
                   )}
                   {trend.value}%
                 </span>

package/src/components/bmj-ui/Topbar.tsx

@@ -41,46 +41,61 @@ export default function Topbar() {
             className="bmj-topbar-search-input"
           />
         </div>
-        <Button variant="ghost" size="icon" className="md:hidden">
-          <Search className="w-5 h-5" />
+        <Button
+          variant="ghost"
+          size="icon"
+          className="bmj-topbar-mobile-search-trigger"
+        >
+          <Search className="bmj-topbar-icon" />
         </Button>
       </div>
 
       <div className="bmj-topbar-right">
-        <div className="hidden xs:block">
+        <div className="bmj-topbar-theme-toggle-container">
           <ThemeToggle />
         </div>
-        <Button variant="ghost" size="icon" className="relative">
-          <Bell className="w-5 h-5" />
+        <Button
+          variant="ghost"
+          size="icon"
+          className="bmj-topbar-notification-button"
+        >
+          <Bell className="bmj-topbar-icon" />
           <span className="bmj-topbar-notification-dot" />
         </Button>
 
         <DropdownMenu>
           <DropdownMenuTrigger
             render={
-              <Button variant="ghost" size="icon" className="rounded-full" />
+              <Button
+                variant="ghost"
+                size="icon"
+                className="bmj-topbar-user-button"
+              />
             }
           >
-            <User className="w-5 h-5" />
+            <User className="bmj-topbar-icon" />
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
+          <DropdownMenuContent
+            align="end"
+            className="bmj-topbar-dropdown-content"
+          >
             <DropdownMenuGroup>
               <DropdownMenuLabel>My Account</DropdownMenuLabel>
               <DropdownMenuSeparator />
               <DropdownMenuItem onClick={() => handleItemClick("Profile")}>
-                <User className="mr-2 h-4 w-4" />
+                <User className="bmj-topbar-menu-icon" />
                 <span>Profile</span>
               </DropdownMenuItem>
               <DropdownMenuItem onClick={() => handleItemClick("Billing")}>
-                <CreditCard className="mr-2 h-4 w-4" />
+                <CreditCard className="bmj-topbar-menu-icon" />
                 <span>Billing</span>
               </DropdownMenuItem>
               <DropdownMenuItem onClick={() => handleItemClick("Team")}>
-                <Users className="mr-2 h-4 w-4" />
+                <Users className="bmj-topbar-menu-icon" />
                 <span>Team</span>
               </DropdownMenuItem>
               <DropdownMenuItem onClick={() => handleItemClick("Subscription")}>
-                <Zap className="mr-2 h-4 w-4" />
+                <Zap className="bmj-topbar-menu-icon" />
                 <span>Subscription</span>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
@@ -88,7 +103,7 @@ export default function Topbar() {
                 variant="destructive"
                 onClick={() => handleItemClick("Log out")}
               >
-                <LogOut className="mr-2 h-4 w-4" />
+                <LogOut className="bmj-topbar-menu-icon" />
                 <span>Log out</span>
               </DropdownMenuItem>
             </DropdownMenuGroup>

package/src/components/ui/dialog.tsx

@@ -59,13 +59,13 @@ function DialogContent({
             render={
               <Button
                 variant="ghost"
-                className="absolute top-2 right-2"
+                className="ui-dialog-close-button"
                 size="icon-sm"
               />
             }
           >
             <XIcon />
-            <span className="sr-only">Close</span>
+            <span className="ui-sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Popup>

package/src/components/ui/dropdown-menu.tsx

@@ -33,7 +33,7 @@ function DropdownMenuContent({
   return (
     <MenuPrimitive.Portal>
       <MenuPrimitive.Positioner
-        className="isolate z-50 outline-none"
+        className="ui-dropdown-menu-positioner"
         align={align}
         alignOffset={alignOffset}
         side={side}
@@ -110,7 +110,7 @@ function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto" />
+      <ChevronRightIcon className="ui-dropdown-menu-sub-trigger-icon" />
     </MenuPrimitive.SubmenuTrigger>
   );
 }
@@ -154,7 +154,7 @@ function DropdownMenuCheckboxItem({
       {...props}
     >
       <span
-        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        className="ui-dropdown-menu-indicator"
         data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <MenuPrimitive.CheckboxItemIndicator>
@@ -191,7 +191,7 @@ function DropdownMenuRadioItem({
       {...props}
     >
       <span
-        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        className="ui-dropdown-menu-indicator"
         data-slot="dropdown-menu-radio-item-indicator"
       >
         <MenuPrimitive.RadioItemIndicator>

package/src/components/ui/scroll-area.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
 
 import { cn } from "../../lib/utils";
@@ -11,7 +10,7 @@ function ScrollArea({
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
-      className={cn("relative", className)}
+      className={cn("ui-scroll-area", className)}
       {...props}
     >
       <ScrollAreaPrimitive.Viewport

package/src/components/ui/select.tsx

@@ -43,9 +43,7 @@ function SelectTrigger({
     >
       {children}
       <SelectPrimitive.Icon
-        render={
-          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
-        }
+        render={<ChevronDownIcon className="ui-select-icon" />}
       />
     </SelectPrimitive.Trigger>
   );
@@ -73,7 +71,7 @@ function SelectContent({
         align={align}
         alignOffset={alignOffset}
         alignItemWithTrigger={alignItemWithTrigger}
-        className="isolate z-50"
+        className="ui-select-positioner"
       >
         <SelectPrimitive.Popup
           data-slot="select-content"
@@ -114,15 +112,13 @@ function SelectItem({
       className={cn("ui-select-item", className)}
       {...props}
     >
-      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+      <SelectPrimitive.ItemText className="ui-select-item-text">
         {children}
       </SelectPrimitive.ItemText>
       <SelectPrimitive.ItemIndicator
-        render={
-          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
-        }
+        render={<span className="ui-select-item-indicator" />}
       >
-        <CheckIcon className="pointer-events-none" />
+        <CheckIcon className="ui-select-check-icon" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   );

package/src/components/ui/sheet.tsx

@@ -57,13 +57,13 @@ function SheetContent({
             render={
               <Button
                 variant="ghost"
-                className="absolute top-3 right-3"
+                className="ui-sheet-close-button"
                 size="icon-sm"
               />
             }
           >
             <XIcon />
-            <span className="sr-only">Close</span>
+            <span className="ui-sr-only">Close</span>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Popup>

package/src/components/ui/sidebar.tsx

@@ -185,11 +185,11 @@ function Sidebar({
           }
           side={side}
         >
-          <SheetHeader className="sr-only">
+          <SheetHeader className="ui-sr-only">
             <SheetTitle>Sidebar</SheetTitle>
             <SheetDescription>Displays the mobile sidebar.</SheetDescription>
           </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
+          <div className="ui-sidebar-mobile-content">{children}</div>
         </SheetContent>
       </Sheet>
     );
@@ -197,7 +197,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer hidden text-sidebar-foreground md:block"
+      className={cn("group peer ui-sidebar-desktop-wrapper", className)}
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -210,8 +210,8 @@ function Sidebar({
         className={cn(
           "ui-sidebar-gap",
           variant === "floating" || variant === "inset"
-            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+            ? "ui-sidebar-gap-floating"
+            : "ui-sidebar-gap-default",
         )}
       />
       <div
@@ -221,8 +221,8 @@ function Sidebar({
           "ui-sidebar-container",
           // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
-            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            ? "ui-sidebar-container-floating"
+            : "ui-sidebar-container-default",
           className,
         )}
         {...props}
@@ -260,7 +260,7 @@ function SidebarTrigger({
       {...props}
     >
       <PanelLeftIcon />
-      <span className="sr-only">Toggle Sidebar</span>
+      <span className="ui-sr-only">Toggle Sidebar</span>
     </Button>
   );
 }
@@ -446,13 +446,12 @@ const sidebarMenuButtonVariants = cva("ui-sidebar-menu-button", {
   variants: {
     variant: {
       default: "",
-      outline:
-        "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      outline: "ui-sidebar-menu-button-outline",
     },
     size: {
-      default: "h-8 text-sm",
-      sm: "h-7 text-xs",
-      lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      default: "ui-sidebar-menu-button-size-default",
+      sm: "ui-sidebar-menu-button-size-sm",
+      lg: "ui-sidebar-menu-button-size-lg",
     },
   },
   defaultVariants: {
@@ -530,8 +529,7 @@ function SidebarMenuAction({
       {
         className: cn(
           "ui-sidebar-menu-action",
-          showOnHover &&
-            "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+          showOnHover && "ui-sidebar-menu-action-hover",
           className,
         ),
       },
@@ -580,12 +578,12 @@ function SidebarMenuSkeleton({
     >
       {showIcon && (
         <Skeleton
-          className="size-4 rounded-md"
+          className="ui-sidebar-menu-skeleton-icon"
           data-sidebar="menu-skeleton-icon"
         />
       )}
       <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
+        className="ui-sidebar-menu-skeleton-text"
         data-sidebar="menu-skeleton-text"
         style={
           {