nextworks 0.2.0-alpha.2 → 0.2.0-alpha.20

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

@@ -1,247 +1,243 @@
-"use client";
-
-import * as React from "react";
-import { Check, Palette, Wrench } from "lucide-react";
-import { useTheme } from "next-themes";
-import { useThemeVariant } from "../enhanced-theme-provider";
-import {
-  themes,
-  darkThemes,
-  type 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>
-  );
-}
+"use client";
+
+import * as React from "react";
+import { Check, Palette, Wrench } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useThemeVariant } from "../enhanced-theme-provider";
+import {
+  themes,
+  darkThemes,
+  type 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 modal={false}>
+      <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>
+
+        <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

@@ -1,74 +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>
-  );
-}
+"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>
+  );
+}