mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +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/
111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
|
|
import { RADII, type RadiusValue } from "@/registry/config"
|
|
import { LockButton } from "@/app/(create)/components/lock-button"
|
|
import {
|
|
Picker,
|
|
PickerContent,
|
|
PickerGroup,
|
|
PickerRadioGroup,
|
|
PickerRadioItem,
|
|
PickerSeparator,
|
|
PickerTrigger,
|
|
} from "@/app/(create)/components/picker"
|
|
import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
|
|
|
|
export function RadiusPicker({
|
|
isMobile,
|
|
anchorRef,
|
|
}: {
|
|
isMobile: boolean
|
|
anchorRef: React.RefObject<HTMLDivElement | null>
|
|
}) {
|
|
const [params, setParams] = useDesignSystemSearchParams()
|
|
const isRadiusLocked = params.style === "lyra"
|
|
const selectedRadiusName = isRadiusLocked ? "none" : params.radius
|
|
|
|
const currentRadius = RADII.find(
|
|
(radius) => radius.name === selectedRadiusName
|
|
)
|
|
const defaultRadius = RADII.find((radius) => radius.name === "default")
|
|
const otherRadii = RADII.filter((radius) => radius.name !== "default")
|
|
|
|
return (
|
|
<div className="group/picker relative">
|
|
<Picker>
|
|
<PickerTrigger disabled={isRadiusLocked}>
|
|
<div className="flex flex-col justify-start text-left">
|
|
<div className="text-xs text-muted-foreground">Radius</div>
|
|
<div className="text-sm font-medium text-foreground">
|
|
{currentRadius?.label}
|
|
</div>
|
|
</div>
|
|
<div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base text-foreground select-none md:right-2.5">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
className="text-foreground"
|
|
>
|
|
<path
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M4 20v-5C4 8.925 8.925 4 15 4h5"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</PickerTrigger>
|
|
<PickerContent
|
|
anchor={isMobile ? anchorRef : undefined}
|
|
side={isMobile ? "top" : "right"}
|
|
align={isMobile ? "center" : "start"}
|
|
>
|
|
<PickerRadioGroup
|
|
value={currentRadius?.name}
|
|
onValueChange={(value) => {
|
|
if (isRadiusLocked) {
|
|
return
|
|
}
|
|
setParams({ radius: value as RadiusValue })
|
|
}}
|
|
>
|
|
<PickerGroup>
|
|
{defaultRadius && (
|
|
<PickerRadioItem
|
|
key={defaultRadius.name}
|
|
value={defaultRadius.name}
|
|
closeOnClick={isMobile}
|
|
>
|
|
{defaultRadius.label}
|
|
</PickerRadioItem>
|
|
)}
|
|
</PickerGroup>
|
|
<PickerSeparator />
|
|
<PickerGroup>
|
|
{otherRadii.map((radius) => (
|
|
<PickerRadioItem
|
|
key={radius.name}
|
|
value={radius.name}
|
|
closeOnClick={isMobile}
|
|
>
|
|
{radius.label}
|
|
</PickerRadioItem>
|
|
))}
|
|
</PickerGroup>
|
|
</PickerRadioGroup>
|
|
</PickerContent>
|
|
</Picker>
|
|
<LockButton
|
|
param="radius"
|
|
className="absolute top-1/2 right-8 -translate-y-1/2"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|