astro-awesomeness 0.1.0 → 0.1.3

package/dist/components/index.d.ts

@@ -95,17 +95,24 @@ type CommandMenuItem = {
 };
 type CommandMenuProps = {
   emptyMessage?: string;
+  groupHeading?: string;
   items: Array<CommandMenuItem>;
   placeholder?: string;
 };
 declare const CommandMenu: ({
   emptyMessage,
+  groupHeading,
   items,
   placeholder
 }: CommandMenuProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 //#region src/components/theme-toggle.d.ts
-declare const ThemeToggle: () => import("react/jsx-runtime").JSX.Element;
+type Props = {
+  ariaLabel?: string;
+};
+declare const ThemeToggle: ({
+  ariaLabel
+}: Props) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandMenu, type CommandMenuItem, type CommandMenuProps, CommandSeparator, CommandShortcut, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, ThemeToggle, buttonVariants };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.js

@@ -189,7 +189,7 @@ function CommandShortcut({ className, ...props }) {
 }
 //#endregion
 //#region src/components/command-menu.tsx
-const CommandMenu = ({ emptyMessage = "No results.", items, placeholder = "Search posts…" }) => {
+const CommandMenu = ({ emptyMessage = "No results.", groupHeading = "Posts", items, placeholder = "Search posts…" }) => {
 	const [open, setOpen] = useState(false);
 	useEffect(() => {
 		const handleKeyDown = (event) => {
@@ -217,7 +217,7 @@ const CommandMenu = ({ emptyMessage = "No results.", items, placeholder = "Searc
 		}), /* @__PURE__ */ jsx(DialogContent, {
 			className: "p-0",
 			children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, { placeholder }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }), /* @__PURE__ */ jsx(CommandGroup, {
-				heading: "Posts",
+				heading: groupHeading,
 				children: items.map((item) => /* @__PURE__ */ jsx(CommandItem, {
 					onSelect: () => {
 						window.location.href = item.url;
@@ -255,7 +255,7 @@ const subscribePrefersDark = (callback) => {
 		media.removeEventListener("change", callback);
 	};
 };
-const ThemeToggle = () => {
+const ThemeToggle = ({ ariaLabel = "Toggle theme" }) => {
 	const prefersDark = useSyncExternalStore(subscribePrefersDark, getPrefersDark, () => false);
 	const [override, setOverride] = useState(() => getStoredTheme());
 	const theme = override ?? (prefersDark ? "dark" : "light");
@@ -268,7 +268,7 @@ const ThemeToggle = () => {
 		setOverride(next);
 	};
 	return /* @__PURE__ */ jsx(Button, {
-		"aria-label": "Toggle theme",
+		"aria-label": ariaLabel,
 		onClick: handleClick,
 		size: "icon",
 		variant: "ghost",

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DialogPrimitive","CommandPrimitive"],"sources":["../../src/components/ui/button.tsx","../../src/components/ui/dialog.tsx","../../src/components/ui/command.tsx","../../src/components/command-menu.tsx","../../src/components/theme-toggle.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { Slot } from \"radix-ui\";\n\nimport { cn } from \"../../lib/cn\";\n\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        icon: \"size-9\",\n        \"icon-lg\": \"size-10\",\n        \"icon-sm\": \"size-8\",\n        \"icon-xs\": \"size-6 rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        sm: \"h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5\",\n        xs: \"h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3\",\n      },\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      },\n    },\n  },\n);\n\nconst Button = ({\n  asChild = false,\n  className,\n  size = \"default\",\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) => {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      className={cn(buttonVariants({ className, size, variant }))}\n      data-size={size}\n      data-slot=\"button\"\n      data-variant={variant}\n      {...props}\n    />\n  );\n};\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\n\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"./button\";\n\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      className={cn(\n        \"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\",\n        className,\n      )}\n      data-slot=\"dialog-overlay\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        className={cn(\n          \"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\",\n          className,\n        )}\n        data-slot=\"dialog-content\"\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            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\"\n            data-slot=\"dialog-close\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      data-slot=\"dialog-header\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      data-slot=\"dialog-footer\"\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  // fallow-ignore-next-line unused-export\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  // fallow-ignore-next-line unused-export\n  DialogOverlay,\n  // fallow-ignore-next-line unused-export\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"./dialog\";\n\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        className,\n      )}\n      data-slot=\"command\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialog({\n  children,\n  className,\n  description = \"Search for a command to run...\",\n  showCloseButton = true,\n  title = \"Command Palette\",\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  className?: string;\n  description?: string;\n  showCloseButton?: boolean;\n  title?: string;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <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]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[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\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex h-9 items-center gap-2 border-b px-3\" data-slot=\"command-input-wrapper\">\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        className={cn(\n          \"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\",\n          className,\n        )}\n        data-slot=\"command-input\"\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn(\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\", className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"py-6 text-center text-sm\"\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  // fallow-ignore-next-line unused-export\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};\n","import { Search } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"./ui/command\";\nimport { Dialog, DialogContent, DialogTrigger } from \"./ui/dialog\";\nimport { Button } from \"./ui/button\";\n\ntype CommandMenuItem = { description?: string; title: string; url: string };\n\ntype CommandMenuProps = {\n  emptyMessage?: string;\n  items: Array<CommandMenuItem>;\n  placeholder?: string;\n};\n\nconst CommandMenu = ({\n  emptyMessage = \"No results.\",\n  items,\n  placeholder = \"Search posts…\",\n}: CommandMenuProps) => {\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"k\" && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault();\n        setOpen((value) => !value);\n      }\n    };\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, []);\n\n  return (\n    <Dialog onOpenChange={setOpen} open={open}>\n      <DialogTrigger asChild>\n        <Button aria-label=\"Open search\" size=\"icon\" variant=\"ghost\">\n          <Search />\n        </Button>\n      </DialogTrigger>\n      <DialogContent className=\"p-0\">\n        <Command>\n          <CommandInput placeholder={placeholder} />\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            <CommandGroup heading=\"Posts\">\n              {items.map((item) => (\n                <CommandItem\n                  key={item.url}\n                  onSelect={() => {\n                    window.location.href = item.url;\n                  }}\n                  value={item.title}\n                >\n                  <div className=\"flex flex-col\">\n                    <span>{item.title}</span>\n                    {item.description ? (\n                      <span className=\"text-muted-foreground text-xs\">{item.description}</span>\n                    ) : null}\n                  </div>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport { CommandMenu };\nexport type { CommandMenuItem, CommandMenuProps };\n","import { Moon, Sun } from \"lucide-react\";\nimport { useEffect, useState, useSyncExternalStore } from \"react\";\n\nimport { Button } from \"./ui/button\";\n\ntype Theme = \"light\" | \"dark\";\n\nconst getStoredTheme = (): Theme | null => {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n  const stored = window.localStorage.getItem(\"theme\");\n  if (stored === \"light\" || stored === \"dark\") {\n    return stored;\n  }\n  return null;\n};\n\nconst getPrefersDark = (): boolean => {\n  if (typeof window === \"undefined\") {\n    return false;\n  }\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n};\n\nconst subscribePrefersDark = (callback: () => void) => {\n  if (typeof window === \"undefined\") {\n    return () => {};\n  }\n  const media = window.matchMedia(\"(prefers-color-scheme: dark)\");\n  media.addEventListener(\"change\", callback);\n  return () => {\n    media.removeEventListener(\"change\", callback);\n  };\n};\n\nconst ThemeToggle = () => {\n  // useSyncExternalStore avoids hydration mismatch warnings while still letting\n  // us read the actual system preference on the client.\n  const prefersDark = useSyncExternalStore(subscribePrefersDark, getPrefersDark, () => false);\n  const [override, setOverride] = useState<Theme | null>(() => getStoredTheme());\n  const theme: Theme = override ?? (prefersDark ? \"dark\" : \"light\");\n\n  useEffect(() => {\n    document.documentElement.classList.toggle(\"dark\", theme === \"dark\");\n  }, [theme]);\n\n  const handleClick = () => {\n    const next: Theme = theme === \"dark\" ? \"light\" : \"dark\";\n    window.localStorage.setItem(\"theme\", next);\n    setOverride(next);\n  };\n\n  return (\n    <Button aria-label=\"Toggle theme\" onClick={handleClick} size=\"icon\" variant=\"ghost\">\n      {theme === \"dark\" ? <Sun /> : <Moon />}\n    </Button>\n  );\n};\n\nexport { ThemeToggle };\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DialogPrimitive","CommandPrimitive"],"sources":["../../src/components/ui/button.tsx","../../src/components/ui/dialog.tsx","../../src/components/ui/command.tsx","../../src/components/command-menu.tsx","../../src/components/theme-toggle.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { Slot } from \"radix-ui\";\n\nimport { cn } from \"../../lib/cn\";\n\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        icon: \"size-9\",\n        \"icon-lg\": \"size-10\",\n        \"icon-sm\": \"size-8\",\n        \"icon-xs\": \"size-6 rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        sm: \"h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5\",\n        xs: \"h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3\",\n      },\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      },\n    },\n  },\n);\n\nconst Button = ({\n  asChild = false,\n  className,\n  size = \"default\",\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) => {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      className={cn(buttonVariants({ className, size, variant }))}\n      data-size={size}\n      data-slot=\"button\"\n      data-variant={variant}\n      {...props}\n    />\n  );\n};\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\n\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"./button\";\n\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      className={cn(\n        \"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\",\n        className,\n      )}\n      data-slot=\"dialog-overlay\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        className={cn(\n          \"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\",\n          className,\n        )}\n        data-slot=\"dialog-content\"\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            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\"\n            data-slot=\"dialog-close\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      data-slot=\"dialog-header\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      data-slot=\"dialog-footer\"\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  // fallow-ignore-next-line unused-export\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  // fallow-ignore-next-line unused-export\n  DialogOverlay,\n  // fallow-ignore-next-line unused-export\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"./dialog\";\n\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        className,\n      )}\n      data-slot=\"command\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialog({\n  children,\n  className,\n  description = \"Search for a command to run...\",\n  showCloseButton = true,\n  title = \"Command Palette\",\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  className?: string;\n  description?: string;\n  showCloseButton?: boolean;\n  title?: string;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <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]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[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\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex h-9 items-center gap-2 border-b px-3\" data-slot=\"command-input-wrapper\">\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        className={cn(\n          \"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\",\n          className,\n        )}\n        data-slot=\"command-input\"\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn(\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\", className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"py-6 text-center text-sm\"\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  // fallow-ignore-next-line unused-export\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};\n","import { Search } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"./ui/command\";\nimport { Dialog, DialogContent, DialogTrigger } from \"./ui/dialog\";\nimport { Button } from \"./ui/button\";\n\ntype CommandMenuItem = { description?: string; title: string; url: string };\n\ntype CommandMenuProps = {\n  emptyMessage?: string;\n  groupHeading?: string;\n  items: Array<CommandMenuItem>;\n  placeholder?: string;\n};\n\nconst CommandMenu = ({\n  emptyMessage = \"No results.\",\n  groupHeading = \"Posts\",\n  items,\n  placeholder = \"Search posts…\",\n}: CommandMenuProps) => {\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"k\" && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault();\n        setOpen((value) => !value);\n      }\n    };\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, []);\n\n  return (\n    <Dialog onOpenChange={setOpen} open={open}>\n      <DialogTrigger asChild>\n        <Button aria-label=\"Open search\" size=\"icon\" variant=\"ghost\">\n          <Search />\n        </Button>\n      </DialogTrigger>\n      <DialogContent className=\"p-0\">\n        <Command>\n          <CommandInput placeholder={placeholder} />\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            <CommandGroup heading={groupHeading}>\n              {items.map((item) => (\n                <CommandItem\n                  key={item.url}\n                  onSelect={() => {\n                    window.location.href = item.url;\n                  }}\n                  value={item.title}\n                >\n                  <div className=\"flex flex-col\">\n                    <span>{item.title}</span>\n                    {item.description ? (\n                      <span className=\"text-muted-foreground text-xs\">{item.description}</span>\n                    ) : null}\n                  </div>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport { CommandMenu };\nexport type { CommandMenuItem, CommandMenuProps };\n","import { Moon, Sun } from \"lucide-react\";\nimport { useEffect, useState, useSyncExternalStore } from \"react\";\n\nimport { Button } from \"./ui/button\";\n\ntype Theme = \"light\" | \"dark\";\n\nconst getStoredTheme = (): Theme | null => {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n  const stored = window.localStorage.getItem(\"theme\");\n  if (stored === \"light\" || stored === \"dark\") {\n    return stored;\n  }\n  return null;\n};\n\nconst getPrefersDark = (): boolean => {\n  if (typeof window === \"undefined\") {\n    return false;\n  }\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n};\n\nconst subscribePrefersDark = (callback: () => void) => {\n  if (typeof window === \"undefined\") {\n    return () => {};\n  }\n  const media = window.matchMedia(\"(prefers-color-scheme: dark)\");\n  media.addEventListener(\"change\", callback);\n  return () => {\n    media.removeEventListener(\"change\", callback);\n  };\n};\n\ntype Props = {\n  ariaLabel?: string;\n};\n\nconst ThemeToggle = ({ ariaLabel = \"Toggle theme\" }: Props) => {\n  // useSyncExternalStore avoids hydration mismatch warnings while still letting\n  // us read the actual system preference on the client.\n  const prefersDark = useSyncExternalStore(subscribePrefersDark, getPrefersDark, () => false);\n  const [override, setOverride] = useState<Theme | null>(() => getStoredTheme());\n  const theme: Theme = override ?? (prefersDark ? \"dark\" : \"light\");\n\n  useEffect(() => {\n    document.documentElement.classList.toggle(\"dark\", theme === \"dark\");\n  }, [theme]);\n\n  const handleClick = () => {\n    const next: Theme = theme === \"dark\" ? \"light\" : \"dark\";\n    window.localStorage.setItem(\"theme\", next);\n    setOverride(next);\n  };\n\n  return (\n    <Button aria-label={ariaLabel} onClick={handleClick} size=\"icon\" variant=\"ghost\">\n      {theme === \"dark\" ? <Sun /> : <Moon />}\n    </Button>\n  );\n};\n\nexport { ThemeToggle };\n"],"mappings":"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"}

package/dist/styles/globals.css

@@ -3,6 +3,13 @@
 
 @import "tw-animate-css";
 
+/* Scan our own .astro/.tsx files so consumer Tailwind generates utilities
+   used by the theme. Paths resolve from dist/styles/globals.css after build:
+   `../../src` → <package-root>/src in both workspace and node_modules. */
+@source "../../src/astro/**/*.astro";
+@source "../../src/layouts/**/*.astro";
+@source "../../src/components/**/*.{ts,tsx}";
+
 @custom-variant dark (&:is(.dark *));
 
 @theme {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-awesomeness",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Astro 5 blog theme with shadcn primitives and a Tailwind v4 preset.",
   "keywords": [
     "astro",
@@ -12,8 +12,7 @@
   "license": "MIT",
   "files": [
     "dist",
-    "src/astro",
-    "src/layouts"
+    "src"
   ],
   "type": "module",
   "exports": {

package/src/astro/header.astro

@@ -5,18 +5,24 @@ type Props = {
   siteTitle: string;
   homeHref?: string;
   class?: string;
+  themeToggleLabel?: string;
 };
 
-const { siteTitle, homeHref = "/", class: className = "" } = Astro.props;
+const {
+  siteTitle,
+  homeHref = "/",
+  class: className = "",
+  themeToggleLabel = "Toggle theme",
+} = Astro.props;
 ---
 <header class:list={["border-border bg-background/80 sticky top-0 z-40 border-b backdrop-blur", className]}>
   <div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
     <a href={homeHref} class="text-foreground text-base font-semibold tracking-tight">
-      {siteTitle}
+      <slot name="brand">{siteTitle}</slot>
     </a>
     <nav class="flex items-center gap-2">
       <slot name="nav" />
-      <ThemeToggle client:load />
+      <ThemeToggle client:load ariaLabel={themeToggleLabel} />
     </nav>
   </div>
 </header>

package/src/astro/pagination.astro

@@ -4,9 +4,22 @@ type Props = {
   lastPage: number;
   urlForPage: (page: number) => string;
   class?: string;
+  prevLabel?: string;
+  nextLabel?: string;
+  pageLabel?: string;
+  ofLabel?: string;
 };
 
-const { currentPage, lastPage, urlForPage, class: className = "" } = Astro.props;
+const {
+  currentPage,
+  lastPage,
+  urlForPage,
+  class: className = "",
+  prevLabel = "← Previous",
+  nextLabel = "Next →",
+  pageLabel = "Page",
+  ofLabel = "of",
+} = Astro.props;
 const hasPrev = currentPage > 1;
 const hasNext = currentPage < lastPage;
 ---
@@ -17,11 +30,11 @@ const hasNext = currentPage < lastPage;
       class="border-border hover:bg-muted inline-flex items-center rounded-md border px-3 py-1.5 text-sm transition-colors"
       rel="prev"
     >
-      ← Previous
+      {prevLabel}
     </a>
   ) : <span aria-hidden="true" />}
   <span class="text-muted-foreground text-sm">
-    Page {currentPage} of {lastPage}
+    {pageLabel} {currentPage} {ofLabel} {lastPage}
   </span>
   {hasNext ? (
     <a
@@ -29,7 +42,7 @@ const hasNext = currentPage < lastPage;
       class="border-border hover:bg-muted inline-flex items-center rounded-md border px-3 py-1.5 text-sm transition-colors"
       rel="next"
     >
-      Next →
+      {nextLabel}
     </a>
   ) : <span aria-hidden="true" />}
 </nav>

package/src/astro/reading-time.astro

@@ -3,10 +3,11 @@ import { readingTime } from "../lib/reading-time";
 
 type Props = {
   text: string;
+  label?: string;
   class?: string;
 };
 
-const { text, class: className = "" } = Astro.props;
+const { text, label = "min read", class: className = "" } = Astro.props;
 const { minutes } = readingTime(text);
 ---
-<span class={className}>{minutes} min read</span>
+<span class={className}>{minutes} {label}</span>

package/src/astro/table-of-contents.astro

@@ -8,9 +8,16 @@ type Props = {
   minDepth?: number;
   maxDepth?: number;
   class?: string;
+  heading?: string;
 };
 
-const { headings, minDepth = 2, maxDepth = 3, class: className = "" } = Astro.props;
+const {
+  headings,
+  minDepth = 2,
+  maxDepth = 3,
+  class: className = "",
+  heading = "On this page",
+} = Astro.props;
 
 const visible: Array<Heading> = headings
   .filter((h) => h.depth >= minDepth && h.depth <= maxDepth)
@@ -18,7 +25,7 @@ const visible: Array<Heading> = headings
 ---
 {visible.length > 0 && (
   <nav class:list={["text-sm", className]} aria-label="Table of contents">
-    <p class="text-muted-foreground mb-2 font-medium tracking-wide uppercase">On this page</p>
+    <p class="text-muted-foreground mb-2 font-medium tracking-wide uppercase">{heading}</p>
     <ul class="space-y-1">
       {visible.map((heading) => (
         <li class:list={["leading-snug", heading.depth === 3 && "pl-4"]}>

package/src/components/command-menu.tsx

@@ -0,0 +1,83 @@
+import { Search } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./ui/command";
+import { Dialog, DialogContent, DialogTrigger } from "./ui/dialog";
+import { Button } from "./ui/button";
+
+type CommandMenuItem = { description?: string; title: string; url: string };
+
+type CommandMenuProps = {
+  emptyMessage?: string;
+  groupHeading?: string;
+  items: Array<CommandMenuItem>;
+  placeholder?: string;
+};
+
+const CommandMenu = ({
+  emptyMessage = "No results.",
+  groupHeading = "Posts",
+  items,
+  placeholder = "Search posts…",
+}: CommandMenuProps) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        setOpen((value) => !value);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <Dialog onOpenChange={setOpen} open={open}>
+      <DialogTrigger asChild>
+        <Button aria-label="Open search" size="icon" variant="ghost">
+          <Search />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="p-0">
+        <Command>
+          <CommandInput placeholder={placeholder} />
+          <CommandList>
+            <CommandEmpty>{emptyMessage}</CommandEmpty>
+            <CommandGroup heading={groupHeading}>
+              {items.map((item) => (
+                <CommandItem
+                  key={item.url}
+                  onSelect={() => {
+                    window.location.href = item.url;
+                  }}
+                  value={item.title}
+                >
+                  <div className="flex flex-col">
+                    <span>{item.title}</span>
+                    {item.description ? (
+                      <span className="text-muted-foreground text-xs">{item.description}</span>
+                    ) : null}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { CommandMenu };
+export type { CommandMenuItem, CommandMenuProps };

package/src/components/index.ts

@@ -0,0 +1,22 @@
+export { Button, buttonVariants } from "./ui/button";
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "./ui/command";
+export {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+export { CommandMenu, type CommandMenuItem, type CommandMenuProps } from "./command-menu";
+export { ThemeToggle } from "./theme-toggle";

package/src/components/theme-toggle.tsx

@@ -0,0 +1,65 @@
+import { Moon, Sun } from "lucide-react";
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+import { Button } from "./ui/button";
+
+type Theme = "light" | "dark";
+
+const getStoredTheme = (): Theme | null => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const stored = window.localStorage.getItem("theme");
+  if (stored === "light" || stored === "dark") {
+    return stored;
+  }
+  return null;
+};
+
+const getPrefersDark = (): boolean => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+};
+
+const subscribePrefersDark = (callback: () => void) => {
+  if (typeof window === "undefined") {
+    return () => {};
+  }
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  media.addEventListener("change", callback);
+  return () => {
+    media.removeEventListener("change", callback);
+  };
+};
+
+type Props = {
+  ariaLabel?: string;
+};
+
+const ThemeToggle = ({ ariaLabel = "Toggle theme" }: Props) => {
+  // useSyncExternalStore avoids hydration mismatch warnings while still letting
+  // us read the actual system preference on the client.
+  const prefersDark = useSyncExternalStore(subscribePrefersDark, getPrefersDark, () => false);
+  const [override, setOverride] = useState<Theme | null>(() => getStoredTheme());
+  const theme: Theme = override ?? (prefersDark ? "dark" : "light");
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+  }, [theme]);
+
+  const handleClick = () => {
+    const next: Theme = theme === "dark" ? "light" : "dark";
+    window.localStorage.setItem("theme", next);
+    setOverride(next);
+  };
+
+  return (
+    <Button aria-label={ariaLabel} onClick={handleClick} size="icon" variant="ghost">
+      {theme === "dark" ? <Sun /> : <Moon />}
+    </Button>
+  );
+};
+
+export { ThemeToggle };

package/src/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Slot } from "radix-ui";
+
+import { cn } from "../../lib/cn";
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        icon: "size-9",
+        "icon-lg": "size-10",
+        "icon-sm": "size-8",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+      },
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      },
+    },
+  },
+);
+
+const Button = ({
+  asChild = false,
+  className,
+  size = "default",
+  variant = "default",
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) => {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      className={cn(buttonVariants({ className, size, variant }))}
+      data-size={size}
+      data-slot="button"
+      data-variant={variant}
+      {...props}
+    />
+  );
+};
+
+export { Button, buttonVariants };