@usetheo/ui 0.1.0-next.0 → 0.3.0-next.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
 import { createContext, forwardRef, useId, Children, isValidElement, cloneElement, useState, useMemo, Fragment as Fragment$1, useRef, useEffect, useContext, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
@@ -20,6 +20,19 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { Command } from 'cmdk';
 
 // src/lib/cn.ts
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        { text: ["display-2xl", "display-xl", "display-lg", "display-md"] },
+        { text: ["headline", "title-lg", "title-md"] },
+        { text: ["body-lg", "body-md", "body-sm"] },
+        { text: ["label", "label-caps"] },
+        { text: ["code-md", "code-sm"] }
+      ]
+    }
+  }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -39,8 +52,30 @@ function safeHref(url) {
   }
   return url;
 }
+var DensityContext = createContext(void 0);
+var STYLE_ELEMENT_ID = "theo-ui-density-vars";
+var DENSITY_CSS = `[data-density="compact"]     { --theo-control-h: 2rem;    --theo-control-px: 0.75rem; }
+[data-density="comfortable"] { --theo-control-h: 2.25rem; --theo-control-px: 0.875rem; }
+[data-density="spacious"]    { --theo-control-h: 2.75rem; --theo-control-px: 1rem; }
+`;
+function injectDensityCss() {
+  if (typeof document === "undefined") return false;
+  if (document.getElementById(STYLE_ELEMENT_ID)) return false;
+  const style = document.createElement("style");
+  style.id = STYLE_ELEMENT_ID;
+  style.textContent = DENSITY_CSS;
+  document.head.appendChild(style);
+  return true;
+}
+function useDensity() {
+  const ctx = useContext(DensityContext);
+  if (!ctx) {
+    throw new Error("useDensity must be used inside <ThemeProvider>.");
+  }
+  return ctx;
+}
 var ThemeContext = createContext(void 0);
-var STYLE_ELEMENT_ID = "theo-ui-theme-vars";
+var STYLE_ELEMENT_ID2 = "theo-ui-theme-vars";
 var COLOR_VALUE_PATTERN = /^(#[0-9a-fA-F]{3,8}|(?:oklch|oklab|rgb|rgba|hsl|hsla|lab|lch|color)\(\s*[\d.\s%,/+\-]+\s*\)|-?\d+(?:\.\d+)?%?(?:\s+-?\d+(?:\.\d+)?%?){1,3}|var\(--[a-zA-Z0-9-]+(?:\s*,\s*[^();{}]+)?\)|transparent|currentColor|inherit|initial|unset)$/;
 var FONT_FAMILY_PATTERN = /^[\w\s,"'\-.]+$/;
 var THEME_NAME_PATTERN = /^[a-z][a-z0-9-]*$/;
@@ -86,10 +121,10 @@ function fontsToCss(name, fonts) {
 }
 function injectThemeCss(themes) {
   if (typeof document === "undefined") return;
-  let style = document.getElementById(STYLE_ELEMENT_ID);
+  let style = document.getElementById(STYLE_ELEMENT_ID2);
   if (!style) {
     style = document.createElement("style");
-    style.id = STYLE_ELEMENT_ID;
+    style.id = STYLE_ELEMENT_ID2;
     document.head.appendChild(style);
   }
   const blocks = [];
@@ -124,7 +159,8 @@ function ThemeProvider({
   defaultTheme = "violet-forge",
   defaultMode = "dark",
   themes: themesProp,
-  storageKey = "theo-ui:theme"
+  storageKey = "theo-ui:theme",
+  defaultDensity = "comfortable"
 }) {
   if (!themesProp || themesProp.length === 0) {
     throw new Error(
@@ -171,6 +207,16 @@ function ThemeProvider({
       return defaultMode;
     }
   });
+  const [density, setDensityState] = useState(() => {
+    if (typeof window === "undefined" || !storageKey) return defaultDensity;
+    try {
+      const stored = window.localStorage.getItem(`${storageKey}:density`);
+      return stored === "compact" || stored === "comfortable" || stored === "spacious" ? stored : defaultDensity;
+    } catch (err) {
+      warnStorageFailure("read density", err);
+      return defaultDensity;
+    }
+  });
   useEffect(() => {
     injectThemeCss(themes);
   }, [themes]);
@@ -180,24 +226,28 @@ function ThemeProvider({
     if (!active2) return;
     document.documentElement.setAttribute("data-theme", active2.name);
     document.documentElement.setAttribute("data-mode", mode);
+    document.documentElement.setAttribute("data-density", density);
     document.documentElement.classList.toggle("dark", mode === "dark");
     loadThemeFonts(active2);
-  }, [themeName, mode, themes]);
+    injectDensityCss();
+  }, [themeName, mode, density, themes]);
   useEffect(() => {
     if (typeof window === "undefined" || !storageKey) return;
     try {
       window.localStorage.setItem(`${storageKey}:name`, themeName);
       window.localStorage.setItem(`${storageKey}:mode`, mode);
+      window.localStorage.setItem(`${storageKey}:density`, density);
     } catch (err) {
-      warnStorageFailure("persist theme + mode", err);
+      warnStorageFailure("persist theme + mode + density", err);
     }
-  }, [themeName, mode, storageKey]);
+  }, [themeName, mode, density, storageKey]);
   const setTheme = useCallback((name) => setThemeName(name), []);
   const setMode = useCallback((next) => setModeState(next), []);
   const toggleMode = useCallback(
     () => setModeState((cur) => cur === "light" ? "dark" : "light"),
     []
   );
+  const setDensity = useCallback((next) => setDensityState(next), []);
   const registerTheme = useCallback((theme) => {
     setThemes((cur) => {
       const idx = cur.findIndex((t) => t.name === theme.name);
@@ -222,7 +272,8 @@ function ThemeProvider({
     }),
     [active, mode, themes, setTheme, setMode, toggleMode, registerTheme]
   );
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+  const densityValue = useMemo(() => ({ density, setDensity }), [density, setDensity]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx(DensityContext.Provider, { value: densityValue, children }) });
 }
 function useTheme() {
   const ctx = useContext(ThemeContext);
@@ -550,11 +601,119 @@ var auroraTerminal = {
   }
 };
 
+// src/themes/define.ts
+var NAME_PATTERN = /^[a-z][a-z0-9-]*$/i;
+function defaultLabel(name) {
+  if (name.length === 0) return name;
+  return name.charAt(0).toUpperCase() + name.slice(1);
+}
+function defineTheme(input) {
+  if (typeof input?.name !== "string" || input.name.length === 0) {
+    throw new Error("defineTheme: `name` is required and cannot be empty.");
+  }
+  if (!NAME_PATTERN.test(input.name)) {
+    throw new Error(
+      `defineTheme: invalid name "${input.name}". Must match /^[a-z][a-z0-9-]*$/i \u2014 letters, digits, and hyphens only, starting with a letter.`
+    );
+  }
+  const lightOverride = input.light ?? {};
+  const darkOverride = input.dark ?? {};
+  const fontsOverride = input.fonts ?? {};
+  const theme = {
+    name: input.name,
+    label: input.label ?? defaultLabel(input.name),
+    description: input.description,
+    fonts: { ...violetForge.fonts, ...fontsOverride },
+    light: { ...violetForge.light, ...lightOverride },
+    dark: { ...violetForge.dark, ...darkOverride },
+    fontUrls: input.fontUrls ?? violetForge.fontUrls
+  };
+  return theme;
+}
+
+// src/themes/color.ts
+function hexCharToNibble(ch) {
+  if (ch >= "0" && ch <= "9") return ch.charCodeAt(0) - 48;
+  if (ch >= "a" && ch <= "f") return ch.charCodeAt(0) - 87;
+  if (ch >= "A" && ch <= "F") return ch.charCodeAt(0) - 55;
+  throw new Error(`hex(): invalid hex character "${ch}"`);
+}
+function parseHex(input) {
+  if (!input.startsWith("#")) {
+    throw new Error(`hex(): expected '#'-prefixed input, got "${input}"`);
+  }
+  const body = input.slice(1);
+  let r;
+  let g;
+  let b;
+  if (body.length === 3 || body.length === 4) {
+    const nr = hexCharToNibble(body.charAt(0));
+    const ng = hexCharToNibble(body.charAt(1));
+    const nb = hexCharToNibble(body.charAt(2));
+    r = nr << 4 | nr;
+    g = ng << 4 | ng;
+    b = nb << 4 | nb;
+  } else if (body.length === 6 || body.length === 8) {
+    r = hexCharToNibble(body.charAt(0)) << 4 | hexCharToNibble(body.charAt(1));
+    g = hexCharToNibble(body.charAt(2)) << 4 | hexCharToNibble(body.charAt(3));
+    b = hexCharToNibble(body.charAt(4)) << 4 | hexCharToNibble(body.charAt(5));
+  } else {
+    throw new Error(
+      `hex(): invalid length ${body.length} for hex input "${input}" \u2014 expected 3, 4, 6, or 8 hex chars after the '#'.`
+    );
+  }
+  return { r, g, b };
+}
+function rgbToHsl(r, g, b) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case rn:
+        h = (gn - bn) / d + (gn < bn ? 6 : 0);
+        break;
+      case gn:
+        h = (bn - rn) / d + 2;
+        break;
+      default:
+        h = (rn - gn) / d + 4;
+        break;
+    }
+    h *= 60;
+  }
+  const hh = Math.round(h);
+  const ss = Math.round(s * 100);
+  const ll = Math.round(l * 100);
+  return `${hh} ${ss}% ${ll}%`;
+}
+function hex(input) {
+  const { r, g, b } = parseHex(input);
+  return rgbToHsl(r, g, b);
+}
+function rgb(r, g, b) {
+  for (const value of [r, g, b]) {
+    if (!Number.isFinite(value) || value < 0 || value > 255) {
+      throw new Error(
+        `rgb(): channel out of range \u2014 expected 0..255, got ${value}. Did you mix percentage values?`
+      );
+    }
+  }
+  return rgbToHsl(Math.round(r), Math.round(g), Math.round(b));
+}
+
 // src/themes/index.ts
 var builtinThemes = [violetForge, classicPaper, auroraTerminal];
 var toastVariants = cva(
   [
-    "group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-lg border p-4 pr-10 shadow-md",
+    "group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-lg border pr-10 shadow-md",
     "data-[state=open]:slide-in-from-top-full data-[state=open]:fade-in-0 data-[state=open]:animate-in",
     "data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=closed]:animate-out",
     "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]",
@@ -568,9 +727,14 @@ var toastVariants = cva(
         success: "border-success/40 bg-popover text-popover-foreground",
         warning: "border-warning/40 bg-popover text-popover-foreground",
         destructive: "border-destructive/50 bg-popover text-popover-foreground"
+      },
+      size: {
+        sm: "p-3 text-body-sm",
+        md: "p-4 text-body-md",
+        lg: "p-5 text-body-lg"
       }
     },
-    defaultVariants: { variant: "default" }
+    defaultVariants: { variant: "default", size: "md" }
   }
 );
 var iconForVariant = {
@@ -581,10 +745,18 @@ var iconForVariant = {
   destructive: /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 shrink-0 text-destructive", "aria-hidden": "true" })
 };
 var ToastRoot = forwardRef(
-  ({ className, variant = "default", children, ...props }, ref) => /* @__PURE__ */ jsxs(ToastPrimitive.Root, { ref, className: cn(toastVariants({ variant }), className), ...props, children: [
-    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: iconForVariant[variant] }),
-    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children })
-  ] })
+  ({ className, variant = "default", size, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    ToastPrimitive.Root,
+    {
+      ref,
+      className: cn(toastVariants({ variant, size }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: iconForVariant[variant] }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children })
+      ]
+    }
+  )
 );
 ToastRoot.displayName = "Toast";
 var ToastTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -747,9 +919,12 @@ var buttonVariants = cva(
       },
       size: {
         sm: "h-8 px-3 text-body-sm",
-        md: "h-10 px-4 text-body-md",
-        lg: "h-12 px-6 text-body-lg",
-        icon: "h-10 w-10 p-0"
+        // md: tier ajustável via density (CSS var on :root). See D3 ADR of
+        // faang-density-tightening plan. Default `comfortable` density makes
+        // this 36px (--theo-control-h: 2.25rem). sm and lg stay hardcoded.
+        md: "h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] text-body-sm",
+        lg: "h-11 px-4 text-body-md",
+        icon: "h-[var(--theo-control-h,2.25rem)] w-[var(--theo-control-h,2.25rem)] p-0"
       }
     },
     defaultVariants: {
@@ -775,8 +950,8 @@ var Button = forwardRef(
 Button.displayName = "Button";
 var badgeVariants = cva(
   [
-    "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5",
-    "font-sans text-label uppercase tracking-wider",
+    "inline-flex items-center gap-1.5 rounded-full border",
+    "font-sans uppercase tracking-wider",
     "transition-colors"
   ],
   {
@@ -789,12 +964,19 @@ var badgeVariants = cva(
         warning: "border-warning/40 bg-warning/15 text-warning",
         destructive: "border-destructive/40 bg-destructive/15 text-destructive",
         outline: "border-border bg-transparent text-foreground"
+      },
+      size: {
+        sm: "px-2 py-0.5 text-label-caps",
+        md: "px-2.5 py-0.5 text-label",
+        lg: "px-3 py-1 text-body-md"
       }
     },
-    defaultVariants: { variant: "default" }
+    defaultVariants: { variant: "default", size: "md" }
   }
 );
-var Badge = forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, className: cn(badgeVariants({ variant }), className), ...props }));
+var Badge = forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, className: cn(badgeVariants({ variant, size }), className), ...props })
+);
 Badge.displayName = "Badge";
 var toneClass = {
   primary: "bg-primary",
@@ -823,8 +1005,10 @@ var Dot = forwardRef(
 Dot.displayName = "Badge.Dot";
 var BadgeWithDot = Badge;
 BadgeWithDot.Dot = Dot;
+var CardContext = createContext({ size: "md" });
+var useCardSize = () => useContext(CardContext).size;
 var Root3 = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(CardContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -835,21 +1019,39 @@ var Root3 = forwardRef(
       ),
       ...props
     }
-  )
+  ) })
 );
 Root3.displayName = "Card";
+var headerPadBySize = {
+  sm: "gap-1 p-3 pb-1.5",
+  md: "gap-1.5 p-5 pb-2.5",
+  lg: "gap-2 p-6 pb-3"
+};
 var Header = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-3", className), ...props })
+  ({ className, ...props }, ref) => {
+    const size = useCardSize();
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col", headerPadBySize[size], className), ...props });
+  }
 );
 Header.displayName = "Card.Header";
+var titleFontBySize = {
+  sm: "text-title-md",
+  md: "text-title-lg",
+  lg: "text-headline"
+};
 var Title2 = forwardRef(
   ({ className, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "h3";
+    const size = useCardSize();
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: cn("font-display text-foreground text-title-lg tracking-tight", className),
+        className: cn(
+          "font-display text-foreground tracking-tight",
+          titleFontBySize[size],
+          className
+        ),
         ...props
       }
     );
@@ -860,19 +1062,39 @@ var Description2 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-body-sm text-muted-foreground", className), ...props })
 );
 Description2.displayName = "Card.Description";
+var bodyPadBySize = {
+  sm: "p-3 pt-1.5",
+  md: "p-5 pt-2.5",
+  lg: "p-6 pt-3"
+};
 var Body = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-3", className), ...props })
+  ({ className, ...props }, ref) => {
+    const size = useCardSize();
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(bodyPadBySize[size], className), ...props });
+  }
 );
 Body.displayName = "Card.Body";
+var footerPadBySize = {
+  sm: "gap-2 p-3 pt-2",
+  md: "gap-3 p-5 pt-3",
+  lg: "gap-4 p-6 pt-4"
+};
 var Footer = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("flex items-center gap-3 border-border/40 border-t p-6 pt-4", className),
-      ...props
-    }
-  )
+  ({ className, ...props }, ref) => {
+    const size = useCardSize();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center border-border/40 border-t",
+          footerPadBySize[size],
+          className
+        ),
+        ...props
+      }
+    );
+  }
 );
 Footer.displayName = "Card.Footer";
 var Card = /* @__PURE__ */ Object.assign(Root3, {
@@ -882,25 +1104,30 @@ var Card = /* @__PURE__ */ Object.assign(Root3, {
   Body,
   Footer
 });
+var inputVariants = cva(
+  [
+    "flex w-full rounded-md border border-input bg-card",
+    "text-foreground placeholder:text-muted-foreground",
+    "transition-[box-shadow,border-color] duration-base ease-out-soft",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "focus-visible:border-primary",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "file:border-0 file:bg-transparent file:font-medium file:text-body-sm"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 py-1 text-body-sm",
+        // md: density-tunable via CSS var. Comfortable (default) = 36px.
+        md: "h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] py-1.5 text-body-sm",
+        lg: "h-11 px-4 py-2.5 text-body-md"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
 var Input = forwardRef(
-  ({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsx(
-    "input",
-    {
-      ref,
-      type,
-      className: cn(
-        "flex h-10 w-full rounded-md border border-input bg-card px-3 py-2",
-        "text-body-md text-foreground placeholder:text-muted-foreground",
-        "transition-[box-shadow,border-color] duration-base ease-out-soft",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        "focus-visible:border-primary",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "file:border-0 file:bg-transparent file:font-medium file:text-body-sm",
-        className
-      ),
-      ...props
-    }
-  )
+  ({ className, type = "text", size, ...props }, ref) => /* @__PURE__ */ jsx("input", { ref, type, className: cn(inputVariants({ size }), className), ...props })
 );
 Input.displayName = "Input";
 var Overlay2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -1251,30 +1478,47 @@ function useFormField() {
   if (!ctx) throw new Error("FormField subcomponents must be inside <FormField>.");
   return ctx;
 }
+var rootGapBySize = {
+  sm: "gap-1",
+  md: "gap-1.5",
+  lg: "gap-2"
+};
 var FormFieldRoot = forwardRef(
-  ({ className, id: idProp, invalid, ...props }, ref) => {
+  ({ className, id: idProp, invalid, size = "md", ...props }, ref) => {
     const auto = useId();
     const fieldId = idProp ?? `field-${auto}`;
     const ctx = {
       fieldId,
       hintId: `${fieldId}-hint`,
       errorId: `${fieldId}-error`,
-      hasError: !!invalid
+      hasError: !!invalid,
+      size
     };
-    return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { ref, className: cn("grid gap-1.5", className), ...props }) });
+    return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { ref, className: cn("grid", rootGapBySize[size], className), ...props }) });
   }
 );
 FormFieldRoot.displayName = "FormField";
+var labelFontBySize = {
+  sm: "text-label-caps",
+  md: "text-body-sm",
+  lg: "text-body-md"
+};
+var hintFontBySize = {
+  sm: "text-label-caps",
+  md: "text-body-sm",
+  lg: "text-body-md"
+};
 var FormFieldLabel = forwardRef(
   ({ className, required, children, ...props }, ref) => {
-    const { fieldId } = useFormField();
+    const { fieldId, size } = useFormField();
     return /* @__PURE__ */ jsxs(
       LabelPrimitive.Root,
       {
         ref,
         htmlFor: fieldId,
         className: cn(
-          "inline-flex items-center gap-1 font-medium font-sans text-body-sm text-foreground",
+          "inline-flex items-center gap-1 font-medium font-sans text-foreground",
+          labelFontBySize[size],
           "peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
           className
         ),
@@ -1304,14 +1548,14 @@ var FormFieldControl = forwardRef(
 FormFieldControl.displayName = "FormField.Control";
 var FormFieldHint = forwardRef(
   ({ className, children, ...props }, ref) => {
-    const { hintId, hasError } = useFormField();
+    const { hintId, hasError, size } = useFormField();
     if (hasError) return null;
     return /* @__PURE__ */ jsx(
       "p",
       {
         ref,
         id: hintId,
-        className: cn("text-body-sm text-muted-foreground", className),
+        className: cn("text-muted-foreground", hintFontBySize[size], className),
         ...props,
         children
       }
@@ -1321,7 +1565,7 @@ var FormFieldHint = forwardRef(
 FormFieldHint.displayName = "FormField.Hint";
 var FormFieldError = forwardRef(
   ({ className, children, ...props }, ref) => {
-    const { errorId, hasError } = useFormField();
+    const { errorId, hasError, size } = useFormField();
     if (!hasError) return null;
     return /* @__PURE__ */ jsxs(
       "p",
@@ -1329,7 +1573,7 @@ var FormFieldError = forwardRef(
         ref,
         id: errorId,
         role: "alert",
-        className: cn("flex items-center gap-1 text-body-sm text-destructive", className),
+        className: cn("flex items-center gap-1 text-destructive", hintFontBySize[size], className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
@@ -1368,28 +1612,42 @@ var EmptyState = forwardRef(
   )
 );
 EmptyState.displayName = "EmptyState";
-var SelectTrigger = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
+var selectTriggerVariants = cva(
+  [
+    "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-card",
+    "text-foreground placeholder:text-muted-foreground",
+    "transition-[border-color,box-shadow] duration-base ease-out-soft",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "focus-visible:border-primary",
+    "data-[placeholder]:text-muted-foreground",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "[&>span]:line-clamp-1"
+  ],
   {
-    ref,
-    className: cn(
-      "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-card px-3 py-2",
-      "text-body-md text-foreground placeholder:text-muted-foreground",
-      "transition-[border-color,box-shadow] duration-base ease-out-soft",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-      "focus-visible:border-primary",
-      "data-[placeholder]:text-muted-foreground",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      "[&>span]:line-clamp-1",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }) })
-    ]
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 py-1 text-body-sm",
+        md: "h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] py-1.5 text-body-sm",
+        lg: "h-11 px-4 py-2.5 text-body-md"
+      }
+    },
+    defaultVariants: { size: "md" }
   }
-));
+);
+var SelectTrigger = forwardRef(
+  ({ className, children, size, ...props }, ref) => /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      className: cn(selectTriggerVariants({ size }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }) })
+      ]
+    }
+  )
+);
 SelectTrigger.displayName = "Select.Trigger";
 var SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
@@ -1489,23 +1747,45 @@ Select.Group = SelectPrimitive.Group;
 Select.Label = SelectLabel;
 Select.Item = SelectItem;
 Select.Separator = SelectSeparator;
-var Checkbox = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  CheckboxPrimitive.Root,
+var checkboxVariants = cva(
+  [
+    "peer relative shrink-0 rounded-sm border border-border bg-card",
+    "transition-[background-color,border-color,box-shadow] duration-base ease-out-soft",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+    "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
   {
-    ref,
-    className: cn(
-      "peer size-4 shrink-0 rounded-sm border border-border bg-card",
-      "transition-[background-color,border-color,box-shadow] duration-base ease-out-soft",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-      "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "size-3.5", "aria-hidden": "true", strokeWidth: 3 }) : /* @__PURE__ */ jsx(Check, { className: "size-3.5", "aria-hidden": "true", strokeWidth: 3 }) })
+    variants: {
+      size: {
+        sm: "size-3.5 before:absolute before:inset-[-5px] before:content-['']",
+        md: "size-4",
+        lg: "size-5"
+      }
+    },
+    defaultVariants: { size: "md" }
   }
-));
+);
+var iconClassBySize = {
+  sm: "size-2.5",
+  md: "size-3.5",
+  lg: "size-3.5"
+};
+var Checkbox = forwardRef(
+  ({ className, size, ...props }, ref) => {
+    const iconClass = iconClassBySize[size ?? "md"];
+    return /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Root,
+      {
+        ref,
+        className: cn(checkboxVariants({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: iconClass, "aria-hidden": "true", strokeWidth: 3 }) : /* @__PURE__ */ jsx(Check, { className: iconClass, "aria-hidden": "true", strokeWidth: 3 }) })
+      }
+    );
+  }
+);
 Checkbox.displayName = "Checkbox";
 var RadioGroupRoot = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { ref, className: cn("grid gap-3", className), ...props }));
 RadioGroupRoot.displayName = "RadioGroup";
@@ -1529,48 +1809,73 @@ RadioGroupItem.displayName = "RadioGroup.Item";
 var RadioGroup = /* @__PURE__ */ Object.assign(RadioGroupRoot, {
   Item: RadioGroupItem
 });
-var Switch = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SwitchPrimitive.Root,
+var switchVariants = cva(
+  [
+    "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent",
+    "transition-[background-color,box-shadow] duration-base ease-out-soft",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_0_8px_hsl(var(--primary)/0.35)]",
+    "data-[state=unchecked]:bg-muted",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
   {
-    ref,
-    className: cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent",
-      "transition-[background-color,box-shadow] duration-base ease-out-soft",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-      "data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_0_8px_hsl(var(--primary)/0.35)]",
-      "data-[state=unchecked]:bg-muted",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      SwitchPrimitive.Thumb,
-      {
-        className: cn(
-          "pointer-events-none block size-4 rounded-full bg-card shadow-sm",
-          "transition-transform duration-base ease-out-soft",
-          "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5"
-        )
+    variants: {
+      size: {
+        sm: "h-4 w-7",
+        md: "h-5 w-9",
+        lg: "h-6 w-11"
       }
-    )
+    },
+    defaultVariants: { size: "md" }
   }
-));
+);
+var thumbClassBySize = {
+  sm: "size-3 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0.5",
+  md: "size-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5",
+  lg: "size-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5"
+};
+var Switch = forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitive.Root, { ref, className: cn(switchVariants({ size }), className), ...props, children: /* @__PURE__ */ jsx(
+    SwitchPrimitive.Thumb,
+    {
+      className: cn(
+        "pointer-events-none block rounded-full bg-card shadow-sm",
+        "transition-transform duration-base ease-out-soft",
+        thumbClassBySize[size ?? "md"]
+      )
+    }
+  ) })
+);
 Switch.displayName = "Switch";
+var textareaVariants = cva(
+  [
+    "flex w-full resize-y rounded-md border border-input bg-card",
+    "text-foreground placeholder:text-muted-foreground",
+    "transition-[box-shadow,border-color] duration-base ease-out-soft",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "focus-visible:border-primary",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "min-h-[64px] px-2.5 py-1.5 text-body-sm",
+        // md: text scale + padding tighten to body-sm per FAANG density.
+        // min-h stays 96px because multiline has its own height rationale.
+        md: "min-h-[6rem] px-[var(--theo-control-px,0.875rem)] py-1.5 text-body-sm",
+        lg: "min-h-[128px] px-4 py-2.5 text-body-md"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
 var Textarea = forwardRef(
-  ({ className, rows = 3, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, rows = 3, size, ...props }, ref) => /* @__PURE__ */ jsx(
     "textarea",
     {
       ref,
       rows,
-      className: cn(
-        "flex min-h-[6rem] w-full resize-y rounded-md border border-input bg-card px-3 py-2",
-        "text-body-md text-foreground placeholder:text-muted-foreground",
-        "transition-[box-shadow,border-color] duration-base ease-out-soft",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        "focus-visible:border-primary",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
+      className: cn(textareaVariants({ size }), className),
       ...props
     }
   )
@@ -7741,6 +8046,6 @@ function CommandPalette({
   ] }) });
 }
 
-export { ALL_MODES, AgentComposer, AgentEditor, AgentErrorCard, AgentEvent, AgentHandoff, AgentProfile, AgentStartingState, AgentStream, AgentStreaming, AgentTimeline, ApprovalCard, ArtifactPreview, AttachmentChip, AuditLogEntry, AutoCompactNotice, Avatar, BadgeWithDot as Badge, BrowserControls, BuildLogStream, Button, CapabilityIndicator, Card, ChatComposer, ChatMessage, ChatThread, Checkbox, CommandPalette, ContextCard, ContextWindowBar, CostMeter, CreatedFilesCard, CronJobCard, CronJobsList, DeploymentRow, Dialog, DiffViewer, DomainConfig, EmptyState, EnvVarEditor, FolderContextCard, FolderSelector, FormField, HOOK_EVENTS, HookConfig, HookEventLog, Input, IntentSelector, Label, LaneBoard, LoginSplit, MCPServerCard, MCPServerList, MODE_LABEL, MemoryEditor, MentionMenu, MetricsPanel, ModelCard, ModelSelector, PermissionMatrix, PermissionModal, PreviewEnvCard, PreviewPanel, ProgressChecklist, ProjectCard, ProjectSwitcher, QuickActionChips, RadioGroup, RecentFoldersList, RollbackUI, RuleCard, RuleEditor, RunStats, RunningTasksPanel, ScrollArea, Select, SessionListItem, SessionTimeline, Sheet, Sidebar, Skeleton, SkillCard, SkillEditor, SkillsList, SocialAuthRow, StepsRail, SubAgentDispatch, Switch, SystemPromptEditor, Tabs, TaskHeader, TaskNode, TaskPlan, TerminalPanel, Textarea, ThemeProvider, ThemeScript, ThemeSwitcher, TheoUIProvider, Toast, Toaster, TokenUsageChart, ToolCall, ToolCallCard, ToolResult, ToolsList, TooltipWithStatics as Tooltip, TopNav, auroraTerminal, avatarVariants, badgeVariants, builtinThemes, buttonVariants, capabilityPresets, classicPaper, cn, modelCapabilityPresets, sheetVariants, useTheme, useToast, violetForge };
+export { ALL_MODES, AgentComposer, AgentEditor, AgentErrorCard, AgentEvent, AgentHandoff, AgentProfile, AgentStartingState, AgentStream, AgentStreaming, AgentTimeline, ApprovalCard, ArtifactPreview, AttachmentChip, AuditLogEntry, AutoCompactNotice, Avatar, BadgeWithDot as Badge, BrowserControls, BuildLogStream, Button, CapabilityIndicator, Card, ChatComposer, ChatMessage, ChatThread, Checkbox, CommandPalette, ContextCard, ContextWindowBar, CostMeter, CreatedFilesCard, CronJobCard, CronJobsList, DeploymentRow, Dialog, DiffViewer, DomainConfig, EmptyState, EnvVarEditor, FolderContextCard, FolderSelector, FormField, HOOK_EVENTS, HookConfig, HookEventLog, Input, IntentSelector, Label, LaneBoard, LoginSplit, MCPServerCard, MCPServerList, MODE_LABEL, MemoryEditor, MentionMenu, MetricsPanel, ModelCard, ModelSelector, PermissionMatrix, PermissionModal, PreviewEnvCard, PreviewPanel, ProgressChecklist, ProjectCard, ProjectSwitcher, QuickActionChips, RadioGroup, RecentFoldersList, RollbackUI, RuleCard, RuleEditor, RunStats, RunningTasksPanel, ScrollArea, Select, SessionListItem, SessionTimeline, Sheet, Sidebar, Skeleton, SkillCard, SkillEditor, SkillsList, SocialAuthRow, StepsRail, SubAgentDispatch, Switch, SystemPromptEditor, Tabs, TaskHeader, TaskNode, TaskPlan, TerminalPanel, Textarea, ThemeProvider, ThemeScript, ThemeSwitcher, TheoUIProvider, Toast, Toaster, TokenUsageChart, ToolCall, ToolCallCard, ToolResult, ToolsList, TooltipWithStatics as Tooltip, TopNav, auroraTerminal, avatarVariants, badgeVariants, builtinThemes, buttonVariants, capabilityPresets, classicPaper, cn, defineTheme, hex, modelCapabilityPresets, rgb, sheetVariants, useDensity, useTheme, useToast, violetForge };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map