blodemd 0.0.11 → 0.0.12

package/docs/components/mdx/video.tsx

@@ -1,12 +1,45 @@
-export const Video = ({ src }: { src: string }) => (
-  <div className="relative overflow-hidden rounded-xl border border-border bg-black pt-[56.25%]">
-    <iframe
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-      allowFullScreen
-      className="absolute inset-0 h-full w-full border-0"
-      sandbox="allow-popups allow-presentation allow-scripts"
-      src={src}
-      title="Video"
-    />
-  </div>
-);
+import { cn } from "@/lib/utils";
+
+type AspectRatio = "16:9" | "4:3" | "1:1" | "21:9";
+
+const aspectRatioMap: Record<AspectRatio, string> = {
+  "16:9": "pt-[56.25%]",
+  "1:1": "pt-[100%]",
+  "21:9": "pt-[42.86%]",
+  "4:3": "pt-[75%]",
+};
+
+interface VideoProps {
+  src: string;
+  title?: string;
+  height?: number;
+  aspectRatio?: AspectRatio;
+}
+
+export const Video = ({
+  src,
+  title = "Video",
+  height,
+  aspectRatio = "16:9",
+}: VideoProps) => {
+  const useFixedHeight = typeof height === "number";
+
+  return (
+    <div
+      className={cn(
+        "relative overflow-hidden rounded-xl border border-border bg-black",
+        !useFixedHeight && aspectRatioMap[aspectRatio]
+      )}
+      style={useFixedHeight ? { height: `${height}px` } : undefined}
+    >
+      <iframe
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+        className="absolute inset-0 h-full w-full border-0"
+        sandbox="allow-popups allow-presentation allow-same-origin allow-scripts"
+        src={src}
+        title={title}
+      />
+    </div>
+  );
+};

package/docs/components/third-parties.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { GoogleAnalytics } from "@next/third-parties/google";
+import { SpeedInsights } from "@vercel/speed-insights/next";
+import { usePathname } from "next/navigation";
+
+const PRIVATE_PATH_PREFIXES = ["/app", "/oauth"];
+
+const isPrivatePath = (pathname: string | null) => {
+  if (!pathname) {
+    return false;
+  }
+  return PRIVATE_PATH_PREFIXES.some(
+    (prefix) => pathname === prefix || pathname.startsWith(`${prefix}/`)
+  );
+};
+
+export const ThirdParties = () => {
+  const pathname = usePathname();
+  if (isPrivatePath(pathname)) {
+    return null;
+  }
+  return (
+    <>
+      <SpeedInsights />
+      <GoogleAnalytics gaId="G-WE1RCNSC4E" />
+    </>
+  );
+};

package/docs/components/ui/badge.tsx

@@ -0,0 +1,61 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border border-transparent px-2 py-0.5 font-medium text-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        success:
+          "bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300 [a&]:hover:bg-green-50/80 dark:[a&]:hover:bg-green-950/80",
+        warning:
+          "bg-yellow-50 text-yellow-700 dark:bg-yellow-950 dark:text-yellow-300 [a&]:hover:bg-yellow-50/80 dark:[a&]:hover:bg-yellow-950/80",
+      },
+    },
+  }
+);
+
+type BadgeProps = React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean };
+
+const Badge = ({
+  className,
+  variant = "default",
+  asChild = false,
+  children,
+  ...props
+}: BadgeProps) =>
+  useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      asChild ? props : { ...props, children }
+    ),
+    render: asChild ? (children as React.ReactElement) : undefined,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  });
+
+export { Badge, badgeVariants };
+export type { BadgeProps };

package/docs/components/ui/breadcrumb.tsx

@@ -1,27 +1,35 @@
-import { Slot } from "radix-ui";
-import type { ComponentProps } from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronRight, MoreHorizontal } from "blode-icons-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-const Breadcrumb = ({ ...props }: ComponentProps<"nav">) => (
+const Breadcrumb = ({ ...props }: React.ComponentProps<"nav">) => (
   <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
 );
 
-const BreadcrumbList = ({ className, ...props }: ComponentProps<"ol">) => (
+const BreadcrumbList = ({
+  className,
+  ...props
+}: React.ComponentProps<"ol">) => (
   <ol
-    data-slot="breadcrumb-list"
     className={cn(
-      "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground break-words sm:gap-2.5",
+      "flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
       className
     )}
+    data-slot="breadcrumb-list"
     {...props}
   />
 );
 
-const BreadcrumbItem = ({ className, ...props }: ComponentProps<"li">) => (
+const BreadcrumbItem = ({
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
   <li
-    data-slot="breadcrumb-item"
     className={cn("inline-flex items-center gap-1.5", className)}
+    data-slot="breadcrumb-item"
     {...props}
   />
 );
@@ -29,25 +37,34 @@ const BreadcrumbItem = ({ className, ...props }: ComponentProps<"li">) => (
 const BreadcrumbLink = ({
   asChild,
   className,
+  children,
   ...props
-}: ComponentProps<"a"> & { asChild?: boolean }) => {
-  const Comp = asChild ? Slot.Root : "a";
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) =>
+  useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn("transition-colors hover:text-foreground", className),
+      },
+      asChild ? props : { ...props, children }
+    ),
+    render: asChild ? (children as React.ReactElement) : undefined,
+    state: {
+      slot: "breadcrumb-link",
+    },
+  });
 
-  return (
-    <Comp
-      data-slot="breadcrumb-link"
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    />
-  );
-};
-
-const BreadcrumbPage = ({ className, ...props }: ComponentProps<"span">) => (
+const BreadcrumbPage = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
   <span
-    data-slot="breadcrumb-page"
-    aria-disabled="true"
     aria-current="page"
+    aria-disabled="true"
     className={cn("font-normal text-foreground", className)}
+    data-slot="breadcrumb-page"
     {...props}
   />
 );
@@ -56,37 +73,40 @@ const BreadcrumbSeparator = ({
   children,
   className,
   ...props
-}: ComponentProps<"li">) => (
+}: React.ComponentProps<"li">) => (
   <li
-    data-slot="breadcrumb-separator"
-    role="presentation"
     aria-hidden="true"
     className={cn("[&>svg]:size-3.5", className)}
+    data-slot="breadcrumb-separator"
+    role="presentation"
     {...props}
   >
-    {children ?? (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="m9 18 6-6-6-6" />
-      </svg>
-    )}
+    {children ?? <ChevronRight />}
   </li>
 );
 
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden="true"
+    className={cn("flex size-9 items-center justify-center", className)}
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    {...props}
+  >
+    <MoreHorizontal className="size-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+
 export {
   Breadcrumb,
+  BreadcrumbList,
   BreadcrumbItem,
   BreadcrumbLink,
-  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  BreadcrumbEllipsis,
 };

package/docs/components/ui/button-group.tsx

@@ -0,0 +1,83 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+  }
+);
+
+const ButtonGroup = ({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) => (
+  <div
+    className={cn(buttonGroupVariants({ orientation }), className)}
+    data-orientation={orientation}
+    data-slot="button-group"
+    role="group"
+    {...props}
+  />
+);
+
+const ButtonGroupText = ({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) =>
+  useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex items-center gap-2 rounded-lg border bg-muted px-2.5 font-medium text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "button-group-text",
+    },
+  });
+
+const ButtonGroupSeparator = ({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) => (
+  <Separator
+    className={cn(
+      "relative self-stretch bg-input data-horizontal:mx-px data-vertical:my-px data-vertical:h-auto data-horizontal:w-auto",
+      className
+    )}
+    data-slot="button-group-separator"
+    orientation={orientation}
+    {...props}
+  />
+);
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+};

package/docs/components/ui/button.tsx

@@ -1,13 +1,12 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import type { VariantProps } from "class-variance-authority";
-import type * as React from "react";
+import { Slot } from "radix-ui";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-clip-padding font-medium text-sm outline-none transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-45 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     defaultVariants: {
       size: "default",
@@ -15,46 +14,26 @@ const buttonVariants = cva(
     },
     variants: {
       size: {
-        default:
-          "h-10 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-        icon: "size-10",
-        "icon-lg": "size-11",
-        "icon-sm":
-          "size-9 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),12px)]",
-        "icon-xs":
-          "size-8 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3",
-        input:
-          "h-[var(--field-height)] gap-2 rounded-[var(--field-radius)] px-[var(--field-padding-x)] py-[var(--field-padding-y)]",
-        "input-sm":
-          "h-[var(--field-height-sm)] gap-2 rounded-[var(--field-radius)] px-[var(--field-padding-x)] py-[var(--field-padding-y)]",
-        lg: "h-11 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5",
-        sm: "h-9 gap-1 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),12px)] px-3 text-[0.8rem] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
-        xs: "h-8 gap-1 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),10px)] px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        icon: "size-9",
+        "icon-lg": "size-10",
+        "icon-sm": "size-8",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
       },
       variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/95 aria-pressed:bg-primary/95",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-red-600 text-white hover:bg-red-700 focus-visible:border-red-600 focus-visible:ring-red-500/30 active:bg-red-800 aria-pressed:bg-red-800 dark:bg-red-500 dark:aria-pressed:bg-red-300 dark:active:bg-red-300 dark:hover:bg-red-400",
-        destructiveSecondary:
-          "border-red-200 text-red-700 hover:bg-red-50 active:bg-red-100 aria-pressed:bg-red-100 dark:border-red-800 dark:text-red-300 dark:aria-pressed:bg-red-950 dark:active:bg-red-950 dark:hover:bg-red-950/60",
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         ghost:
-          "hover:bg-muted hover:text-foreground active:bg-muted/80 aria-expanded:bg-muted aria-pressed:bg-muted/80 dark:aria-pressed:bg-muted/60 dark:active:bg-muted/60 dark:hover:bg-muted/50",
-        input:
-          "border-input bg-card font-normal font-sans text-base text-foreground leading-snug shadow-input hover:border-input-hover focus-visible:ring-2 focus-visible:ring-ring/15 focus-visible:ring-offset-1 focus-visible:ring-offset-background active:border-input-hover/80 aria-pressed:border-input-hover aria-invalid:border-destructive-foreground data-[placeholder]:text-placeholder-foreground",
-        link: "text-primary underline-offset-4 hover:underline active:opacity-80 aria-pressed:underline aria-pressed:opacity-80",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground active:bg-muted/80 aria-expanded:bg-muted aria-pressed:bg-muted/80 dark:border-input dark:bg-input/30 dark:aria-pressed:bg-input/60 dark:active:bg-input/60 dark:hover:bg-input/50",
+          "border bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/85 active:bg-secondary/75 aria-expanded:bg-secondary aria-pressed:bg-secondary/75",
-        success:
-          "bg-green-600 text-white hover:bg-green-700 focus-visible:border-green-600 focus-visible:ring-green-500/30 active:bg-green-800 aria-pressed:bg-green-800 dark:bg-green-500 dark:aria-pressed:bg-green-300 dark:active:bg-green-300 dark:hover:bg-green-400",
-        successSecondary:
-          "border-green-200 text-green-700 hover:bg-green-50 active:bg-green-100 aria-pressed:bg-green-100 dark:border-green-800 dark:text-green-300 dark:aria-pressed:bg-green-950 dark:active:bg-green-950 dark:hover:bg-green-950/60",
-        warning:
-          "bg-yellow-600 text-white hover:bg-yellow-700 focus-visible:border-yellow-600 focus-visible:ring-yellow-500/30 active:bg-yellow-800 aria-pressed:bg-yellow-800 dark:bg-yellow-500 dark:text-yellow-950 dark:aria-pressed:bg-yellow-300 dark:active:bg-yellow-300 dark:hover:bg-yellow-400",
-        warningSecondary:
-          "border-yellow-200 text-yellow-700 hover:bg-yellow-50 active:bg-yellow-100 aria-pressed:bg-yellow-100 dark:border-yellow-800 dark:text-yellow-300 dark:aria-pressed:bg-yellow-950 dark:active:bg-yellow-950 dark:hover:bg-yellow-950/60",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
       },
     },
   }
@@ -65,26 +44,22 @@ const Button = ({
   variant = "default",
   size = "default",
   asChild = false,
-  children,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
-  }) =>
-  useRender({
-    defaultTagName: "button",
-    props: mergeProps<"button">(
-      {
-        className: cn(buttonVariants({ className, size, variant })),
-      },
-      asChild ? props : { ...props, children }
-    ),
-    render: asChild ? (children as React.ReactElement) : undefined,
-    state: {
-      size,
-      slot: "button",
-      variant,
-    },
-  });
+  }) => {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ className, size, variant }))}
+      {...props}
+    />
+  );
+};
 
 export { Button, buttonVariants };

package/docs/components/ui/command.tsx

@@ -42,14 +42,14 @@ const CommandDialog = ({
   showCloseButton?: boolean;
 } & Omit<React.ComponentProps<typeof Dialog>, "children">) => (
   <Dialog {...props}>
+    <DialogHeader className="sr-only">
+      <DialogTitle>{title}</DialogTitle>
+      <DialogDescription>{description}</DialogDescription>
+    </DialogHeader>
     <DialogContent
       className={cn("overflow-hidden p-0", className)}
       showCloseButton={showCloseButton}
     >
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
       <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
         {children}
       </Command>
@@ -115,6 +115,17 @@ const CommandGroup = ({
   />
 );
 
+const CommandSeparator = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) => (
+  <CommandPrimitive.Separator
+    className={cn("-mx-1 h-px bg-border", className)}
+    data-slot="command-separator"
+    {...props}
+  />
+);
+
 const CommandItem = ({
   className,
   ...props
@@ -129,11 +140,28 @@ const CommandItem = ({
   />
 );
 
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    className={cn(
+      "ml-auto text-muted-foreground text-xs tracking-widest",
+      className
+    )}
+    data-slot="command-shortcut"
+    {...props}
+  />
+);
+
 export {
+  Command,
   CommandDialog,
   CommandInput,
   CommandList,
   CommandEmpty,
   CommandGroup,
   CommandItem,
+  CommandShortcut,
+  CommandSeparator,
 };

package/docs/components/ui/copy-button.tsx

@@ -6,7 +6,6 @@ import {
 } from "blode-icons-react";
 import { cva } from "class-variance-authority";
 import type { VariantProps } from "class-variance-authority";
-import { AnimatePresence, motion } from "motion/react";
 import { useCallback } from "react";
 import type { MouseEvent } from "react";
 
@@ -30,18 +29,17 @@ const buttonVariants = cva(
         xs: "size-7 rounded-md [&_svg:not([class*='size-'])]:size-3.5",
       },
       variant: {
-        accent: "bg-accent text-accent-foreground shadow-xs hover:bg-accent/90",
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        accent: "bg-accent text-accent-foreground hover:bg-accent/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          "border bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
       },
     },
   }
@@ -103,18 +101,13 @@ const CopyButton = ({
       onClick={handleCopy}
       {...props}
     >
-      <AnimatePresence mode="popLayout">
-        <motion.span
-          animate={{ filter: "blur(0px)", opacity: 1, scale: 1 }}
-          data-slot="copy-button-icon"
-          exit={{ filter: "blur(4px)", opacity: 0.4, scale: 0 }}
-          initial={false}
-          key={isCopied ? "check" : "copy"}
-          transition={{ duration: 0.25 }}
-        >
-          <Icon />
-        </motion.span>
-      </AnimatePresence>
+      <span
+        className="inline-flex animate-in fade-in-0 zoom-in-95 duration-200 motion-reduce:animate-none"
+        data-slot="copy-button-icon"
+        key={isCopied ? "check" : "copy"}
+      >
+        <Icon />
+      </span>
     </ButtonPrimitive>
   );
 };