feat: add Label component

.storybook/main.cjs

@@ -7,6 +7,7 @@ module.exports = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
     {
       name: "@storybook/addon-postcss",
       options: {

package.json

@@ -17,6 +17,7 @@
     "playground": "pnpm --filter @tails-ui/playground dev"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-interactions": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",

packages/components/Checkbox/package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@tails-ui/styles": "*",
-    "@tails-ui/typography": "*",
+    "@tails-ui/label": "*",
     "@radix-ui/react-slot": "^1.0.0",
     "@radix-ui/react-checkbox": "^1.0.0",
     "clsx": "^1.2.1",

packages/components/Checkbox/stories/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Checks } from 'phosphor-react';
-import { Typography } from "@tails-ui/typography";
+import { Label } from "@tails-ui/label";
 
 import { Checkbox, type CheckboxRootProps } from "../src/Checkbox";
 
@@ -11,6 +11,8 @@ export default {
     children: (
       <Checkbox.Icon />
     ),
+    id: 'terms',
+    name: 'terms'
   },
   argTypes: {
     children: {
@@ -23,9 +25,9 @@ export default {
     (Story) => (
       <div className="flex items-center gap-2">
         {Story()}
-        <Typography size="sm">
+        <Label htmlFor="terms" className="text-sm">
           Accept terms & conditions
-        </Typography>
+        </Label>
       </div>
     )
   ]

packages/components/Label/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@tails-ui/label",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "dependencies": {
+    "@tails-ui/styles": "*",
+    "@tails-ui/text-input": "*",
+    "phosphor-react": "^1.4.1",
+    "clsx": "^1.2.1"
+  },
+  "devDependencies": {
+    "@tails-ui/eslint-config": "*",
+    "@tails-ui/typings": "*",
+    "@tails-ui/tsconfig": "*",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "autoprefixer": "^10.4.12",
+    "eslint": "^7.32.0",
+    "postcss": "^8.4.18",
+    "react": "^18.2.0",
+    "tailwindcss": "^3.1.8"
+  }
+}

packages/components/Label/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/components/Label/src/Label.tsx

@@ -0,0 +1,16 @@
+import { LabelHTMLAttributes } from "react";
+import { clsx } from "clsx";
+import { CommonComponentProps } from "@tails-ui/typings";
+
+export type LabelProps = CommonComponentProps &
+  LabelHTMLAttributes<HTMLLabelElement>;
+
+export function Label({ children, className, ...rest }: LabelProps) {
+  return (
+    <label className={clsx(className, "text-gray-100 font-sans")} {...rest}>
+      {children}
+    </label>
+  );
+}
+
+Label.displayName = "Label"

packages/components/Label/src/index.ts

@@ -0,0 +1,3 @@
+import '@tails-ui/styles/common.css';
+
+export { Label, type LabelProps } from "./Label";

packages/components/Label/stories/Label.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { TextInput } from "@tails-ui/text-input";
+import { Envelope } from 'phosphor-react'
+
+import { Label, type LabelProps } from "../src/Label";
+
+export default {
+  title: "Components / Label",
+  component: Label,
+  args: {
+    children: "Lorem ipsum",
+  }
+} as Meta<LabelProps>;
+
+export const Default: StoryObj<LabelProps> = {};
+
+export const InputLabel: StoryObj<LabelProps> = {
+  args: {
+    children: "E-mail address",
+    htmlFor: "email",
+    className: "mb-3 text-4 text-gray-100"
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex flex-col">
+        {Story()}
+        <TextInput>
+          <TextInput.Icon>
+            <Envelope />
+          </TextInput.Icon>
+
+          <TextInput.Input
+            type="email"
+            placeholder="[email protected]"
+            name="email"
+            id="email"
+          />
+        </TextInput>
+      </div>
+    ),
+  ],
+};

packages/components/Label/tailwind.config.cjs

@@ -0,0 +1,7 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    '**/*.tsx'
+  ],
+  plugins: [require('@tails-ui/styles/plugin')]
+}

packages/components/Label/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@tails-ui/tsconfig/client.json",
+  "compilerOptions": {
+    "types": [
+      "react"
+    ]
+  },
+  "include": [
+    "."
+  ],
+  "exclude": [
+    "dist",
+    "build",
+    "node_modules"
+  ]
+}