nextworks 0.0.1 → 0.1.0-alpha.1

package/dist/kits/blocks/components/ui/theme-selector.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import * as React from "react";
+import { Check, Palette, Wrench } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useThemeVariant } from "@/components/enhanced-theme-provider";
+import {
+  themes,
+  darkThemes,
+  ThemeVariant,
+  type ThemeConfig,
+} from "@/lib/themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+type ThemeSelectorProps = React.ComponentPropsWithoutRef<typeof Button> & {
+  ariaLabel?: string;
+  label?: string; // optional override for the visible text ("Theme")
+};
+
+export function ThemeSelector({
+  ariaLabel = "Demo: Color theme",
+  label = "Theme",
+  className,
+  ...buttonProps
+}: ThemeSelectorProps) {
+  const { theme, setTheme } = useTheme();
+  const { themeVariant, setThemeVariant, setCustomBrandColors } =
+    useThemeVariant();
+
+  const isDark = theme === "dark";
+
+  const [showCustom, setShowCustom] = React.useState(false);
+  const [custom, setCustom] = React.useState<Partial<ThemeConfig["colors"]>>(
+    {},
+  );
+
+  function openCustomDialog() {
+    setCustom({});
+    setShowCustom(true);
+  }
+
+  function applyCustom() {
+    setCustomBrandColors(custom);
+    document.cookie = `theme-variant=custom; Path=/; Max-Age=31536000; SameSite=Lax`;
+    document.cookie = `theme-custom=${encodeURIComponent(JSON.stringify(custom))}; Path=/; Max-Age=31536000; SameSite=Lax`;
+    setShowCustom(false);
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={`gap-2 ${className ?? ""}`}
+          aria-label={ariaLabel}
+          {...buttonProps}
+        >
+          <Palette className="h-4 w-4" />
+          {label}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-64">
+        <DropdownMenuLabel className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span>Color theme variants</span>
+            <span
+              aria-hidden="true"
+              className="border-border bg-muted/50 text-muted-foreground rounded-md border px-1.5 py-0.5 text-[10px] font-medium tracking-wide uppercase"
+            >
+              Gallery
+            </span>
+          </div>
+          <p className="text-muted-foreground text-xs">
+            Affects this preview only ( button is not part of the shared Navbar.
+            )
+          </p>
+        </DropdownMenuLabel>
+        {/* <DropdownMenuLabel>
+          Color theme variants — gallery only
+        </DropdownMenuLabel> */}
+        {/* <DropdownMenuLabel>Theme preview controls</DropdownMenuLabel> */}
+
+        <DropdownMenuSeparator />
+        {Object.entries(themes).map(([key, themeConfig]) => (
+          <DropdownMenuItem
+            key={key}
+            onClick={() => {
+              setThemeVariant(key as ThemeVariant);
+              document.cookie = `theme-variant=${key}; Path=/; Max-Age=31536000; SameSite=Lax`;
+            }}
+            className="flex items-center justify-between"
+          >
+            <div className="flex items-center gap-2">
+              <div
+                className="h-4 w-4 rounded-full border"
+                style={{
+                  backgroundColor: isDark
+                    ? darkThemes[key as ThemeVariant].colors.primary
+                    : themeConfig.colors.primary,
+                }}
+              />
+              {themeConfig.name}
+            </div>
+            {themeVariant === key && <Check className="h-4 w-4" />}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Custom</DropdownMenuLabel>
+        <DropdownMenuItem
+          onClick={openCustomDialog}
+          className="flex items-center gap-2"
+        >
+          <Wrench className="h-4 w-4" />
+          Customize brand colors…
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+      {showCustom && (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 p-4">
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="customBrandColorsTitle"
+            className="bg-popover text-popover-foreground w-full max-w-md rounded-md border p-4 shadow-lg"
+          >
+            <div
+              id="customBrandColorsTitle"
+              className="mb-3 text-sm font-semibold"
+            >
+              Custom brand colors
+            </div>
+            <div className="space-y-3">
+              <div className="flex items-center gap-3">
+                <label className="w-28 text-sm">primary</label>
+                <input
+                  type="text"
+                  placeholder="oklch(...) or #hex"
+                  className="bg-background flex-1 rounded border p-2 text-sm"
+                  value={custom.primary ?? ""}
+                  onChange={(e) =>
+                    setCustom((c) => ({ ...c, primary: e.target.value }))
+                  }
+                />
+                <input
+                  type="color"
+                  className="h-8 w-10 cursor-pointer"
+                  value={
+                    typeof custom.primary === "string" &&
+                    custom.primary.startsWith("#")
+                      ? (custom.primary as string)
+                      : "#000000"
+                  }
+                  onChange={(e) =>
+                    setCustom((c) => ({ ...c, primary: e.target.value }))
+                  }
+                />
+              </div>
+              <div className="flex items-center gap-3">
+                <label className="w-28 text-sm">accent</label>
+                <input
+                  type="text"
+                  placeholder="oklch(...) or #hex"
+                  className="bg-background flex-1 rounded border p-2 text-sm"
+                  value={custom.accent ?? ""}
+                  onChange={(e) =>
+                    setCustom((c) => ({ ...c, accent: e.target.value }))
+                  }
+                />
+                <input
+                  type="color"
+                  className="h-8 w-10 cursor-pointer"
+                  value={
+                    typeof custom.accent === "string" &&
+                    custom.accent.startsWith("#")
+                      ? (custom.accent as string)
+                      : "#000000"
+                  }
+                  onChange={(e) =>
+                    setCustom((c) => ({ ...c, accent: e.target.value }))
+                  }
+                />
+              </div>
+              <div className="flex items-center gap-3">
+                <label className="w-28 text-sm">ring</label>
+                <input
+                  type="text"
+                  placeholder="oklch(...) or #hex"
+                  className="bg-background flex-1 rounded border p-2 text-sm"
+                  value={custom.ring ?? ""}
+                  onChange={(e) =>
+                    setCustom((c) => ({ ...c, ring: e.target.value }))
+                  }
+                />
+                <input
+                  type="color"
+                  className="h-8 w-10 cursor-pointer"
+                  value={
+                    typeof custom.ring === "string" &&
+                    custom.ring.startsWith("#")
+                      ? (custom.ring as string)
+                      : "#000000"
+                  }
+                  onChange={(e) =>
+                    setCustom((c) => ({ ...c, ring: e.target.value }))
+                  }
+                />
+              </div>
+            </div>
+            <div className="mt-4 flex justify-end gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowCustom(false)}
+              >
+                Cancel
+              </Button>
+              <Button size="sm" onClick={applyCustom}>
+                Apply
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </DropdownMenu>
+  );
+}

package/dist/kits/blocks/components/ui/theme-toggle.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { cn } from "@/lib/utils";
+
+import { Button } from "@/components/ui/button";
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+export type ThemeToggleProps = {
+  /** Forwarded to internal Button. You can set unstyled, className, variant, size, etc. */
+  buttonProps?: Partial<ButtonProps>;
+  /** Optional aria-label override */
+  ariaLabel?: string;
+  /** Optional class overrides for icons */
+  moonClassName?: string;
+  sunClassName?: string;
+};
+
+export function ThemeToggle({
+  buttonProps,
+  ariaLabel = "Toggle theme",
+  moonClassName,
+  sunClassName,
+}: ThemeToggleProps) {
+  const { theme, setTheme } = useTheme();
+
+  const mergedButtonProps: ButtonProps = {
+    variant: "outline",
+    size: "icon",
+    ...(buttonProps as ButtonProps),
+    className: cn(
+      "relative",
+      // Prefer preset variables if provided on Navbar
+      "bg-[var(--navbar-toggle-bg)] text-[var(--navbar-accent)] hover:bg-[var(--navbar-hover-bg)] focus-visible:ring-[var(--navbar-ring)]",
+      // Ensure border uses preset variable; provide width for unstyled cases
+      "border border-[var(--navbar-border)]",
+      buttonProps?.className,
+    ),
+    // Inline style ensures our accent wins over token classes even under dark: variants
+    style: {
+      ...(buttonProps?.style as React.CSSProperties),
+      color: "var(--navbar-accent)",
+      backgroundColor: "var(--navbar-toggle-bg)",
+      borderColor: "var(--navbar-border)",
+      // Tell Tailwind ring utilities which ring color to use
+      "--tw-ring-color": "var(--navbar-ring)",
+    },
+  } as ButtonProps;
+
+  return (
+    <Button
+      {...mergedButtonProps}
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      aria-label={ariaLabel}
+    >
+      <Moon
+        className={cn(
+          "h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90",
+          moonClassName,
+        )}
+      />
+      <Sun
+        className={cn(
+          "absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0",
+          sunClassName,
+        )}
+      />
+      <span className="sr-only">{ariaLabel}</span>
+    </Button>
+  );
+}

package/dist/kits/blocks/components/ui/toaster.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { Toaster } from "sonner";
+
+export default function AppToaster() {
+  return <Toaster position="top-center" richColors closeButton />;
+}