5 text box

package.json

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

src/index.ts

@@ -19,6 +19,9 @@ export type * from "./modeless";
 export * from "./select";
 export type * from "./select";
 
+export * from "./textbox";
+export type * from "./textbox";
+
 export * from "./window";
 export type * from "./window";
 

src/textbox/TextBox.tsx

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

src/textbox/__docs__/Example.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from "react";
+import TextBox from "..";
+
+export type ExampleProps = {};
+
+const Example: FC<ExampleProps> = ({}) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        height: "100%",
+        width: "50rem",
+      }}
+    >
+      <form>
+        <TextBox
+          label="A defaulted textbox"
+          id="id1"
+          defaultValue="a default value"
+        />
+        <br />
+        <TextBox
+          label="This has a placeholder"
+          id="id2"
+          placeholder="some placeholder!"
+        />
+        <br />
+        <TextBox
+          label="This one is disabled"
+          id="id3"
+          disabled
+          placeholder="you can't change me"
+        />
+      </form>
+    </div>
+  );
+};
+
+export default Example;

src/textbox/__docs__/TextBox.stories.tsx

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

src/textbox/index.ts

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