feat: add Label component (#36)

packages/ui-label/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@halvaradop/ui-label",
+  "version": "0.1.0",
+  "private": false,
+  "description": "A label package for @halvaradop/ui library",
+  "type": "module",
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/halvaradop/ui.git"
+  },
+  "keywords": [
+    "button",
+    "react",
+    "component",
+    "tailwindcss",
+    "react",
+    "ui",
+    "library"
+  ],
+  "author": "Hernan Alvarado <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/halvaradop/ui/issues"
+  },
+  "homepage": "https://github.com/halvaradop/ui#readme",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "devDependencies": {
+    "@halvaradop/ui-core": "workspace:*"
+  }
+}

packages/ui-label/src/index.tsx

@@ -0,0 +1,33 @@
+import type { ArgsFunction } from "@halvaradop/ts-utility-types"
+import { cva, type VariantProps } from "class-variance-authority"
+import { merge, Slot, SlotProps, SlotWithAsChild } from "@halvaradop/ui-core"
+
+export type LabelProps<T extends ArgsFunction> = SlotProps<"label"> & VariantProps<T>
+
+export const labelVariants = cva("font-medium relative leading-none", {
+	variants: {
+		variant: {
+			base: "text-slate-700",
+			error: "hidden text-rose-400 absolute top-0 peer-usvalid:block peer-usvalid-empty:hidden",
+			flex: "flex flex-col items-start",
+		},
+		size: {
+			sm: "text-sm",
+			base: "text-base",
+			md: "text-lg",
+		},
+	},
+	defaultVariants: {
+		variant: "base",
+		size: "base",
+	},
+})
+
+export const Label = ({ className, variant, size, children, asChild, ...props }: LabelProps<typeof labelVariants>) => {
+	const SlotComponent = asChild ? Slot : "label"
+	return (
+		<SlotComponent className={merge(labelVariants({ className, variant, size }))} {...props}>
+			{children}
+		</SlotComponent>
+	)
+}

packages/ui-label/src/label.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Label } from "./index.js"
+import { Input } from "../../ui-input/src/index.js"
+
+const meta: Meta = {
+	title: "ui-label",
+	tags: ["autodocs"],
+	component: Label,
+	parameters: {
+		layout: "centered",
+	},
+} satisfies Meta<typeof Label>
+
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {
+	args: {
+		children: "Name",
+	},
+}
+
+export const Flex: Story = {
+	render: () => (
+		<Label className="gap-y-5" variant="flex">
+			<Label>Name</Label>
+			<Label>Lastname</Label>
+		</Label>
+	),
+}
+
+export const Error: Story = {
+	render: () => (
+		<Label>
+			<Label htmlFor="error-story">Name</Label>
+			<Input className="peer" variant="required" placeholder="[email protected]" type="email" id="error-story" required />
+			<Label className="right-0" variant="error" size="sm" asChild>
+				<span>Invalid email address</span>
+			</Label>
+		</Label>
+	),
+}
+
+export const WithAsChild: Story = {
+	render: () => (
+		<Label asChild>
+			<span>Name</span>
+		</Label>
+	),
+}
+
+export const Small: Story = {
+	args: {
+		size: "sm",
+		children: "Name",
+	},
+}
+
+export const Medium: Story = {
+	args: {
+		size: "md",
+		children: "Name",
+	},
+}
+
+export default meta

packages/ui-label/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@halvaradop/ui-core/tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

packages/ui-label/tsup.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from "tsup"
+import { tsupConfig } from "@halvaradop/ui-core/tsup.config.base"
+
+export default defineConfig(tsupConfig)

tailwind.config.ts

@@ -21,7 +21,9 @@ const config: Config = {
 			addVariant(
 				"input-empty",
 				"&:is(:usvalid:placeholder-shown, :usinvalid:placeholder-shown, :placeholder-shown)"
-			)
+			),
+				addVariant("peer-usvalid", ".peer:user-invalid ~ &")
+			addVariant("peer-usvalid-empty", ".peer:user-invalid:placeholder-shown ~ &")
 		}),
 	],
 }