@thesage/ui 0.0.9 → 0.0.11

package/dist/index.js

@@ -56,6 +56,7 @@ __export(index_exports, {
   Avatar: () => Avatar,
   AvatarFallback: () => AvatarFallback,
   AvatarImage: () => AvatarImage,
+  BRAND: () => BRAND,
   Backgrounds: () => backgrounds_exports,
   Badge: () => Badge,
   Brand: () => Brand,
@@ -68,6 +69,8 @@ __export(index_exports, {
   BreadcrumbSeparator: () => BreadcrumbSeparator,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
+  COMPONENT_COUNTS: () => COMPONENT_COUNTS,
+  COMPONENT_REGISTRY: () => COMPONENT_REGISTRY,
   Calendar: () => Calendar,
   Card: () => Card,
   CardContent: () => CardContent,
@@ -114,6 +117,7 @@ __export(index_exports, {
   ContextMenuSubTrigger: () => ContextMenuSubTrigger,
   ContextMenuTrigger: () => ContextMenuTrigger,
   CustomizerPanel: () => CustomizerPanel,
+  DOC_EXAMPLES: () => DOC_EXAMPLES,
   DataDisplay: () => data_display_exports,
   DataTable: () => DataTable,
   DatePicker: () => DatePicker,
@@ -187,6 +191,7 @@ __export(index_exports, {
   Label: () => Label,
   Layout: () => layout_exports,
   Link: () => Link,
+  MARKETING_COPY: () => MARKETING_COPY,
   Magnetic: () => Magnetic,
   Menubar: () => Menubar,
   MenubarContent: () => MenubarContent,
@@ -458,7 +463,7 @@ var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"));
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority2.cva)(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
   {
     variants: {
       variant: {
@@ -935,8 +940,8 @@ var studioTokens = {
   }
 };
 
-// ../tokens/src/sage.ts
-var sageTokens = {
+// ../tokens/src/terra.ts
+var terraTokens = {
   light: {
     colors: {
       // Warm, earthy backgrounds
@@ -1088,19 +1093,19 @@ var sageTokens = {
   },
   typography: {
     heading: {
-      fontFamily: "var(--font-sage-serif)",
+      fontFamily: "var(--font-terra-serif)",
       // Lora serif
       fontWeight: "600",
       letterSpacing: "-0.01em"
     },
     body: {
-      fontFamily: "var(--font-sage-sans)",
+      fontFamily: "var(--font-terra-sans)",
       // Instrument Sans
       fontWeight: "400",
       letterSpacing: "0"
     },
     mono: {
-      fontFamily: "var(--font-sage-mono)",
+      fontFamily: "var(--font-terra-mono)",
       fontWeight: "400",
       letterSpacing: "0"
     }
@@ -1277,7 +1282,7 @@ var fontFamilies = {
       mono: "Code blocks, technical content"
     }
   },
-  sage: {
+  terra: {
     heading: "Lora",
     // Serif for elegance
     body: "Instrument Sans",
@@ -2823,7 +2828,7 @@ var CommandItem = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[disabled=true]:opacity-50",
       className
     ),
     ...props
@@ -2897,7 +2902,7 @@ function Combobox({
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverContent, { className: "w-full p-0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Command, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Command, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CommandInput, { placeholder: searchPlaceholder }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CommandList, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CommandEmpty, { children: emptyMessage }),
@@ -5411,7 +5416,7 @@ var DropdownMenuSubTrigger = React36.forwardRef(({ className, inset, children, .
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-primary focus:text-primary-foreground data-[state=open]:bg-primary data-[state=open]:text-primary-foreground",
       inset && "pl-8",
       className
     ),
@@ -5453,7 +5458,7 @@ var DropdownMenuItem = React36.forwardRef(({ className, inset, ...props }, ref)
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-primary focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     ),
@@ -5466,7 +5471,7 @@ var DropdownMenuCheckboxItem = React36.forwardRef(({ className, children, checke
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-primary focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     checked,
@@ -5483,7 +5488,7 @@ var DropdownMenuRadioItem = React36.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-primary focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -7889,8 +7894,15 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false }) => {
     resetCustomColors
   } = useCustomizer();
   const { theme, mode: colorMode, setTheme, setMode } = useThemeStore();
+  const getDefaultPrimary = import_react28.default.useCallback((t, m) => {
+    if (t === "volt") return m === "dark" ? voltTokens.dark.colors.primary : voltTokens.light.colors.primary;
+    if (t === "terra") return m === "dark" ? terraTokens.dark.colors.primary : terraTokens.light.colors.primary;
+    return m === "dark" ? studioTokens.dark.colors.primary : studioTokens.light.colors.primary;
+  }, []);
   const currentPalette = getActiveColorPalette(theme, colorMode);
-  const [tempPrimaryColor, setTempPrimaryColor] = import_react28.default.useState(currentPalette?.primary || "#0a0a0a");
+  const [tempPrimaryColor, setTempPrimaryColor] = import_react28.default.useState(
+    currentPalette?.primary || getDefaultPrimary(theme, colorMode)
+  );
   const [tempSecondaryColor, setTempSecondaryColor] = import_react28.default.useState(currentPalette?.secondary || "#5a67d8");
   const [tempAccentColor, setTempAccentColor] = import_react28.default.useState(currentPalette?.accent || "#ff6b35");
   import_react28.default.useEffect(() => {
@@ -7898,8 +7910,10 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false }) => {
       setTempPrimaryColor(currentPalette.primary);
       setTempSecondaryColor(currentPalette.secondary || currentPalette.primary);
       setTempAccentColor(currentPalette.accent || "#ff6b35");
+    } else {
+      setTempPrimaryColor(getDefaultPrimary(theme, colorMode));
     }
-  }, [currentPalette]);
+  }, [currentPalette, theme, colorMode, getDefaultPrimary]);
   const handleApplyColor = () => {
     applyColorPalette(theme, colorMode, {
       primary: tempPrimaryColor,
@@ -7909,7 +7923,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false }) => {
   };
   const handleResetColors = () => {
     resetCustomColors(theme, colorMode);
-    setTempPrimaryColor("#0a0a0a");
+    setTempPrimaryColor(getDefaultPrimary(theme, colorMode));
     setTempSecondaryColor("#5a67d8");
     setTempAccentColor("#ff6b35");
   };
@@ -7998,7 +8012,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false }) => {
             /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("label", { className: "block text-sm font-medium opacity-80 mb-3", children: "Theme" }),
             /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "grid grid-cols-3 gap-2 mb-3", children: [
               { id: "studio", label: "Studio", icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react18.Building2, { className: "w-4 h-4" }) },
-              { id: "sage", label: "Sage", icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react18.Leaf, { className: "w-4 h-4" }) },
+              { id: "terra", label: "Terra", icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react18.Leaf, { className: "w-4 h-4" }) },
               { id: "volt", label: "Volt", icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react18.Zap, { className: "w-4 h-4" }) }
             ].map((t) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
               "button",
@@ -8024,12 +8038,12 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false }) => {
               /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "font-heading", children: "Heading:" }),
                 " ",
-                theme === "studio" ? "Outfit" : theme === "sage" ? "Lora" : "Space Grotesk"
+                theme === "studio" ? "Outfit" : theme === "terra" ? "Lora" : "Space Grotesk"
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "font-body", children: "Body:" }),
                 " ",
-                theme === "studio" ? "Manrope" : theme === "sage" ? "Instrument Sans" : "Space Grotesk"
+                theme === "studio" ? "Manrope" : theme === "terra" ? "Instrument Sans" : "Space Grotesk"
               ] })
             ] })
           ] }),
@@ -11528,7 +11542,7 @@ var import_react39 = require("react");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var themeTokens = {
   studio: studioTokens,
-  sage: sageTokens,
+  terra: terraTokens,
   volt: voltTokens
 };
 var fontFamilies2 = {
@@ -11537,9 +11551,9 @@ var fontFamilies2 = {
     body: "var(--font-studio-body)",
     mono: "var(--font-mono)"
   },
-  sage: {
-    sans: "var(--font-sage-body)",
-    serif: "var(--font-sage-heading)",
+  terra: {
+    sans: "var(--font-terra-body)",
+    serif: "var(--font-terra-heading)",
     mono: "var(--font-mono)"
   },
   volt: {
@@ -11599,7 +11613,7 @@ function getThemeVars(theme, mode) {
     "--effect-shadow-md": effects?.shadow?.md || effects?.shadow?.sm || "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
     "--effect-shadow-lg": effects?.shadow?.lg || effects?.shadow?.md || effects?.shadow?.sm || "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
     // Typography - Font Families
-    "--font-heading": fonts?.heading || (theme === "sage" && fonts?.serif ? fonts.serif : fonts?.sans) || "var(--font-studio-heading)",
+    "--font-heading": fonts?.heading || (theme === "terra" && fonts?.serif ? fonts.serif : fonts?.sans) || "var(--font-studio-heading)",
     "--font-body": fonts?.body || fonts?.sans || "var(--font-studio-body)",
     "--font-mono": fonts?.mono || "var(--font-studio-mono)",
     // Motion - These are accessed programmatically via tokens
@@ -11989,6 +12003,128 @@ function generateBreadcrumbs(hash, routeConfig, baseUrl = "#") {
   return breadcrumbs;
 }
 
+// src/component-registry.ts
+var BRAND = {
+  productName: "Sage Design Engine",
+  productNameShort: "Sage",
+  themeNames: {
+    organic: "Terra",
+    technical: "Volt",
+    neutral: "Studio"
+  },
+  tagline: "The Solopreneur's Development Stack",
+  mission: "AI-Native components for velocity"
+};
+var COMPONENT_REGISTRY = {
+  /**
+   * Total count of all exported UI components from @thesage/ui
+   */
+  totalCount: 89,
+  /**
+   * Core categories following functional organization pattern
+   * (what components DO, not abstract hierarchy)
+   */
+  coreCategories: {
+    actions: {
+      count: 5,
+      description: "Components that trigger behavior",
+      examples: ["Button", "Link", "Toggle", "ToggleGroup", "Magnetic"]
+    },
+    forms: {
+      count: 18,
+      description: "Components that collect user input",
+      examples: ["Input", "Select", "Checkbox", "Switch", "Textarea", "ColorPicker", "SearchBar"]
+    },
+    navigation: {
+      count: 10,
+      description: "Components that help users move through content",
+      examples: ["Tabs", "Breadcrumb", "Pagination", "NavigationMenu", "Command"]
+    },
+    overlays: {
+      count: 11,
+      description: "Components that display contextual content",
+      examples: ["Dialog", "Tooltip", "Popover", "Drawer", "Modal", "Sheet"]
+    },
+    feedback: {
+      count: 7,
+      description: "Components that communicate system state",
+      examples: ["Alert", "Toast", "Progress", "Spinner", "Skeleton"]
+    },
+    "data-display": {
+      count: 16,
+      description: "Components that present information",
+      examples: ["Card", "Table", "Badge", "Avatar", "Heading", "Text", "Code", "Calendar"]
+    },
+    layout: {
+      count: 17,
+      description: "Components for spatial organization",
+      examples: ["Accordion", "Separator", "Stack", "Grid", "Container", "ScrollArea"]
+    }
+  },
+  /**
+   * Specialty categories for advanced interactions and effects
+   */
+  specialtyCategories: {
+    backgrounds: {
+      count: 2,
+      description: "Animated background effects",
+      examples: ["WarpBackground", "FaultyTerminal"]
+    },
+    cursor: {
+      count: 2,
+      description: "Interactive cursor effects",
+      examples: ["SplashCursor", "TargetCursor"]
+    },
+    blocks: {
+      count: 1,
+      description: "Composed page blocks",
+      examples: ["Hero", "OpenGraphCard"]
+    }
+  },
+  /**
+   * Supporting APIs (not counted as components)
+   */
+  supportingAPIs: {
+    providers: ["ThemeProvider"],
+    hooks: ["useTheme", "useMotionPreference", "useForm"],
+    utilities: ["animations", "breadcrumbs", "colors", "utils", "validation", "syntax-parser"],
+    stores: ["themeStore", "customizerStore"]
+  }
+};
+var COMPONENT_COUNTS = {
+  core: Object.values(COMPONENT_REGISTRY.coreCategories).reduce(
+    (sum, cat) => sum + cat.count,
+    0
+  ),
+  // 84
+  specialty: Object.values(COMPONENT_REGISTRY.specialtyCategories).reduce(
+    (sum, cat) => sum + cat.count,
+    0
+  ),
+  // 5
+  total: COMPONENT_REGISTRY.totalCount
+  // 89
+};
+var MARKETING_COPY = {
+  short: "89 production-ready components",
+  medium: "89 components across 7 core categories, plus specialty backgrounds and motion effects",
+  long: "89 thoughtfully designed components organized by function: actions, forms, navigation, overlays, feedback, data display, and layout\u2014plus specialty components for backgrounds, cursor interactions, and animated effects."
+};
+var DOC_EXAMPLES = {
+  // For overview sections
+  overview: `${COMPONENT_COUNTS.total} components across ${Object.keys(COMPONENT_REGISTRY.coreCategories).length} core categories`,
+  // For detailed breakdowns
+  breakdown: `
+- **Actions** (${COMPONENT_REGISTRY.coreCategories.actions.count}): ${COMPONENT_REGISTRY.coreCategories.actions.description}
+- **Forms** (${COMPONENT_REGISTRY.coreCategories.forms.count}): ${COMPONENT_REGISTRY.coreCategories.forms.description}
+- **Navigation** (${COMPONENT_REGISTRY.coreCategories.navigation.count}): ${COMPONENT_REGISTRY.coreCategories.navigation.description}
+- **Overlays** (${COMPONENT_REGISTRY.coreCategories.overlays.count}): ${COMPONENT_REGISTRY.coreCategories.overlays.description}
+- **Feedback** (${COMPONENT_REGISTRY.coreCategories.feedback.count}): ${COMPONENT_REGISTRY.coreCategories.feedback.description}
+- **Data Display** (${COMPONENT_REGISTRY.coreCategories["data-display"].count}): ${COMPONENT_REGISTRY.coreCategories["data-display"].description}
+- **Layout** (${COMPONENT_REGISTRY.coreCategories.layout.count}): ${COMPONENT_REGISTRY.coreCategories.layout.description}
+  `.trim()
+};
+
 // src/components/actions/index.ts
 var actions_exports = {};
 __export(actions_exports, {
@@ -12330,6 +12466,7 @@ __export(providers_exports, {
   Avatar,
   AvatarFallback,
   AvatarImage,
+  BRAND,
   Backgrounds,
   Badge,
   Brand,
@@ -12342,6 +12479,8 @@ __export(providers_exports, {
   BreadcrumbSeparator,
   Breadcrumbs,
   Button,
+  COMPONENT_COUNTS,
+  COMPONENT_REGISTRY,
   Calendar,
   Card,
   CardContent,
@@ -12388,6 +12527,7 @@ __export(providers_exports, {
   ContextMenuSubTrigger,
   ContextMenuTrigger,
   CustomizerPanel,
+  DOC_EXAMPLES,
   DataDisplay,
   DataTable,
   DatePicker,
@@ -12461,6 +12601,7 @@ __export(providers_exports, {
   Label,
   Layout,
   Link,
+  MARKETING_COPY,
   Magnetic,
   Menubar,
   MenubarContent,