blodemd 0.0.8 → 0.0.10

package/docs/components/mdx/code-group.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { isValidElement, useCallback, useMemo, useState } from "react";
-import type { MouseEvent, ReactElement, ReactNode } from "react";
+import { isValidElement, useCallback, useId, useMemo, useState } from "react";
+import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -9,49 +9,97 @@ interface CodeGroupProps {
   children: ReactNode;
 }
 
-export const CodeGroup = ({ children }: CodeGroupProps) => {
-  const items = useMemo(() => {
-    const nodes = Array.isArray(children) ? children : [children];
-    return nodes.filter((child): child is ReactElement =>
-      isValidElement(child)
-    );
-  }, [children]);
+interface CodeGroupItemProps {
+  "data-rehype-pretty-code-title"?: string;
+  children?: ReactNode;
+}
+
+interface ResolvedCodeItem {
+  element: ReactElement<CodeGroupItemProps>;
+  key: string;
+  label: string;
+}
+
+const clampTabIndex = (index: number, total: number) => {
+  if (total <= 0) {
+    return 0;
+  }
 
+  return Math.min(Math.max(index, 0), total - 1);
+};
+
+const sanitizeDomId = (value: string) =>
+  value.replaceAll(/[^a-zA-Z0-9_-]/g, "-");
+
+const toNodeArray = (children: ReactNode): ReactNode[] =>
+  Array.isArray(children) ? children.flatMap(toNodeArray) : [children];
+
+const getCodeLabel = (
+  element: ReactElement<CodeGroupItemProps>,
+  index: number
+) => {
+  const title = element.props["data-rehype-pretty-code-title"];
+  if (title) {
+    return title;
+  }
+
+  const pre = toNodeArray(element.props.children).find(
+    (child) => isValidElement(child) && child.type === "pre"
+  );
+  if (isValidElement<{ className?: string }>(pre)) {
+    const languageClass = pre.props.className
+      ?.split(" ")
+      .find((className: string) => className.startsWith("language-"));
+    if (languageClass) {
+      return languageClass.replace("language-", "");
+    }
+  }
+
+  return `Tab ${index + 1}`;
+};
+
+const resolveCodeItems = (children: ReactNode): ResolvedCodeItem[] =>
+  toNodeArray(children)
+    .filter((child): child is ReactElement<CodeGroupItemProps> =>
+      isValidElement<CodeGroupItemProps>(child)
+    )
+    .map((element, index) => {
+      const label = getCodeLabel(element, index);
+      const key = sanitizeDomId(
+        String(
+          element.key ??
+            element.props["data-rehype-pretty-code-title"] ??
+            `code-${index + 1}`
+        )
+      );
+
+      return {
+        element,
+        key,
+        label,
+      };
+    });
+
+export const CodeGroup = ({ children }: CodeGroupProps) => {
+  const items = useMemo(() => resolveCodeItems(children), [children]);
   const [active, setActive] = useState(0);
+  const activeIndex = clampTabIndex(active, items.length);
+  const activeItem = items[activeIndex];
+  const tabsId = useId();
 
-  const labels = useMemo(
-    () =>
-      items.map((item) => {
-        if (
-          !isValidElement<{
-            "data-rehype-pretty-code-title"?: string;
-            children?: ReactNode;
-          }>(item)
-        ) {
-          return "Code";
-        }
-        const title = item.props["data-rehype-pretty-code-title"];
-        if (title) {
-          return title;
-        }
-        const itemChildren = Array.isArray(item.props.children)
-          ? item.props.children
-          : [item.props.children];
-        const pre = itemChildren.find(
-          (c: unknown) => isValidElement(c) && c.type === "pre"
-        );
-        if (isValidElement<{ className?: string }>(pre)) {
-          const lang = pre.props.className
-            ?.split(" ")
-            .find((c: string) => c.startsWith("language-"))
-            ?.replace("language-", "");
-          if (lang) {
-            return lang;
-          }
-        }
-        return `Tab ${items.indexOf(item) + 1}`;
-      }),
-    [items]
+  const getTabId = useCallback(
+    (index: number) => `${tabsId}-${items[index]?.key ?? index}-tab`,
+    [items, tabsId]
+  );
+  const getPanelId = useCallback(
+    (index: number) => `${tabsId}-${items[index]?.key ?? index}-panel`,
+    [items, tabsId]
+  );
+  const focusTab = useCallback(
+    (index: number) => {
+      document.querySelector<HTMLElement>(`[id="${getTabId(index)}"]`)?.focus();
+    },
+    [getTabId]
   );
 
   const handleTabClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
@@ -59,36 +107,97 @@ export const CodeGroup = ({ children }: CodeGroupProps) => {
     setActive(index);
   }, []);
 
-  if (items.length <= 1) {
+  const handleTabKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLButtonElement>) => {
+      if (!items.length) {
+        return;
+      }
+
+      const index = Number(event.currentTarget.dataset.index ?? activeIndex);
+      const lastIndex = items.length - 1;
+      let nextIndex: number | null = null;
+
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight": {
+          nextIndex = index === lastIndex ? 0 : index + 1;
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          nextIndex = index === 0 ? lastIndex : index - 1;
+          break;
+        }
+        case "End": {
+          nextIndex = lastIndex;
+          break;
+        }
+        case "Home": {
+          nextIndex = 0;
+          break;
+        }
+        default: {
+          return;
+        }
+      }
+
+      event.preventDefault();
+      setActive(nextIndex);
+      focusTab(nextIndex);
+    },
+    [activeIndex, focusTab, items.length]
+  );
+
+  if (!activeItem) {
     return children as ReactElement;
   }
 
+  if (items.length === 1) {
+    return activeItem.element;
+  }
+
   return (
     <div className="my-4 overflow-hidden rounded-xl border border-border bg-code">
       <div
+        aria-orientation="horizontal"
         className="flex gap-1 border-b border-border bg-muted/50 px-2 pt-2"
         role="tablist"
       >
-        {labels.map((label, index) => (
-          <button
-            aria-selected={index === active}
-            className={cn(
-              "rounded-t-md border-b-2 px-3 py-1.5 font-mono text-xs transition-colors",
-              index === active
-                ? "border-primary text-foreground"
-                : "border-transparent text-muted-foreground hover:text-foreground"
-            )}
-            data-index={index}
-            key={label}
-            onClick={handleTabClick}
-            role="tab"
-            type="button"
-          >
-            {label}
-          </button>
-        ))}
+        {items.map((item, index) => {
+          const isSelected = index === activeIndex;
+
+          return (
+            <button
+              aria-controls={getPanelId(index)}
+              aria-selected={isSelected}
+              className={cn(
+                "rounded-t-md border-b-2 px-3 py-1.5 font-mono text-xs transition-colors",
+                isSelected
+                  ? "border-primary text-foreground"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              )}
+              data-index={index}
+              id={getTabId(index)}
+              key={item.key}
+              onClick={handleTabClick}
+              onKeyDown={handleTabKeyDown}
+              role="tab"
+              tabIndex={isSelected ? 0 : -1}
+              type="button"
+            >
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+      <div
+        aria-labelledby={getTabId(activeIndex)}
+        id={getPanelId(activeIndex)}
+        role="tabpanel"
+        tabIndex={0}
+      >
+        {activeItem.element}
       </div>
-      <div role="tabpanel">{items[active]}</div>
     </div>
   );
 };

package/docs/components/mdx/steps.tsx

@@ -24,7 +24,7 @@ export const Step = ({
   const anchorId = id ?? title.toLowerCase().replaceAll(/\s+/g, "-");
 
   return (
-    <div className="relative pb-8 pl-10 last:pb-0" id={anchorId}>
+    <div className="relative pb-8 pl-8 sm:pl-10 last:pb-0" id={anchorId}>
       <div
         aria-hidden
         className="absolute left-0 flex size-7 items-center justify-center rounded-full border border-border bg-muted font-mono text-xs font-medium"

package/docs/components/mdx/tabs.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { isValidElement, useCallback, useMemo, useState } from "react";
-import type { MouseEvent, ReactElement, ReactNode } from "react";
+import { isValidElement, useCallback, useId, useMemo, useState } from "react";
+import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -13,9 +13,11 @@ interface TabProps {
   children: ReactNode;
 }
 
-export const Tab = ({ children }: TabProps) => (
-  <div className="p-4">{children}</div>
-);
+interface ResolvedTabItem {
+  element: ReactElement<TabProps>;
+  key: string;
+  label: string;
+}
 
 interface TabsProps {
   children: ReactNode;
@@ -23,26 +25,116 @@ interface TabsProps {
   borderBottom?: boolean;
 }
 
+export const Tab = ({ children }: TabProps) => (
+  <div className="p-4">{children}</div>
+);
+
+const clampTabIndex = (index: number, total: number) => {
+  if (total <= 0) {
+    return 0;
+  }
+
+  return Math.min(Math.max(index, 0), total - 1);
+};
+
+const sanitizeDomId = (value: string) =>
+  value.replaceAll(/[^a-zA-Z0-9_-]/g, "-");
+
+const toNodeArray = (children: ReactNode): ReactNode[] =>
+  Array.isArray(children) ? children.flatMap(toNodeArray) : [children];
+
+const resolveTabItems = (children: ReactNode): ResolvedTabItem[] =>
+  toNodeArray(children)
+    .filter((child): child is ReactElement<TabProps> =>
+      isValidElement<TabProps>(child)
+    )
+    .map((element, index) => {
+      const label =
+        element.props.title ?? element.props.label ?? `Tab ${index + 1}`;
+      const key = sanitizeDomId(
+        String(element.props.id ?? element.key ?? `tab-${index + 1}`)
+      );
+
+      return {
+        element,
+        key,
+        label,
+      };
+    });
+
 export const Tabs = ({
   children,
   defaultTabIndex = 0,
   borderBottom,
 }: TabsProps) => {
-  const items = useMemo(() => {
-    const nodes = Array.isArray(children) ? children : [children];
-    return nodes.filter((child): child is ReactElement<TabProps> =>
-      isValidElement<TabProps>(child)
-    );
-  }, [children]);
+  const items = useMemo(() => resolveTabItems(children), [children]);
+  const [active, setActive] = useState<number | null>(null);
+  const activeIndex = clampTabIndex(active ?? defaultTabIndex, items.length);
+  const activeItem = items[activeIndex];
+  const tabsId = useId();
+
+  const getTabId = useCallback(
+    (index: number) => `${tabsId}-${items[index]?.key ?? index}-tab`,
+    [items, tabsId]
+  );
+  const getPanelId = useCallback(
+    (index: number) => `${tabsId}-${items[index]?.key ?? index}-panel`,
+    [items, tabsId]
+  );
+  const focusTab = useCallback(
+    (index: number) => {
+      document.querySelector<HTMLElement>(`[id="${getTabId(index)}"]`)?.focus();
+    },
+    [getTabId]
+  );
 
-  const [active, setActive] = useState(defaultTabIndex);
-  const activeItem = items[active];
   const handleTabClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
     const index = Number(event.currentTarget.dataset.index ?? "0");
     setActive(index);
   }, []);
 
-  if (!items.length) {
+  const handleTabKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLButtonElement>) => {
+      if (!items.length) {
+        return;
+      }
+
+      const index = Number(event.currentTarget.dataset.index ?? activeIndex);
+      const lastIndex = items.length - 1;
+      let nextIndex: number | null = null;
+
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight": {
+          nextIndex = index === lastIndex ? 0 : index + 1;
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          nextIndex = index === 0 ? lastIndex : index - 1;
+          break;
+        }
+        case "End": {
+          nextIndex = lastIndex;
+          break;
+        }
+        case "Home": {
+          nextIndex = 0;
+          break;
+        }
+        default: {
+          return;
+        }
+      }
+
+      event.preventDefault();
+      setActive(nextIndex);
+      focusTab(nextIndex);
+    },
+    [activeIndex, focusTab, items.length]
+  );
+
+  if (!activeItem) {
     return null;
   }
 
@@ -53,35 +145,48 @@ export const Tabs = ({
         borderBottom && "border-b-2"
       )}
     >
-      <div className="flex gap-2 bg-muted p-2" role="tablist">
+      <div
+        aria-orientation="horizontal"
+        className="flex gap-2 bg-muted p-2"
+        role="tablist"
+      >
         {items.map((item, index) => {
-          const tabLabel =
-            item.props.title ?? item.props.label ?? `Tab ${index + 1}`;
+          const isSelected = index === activeIndex;
+
           return (
             <button
-              aria-selected={index === active}
+              aria-controls={getPanelId(index)}
+              aria-selected={isSelected}
               className={cn(
-                "inline-flex items-center gap-1.5 rounded-full border-none bg-transparent px-3 py-2 text-sm cursor-pointer transition-colors",
-                index === active
+                "inline-flex cursor-pointer items-center gap-1.5 rounded-full border-none bg-transparent px-3 py-2 text-sm transition-colors",
+                isSelected
                   ? "bg-primary text-primary-foreground"
                   : "text-muted-foreground hover:text-foreground"
               )}
               data-index={index}
-              key={String(item.key ?? tabLabel)}
+              id={getTabId(index)}
+              key={item.key}
               onClick={handleTabClick}
+              onKeyDown={handleTabKeyDown}
               role="tab"
+              tabIndex={isSelected ? 0 : -1}
               type="button"
             >
-              {item.props.icon ? (
-                <span className="shrink-0">{item.props.icon}</span>
+              {item.element.props.icon ? (
+                <span className="shrink-0">{item.element.props.icon}</span>
               ) : null}
-              {tabLabel}
+              {item.label}
             </button>
           );
         })}
       </div>
-      <div className="p-4" role="tabpanel">
-        {activeItem}
+      <div
+        aria-labelledby={getTabId(activeIndex)}
+        id={getPanelId(activeIndex)}
+        role="tabpanel"
+        tabIndex={0}
+      >
+        {activeItem.element}
       </div>
     </div>
   );

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

@@ -0,0 +1,122 @@
+"use client";
+
+import {
+  Checkmark1Icon as CheckIcon,
+  CopySimpleIcon as CopyIcon,
+} 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";
+
+import { Button as ButtonPrimitive } from "@/components/animate-ui/primitives/buttons/button";
+import type { ButtonProps as ButtonPrimitiveProps } from "@/components/animate-ui/primitives/buttons/button";
+import { useControlledState } from "@/hooks/use-controlled-state";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "flex shrink-0 items-center justify-center rounded-md outline-none transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] 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:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "size-9",
+        lg: "size-10 rounded-md",
+        sm: "size-8 rounded-md",
+        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",
+        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",
+        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",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+      },
+    },
+  }
+);
+
+type CopyButtonProps = Omit<ButtonPrimitiveProps, "children"> &
+  VariantProps<typeof buttonVariants> & {
+    content: string;
+    copied?: boolean;
+    delay?: number;
+    onCopiedChange?: (copied: boolean, content?: string) => void;
+  };
+
+const CopyButton = ({
+  className,
+  content,
+  copied,
+  onCopiedChange,
+  onClick,
+  variant,
+  size,
+  delay = 3000,
+  ...props
+}: CopyButtonProps) => {
+  const [isCopied, setIsCopied] = useControlledState({
+    onChange: onCopiedChange,
+    value: copied,
+  });
+
+  const handleCopy = useCallback(
+    async (e: MouseEvent<HTMLButtonElement>) => {
+      onClick?.(e);
+      if (copied) {
+        return;
+      }
+      if (content) {
+        try {
+          await navigator.clipboard.writeText(content);
+          setIsCopied(true);
+          onCopiedChange?.(true, content);
+          setTimeout(() => {
+            setIsCopied(false);
+            onCopiedChange?.(false);
+          }, delay);
+        } catch (error) {
+          console.error("Error copying command", error);
+        }
+      }
+    },
+    [onClick, copied, content, setIsCopied, onCopiedChange, delay]
+  );
+
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+
+  return (
+    <ButtonPrimitive
+      className={cn(buttonVariants({ className, size, variant }))}
+      data-slot="copy-button"
+      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>
+    </ButtonPrimitive>
+  );
+};
+
+export { CopyButton };

package/docs/components/ui/input.tsx

@@ -72,7 +72,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 clearClassName
               )}
               onClick={onClear}
-              tabIndex={-1}
               type="button"
             >
               <CircleXFilledIcon className="size-5 text-muted-foreground/50" />