diff --git a/package.json b/package.json index a11754e1..a8e9d1ed 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "build-storybook": "storybook build" }, "dependencies": { + "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@tanstack/react-query": "^5.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1e6f0b9f..b70a3576 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@radix-ui/react-label': + specifier: ^2.0.2 + version: 2.0.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.0.0)(react@18.0.0) @@ -2333,6 +2336,27 @@ packages: react: 18.0.0 dev: true + /@radix-ui/react-label@2.0.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): + resolution: {integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.2 + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + dev: false + /@radix-ui/react-popper@1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==} peerDependencies: diff --git a/src/components/ui/Input/Input.stories.tsx b/src/components/ui/Input/Input.stories.tsx index 9f5e7c24..b9151945 100644 --- a/src/components/ui/Input/Input.stories.tsx +++ b/src/components/ui/Input/Input.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react' +import Label from '../Label' import { Input } from './Input' const meta = { @@ -15,6 +16,12 @@ export const Normal: Story = { args: {}, } -export const Disabled: Story = { +export const InputWithLabel: Story = { args: {}, + render: (args) => ( +
+ + +
+ ), } diff --git a/src/components/ui/Label/Label.stories.tsx b/src/components/ui/Label/Label.stories.tsx new file mode 100644 index 00000000..a6496c4a --- /dev/null +++ b/src/components/ui/Label/Label.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { Label } from './Label' + +const meta = { + title: 'UI/Label', + component: Label, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Normal: Story = { + args: {}, + render: (args) => , +} diff --git a/src/components/ui/Label/Label.tsx b/src/components/ui/Label/Label.tsx new file mode 100644 index 00000000..4bf15c49 --- /dev/null +++ b/src/components/ui/Label/Label.tsx @@ -0,0 +1,25 @@ +'use client' + +import * as React from 'react' +import * as LabelPrimitive from '@radix-ui/react-label' +import { cva, type VariantProps } from 'class-variance-authority' +import { cn } from '@/utils' + +const labelVariants = cva( + 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', +) + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, ...props }, ref) => ( + +)) +Label.displayName = LabelPrimitive.Root.displayName + +export { Label } diff --git a/src/components/ui/Label/index.tsx b/src/components/ui/Label/index.tsx new file mode 100644 index 00000000..4c9a22c2 --- /dev/null +++ b/src/components/ui/Label/index.tsx @@ -0,0 +1,3 @@ +import { Label } from './Label' + +export default Label