Prism Docs

import { Input } from '@mylighthouse/prism-react';

export default function InputDefault(): React.JSX.Element {
  return (
    <label
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 'var(--prism-spacing-100)',
      }}
    >
      <span
        style={{
          fontSize: 'var(--prism-font-size-text-300-regular)',
          fontWeight: 'var(--prism-font-weight-text-300-regular)',
          lineHeight: 'var(--prism-font-line-height-text-300-regular)',
        }}
      >
        Name
      </span>
      <Input placeholder="e.g. John Smith" />
    </label>
  );
}

import { Input } from '@mylighthouse/prism-react';

export default function InputValidation(): React.JSX.Element {
  return (
    <div style={{ display: 'flex', gap: 'var(--prism-spacing-300)' }}>
      <label
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 'var(--prism-spacing-100)',
        }}
      >
        <span
          style={{
            fontSize: 'var(--prism-font-size-text-300-regular)',
            fontWeight: 'var(--prism-font-weight-text-300-regular)',
            lineHeight: 'var(--prism-font-line-height-text-300-regular)',
          }}
        >
          Error
        </span>
        <Input defaultValue="Wrong" hasError />
      </label>
      <label
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 'var(--prism-spacing-100)',
        }}
      >
        <span
          style={{
            fontSize: 'var(--prism-font-size-text-300-regular)',
            fontWeight: 'var(--prism-font-weight-text-300-regular)',
            lineHeight: 'var(--prism-font-line-height-text-300-regular)',
          }}
        >
          Warning
        </span>
        <Input defaultValue="Check me" hasWarning />
      </label>
    </div>
  );
}

import { Input } from '@mylighthouse/prism-react';

export default function InputSize(): React.JSX.Element {
  return (
    <label
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 'var(--prism-spacing-100)',
      }}
    >
      <span
        style={{
          fontSize: 'var(--prism-font-size-text-300-regular)',
          fontWeight: 'var(--prism-font-weight-text-300-regular)',
          lineHeight: 'var(--prism-font-line-height-text-300-regular)',
        }}
      >
        Name
      </span>
      <Input isSmall placeholder="e.g. John Smith" />
    </label>
  );
}

import { Input } from '@mylighthouse/prism-react';

export default function InputDisabled(): React.JSX.Element {
  return (
    <label
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 'var(--prism-spacing-100)',
      }}
    >
      <span
        style={{
          fontSize: 'var(--prism-font-size-text-300-regular)',
          fontWeight: 'var(--prism-font-weight-text-300-regular)',
          lineHeight: 'var(--prism-font-line-height-text-300-regular)',
        }}
      >
        Name
      </span>
      <Input disabled placeholder="e.g. John Smith" />
    </label>
  );
}

import { Input } from '@mylighthouse/prism-react';

export default function InputReadOnly(): React.JSX.Element {
  return (
    <label
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 'var(--prism-spacing-100)',
      }}
    >
      <span
        style={{
          fontSize: 'var(--prism-font-size-text-300-regular)',
          fontWeight: 'var(--prism-font-weight-text-300-regular)',
          lineHeight: 'var(--prism-font-line-height-text-300-regular)',
        }}
      >
        Name
      </span>
      <Input placeholder="e.g. John Smith" readOnly />
    </label>
  );
}