create-app-ui 1.0.0

package/boilerplate/react-base/src/components/ui/tabs.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { ui } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List ref={ref} className={cn(ui("tabsList"), className)} {...props} />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger ref={ref} className={cn(ui("tabsTrigger"), className)} {...props} />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content ref={ref} className={cn(ui("tabsContent"), className)} {...props} />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/boilerplate/react-base/src/components/ui/textarea.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { ui } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return <textarea className={cn(ui("textarea"), className)} ref={ref} {...props} />;
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/boilerplate/react-base/src/components/ui/toggle-group.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+import { toggleVariants } from "@/components/ui/toggle";
+import { ui } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: "default",
+  variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root ref={ref} className={cn(ui("toggleGroupRoot"), className)} {...props}>
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

package/boilerplate/react-base/src/components/ui/toggle.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ui } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(ui("toggle"), {
+  variants: {
+    variant: {
+      default: "",
+      outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+    },
+    size: {
+      default: "h-9 px-3",
+      sm: "h-8 px-2",
+      lg: "h-10 px-3",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
+));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

package/boilerplate/react-base/src/components/ui/tooltip.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { ui } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(ui("tooltipContent"), className)}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/boilerplate/react-base/src/components/ui/typography.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { ui } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+function TypographyH1({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h1 className={cn("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", className)} {...props} />;
+}
+
+function TypographyH2({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h2
+      className={cn("scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TypographyH3({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn("scroll-m-20 text-2xl font-semibold tracking-tight", className)} {...props} />;
+}
+
+function TypographyH4({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h4 className={cn("scroll-m-20 text-xl font-semibold tracking-tight", className)} {...props} />;
+}
+
+function TypographyP({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("leading-7 [&:not(:first-child)]:mt-6", className)} {...props} />;
+}
+
+function TypographyBlockquote({ className, ...props }: React.HTMLAttributes<HTMLQuoteElement>) {
+  return <blockquote className={cn("mt-6 border-l-2 pl-6 italic", className)} {...props} />;
+}
+
+function TypographyList({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) {
+  return <ul className={cn("my-6 ml-6 list-disc [&>li]:mt-2", className)} {...props} />;
+}
+
+function TypographyInlineCode({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
+  return (
+    <code
+      className={cn(ui("typographyInlineCode"), className)}
+      {...props}
+    />
+  );
+}
+
+function TypographyLead({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-xl text-muted-foreground", className)} {...props} />;
+}
+
+function TypographyLarge({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("text-lg font-semibold", className)} {...props} />;
+}
+
+function TypographySmall({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
+  return <small className={cn("text-sm font-medium leading-none", className)} {...props} />;
+}
+
+function TypographyMuted({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn(ui("typographyMuted"), className)} {...props} />;
+}
+
+export {
+  TypographyBlockquote,
+  TypographyH1,
+  TypographyH2,
+  TypographyH3,
+  TypographyH4,
+  TypographyInlineCode,
+  TypographyLarge,
+  TypographyLead,
+  TypographyList,
+  TypographyMuted,
+  TypographyP,
+  TypographySmall,
+};

package/boilerplate/react-base/src/config/constants.ts

@@ -0,0 +1,3 @@
+export const APP_NAME = "__APP_NAME__";
+export const APP_TITLE = "__APP_TITLE__";
+export const COMPANY_NAME = "__COMPANY_NAME__";

package/boilerplate/react-base/src/config/theme.ts

@@ -0,0 +1,432 @@
+import type { ChartConfig } from "@/components/ui/chart";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** HSL components for `hsl(var(--token))` — space-separated, no `hsl()` wrapper. */
+type HslChannel = string;
+
+export type ThemeMode = "light" | "dark";
+
+export type ThemeCssVariables = {
+  background: HslChannel;
+  foreground: HslChannel;
+  card: HslChannel;
+  "card-foreground": HslChannel;
+  popover: HslChannel;
+  "popover-foreground": HslChannel;
+  primary: HslChannel;
+  "primary-foreground": HslChannel;
+  secondary: HslChannel;
+  "secondary-foreground": HslChannel;
+  muted: HslChannel;
+  "muted-foreground": HslChannel;
+  accent: HslChannel;
+  "accent-foreground": HslChannel;
+  border: HslChannel;
+  input: HslChannel;
+  ring: HslChannel;
+  destructive: HslChannel;
+  "destructive-foreground": HslChannel;
+  radius: string;
+  "sidebar-background": HslChannel;
+  "sidebar-foreground": HslChannel;
+  "sidebar-primary": HslChannel;
+  "sidebar-primary-foreground": HslChannel;
+  "sidebar-accent": HslChannel;
+  "sidebar-accent-foreground": HslChannel;
+  "sidebar-border": HslChannel;
+  "sidebar-ring": HslChannel;
+  "chart-1": HslChannel;
+  "chart-2": HslChannel;
+  "chart-3": HslChannel;
+  "chart-4": HslChannel;
+  "chart-5": HslChannel;
+  brand: HslChannel;
+  "brand-foreground": HslChannel;
+  "auth-page": HslChannel;
+  "auth-hero": HslChannel;
+};
+
+export type ThemePreset = {
+  mode: ThemeMode;
+  cssVariables: ThemeCssVariables;
+  metrics: {
+    revenue: { iconClassName: string; sparklineColor: string };
+    users: { iconClassName: string; sparklineColor: string };
+    conversion: { iconClassName: string; sparklineColor: string };
+  };
+  /** Tailwind class strings shared across layout & UI primitives */
+  classes: {
+    navActive: string;
+    sidebarMenuActive: string;
+    authSubmit: string;
+    authPage: string;
+    authHero: string;
+    authHeroOverlay: string;
+    skeleton: string;
+    destructiveText: string;
+  };
+  /** Per-component styles — used by files under `components/ui` */
+  ui: typeof themeUi;
+};
+
+/** All UI component class tokens (edit here to re-skin primitives). */
+export const themeUi = {
+  overlay: "fixed inset-0 z-50 bg-foreground/80",
+  overlayLight: "fixed inset-0 z-40 bg-foreground/40",
+  focusRing:
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background",
+  iconClose:
+    "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none",
+  popoverContent: "z-[100] w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+  popoverMenu: "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+  popoverMenuWide: "z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+  popoverHover: "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+  dropdownContent: "z-[100] min-w-40 rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+  modalContent:
+    "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg sm:rounded-lg",
+  modalContentTop:
+    "fixed left-[50%] top-[50%] z-[100] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg sm:rounded-lg",
+  chartContainer:
+    "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_]:stroke-border [&_.recharts-sector]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+  accordionItem: "border-b",
+  accordionTrigger:
+    "flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+  accordionChevron: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200",
+  accordionContent:
+    "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+  accordionContentInner: "pb-4 pt-0",
+  alert: "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  alertDefault: "bg-background text-foreground",
+  alertDestructive: "border-destructive/50 text-destructive [&>svg]:text-destructive",
+  avatarRoot: "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+  avatarFallback: "flex h-full w-full items-center justify-center rounded-full bg-muted",
+  badge:
+    "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ring-offset-background",
+  badgeDefault: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+  badgeBrand: "border-transparent bg-brand text-brand-foreground shadow hover:opacity-90",
+  badgeSecondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  badgeDestructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+  badgeOutline: "text-foreground",
+  buttonBase:
+    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  buttonDefault: "bg-primary text-primary-foreground hover:opacity-90",
+  buttonBrand: "bg-brand text-brand-foreground hover:opacity-90",
+  buttonDestructive: "bg-destructive text-destructive-foreground hover:opacity-90",
+  buttonOutline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+  breadcrumbList: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+  breadcrumbLink: "transition-colors hover:text-foreground",
+  breadcrumbPage: "font-normal text-foreground",
+  card: "rounded-lg border bg-card text-card-foreground shadow-sm",
+  cardDescription: "text-sm text-muted-foreground",
+  checkbox:
+    "peer shrink-0 border border-primary shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+  input:
+    "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  textarea:
+    "flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  label: "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  kbd: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+  tooltipContent: "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground",
+  spinner: "size-4 animate-spin text-primary",
+  progressTrack: "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+  progressIndicator: "h-full w-full flex-1 bg-primary transition-all",
+  separator: "shrink-0 bg-border",
+  switchRoot:
+    "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+  switchThumb:
+    "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+  sliderTrack: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20",
+  sliderRange: "absolute h-full bg-primary",
+  sliderThumb:
+    "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  toggle:
+    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  tabsList: "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+  tabsTrigger:
+    "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+  tabsContent: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  tableHeader:
+    "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+  tableCell: "p-2 align-middle text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+  selectTrigger:
+    "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+  selectContent:
+    "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+  drawerContent:
+    "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+  drawerHandle: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted",
+  sheetContent:
+    "fixed z-50 gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  navigationViewport:
+    "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+  calendarDaySelected:
+    "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+  typographyMuted: "text-sm text-muted-foreground",
+  typographyInlineCode:
+    "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground",
+  radioItem:
+    "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  itemBase:
+    "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring",
+  inputGroup:
+    "group/input-group relative flex w-full items-center rounded-md border border-input bg-background shadow-sm has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20",
+  sonnerToast:
+    "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+  sonnerDescription: "group-[.toast]:text-muted-foreground",
+  sonnerAction: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+  sonnerCancel: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+  scrollThumb: "relative flex-1 rounded-full bg-border",
+  inputOtpSlot:
+    "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm text-foreground shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+  fieldDescription: "text-sm font-normal leading-normal text-muted-foreground",
+  toggleGroupRoot: "flex items-center justify-center gap-1",
+  datePickerTrigger: "w-[240px] justify-start text-left font-normal",
+  datePickerPopoverContent: "w-auto p-0",
+  dropdownTrigger: "w-full justify-between font-normal",
+  dropdownTriggerMulti: "h-auto min-h-10 w-full justify-between py-2 font-normal",
+  dropdownPopoverContent: "w-[var(--radix-popover-trigger-width)] p-0",
+  dropdownSearchBar: "flex items-center border-b px-3",
+  dropdownSearchInput:
+    "flex h-10 w-full rounded-md bg-transparent py-3 text-sm text-foreground outline-none placeholder:text-muted-foreground",
+  dropdownEmpty: "py-6 text-center",
+  dropdownOptionItem:
+    "relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
+  dropdownOptionItemActive: "bg-accent text-accent-foreground",
+  dropdownOptionItemMulti:
+    "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
+  dropdownOptionItemMultiSelected: "bg-accent/60",
+  dropdownFooter: "flex items-center justify-between gap-2 border-t border-border px-3 py-2",
+  dropdownCheckIcon: "mr-2 h-4 w-4 shrink-0",
+  dropdownChevron: "ml-2 h-4 w-4 shrink-0 opacity-50",
+  dropdownSearchIcon: "mr-2 h-4 w-4 shrink-0 opacity-50",
+} as const;
+
+export type ThemeUiKey = keyof typeof themeUi;
+
+/** Resolve a UI theme class token by key. */
+export function ui(key: ThemeUiKey): string {
+  return themeUi[key];
+}
+
+// ---------------------------------------------------------------------------
+// Presets — edit values here to re-skin the entire app
+// ---------------------------------------------------------------------------
+
+const sharedClasses = {
+  navActive: "bg-primary/10 font-medium text-primary",
+  sidebarMenuActive:
+    "data-[active=true]:bg-primary/10 data-[active=true]:font-medium data-[active=true]:text-primary",
+  authSubmit: "w-full",
+  authPage: "bg-auth-page",
+  authHero: "bg-auth-hero",
+  authHeroOverlay: "from-auth-hero/40",
+  skeleton: "bg-primary/10",
+  destructiveText: "text-destructive",
+} as const;
+
+const metricIcon = (chartIndex: 1 | 2 | 3 | 4 | 5) =>
+  `text-chart-${chartIndex} bg-chart-${chartIndex}/10 border-chart-${chartIndex}/20`;
+
+export const lightThemePreset: ThemePreset = {
+  mode: "light",
+  cssVariables: {
+    background: "0 0% 100%",
+    foreground: "222.2 84% 4.9%",
+    card: "0 0% 100%",
+    "card-foreground": "222.2 84% 4.9%",
+    popover: "0 0% 100%",
+    "popover-foreground": "222.2 84% 4.9%",
+    primary: "221.2 83.2% 53.3%",
+    "primary-foreground": "210 40% 98%",
+    secondary: "210 40% 96.1%",
+    "secondary-foreground": "222.2 47.4% 11.2%",
+    muted: "210 40% 96.1%",
+    "muted-foreground": "215.4 16.3% 46.9%",
+    accent: "210 40% 96.1%",
+    "accent-foreground": "222.2 47.4% 11.2%",
+    border: "214.3 31.8% 91.4%",
+    input: "214.3 31.8% 91.4%",
+    ring: "221.2 83.2% 53.3%",
+    destructive: "0 84.2% 60.2%",
+    "destructive-foreground": "210 40% 98%",
+    radius: "0.75rem",
+    "sidebar-background": "0 0% 98%",
+    "sidebar-foreground": "240 5.3% 26.1%",
+    "sidebar-primary": "221.2 83.2% 53.3%",
+    "sidebar-primary-foreground": "210 40% 98%",
+    "sidebar-accent": "240 4.8% 95.9%",
+    "sidebar-accent-foreground": "240 5.9% 10%",
+    "sidebar-border": "220 13% 91%",
+    "sidebar-ring": "221.2 83.2% 53.3%",
+    "chart-1": "221.2 83.2% 53.3%",
+    "chart-2": "173 58% 39%",
+    "chart-3": "197 37% 24%",
+    "chart-4": "43 74% 66%",
+    "chart-5": "27 87% 67%",
+    brand: "73 78% 66%",
+    "brand-foreground": "0 0% 0%",
+    "auth-page": "220 14% 96%",
+    "auth-hero": "222 71% 11%",
+  },
+  metrics: {
+    revenue: {
+      iconClassName: metricIcon(2),
+      sparklineColor: "hsl(var(--chart-2))",
+    },
+    users: {
+      iconClassName: "text-primary bg-primary/10 border-primary/20",
+      sparklineColor: "hsl(var(--chart-1))",
+    },
+    conversion: {
+      iconClassName: metricIcon(4),
+      sparklineColor: "hsl(var(--chart-4))",
+    },
+  },
+  classes: sharedClasses,
+  ui: themeUi,
+};
+
+export const darkThemePreset: ThemePreset = {
+  mode: "dark",
+  cssVariables: {
+    background: "222.2 84% 4.9%",
+    foreground: "210 40% 98%",
+    card: "222.2 84% 4.9%",
+    "card-foreground": "210 40% 98%",
+    popover: "222.2 84% 4.9%",
+    "popover-foreground": "210 40% 98%",
+    primary: "217.2 91.2% 59.8%",
+    "primary-foreground": "222.2 47.4% 11.2%",
+    secondary: "217.2 32.6% 17.5%",
+    "secondary-foreground": "210 40% 98%",
+    muted: "217.2 32.6% 17.5%",
+    "muted-foreground": "215 20.2% 65.1%",
+    accent: "217.2 32.6% 17.5%",
+    "accent-foreground": "210 40% 98%",
+    border: "217.2 32.6% 17.5%",
+    input: "217.2 32.6% 17.5%",
+    ring: "224.3 76.3% 48%",
+    destructive: "0 62.8% 30.6%",
+    "destructive-foreground": "210 40% 98%",
+    radius: "0.75rem",
+    "sidebar-background": "240 5.9% 10%",
+    "sidebar-foreground": "240 4.8% 95.9%",
+    "sidebar-primary": "224.3 76.3% 48%",
+    "sidebar-primary-foreground": "0 0% 100%",
+    "sidebar-accent": "240 3.7% 15.9%",
+    "sidebar-accent-foreground": "240 4.8% 95.9%",
+    "sidebar-border": "240 3.7% 15.9%",
+    "sidebar-ring": "217.2 91.2% 59.8%",
+    "chart-1": "220 70% 50%",
+    "chart-2": "160 60% 45%",
+    "chart-3": "30 80% 55%",
+    "chart-4": "280 65% 60%",
+    "chart-5": "340 75% 55%",
+    brand: "73 78% 66%",
+    "brand-foreground": "0 0% 0%",
+    "auth-page": "222.2 84% 4.9%",
+    "auth-hero": "222 71% 11%",
+  },
+  metrics: {
+    revenue: {
+      iconClassName: metricIcon(2),
+      sparklineColor: "hsl(var(--chart-2))",
+    },
+    users: {
+      iconClassName: "text-primary bg-primary/10 border-primary/20",
+      sparklineColor: "hsl(var(--chart-1))",
+    },
+    conversion: {
+      iconClassName: metricIcon(4),
+      sparklineColor: "hsl(var(--chart-4))",
+    },
+  },
+  classes: sharedClasses,
+  ui: themeUi,
+};
+
+/** Active theme — set to `"dark"` for dark mode by default. */
+export const THEME_MODE: ThemeMode = "light";
+
+const presets: Record<ThemeMode, ThemePreset> = {
+  light: lightThemePreset,
+  dark: darkThemePreset,
+};
+
+export const THEME = presets[THEME_MODE];
+
+export function getThemePreset(mode: ThemeMode = THEME_MODE): ThemePreset {
+  return presets[mode];
+}
+
+// ---------------------------------------------------------------------------
+// Chart helpers & configs
+// ---------------------------------------------------------------------------
+
+export type ChartColorIndex = 1 | 2 | 3 | 4 | 5;
+
+export function chartColor(index: ChartColorIndex): string {
+  return `hsl(var(--chart-${index}))`;
+}
+
+export function chartFill(index: ChartColorIndex): string {
+  return chartColor(index);
+}
+
+export const revenueChartConfig = {
+  revenue: { label: "Revenue", color: chartColor(1) },
+  users: { label: "New users", color: chartColor(2) },
+} satisfies ChartConfig;
+
+export const activeUsersChartConfig = {
+  users: { label: "Active users", color: chartColor(1) },
+} satisfies ChartConfig;
+
+export const trafficChartConfig = {
+  visitors: { label: "Visitors", color: chartColor(1) },
+} satisfies ChartConfig;
+
+export const roleChartConfig = {
+  Admin: { label: "Admin", color: chartColor(1) },
+  Editor: { label: "Editor", color: chartColor(2) },
+  Viewer: { label: "Viewer", color: chartColor(3) },
+  Invited: { label: "Invited", color: chartColor(4) },
+} satisfies ChartConfig;
+
+export const deviceChartConfig = {
+  Desktop: { label: "Desktop", color: chartColor(1) },
+  Mobile: { label: "Mobile", color: chartColor(2) },
+  Tablet: { label: "Tablet", color: chartColor(3) },
+} satisfies ChartConfig;
+
+// ---------------------------------------------------------------------------
+// CSS injection (single source — no duplicate tokens in globals.css)
+// ---------------------------------------------------------------------------
+
+const THEME_STYLE_ID = "app-theme-variables";
+
+function cssVariablesToDeclarations(variables: ThemeCssVariables): string {
+  return Object.entries(variables)
+    .map(([key, value]) => `  --${key}: ${value};`)
+    .join("\n");
+}
+
+export function buildThemeStylesheet(): string {
+  return `:root {\n${cssVariablesToDeclarations(lightThemePreset.cssVariables)}\n}\n.dark {\n${cssVariablesToDeclarations(darkThemePreset.cssVariables)}\n}`;
+}
+
+export function initializeTheme(): void {
+  let style = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null;
+  if (!style) {
+    style = document.createElement("style");
+    style.id = THEME_STYLE_ID;
+    document.head.prepend(style);
+  }
+  style.textContent = buildThemeStylesheet();
+
+  const root = document.documentElement;
+  root.classList.toggle("dark", THEME_MODE === "dark");
+}