@peaske7/readit 0.1.7 → 0.2.0

package/src/components/ui/ActionLink.tsx

@@ -1,32 +1,28 @@
-import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
-const actionLinkVariants = cva(
-  "cursor-pointer transition-colors duration-150",
-  {
-    variants: {
-      variant: {
-        default: "hover:text-zinc-600",
-        destructive: "hover:text-red-500",
-      },
-    },
-    defaultVariants: { variant: "default" },
-  },
-);
+const variantStyles = {
+  default: "hover:text-zinc-600",
+  destructive: "hover:text-red-500",
+} as const;
+
+type ActionLinkVariant = keyof typeof variantStyles;
 
 function ActionLink({
   className,
-  variant,
+  variant = "default",
   ...props
-}: React.ComponentProps<"button"> & VariantProps<typeof actionLinkVariants>) {
+}: React.ComponentProps<"button"> & { variant?: ActionLinkVariant }) {
   return (
     <button
       type="button"
-      data-slot="action-link"
-      className={cn(actionLinkVariants({ variant, className }))}
+      className={cn(
+        "cursor-pointer transition-colors duration-150",
+        variantStyles[variant],
+        className,
+      )}
       {...props}
     />
   );
 }
 
-export { ActionLink, actionLinkVariants };
+export { ActionLink };

package/src/components/ui/Button.tsx

@@ -1,55 +1,54 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors duration-150 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-blue-600 text-white hover:bg-blue-700",
-        secondary:
-          "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 hover:bg-zinc-200 dark:hover:bg-zinc-700",
-        outline:
-          "border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800",
-        ghost:
-          "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100",
-        destructive: "bg-red-600 text-white hover:bg-red-700",
-        link: "text-zinc-600 dark:text-zinc-400 underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4",
-        sm: "h-8 px-3 text-xs",
-        lg: "h-10 px-6",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
+const baseStyles =
+  "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors duration-150 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+const variantStyles = {
+  default: "bg-blue-600 text-white hover:bg-blue-700",
+  secondary:
+    "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 hover:bg-zinc-200 dark:hover:bg-zinc-700",
+  outline:
+    "border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800",
+  ghost:
+    "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100",
+  destructive: "bg-red-600 text-white hover:bg-red-700",
+  link: "text-zinc-600 dark:text-zinc-400 underline-offset-4 hover:underline",
+} as const;
+
+const sizeStyles = {
+  default: "h-9 px-4",
+  sm: "h-8 px-3 text-xs",
+  lg: "h-10 px-6",
+  icon: "size-9",
+} as const;
+
+type ButtonVariant = keyof typeof variantStyles;
+type ButtonSize = keyof typeof sizeStyles;
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
 
 function Button({
   className,
-  variant,
-  size,
-  asChild = false,
+  variant = "default",
+  size = "default",
   ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
+}: ButtonProps) {
   return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+    <button
+      type="button"
+      className={cn(
+        baseStyles,
+        variantStyles[variant],
+        sizeStyles[size],
+        className,
+      )}
       {...props}
     />
   );
 }
 
-export { Button, buttonVariants };
+export type { ButtonProps, ButtonSize, ButtonVariant };
+export { Button };

package/src/components/ui/Dialog.tsx

@@ -1,95 +1,84 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
-import { use } from "react";
-import { LayoutContext } from "../../contexts/LayoutContext";
+import { useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
-import { FontFamilies } from "../../types";
-import { buttonVariants } from "./Button";
-import { textVariants } from "./Text";
 
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+interface DialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
 }
 
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
+function Dialog({ open, onOpenChange, children }: DialogProps) {
+  const ref = useRef<HTMLDialogElement>(null);
 
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
 
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+
+    const handleClose = () => onOpenChange(false);
+    dialog.addEventListener("close", handleClose);
+    return () => dialog.removeEventListener("close", handleClose);
+  }, [onOpenChange]);
+
+  const handleClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    if (e.target === ref.current) onOpenChange(false);
+  };
 
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
   return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/20 dark:bg-black/40 backdrop-blur-sm",
-        className,
-      )}
-      {...props}
-    />
+    <dialog
+      ref={ref}
+      onClick={handleClick}
+      className="backdrop:bg-black/20 dark:backdrop:bg-black/40 backdrop:backdrop-blur-sm bg-transparent p-0 m-auto max-w-none"
+    >
+      {open ? children : null}
+    </dialog>
   );
 }
 
 function DialogContent({
   className,
   children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
+  onClose,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  onClose?: () => void;
 }) {
   return (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2",
-          "bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40 rounded-xl",
-          "flex flex-col animate-in",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className={cn(
-              buttonVariants({ variant: "ghost", size: "icon" }),
-              "absolute top-3 right-3 size-7",
-            )}
-          >
-            <X className="w-4 h-4" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
+    <div
+      className={cn(
+        "w-full bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40 rounded-xl flex flex-col",
+        className,
+      )}
+    >
+      {children}
+      {onClose && (
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute top-3 right-3 size-7 inline-flex items-center justify-center rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
+    </div>
   );
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot="dialog-header"
       className={cn(
         "flex items-center justify-between pl-4 pr-12 py-3 border-b border-zinc-100 dark:border-zinc-800",
         className,
@@ -101,56 +90,27 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 
 function DialogTitle({
   className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  const layout = use(LayoutContext);
-  const fontClass = layout
-    ? layout.fontFamily === FontFamilies.SANS_SERIF
-      ? "font-sans"
-      : "font-serif"
-    : undefined;
-
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn(textVariants({ variant: "section" }), fontClass, className)}
-      {...props}
-    />
-  );
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
   return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn(textVariants({ variant: "caption" }), "text-sm", className)}
-      {...props}
-    />
+    <h2
+      className={cn(
+        "text-sm font-medium text-zinc-900 dark:text-zinc-100",
+        className,
+      )}
+    >
+      {children}
+    </h2>
   );
 }
 
 function DialogBody({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="dialog-body"
-      className={cn("flex-1 overflow-auto p-4", className)}
-      {...props}
-    />
+    <div className={cn("flex-1 overflow-auto p-4", className)} {...props} />
   );
 }
 
-export {
-  Dialog,
-  DialogBody,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};
+export { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle };

package/src/components/ui/DropdownMenu.tsx

@@ -1,114 +1,158 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { createContext, use, useCallback, useRef, useState } from "react";
+import { useClickOutside } from "../../hooks/useClickOutside";
 import { cn } from "../../lib/utils";
-import { textVariants } from "./Text";
+
+interface DropdownState {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const DropdownContext = createContext<DropdownState>({
+  open: false,
+  setOpen: () => {},
+});
 
 function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+  open: controlledOpen,
+  onOpenChange,
+  children,
+}: {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = useCallback(
+    (v: boolean) => {
+      if (!isControlled) setInternalOpen(v);
+      onOpenChange?.(v);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  const ref = useRef<HTMLDivElement>(null);
+  useClickOutside(ref, () => setOpen(false), open);
+
+  return (
+    <DropdownContext value={{ open, setOpen }}>
+      <div ref={ref} className="relative inline-block">
+        {children}
+      </div>
+    </DropdownContext>
+  );
 }
 
 function DropdownMenuTrigger({
+  asChild,
+  children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+}: {
+  asChild?: boolean;
+  children: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { open, setOpen } = use(DropdownContext);
+
+  if (
+    asChild &&
+    children &&
+    typeof children === "object" &&
+    "props" in children
+  ) {
+    const child = children as React.ReactElement<Record<string, unknown>>;
+    return (
+      <child.type
+        {...child.props}
+        onClick={(e: React.MouseEvent) => {
+          setOpen(!open);
+          if (typeof child.props.onClick === "function") child.props.onClick(e);
+        }}
+      />
+    );
+  }
+
   return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
+    <button type="button" onClick={() => setOpen(!open)} {...props}>
+      {children}
+    </button>
   );
 }
 
 function DropdownMenuContent({
   className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-xl py-1",
-          "bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40",
-          "animate-in",
-          className,
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  );
-}
+  align = "start",
+  children,
+}: {
+  className?: string;
+  align?: "start" | "end";
+  children: React.ReactNode;
+}) {
+  const { open } = use(DropdownContext);
+  if (!open) return null;
 
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
   return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+    <div
+      className={cn(
+        "absolute top-full mt-1 z-50 min-w-[8rem] overflow-hidden rounded-xl py-1",
+        "bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40",
+        align === "end" ? "right-0" : "left-0",
+        className,
+      )}
+    >
+      {children}
+    </div>
   );
 }
 
 function DropdownMenuItem({
   className,
   variant = "default",
+  onSelect,
+  children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+}: {
+  className?: string;
   variant?: "default" | "destructive";
+  onSelect?: () => void;
+  children: React.ReactNode;
+  title?: string;
 }) {
+  const { setOpen } = use(DropdownContext);
+
   return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-variant={variant}
+    <button
+      type="button"
       className={cn(
         "w-full px-3 py-1.5 text-left text-sm outline-none select-none transition-colors duration-150 flex items-center gap-2 cursor-default",
-        "data-[variant=default]:text-zinc-600 dark:data-[variant=default]:text-zinc-400 data-[variant=default]:focus:bg-zinc-50 dark:data-[variant=default]:focus:bg-zinc-800 data-[variant=default]:focus:text-zinc-900 dark:data-[variant=default]:focus:text-zinc-100",
-        "data-[variant=destructive]:text-red-600 dark:data-[variant=destructive]:text-red-400 data-[variant=destructive]:focus:bg-red-50 dark:data-[variant=destructive]:focus:bg-red-950 data-[variant=destructive]:focus:text-red-700 dark:data-[variant=destructive]:focus:text-red-300",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        variant === "default" &&
+          "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100",
+        variant === "destructive" &&
+          "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950 hover:text-red-700 dark:hover:text-red-300",
         "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className,
       )}
+      onClick={() => {
+        onSelect?.();
+        setOpen(false);
+      }}
       {...props}
-    />
+    >
+      {children}
+    </button>
   );
 }
 
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+function DropdownMenuSeparator({ className }: { className?: string }) {
   return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("my-1 h-px bg-zinc-100 dark:bg-zinc-800", className)}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label>) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      className={cn(
-        "px-3 py-1.5 font-medium",
-        textVariants({ variant: "caption" }),
-        className,
-      )}
-      {...props}
-    />
+    <div className={cn("my-1 h-px bg-zinc-100 dark:bg-zinc-800", className)} />
   );
 }
 
 export {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuGroup,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 };