mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekayandHanzo Dev
3e6e277b08
Three of the seven stops were yellow, which over the dark ground is an olive, and the swatches sat in a Group, whose zeroed radii cut a straight edge through each selection ring. The ramp now sweeps one arc of the wheel and every stop is measured: the dimmest clears 3:1 against each of the seven grounds the page can paint, on both schemes. Picking one writes the accent through @hanzo/appearance, so the choice outlives the visit. Co-authored-by: Hanzo Dev <[email protected]>
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import type { CircleProps } from '@hanzo/gui'
|
|
import { Circle } from '@hanzo/gui'
|
|
|
|
const button = <button type="button" />
|
|
|
|
/**
|
|
* A round control that says whether it is the chosen one.
|
|
*
|
|
* Chosen is a two-pixel border in the theme's ink, on the edge. Focus is a ring
|
|
* in the theme's solid step, a clear gap further out — so the two are told apart
|
|
* by where they sit as well as by tone, and a focused circle still shows the
|
|
* hairline that says it is not the chosen one. The solid step is the lowest rung
|
|
* that clears 3:1 against every ground this row sits on, measured on both
|
|
* schemes over all seven tints the page can paint behind it.
|
|
*
|
|
* Hover stays off the chosen one: a pointer resting on it must not dim the ring
|
|
* that says it is chosen.
|
|
*
|
|
* It renders a real button, which is what puts it in the tab order and makes
|
|
* Enter and Space work.
|
|
*/
|
|
export const ActiveCircle = ({
|
|
isActive,
|
|
children,
|
|
...rest
|
|
}: CircleProps & { isActive?: boolean }) => {
|
|
return (
|
|
<Circle
|
|
render={button}
|
|
aria-pressed={isActive}
|
|
size={32}
|
|
cursor="pointer"
|
|
borderWidth={isActive ? 2 : 1}
|
|
borderColor={isActive ? '$color' : '$borderColor'}
|
|
focusVisibleStyle={{
|
|
outlineColor: '$color10',
|
|
outlineWidth: 2,
|
|
outlineStyle: 'solid',
|
|
outlineOffset: 3,
|
|
}}
|
|
{...(!isActive && { hoverStyle: { borderColor: '$color10' } })}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</Circle>
|
|
)
|
|
}
|