Variable: Radio

import { html, svg } from '@gluonjs/core';
import {
  AspectRatio,
  Avatar,
  Button,
  Checkbox,
  Icon,
  Input,
  Label,
  Progress,
  Radio,
  ScrollArea,
  Select,
  Slider,
  Separator,
  StatusBadge,
  Switch,
  Textarea,
  ToggleButton,
  atomManifest,
  atomStyles,
  aspectRatioStyles,
  avatarStyles,
  darkThemeStyles,
  defineButtonPreset,
  defineToggleButtonPreset,
  defineIcon,
  getThemeStyles,
  installUi,
  installUiTheme,
  normalizeSliderRange,
  normalizeSliderValue,
  renderSlider,
  lightThemeStyles,
  scrollAreaStyles,
  separatorStyles,
  uiTokenStyles,
  type AspectRatioAttributes,
  type AspectRatioProps,
  type AvatarAttributes,
  type AvatarProps,
  type AvatarStatus,
  type ButtonProps,
  type ButtonAttributes,
  type ButtonPresetOptions,
  type ButtonSize,
  type ButtonVariant,
  type CheckboxAttributes,
  type CheckboxProps,
  type IconName,
  type IconAttributes,
  type IconDefinition,
  type IconProps,
  type InputProps,
  type LabelProps,
  type NormalizedSliderRange,
  type ProgressAttributes,
  type ProgressProps,
  type RadioAttributes,
  type RadioProps,
  type ScrollAreaAttributes,
  type ScrollAreaOrientation,
  type ScrollAreaProps,
  type SelectAttributes,
  type SelectProps,
  type SelectSize,
  type SliderAttributes,
  type SliderOrientation,
  type SliderProps,
  type SeparatorAttributes,
  type SeparatorOrientation,
  type SeparatorProps,
  type StatusBadgeAttributes,
  type StatusBadgeProps,
  type StatusBadgeTone,
  type SwitchAttributes,
  type SwitchProps,
  type TextareaAttributes,
  type TextareaProps,
  type ToggleButtonAttributes,
  type ToggleButtonPresetOptions,
  type ToggleButtonProps,
  type UiOwner,
  type UiThemeName,
} from '@gluonjs/atoms';

const theme: UiThemeName = 'light';
const ui: UiOwner = installUi(document, { theme });
const removeLegacyTheme = installUiTheme(document, theme);
const variant: ButtonVariant = 'primary';
const size: ButtonSize = 'large';
const aspectRatioAttributes = { class: 'goods-media' } satisfies AspectRatioAttributes;
const aspectRatio = { ratio: 4 / 3, attributes: aspectRatioAttributes, children: html`<img src="/product.webp" alt="Orbit lamp">` } satisfies AspectRatioProps;
const avatarStatus: AvatarStatus = 'loaded';
const avatarAttributes = { loading: 'lazy', decoding: 'async' } satisfies AvatarAttributes;
const avatar = { src: '/ada.webp', alt: 'Ada Lovelace', fallback: 'AL', status: avatarStatus, attributes: avatarAttributes } satisfies AvatarProps;
const scrollOrientation: ScrollAreaOrientation = 'both';
const scrollAttributes = { tabIndex: 0, style: { '--gluon-scroll-area-max-block-size': '10rem' } } satisfies ScrollAreaAttributes;
const scrollArea = { label: 'Order history', orientation: scrollOrientation, attributes: scrollAttributes, children: 'Order rows' } satisfies ScrollAreaProps;
const separatorOrientation: SeparatorOrientation = 'vertical';
const separatorAttributes = { title: 'Sections' } satisfies SeparatorAttributes;
const separator = { orientation: separatorOrientation, attributes: separatorAttributes } satisfies SeparatorProps;
const buttonAttributes = { class: 'goods-purchase', data: { analyticsAction: 'purchase' } } satisfies ButtonAttributes;
const presetOptions = { displayName: 'PurchaseButton', class: 'goods-purchase', attributes: buttonAttributes } satisfies ButtonPresetOptions;
const PurchaseButton = defineButtonPreset(presetOptions);
const button = {
  label: 'Add to bag',
  variant,
  size,
  disabled: false,
  onClick: (event: MouseEvent) => console.log('added', event.currentTarget),
} satisfies ButtonProps;
const iconName: IconName = 'spark';
const iconDefinition = defineIcon({ name: 'goods-bag', viewBox: '0 0 24 24', body: svg`<path d="M6 8h12l1 13H5z"></path>` }) satisfies IconDefinition<'goods-bag'>;
const iconAttributes = { data: { iconOwner: 'app' } } satisfies IconAttributes;
const icon = { name: iconName, label: 'New arrival' } satisfies IconProps;
const input = { name: 'email', type: 'email', placeholder: 'you@example.com' } satisfies InputProps;
const label = { children: 'Email address' } satisfies LabelProps;
const selectSize: SelectSize = 'medium';
const selectAttributes = { id: 'delivery-window' } satisfies SelectAttributes;
const select = { value: 'morning', name: 'window', size: selectSize, required: true, attributes: selectAttributes, children: html`<option value="morning">Morning</option><option value="afternoon">Afternoon</option>` } satisfies SelectProps;
const textareaAttributes = { id: 'delivery-notes' } satisfies TextareaAttributes;
const textarea = { value: 'Leave with reception', name: 'notes', rows: 3, fullWidth: true, attributes: textareaAttributes } satisfies TextareaProps;
const checkboxAttributes = { id: 'terms' } satisfies CheckboxAttributes;
const checkbox = { name: 'terms', value: 'accepted', required: true, attributes: checkboxAttributes } satisfies CheckboxProps;
const radioAttributes = { id: 'finish-cobalt' } satisfies RadioAttributes;
const radio = { checked: true, name: 'finish', value: 'cobalt', attributes: radioAttributes } satisfies RadioProps;
const progressAttributes = { 'aria-label': 'Order progress' } satisfies ProgressAttributes;
const progress = { value: 2, max: 4, fullWidth: true, attributes: progressAttributes } satisfies ProgressProps;
const sliderOrientation: SliderOrientation = 'horizontal';
const sliderRange: NormalizedSliderRange = normalizeSliderRange(1.5, 2.5, 1);
const sliderAttributes = { id: 'cable-length', name: 'cable', 'aria-label': 'Cable length' } satisfies SliderAttributes;
const slider = { defaultValue: normalizeSliderValue(1.5, sliderRange), ...sliderRange, orientation: sliderOrientation, valueText: '1.5 metres', attributes: sliderAttributes } satisfies SliderProps;
const sliderTemplate = renderSlider(slider);
const statusTone: StatusBadgeTone = 'success';
const statusAttributes = { title: 'Current order state' } satisfies StatusBadgeAttributes;
const status = { tone: statusTone, children: 'Ready', attributes: statusAttributes } satisfies StatusBadgeProps;
const switchAttributes = { id: 'network' } satisfies SwitchAttributes;
const switchControl = { checked: true, name: 'network', value: 'enabled', attributes: switchAttributes } satisfies SwitchProps;
const toggleAttributes = { id: 'grid-view' } satisfies ToggleButtonAttributes;
const togglePreset = { displayName: 'ViewToggle', variant: 'ghost' } satisfies ToggleButtonPresetOptions;
const toggle = { pressed: true, label: 'Grid view', attributes: toggleAttributes } satisfies ToggleButtonProps;
const ViewToggle = defineToggleButtonPreset(togglePreset);
const checkout = html`${AspectRatio(aspectRatio)}${Avatar(avatar)}${Label(label)}${Input(input)}${ScrollArea(scrollArea)}${Separator(separator)}${Select(select)}${Textarea(textarea)}${Checkbox(checkbox)}${Progress(progress)}${Radio(radio)}${Slider(slider)}${sliderTemplate}${StatusBadge(status)}${Switch(switchControl)}${ToggleButton(toggle)}${ViewToggle(toggle)}${Button(button)}${PurchaseButton({ label: 'Purchase' })}${Icon(icon)}${Icon({ icon: iconDefinition, attributes: iconAttributes })}`;
console.log(checkout, sliderRange, getThemeStyles(theme), atomStyles, aspectRatioStyles, avatarStyles, scrollAreaStyles, separatorStyles, uiTokenStyles, lightThemeStyles, darkThemeStyles, atomManifest.entries);
ui.setTheme('dark');
ui.dispose();
removeLegacyTheme();