@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
59 lines • 2.67 kB
JavaScript
import { Shade, createComponent } from '@furystack/shades';
import { cssVariableTheme } from '../../services/css-variable-theme.js';
export const RadioGroup = Shade({
customElementName: 'shade-radio-group',
css: {
display: 'block',
fontFamily: cssVariableTheme.typography.fontFamily,
'& .radio-group-label': {
display: 'block',
fontSize: cssVariableTheme.typography.fontSize.xs,
fontWeight: cssVariableTheme.typography.fontWeight.medium,
color: cssVariableTheme.text.secondary,
marginBottom: cssVariableTheme.spacing.sm,
},
'& .radio-group-items': {
display: 'flex',
gap: cssVariableTheme.spacing.sm,
},
'&[data-orientation="vertical"] .radio-group-items': {
flexDirection: 'column',
},
'&[data-orientation="horizontal"] .radio-group-items': {
flexDirection: 'row',
flexWrap: 'wrap',
},
},
render: ({ props, children, useDisposable, useHostProps, useRef }) => {
const wrapperRef = useRef('wrapper');
useDisposable('change-handler', () => {
const handleChange = (ev) => {
const target = ev.target;
if (target.type === 'radio' && target.checked) {
props.onValueChange?.(target.value);
}
};
let el = null;
queueMicrotask(() => {
el = wrapperRef.current;
el?.addEventListener('change', handleChange);
});
return { [Symbol.dispose]: () => el?.removeEventListener('change', handleChange) };
});
const orientation = props.orientation || 'vertical';
// Expose group-level props as data attributes so child Radio components
// can read them synchronously during their own render cycle.
useHostProps({
'data-orientation': orientation,
role: 'radiogroup',
'data-group-name': props.name,
'data-disabled': props.disabled ? '' : undefined,
'data-group-value': props.value !== undefined ? props.value : undefined,
'data-group-default-value': props.defaultValue !== undefined ? props.defaultValue : undefined,
});
return (createComponent("div", { ref: wrapperRef, style: { display: 'contents' } },
props.labelTitle ? createComponent("span", { className: "radio-group-label" }, props.labelTitle) : null,
createComponent("div", { className: "radio-group-items" }, children)));
},
});
//# sourceMappingURL=radio-group.js.map