feat(radioButton): initial styling for radio buttons

src/primevue/index.ts

@@ -8,6 +8,7 @@ import inputGroupAddon from "./inputGroup/inputGroupAddon";
 import inputText from "./inputText/inputText";
 import password from "./password/password";
 import progressSpinner from "./progressSpinner/progressSpinner";
+import radioButton from "./radioButton/radioButton";
 import textarea from "./textarea/textarea";
 
 export const RisUiTheme = {
@@ -20,4 +21,5 @@ export const RisUiTheme = {
   fileUpload,
   progressSpinner,
   textarea,
+  radioButton,
 };

src/primevue/radioButton/radioButton.stories.ts

@@ -0,0 +1,133 @@
+import { html } from "@/lib/tags.ts";
+import { Meta, StoryObj } from "@storybook/vue3";
+import RadioButton from "primevue/radiobutton";
+import { ref } from "vue";
+
+const meta: Meta<typeof RadioButton> = {
+  component: RadioButton,
+
+  tags: ["autodocs"],
+
+  args: {
+    disabled: false,
+    invalid: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { RadioButton },
+    setup() {
+      const checked = ref("");
+      return { args, checked };
+    },
+    template: html`<RadioButton
+      v-bind="args"
+      v-model="checked"
+      name="radio"
+      value="radio"
+    />`,
+  }),
+};
+
+export const WithLabel: Story = {
+  render: (args) => ({
+    components: { RadioButton },
+    setup() {
+      const checked = ref("radio");
+      return { args, checked };
+    },
+    template: html`
+      <div class="flex items-center">
+        <RadioButton
+          input-id="radio-with-label"
+          v-bind="args"
+          v-model="checked"
+          name="radio"
+          value="radio"
+        />
+        <label for="radio-with-label">Radio with label</label>
+      </div>
+    `,
+  }),
+};
+
+export const Group: Story = {
+  render: (args) => ({
+    components: { RadioButton },
+    setup() {
+      const checked = ref("radio-1");
+      return { args, checked };
+    },
+    template: html`
+      <div class="flex gap-32">
+        <div class="flex items-center">
+          <RadioButton
+            input-id="radio-1"
+            v-model="checked"
+            name="radios"
+            value="radio-1"
+          />
+          <label for="radio-1">One</label>
+        </div>
+        <div class="flex items-center">
+          <RadioButton
+            input-id="radio-2"
+            v-model="checked"
+            name="radios"
+            value="radio-2"
+          />
+          <label for="radio-2">Two</label>
+        </div>
+        <div class="flex items-center">
+          <RadioButton
+            input-id="radio-3"
+            v-model="checked"
+            name="radios"
+            value="radio-3"
+          />
+          <label for="radio-3">Three</label>
+        </div>
+        <div class="flex items-center">
+          <RadioButton
+            input-id="radio-4"
+            v-model="checked"
+            name="radios"
+            value="radio-4"
+          />
+          <label for="radio-4">Four</label>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithErrorMessage: Story = {
+  args: {
+    invalid: true,
+  },
+
+  render: (args) => ({
+    components: { RadioButton },
+    setup() {
+      const checked = ref("");
+      return { args, checked };
+    },
+    template: html`
+      <div class="mb-4 flex items-center">
+        <RadioButton
+          input-id="radio-with-error"
+          v-bind="args"
+          v-model="checked"
+          name="radio"
+          value="radio"
+        />
+        <label for="radio-with-error">Radio with label</label>
+      </div>
+      <span class="ris-body2-regular text-red-800">Error description</span>
+    `,
+  }),
+};

src/primevue/radioButton/radioButton.ts

@@ -0,0 +1,22 @@
+import { tw } from "@/lib/tags";
+import { RadioButtonPassThroughOptions } from "primevue/radiobutton";
+
+const radioButton: RadioButtonPassThroughOptions = {
+  root: {
+    class: tw`relative inline-block h-32 w-32 [&+label]:ris-label2-regular [&+label]:ml-8`,
+  },
+
+  input: {
+    class: tw`peer h-full w-full cursor-pointer appearance-none rounded-full border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 hover:outline focus:outline active:outline-none disabled:cursor-not-allowed disabled:border-gray-600 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:outline-red-800 aria-[invalid]:active:outline-none aria-[invalid]:disabled:outline-none`,
+  },
+
+  box: {
+    class: tw`pointer-events-none absolute inset-0 flex items-center justify-center text-transparent peer-checked:text-blue-800 peer-disabled:text-gray-600 peer-aria-[invalid]:text-red-800`,
+  },
+
+  icon: {
+    class: tw`h-16 w-16 rounded-full bg-current`,
+  },
+};
+
+export default radioButton;