@cntyclub/ui-react 0.1.0

package/src/components/form/text-field.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import type { StandardSchemaV1Issue } from "@tanstack/react-form";
+import {
+  Field,
+  FieldControl,
+  FieldError,
+  FieldLabel,
+} from "../ui/field";
+import { Input } from "../ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "../ui/input-group";
+
+export function TextField({
+  field,
+  label,
+  placeholder,
+  type = "text",
+  inlineLabel,
+  leadingIcon,
+  trailingIcon,
+}: {
+  field: {
+    name: string;
+    state: {
+      value: string;
+      meta: {
+        readonly errors: ReadonlyArray<
+          string | StandardSchemaV1Issue | undefined
+        >;
+      };
+    };
+    handleChange: (nextValue: string) => void;
+    handleBlur: () => void;
+  };
+  label: string;
+  placeholder?: string;
+  type?: React.ComponentProps<typeof Input>["type"];
+  /** Render label inside the input border as a block-start addon */
+  inlineLabel?: boolean;
+  /** Content rendered as an inline-start addon (e.g. an icon) */
+  leadingIcon?: React.ReactNode;
+  /** Content rendered as an inline-end addon (e.g. an icon) */
+  trailingIcon?: React.ReactNode;
+}) {
+  const errors = field.state.meta.errors
+    .map((err) => (typeof err === "string" ? err : err?.message))
+    .filter(Boolean);
+
+  const useInputGroup = inlineLabel || leadingIcon || trailingIcon;
+
+  if (useInputGroup) {
+    return (
+      <Field name={field.name}>
+        {!inlineLabel && <FieldLabel>{label}</FieldLabel>}
+        <InputGroup>
+          {inlineLabel && (
+            <InputGroupAddon align="block-start">
+              <FieldLabel>{label}</FieldLabel>
+            </InputGroupAddon>
+          )}
+          {leadingIcon && (
+            <InputGroupAddon align="inline-start">
+              {leadingIcon}
+            </InputGroupAddon>
+          )}
+          <FieldControl
+            render={
+              <InputGroupInput
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                placeholder={placeholder}
+                type={type}
+              />
+            }
+          />
+          {trailingIcon && (
+            <InputGroupAddon align="inline-end">{trailingIcon}</InputGroupAddon>
+          )}
+        </InputGroup>
+        <FieldError match={!!errors.length}>{errors.join(", ")}</FieldError>
+      </Field>
+    );
+  }
+
+  return (
+    <Field name={field.name}>
+      <FieldLabel>{label}</FieldLabel>
+      <FieldControl
+        render={
+          <Input
+            value={field.state.value}
+            onChange={(e) => field.handleChange(e.target.value)}
+            onBlur={field.handleBlur}
+            placeholder={placeholder}
+            type={type}
+          />
+        }
+      />
+      <FieldError match={!!errors.length}>{errors.join(", ")}</FieldError>
+    </Field>
+  );
+}

package/src/components/layout/dashboard-header.tsx

@@ -0,0 +1,54 @@
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import clsx from "clsx";
+import { isValidElement } from "react";
+import type { AsChildProps } from "../../types/helpers";
+
+interface DashboardHeaderProps extends Omit<AsChildProps<"div">, "title"> {
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  rightActions?: React.ReactNode;
+  breadcrumb?: React.ReactNode;
+}
+
+export function DashboardHeader({
+  title,
+  subtitle,
+  className,
+  children,
+  asChild,
+  rightActions,
+  breadcrumb,
+  ...props
+}: DashboardHeaderProps) {
+  const TitleComp = isValidElement(title) ? Slot : "div";
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      className={clsx("flex flex-col border-b rounded-t-lg", className)}
+      {...props}
+    >
+      <div className={clsx("flex flex-col gap-4 p-4")}>
+        {breadcrumb}
+        {(title || subtitle || rightActions) && (
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-3 min-h-8">
+              {title && (
+                <TitleComp className="grow min-w-0 text-lg font-medium leading-7 tracking-[-0.18px] text-foreground">
+                  {title}
+                </TitleComp>
+              )}
+              {rightActions}
+            </div>
+            {subtitle && (
+              <div className="hidden md:block text-sm font-normal leading-5 text-muted-foreground">
+                {subtitle}
+              </div>
+            )}
+          </div>
+        )}
+        <Slottable>{children}</Slottable>
+      </div>
+    </Comp>
+  );
+}

package/src/components/layout/dashboard-panel.tsx

@@ -0,0 +1,34 @@
+import { Slot } from "@radix-ui/react-slot";
+import clsx from "clsx";
+import type { AsChildProps } from "../../types/helpers";
+import { ScrollArea } from "../ui/scroll-area";
+
+interface DashboardPanelProps extends AsChildProps<"div"> {
+  header?: React.ReactNode;
+}
+
+export function DashboardPanel({
+  className,
+  asChild,
+  children,
+  header,
+  ...props
+}: DashboardPanelProps) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      className={clsx(
+        "flex flex-col grow min-h-0 min-w-0 bg-background rounded border",
+        className,
+      )}
+      {...props}
+    >
+      {header}
+      <ScrollArea className="flex grow flex-col min-h-0 *:data-[slot=scroll-area-viewport]:p-4">
+        {children}
+      </ScrollArea>
+    </Comp>
+  );
+}
+
+export default DashboardPanel;

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,
+};