@peaske7/readit 0.2.0 → 0.3.0-rc.0

package/src/components/ui/{Button.tsx → Button.svelte}

@@ -1,3 +1,6 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
 import { cn } from "../../lib/utils";
 
 const baseStyles =
@@ -25,30 +28,26 @@ const sizeStyles = {
 type ButtonVariant = keyof typeof variantStyles;
 type ButtonSize = keyof typeof sizeStyles;
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface Props extends HTMLButtonAttributes {
   variant?: ButtonVariant;
   size?: ButtonSize;
+  children: Snippet;
 }
 
-function Button({
-  className,
+let {
   variant = "default",
   size = "default",
-  ...props
-}: ButtonProps) {
-  return (
-    <button
-      type="button"
-      className={cn(
-        baseStyles,
-        variantStyles[variant],
-        sizeStyles[size],
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+  class: className,
+  type = "button",
+  children,
+  ...rest
+}: Props = $props();
+</script>
 
-export type { ButtonProps, ButtonSize, ButtonVariant };
-export { Button };
+<button
+  {...rest}
+  {type}
+  class={cn(baseStyles, variantStyles[variant], sizeStyles[size], className)}
+>
+  {@render children()}
+</button>

package/src/components/ui/Dialog.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+import { X } from "lucide-svelte";
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils";
+
+interface Props {
+  open: boolean;
+  onclose?: () => void;
+  contentClass?: string;
+  children: Snippet;
+  header?: Snippet;
+  headerActions?: Snippet;
+}
+
+let {
+  open = $bindable(false),
+  onclose,
+  contentClass,
+  children,
+  header,
+  headerActions,
+}: Props = $props();
+
+let dialogEl: HTMLDialogElement | undefined = $state();
+
+$effect(() => {
+  if (!dialogEl) return;
+
+  if (open && !dialogEl.open) {
+    dialogEl.showModal();
+  } else if (!open && dialogEl.open) {
+    dialogEl.close();
+  }
+});
+
+$effect(() => {
+  if (!dialogEl) return;
+
+  const handleClose = () => {
+    open = false;
+    onclose?.();
+  };
+
+  dialogEl.addEventListener("close", handleClose);
+  return () => dialogEl!.removeEventListener("close", handleClose);
+});
+
+function handleBackdropClick(e: MouseEvent) {
+  if (e.target === dialogEl && dialogEl?.open) {
+    dialogEl.close();
+  }
+}
+
+function handleCloseClick() {
+  if (dialogEl?.open) dialogEl.close();
+}
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  onclick={handleBackdropClick}
+  class="backdrop:bg-black/20 dark:backdrop:bg-black/40 backdrop:backdrop-blur-sm bg-transparent p-0 m-auto max-w-none"
+>
+  {#if open}
+    <div
+      class={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",
+        contentClass,
+      )}
+    >
+      {#if header}
+        <div
+          class="flex items-center justify-between pl-4 pr-12 py-3 border-b border-zinc-100 dark:border-zinc-800"
+        >
+          <h2 class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+            {@render header()}
+          </h2>
+          {#if headerActions}
+            {@render headerActions()}
+          {/if}
+        </div>
+      {/if}
+
+      <div class="flex-1 overflow-visible p-4">
+        {@render children()}
+      </div>
+
+      <button
+        type="button"
+        onclick={handleCloseClick}
+        class="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 class="w-4 h-4" />
+      </button>
+    </div>
+  {/if}
+</dialog>

package/src/components/ui/DropdownMenu.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils";
+
+interface Props {
+  open?: boolean;
+  trigger: Snippet;
+  align?: "start" | "end";
+  contentClass?: string;
+  children: Snippet;
+}
+
+let {
+  open = $bindable(false),
+  trigger,
+  align = "start",
+  contentClass,
+  children,
+}: Props = $props();
+
+let containerEl: HTMLDivElement | undefined = $state();
+
+function toggle() {
+  open = !open;
+}
+
+function close() {
+  open = false;
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape" && open) {
+    e.stopPropagation();
+    close();
+  }
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    e.stopPropagation();
+    toggle();
+  }
+}
+
+$effect(() => {
+  if (!open) return;
+
+  function handleClickOutside(e: MouseEvent) {
+    if (containerEl && !containerEl.contains(e.target as Node)) {
+      close();
+    }
+  }
+
+  document.addEventListener("mousedown", handleClickOutside);
+  return () => document.removeEventListener("mousedown", handleClickOutside);
+});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  bind:this={containerEl}
+  class="relative inline-block"
+  onkeydown={handleKeydown}
+>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div onclick={toggle} role="button" tabindex="0" aria-expanded={open}>
+    {@render trigger()}
+  </div>
+
+  {#if open}
+    <div
+      class={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",
+        contentClass,
+      )}
+    >
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<script lang="ts" module>
+  export { default as DropdownMenuItem } from "./DropdownMenuItem.svelte";
+  export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.svelte";
+</script>

package/src/components/ui/DropdownMenuItem.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils";
+
+interface Props {
+  variant?: "default" | "destructive";
+  onselect?: () => void;
+  class?: string;
+  title?: string;
+  children: Snippet;
+}
+
+let {
+  variant = "default",
+  onselect,
+  class: className,
+  title,
+  children,
+}: Props = $props();
+</script>
+
+<button
+  type="button"
+  role="menuitem"
+  {title}
+  class={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",
+    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 focus-visible:bg-zinc-50 dark:focus-visible:bg-zinc-800 focus-visible:text-zinc-900 dark:focus-visible: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 focus-visible:bg-red-50 dark:focus-visible:bg-red-950 focus-visible:text-red-700 dark:focus-visible:text-red-300",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+    className,
+  )}
+  onclick={() => onselect?.()}
+>
+  {@render children()}
+</button>

package/src/components/ui/DropdownMenuSeparator.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { cn } from "../../lib/utils";
+
+interface Props {
+  class?: string;
+}
+
+let { class: className }: Props = $props();
+</script>
+
+<div class={cn("my-1 h-px bg-zinc-100 dark:bg-zinc-800", className)}></div>

package/src/components/ui/{Text.tsx → Text.svelte}

@@ -1,7 +1,8 @@
-import { use } from "react";
-import { SettingsContext } from "../../contexts/SettingsContext";
+<script lang="ts">
+import type { Snippet } from "svelte";
 import { cn } from "../../lib/utils";
 import { FontFamilies } from "../../schema";
+import { settings } from "../../stores/settings.svelte";
 
 const variantStyles = {
   title:
@@ -17,31 +18,25 @@ const variantStyles = {
 
 type TextVariant = keyof typeof variantStyles;
 
-interface TextProps extends React.HTMLAttributes<HTMLElement> {
+interface Props {
   variant?: TextVariant;
   as?: "p" | "span" | "div" | "h1" | "h2" | "h3" | "label" | "pre";
+  class?: string;
+  children: Snippet;
 }
 
-function Text({
-  className,
+let {
   variant = "body",
-  as: Tag = "p",
-  ...props
-}: TextProps) {
-  const settings = use(SettingsContext);
-  const fontClass = settings
-    ? settings.fontFamily === FontFamilies.SANS_SERIF
-      ? "font-sans"
-      : "font-serif"
-    : undefined;
+  as = "p",
+  class: className,
+  children,
+}: Props = $props();
 
-  return (
-    <Tag
-      className={cn(fontClass, variantStyles[variant], className)}
-      {...props}
-    />
-  );
-}
+let fontClass = $derived(
+  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
+);
+</script>
 
-export type { TextVariant };
-export { Text, variantStyles };
+<svelte:element this={as} class={cn(fontClass, variantStyles[variant], className)}>
+  {@render children()}
+</svelte:element>

package/src/env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="bun" />
+
+declare module "*.css" {
+  const content: string;
+  export default content;
+}