feat(checkbox): initial styling for checkboxes

src/primevue/checkbox/checkbox.stories.ts

@@ -0,0 +1,77 @@
+import { html } from "@/lib/tags.ts";
+import { Meta, StoryObj } from "@storybook/vue3";
+import Checkbox from "primevue/checkbox";
+import { ref } from "vue";
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+
+  tags: ["autodocs"],
+
+  args: {
+    disabled: false,
+    invalid: false,
+    indeterminate: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { Checkbox },
+    setup() {
+      const checked = ref(true);
+      return { args, checked };
+    },
+    template: html`<Checkbox binary v-bind="args" v-model="checked" />`,
+  }),
+};
+
+export const WithLabel: Story = {
+  render: (args) => ({
+    components: { Checkbox },
+    setup() {
+      const checked = ref(true);
+      return { args, checked };
+    },
+    template: html`
+      <div class="flex items-center">
+        <Checkbox
+          input-id="checkbox-with-label"
+          binary
+          v-bind="args"
+          v-model="checked"
+        />
+        <label for="checkbox-with-label">Checkbox with label</label>
+      </div>
+    `,
+  }),
+};
+
+export const WithErrorMessage: Story = {
+  args: {
+    invalid: true,
+  },
+
+  render: (args) => ({
+    components: { Checkbox },
+    setup() {
+      const checked = ref(false);
+      return { args, checked };
+    },
+    template: html`
+      <div class="mb-4 flex items-center">
+        <Checkbox
+          input-id="checkbox-with-error"
+          binary
+          v-bind="args"
+          v-model="checked"
+        />
+        <label for="checkbox-with-error">Checkbox with label</label>
+      </div>
+      <span class="ris-body2-regular text-red-800">Error description</span>
+    `,
+  }),
+};

src/primevue/checkbox/checkbox.ts

@@ -0,0 +1,18 @@
+import { tw } from "@/lib/tags";
+import { CheckboxPassThroughOptions } from "primevue/checkbox";
+
+const checkbox: CheckboxPassThroughOptions = {
+  root: {
+    class: tw`relative inline-block h-24 w-24 [&+label]:ris-label2-regular [&+label]:ml-8`,
+  },
+
+  input: {
+    class: tw`peer h-full w-full cursor-pointer appearance-none 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-blue-800 peer-disabled:text-gray-600 peer-aria-[invalid]:text-red-800`,
+  },
+};
+
+export default checkbox;

src/primevue/index.ts

@@ -1,13 +1,15 @@
 import "./global.css";
 
 import button from "./button/button";
+import checkbox from "./checkbox/checkbox";
 import inputGroup from "./inputGroup/inputGroup";
 import inputGroupAddon from "./inputGroup/inputGroupAddon";
 import inputText from "./inputText/inputText";
 import password from "./password/password";
 
 export const RisUiTheme = {
   button,
+  checkbox,
   inputText,
   inputGroup,
   inputGroupAddon,