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 {