blodemd 0.0.11 → 0.0.13

package/docs/components/ui/dialog.tsx

@@ -4,6 +4,7 @@ import { XIcon } from "blode-icons-react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 import * as React from "react";
 
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 const Dialog = ({
@@ -12,12 +13,24 @@ const Dialog = ({
   <DialogPrimitive.Root data-slot="dialog" {...props} />
 );
 
+const DialogTrigger = ({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) => (
+  <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+);
+
 const DialogPortal = ({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) => (
   <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 );
 
+const DialogClose = ({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) => (
+  <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+);
+
 const DialogOverlay = ({
   className,
   ...props
@@ -72,6 +85,31 @@ const DialogHeader = ({ className, ...props }: React.ComponentProps<"div">) => (
   />
 );
 
+const DialogFooter = ({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}) => (
+  <div
+    data-slot="dialog-footer"
+    className={cn(
+      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    {showCloseButton && (
+      <DialogPrimitive.Close asChild>
+        <Button variant="outline">Close</Button>
+      </DialogPrimitive.Close>
+    )}
+  </div>
+);
+
 const DialogTitle = ({
   className,
   ...props
@@ -94,4 +132,15 @@ const DialogDescription = ({
   />
 );
 
-export { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle };
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/docs/components/ui/input.tsx

@@ -1,104 +1,23 @@
-"use client";
-
-import { CircleXFilledIcon } from "blode-icons-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  clearable?: boolean;
-  clearClassName?: string;
-  hasError?: boolean;
-  leftAddon?: React.ReactNode | null;
-  leftControl?: React.ReactNode | null;
-  onClear?: () => void;
-  rightAddon?: React.ReactNode | null;
-  rightControl?: React.ReactNode | null;
-}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      clearClassName,
-      hasError,
-      clearable,
-      onClear,
-      leftAddon,
-      rightAddon,
-      leftControl,
-      rightControl,
-      ...props
-    },
-    ref
-  ) => (
-    <label
-      className={cn("relative w-full", {
-        "input-group": !!leftAddon || !!rightAddon,
-      })}
-    >
-      {leftAddon && (
-        <span className="shrink-0 cursor-pointer">{leftAddon}</span>
-      )}
-
-      {leftControl && (
-        <div className="absolute top-0 left-0 flex h-full flex-row place-items-center items-center justify-center">
-          {leftControl}
-        </div>
-      )}
-
-      <div className="w-full">
-        <input
-          className={cn(
-            "input flex h-[var(--field-height)] w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-normal font-sans text-base text-foreground leading-snug shadow-input transition-colors placeholder:text-placeholder-foreground hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-            {
-              "border-destructive-foreground": hasError,
-              "hover:border-input! focus:border-input!": props.readOnly,
-              "pr-12": clearable && !!props.value && rightControl,
-              "pr-9": clearable && !!props.value,
-            },
-            className
-          )}
-          ref={ref}
-          {...props}
-        />
-
-        {clearable && !!props.value && (
-          <div className="absolute top-0 right-0 flex flex-row gap-1 pr-3">
-            <button
-              aria-label="clear input"
-              className={cn(
-                "flex h-[var(--field-height)] cursor-pointer items-center justify-center p-0! text-muted-foreground",
-                clearClassName
-              )}
-              onClick={onClear}
-              type="button"
-            >
-              <CircleXFilledIcon className="size-5 text-muted-foreground/50" />
-            </button>
-          </div>
-        )}
-      </div>
-
-      {rightControl && (
-        <div
-          className={cn(
-            "absolute top-0 right-0 flex h-full flex-row place-items-center items-center justify-center",
-            {
-              "right-9": clearable && !!props.value,
-            }
-          )}
-        >
-          {rightControl}
-        </div>
-      )}
-
-      {rightAddon && (
-        <span className="shrink-0 cursor-pointer">{rightAddon}</span>
-      )}
-    </label>
-  )
+const Input = ({
+  className,
+  type,
+  ...props
+}: React.ComponentProps<"input">) => (
+  <input
+    type={type}
+    data-slot="input"
+    className={cn(
+      "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+      "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",
+      className
+    )}
+    {...props}
+  />
 );
-Input.displayName = "Input";
 
 export { Input };

package/docs/components/ui/kbd.tsx

@@ -0,0 +1,98 @@
+import {
+  ArrowCornerDownLeftIcon,
+  ArrowDownIcon,
+  ArrowLeftXIcon,
+  ArrowUpIcon,
+  ArrowWall2RightIcon,
+  CmdIcon,
+  ControlIcon,
+  OptIcon,
+  ShiftIcon,
+} from "blode-icons-react";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+type KbdIcon =
+  | "mod"
+  | "shift"
+  | "enter"
+  | "command"
+  | "ctrl"
+  | "alt"
+  | "tab"
+  | "backspace"
+  | "up"
+  | "down";
+
+const kbdVariants = cva(
+  "pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1.5 font-medium font-sans text-xs ring-1 ring-inset [&_svg:not([class*='size-'])]:size-3",
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default:
+          "bg-muted text-muted-foreground ring-border [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background [[data-slot=tooltip-content]_&]:ring-background/20 dark:[[data-slot=tooltip-content]_&]:bg-background/10 dark:[[data-slot=tooltip-content]_&]:ring-background/10",
+        tooltip:
+          "bg-background/20 text-background ring-background/20 dark:bg-background/10 dark:ring-background/10",
+      },
+    },
+  }
+);
+
+interface KbdProps
+  extends
+    React.ComponentPropsWithoutRef<"kbd">,
+    VariantProps<typeof kbdVariants> {
+  icon?: KbdIcon;
+}
+
+const iconMap: Record<KbdIcon, React.ReactNode> = {
+  alt: <OptIcon className="size-3" />,
+  backspace: <ArrowLeftXIcon className="size-3" />,
+  command: <CmdIcon className="size-3" />,
+  ctrl: <ControlIcon className="size-3" />,
+  down: <ArrowDownIcon className="size-3" />,
+  enter: <ArrowCornerDownLeftIcon className="size-3" />,
+  mod: <CmdIcon className="size-3" />,
+  shift: <ShiftIcon className="size-3" />,
+  tab: <ArrowWall2RightIcon className="size-3" />,
+  up: <ArrowUpIcon className="size-3" />,
+};
+
+const Kbd = React.forwardRef<React.ElementRef<"kbd">, KbdProps>(
+  ({ className, variant, children, icon, ...props }, ref) => {
+    const content = icon ? iconMap[icon] : children;
+
+    return (
+      <kbd
+        className={cn(kbdVariants({ variant }), className)}
+        data-slot="kbd"
+        ref={ref}
+        {...props}
+      >
+        {content}
+      </kbd>
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+
+const KbdGroup = React.forwardRef<
+  React.ElementRef<"kbd">,
+  React.ComponentPropsWithoutRef<"kbd">
+>(({ className, ...props }, ref) => (
+  <kbd
+    className={cn("inline-flex items-center gap-1", className)}
+    data-slot="kbd-group"
+    ref={ref}
+    {...props}
+  />
+));
+KbdGroup.displayName = "KbdGroup";
+
+export { Kbd, KbdGroup };

package/docs/components/ui/morph-icon.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { motion, useReducedMotion } from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+type MorphIconName = "cross" | "menu";
+
+interface MorphIconProps extends React.SVGAttributes<SVGSVGElement> {
+  icon: MorphIconName;
+  size?: number;
+  strokeWidth?: number;
+}
+
+const ICONS = {
+  cross: {
+    opacity: [1, 1, 0] as const,
+    paths: ["M2.5 2.5L11.5 11.5", "M11.5 2.5L2.5 11.5", "M7 7L7 7"] as const,
+  },
+  menu: {
+    opacity: [1, 1, 1] as const,
+    paths: ["M1 2.5L13 2.5", "M1 7L13 7", "M1 11.5L13 11.5"] as const,
+  },
+} as const;
+
+const transition = {
+  duration: 0.3,
+  ease: [0.4, 0, 0.2, 1] as const,
+};
+
+const instantTransition = { duration: 0 };
+
+export const MorphIcon = ({
+  icon,
+  size = 32,
+  strokeWidth = 2,
+  className,
+  style,
+  ...props
+}: MorphIconProps) => {
+  const prefersReducedMotion = useReducedMotion();
+  const def = ICONS[icon];
+  const [p0, p1, p2] = def.paths;
+  const [o0, o1, o2] = def.opacity;
+  const t = prefersReducedMotion ? instantTransition : transition;
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn("text-current", className)}
+      fill="none"
+      height={size}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth={strokeWidth}
+      style={style}
+      viewBox="0 0 14 14"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <motion.path
+        initial={false}
+        animate={{ d: p0, opacity: o0 }}
+        transition={t}
+      />
+      <motion.path
+        initial={false}
+        animate={{ d: p1, opacity: o1 }}
+        transition={t}
+      />
+      <motion.path
+        initial={false}
+        animate={{ d: p2, opacity: o2 }}
+        transition={t}
+      />
+    </svg>
+  );
+};

package/docs/components/ui/popover.tsx

@@ -1,15 +1,92 @@
 "use client";
 
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import type * as React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+type PopoverInteractOutsideEvent = Event & {
+  preventDefault: () => void;
+};
+
+interface PopoverContextType {
+  anchor: HTMLElement | null;
+  setAnchor: (anchor: HTMLElement | null) => void;
+  setOnInteractOutside: (
+    handler?: (event: PopoverInteractOutsideEvent) => void
+  ) => void;
+}
+
+const PopoverContext = React.createContext<PopoverContextType | undefined>(
+  undefined
+);
+
+const usePopoverContext = () => React.useContext(PopoverContext);
+
+const setRef = <T,>(ref: React.Ref<T> | undefined, value: T) => {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+
+  if (ref && "current" in ref) {
+    ref.current = value;
+  }
+};
+
 const Popover = ({
+  onOpenChange,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) => (
-  <PopoverPrimitive.Root data-slot="popover" {...props} />
-);
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) => {
+  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);
+  const onInteractOutsideRef = React.useRef<
+    ((event: PopoverInteractOutsideEvent) => void) | null
+  >(null);
+
+  const handleOpenChange = React.useCallback<
+    NonNullable<
+      React.ComponentProps<typeof PopoverPrimitive.Root>["onOpenChange"]
+    >
+  >(
+    (nextOpen, eventDetails) => {
+      if (!nextOpen && eventDetails.reason === "outside-press") {
+        const interactHandler = onInteractOutsideRef.current;
+
+        if (interactHandler) {
+          const wrappedEvent = Object.create(
+            eventDetails.event
+          ) as PopoverInteractOutsideEvent;
+          wrappedEvent.preventDefault = () => eventDetails.cancel();
+          interactHandler(wrappedEvent);
+        }
+      }
+
+      onOpenChange?.(nextOpen, eventDetails);
+    },
+    [onOpenChange]
+  );
+
+  const contextValue = React.useMemo<PopoverContextType>(
+    () => ({
+      anchor,
+      setAnchor,
+      setOnInteractOutside: (handler) => {
+        onInteractOutsideRef.current = handler ?? null;
+      },
+    }),
+    [anchor]
+  );
+
+  return (
+    <PopoverContext.Provider value={contextValue}>
+      <PopoverPrimitive.Root
+        data-slot="popover"
+        onOpenChange={handleOpenChange}
+        {...props}
+      />
+    </PopoverContext.Provider>
+  );
+};
 
 const PopoverTrigger = ({
   asChild = false,
@@ -19,7 +96,7 @@ const PopoverTrigger = ({
   asChild?: boolean;
 }) => {
   const render =
-    asChild && children && typeof children === "object"
+    asChild && React.isValidElement(children)
       ? (children as React.ReactElement)
       : undefined;
 
@@ -34,39 +111,157 @@ const PopoverTrigger = ({
   );
 };
 
+type PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &
+  Pick<
+    React.ComponentProps<typeof PopoverPrimitive.Positioner>,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  > & {
+    asChild?: boolean;
+    onInteractOutside?: (event: PopoverInteractOutsideEvent) => void;
+    onOpenAutoFocus?: (event: Event) => void;
+  };
+
 const PopoverContent = ({
+  asChild = false,
   children,
   className,
   align = "center",
   alignOffset = 0,
   side = "bottom",
   sideOffset = 4,
+  initialFocus,
+  onInteractOutside,
+  onOpenAutoFocus,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Popup> &
-  Pick<
-    React.ComponentProps<typeof PopoverPrimitive.Positioner>,
-    "align" | "alignOffset" | "side" | "sideOffset"
-  >) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Positioner
-      align={align}
-      alignOffset={alignOffset}
-      className="isolate z-50"
-      side={side}
-      sideOffset={sideOffset}
-    >
-      <PopoverPrimitive.Popup
-        className={cn(
-          "z-50 w-72 origin-(--transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-soft outline-hidden data-closed:animate-out data-open:animate-in data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )}
-        data-slot="popover-content"
-        {...props}
+}: PopoverContentProps) => {
+  const popoverContext = usePopoverContext();
+
+  React.useEffect(() => {
+    popoverContext?.setOnInteractOutside(onInteractOutside);
+
+    return () => {
+      popoverContext?.setOnInteractOutside(undefined);
+    };
+  }, [onInteractOutside, popoverContext]);
+
+  React.useEffect(() => {
+    if (!onOpenAutoFocus) {
+      return;
+    }
+
+    const event = new Event("openAutoFocus", { cancelable: true });
+    onOpenAutoFocus(event);
+  }, [onOpenAutoFocus]);
+
+  const render =
+    asChild && React.isValidElement(children)
+      ? (children as React.ReactElement)
+      : undefined;
+
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={popoverContext?.anchor}
+        className="isolate z-50"
+        side={side}
+        sideOffset={sideOffset}
       >
-        {children}
-      </PopoverPrimitive.Popup>
-    </PopoverPrimitive.Positioner>
-  </PopoverPrimitive.Portal>
+        <PopoverPrimitive.Popup
+          className={cn(
+            "data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-soft outline-hidden data-closed:animate-out data-open:animate-in",
+            className
+          )}
+          data-slot="popover-content"
+          initialFocus={onOpenAutoFocus ? false : initialFocus}
+          render={render}
+          {...props}
+        >
+          {asChild ? null : children}
+        </PopoverPrimitive.Popup>
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+};
+
+const PopoverAnchor = ({
+  asChild = false,
+  children,
+  ref,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean;
+}) => {
+  const popoverContext = usePopoverContext();
+
+  const handleRef = React.useCallback(
+    (node: HTMLElement | null) => {
+      popoverContext?.setAnchor(node);
+      setRef(ref as React.Ref<HTMLElement> | undefined, node);
+    },
+    [popoverContext, ref]
+  );
+
+  if (asChild && React.isValidElement(children)) {
+    const child = children as React.ReactElement<{
+      ref?: React.Ref<HTMLElement>;
+      [key: string]: unknown;
+    }>;
+
+    // oxlint-disable-next-line eslint-plugin-react/no-clone-element -- asChild escape hatch
+    return React.cloneElement(child, {
+      ...props,
+      ref: (node: HTMLElement | null) => {
+        setRef(child.props.ref, node);
+        handleRef(node);
+      },
+    });
+  }
+
+  return (
+    <div data-slot="popover-anchor" ref={handleRef} {...props}>
+      {children}
+    </div>
+  );
+};
+
+const PopoverHeader = ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => (
+  <div
+    className={cn("flex flex-col gap-1 text-sm", className)}
+    data-slot="popover-header"
+    {...props}
+  />
+);
+
+const PopoverTitle = ({ className, ...props }: React.ComponentProps<"h2">) => (
+  <div
+    className={cn("font-medium", className)}
+    data-slot="popover-title"
+    {...props}
+  />
+);
+
+const PopoverDescription = ({
+  className,
+  ...props
+}: React.ComponentProps<"p">) => (
+  <p
+    className={cn("text-muted-foreground", className)}
+    data-slot="popover-description"
+    {...props}
+  />
 );
 
-export { Popover, PopoverTrigger, PopoverContent };
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+};

package/docs/components/ui/search.tsx

@@ -319,11 +319,6 @@ export const Search = ({ basePath }: { basePath: string }) => {
     [closeSearch]
   );
 
-  const handleOpenAutoFocus = useCallback((event: Event) => {
-    event.preventDefault();
-    inputRef.current?.focus();
-  }, []);
-
   const warmSearch = useCallback(async () => {
     try {
       await loadSearchItems();
@@ -442,15 +437,11 @@ export const Search = ({ basePath }: { basePath: string }) => {
       >
         <span className="hidden lg:inline-flex">Search documentation...</span>
         <span className="inline-flex lg:hidden">Search...</span>
-        <span className="ml-auto hidden pr-3 text-[11px] text-muted-foreground sm:inline-flex">
-          Cmd K
-        </span>
       </button>
       <Dialog onOpenChange={handleOpenChange} open={open}>
         <DialogContent
           className="max-w-2xl gap-0 overflow-hidden p-0"
           onKeyDown={handleDialogKeyDown}
-          onOpenAutoFocus={handleOpenAutoFocus}
           showCloseButton={false}
         >
           <DialogTitle className="sr-only">Search documentation</DialogTitle>