Input

import * as stylex from '@stylexjs/stylex';

import { container } from '@/lib/constants.stylex';

import { Input } from '@/components/ui/input';

export default function InputDemo() {
  return (
    <div {...stylex.props(styles.wrap)}>
      <Input placeholder="Email" type="email" />
    </div>
  );
}

const styles = stylex.create({
  wrap: {
    width: container.md,
  },
});

import * as stylex from '@stylexjs/stylex';

import { Input } from '@/components/ui/input';
import { space, fontSize, fontWeight, container } from '@/lib/constants.stylex';
import { colors } from '@/lib/tokens.stylex';

export default function InputWithLabel() {
  return (
    <div {...stylex.props(styles.field)}>
      <label htmlFor="email" {...stylex.props(styles.label)}>
        Email
      </label>
      <Input id="email" placeholder="you@example.com" type="email" />
    </div>
  );
}

const styles = stylex.create({
  field: {
    display: 'flex',
    flexDirection: 'column',
    gap: space.s15,
    width: container.md,
  },
  label: {
    color: colors.foreground,
    fontSize: fontSize.sm,
    fontWeight: fontWeight.medium,
  },
});

import * as stylex from '@stylexjs/stylex';

import { container } from '@/lib/constants.stylex';

import { Input } from '@/components/ui/input';

export default function InputDisabled() {
  return (
    <div {...stylex.props(styles.wrap)}>
      <Input placeholder="Disabled" disabled />
    </div>
  );
}

const styles = stylex.create({
  wrap: {
    width: container.md,
  },
});

import * as stylex from '@stylexjs/stylex';

import { Field, FieldError, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { container } from '@/lib/constants.stylex';

export default function InputInvalid() {
  return (
    <Field invalid style={styles.root}>
      <FieldLabel htmlFor="input-invalid-email">Email</FieldLabel>
      <Input
        id="input-invalid-email"
        type="email"
        defaultValue="not-an-email"
      />
      <FieldError>Please enter a valid email address.</FieldError>
    </Field>
  );
}

const styles = stylex.create({
  root: {
    width: container.sm,
  },
});

import * as stylex from '@stylexjs/stylex';

import { Field, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { container } from '@/lib/constants.stylex';

export default function InputFile() {
  return (
    <Field style={styles.root}>
      <FieldLabel htmlFor="input-file-picture">Picture</FieldLabel>
      <Input id="input-file-picture" type="file" />
    </Field>
  );
}

const styles = stylex.create({
  root: {
    width: container.sm,
  },
});

import * as stylex from '@stylexjs/stylex';

import { Button } from '@/components/ui/button';
import { Field, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { container, space } from '@/lib/constants.stylex';

export default function InputWithButton() {
  return (
    <Field style={styles.root}>
      <FieldLabel htmlFor="input-with-button-search">Search</FieldLabel>
      <div {...stylex.props(styles.row)}>
        <Input id="input-with-button-search" placeholder="Search…" />
        <Button type="submit">Search</Button>
      </div>
    </Field>
  );
}

const styles = stylex.create({
  root: {
    width: container.md,
  },
  row: {
    display: 'flex',
    gap: space.s2,
  },
});