@momentumworld/ui-react 0.17.0

package/src/components/theme-provider.tsx

@@ -0,0 +1,403 @@
+"use client";
+
+/*
+  This file is adapted from next-themes to work with tanstack start.
+  next-themes can be found at https://github.com/pacocoursey/next-themes under the MIT license.
+*/
+
+import {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+interface ValueObject {
+  [themeName: string]: string;
+}
+
+export interface UseThemeProps {
+  /** List of all available theme names */
+  themes: string[];
+  /** Forced theme name for the current page */
+  forcedTheme?: string | undefined;
+  /** Update the theme */
+  setTheme: React.Dispatch<React.SetStateAction<string>>;
+  /** Active theme name */
+  theme?: string | undefined;
+  /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
+  resolvedTheme?: string | undefined;
+  /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
+  systemTheme?: "dark" | "light" | undefined;
+}
+
+export type Attribute = `data-${string}` | "class";
+
+export interface ThemeProviderProps extends React.PropsWithChildren {
+  /** List of all available theme names */
+  themes?: string[] | undefined;
+  /** Forced theme name for the current page */
+  forcedTheme?: string | undefined;
+  /** Whether to switch between dark and light themes based on prefers-color-scheme */
+  enableSystem?: boolean | undefined;
+  /** Disable all CSS transitions when switching themes */
+  disableTransitionOnChange?: boolean | undefined;
+  /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
+  enableColorScheme?: boolean | undefined;
+  /** Key used to store theme setting in localStorage */
+  storageKey?: string | undefined;
+  /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
+  defaultTheme?: string | undefined;
+  /** HTML attribute modified based on the active theme. Accepts `class`, `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.), or an array which could include both */
+  attribute?: Attribute | Attribute[] | undefined;
+  /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
+  value?: ValueObject | undefined;
+  /** Nonce string to pass to the inline script for CSP headers */
+  nonce?: string | undefined;
+}
+
+const colorSchemes = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const isServer = typeof window === "undefined";
+const ThemeContext = createContext<UseThemeProps | undefined>(undefined);
+const defaultContext: UseThemeProps = { setTheme: (_) => {}, themes: [] };
+
+export const useTheme = () => useContext(ThemeContext) ?? defaultContext;
+
+export const ThemeProvider = (props: ThemeProviderProps): React.ReactNode => {
+  const context = useContext(ThemeContext);
+
+  // Ignore nested context providers, just passthrough children
+  if (context) return props.children;
+  return <Theme {...props} />;
+};
+
+const defaultThemes = ["light", "dark"];
+
+export const ThemeContextOverride = ({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: string;
+}) => {
+  const context = useContext(ThemeContext);
+
+  if (!context) return children;
+  return (
+    <ThemeContext.Provider
+      value={{
+        ...context,
+        resolvedTheme: value,
+        forcedTheme: value,
+        theme: value,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+const Theme = ({
+  forcedTheme,
+  disableTransitionOnChange = false,
+  enableSystem = true,
+  enableColorScheme = true,
+  storageKey = "theme",
+  themes = defaultThemes,
+  defaultTheme = enableSystem ? "system" : "light",
+  attribute = "data-theme",
+  value,
+  children,
+  nonce,
+}: ThemeProviderProps) => {
+  const [theme, setThemeState] = useState(() =>
+    getTheme(storageKey, defaultTheme),
+  );
+  const [resolvedTheme, setResolvedTheme] = useState(() =>
+    theme === "system" ? getSystemTheme() : theme,
+  );
+  const attrs = !value ? themes : Object.values(value);
+
+  // apply selected theme function (light, dark, system)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Code is copied from the library
+  const applyTheme = useCallback((theme: string | undefined) => {
+    let resolved = theme;
+    if (!resolved) return;
+
+    // If theme is system, resolve it before setting theme
+    if (theme === "system" && enableSystem) {
+      resolved = getSystemTheme();
+    }
+
+    const name = value ? value[resolved] : resolved;
+    const enable = disableTransitionOnChange ? disableAnimation() : null;
+    const d = document.documentElement;
+
+    const handleAttribute = (attr: Attribute) => {
+      if (attr === "class") {
+        d.classList.remove(...attrs);
+        if (name) d.classList.add(name);
+      } else if (attr.startsWith("data-")) {
+        if (name) {
+          d.setAttribute(attr, name);
+        } else {
+          d.removeAttribute(attr);
+        }
+      }
+    };
+
+    if (Array.isArray(attribute)) attribute.forEach(handleAttribute);
+    else handleAttribute(attribute);
+
+    if (enableColorScheme) {
+      const fallback = colorSchemes.includes(defaultTheme)
+        ? defaultTheme
+        : null;
+      const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;
+      // @ts-expect-error
+      d.style.colorScheme = colorScheme;
+    }
+
+    enable?.();
+  }, []);
+
+  // Set theme state and save to local storage
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Code is copied from the library
+  const setTheme = useCallback(
+    // biome-ignore lint/suspicious/noExplicitAny: Code is copied from the library
+    (value: any) => {
+      const newTheme = typeof value === "function" ? value(theme) : value;
+      setThemeState(newTheme);
+
+      // Save to storage
+      try {
+        localStorage.setItem(storageKey, newTheme);
+      } catch {
+        // Unsupported
+      }
+    },
+    [theme],
+  );
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Code is copied from the library
+  const handleMediaQuery = useCallback(
+    (e: MediaQueryListEvent | MediaQueryList) => {
+      const resolved = getSystemTheme(e);
+      setResolvedTheme(resolved);
+
+      if (theme === "system" && enableSystem && !forcedTheme) {
+        applyTheme("system");
+      }
+    },
+    [theme, forcedTheme],
+  );
+
+  // Always listen to System preference
+  useEffect(() => {
+    const media = window.matchMedia(MEDIA);
+
+    // Intentionally use deprecated listener methods to support iOS & old browsers
+    media.addListener(handleMediaQuery);
+    handleMediaQuery(media);
+
+    return () => media.removeListener(handleMediaQuery);
+  }, [handleMediaQuery]);
+
+  // localStorage event handling, allow to sync theme changes between tabs
+  // biome-ignore lint/correctness/useExhaustiveDependencies: The code is copied
+  useEffect(() => {
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key !== storageKey) {
+        return;
+      }
+
+      // If default theme set, use it if localstorage === null (happens on local storage manual deletion)
+      const theme = e.newValue || defaultTheme;
+      setTheme(theme);
+    };
+
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, [setTheme]);
+
+  // Whenever theme or forcedTheme changes, apply it
+  // biome-ignore lint/correctness/useExhaustiveDependencies: The code is copied
+  useEffect(() => {
+    applyTheme(forcedTheme ?? theme);
+  }, [forcedTheme, theme]);
+
+  const providerValue = useMemo(
+    () => ({
+      theme,
+      setTheme,
+      forcedTheme,
+      themes: enableSystem ? [...themes, "system"] : themes,
+      resolvedTheme: theme === "system" ? resolvedTheme : theme,
+      systemTheme: (enableSystem ? resolvedTheme : undefined) as
+        | "light"
+        | "dark"
+        | undefined,
+    }),
+    [theme, setTheme, forcedTheme, enableSystem, themes, resolvedTheme],
+  );
+
+  return (
+    <ThemeContext.Provider value={providerValue}>
+      <ThemeScript
+        {...{
+          forcedTheme,
+          storageKey,
+          attribute,
+          enableSystem,
+          enableColorScheme,
+          defaultTheme,
+          value,
+          themes,
+          nonce,
+        }}
+      />
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+const ThemeScript = memo(
+  ({
+    forcedTheme,
+    storageKey,
+    attribute,
+    enableSystem,
+    enableColorScheme,
+    defaultTheme,
+    value,
+    themes,
+    nonce,
+  }: Omit<ThemeProviderProps, "children"> & { defaultTheme: string }) => {
+    const scriptArgs = JSON.stringify([
+      attribute,
+      storageKey,
+      defaultTheme,
+      forcedTheme,
+      themes,
+      value,
+      enableSystem,
+      enableColorScheme,
+    ]).slice(1, -1);
+
+    return (
+      <script
+        suppressHydrationWarning
+        nonce={typeof window === "undefined" ? nonce : ""}
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: Needed to inject script before hydration
+        dangerouslySetInnerHTML={{
+          __html: `(${script.toString()})(${scriptArgs})`,
+        }}
+      />
+      // <></>
+    );
+  },
+);
+
+// Helpers
+const getTheme = (key: string, fallback?: string) => {
+  if (isServer) return undefined;
+  let theme: string | undefined;
+  try {
+    theme = localStorage.getItem(key) || undefined;
+  } catch {
+    // Unsupported
+  }
+  return theme || fallback;
+};
+
+const disableAnimation = () => {
+  const css = document.createElement("style");
+  css.appendChild(
+    document.createTextNode(
+      "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}",
+    ),
+  );
+  document.head.appendChild(css);
+
+  return () => {
+    // Force restyle
+    (() => window.getComputedStyle(document.body))();
+
+    // Wait for next tick before removing
+    setTimeout(() => {
+      document.head.removeChild(css);
+    }, 1);
+  };
+};
+
+const getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => {
+  const event = e ?? window.matchMedia(MEDIA);
+  const isDark = event.matches;
+  const systemTheme = isDark ? "dark" : "light";
+  return systemTheme;
+};
+
+/*
+  This file is adapted from next-themes to work with tanstack start.
+  next-themes can be found at https://github.com/pacocoursey/next-themes under the MIT license.
+*/
+
+// biome-ignore lint/suspicious/noExplicitAny: Code is copied from the library
+export const script: (...args: any[]) => void = (
+  attribute,
+  storageKey,
+  defaultTheme,
+  forcedTheme,
+  themes,
+  value,
+  enableSystem,
+  enableColorScheme,
+) => {
+  const el = document.documentElement;
+  const systemThemes = ["light", "dark"];
+  const isClass = attribute === "class";
+  const classes =
+    isClass && value
+      ? themes.map((t: string | number) => value[t] || t)
+      : themes;
+
+  function updateDOM(theme: string) {
+    if (isClass) {
+      el.classList.remove(...classes);
+      el.classList.add(theme);
+    } else {
+      el.setAttribute(attribute, theme);
+    }
+
+    setColorScheme(theme);
+  }
+
+  function setColorScheme(theme: string) {
+    if (enableColorScheme && systemThemes.includes(theme)) {
+      el.style.colorScheme = theme;
+    }
+  }
+
+  function getSystemTheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+
+  if (forcedTheme) {
+    updateDOM(forcedTheme);
+  } else {
+    try {
+      const themeName = localStorage.getItem(storageKey) || defaultTheme;
+      const isSystem = enableSystem && themeName === "system";
+      const theme = isSystem ? getSystemTheme() : themeName;
+      updateDOM(theme);
+    } catch {
+      //
+    }
+  }
+};

package/src/components/ui/accordion.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "../../lib/utils/css";
+
+function Accordion(props: AccordionPrimitive.Root.Props) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      className={cn("border-b last:border-b-0", className)}
+      data-slot="accordion-item"
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        className={cn(
+          "flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180",
+          className,
+        )}
+        data-slot="accordion-trigger"
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          className="pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-80 transition-transform duration-200 ease-in-out"
+          data-slot="accordion-indicator"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionPanel({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      className="h-(--accordion-panel-height) overflow-hidden text-muted-foreground text-sm transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0"
+      data-slot="accordion-panel"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionPanel,
+  AccordionPanel as AccordionContent,
+};

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+
+import { cn } from "../../lib/utils/css";
+
+const AlertDialogCreateHandle = AlertDialogPrimitive.createHandle;
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+function AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogBackdrop({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      className={cn(
+        "fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className,
+      )}
+      data-slot="alert-dialog-backdrop"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogViewport({
+  className,
+  ...props
+}: AlertDialogPrimitive.Viewport.Props) {
+  return (
+    <AlertDialogPrimitive.Viewport
+      className={cn(
+        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4",
+        className,
+      )}
+      data-slot="alert-dialog-viewport"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogPopup({
+  className,
+  bottomStickOnMobile = true,
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  bottomStickOnMobile?: boolean;
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogBackdrop />
+      <AlertDialogViewport
+        className={cn(
+          bottomStickOnMobile &&
+            "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",
+        )}
+      >
+        <AlertDialogPrimitive.Popup
+          className={cn(
+            "-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            bottomStickOnMobile &&
+              "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
+            className,
+          )}
+          data-slot="alert-dialog-popup"
+          {...props}
+        />
+      </AlertDialogViewport>
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left",
+        className,
+      )}
+      data-slot="alert-dialog-header"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & {
+  variant?: "default" | "bare";
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]",
+        variant === "default" && "border-t bg-muted/72 py-4",
+        variant === "bare" && "pb-6",
+        className,
+      )}
+      data-slot="alert-dialog-footer"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: AlertDialogPrimitive.Title.Props) {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn(
+        "font-heading font-semibold text-xl leading-none",
+        className,
+      )}
+      data-slot="alert-dialog-title"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogPrimitive.Description.Props) {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="alert-dialog-description"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogClose(props: AlertDialogPrimitive.Close.Props) {
+  return (
+    <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />
+  );
+}
+
+export {
+  AlertDialogCreateHandle,
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogBackdrop,
+  AlertDialogBackdrop as AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogPopup,
+  AlertDialogPopup as AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogClose,
+  AlertDialogViewport,
+};