@byline/ui 0.9.3 → 0.10.1

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

@@ -0,0 +1,289 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .input-wrapper,
+  :global(.infonomic-input-wrapper) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-1);
+  }
+
+  .input-container,
+  :global(.infonomic-input-container) {
+    position: relative;
+    width: 100%;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--gap-2);
+  }
+
+  .input,
+  :global(.infonomic-input) {
+    border: none;
+    outline: 1px solid transparent;
+    outline-offset: 2px;
+    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,
+  :global(.infonomic-input):focus,
+  :global(.infonomic-input):active {
+    outline-color: var(--ring-color);
+  }
+
+  .input:disabled,
+  .input[disabled],
+  :global(.infonomic-input):disabled,
+  :global(.infonomic-input)[disabled] {
+    pointer-events: none;
+  }
+
+  .label,
+  :global(.infonomic-input-label) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--label-color);
+  }
+
+  /* Sizes */
+  .sm,
+  :global(.infonomic-input-sm) {
+    min-height: 32px;
+    font-size: 0.875rem;
+    line-height: 0;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .md,
+  :global(.infonomic-input-md) {
+    min-height: 36px;
+    font-size: 1rem;
+    line-height: 0;
+    padding: 0.3rem 0.5rem;
+  }
+
+  .lg,
+  :global(.infonomic-input-lg) {
+    min-height: 40px;
+    font-size: 1.175rem;
+    line-height: 0;
+    padding: 0.4rem 0.5rem;
+  }
+
+  .start-adornment,
+  .end-adornment,
+  :global(.infonomic-input-start-adornment),
+  :global(.infonomic-input-end-adornment) {
+    position: absolute;
+    display: flex;
+    align-items: center;
+  }
+
+  .start-adornment,
+  :global(.infonomic-input-start-adornment) {
+    left: 5px;
+  }
+
+  .end-adornment,
+  :global(.infonomic-input-end-adornment) {
+    right: 5px;
+  }
+
+  .help-text,
+  :global(.infonomic-input-help-text) {
+    font-size: 0.75rem;
+    color: var(--help-text-color);
+  }
+
+  /* Variants */
+  .outlined,
+  :global(.infonomic-input-outlined) {
+    border: 1px solid var(--input-variant-outlined-border);
+    background-color: transparent;
+  }
+
+  .outlined:hover,
+  :global(.infonomic-input-outlined):hover {
+    border: 1px solid var(--input-variant-outlined-hover-border);
+  }
+
+  .outlined:focus,
+  .outlined:active,
+  :global(.infonomic-input-outlined):focus,
+  :global(.infonomic-input-outlined):active {
+    --ring-color: var(--input-variant-outline-ring-color);
+  }
+
+  .underlined,
+  :global(.infonomic-input-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,
+  :global(.infonomic-input-underlined.input-sm) {
+    padding: 0.25rem 0.1rem;
+    min-height: 26px;
+  }
+
+  .underlined.md,
+  :global(.infonomic-input-underlined.input-md) {
+    padding: 0.25rem 0.1rem;
+    min-height: 30px;
+  }
+
+  .underlined.lg,
+  :global(.infonomic-input-underlined.input-lg) {
+    padding: 0 0.1rem;
+    min-height: 34px;
+  }
+
+  .underlined:hover,
+  :global(.infonomic-input-underlined):hover {
+    border-bottom: 1px solid var(--input-variant-underlined-hover-border);
+  }
+
+  .underlined:focus,
+  .underlined:active,
+  :global(.infonomic-input-underlined):focus,
+  :global(.infonomic-input-underlined):active {
+    outline: none;
+  }
+
+  .filled,
+  :global(.infonomic-input-filled) {
+    background-color: var(--input-variant-filled);
+  }
+
+  /* Error classes last, so that they override all
+    of the above */
+  .error,
+  :global(.infonomic-input-error) {
+    border: 1px solid var(--field-border-invalid);
+  }
+
+  .error:hover,
+  :global(.infonomic-input-error):hover {
+    border: 1px solid var(--field-border-invalid);
+  }
+
+  .error:focus,
+  .error:active,
+  :global(.infonomic-input-error):focus,
+  :global(.infonomic-input-error):active {
+    --ring-color: var(--field-ring-invalid);
+  }
+
+  .underlined.start-adornment-padding,
+  .start-adornment-padding,
+  :global(.infonomic-input-underlined.input-start-adornment-padding),
+  :global(.infonomic-input-start-adornment-padding) {
+    padding-left: 2rem;
+  }
+
+  .underlined.end-adornment-padding,
+  .end-adornment-padding,
+  :global(.infonomic-input-underlined.input-end-adornment-padding),
+  :global(.infonomic-input-end-adornment-padding) {
+    padding-right: 2rem;
+  }
+
+  .underlined.start-adornment,
+  :global(.infonomic-input-underlined.input-start-adornment) {
+    left: 0;
+  }
+
+  .underlined.end-adornment,
+  :global(.infonomic-input-underlined.input-end-adornment) {
+    right: 0;
+  }
+
+  /* Intents */
+  .primary,
+  :global(.infonomic-input-primary) {
+    --input-variant-outlined-border: var(--stroke-primary);
+    --input-variant-outlined-hover-border: var(--stroke-primary-hover);
+    --input-variant-outline-ring-color: var(--ring-primary);
+    --input-variant-underlined-border: var(--stroke-primary);
+    --input-variant-underlined-hover-border: var(--stroke-primary-hover);
+    --input-variant-filled: var(--fill-primary-weak);
+  }
+
+  .secondary,
+  :global(.infonomic-input-secondary) {
+    --input-variant-outlined-border: var(--stroke-secondary);
+    --input-variant-outlined-hover-border: var(--stroke-secondary-hover);
+    --input-variant-outline-ring-color: var(--ring-secondary);
+    --input-variant-underlined-border: var(--stroke-secondary);
+    --input-variant-underlined-hover-border: var(--stroke-secondary-hover);
+    --input-variant-filled: var(--fill-secondary-weak);
+  }
+
+  .noeffect,
+  :global(.infonomic-input-noeffect) {
+    --input-variant-outlined-border: var(--stroke-noeffect);
+    --input-variant-outlined-hover-border: var(--stroke-noeffect-hover);
+    --input-variant-outline-ring-color: var(--ring-noeffect);
+    --input-variant-underlined-border: var(--stroke-noeffect);
+    --input-variant-underlined-hover-border: var(--stroke-noeffect-hover);
+    --input-variant-filled: var(--fill-noeffect-weak);
+  }
+
+  .success,
+  :global(.infonomic-input-success) {
+    --input-variant-outlined-border: var(--stroke-success);
+    --input-variant-outlined-hover-border: var(--stroke-success-hover);
+    --input-variant-outline-ring-color: var(--ring-success);
+    --input-variant-underlined-border: var(--stroke-success);
+    --input-variant-underlined-hover-border: var(--stroke-success-hover);
+    --input-variant-filled: var(--fill-success-weak);
+  }
+
+  .info,
+  :global(.infonomic-input-info) {
+    --input-variant-outlined-border: var(--stroke-info);
+    --input-variant-outlined-hover-border: var(--stroke-info-hover);
+    --input-variant-outline-ring-color: var(--ring-info);
+    --input-variant-underlined-border: var(--stroke-info);
+    --input-variant-underlined-hover-border: var(--stroke-info-hover);
+    --input-variant-filled: var(--fill-info-weak);
+  }
+
+  .warning,
+  :global(.infonomic-input-warning) {
+    --input-variant-outlined-border: var(--stroke-warning);
+    --input-variant-outlined-hover-border: var(--stroke-warning-hover);
+    --input-variant-outline-ring-color: var(--ring-warning);
+    --input-variant-underlined-border: var(--stroke-warning);
+    --input-variant-underlined-hover-border: var(--stroke-warning-hover);
+    --input-variant-filled: var(--fill-warning-weak);
+  }
+
+  .danger,
+  :global(.infonomic-input-danger) {
+    --input-variant-outlined-border: var(--stroke-danger);
+    --input-variant-outlined-hover-border: var(--stroke-danger-hover);
+    --input-variant-outline-ring-color: var(--ring-danger);
+    --input-variant-underlined-border: var(--stroke-danger);
+    --input-variant-underlined-hover-border: var(--stroke-danger-hover);
+    --input-variant-filled: var(--fill-danger-weak);
+  }
+
+  /* Dark mode handled by semantic tokens in theme layer */
+}

package/src/components/inputs/input.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { ErrorText } from './error-text.jsx'
+import { HelpText } from './help-text.jsx'
+import styles from './input.module.css'
+import { Label } from './label.jsx'
+import type { Intent, Size, Variant } from './@types/input.js'
+import type { InputAdornmentProps } from './input-adornment.jsx'
+
+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('infonomic-input-wrapper', styles['input-wrapper'], inputWrapperClassName)}>
+      {label != null && <Label id={id} htmlFor={id} required={required} label={label} />}
+      <div className={cx('infonomic-input-container', styles['input-container'])}>
+        {startAdornment != null && (
+          <div
+            className={cx(
+              'infonomic-input-start-adornment',
+              styles['start-adornment'],
+              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(
+            'infonomic-input',
+            `infonomic-input-${variant}`,
+            `infonomic-input-${inputSize}`,
+            `infonomic-input-${intent}`,
+            styles.input,
+            styles[variant],
+            styles[inputSize],
+            styles[intent],
+            { [styles['start-adornment-padding']]: startAdornment != null },
+            { [styles['end-adornment-padding']]: endAdornment != null },
+            { [styles.error]: error },
+            className
+          )}
+          {...rest}
+        />
+        {endAdornment != null && (
+          <div
+            className={cx(
+              'infonomic-input-end-adornment',
+              styles['end-adornment'],
+              styles[variant]
+            )}
+          >
+            {endAdornment}
+          </div>
+        )}
+      </div>
+      {error ? (
+        <ErrorText id={`error-for-${id}`} size={inputSize} text={errorText ?? helpText} />
+      ) : (
+        helpText?.length > 0 && <HelpText size={inputSize} text={helpText} />
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,20 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .label,
+  :global(.infonomic-label) {
+    display: block;
+    font-weight: 500;
+    color: var(--text);
+  }
+
+  .required,
+  :global(.infonomic-label-required) {
+    color: var(--text-danger);
+  }
+}

package/src/components/inputs/label.tsx

@@ -0,0 +1,26 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+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 && <span className={styles.required}>&nbsp;*</span>}
+    </label>
+  )
+}

package/src/components/inputs/radio-group.module.css

@@ -0,0 +1,175 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+/* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
+@layer byline-components {
+  .column,
+  :global(.infonomic-radio-group-column) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-2);
+  }
+
+  .row,
+  :global(.infonomic-radio-group-row) {
+    display: flex;
+    flex-direction: row;
+    gap: var(--gap-2);
+  }
+
+  .item-container,
+  :global(.infonomic-radio-group-item-container) {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-2);
+  }
+
+  .item,
+  :global(.infonomic-radio-group-item) {
+    all: unset;
+    width: 18px;
+    height: 18px;
+    border-radius: var(--border-radius-full);
+    border: 2px solid var(--radio-border);
+    transition: all var(--transition-normal);
+  }
+
+  .item[data-disabled],
+  :global(.infonomic-radio-group-item[data-disabled]) {
+    pointer-events: none;
+  }
+
+  /* Style for the "checked" state */
+  .indicator[data-checked],
+  :global(.infonomic-radio-group-indicator[data-checked]) {
+    animation: radioIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /* Style for the "unchecked" state */
+  .indicator[data-unchecked],
+  :global(.infonomic-radio-group-indicator[data-unchecked]) {
+    animation: radioOut 0.2s ease-in;
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  .indicator,
+  :global(.infonomic-radio-group-indicator) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    &::after {
+      content: "";
+      display: block;
+      width: 11px;
+      height: 11px;
+      border-radius: 50%;
+      background-color: var(--radio-indicator-color);
+    }
+  }
+
+  .label,
+  :global(.infonomic-radio-group-label) {
+    color: var(--foreground);
+    font-size: 15px;
+    line-height: 1;
+    padding-left: var(--spacing-8);
+  }
+
+  .row .label,
+  :global(.infonomic-radio-group-row) :global(.infonomic-radio-group-label) {
+    padding-left: 0;
+    padding-right: var(--spacing-16);
+  }
+
+  /* Intents */
+  .primary,
+  :global(.infonomic-radio-group-primary) {
+    --radio-border: var(--fill-primary-strong);
+    --radio-indicator-color: var(--fill-primary-strong);
+  }
+
+  .secondary,
+  :global(.infonomic-radio-group-secondary) {
+    --radio-border: var(--fill-secondary-strong);
+    --radio-indicator-color: var(--fill-secondary-strong);
+  }
+
+  .noeffect,
+  :global(.infonomic-radio-group-noeffect) {
+    --radio-border: var(--fill-noeffect-strong);
+    --radio-indicator-color: var(--fill-noeffect-strong);
+  }
+
+  .success,
+  :global(.infonomic-radio-group-success) {
+    --radio-border: var(--fill-success-strong);
+    --radio-indicator-color: var(--fill-success-strong);
+  }
+
+  .info,
+  :global(.infonomic-radio-group-info) {
+    --radio-border: var(--fill-info-strong);
+    --radio-indicator-color: var(--fill-info-strong);
+  }
+
+  .warning,
+  :global(.infonomic-radio-group-warning) {
+    --radio-border: var(--fill-warning-strong);
+    --radio-indicator-color: var(--fill-warning-strong);
+  }
+
+  .danger,
+  :global(.infonomic-radio-group-danger) {
+    --radio-border: var(--fill-danger-strong);
+    --radio-indicator-color: var(--fill-danger-strong);
+  }
+
+  /* Dark mode handled by semantic tokens in theme layer */
+
+  @keyframes radioIn {
+    0% {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    50% {
+      opacity: 1;
+      transform: scale(1.2);
+      /* Overshoot */
+    }
+
+    80% {
+      transform: scale(0.9);
+      /* Slight bounce back */
+    }
+
+    100% {
+      transform: scale(1);
+      /* Settle */
+    }
+  }
+
+  /* Define keyframes for the "unchecked" state */
+  @keyframes radioOut {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+}

package/src/components/inputs/radio-group.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import type React from 'react'
+
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'
+import cx from 'classnames'
+
+import styles from './radio-group.module.css'
+import type { Intent } from '../@types/shared'
+
+export interface RadioGroupValue {
+  id: string
+  value: string
+  label: string
+}
+
+export const RadioGroupItem = ({
+  intent = 'primary',
+  className,
+  id,
+  value,
+  label,
+  ref: forwardedRef,
+  ...props
+}: Omit<React.ComponentProps<typeof Radio.Root>, 'value'> & {
+  intent?: Intent
+  className?: string
+  id: string
+  value: string
+  label: string
+  ref?: React.RefObject<HTMLDivElement>
+}) => {
+  return (
+    <div ref={forwardedRef} className={styles['item-container']}>
+      <Radio.Root
+        {...props}
+        className={cx(styles.item, styles[intent])}
+        value={value}
+        id={id}
+        nativeButton
+        render={<button type="button" />}
+      >
+        <Radio.Indicator className={styles.indicator} />
+      </Radio.Root>
+      <label className={styles.label} htmlFor={id}>
+        {label}
+      </label>
+    </div>
+  )
+}
+
+export const RadioGroup = ({
+  ref: forwardedRef,
+  className,
+  direction = 'column',
+  children,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive> & {
+  direction?: 'row' | 'column'
+  className?: string
+  children: React.ReactNode
+  ref?: React.RefObject<HTMLDivElement>
+}) => (
+  <RadioGroupPrimitive
+    ref={forwardedRef}
+    className={cx('infonomic-radio-group', styles[direction], className)}
+    {...props}
+  >
+    {children}
+  </RadioGroupPrimitive>
+)