2 checkboxes

package.json

@@ -7,7 +7,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com"
   },
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "system.css theme wrapped for React",
   "type": "module",
   "main": "dist/index.cjs.js",

src/button/Button.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "../styles";
 
-export type ButtonProps = React.ComponentProps<"button"> & {
+export type ButtonProps = Omit<React.ComponentProps<"button">, "className"> & {
   primary?: boolean;
 };
 

src/checkbox/CheckBox.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "@sakun/system.css";
+
+export type CheckBoxProps = Omit<React.ComponentProps<"input">, "type"> & {
+  label: string;
+};
+
+const CheckBox: React.FC<CheckBoxProps> = (props) => {
+  return (
+    <div>
+      <input {...props} type="checkbox" />
+      <label htmlFor={props.id}>{props.label}</label>
+    </div>
+  );
+};
+
+export default CheckBox;

src/checkbox/__docs__/CheckBox.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Example from "./Example";
+
+const meta: Meta<typeof Example> = {
+  title: "CheckBox",
+  component: Example,
+};
+
+export default meta;
+type Story = StoryObj<typeof Example>;
+
+export const Primary: Story = {
+  args: {},
+};

src/checkbox/__docs__/Example.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from "react";
+import CheckBox from "..";
+
+export type ExampleProps = {};
+
+const Example: FC<ExampleProps> = ({}) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        height: "100%",
+        width: "50rem",
+      }}
+    >
+      <form>
+        <CheckBox label="A defaulted textbox" id="id1" defaultChecked />
+        <CheckBox label="This has a placeholder" id="id2" />
+        <CheckBox label="This one is disabled" id="id3" disabled />
+      </form>
+    </div>
+  );
+};
+
+export default Example;

src/checkbox/index.ts

@@ -0,0 +1,4 @@
+import CheckBox from "./CheckBox";
+export type { CheckBoxProps } from "./CheckBox";
+
+export default CheckBox;

src/textbox/TextBox.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import "@sakun/system.css";
 
-export type TextBoxProps = React.ComponentProps<"input"> & {
+export type TextBoxProps = Omit<React.ComponentProps<"input">, "type"> & {
   label: string;
 };