blodemd 0.0.10 → 0.0.12

package/docs/components/ui/sheet.tsx

@@ -12,6 +12,18 @@ const Sheet = ({
   <SheetPrimitive.Root data-slot="sheet" {...props} />
 );
 
+const SheetTrigger = ({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) => (
+  <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+);
+
+const SheetClose = ({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) => (
+  <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+);
+
 const SheetPortal = ({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) => (
@@ -79,6 +91,14 @@ const SheetHeader = ({ className, ...props }: React.ComponentProps<"div">) => (
   />
 );
 
+const SheetFooter = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    data-slot="sheet-footer"
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+);
+
 const SheetTitle = ({
   className,
   ...props
@@ -101,4 +121,13 @@ const SheetDescription = ({
   />
 );
 
-export { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription };
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/docs/components/ui/sidebar.tsx

@@ -1,7 +1,13 @@
 "use client";
+// oxlint-disable eslint-plugin-unicorn/no-document-cookie -- sidebar state persisted via cookie (by design)
+// oxlint-disable eslint/no-shadow -- registry code; upstream uses `open` in nested scopes
+// oxlint-disable eslint/no-param-reassign -- registry code normalises tooltip prop
+// oxlint-disable eslint-plugin-react/button-has-type -- trigger intentionally uses default button behavior
+// oxlint-disable eslint-plugin-react-perf/jsx-no-new-function-as-prop -- registry-defined trigger composition
 
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { PanelLeftIcon } from "blode-icons-react";
 import { cva } from "class-variance-authority";
 import type { VariantProps } from "class-variance-authority";
 import type * as React from "react";
@@ -14,6 +20,9 @@ import {
   useState,
 } from "react";
 
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
 import {
   Sheet,
   SheetContent,
@@ -21,6 +30,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
   TooltipContent,
@@ -88,7 +98,6 @@ const SidebarProvider = ({
       }
 
       // This sets the cookie to keep the sidebar state.
-      // oxlint-disable-next-line eslint-plugin-unicorn/no-document-cookie
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
     [setOpenProp, open]
@@ -97,9 +106,7 @@ const SidebarProvider = ({
   // Helper to toggle the sidebar.
   const toggleSidebar = useCallback(
     () =>
-      isMobile
-        ? setOpenMobile((prevOpen) => !prevOpen)
-        : setOpen((prevOpen) => !prevOpen),
+      isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open),
     [isMobile, setOpen]
   );
 
@@ -263,6 +270,123 @@ const Sidebar = ({
   );
 };
 
+const SidebarTrigger = ({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      className={cn("size-7", className)}
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+};
+
+const SidebarRail = ({
+  className,
+  ...props
+}: React.ComponentProps<"button">) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      aria-label="Toggle Sidebar"
+      className={cn(
+        "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",
+        "in-data-[side=left]:cursor-w-resize in-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 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      onClick={toggleSidebar}
+      tabIndex={-1}
+      title="Toggle Sidebar"
+      {...props}
+    />
+  );
+};
+
+const SidebarInset = ({
+  className,
+  ...props
+}: React.ComponentProps<"main">) => (
+  <main
+    className={cn(
+      "relative flex w-full flex-1 flex-col bg-background",
+      "md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
+      className
+    )}
+    data-slot="sidebar-inset"
+    {...props}
+  />
+);
+
+const SidebarInput = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) => (
+  <Input
+    className={cn("h-8 w-full bg-background shadow-none", className)}
+    data-sidebar="input"
+    data-slot="sidebar-input"
+    {...props}
+  />
+);
+
+const SidebarHeader = ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => (
+  <div
+    className={cn("flex flex-col gap-2 p-2", className)}
+    data-sidebar="header"
+    data-slot="sidebar-header"
+    {...props}
+  />
+);
+
+const SidebarFooter = ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => (
+  <div
+    className={cn("flex flex-col gap-2 p-2", className)}
+    data-sidebar="footer"
+    data-slot="sidebar-footer"
+    {...props}
+  />
+);
+
+const SidebarSeparator = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) => (
+  <Separator
+    className={cn("mx-2 w-auto bg-sidebar-border", className)}
+    data-sidebar="separator"
+    data-slot="sidebar-separator"
+    {...props}
+  />
+);
+
 const SidebarContent = ({
   className,
   ...props
@@ -312,6 +436,33 @@ const SidebarGroupLabel = ({
     },
   });
 
+const SidebarGroupAction = ({
+  className,
+  asChild = false,
+  children,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) =>
+  useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-3.5 right-3 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",
+          // Increases the hit area of the button on mobile.
+          "after:absolute after:-inset-2 md:after:hidden",
+          "group-data-[collapsible=icon]:hidden",
+          className
+        ),
+      },
+      asChild ? props : { ...props, children }
+    ),
+    render: asChild ? (children as React.ReactElement) : undefined,
+    state: {
+      sidebar: "group-action",
+      slot: "sidebar-group-action",
+    },
+  });
+
 const SidebarGroupContent = ({
   className,
   ...props
@@ -404,8 +555,11 @@ const SidebarMenuButton = ({
     return button;
   }
 
-  const tooltipProps =
-    typeof tooltip === "string" ? { children: tooltip } : tooltip;
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
 
   return (
     <Tooltip>
@@ -414,20 +568,191 @@ const SidebarMenuButton = ({
         align="center"
         hidden={state !== "collapsed" || isMobile}
         side="right"
-        {...tooltipProps}
+        {...tooltip}
       />
     </Tooltip>
   );
 };
 
+const SidebarMenuAction = ({
+  className,
+  asChild = false,
+  showOnHover = false,
+  children,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}) =>
+  useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-1.5 right-1 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",
+          // 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",
+          "peer-data-[size=default]/menu-button:top-1.5",
+          "peer-data-[size=lg]/menu-button:top-2.5",
+          "group-data-[collapsible=icon]:hidden",
+          showOnHover &&
+            "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+          className
+        ),
+      },
+      asChild ? props : { ...props, children }
+    ),
+    render: asChild ? (children as React.ReactElement) : undefined,
+    state: {
+      sidebar: "menu-action",
+      slot: "sidebar-menu-action",
+    },
+  });
+
+const SidebarMenuBadge = ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active]/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",
+      className
+    )}
+    data-sidebar="menu-badge"
+    data-slot="sidebar-menu-badge"
+    {...props}
+  />
+);
+
+const SidebarMenuSkeleton = ({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}) => {
+  // Random width between 50 to 90%.
+  const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+
+  return (
+    <div
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      data-sidebar="menu-skeleton"
+      data-slot="sidebar-menu-skeleton"
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+};
+
+const SidebarMenuSub = ({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) => (
+  <ul
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    data-sidebar="menu-sub"
+    data-slot="sidebar-menu-sub"
+    {...props}
+  />
+);
+
+const SidebarMenuSubItem = ({
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    className={cn("group/menu-sub-item relative", className)}
+    data-sidebar="menu-sub-item"
+    data-slot="sidebar-menu-sub-item"
+    {...props}
+  />
+);
+
+const SidebarMenuSubButton = ({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
+}) =>
+  useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn(
+          "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",
+          "data-[active]:bg-sidebar-accent data-[active]:text-sidebar-accent-foreground",
+          size === "sm" && "text-xs",
+          size === "md" && "text-sm",
+          "group-data-[collapsible=icon]:hidden",
+          className
+        ),
+      },
+      asChild ? props : { ...props, children }
+    ),
+    render: asChild ? (children as React.ReactElement) : undefined,
+    state: {
+      active: isActive,
+      sidebar: "menu-sub-button",
+      size,
+      slot: "sidebar-menu-sub-button",
+    },
+  });
+
 export {
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarGroup,
+  SidebarGroupAction,
   SidebarGroupContent,
   SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
   SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
   SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
 };

package/docs/components/ui/site-footer.tsx

@@ -1,9 +1,10 @@
 import Image from "next/image";
 
+import { Badge } from "@/components/ui/badge";
 import { siteConfig } from "@/lib/config";
 
 export const SiteFooter = () => (
-  <footer className="flex flex-col items-center justify-center gap-2 pt-16 pb-8 text-muted-foreground text-sm">
+  <footer className="flex flex-col items-center justify-center gap-3 pt-16 pb-8 text-muted-foreground text-sm">
     <div className="flex items-center gap-1">
       Crafted by
       <a
@@ -23,9 +24,10 @@ export const SiteFooter = () => (
         Matthew Blode
       </a>
     </div>
-    <div className="flex items-center gap-2 text-muted-foreground/30">
-      <span className="text-muted-foreground">v{siteConfig.version}</span>{" "}
-      &bull;
+    <div className="flex items-center gap-2">
+      <Badge className="font-mono" variant="outline">
+        v{siteConfig.version}
+      </Badge>
       <a
         className="text-muted-foreground transition-colors hover:text-foreground"
         href={siteConfig.links.github}

package/docs/components/ui/skeleton.tsx

@@ -0,0 +1,11 @@
+import { cn } from "@/lib/utils";
+
+const Skeleton = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    data-slot="skeleton"
+    className={cn("animate-pulse rounded-md bg-accent", className)}
+    {...props}
+  />
+);
+
+export { Skeleton };

package/docs/components/ui/switch.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    className={cn(
+      "peer inline-flex h-[24px] w-[42px] shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-disabled:cursor-not-allowed data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-50 data-unchecked:hover:bg-input-hover",
+      className
+    )}
+    data-slot="switch"
+    ref={ref}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        "pointer-events-none block size-[18px] rounded-full bg-card shadow-lg ring-0 transition-transform data-checked:translate-x-[21px] data-unchecked:translate-x-[3px] dark:bg-card-foreground"
+      )}
+      data-slot="switch-thumb"
+    />
+  </SwitchPrimitive.Root>
+));
+
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };

package/docs/components/ui/tabs.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import mergeRefs from "merge-refs";
+import * as React from "react";
+
+import { useTabObserver } from "@/hooks/use-tab-observer";
+import { cn } from "@/lib/utils";
+
+const Tabs = ({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) => (
+  <TabsPrimitive.Root
+    className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
+    data-orientation={orientation}
+    data-slot="tabs"
+    orientation={orientation}
+    {...props}
+  />
+);
+
+const tabsListVariants = cva(
+  "group/tabs-list relative isolate inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground data-[variant=line]:rounded-none group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+  }
+);
+
+const TabsList = ({
+  className,
+  variant = "default",
+  ref,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) => {
+  const [indicatorStyle, setIndicatorStyle] = React.useState({
+    height: 0,
+    left: 0,
+    top: 0,
+    width: 0,
+  });
+  const [hasIndicatorPosition, setHasIndicatorPosition] = React.useState(false);
+  const [canAnimateIndicator, setCanAnimateIndicator] = React.useState(false);
+  const hasInitializedIndicator = React.useRef(false);
+  const { listRef } = useTabObserver({
+    onActiveTabChange: (_, activeTab) => {
+      setIndicatorStyle({
+        height: activeTab.offsetHeight,
+        left: activeTab.offsetLeft,
+        top: activeTab.offsetTop,
+        width: activeTab.offsetWidth,
+      });
+
+      if (!hasInitializedIndicator.current) {
+        hasInitializedIndicator.current = true;
+        setHasIndicatorPosition(true);
+        requestAnimationFrame(() => {
+          setCanAnimateIndicator(true);
+        });
+        return;
+      }
+
+      setHasIndicatorPosition(true);
+    },
+  });
+
+  return (
+    <TabsPrimitive.List
+      className={cn(tabsListVariants({ variant }), className)}
+      data-slot="tabs-list"
+      data-variant={variant}
+      ref={mergeRefs(ref, listRef)}
+      {...props}
+    >
+      {variant === "default" ? (
+        <span
+          aria-hidden="true"
+          className={cn(
+            "pointer-events-none absolute top-0 left-0 z-0 rounded-md bg-background shadow-sm",
+            canAnimateIndicator
+              ? "transition-[width,height,transform,opacity] duration-300"
+              : "transition-none",
+            hasIndicatorPosition ? "opacity-100" : "opacity-0"
+          )}
+          style={{
+            height: `${indicatorStyle.height}px`,
+            transform: `translate(${indicatorStyle.left}px, ${indicatorStyle.top}px)`,
+            transitionTimingFunction: "cubic-bezier(0.65, 0, 0.35, 1)",
+            width: `${indicatorStyle.width}px`,
+          }}
+        />
+      ) : null}
+      {props.children}
+    </TabsPrimitive.List>
+  );
+};
+
+const TabsTrigger = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Tab>) => (
+  <TabsPrimitive.Tab
+    className={cn(
+      "relative z-10 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-1.5 py-0.5 font-medium text-foreground/60 text-sm transition-all hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-[variant=line]/tabs-list:data-active:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+      "data-active:text-foreground group-data-[variant=default]/tabs-list:data-active:bg-transparent dark:data-active:text-foreground group-data-[variant=default]/tabs-list:dark:data-active:border-transparent group-data-[variant=default]/tabs-list:dark:data-active:bg-transparent",
+      "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+      className
+    )}
+    data-slot="tabs-trigger"
+    {...props}
+  />
+);
+
+const TabsContent = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Panel>) => (
+  <TabsPrimitive.Panel
+    className={cn("flex-1 text-sm outline-none", className)}
+    data-slot="tabs-content"
+    {...props}
+  />
+);
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };