@byline/ui 0.9.3 → 0.10.1

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

@@ -0,0 +1,152 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .positioner,
+  :global(.infonomic-select-positioner) {
+    z-index: 50;
+  }
+
+  .popup,
+  :global(.infonomic-select-popup) {
+    z-index: 50;
+    margin-top: 2px;
+    border: 1px solid var(--surface-panel-border);
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface-panel-elevated);
+    padding: 6px;
+  }
+
+  .popup-xs {
+    padding: 4px;
+  }
+
+  .popup-sm {
+    padding: 4px;
+  }
+
+  .popup-md {
+    padding: 6px;
+  }
+
+  .popup-lg {
+    padding: 6px;
+  }
+
+  .popup-xl {
+    padding: 8px;
+  }
+
+  .list,
+  :global(.infonomic-select-list) {
+    z-index: 50;
+  }
+
+  .scroll-arrow,
+  :global(.infonomic-select-scroll-arrow) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--surface-item-text);
+    border: 1px solid var(--surface-panel-border);
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface-panel-elevated);
+    padding: 2px;
+  }
+
+  .select-item,
+  :global(.infonomic-select-item) {
+    position: relative;
+    user-select: none;
+    color: var(--surface-item-text);
+    background-color: var(--surface-item);
+    font-size: 1rem;
+    line-height: 1;
+    padding-right: 32px;
+    padding-left: 24px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+  }
+
+  .select-item[data-disabled],
+  :global(.infonomic-select-item[data-disabled]) {
+    color: var(--surface-item-text-disabled);
+    pointer-events: none;
+  }
+
+  .select-item[data-highlighted],
+  :global(.infonomic-select-item[data-highlighted]) {
+    outline: none;
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
+  }
+
+  .select-item-indicator,
+  :global(.infonomic-select-item-indicator) {
+    position: absolute;
+    left: 0;
+    width: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* size variants — treat current values as 'md' */
+  .popup-xs .select-item {
+    font-size: 0.75rem;
+    height: 24px;
+    padding-right: 28px;
+    padding-left: 20px;
+    border-radius: 4px;
+  }
+
+  .popup-xs .select-item-indicator {
+    width: 20px;
+  }
+
+  .popup-sm .select-item {
+    font-size: 0.875rem;
+    height: 28px;
+    padding-right: 30px;
+    padding-left: 22px;
+    border-radius: 5px;
+  }
+
+  .popup-sm .select-item-indicator {
+    width: 22px;
+  }
+
+  /* .popup-md — inherits base .select-item values */
+
+  .popup-lg .select-item {
+    font-size: 1.125rem;
+    height: 34px;
+    padding-right: 32px;
+    padding-left: 24px;
+    border-radius: 6px;
+  }
+
+  .popup-lg .select-item-indicator {
+    width: 24px;
+  }
+
+  .popup-xl .select-item {
+    font-size: 1.25rem;
+    height: 40px;
+    padding-right: 36px;
+    padding-left: 28px;
+    border-radius: 8px;
+  }
+
+  .popup-xl .select-item-indicator {
+    width: 28px;
+  }
+}

package/src/components/inputs/select.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import type React from 'react'
+
+import { Select as SelectPrimitive } from '@base-ui/react/select'
+import cx from 'classnames'
+
+import { CheckIcon } from '../../icons/check-icon.jsx'
+import { ChevronDownIcon } from '../../icons/chevron-down-icon.jsx'
+import { ChevronUpIcon } from '../../icons/chevron-up-icon.jsx'
+import { Button } from '../button/button.jsx'
+import { HelpText } from './help-text.jsx'
+import styles from './select.module.css'
+import type { Intent } from '../@types/shared.js'
+import type { Size, Variant } from '../button/@types/button.js'
+
+export interface SelectValue<Value extends string | number = string> {
+  label: string
+  value: Value
+  prefix?: string
+  suffix?: string
+}
+
+type SelectProps<Value extends string | number = string> = Omit<
+  React.ComponentProps<typeof SelectPrimitive.Root<Value>>,
+  'items'
+> & {
+  id?: string
+  intent?: Intent
+  variant?: Variant
+  size?: Size
+  placeholder?: string
+  position?: 'item-aligned' | 'popper'
+  containerClassName?: string
+  className?: string
+  disabledValue?: string
+  ariaLabel?: string
+  helpText?: string
+  items?: SelectValue<Value>[]
+}
+
+export function Select<Value extends string | number = string>({
+  id,
+  children,
+  placeholder,
+  disabledValue,
+  intent,
+  variant,
+  size,
+  position,
+  containerClassName,
+  className,
+  ariaLabel,
+  helpText,
+  items,
+  ...rest
+}: SelectProps<Value>): React.JSX.Element {
+  return (
+    <div className={cx('infonomic-select-container', containerClassName)}>
+      <SelectPrimitive.Root<Value> items={items} {...rest}>
+        <SelectPrimitive.Trigger
+          aria-label={ariaLabel ?? 'Select'}
+          render={
+            <Button
+              id={id}
+              intent={intent}
+              variant={variant}
+              size={size}
+              className={cx('whitespace-nowrap', className)}
+            />
+          }
+        >
+          <SelectPrimitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Icon>
+            <ChevronDownIcon />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Positioner
+            className={styles.positioner}
+            alignItemWithTrigger={position !== 'popper'}
+          >
+            <SelectPrimitive.ScrollUpArrow className={styles['scroll-arrow']}>
+              <ChevronUpIcon />
+            </SelectPrimitive.ScrollUpArrow>
+            <SelectPrimitive.Popup
+              className={cx(styles.popup, size != null && styles[`popup-${size}`])}
+            >
+              <SelectPrimitive.List className={styles.list}>
+                {children ??
+                  items?.map((item) => (
+                    <SelectItem key={item.value} value={item.value} label={item.label}>
+                      {item.label}
+                    </SelectItem>
+                  ))}
+              </SelectPrimitive.List>
+            </SelectPrimitive.Popup>
+            <SelectPrimitive.ScrollDownArrow className={styles['scroll-arrow']}>
+              <ChevronDownIcon />
+            </SelectPrimitive.ScrollDownArrow>
+          </SelectPrimitive.Positioner>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
+      {helpText != null && helpText?.length > 0 && <HelpText text={helpText} />}
+    </div>
+  )
+}
+
+export const SelectItem = ({
+  ref: forwardedRef,
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item> & {
+  ref?: React.RefObject<HTMLDivElement>
+}) => {
+  return (
+    <SelectPrimitive.Item
+      className={cx('infonomic-select-item', styles['select-item'], className)}
+      {...props}
+      ref={forwardedRef}
+    >
+      <SelectPrimitive.ItemIndicator
+        className={cx('infonomic-select-item-indicator', styles['select-item-indicator'])}
+      >
+        <CheckIcon />
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+SelectItem.displayName = 'SelectItem'

package/src/components/inputs/text-area.module.css

@@ -0,0 +1,34 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .text-area,
+  :global(.infonomic-text-area) {
+    font-size: 1rem;
+    width: 100%;
+    padding: 0.5rem;
+  }
+
+  .underlined,
+  :global(.infonomic-text-area--underlined) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .underlined:focus,
+  .underlined:active,
+  :global(.infonomic-text-area--underlined):focus,
+  :global(.infonomic-text-area--underlined):active {
+    outline: none;
+  }
+
+  .outlined {
+  }
+
+  .filled {
+  }
+}

package/src/components/inputs/text-area.tsx

@@ -0,0 +1,83 @@
+import type * as React from 'react'
+
+import cx from 'classnames'
+
+import { ErrorText } from './error-text.jsx'
+import { HelpText } from './help-text.jsx'
+import inputStyles from './input.module.css'
+import { Label } from './label.jsx'
+import styles from './text-area.module.css'
+import type { Intent, Variant } from './@types/input.js'
+
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  id: string
+  name: string
+  label?: string
+  required?: boolean
+  variant?: Variant
+  intent?: Intent
+  rows: number
+  placeHolder?: string
+  autoComplete?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+  className?: string
+  ref?: React.RefCallback<HTMLTextAreaElement | null> | React.RefObject<HTMLTextAreaElement | null>
+}
+
+export const TextArea = function TextArea({
+  ref,
+  id,
+  name,
+  label,
+  rows = 4,
+  required = false,
+  variant = 'outlined',
+  intent = 'primary',
+  placeHolder = '',
+  autoComplete = 'off',
+  error = false,
+  helpText = '',
+  errorText = '',
+  className,
+  ...rest
+}: TextAreaProps): React.JSX.Element {
+  return (
+    <div className={cx('text-area-wrapper', inputStyles['input-wrapper'])}>
+      {label != null && <Label id={id} htmlFor={id} required={required} label={label} />}
+      <textarea
+        ref={ref}
+        id={id}
+        name={name}
+        required={required}
+        rows={rows}
+        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-text-area',
+          `infonomic-text-area-${variant}`,
+          `infonomic-text-area-${intent}`,
+          inputStyles.input,
+          inputStyles[variant],
+          inputStyles[intent],
+          styles['text-area'],
+          styles[variant],
+          { [inputStyles.error]: error },
+          className
+        )}
+        {...rest}
+      />
+      {error ? (
+        <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+      ) : (
+        helpText?.length > 0 && <HelpText text={helpText} />
+      )}
+    </div>
+  )
+}

package/src/components/inputs/utils.ts

@@ -0,0 +1,21 @@
+import type { z } from 'zod'
+
+type FormattedErrors = z.ZodFormattedError<any>
+
+export function hasErrors(name: string, clientErrors: any, serverErrors: any): boolean {
+  return Boolean(serverErrors?.[name as keyof typeof serverErrors] ?? clientErrors[name])
+}
+
+export function getErrorText(
+  name: string,
+  clientErrors: any,
+  serverErrors: any
+): string | undefined {
+  const message = clientErrors[name]?.message
+  if (message != null) return message
+  const error =
+    serverErrors != null
+      ? (serverErrors[name as keyof typeof serverErrors] as FormattedErrors)
+      : undefined
+  if (error?._errors != null) return error._errors.join(' ')
+}

package/src/components/notifications/@types/alert.ts

@@ -0,0 +1,25 @@
+// generic types
+import type { Intent as t } from '../../@types/shared.js'
+
+/**
+ * This file contains the types and prop-types for the Alert component.
+ */
+
+// typescript types
+
+/**
+ * Semantic color intent of the alert.
+ *
+ * Controls the alert's background color, left border accent, icon, and text.
+ *
+ * - `primary`   — informational blue-tinted alert (default)
+ * - `secondary` — alternate neutral style
+ * - `noeffect`  — gray, no color emphasis
+ * - `success`   — positive confirmation (green)
+ * - `info`      — informational, non-critical (cyan/blue)
+ * - `warning`   — caution, needs attention (yellow/amber)
+ * - `danger`    — error or destructive state (red)
+ *
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t

package/src/components/notifications/@types/toast.ts

@@ -0,0 +1,53 @@
+// generic types
+import type { Icons as i, Position as p, Intent as t } from '../../@types/shared.js'
+
+/**
+ * This file contains the types and prop-types for the Toast component.
+ */
+
+// typescript types
+
+/**
+ * Semantic color intent of the toast notification.
+ *
+ * Controls the toast's background color, icon, and text style.
+ *
+ * - `primary`   — standard informational toast (default)
+ * - `secondary` — alternate neutral style
+ * - `noeffect`  — gray, no color emphasis
+ * - `success`   — positive confirmation (green)
+ * - `info`      — informational, non-critical (cyan/blue)
+ * - `warning`   — caution, needs attention (yellow/amber)
+ * - `danger`    — error or destructive state (red)
+ *
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t
+
+/**
+ * Screen corner position for the toast viewport.
+ *
+ * - `top-left`     — top-left corner of the viewport
+ * - `top-right`    — top-right corner of the viewport (default)
+ * - `bottom-left`  — bottom-left corner of the viewport
+ * - `bottom-right` — bottom-right corner of the viewport
+ *
+ * @default 'bottom-right'
+ */
+export type Position = 'top-right' | p
+
+/**
+ * Icon variant displayed inside the toast.
+ * Maps to the corresponding status icon component.
+ */
+export type IconType = 'success' | i
+
+/**
+ * Custom data passed to each toast via the toast manager's `add()` method.
+ */
+export interface ToastData {
+  intent?: Intent
+  iconType?: IconType
+  icon?: boolean
+  close?: boolean
+}

package/src/components/notifications/alert.module.css

@@ -0,0 +1,136 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .alert,
+  :global(.infonomic-alert) {
+    display: flex;
+    align-items: start;
+    width: 100%;
+    gap: var(--gap-2);
+    border-radius: var(--border-radius-md);
+    padding: 16px;
+    font-family: inherit;
+    font-weight: normal;
+    transition: all 0.3s ease-in-out;
+    border: 1px solid var(--alert-border);
+    background-color: var(--alert-background);
+    color: var(--foreground);
+    margin-bottom: 1rem;
+  }
+
+  .alert-with-title,
+  :global(.infonomic-alert-with-title) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .icon,
+  :global(.infonomic-alert-icon) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    min-height: 24px;
+    width: 24px;
+    height: 24px;
+  }
+
+  .close,
+  :global(.infonomic-alert-close) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    min-width: 24px;
+    min-height: 24px;
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    margin-left: auto;
+    margin-top: -2px;
+  }
+
+  .fade,
+  :global(.infonomic-alert-fade) {
+    opacity: 0;
+    transition: opacity 0.4s ease-in-out;
+  }
+
+  .header,
+  :global(.infonomic-alert-header) {
+    display: flex;
+    align-items: start;
+    width: 100%;
+    margin-bottom: var(--spacing-8);
+    gap: var(--gap-2);
+  }
+
+  .title,
+  :global(.infonomic-alert-title) {
+    display: flex;
+    font-weight: bold;
+    font-size: 1.2rem;
+    line-height: 1;
+    padding-top: 1px;
+  }
+
+  .content,
+  :global(.infonomic-alert-content) {
+    padding-top: 1px;
+    font-size: var(--font-size-sm);
+  }
+
+  .content:first-child,
+  :global(.infonomic-alert-content:first-child) {
+    margin-top: 0;
+  }
+
+  /* Intents */
+  .primary,
+  :global(.infonomic-alert-primary) {
+    --alert-border: var(--stroke-primary);
+    --alert-background: var(--fill-primary-weak);
+  }
+
+  .secondary,
+  :global(.infonomic-alert-secondary) {
+    --alert-border: var(--stroke-secondary);
+    --alert-background: var(--fill-secondary-weak);
+  }
+
+  .noeffect,
+  :global(.infonomic-alert-noeffect) {
+    --alert-border: var(--stroke-noeffect);
+    --alert-background: var(--fill-noeffect-weak);
+  }
+
+  .success,
+  :global(.infonomic-alert-success) {
+    --alert-border: var(--stroke-success);
+    --alert-background: var(--fill-success-weak);
+  }
+
+  .info,
+  :global(.infonomic-alert-info) {
+    --alert-border: var(--stroke-info);
+    --alert-background: var(--fill-info-weak);
+  }
+
+  .warning,
+  :global(.infonomic-alert-warning) {
+    --alert-border: var(--stroke-warning);
+    --alert-background: var(--fill-warning-weak);
+  }
+
+  .danger,
+  :global(.infonomic-alert-danger) {
+    --alert-border: var(--stroke-danger);
+    --alert-background: var(--fill-danger-weak);
+  }
+}