blodemd 0.0.4 → 0.0.6

package/docs/components/mdx/view.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { isValidElement, useCallback, useMemo, useState } from "react";
+import type { MouseEvent, ReactElement, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface ViewItemProps {
+  title: string;
+  icon?: ReactNode;
+  children: ReactNode;
+}
+
+export const View = ({ children }: ViewItemProps) => children as ReactElement;
+
+interface ViewGroupProps {
+  children: ReactNode;
+}
+
+export const ViewGroup = ({ children }: ViewGroupProps) => {
+  const items = useMemo(() => {
+    const nodes = Array.isArray(children) ? children : [children];
+    return nodes.filter(
+      (child): child is ReactElement<ViewItemProps> =>
+        isValidElement<ViewItemProps>(child) && child.type === View
+    );
+  }, [children]);
+
+  const [active, setActive] = useState(0);
+
+  const handleSelect = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+    const index = Number(event.currentTarget.dataset.index ?? "0");
+    setActive(index);
+  }, []);
+
+  if (!items.length) {
+    return children as ReactElement;
+  }
+
+  return (
+    <div className="my-4">
+      <div className="mb-4 flex flex-wrap gap-2">
+        {items.map((item, index) => (
+          <button
+            className={cn(
+              "inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
+              index === active
+                ? "bg-primary text-primary-foreground"
+                : "bg-muted text-muted-foreground hover:text-foreground"
+            )}
+            data-index={index}
+            key={item.props.title}
+            onClick={handleSelect}
+            type="button"
+          >
+            {item.props.icon ? (
+              <span className="shrink-0">{item.props.icon}</span>
+            ) : null}
+            {item.props.title}
+          </button>
+        ))}
+      </div>
+      <div>{items[active]}</div>
+    </div>
+  );
+};

package/docs/components/providers.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export const Providers = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider
+    attribute="class"
+    defaultTheme="system"
+    disableTransitionOnChange
+    enableColorScheme
+    storageKey="theme"
+  >
+    {children}
+  </ThemeProvider>
+);

package/docs/components/ui/breadcrumb.tsx

@@ -0,0 +1,92 @@
+import { Slot } from "radix-ui";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = ({ ...props }: ComponentProps<"nav">) => (
+  <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+);
+
+const BreadcrumbList = ({ className, ...props }: 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",
+      className
+    )}
+    {...props}
+  />
+);
+
+const BreadcrumbItem = ({ className, ...props }: ComponentProps<"li">) => (
+  <li
+    data-slot="breadcrumb-item"
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+);
+
+const BreadcrumbLink = ({
+  asChild,
+  className,
+  ...props
+}: ComponentProps<"a"> & { asChild?: boolean }) => {
+  const Comp = asChild ? Slot.Root : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  );
+};
+
+const BreadcrumbPage = ({ className, ...props }: ComponentProps<"span">) => (
+  <span
+    data-slot="breadcrumb-page"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+);
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: ComponentProps<"li">) => (
+  <li
+    data-slot="breadcrumb-separator"
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...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>
+    )}
+  </li>
+);
+
+export {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};

package/docs/components/ui/button.tsx

@@ -0,0 +1,90 @@
+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 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",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    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",
+      },
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/95 aria-pressed:bg-primary/95",
+        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",
+        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",
+        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",
+        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",
+      },
+    },
+  }
+);
+
+const Button = ({
+  className,
+  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,
+    },
+  });
+
+export { Button, buttonVariants };

package/docs/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = ({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) => (
+  <div
+    className={cn(
+      "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-card-foreground text-sm ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 has-data-[slot=card-footer]:pb-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+      className
+    )}
+    data-size={size}
+    data-slot="card"
+    {...props}
+  />
+);
+
+const CardHeader = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+      className
+    )}
+    data-slot="card-header"
+    {...props}
+  />
+);
+
+const CardTitle = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "font-medium text-base leading-snug group-data-[size=sm]/card:text-sm",
+      className
+    )}
+    data-slot="card-title"
+    {...props}
+  />
+);
+
+const CardDescription = ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => (
+  <div
+    className={cn("text-muted-foreground text-sm", className)}
+    data-slot="card-description"
+    {...props}
+  />
+);
+
+const CardAction = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+      className
+    )}
+    data-slot="card-action"
+    {...props}
+  />
+);
+
+const CardContent = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+    data-slot="card-content"
+    {...props}
+  />
+);
+
+const CardFooter = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+      className
+    )}
+    data-slot="card-footer"
+    {...props}
+  />
+);
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

package/docs/components/ui/command.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { SearchIcon } from "blode-icons-react";
+import { Command as CommandPrimitive } from "cmdk";
+import type * as React from "react";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+const Command = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) => (
+  <CommandPrimitive
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    data-slot="command"
+    {...props}
+  />
+);
+
+const CommandDialog = ({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+  className?: string;
+  showCloseButton?: boolean;
+} & Omit<React.ComponentProps<typeof Dialog>, "children">) => (
+  <Dialog {...props}>
+    <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>
+    </DialogContent>
+  </Dialog>
+);
+
+const CommandInput = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) => (
+  <div
+    className="flex h-9 items-center gap-2 border-b px-3"
+    data-slot="command-input-wrapper"
+  >
+    <SearchIcon className="size-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      data-slot="command-input"
+      {...props}
+    />
+  </div>
+);
+
+const CommandList = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) => (
+  <CommandPrimitive.List
+    className={cn(
+      "max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden",
+      className
+    )}
+    data-slot="command-list"
+    {...props}
+  />
+);
+
+const CommandEmpty = ({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) => (
+  <CommandPrimitive.Empty
+    className="py-6 text-center text-sm"
+    data-slot="command-empty"
+    {...props}
+  />
+);
+
+const CommandGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) => (
+  <CommandPrimitive.Group
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs",
+      className
+    )}
+    data-slot="command-group"
+    {...props}
+  />
+);
+
+const CommandItem = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) => (
+  <CommandPrimitive.Item
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      className
+    )}
+    data-slot="command-item"
+    {...props}
+  />
+);
+
+export {
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+};

package/docs/components/ui/dialog.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { XIcon } from "blode-icons-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = ({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) => (
+  <DialogPrimitive.Root data-slot="dialog" {...props} />
+);
+
+const DialogPortal = ({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) => (
+  <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+);
+
+const DialogOverlay = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) => (
+  <DialogPrimitive.Overlay
+    data-slot="dialog-overlay"
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+);
+
+const DialogContent = ({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) => (
+  <DialogPortal data-slot="dialog-portal">
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      data-slot="dialog-content"
+      className={cn(
+        "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close
+          data-slot="dialog-close"
+          className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+        >
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+);
+
+const DialogHeader = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    data-slot="dialog-header"
+    className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+    {...props}
+  />
+);
+
+const DialogTitle = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) => (
+  <DialogPrimitive.Title
+    data-slot="dialog-title"
+    className={cn("text-lg leading-none font-semibold", className)}
+    {...props}
+  />
+);
+
+const DialogDescription = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) => (
+  <DialogPrimitive.Description
+    data-slot="dialog-description"
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+);
+
+export { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle };