refactor: move input and label to design system

correct variables according to design system spec

various cleanup

packages/design-system/lib/components/Label/Label.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Label } from './Label'
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/Label',
+  component: Label,
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof Label>
+
+export const Default: Story = {
+  args: {
+    children: 'Label',
+    required: false,
+  },
+}
+
+export const Discreet: Story = {
+  args: {
+    children: 'Label',
+    size: 'discreet',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    children: 'Label',
+    size: 'small',
+  },
+}

packages/design-system/lib/components/Label/Label.tsx

@@ -0,0 +1,13 @@
+import { labelVariants } from './variants'
+
+import type { LabelProps } from './types'
+
+export function Label({ children, className, required, size }: LabelProps) {
+  const classNames = labelVariants({
+    className,
+    size,
+    required,
+  })
+
+  return <span className={classNames}>{children}</span>
+}

packages/design-system/lib/components/Label/index.ts

@@ -0,0 +1 @@
+export { Label } from './Label'

packages/design-system/lib/components/Label/label.module.css

@@ -0,0 +1,51 @@
+.label {
+  composes: Body-Paragraph-mdRegular from '../Typography/typography.module.css';
+  transition: font-size 100ms ease;
+  text-align: left;
+  color: var(--Text-Interactive-Placeholder);
+  user-select: none;
+
+  &.small {
+    display: block;
+    font-size: 12px;
+  }
+  &.regular {
+    font-size: 16px;
+  }
+}
+
+.discreet {
+  composes: Body-Supporting-text-caption-smBold from '../Typography/typography.module.css';
+  color: var(--Text-Default);
+  order: unset;
+}
+
+.required:after {
+  content: ' *';
+}
+
+input:focus,
+input:placeholder-shown,
+input[value]:not([value='']),
+textarea:focus,
+textarea:placeholder-shown,
+textarea[value]:not([value='']) {
+  & ~ .label {
+    font-size: 12px;
+    margin-bottom: var(--Space-x05);
+  }
+}
+
+input:disabled,
+textarea:disabled {
+  & ~ .label {
+    color: var(--Text-Interactive-Disabled);
+  }
+}
+
+@media (hover: hover) {
+  input:active:not(:disabled) ~ .label {
+    font-size: 12px;
+    margin-bottom: var(--Space-x05);
+  }
+}

packages/design-system/lib/components/Label/types.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from 'class-variance-authority'
+
+import type { labelVariants } from './variants'
+
+export interface LabelProps
+  extends React.PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>,
+    VariantProps<typeof labelVariants> {
+  required?: boolean
+}

packages/design-system/lib/components/Label/variants.ts

@@ -0,0 +1,20 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './label.module.css'
+
+export const labelVariants = cva(styles.label, {
+  variants: {
+    size: {
+      small: styles.small,
+      regular: styles.regular,
+      discreet: styles.discreet,
+    },
+    required: {
+      true: styles.required,
+    },
+  },
+  defaultVariants: {
+    size: 'regular',
+    required: false,
+  },
+})