mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
105 lines
3.8 KiB
TypeScript
105 lines
3.8 KiB
TypeScript
"use client"
|
|
|
|
import { MENU_ACCENTS, type MenuAccentValue } from "@/registry/config"
|
|
import { LockButton } from "@/app/(create)/components/lock-button"
|
|
import {
|
|
Picker,
|
|
PickerContent,
|
|
PickerGroup,
|
|
PickerRadioGroup,
|
|
PickerRadioItem,
|
|
PickerTrigger,
|
|
} from "@/app/(create)/components/picker"
|
|
import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
|
|
|
|
export function MenuAccentPicker({
|
|
isMobile,
|
|
anchorRef,
|
|
}: {
|
|
isMobile: boolean
|
|
anchorRef: React.RefObject<HTMLDivElement | null>
|
|
}) {
|
|
const [params, setParams] = useDesignSystemSearchParams()
|
|
|
|
const currentAccent = MENU_ACCENTS.find(
|
|
(accent) => accent.value === params.menuAccent
|
|
)
|
|
|
|
return (
|
|
<div className="group/picker relative pr-3 md:pr-0">
|
|
<Picker>
|
|
<PickerTrigger>
|
|
<div className="flex flex-col justify-start text-left">
|
|
<div className="text-xs text-muted-foreground">Menu Accent</div>
|
|
<div className="text-sm font-medium text-foreground">
|
|
{currentAccent?.label}
|
|
</div>
|
|
</div>
|
|
<div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="128"
|
|
height="128"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
className="size-4 text-foreground"
|
|
>
|
|
<path
|
|
d="M19 12.1294L12.9388 18.207C11.1557 19.9949 10.2641 20.8889 9.16993 20.9877C8.98904 21.0041 8.80705 21.0041 8.62616 20.9877C7.53195 20.8889 6.64039 19.9949 4.85726 18.207L2.83687 16.1811C1.72104 15.0622 1.72104 13.2482 2.83687 12.1294M19 12.1294L10.9184 4.02587M19 12.1294H2.83687M10.9184 4.02587L2.83687 12.1294M10.9184 4.02587L8.89805 2"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
data-accent={currentAccent?.value}
|
|
className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
|
|
></path>
|
|
<path
|
|
d="M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 20 17 20 17C20 17 22 18.8954 22 20Z"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
data-accent={currentAccent?.value}
|
|
className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</PickerTrigger>
|
|
<PickerContent
|
|
anchor={isMobile ? anchorRef : undefined}
|
|
side={isMobile ? "top" : "right"}
|
|
align={isMobile ? "center" : "start"}
|
|
>
|
|
<PickerRadioGroup
|
|
value={currentAccent?.value}
|
|
onValueChange={(value) => {
|
|
setParams({ menuAccent: value as MenuAccentValue })
|
|
}}
|
|
>
|
|
<PickerGroup>
|
|
{MENU_ACCENTS.map((accent) => (
|
|
<PickerRadioItem
|
|
key={accent.value}
|
|
value={accent.value}
|
|
closeOnClick={isMobile}
|
|
disabled={
|
|
accent.value === "bold" &&
|
|
(params.menuColor === "default-translucent" ||
|
|
params.menuColor === "inverted-translucent")
|
|
}
|
|
>
|
|
{accent.label}
|
|
</PickerRadioItem>
|
|
))}
|
|
</PickerGroup>
|
|
</PickerRadioGroup>
|
|
</PickerContent>
|
|
</Picker>
|
|
<LockButton
|
|
param="menuAccent"
|
|
className="absolute top-1/2 right-8 -translate-y-1/2"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|