@mbao01/common 0.6.3 → 0.6.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.6.3",
+  "version": "0.6.4",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -168,5 +168,5 @@
     "recharts": "2",
     "typescript": "5"
   },
-  "gitHead": "de45dbee958479f770fa71c2656a1b230fe86cdb"
+  "gitHead": "10397a5f4ed4e27e07ed9039ac964c17717dec3d"
 }

package/src/components/Sidebar/constants.ts

@@ -115,12 +115,12 @@ export const getSidebarProviderClasses = cva(
 export const getSidebarGroupClasses = cva("relative flex w-full min-w-0 flex-col p-2");
 
 export const getSidebarGroupLabelClasses = cva([
-  "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+  "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&]:**:data-[sidebar-icon]:size-4 [&]:**:data-[sidebar-icon]:shrink-0",
   "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
 ]);
 
 export const getSidebarGroupActionClasses = cva([
-  "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+  "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&]:**:data-[sidebar-icon]:size-4 [&]:**:data-[sidebar-icon]:shrink-0",
   // Increases the hit area of the button on mobile.
   "after:absolute after:-inset-2 md:after:hidden",
   "group-data-[collapsible=icon]:hidden",
@@ -133,7 +133,7 @@ export const getSidebarMenuClasses = cva("flex w-full min-w-0 flex-col gap-1");
 export const getSidebarMenuItemClasses = cva("group/menu-item relative");
 
 export const getSidebarMenuButtonClasses = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&]:**:data-[sidebar-icon]:size-4 [&]:**:data-[sidebar-icon]:shrink-0",
   {
     variants: createVariants({
       outline: {
@@ -163,7 +163,7 @@ export const getSidebarMenuButtonClasses = cva(
 
 export const getSidebarMenuActionClasses = cva(
   [
-    "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+    "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&]:**:data-[sidebar-icon]:size-4 [&]:**:data-[sidebar-icon]:shrink-0",
     // Increases the hit area of the button on mobile.
     "after:absolute after:-inset-2 md:after:hidden",
     "peer-data-[size=sm]/menu-button:top-1",
@@ -198,7 +198,7 @@ export const getSidebarMenuSubClasses = cva([
 
 export const getSidebarMenuSubItemClasses = cva(
   [
-    "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+    "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&]:**:data-[sidebar-icon]:size-4 [&]:**:data-[sidebar-icon]:shrink-0",
     "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
     "group-data-[collapsible=icon]:hidden",
   ],

package/src/components/Sidebar/stories/examples/components/AppSidebar.tsx

@@ -1,22 +1,22 @@
 import {
-  AudioWaveform,
-  BookOpen,
-  Bot,
-  ChevronRight,
-  Command,
-  File,
-  Folder,
-  Frame,
-  GalleryVerticalEnd,
-  Map,
-  Minus,
-  MoreHorizontal,
-  PieChart,
-  Plus,
-  Settings2,
-  Share,
-  SquareTerminal,
-  Trash2,
+  AudioWaveformIcon,
+  BookOpenIcon,
+  BotIcon,
+  ChevronRightIcon,
+  CommandIcon,
+  FileIcon,
+  FolderIcon,
+  FrameIcon,
+  GalleryVerticalEndIcon,
+  MapIcon,
+  MinusIcon,
+  MoreHorizontalIcon,
+  PieChartIcon,
+  PlusIcon,
+  Settings2Icon,
+  ShareIcon,
+  SquareTerminalIcon,
+  Trash2Icon,
 } from "lucide-react";
 import { Collapsible } from "../../../../Collapsible";
 import { DropdownMenu } from "../../../../Menu";
@@ -39,17 +39,17 @@ const data = {
   teams: [
     {
       name: "Acme Inc",
-      logo: GalleryVerticalEnd,
+      logo: GalleryVerticalEndIcon,
       plan: "Enterprise",
     },
     {
       name: "Acme Corp.",
-      logo: AudioWaveform,
+      logo: AudioWaveformIcon,
       plan: "Startup",
     },
     {
       name: "Evil Corp.",
-      logo: Command,
+      logo: CommandIcon,
       plan: "Free",
     },
   ],
@@ -57,7 +57,7 @@ const data = {
     {
       title: "Playground",
       url: "#",
-      icon: SquareTerminal,
+      icon: SquareTerminalIcon,
       isActive: true,
       items: [
         {
@@ -78,7 +78,7 @@ const data = {
     {
       title: "Models",
       url: "#",
-      icon: Bot,
+      icon: BotIcon,
       isActive: false,
       items: [
         {
@@ -98,7 +98,7 @@ const data = {
     {
       title: "Documentation",
       url: "#",
-      icon: BookOpen,
+      icon: BookOpenIcon,
       isActive: false,
       items: [
         {
@@ -122,7 +122,7 @@ const data = {
     {
       title: "Settings",
       url: "#",
-      icon: Settings2,
+      icon: Settings2Icon,
       isActive: false,
       items: [
         {
@@ -148,17 +148,17 @@ const data = {
     {
       name: "Design Engineering",
       url: "#",
-      icon: Frame,
+      icon: FrameIcon,
     },
     {
       name: "Sales & Marketing",
       url: "#",
-      icon: PieChart,
+      icon: PieChartIcon,
     },
     {
       name: "Travel",
       url: "#",
-      icon: Map,
+      icon: MapIcon,
     },
   ],
 };
@@ -217,7 +217,7 @@ export const AppSidebarWithCollapsibleGroup = (props: SidebarProps) => {
               >
                 <Collapsible.Trigger>
                   {item.title}{" "}
-                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  <ChevronRightIcon data-sidebar-icon className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
                 </Collapsible.Trigger>
               </SidebarGroup.Label>
               <Collapsible.Content>
@@ -251,7 +251,7 @@ export const AppSidebarWithSubMenu = (props: SidebarProps) => {
             <SidebarMenu.Button size="lg" asChild>
               <a href="#">
                 <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                  <GalleryVerticalEnd className="size-4" />
+                  <GalleryVerticalEndIcon className="size-4" />
                 </div>
                 <div className="flex flex-col gap-0.5 leading-none">
                   <span className="font-semibold">Documentation</span>
@@ -275,12 +275,12 @@ export const AppSidebarWithSubMenu = (props: SidebarProps) => {
                 <SidebarMenu.Item key={item.title}>
                   <Collapsible.Trigger asChild>
                     <SidebarMenu.Button tooltip={item.title}>
-                      {item.icon && <item.icon />}
+                      {item.icon && <item.icon data-sidebar-icon />}
                       <a href={item.url} className="font-medium">
                         {item.title}
                       </a>
-                      <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
-                      <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                      <PlusIcon data-sidebar-icon className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                      <MinusIcon data-sidebar-icon className="ml-auto group-data-[state=closed]/collapsible:hidden" />
                     </SidebarMenu.Button>
                   </Collapsible.Trigger>
                   <Collapsible.Content>
@@ -318,7 +318,7 @@ export const AppSidebarWithSecondaryNavigation = (props: SidebarProps) => {
             <SidebarMenu.Button size="lg" asChild>
               <a href="#">
                 <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                  <GalleryVerticalEnd className="size-4" />
+                  <GalleryVerticalEndIcon className="size-4" />
                 </div>
                 <div className="flex flex-col gap-0.5 leading-none">
                   <span className="font-semibold">Documentation</span>
@@ -342,12 +342,12 @@ export const AppSidebarWithSecondaryNavigation = (props: SidebarProps) => {
                 <SidebarMenu.Item key={item.title}>
                   <Collapsible.Trigger asChild>
                     <SidebarMenu.Button tooltip={item.title}>
-                      {item.icon && <item.icon />}
+                      {item.icon && <item.icon data-sidebar-icon />}
                       <a href={item.url} className="font-medium">
                         {item.title}
                       </a>
-                      <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
-                      <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                      <PlusIcon data-sidebar-icon className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                      <MinusIcon data-sidebar-icon className="ml-auto group-data-[state=closed]/collapsible:hidden" />
                     </SidebarMenu.Button>
                   </Collapsible.Trigger>
                   <Collapsible.Content>
@@ -376,14 +376,14 @@ export const AppSidebarWithSecondaryNavigation = (props: SidebarProps) => {
               <SidebarMenu.Item key={item.name}>
                 <SidebarMenu.Button asChild>
                   <a href={item.url}>
-                    <item.icon />
+                    <item.icon data-sidebar-icon />
                     <span>{item.name}</span>
                   </a>
                 </SidebarMenu.Button>
                 <DropdownMenu>
                   <DropdownMenu.Trigger asChild>
                     <SidebarMenu.Action showOnHover>
-                      <MoreHorizontal />
+                      <MoreHorizontalIcon data-sidebar-icon />
                       <span className="sr-only">More</span>
                     </SidebarMenu.Action>
                   </DropdownMenu.Trigger>
@@ -393,16 +393,16 @@ export const AppSidebarWithSecondaryNavigation = (props: SidebarProps) => {
                     align={isMobile ? "end" : "start"}
                   >
                     <DropdownMenu.Item>
-                      <Folder className="text-muted-foreground" />
+                      <FolderIcon data-sidebar-icon className="text-muted-foreground" />
                       <span>View Project</span>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item>
-                      <Share className="text-muted-foreground" />
+                      <ShareIcon data-sidebar-icon className="text-muted-foreground" />
                       <span>Share Project</span>
                     </DropdownMenu.Item>
                     <DropdownMenu.Separator />
                     <DropdownMenu.Item>
-                      <Trash2 className="text-muted-foreground" />
+                      <Trash2Icon data-sidebar-icon className="text-muted-foreground" />
                       <span>Delete Project</span>
                     </DropdownMenu.Item>
                   </DropdownMenu.Content>
@@ -411,7 +411,7 @@ export const AppSidebarWithSecondaryNavigation = (props: SidebarProps) => {
             ))}
             <SidebarMenu.Item>
               <SidebarMenu.Button>
-                <MoreHorizontal />
+                <MoreHorizontalIcon data-sidebar-icon />
                 <span>More</span>
               </SidebarMenu.Button>
             </SidebarMenu.Item>
@@ -463,7 +463,7 @@ const Tree = ({ item }: { item: TreeType }) => {
         isActive={name === "button.tsx"}
         className="data-[active=true]:bg-transparent"
       >
-        <File />
+        <FileIcon data-sidebar-icon />
         {name}
       </SidebarMenu.Button>
     );
@@ -477,8 +477,8 @@ const Tree = ({ item }: { item: TreeType }) => {
       >
         <Collapsible.Trigger asChild>
           <SidebarMenu.Button>
-            <ChevronRight className="transition-transform" />
-            <Folder />
+            <ChevronRightIcon data-sidebar-icon className="transition-transform" />
+            <FolderIcon data-sidebar-icon />
             {name}
           </SidebarMenu.Button>
         </Collapsible.Trigger>
@@ -505,7 +505,7 @@ export const AppSidebarCollapsibleTree = (props: SidebarProps) => {
               {treeData.changes.map((item, index) => (
                 <SidebarMenu.Item key={index}>
                   <SidebarMenu.Button>
-                    <File />
+                    <FileIcon data-sidebar-icon />
                     {item.file}
                   </SidebarMenu.Button>
                   <SidebarMenu.Badge>{item.state}</SidebarMenu.Badge>

package/src/components/Sidebar/stories/examples/components/SearchForm.tsx

@@ -18,7 +18,7 @@ export const SearchForm = ({ ...props }: React.ComponentProps<"form">) => {
             placeholder="Search the docs..."
             className="pl-8"
           />
-          <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+          <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50 z-1" />
         </SidebarGroup.Content>
       </SidebarGroup>
     </form>