raft-ui 0.0.6 → 0.0.7

package/src/legacy/server-switcher-menu.tsx

@@ -1,203 +0,0 @@
-import { useEffect, useRef, type ComponentPropsWithRef, type ReactNode } from "react";
-import { Button as BaseButton } from "@base-ui/react/button";
-import { Check, Plus } from "lucide-react";
-import { tv } from "../lib/tv";
-import { useThemeFamily } from "../lib/theme/use-theme";
-
-// "Switch server" dropdown content: joined servers + join-community actions + a
-// "switch or create" action. App-domain data and navigation stay caller-owned,
-// but the source menu's UI primitive contract (open gate, outside click, ESC,
-// current unread hiding) is preserved here. `card-brutal` maps to border-2
-// border-black bg-white --shadow-hover.
-const serverSwitcherMenu = tv({
-  slots: {
-    root: ["z-50 flex flex-col overflow-hidden"],
-    scroller: ["min-h-0 flex-1 overflow-y-auto overscroll-contain"],
-    serverRow: [
-      "flex w-full items-center gap-2 px-3 py-2 [@media(max-height:600px)]:py-1",
-      "text-sm transition-colors",
-    ],
-    check: ["shrink-0"],
-    serverText: ["min-w-0 flex-1 text-left"],
-    serverName: ["truncate"],
-    serverSlug: ["truncate font-mono text-xs text-black/40"],
-    unread: [
-      "ml-auto shrink-0 rounded border border-black bg-brutal-pink px-1.5 py-0.5",
-      "text-[10px] font-bold leading-none text-white",
-    ],
-    actionRow: [
-      "flex w-full items-center justify-start gap-2 px-3 py-2 [@media(max-height:600px)]:py-1",
-      "text-left text-sm transition-colors",
-    ],
-    actionLabel: ["min-w-0 flex-1 text-left"],
-  },
-  variants: {
-    theme: {
-      brutal: {
-        root: ["border-2 border-black bg-white shadow-[var(--shadow-hover)]"],
-        serverRow: ["font-medium text-black hover:bg-brutal-yellow"],
-        actionRow: ["font-bold text-black hover:bg-brutal-pink"],
-      },
-      // Elegant styling is deferred; see the component TODO.
-      elegant: {},
-    },
-    current: {
-      true: {
-        serverRow: "font-bold",
-        check: "opacity-100",
-      },
-      false: {
-        serverRow: "",
-        check: "opacity-0",
-      },
-    },
-  },
-  defaultVariants: {
-    current: false,
-  },
-});
-
-export type ServerSwitcherServer = {
-  id: string;
-  name: ReactNode;
-  slug: string;
-};
-
-export type ServerSwitcherJoinOption = {
-  slug: string;
-  label: ReactNode;
-};
-
-export type ServerSwitcherMenuProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
-  /** Matches the source menu's open gate. Omit to render as plain composed content. */
-  open?: boolean;
-  /** Called by outside click, ESC, server select, and switch/create. */
-  onClose?: () => void;
-  servers: ServerSwitcherServer[];
-  currentServerId?: string;
-  /** Unread counts keyed by server id. The current server hides its own count. */
-  serverUnreadCounts?: Record<string, number>;
-  onSelectServer: (server: ServerSwitcherServer) => void;
-  /** Community join actions, rendered above "Switch or create server". */
-  joinOptions?: ServerSwitcherJoinOption[];
-  onJoinCommunity?: (slug: string) => void;
-  onSwitchOrCreate?: () => void;
-  testId?: string;
-};
-
-export function ServerSwitcherMenu({
-  servers,
-  currentServerId,
-  serverUnreadCounts = {},
-  onSelectServer,
-  joinOptions = [],
-  onJoinCommunity,
-  onSwitchOrCreate,
-  open = true,
-  onClose,
-  className,
-  testId = "server-switcher-menu",
-  onMouseDown,
-  ...props
-}: ServerSwitcherMenuProps) {
-  const theme = useThemeFamily();
-  const menuRef = useRef<HTMLDivElement | null>(null);
-  const onCloseRef = useRef(onClose);
-  const { root, scroller, actionRow, actionLabel } = serverSwitcherMenu({ theme });
-
-  useEffect(() => {
-    onCloseRef.current = onClose;
-  }, [onClose]);
-
-  useEffect(() => {
-    if (!open || !onClose) return;
-    const handleMouseDown = (event: MouseEvent) => {
-      if (menuRef.current?.contains(event.target as Node)) return;
-      onCloseRef.current?.();
-    };
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") onCloseRef.current?.();
-    };
-    document.addEventListener("mousedown", handleMouseDown);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDown);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [open, onClose]);
-
-  if (!open) return null;
-
-  return (
-    <div
-      {...props}
-      ref={menuRef}
-      data-slot="server-switcher-menu"
-      data-testid={testId}
-      className={root({ className })}
-      onMouseDown={(event) => {
-        onMouseDown?.(event);
-        event.stopPropagation();
-      }}
-    >
-      <div className={scroller()}>
-        {servers.map((server) => {
-          const isCurrent = server.id === currentServerId;
-          const unread = serverUnreadCounts[server.id] || 0;
-          const {
-            serverRow: serverRowSlot,
-            check,
-            serverText,
-            serverName,
-            serverSlug,
-            unread: unreadSlot,
-          } = serverSwitcherMenu({ theme, current: isCurrent });
-          return (
-            <BaseButton
-              key={server.id}
-              type="button"
-              onClick={() => {
-                onSelectServer(server);
-                onClose?.();
-              }}
-              className={serverRowSlot()}
-            >
-              <Check size={14} className={check()} />
-              <div className={serverText()}>
-                <div className={serverName()}>{server.name}</div>
-                <div className={serverSlug()}>/{server.slug}</div>
-              </div>
-              {!isCurrent && unread > 0 && <span className={unreadSlot()}>{unread}</span>}
-            </BaseButton>
-          );
-        })}
-      </div>
-
-      <div className="border-t-2 border-black" />
-
-      {joinOptions.map((option) => (
-        <BaseButton
-          key={option.slug}
-          type="button"
-          onClick={() => onJoinCommunity?.(option.slug)}
-          className={actionRow()}
-        >
-          <Plus size={14} />
-          <span className={actionLabel()}>{option.label}</span>
-        </BaseButton>
-      ))}
-
-      <BaseButton
-        type="button"
-        onClick={() => {
-          onClose?.();
-          onSwitchOrCreate?.();
-        }}
-        className={actionRow()}
-      >
-        <Plus size={14} />
-        <span className={actionLabel()}>Switch or Create Server</span>
-      </BaseButton>
-    </div>
-  );
-}

package/src/legacy/source.css

@@ -1,240 +0,0 @@
-.btn-brutal,
-.btn-brutal-sm,
-.card-brutal,
-.input-brutal {
-  --shadow: 2px 2px 0px var(--color-black);
-  --shadow-hover: 4px 4px 0px var(--color-black);
-  --shadow-active: 1px 1px 0px var(--color-black);
-  --shadow-lg: 6px 6px 0px var(--color-black);
-}
-
-.card-brutal {
-  border: 2px solid var(--color-black);
-  background-color: var(--color-white);
-  box-shadow: var(--shadow-hover);
-}
-
-.btn-brutal {
-  border: 2px solid var(--color-black);
-  font-family: var(--heading-font);
-  font-weight: 700;
-  box-shadow: var(--shadow-hover);
-  transition-property: all;
-  transition-duration: 100ms;
-}
-
-.btn-brutal:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-lg);
-}
-
-.btn-brutal:active {
-  transform: translate(2px, 2px);
-  box-shadow: var(--shadow-active);
-}
-
-.btn-brutal:disabled {
-  pointer-events: none;
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.btn-brutal-sm {
-  border: 2px solid var(--color-black);
-  font-family: var(--heading-font);
-  font-weight: 700;
-  box-shadow: var(--shadow);
-  transition-property: all;
-  transition-duration: 100ms;
-}
-
-.btn-brutal-sm:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-hover);
-}
-
-.btn-brutal-sm:active {
-  transform: translate(1px, 1px);
-  box-shadow: var(--shadow-active);
-}
-
-.btn-brutal-sm:disabled {
-  pointer-events: none;
-  opacity: 0.4;
-  box-shadow: var(--shadow);
-  transform: none;
-}
-
-.shadow-brutal-sm {
-  box-shadow: var(--shadow);
-}
-
-.hover\:shadow-brutal-sm:hover {
-  box-shadow: var(--shadow);
-}
-
-.active\:shadow-brutal-sm:active {
-  box-shadow: var(--shadow);
-}
-
-.shadow-brutal {
-  box-shadow: var(--shadow-hover);
-}
-
-.shadow-brutal-lg {
-  box-shadow: var(--shadow-lg);
-}
-
-.focus-within\:shadow-brutal:focus-within {
-  box-shadow: var(--shadow-hover);
-}
-
-.scrollbar-none {
-  scrollbar-width: none;
-}
-
-.scrollbar-none::-webkit-scrollbar {
-  display: none;
-}
-
-.h-panel-header {
-  height: 62px;
-}
-
-.size-icon-header {
-  width: 36px;
-  height: 36px;
-}
-
-@layer components {
-  .input-brutal {
-    border: 2px solid var(--color-black);
-    background-color: var(--color-white);
-    padding: 0.5rem 0.75rem;
-    font-family: var(--heading-font);
-    box-shadow: var(--shadow);
-  }
-
-  .input-brutal:focus {
-    outline: none;
-    box-shadow: var(--shadow-hover);
-  }
-}
-
-@layer utilities {
-  .border-brutal-red {
-    border-color: var(--color-brutal-red-400);
-  }
-
-  .border-brutal-yellow {
-    border-color: var(--color-brutal-yellow-400);
-  }
-
-  .ring-brutal-red\/60 {
-    --tw-ring-color: oklch(0.711 0.1682 28.04 / 0.6);
-  }
-
-  .bg-brutal-yellow {
-    background-color: var(--color-brutal-yellow-400);
-  }
-
-  .bg-brutal-yellow\/30 {
-    background-color: oklch(0.8829 0.1623 91.9 / 0.3);
-  }
-
-  .bg-brutal-yellow\/45 {
-    background-color: oklch(0.8829 0.1623 91.9 / 0.45);
-  }
-
-  .bg-brutal-pink {
-    background-color: var(--color-brutal-pink-400);
-  }
-
-  .bg-brutal-pink\/35 {
-    background-color: oklch(0.7489 0.1623 0.7 / 0.35);
-  }
-
-  .bg-brutal-cyan {
-    background-color: var(--color-brutal-cyan-400);
-  }
-
-  .bg-brutal-cyan\/15 {
-    background-color: oklch(0.7833 0.1353 219.21 / 0.15);
-  }
-
-  .bg-brutal-cyan\/35 {
-    background-color: oklch(0.7833 0.1353 219.21 / 0.35);
-  }
-
-  .bg-brutal-lavender {
-    background-color: var(--color-brutal-purple-300);
-  }
-
-  .bg-brutal-lavender\/30 {
-    background-color: oklch(0.783 0.0783 294.53 / 0.3);
-  }
-
-  .bg-brutal-lavender\/45 {
-    background-color: oklch(0.783 0.0783 294.53 / 0.45);
-  }
-
-  .bg-brutal-orange {
-    background-color: var(--color-brutal-orange-400);
-  }
-
-  .bg-brutal-orange\/20 {
-    background-color: oklch(0.7855 0.1227 50.11 / 0.2);
-  }
-
-  .bg-brutal-orange\/30 {
-    background-color: oklch(0.7855 0.1227 50.11 / 0.3);
-  }
-
-  .bg-brutal-orange\/40 {
-    background-color: oklch(0.7855 0.1227 50.11 / 0.4);
-  }
-
-  .bg-brutal-lime {
-    background-color: var(--color-brutal-lime-400);
-  }
-
-  .bg-brutal-lime\/20 {
-    background-color: oklch(0.8272 0.1354 130.07 / 0.2);
-  }
-
-  .bg-brutal-lime\/45 {
-    background-color: oklch(0.8272 0.1354 130.07 / 0.45);
-  }
-
-  .bg-brutal-red {
-    background-color: var(--color-brutal-red-400);
-  }
-
-  .bg-brutal-red\/5 {
-    background-color: oklch(0.711 0.1682 28.04 / 0.05);
-  }
-
-  .bg-brutal-red\/20 {
-    background-color: oklch(0.711 0.1682 28.04 / 0.2);
-  }
-
-  .bg-brutal-stone {
-    background-color: var(--color-brutal-stone-400);
-  }
-
-  .bg-brutal-cream {
-    background-color: var(--color-brutal-cream-100);
-  }
-
-  .text-brutal-pink {
-    color: var(--color-brutal-pink-400);
-  }
-
-  .text-brutal-red {
-    color: var(--color-brutal-red-400);
-  }
-
-  .text-brutal-yellow {
-    color: var(--color-brutal-yellow-400);
-  }
-}

package/src/lib/cn.ts

@@ -1 +0,0 @@
-export { cn } from "cnfast";

package/src/lib/styled-props.ts

@@ -1,11 +0,0 @@
-/**
- * Base UI components type `className` as `string | ((state) => string)`, but our
- * tv() recipes only accept a plain string. `StyledProps` narrows a Base UI
- * component's props to a string `className` so they can flow into a recipe.
- *
- * The state-callback form is intentionally dropped: our components express every
- * state through `data-*` variants in the recipe, so a caller never needs it.
- */
-export type StyledProps<P> = Omit<P, "className"> & {
-  className?: string;
-};

package/src/lib/theme/theme-context.ts

@@ -1,28 +0,0 @@
-import { createContext } from "react";
-
-/** Visual style family. Mode (light/dark/system) is a separate axis. */
-export type Theme = "brutal" | "elegant";
-export type ThemeMode = "light" | "dark" | "system";
-export type ResolvedThemeMode = Exclude<ThemeMode, "system">;
-export type SetThemeOptions = {
-  mode?: ThemeMode;
-};
-export type SetTheme = {
-  (theme: "brutal"): void;
-  (theme: "elegant", options?: SetThemeOptions): void;
-};
-
-export type ThemeState = {
-  theme: Theme;
-  setTheme: SetTheme;
-  mode: ThemeMode;
-  resolvedMode: ResolvedThemeMode;
-};
-
-export const ThemeContext = createContext<Theme>("brutal");
-export const ThemeStateContext = createContext<ThemeState>({
-  theme: "brutal",
-  setTheme: () => undefined,
-  mode: "light",
-  resolvedMode: "light",
-});

package/src/lib/theme/theme-provider.tsx

@@ -1,181 +0,0 @@
-"use client";
-
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  useSyncExternalStore,
-  type ReactNode,
-} from "react";
-import {
-  ThemeContext,
-  ThemeStateContext,
-  type ResolvedThemeMode,
-  type SetTheme,
-  type SetThemeOptions,
-  type Theme,
-  type ThemeState,
-  type ThemeMode,
-} from "./theme-context";
-
-export interface ThemeProviderProps {
-  /**
-   * Controlled visual style family. Keep using this for isolated previews and
-   * component matrix surfaces that should not own global DOM state.
-   */
-  theme?: Theme;
-  defaultTheme?: Theme;
-  onThemeChange?: (theme: Theme) => void;
-  /** Controlled light/dark behavior for the elegant family. */
-  mode?: ThemeMode;
-  defaultMode?: ThemeMode;
-  onModeChange?: (mode: ThemeMode) => void;
-  /**
-   * Persist uncontrolled family and mode selections. The mode key appends
-   * "-mode" unless `modeStorageKey` is provided.
-   */
-  storageKey?: string;
-  modeStorageKey?: string;
-  /**
-   * Sync the active family/mode onto `document.documentElement`.
-   * Defaults to true for app-level providers. Set to false for nested previews
-   * or component islands that should not mutate the app root.
-   */
-  syncDom?: boolean;
-  children: ReactNode;
-}
-
-function readStoredTheme(storageKey: string | undefined, fallback: Theme): Theme {
-  if (typeof window === "undefined" || !storageKey) {
-    return fallback;
-  }
-
-  const stored = window.localStorage.getItem(storageKey);
-  return stored === "brutal" || stored === "elegant" ? stored : fallback;
-}
-
-function readStoredMode(storageKey: string | undefined, fallback: ThemeMode): ThemeMode {
-  if (typeof window === "undefined" || !storageKey) {
-    return fallback;
-  }
-
-  const stored = window.localStorage.getItem(storageKey);
-  return stored === "light" || stored === "dark" || stored === "system" ? stored : fallback;
-}
-
-function writeStorage(key: string | undefined, value: string) {
-  if (typeof window !== "undefined" && key) {
-    window.localStorage.setItem(key, value);
-  }
-}
-
-function subscribeSystemMode(onStoreChange: () => void) {
-  if (typeof window === "undefined") {
-    return () => undefined;
-  }
-
-  const media = window.matchMedia("(prefers-color-scheme: dark)");
-  media.addEventListener("change", onStoreChange);
-  return () => media.removeEventListener("change", onStoreChange);
-}
-
-function getSystemMode(): ResolvedThemeMode {
-  if (typeof window === "undefined") {
-    return "light";
-  }
-
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-
-export function ThemeProvider({
-  theme,
-  defaultTheme = "brutal",
-  onThemeChange,
-  mode,
-  defaultMode = "light",
-  onModeChange,
-  storageKey,
-  modeStorageKey = storageKey ? `${storageKey}-mode` : undefined,
-  syncDom = true,
-  children,
-}: ThemeProviderProps) {
-  const [uncontrolledTheme, setUncontrolledTheme] = useState<Theme>(() =>
-    readStoredTheme(storageKey, defaultTheme),
-  );
-  const [uncontrolledMode, setUncontrolledMode] = useState<ThemeMode>(() =>
-    readStoredMode(modeStorageKey, defaultMode),
-  );
-  const activeTheme = theme ?? uncontrolledTheme;
-  const activeMode = mode ?? uncontrolledMode;
-  const systemMode = useSyncExternalStore(
-    subscribeSystemMode,
-    getSystemMode,
-    () => "light" as ResolvedThemeMode,
-  );
-  const resolvedMode: ResolvedThemeMode = activeMode === "system" ? systemMode : activeMode;
-
-  const commitTheme = useCallback(
-    (nextTheme: Theme) => {
-      if (theme === undefined) {
-        setUncontrolledTheme(nextTheme);
-        writeStorage(storageKey, nextTheme);
-      }
-      onThemeChange?.(nextTheme);
-    },
-    [onThemeChange, storageKey, theme],
-  );
-
-  const commitMode = useCallback(
-    (nextMode: ThemeMode) => {
-      if (mode === undefined) {
-        setUncontrolledMode(nextMode);
-        writeStorage(modeStorageKey, nextMode);
-      }
-      onModeChange?.(nextMode);
-    },
-    [mode, modeStorageKey, onModeChange],
-  );
-
-  const setTheme = useCallback<SetTheme>(
-    (nextTheme: Theme, options?: SetThemeOptions) => {
-      commitTheme(nextTheme);
-      if (nextTheme === "brutal") {
-        commitMode("light");
-        return;
-      }
-      if (options?.mode) {
-        commitMode(options.mode);
-      }
-    },
-    [commitMode, commitTheme],
-  );
-
-  const themeState = useMemo<ThemeState>(
-    () => ({
-      theme: activeTheme,
-      setTheme,
-      mode: activeMode,
-      resolvedMode,
-    }),
-    [activeMode, activeTheme, resolvedMode, setTheme],
-  );
-
-  useEffect(() => {
-    if (!syncDom) {
-      return;
-    }
-
-    const root = document.documentElement;
-    root.dataset.theme = activeTheme;
-    root.classList.toggle("light", activeTheme === "elegant" && activeMode === "light");
-    root.classList.toggle("dark", activeTheme === "elegant" && activeMode === "dark");
-    root.style.colorScheme = activeTheme === "elegant" ? resolvedMode : "light";
-  }, [activeMode, activeTheme, resolvedMode, syncDom]);
-
-  return (
-    <ThemeStateContext.Provider value={themeState}>
-      <ThemeContext.Provider value={activeTheme}>{children}</ThemeContext.Provider>
-    </ThemeStateContext.Provider>
-  );
-}

package/src/lib/theme/use-theme.ts

@@ -1,12 +0,0 @@
-import { use } from "react";
-import { ThemeContext, ThemeStateContext, type Theme, type ThemeState } from "./theme-context";
-
-/** Read the active style family for theme-aware component recipes. */
-export function useThemeFamily(): Theme {
-  return use(ThemeContext);
-}
-
-/** Read and update the application-level RUI theme selection. */
-export function useTheme(): ThemeState {
-  return use(ThemeStateContext);
-}

package/src/lib/tv.ts

@@ -1,29 +0,0 @@
-import { cn } from "cnfast";
-import { tv as tvBase, type TVLite } from "tailwind-variants/lite";
-
-export type { VariantProps } from "tailwind-variants/lite";
-
-type SlotFunction = (props?: unknown) => string;
-type SlotRecord = Record<string, SlotFunction>;
-type RecipeFunction = ((props?: unknown) => string | SlotRecord) & Record<string, unknown>;
-
-export const tv: TVLite = ((options: unknown) => {
-  const recipe = tvBase(options as never) as unknown as RecipeFunction;
-
-  const wrappedRecipe = ((props?: unknown) => {
-    const result = recipe(props);
-
-    if (typeof result === "string") {
-      return cn(result);
-    }
-
-    return Object.fromEntries(
-      Object.entries(result).map(([slotName, slot]) => [
-        slotName,
-        (slotProps?: unknown) => cn(slot(slotProps)),
-      ]),
-    );
-  }) as RecipeFunction;
-
-  return Object.assign(wrappedRecipe, recipe);
-}) as unknown as TVLite;