refactor: move input and label to design system

correct variables according to design system spec

various cleanup

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Input } from './Input'
+import { TextField } from 'react-aria-components'
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: ({ isInvalid, ...props }) => (
+    <TextField isInvalid={isInvalid}>
+      <Input {...props} />
+    </TextField>
+  ),
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof Input>
+
+export const Default: Story = {
+  args: {
+    label: 'Label',
+    name: 'foo',
+    required: false,
+  },
+}
+
+export const Filled: Story = {
+  args: {
+    label: 'Label',
+    name: 'foo',
+    value: 'Value',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    label: 'Label',
+    name: 'foo',
+    // @ts-expect-error Input does not support this, but wrapping <TextField> does
+    isInvalid: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Label',
+    name: 'foo',
+    disabled: true,
+  },
+}
+
+export const DisabledFilled: Story = {
+  args: {
+    label: 'Label',
+    name: 'foo',
+    disabled: true,
+    value: 'Value',
+  },
+}

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

@@ -0,0 +1,46 @@
+import { cx } from 'class-variance-authority'
+import {
+  type ForwardedRef,
+  forwardRef,
+  useId,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+import { Input as AriaInput, Label as AriaLabel } from 'react-aria-components'
+
+import { Label } from '../Label'
+
+import styles from './input.module.css'
+
+import type { InputProps } from './types'
+import { Typography } from '../Typography'
+
+export const Input = forwardRef(function AriaInputWithLabelComponent(
+  { label, ...props }: InputProps,
+  forwardedRef: ForwardedRef<HTMLInputElement>
+) {
+  const ref = useRef<HTMLInputElement>(null)
+
+  // Unique id is required for multiple inputs of same name appearing multiple times
+  // on same page. This will inherited by parent label element.
+  // Shouldn't really be needed if we don't set id though.
+  const uniqueId = useId()
+  const inputId = `${uniqueId}-${props.name}`
+
+  useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement)
+
+  return (
+    <AriaLabel className={styles.container}>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <AriaInput
+          {...props}
+          placeholder={props.placeholder}
+          className={cx(styles.input, props.className)}
+          ref={ref}
+          id={inputId}
+        />
+      </Typography>
+      <Label required={props.required}>{label}</Label>
+    </AriaLabel>
+  )
+})

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

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

packages/design-system/lib/components/Input/input.module.css

@@ -0,0 +1,60 @@
+.container {
+  align-content: center;
+  background-color: var(--Surface-Primary-Default);
+  border: 1px solid var(--Border-Interactive-Default);
+  border-radius: var(--Corner-radius-md);
+  display: grid;
+  min-width: 0; /* allow shrinkage */
+  height: 60px;
+  padding: var(--Space-x1) var(--Space-x2);
+  box-sizing: border-box;
+  cursor: text;
+
+  &:has(.input:focus) {
+    outline-offset: -2px;
+    outline: 2px solid var(--Border-Interactive-Focus);
+  }
+
+  &:has(.input:disabled) {
+    background-color: var(--Surface-Primary-Disabled);
+    border: transparent;
+    cursor: unset;
+  }
+
+  &:has(.input[data-invalid='true'], .input[aria-invalid='true']) {
+    border-color: var(--Border-Interactive-Error);
+
+    &:focus-within {
+      outline-offset: -2px;
+      outline: 2px solid var(--Border-Interactive-Error);
+    }
+  }
+}
+
+.input {
+  background: none;
+  border: none;
+  color: var(--Text-Default);
+  height: 1px;
+  order: 2;
+  padding: 0;
+  transition: height 150ms ease;
+
+  &:focus,
+  &:placeholder-shown,
+  &[value]:not([value='']) {
+    height: 18px;
+    outline: none;
+  }
+
+  &:disabled {
+    color: var(--Text-Interactive-Disabled);
+  }
+}
+
+@media (hover: hover) {
+  .input:active:not(:disabled) {
+    height: 18px;
+    outline: none;
+  }
+}

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

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react'
+import { Input } from 'react-aria-components'
+
+export interface InputProps extends ComponentProps<typeof Input> {
+  label: string
+}

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,
+  },
+})

packages/design-system/package.json

@@ -10,6 +10,8 @@
     "./ChipLink": "./dist/components/ChipLink/index.js",
     "./Chips": "./dist/components/Chips/index.js",
     "./Divider": "./dist/components/Divider/index.js",
+    "./Input": "./dist/components/Input/index.js",
+    "./Label": "./dist/components/Label/index.js",
     "./Select": "./dist/components/Select/index.js",
     "./Typography": "./dist/components/Typography/index.js",
     "./RegularRateCard": "./dist/components/RateCard/Regular/index.js",