diff --git a/apps/v4/app/(create)/components/menu-picker.tsx b/apps/v4/app/(create)/components/menu-picker.tsx
index 87312286d1..6119e3ec97 100644
--- a/apps/v4/app/(create)/components/menu-picker.tsx
+++ b/apps/v4/app/(create)/components/menu-picker.tsx
@@ -21,7 +21,7 @@ import {
import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
type ColorChoice = "default" | "inverted"
-type TranslucentChoice = "yes" | "no"
+type SurfaceChoice = "solid" | "translucent"
type MenuItemConfig = {
value: MenuColorValue
@@ -35,14 +35,15 @@ function getMenuColorValue(
if (color === "default") {
return translucent ? "translucent" : "default"
}
+
return translucent ? "translucent-inverted" : "inverted"
}
const MENU_ITEMS: MenuItemConfig[] = [
- { value: "default", label: "Default" },
- { value: "translucent", label: "Translucent" },
- { value: "inverted", label: "Inverted" },
- { value: "translucent-inverted", label: "Inverted (translucent)" },
+ { value: "default", label: "Default / Solid" },
+ { value: "translucent", label: "Default / Translucent" },
+ { value: "inverted", label: "Inverted / Solid" },
+ { value: "translucent-inverted", label: "Inverted / Translucent" },
]
const ALL_OPTIONS = MENU_ITEMS
@@ -65,22 +66,25 @@ export function MenuColorPicker({
params.menuColor === "translucent-inverted"
? "inverted"
: "default"
- const translucentChoice: TranslucentChoice =
+ const surfaceChoice: SurfaceChoice =
params.menuColor === "translucent" ||
params.menuColor === "translucent-inverted"
- ? "yes"
- : "no"
+ ? "translucent"
+ : "solid"
const setColor = (color: ColorChoice) => {
- const nextMenuColor = getMenuColorValue(color, translucentChoice === "yes")
+ const nextMenuColor = getMenuColorValue(
+ color,
+ surfaceChoice === "translucent"
+ )
setParams({
menuColor: nextMenuColor,
- ...(translucentChoice === "yes" && { menuAccent: "subtle" }),
+ ...(surfaceChoice === "translucent" && { menuAccent: "subtle" }),
})
}
- const setTranslucent = (choice: TranslucentChoice) => {
- const isTranslucent = choice === "yes"
+ const setSurface = (choice: SurfaceChoice) => {
+ const isTranslucent = choice === "translucent"
const nextMenuColor = getMenuColorValue(colorChoice, isTranslucent)
setParams({
menuColor: nextMenuColor,
@@ -133,18 +137,18 @@ export function MenuColorPicker({
- Translucent
+ Appearance
{
- setTranslucent(value as TranslucentChoice)
+ setSurface(value as SurfaceChoice)
}}
>
-
- Yes
+
+ Solid
-
- No
+
+ Translucent
diff --git a/apps/v4/components/github-link.tsx b/apps/v4/components/github-link.tsx
index 7ba7c56778..542e00f8b7 100644
--- a/apps/v4/components/github-link.tsx
+++ b/apps/v4/components/github-link.tsx
@@ -28,7 +28,7 @@ export async function StarsCount() {
const formattedCount =
json.stargazers_count >= 1000
? `${Math.round(json.stargazers_count / 1000)}k`
- : json.stargazers_count.toLocaleString()
+ : json.stargazers_count?.toLocaleString()
return (
diff --git a/apps/v4/public/r/styles/radix-maia/context-menu.json b/apps/v4/public/r/styles/radix-maia/context-menu.json
index cbf11e6403..cc0ce16a74 100644
--- a/apps/v4/public/r/styles/radix-maia/context-menu.json
+++ b/apps/v4/public/r/styles/radix-maia/context-menu.json
@@ -4,7 +4,7 @@
"files": [
{
"path": "registry/radix-maia/ui/context-menu.tsx",
- "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction ContextMenuTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuPortal({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuSub({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction ContextMenuRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuContent({\n className,\n ...props\n}: React.ComponentProps & {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n return (\n \n \n \n )\n}\n\nfunction ContextMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction ContextMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction ContextMenuSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction ContextMenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction ContextMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction ContextMenuSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuCheckboxItem,\n ContextMenuRadioItem,\n ContextMenuLabel,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuGroup,\n ContextMenuPortal,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuRadioGroup,\n}\n",
+ "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction ContextMenuTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuPortal({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuSub({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction ContextMenuRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuContent({\n className,\n ...props\n}: React.ComponentProps & {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n return (\n \n \n \n )\n}\n\nfunction ContextMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction ContextMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction ContextMenuSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction ContextMenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction ContextMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction ContextMenuSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuCheckboxItem,\n ContextMenuRadioItem,\n ContextMenuLabel,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuGroup,\n ContextMenuPortal,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuRadioGroup,\n}\n",
"type": "registry:ui"
}
],
diff --git a/apps/v4/registry/styles/style-maia.css b/apps/v4/registry/styles/style-maia.css
index f95a3f0152..626579aab3 100644
--- a/apps/v4/registry/styles/style-maia.css
+++ b/apps/v4/registry/styles/style-maia.css
@@ -436,7 +436,7 @@
}
.cn-context-menu-sub-content {
- @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-xl border p-1 shadow-lg duration-100;
+ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-2xl border p-1 shadow-lg duration-100;
}
.cn-context-menu-subcontent {