@mbao01/common 0.0.47 → 0.0.49

package/src/components/Sidebar/SidebarMenu.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import type { CSSProperties } from "react";
+import { forwardRef, useMemo } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import type {
+  SidebarMenuActionProps,
+  SidebarMenuBadgeProps,
+  SidebarMenuButtonProps,
+  SidebarMenuItemProps,
+  SidebarMenuProps,
+  SidebarMenuSkeletonProps,
+  SidebarMenuSubButtonProps,
+  SidebarMenuSubItemProps,
+  SidebarMenuSubProps,
+} from "./types";
+import { cn } from "../../utilities";
+import { Skeleton } from "../Skeleton";
+import { Tooltip } from "../Tooltip";
+import {
+  getSidebarMenuActionClasses,
+  getSidebarMenuBadgeClasses,
+  getSidebarMenuButtonClasses,
+  getSidebarMenuClasses,
+  getSidebarMenuItemClasses,
+  getSidebarMenuSkeletonClasses,
+  getSidebarMenuSubClasses,
+  getSidebarMenuSubItemClasses,
+} from "./constants";
+import { useSidebar } from "./hooks";
+
+const SidebarMenu = ({ className, ...props }: SidebarMenuProps) => (
+  <ul data-sidebar="menu" className={cn(getSidebarMenuClasses(), className)} {...props} />
+);
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = forwardRef<HTMLLIElement, SidebarMenuItemProps>(
+  ({ className, ...props }, ref) => (
+    <li
+      ref={ref}
+      data-sidebar="menu-item"
+      className={cn(getSidebarMenuItemClasses(), className)}
+      {...props}
+    />
+  )
+);
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const { isMobile, state } = useSidebar();
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(getSidebarMenuButtonClasses({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) {
+      return button;
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      };
+    }
+
+    return (
+      <Tooltip>
+        <Tooltip.Trigger asChild>{button}</Tooltip.Trigger>
+        <Tooltip.Content
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    );
+  }
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = forwardRef<HTMLButtonElement, SidebarMenuActionProps>(
+  ({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-action"
+        className={cn(getSidebarMenuActionClasses({ showOnHover }), className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = forwardRef<HTMLDivElement, SidebarMenuBadgeProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="menu-badge"
+      className={cn(getSidebarMenuBadgeClasses(), className)}
+      {...props}
+    />
+  )
+);
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = forwardRef<HTMLDivElement, SidebarMenuSkeletonProps>(
+  ({ className, showIcon = false, ...props }, ref) => {
+    // Random width between 50 to 90%.
+    const width = useMemo(() => {
+      return `${Math.floor(Math.random() * 40) + 50}%`;
+    }, []);
+
+    return (
+      <div
+        ref={ref}
+        data-sidebar="menu-skeleton"
+        className={cn(getSidebarMenuSkeletonClasses(), className)}
+        {...props}
+      >
+        {showIcon && (
+          <Skeleton width={4} height={4} className="rounded-md" data-sidebar="menu-skeleton-icon" />
+        )}
+        <Skeleton
+          className="h-4 flex-1 max-w-[--skeleton-width]"
+          data-sidebar="menu-skeleton-text"
+          style={
+            {
+              "--skeleton-width": width,
+            } as CSSProperties
+          }
+        />
+      </div>
+    );
+  }
+);
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = forwardRef<HTMLUListElement, SidebarMenuSubProps>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu-sub"
+      className={cn(getSidebarMenuSubClasses(), className)}
+      {...props}
+    />
+  )
+);
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = forwardRef<HTMLLIElement, SidebarMenuSubItemProps>(
+  ({ ...props }, ref) => <li ref={ref} {...props} />
+);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = forwardRef<HTMLAnchorElement, SidebarMenuSubButtonProps>(
+  ({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+
+    return (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-sub-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(getSidebarMenuSubItemClasses({ size }), className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+SidebarMenu.Item = SidebarMenuItem;
+SidebarMenu.Button = SidebarMenuButton;
+SidebarMenu.Action = SidebarMenuAction;
+SidebarMenu.Badge = SidebarMenuBadge;
+SidebarMenu.Skeleton = SidebarMenuSkeleton;
+SidebarMenu.Sub = SidebarMenuSub;
+SidebarMenu.SubItem = SidebarMenuSubItem;
+SidebarMenu.SubButton = SidebarMenuSubButton;
+
+export { SidebarMenu };

package/src/components/Sidebar/constants.ts

@@ -0,0 +1,206 @@
+import { cva } from "../../libs";
+
+export const SIDEBAR_COOKIE_NAME = "sidebar:state";
+
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+
+export const SIDEBAR_WIDTH = "16rem";
+
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+
+export const SIDEBAR_WIDTH_ICON = "3rem";
+
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+export const getSidebarClasses = cva([], {
+  variants: {
+    collapsible: {
+      none: "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+    },
+  },
+});
+
+export const getSidebarMobileClasses = cva([], {
+  variants: {
+    isMobile: {
+      true: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+      false:
+        "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
+    },
+  },
+});
+
+export const getSidebarOuterClasses = cva("group peer hidden md:block text-sidebar-foreground");
+
+export const getSidebarInnerClasses = cva(
+  "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+  {
+    variants: {
+      side: {
+        left: "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",
+        right: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+      },
+      variant: {
+        floating:
+          "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",
+        inset:
+          "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",
+        sidebar:
+          "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+      },
+    },
+  }
+);
+
+export const getSidebarGapClasses = cva(
+  [
+    "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+    "group-data-[collapsible=offcanvas]:w-0",
+    "group-data-[side=right]:rotate-180",
+  ],
+  {
+    variants: {
+      variant: {
+        floating:
+          "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",
+        inset:
+          "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",
+        sidebar: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: null,
+        className: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+      },
+    ],
+  }
+);
+
+export const getSidebarTriggerClasses = cva("h-7 w-7 p-0");
+
+export const getSidebarRailClasses = cva([
+  "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+  "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+  "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+  "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+  "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+  "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+]);
+
+export const getSidebarInsetClasses = cva([
+  "relative flex min-h-svh flex-1 flex-col bg-background",
+  "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+]);
+
+// TODO
+export const getSidebarInputClasses = cva(
+  "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring"
+);
+
+export const getSidebarHeaderClasses = cva("flex flex-col gap-2 p-2");
+
+export const getSidebarFooterClasses = cva("flex flex-col gap-2 p-2");
+
+export const getSidebarSeparatorClasses = cva("mx-2 w-auto bg-sidebar-border");
+
+export const getSidebarContentClasses = cva(
+  "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden"
+);
+
+export const getSidebarProviderClasses = cva(
+  "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar"
+);
+
+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-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]: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-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+  // Increases the hit area of the button on mobile.
+  "after:absolute after:-inset-2 after:md:hidden",
+  "group-data-[collapsible=icon]:hidden",
+]);
+
+export const getSidebarGroupContentClasses = cva("w-full text-sm");
+
+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-none 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",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        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))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+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-none 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",
+    // Increases the hit area of the button on mobile.
+    "after:absolute after:-inset-2 after:md:hidden",
+    "peer-data-[size=sm]/menu-button:top-1",
+    "peer-data-[size=default]/menu-button:top-1.5",
+    "peer-data-[size=lg]/menu-button:top-2.5",
+    "group-data-[collapsible=icon]:hidden",
+  ],
+  {
+    variants: {
+      showOnHover: {
+        true: "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+      },
+    },
+  }
+);
+
+export const getSidebarMenuBadgeClasses = cva([
+  "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+  "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+  "peer-data-[size=sm]/menu-button:top-1",
+  "peer-data-[size=default]/menu-button:top-1.5",
+  "peer-data-[size=lg]/menu-button:top-2.5",
+  "group-data-[collapsible=icon]:hidden",
+]);
+
+export const getSidebarMenuSkeletonClasses = cva("rounded-md h-8 flex gap-2 px-2 items-center");
+
+export const getSidebarMenuSubClasses = cva([
+  "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+  "group-data-[collapsible=icon]:hidden",
+]);
+
+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-none 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",
+    "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+    "group-data-[collapsible=icon]:hidden",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+      },
+    },
+  }
+);

package/src/components/Sidebar/hooks/index.ts

@@ -0,0 +1 @@
+export { useSidebar } from "./useSidebar";

package/src/components/Sidebar/hooks/useSidebar/index.ts

@@ -0,0 +1 @@
+export { useSidebar } from "./useSidebar";

package/src/components/Sidebar/hooks/useSidebar/useSidebar.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { SidebarContext } from "../../SidebarContext";
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a <Sidebar.Provider />");
+  }
+
+  return context;
+};

package/src/components/Sidebar/index.ts

@@ -0,0 +1,4 @@
+export { Sidebar } from "./Sidebar";
+export { SidebarGroup } from "./SidebarGroup";
+export { SidebarMenu } from "./SidebarMenu";
+export { useSidebar } from "./hooks/useSidebar";

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

@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { Button } from "../../../Button";
+import { Dialog } from "../../../Dialog";
+import { Sidebar } from "../../Sidebar";
+import { SidebarProps } from "../../types";
+import { AppMain } from "./components/AppMain";
+import {
+  AppSidebar,
+  AppSidebarCollapsibleTree,
+  AppSidebarWithCollapsibleGroup,
+  AppSidebarWithSecondaryNavigation,
+  AppSidebarWithSubMenu,
+} from "./components/AppSidebar";
+
+/**
+ * Here's the basic style setup. In your css file e.g tailwind.css, add
+ * 
+```css
+\@layer base {
+    :root {
+      --sidebar-background: 0 0% 98%;
+      --sidebar-foreground: 240 5.3% 26.1%;
+      --sidebar-primary: 240 5.9% 10%;
+      --sidebar-primary-foreground: 0 0% 98%;
+      --sidebar-accent: 240 4.8% 95.9%;
+      --sidebar-accent-foreground: 240 5.9% 10%;
+      --sidebar-border: 220 13% 91%;
+      --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+ 
+    .dark {
+      --sidebar-background: 240 5.9% 10%;
+      --sidebar-foreground: 240 4.8% 95.9%;
+      --sidebar-primary: 224.3 76.3% 48%;
+      --sidebar-primary-foreground: 0 0% 100%;
+      --sidebar-accent: 240 3.7% 15.9%;
+      --sidebar-accent-foreground: 240 4.8% 95.9%;
+      --sidebar-border: 240 3.7% 15.9%;
+      --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+}
+```
+ * 
+ * then add this config in tailwind.config.ts
+ * 
+```js
+{
+    sidebar: {
+      DEFAULT: 'hsl(var(--sidebar-background))',
+      foreground: 'hsl(var(--sidebar-foreground))',
+      primary: 'hsl(var(--sidebar-primary))',
+      'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+      accent: 'hsl(var(--sidebar-accent))',
+      'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+      border: 'hsl(var(--sidebar-border))',
+      ring: 'hsl(var(--sidebar-ring))',
+    }
+}
+```
+ * @param props
+ * @returns
+ */
+export const SidebarExample = (props: SidebarProps) => {
+  return (
+    <Sidebar.Provider>
+      <AppSidebar {...props} />
+
+      <AppMain side={props.side} />
+    </Sidebar.Provider>
+  );
+};
+
+export const SidebarWithCollapsibleGroupExample = (props: SidebarProps) => {
+  return (
+    <Sidebar.Provider>
+      <AppSidebarWithCollapsibleGroup {...props} />
+
+      <AppMain side={props.side} />
+    </Sidebar.Provider>
+  );
+};
+
+export const SidebarWithSubMenuExample = (props: SidebarProps) => {
+  return (
+    <Sidebar.Provider>
+      <AppSidebarWithSubMenu {...props} />
+
+      <AppMain side={props.side} />
+    </Sidebar.Provider>
+  );
+};
+
+export const SidebarWithSecondaryNavigationExample = (props: SidebarProps) => {
+  return (
+    <Sidebar.Provider>
+      <AppSidebarWithSecondaryNavigation {...props} />
+
+      <AppMain side={props.side} />
+    </Sidebar.Provider>
+  );
+};
+
+export const SidebarWithCollapsibleTreeExample = (props: SidebarProps) => {
+  return (
+    <Sidebar.Provider>
+      <AppSidebarCollapsibleTree {...props} />
+
+      <AppMain side={props.side} />
+    </Sidebar.Provider>
+  );
+};
+
+export const SidebarInADialogExample = (props: SidebarProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <Dialog.Trigger asChild>
+        <Button size="sm">Open Dialog</Button>
+      </Dialog.Trigger>
+      <Dialog.Content className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+        <Dialog.Title className="sr-only">Settings</Dialog.Title>
+        <Dialog.Description className="sr-only">Customize your settings here.</Dialog.Description>
+
+        <Sidebar.Provider>
+          <AppSidebarWithSubMenu {...props} />
+
+          <AppMain side={props.side} />
+        </Sidebar.Provider>
+      </Dialog.Content>
+    </Dialog>
+  );
+};
+
+export const SidebarOnTheRightExample = (props: SidebarProps) => {
+  return (
+    <Sidebar.Provider>
+      <AppMain side={props.side} />
+
+      <AppSidebarWithCollapsibleGroup {...props} />
+    </Sidebar.Provider>
+  );
+};
+
+export const SidebarLeftAndRightExample = (props: SidebarProps) => {
+  return (
+    <Sidebar.Provider>
+      <AppSidebar {...props} />
+
+      <AppMain side={props.side} />
+
+      <AppSidebarCollapsibleTree collapsible="none" side="right" />
+    </Sidebar.Provider>
+  );
+};

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

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from "react";
+import { Breadcrumbs } from "../../../../Breadcrumbs";
+import { Breadcrumb } from "../../../../Breadcrumbs/Breadcrumbs";
+import { Sidebar } from "../../../Sidebar";
+import { type SidebarProps } from "../../../types";
+
+export const AppMain = ({
+  side,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & Pick<SidebarProps, "side">) => {
+  return (
+    <Sidebar.Inset {...props}>
+      <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        {side !== "right" ? <Sidebar.Trigger className="-ml-1" /> : null}
+        <Breadcrumbs>
+          <Breadcrumb className="hidden md:block">
+            <a href="#">Building Your Application</a>
+          </Breadcrumb>
+
+          <Breadcrumb>
+            <span>Data Fetching</span>
+          </Breadcrumb>
+        </Breadcrumbs>
+        {side === "right" ? <Sidebar.Trigger className="-mr-1 ml-auto !rotate-180" /> : null}
+      </header>
+      <div className="flex flex-1 flex-col gap-4 p-4">
+        <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div className="aspect-video rounded-xl bg-base-200/50" />
+          <div className="aspect-video rounded-xl bg-base-200/50" />
+          <div className="aspect-video rounded-xl bg-base-200/50" />
+        </div>
+        <div className="min-h-[100vh] flex-1 rounded-xl bg-base-200/50 md:min-h-min" />
+      </div>
+    </Sidebar.Inset>
+  );
+};