blodemd 0.0.5 → 0.0.7

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 };

package/docs/components/ui/field.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import { useMemo } from "react";
+
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const FieldSet = ({
+  className,
+  ...props
+}: React.ComponentProps<"fieldset">) => (
+  <fieldset
+    className={cn(
+      "flex flex-col gap-6",
+      "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+      className
+    )}
+    data-slot="field-set"
+    {...props}
+  />
+);
+
+const FieldLegend = ({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) => (
+  <legend
+    className={cn(
+      "mb-3 font-medium",
+      "data-[variant=legend]:text-base",
+      "data-[variant=label]:text-sm",
+      className
+    )}
+    data-slot="field-legend"
+    data-variant={variant}
+    {...props}
+  />
+);
+
+const FieldGroup = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+      className
+    )}
+    data-slot="field-group"
+    {...props}
+  />
+);
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    defaultVariants: {
+      orientation: "vertical",
+    },
+    variants: {
+      orientation: {
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "@md/field-group:flex-row flex-col @md/field-group:items-center @md/field-group:[&>*]:w-auto [&>*]:w-full [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+      },
+    },
+  }
+);
+
+const Field = ({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) => (
+  <div
+    className={cn(fieldVariants({ orientation }), className)}
+    data-orientation={orientation}
+    data-slot="field"
+    role="group"
+    {...props}
+  />
+);
+
+const FieldContent = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+      className
+    )}
+    data-slot="field-content"
+    {...props}
+  />
+);
+
+const FieldLabel = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) => (
+  <Label
+    className={cn(
+      "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+      "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+      "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+      className
+    )}
+    data-slot="field-label"
+    {...props}
+  />
+);
+
+const FieldTitle = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50",
+      className
+    )}
+    data-slot="field-label"
+    {...props}
+  />
+);
+
+const FieldDescription = ({
+  className,
+  ...props
+}: React.ComponentProps<"p">) => (
+  <p
+    className={cn(
+      "font-normal text-muted-foreground text-sm leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+      "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
+      "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+      className
+    )}
+    data-slot="field-description"
+    {...props}
+  />
+);
+
+const FieldSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode;
+}) => (
+  <div
+    className={cn(
+      "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+      className
+    )}
+    data-content={!!children}
+    data-slot="field-separator"
+    {...props}
+  >
+    <Separator className="absolute inset-0 top-1/2" />
+    {children && (
+      <span
+        className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+        data-slot="field-separator-content"
+      >
+        {children}
+      </span>
+    )}
+  </div>
+);
+
+const FieldError = ({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: ({ message?: string } | undefined)[];
+}) => {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (!errors?.length) {
+      return null;
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ];
+
+    if (uniqueErrors?.length === 1) {
+      return uniqueErrors[0]?.message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error) =>
+            error?.message && <li key={error.message}>{error.message}</li>
+        )}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn("font-normal text-destructive text-sm", className)}
+      data-slot="field-error"
+      role="alert"
+      {...props}
+    >
+      {content}
+    </div>
+  );
+};
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+};

package/docs/components/ui/input.tsx

@@ -0,0 +1,105 @@
+"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}
+              tabIndex={-1}
+              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>
+  )
+);
+Input.displayName = "Input";
+
+export { Input };

package/docs/components/ui/label.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Label as LabelPrimitive } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Label = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) => (
+  <LabelPrimitive.Root
+    data-slot="label"
+    className={cn(
+      "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+);
+
+export { Label };

package/docs/components/ui/popover.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Popover = ({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) => (
+  <PopoverPrimitive.Root data-slot="popover" {...props} />
+);
+
+const PopoverTrigger = ({
+  asChild = false,
+  children,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger> & {
+  asChild?: boolean;
+}) => {
+  const render =
+    asChild && children && typeof children === "object"
+      ? (children as React.ReactElement)
+      : undefined;
+
+  return (
+    <PopoverPrimitive.Trigger
+      data-slot="popover-trigger"
+      render={render}
+      {...props}
+    >
+      {asChild ? null : children}
+    </PopoverPrimitive.Trigger>
+  );
+};
+
+const PopoverContent = ({
+  children,
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...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}
+      >
+        {children}
+      </PopoverPrimitive.Popup>
+    </PopoverPrimitive.Positioner>
+  </PopoverPrimitive.Portal>
+);
+
+export { Popover, PopoverTrigger, PopoverContent };