@infonomic/uikit 2.0.0 → 2.1.1

package/src/components/input/input.module.css

@@ -0,0 +1,310 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .inputWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-1);
+  }
+
+  .inputContainer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--gap-2);
+  }
+
+  .input {
+    border: none;
+    outline: none;
+    font-weight: normal;
+    display: inline-flex;
+    gap: var(--gap-2);
+    align-items: center;
+    width: 100%;
+    transition: all var(--transition-normal);
+    border-radius: var(--border-radius-sm);
+  }
+
+  .input:focus,
+  .input:active {
+    --ring-offset-color: var(--background);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .input:disabled,
+  .input[disabled] {
+    pointer-events: none;
+  }
+
+  .label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--label-color);
+  }
+
+  /* Sizes */
+  .sm {
+    min-height: 32px;
+    font-size: 0.875rem;
+    line-height: 0;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .md {
+    min-height: 38px;
+    font-size: 1.1rem;
+    line-height: 0;
+    padding: 0.4rem 0.5rem;
+  }
+
+  .lg {
+    min-height: 46px;
+    font-size: 1.2rem;
+    line-height: 0;
+    padding: 0.5rem 0.5rem;
+  }
+
+  .startAdornment,
+  .endAdornment {
+    position: absolute;
+    display: flex;
+    align-items: center;
+  }
+
+  .startAdornment {
+    left: 5px;
+  }
+
+  .endAdornment {
+    right: 5px;
+  }
+
+  .helpText {
+    font-size: 0.75rem;
+    color: var(--help-text-color);
+  }
+
+  /* Variants */
+  .outlined {
+    border: 1px solid var(--input-variant-outlined-border);
+    background-color: transparent;
+  }
+
+  .outlined:hover {
+    border: 1px solid var(--input-variant-outlined-hover-border);
+  }
+
+  .outlined:focus,
+  .outlined:active {
+    --ring-color: var(--input-variant-outline-ring-color);
+  }
+
+  .underlined {
+    border-bottom: 1px solid var(--input-variant-underlined-border);
+    border-radius: 0;
+    gap: var(--gap-1);
+    background-color: var(--input-variant-underlined);
+  }
+
+  /* Sizes */
+  .underlined.sm {
+    padding: 0.25rem 0.1rem;
+    min-height: 26px
+  }
+
+  .underlined.md {
+    padding: 0.25rem 0.1rem;
+    min-height: 30px;
+  }
+
+  .underlined.lg {
+    padding: 0 0.1rem;
+    min-height: 34px;
+  }
+
+  .underlined:hover {
+    border-bottom: 1px solid var(--input-variant-underlined-hover-border);
+  }
+
+  .filled {
+    background-color: var(--input-variant-filled);
+  }
+
+
+  /* Error classes last, so that they override all 
+    of the above */
+  .error {
+    border: 1px solid var(--red-400);
+  }
+
+  .error:hover {
+    border: 1px solid var(--red-400);
+  }
+
+  .error:focus,
+  .error:active {
+    --ring-color: var(--red-300);
+  }
+
+  .underlined.startAdornmentPadding,
+  .startAdornmentPadding {
+    padding-left: 2rem;
+  }
+
+  .underlined.endAdornmentPadding,
+  .endAdornmentPadding {
+    padding-right: 2rem;
+  }
+
+  .underlined.startAdornment {
+    left: 0;
+  }
+
+  .underlined.endAdornment {
+    right: 0;
+  }
+
+  /* Intents */
+  .primary {
+    --input-variant-outlined-border: var(--primary-300);
+    --input-variant-outlined-hover-border: var(--primary-500);
+    --input-variant-outline-ring-color: var(--primary-300);
+    --input-variant-underlined-border: var(--primary-300);
+    --input-variant-underlined-hover-border: var(--primary-500);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .secondary {
+    --input-variant-outlined-border: var(--secondary-600);
+    --input-variant-outlined-hover-border: var(--secondary-800);
+    --input-variant-outline-ring-color: var(--secondary-600);
+    --input-variant-underlined-border: var(--secondary-600);
+    --input-variant-underlined-hover-border: var(--secondary-800);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .noeffect {
+    --input-variant-outlined-border: var(--gray-500);
+    --input-variant-outlined-hover-border: var(--gray-700);
+    --input-variant-outline-ring-color: var(--gray-700);
+    --input-variant-underlined-border: var(--gray-500);
+    --input-variant-underlined-hover-border: var(--gray-700);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .success {
+    --input-variant-outlined-border: var(--green-300);
+    --input-variant-outlined-hover-border: var(--green-600);
+    --input-variant-outline-ring-color: var(--green-600);
+    --input-variant-underlined-border: var(--green-300);
+    --input-variant-underlined-hover-border: var(--green-600);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .info {
+    --input-variant-outlined-border: var(--blue-300);
+    --input-variant-outlined-hover-border: var(--blue-600);
+    --input-variant-outline-ring-color: var(--blue-300);
+    --input-variant-underlined-border: var(--blue-100);
+    --input-variant-underlined-hover-border: var(--blue-400);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .warning {
+    --input-variant-outlined-border: var(--yellow-600);
+    --input-variant-outlined-hover-border: var(--yellow-800);
+    --input-variant-outline-ring-color: var(--yellow-600);
+    --input-variant-underlined-border: var(--yellow-600);
+    --input-variant-underlined-hover-border: var(--yellow-800);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  .danger {
+    --input-variant-outlined-border: var(--red-300);
+    --input-variant-outlined-hover-border: var(--red-600);
+    --input-variant-outline-ring-color: var(--red-600);
+    --input-variant-underlined-border: var(--red-300);
+    --input-variant-underlined-hover-border: var(--red-600);
+    --input-variant-filled: var(--gray-50);
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark) {
+
+    .input:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)),
+    .input:active:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --ring-offset-color: var(--background);
+    }
+
+    /* Intents */
+    .primary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --input-variant-outlined-border: var(--primary-200);
+      --input-variant-outlined-hover-border: var(--primary-100);
+      --input-variant-outline-ring-color: var(--primary-200);
+      --input-variant-underlined-border: var(--primary-200);
+      --input-variant-underlined-hover-border: var(--primary-100);
+      --input-variant-filled: var(--canvas-800);
+    }
+
+    .secondary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --input-variant-outlined-border: var(--secondary-600);
+      --input-variant-outlined-hover-border: var(--secondary-400);
+      --input-variant-outline-ring-color: var(--secondary-600);
+      --input-variant-underlined-border: var(--secondary-600);
+      --input-variant-underlined-hover-border: var(--secondary-400);
+      --input-variant-filled: var(--canvas-800);
+    }
+
+    .noeffect:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --input-variant-outlined-border: var(--gray-500);
+      --input-variant-outlined-hover-border: var(--gray-300);
+      --input-variant-outline-ring-color: var(--gray-400);
+      --input-variant-underlined-border: var(--gray-500);
+      --input-variant-underlined-hover-border: var(--gray-300);
+      --input-variant-filled: var(--canvas-800);
+    }
+
+    .success:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --input-variant-outlined-border: var(--green-500);
+      --input-variant-outlined-hover-border: var(--green-300);
+      --input-variant-outline-ring-color: var(--green-400);
+      --input-variant-underlined-border: var(--green-500);
+      --input-variant-underlined-hover-border: var(--green-300);
+      --input-variant-filled: var(--canvas-800);
+    }
+
+    .info:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --input-variant-outlined-border: var(--blue-500);
+      --input-variant-outlined-hover-border: var(--blue-300);
+      --input-variant-outline-ring-color: var(--blue-400);
+      --input-variant-underlined-border: var(--blue-500);
+      --input-variant-underlined-hover-border: var(--blue-300);
+      --input-variant-filled: var(--canvas-800);
+    }
+
+    .warning:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --input-variant-outlined-border: var(--yellow-500);
+      --input-variant-outlined-hover-border: var(--yellow-300);
+      --input-variant-outline-ring-color: var(--yellow-400);
+      --input-variant-underlined-border: var(--yellow-500);
+      --input-variant-underlined-hover-border: var(--yellow-300);
+      --input-variant-filled: var(--canvas-800);
+    }
+
+    .danger:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      --input-variant-outlined-border: var(--red-500);
+      --input-variant-outlined-hover-border: var(--red-300);
+      --input-variant-outline-ring-color: var(--red-400);
+      --input-variant-underlined-border: var(--red-500);
+      --input-variant-underlined-hover-border: var(--red-500);
+      --input-variant-filled: var(--canvas-800);
+    }
+  }
+}

package/src/components/input/input.stories.tsx

@@ -0,0 +1,174 @@
+import type React from 'react'
+
+import { CloseIcon, SearchIcon } from '../../icons/index.js'
+import { capitalize } from '../../utils/capitalize.js'
+import { intent } from '../@types/shared.js'
+import { IconButton } from '../button/icon-button.js'
+import { size, variant } from './@types/input.js'
+
+import { Input, InputAdornment } from './index.js'
+
+export default {
+  title: 'Components/Input/TextInput',
+  component: Input,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ marginBottom: '2rem' }}>
+        <div
+          style={{
+            maxWidth: '600px',
+            margin: '0 auto',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem',
+          }}
+        >
+          <Input
+            variant="outlined"
+            intent="primary"
+            id="name"
+            name="name"
+            label="Name"
+            placeHolder="Name"
+            helpText="Please enter your name."
+            disabled={false}
+            error={false}
+          />
+          <Input
+            variant="outlined"
+            intent="secondary"
+            required
+            id="foo"
+            name="foo"
+            label="Foo Required"
+            placeHolder="Foo"
+            helpText="Please enter your foo."
+            disabled={false}
+            error={false}
+          />
+          <Input
+            variant="outlined"
+            intent="primary"
+            label="Start and End Adornments"
+            startAdornment={
+              <InputAdornment>
+                <IconButton role="button" intent="noeffect" variant="text" ripple={false} size="xs">
+                  <SearchIcon width="20px" height="20px" />
+                </IconButton>
+              </InputAdornment>
+            }
+            endAdornment={
+              <InputAdornment>
+                <IconButton role="button" intent="noeffect" variant="text" size="xs">
+                  <CloseIcon width="16px" height="16px" />
+                </IconButton>
+              </InputAdornment>
+            }
+            id="search"
+            name="search"
+            placeHolder="Search"
+            disabled={false}
+            error={false}
+          />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export const Variants = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ maxWidth: '1100px', margin: '0 auto' }}>
+        {variant.map((variant) => {
+          return (
+            <div
+              key={variant}
+              style={{ marginBottom: '2rem' }}
+              className="grid grid-cols-4 items-center gap-12"
+            >
+              {size.map((size) => {
+                return (
+                  <Input
+                    key={`${variant}=${size}`}
+                    variant={variant}
+                    inputSize={size}
+                    id={`${variant}-${size}`}
+                    name={`${variant}-${size}`}
+                    label={`${capitalize(variant)} ${size.toUpperCase()}`}
+                    placeHolder={`${capitalize(variant)} ${size.toUpperCase()}`}
+                    helpText={`Please enter your ${variant} ${size.toUpperCase()}.`}
+                    disabled={false}
+                    error={false}
+                  />
+                )
+              })}
+              <Input
+                disabled={true}
+                key={`${variant}=${size}`}
+                variant={variant}
+                id={`${variant}-${size}`}
+                name={`${variant}-${size}`}
+                label={`${capitalize(variant)} Disabled`}
+                placeHolder={`${capitalize(variant)} disabled`}
+                helpText={`Please enter your ${variant} disabled.`}
+                error={false}
+              />
+            </div>
+          )
+        })}
+      </div>
+    </>
+  )
+}
+
+export const Intents = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      {intent.map((i) => {
+        return (
+          <div key={i} style={{ marginBottom: '12px' }}>
+            <Input
+              key={i}
+              variant="outlined"
+              intent={i}
+              inputSize="md"
+              id={i}
+              name={i}
+              label={capitalize(i)}
+              placeHolder={capitalize(i)}
+              helpText={`Please enter your ${i}`}
+              disabled={false}
+              error={false}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+export const Error = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+        <Input
+          required
+          id="name"
+          name="name"
+          label="Name"
+          placeHolder="Name"
+          helpText="Please enter your name."
+          disabled={false}
+          error={true}
+          errorText="Please enter a valid name."
+        />
+      </div>
+    </>
+  )
+}

package/src/components/input/input.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import cx from 'classnames'
+import type React from 'react'
+
+import type { Intent, Size, Variant } from './@types/input.js'
+import { ErrorText } from './error-text.js'
+import { HelpText } from './help-text.js'
+import styles from './input.module.css'
+
+import type { InputAdornmentProps } from './input-adornment.js'
+import { Label } from './label.js'
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  id: string
+  name: string
+  label?: string
+  variant?: Variant
+  inputSize?: Size
+  intent?: Intent
+  required?: boolean
+  type?: string
+  placeHolder?: string
+  autoComplete?: string
+  startAdornment?: React.ReactElement<InputAdornmentProps>
+  endAdornment?: React.ReactElement<InputAdornmentProps>
+  error?: boolean
+  helpText?: string
+  errorText?: string
+  className?: string
+  inputWrapperClassName?: string
+  ref?: React.RefCallback<HTMLInputElement | null> | React.RefObject<HTMLInputElement | null>
+}
+
+export const Input = <C extends React.ElementType = 'input'>({
+  ref,
+  id,
+  name,
+  type = 'text',
+  variant = 'outlined',
+  inputSize = 'md',
+  intent = 'primary',
+  required,
+  label,
+  startAdornment,
+  endAdornment,
+  placeHolder = '',
+  autoComplete = 'off',
+  error = false,
+  helpText = '',
+  errorText = '',
+  inputWrapperClassName,
+  className,
+  ...rest
+}: InputProps) => {
+  return (
+    <div className={cx('input-wrapper', styles.inputWrapper, inputWrapperClassName)}>
+      {label != null && <Label id={id} htmlFor={id} required={required} label={label} />}
+      <div className={cx('input-container', styles.inputContainer)}>
+        {startAdornment != null && (
+          <div className={cx(styles.startAdornment, styles[variant])}>{startAdornment}</div>
+        )}
+        <input
+          ref={ref}
+          id={id}
+          name={name}
+          type={type}
+          required={required}
+          autoComplete={autoComplete}
+          placeholder={placeHolder}
+          aria-labelledby={`label-for-${id}`}
+          aria-invalid={error}
+          aria-required={required}
+          aria-errormessage={errorText}
+          aria-describedby={error ? `error-for-${id}` : undefined}
+          className={cx(
+            'input',
+            variant,
+            inputSize,
+            intent,
+            styles.input,
+            styles[variant],
+            styles[inputSize],
+            styles[intent],
+            { [styles.startAdornmentPadding]: startAdornment != null },
+            { [styles.endAdornmentPadding]: endAdornment != null },
+            { [styles.error]: error },
+            className
+          )}
+          {...rest}
+        />
+        {endAdornment != null && (
+          <div className={cx(styles.endAdornment, styles[variant])}>{endAdornment}</div>
+        )}
+      </div>
+      {error ? (
+        <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+      ) : (
+        helpText?.length > 0 && <HelpText text={helpText} />
+      )}
+    </div>
+  )
+}

package/src/components/input/label.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import styles from './label.module.css'
+
+interface Props extends HTMLAttributes<'label'> {
+  id: string
+  for: string
+  label: string
+  required?: boolean
+  class?: string
+}
+
+const { id, for: htmlFor, label, required, class: className, ...rest } = Astro.props as Props
+---
+
+<label
+  id={`label-for-${id}`}
+  for={htmlFor}
+  class:list={['label', styles.label, className]}
+  {...rest}
+>
+  {label}
+  {required != null && <span class={styles.required}>&nbsp;*</span>}
+</label>

package/src/components/input/label.module.css

@@ -0,0 +1,28 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .label {
+    display: block;
+    font-weight: 500;
+    color: var(--gray-900)
+  }
+
+  .required {
+    color: var(--red-500);
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark) {
+    .label:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      color: var(--gray-50);
+    }
+
+    .required:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      color: var(--red-400);
+    }
+  }
+}

package/src/components/input/label.tsx

@@ -0,0 +1,25 @@
+import cx from 'classnames'
+import type React from 'react'
+
+import styles from './label.module.css'
+
+interface LabelProps {
+  className?: string
+  id: string
+  htmlFor: string
+  label: string
+  required?: boolean
+}
+
+export function Label({ className, id, htmlFor, label, required }: LabelProps): React.JSX.Element {
+  return (
+    <label
+      id={`label-for-${id}`}
+      htmlFor={htmlFor}
+      className={cx('label', styles.label, className)}
+    >
+      {label}
+      {required != null && <span className={styles.required}>&nbsp;*</span>}
+    </label>
+  )
+}