@mbao01/common 0.6.3 → 0.6.5

package/dist/types/components/Badge/Badge.d.ts

@@ -1,2 +1,2 @@
 import { BadgeProps } from './types';
-export declare const Badge: ({ size, outline, rounded, variant, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ size, outline, rounded, variant, soft, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Badge/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const getBadgeClasses: (props?: ({
     variant?: "accent" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    soft?: boolean | null | undefined;
     outline?: boolean | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
     rounded?: "xs" | "sm" | "md" | "lg" | null | undefined;

package/dist/types/components/Chart/helpers.d.ts

@@ -1,7 +1,7 @@
 import { NameType, Payload as TooltipPayload, ValueType } from 'recharts/types/component/DefaultTooltipContent';
 import { LegendPayload } from 'recharts';
 import { ChartConfig } from './types';
-export declare const getPayloadConfigFromPayload: (config: ChartConfig, payload: LegendPayload | TooltipPayload<ValueType, NameType>, key: string) => ({
+export declare const getPayloadConfigFromPayload: (config: ChartConfig, payload: LegendPayload | Omit<TooltipPayload<ValueType, NameType>, "graphicalItemId">, key: string) => ({
     label?: import('react').ReactNode;
     icon?: import('react').ComponentType;
 } & ({

package/dist/types/components/Form/DatetimeInput/DatetimeInput.d.ts

@@ -56,6 +56,7 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
         broadcastCalendar?: boolean | undefined;
         ISOWeek?: boolean | undefined;
         timeZone?: string | undefined | undefined;
+        noonSafe?: boolean | undefined | undefined;
         components?: Partial<import('react-day-picker').CustomComponents> | undefined;
         initialFocus?: boolean | undefined;
         today?: Date | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.6.3",
+  "version": "0.6.5",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -99,8 +99,8 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
-    "lucide-react": "^0.559.0",
-    "react-day-picker": "^9.12.0",
+    "lucide-react": "^0.562.0",
+    "react-day-picker": "^9.13.0",
     "react-dropzone": "^14.3.8",
     "react-international-phone": "^4.6.1",
     "react-otp-input": "^3.1.1",
@@ -112,51 +112,51 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@storybook/addon-a11y": "^10.1.6",
+    "@storybook/addon-a11y": "^10.1.11",
     "@storybook/addon-coverage": "^3.0.0",
-    "@storybook/addon-docs": "^10.1.6",
-    "@storybook/addon-links": "^10.1.6",
-    "@storybook/addon-onboarding": "^10.1.6",
-    "@storybook/addon-themes": "^10.1.6",
-    "@storybook/react-vite": "^10.1.6",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-links": "^10.1.11",
+    "@storybook/addon-onboarding": "^10.1.11",
+    "@storybook/addon-themes": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
     "@storybook/test-runner": "^0.24.2",
-    "@tailwindcss/postcss": "^4.1.17",
-    "@tailwindcss/vite": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^25.0.0",
+    "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.49.0",
-    "@typescript-eslint/parser": "^8.49.0",
+    "@typescript-eslint/eslint-plugin": "^8.51.0",
+    "@typescript-eslint/parser": "^8.51.0",
     "@vitejs/plugin-react": "^5.1.2",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "axe-playwright": "^2.2.2",
-    "daisyui": "^5.5.11",
-    "eslint": "^9.39.1",
+    "daisyui": "^5.5.14",
+    "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-storybook": "^10.1.6",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-storybook": "^10.1.11",
     "globals": "^16.5.0",
     "jest-image-snapshot": "^6.5.1",
-    "jsdom": "^27.3.0",
+    "jsdom": "^27.4.0",
     "path": "^0.12.7",
     "postcss": "^8.5.6",
     "prettier": "^3.7.4",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
-    "react-router-dom": "^7.10.1",
-    "recharts": "^3.5.1",
-    "storybook": "^10.1.6",
-    "tailwindcss": "^4.1.17",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-router-dom": "^7.11.0",
+    "recharts": "^3.6.0",
+    "storybook": "^10.1.11",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
+    "typescript-eslint": "^8.51.0",
     "vite": "^6.4.1",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
@@ -168,5 +168,5 @@
     "recharts": "2",
     "typescript": "5"
   },
-  "gitHead": "de45dbee958479f770fa71c2656a1b230fe86cdb"
+  "gitHead": "f3359c587061980729e83322e4f6330e04e0815e"
 }

package/src/components/Badge/Badge.tsx

@@ -2,10 +2,18 @@ import { cn } from "../../utilities";
 import { getBadgeClasses } from "./constants";
 import { type BadgeProps } from "./types";
 
-export const Badge = ({ size, outline, rounded, variant, className, ...props }: BadgeProps) => {
+export const Badge = ({
+  size,
+  outline,
+  rounded,
+  variant,
+  soft,
+  className,
+  ...props
+}: BadgeProps) => {
   return (
     <span
-      className={cn(getBadgeClasses({ size, variant, outline, rounded }), className)}
+      className={cn(getBadgeClasses({ size, variant, outline, rounded, soft }), className)}
       {...props}
     />
   );

package/src/components/Badge/constants.ts

@@ -14,6 +14,9 @@ export const getBadgeClasses = cva("badge", {
       success: "badge-success",
       warning: "badge-warning",
     },
+    soft: {
+      true: "badge-soft",
+    },
     outline: {
       true: "badge-outline",
     },
@@ -30,21 +33,6 @@ export const getBadgeClasses = cva("badge", {
       lg: "rounded-lg",
     },
   }),
-  compoundVariants: [
-    {
-      size: undefined,
-      className: "text-xs",
-    },
-    {
-      rounded: undefined,
-      className: "rounded-md",
-    },
-    {
-      variant: "ghost",
-      outline: true,
-      className: "border-base-300",
-    },
-  ],
   defaultVariants: {
     variant: "ghost",
   },

package/src/components/Chart/helpers.ts

@@ -9,7 +9,7 @@ import { type ChartConfig } from "./types";
 // Helper to extract item config from a payload.
 export const getPayloadConfigFromPayload = (
   config: ChartConfig,
-  payload: LegendPayload | TooltipPayload<ValueType, NameType>,
+  payload: LegendPayload | Omit<TooltipPayload<ValueType, NameType>, "graphicalItemId">,
   key: string
 ) => {
   if (typeof payload !== "object" || payload === null) {

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>