Add radio widget for plone 7

packages/components/src/tailwind/Radio/Radio.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Radio, RadioGroup, type RadioGroupProps } from './Radio';
+
+export default {
+  title: 'Tailwind/Radio',
+  component: Radio,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export const Default = (args: RadioGroupProps) => {
+  return (
+    <div className="w-full max-w-[400px]">
+      <RadioGroup {...args}>
+        <Radio value="ap">Apple: Red, Green, Golden</Radio>
+        <Radio value="bn">Banana: Ripe, Unripe, Overripe</Radio>
+        <Radio value="gr">Grapes: Seedless, With seeds, Dried (Raisin)</Radio>
+        <Radio value="or">Orange: Navel, Blood, Mandarin</Radio>
+        <Radio value="mg">Mango: Alphonso, Kesar, Dasheri</Radio>
+      </RadioGroup>
+    </div>
+  );
+};
+
+Default.args = { label: 'Fruits' } as RadioGroupProps;
+
+// Disabled story
+export const Disabled = Default.bind({});
+Disabled.args = {
+  isDisabled: true,
+};
+
+// Invalid story
+export const Invalid = Default.bind({});
+Invalid.args = {
+  isInvalid: true,
+  errorMessage: 'Please select a fruits.',
+};

packages/components/src/tailwind/Radio/Radio.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+
+import type {
+  RadioGroupProps as AriaRadioGroupProps,
+  RadioProps as AriaRadioProps,
+  ValidationResult,
+} from 'react-aria-components';
+import {
+  RadioGroup as AriaRadioGroup,
+  Radio as AriaRadio,
+  composeRenderProps,
+} from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+
+import { composeTailwindRenderProps } from '../utils';
+import { Description, FieldError, Label } from '../Field/Field';
+
+interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children'> {
+  label?: string;
+  children?: React.ReactNode;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  ref?: React.Ref<HTMLDivElement>;
+}
+
+const RadioGroup = (props: RadioGroupProps) => {
+  return (
+    <AriaRadioGroup
+      {...props}
+      className={composeTailwindRenderProps(
+        props.className,
+        'flex flex-col gap-2',
+      )}
+    >
+      <Label>{props.label}</Label>
+      {props.children}
+      {props.description && <Description>{props.description}</Description>}
+      <FieldError>{props.errorMessage}</FieldError>
+    </AriaRadioGroup>
+  );
+};
+
+const radioStyles = tv({
+  base: 'bg-muted size-4 shrink-0 rounded-full border transition',
+  variants: {
+    isSelected: {
+      false: 'border-input',
+      true: 'border-primary border-[4.5px]',
+    },
+    isFocused: {
+      true: [
+        'border-ring bg-primary/20 ring-primary/20 ring-4',
+        'group-invalid:border-danger/70 group-invalid:bg-danger/20 group-invalid:ring-danger/20',
+      ],
+    },
+    isInvalid: {
+      true: 'border-danger/70 bg-danger/20 text-red-700',
+    },
+    isDisabled: {
+      true: 'opacity-50',
+    },
+  },
+});
+
+const radioBaseStyles = tv({
+  base: 'group flex items-center gap-2 text-sm transition [&[data-disabled]]:opacity-50',
+});
+
+interface RadioProps extends AriaRadioProps {
+  description?: string;
+  label?: string;
+  ref?: React.Ref<HTMLLabelElement>;
+}
+
+const Radio = (props: RadioProps) => {
+  return (
+    <AriaRadio
+      {...props}
+      className={composeRenderProps(props.className, (className, renderProps) =>
+        radioBaseStyles({ ...renderProps, className }),
+      )}
+    >
+      {(renderProps) => (
+        <div className="flex gap-2">
+          <div
+            className={radioStyles({
+              ...renderProps,
+              className: 'description' in props ? 'mt-1' : 'mt-0.5',
+            })}
+          />
+          <div className="flex flex-col gap-1">
+            {props.label || props.description ? (
+              <>
+                {<Label>{props.label}</Label>}
+                {props.description && (
+                  <Description>{props.description}</Description>
+                )}
+              </>
+            ) : (
+              (props.children as React.ReactNode)
+            )}
+          </div>
+        </div>
+      )}
+    </AriaRadio>
+  );
+};
+
+export type { RadioGroupProps, RadioProps };
+export { Radio, RadioGroup };