@byline/ui 0.9.3 → 0.10.1

package/src/components/notifications/alert.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import type React from 'react'
+import { useEffect, useState } from 'react'
+
+import cx from 'classnames'
+
+import { CloseIcon } from '../../icons/close-icon'
+import { DangerIcon } from '../../icons/danger-icon'
+import { InfoIcon } from '../../icons/info-icon'
+import { SuccessIcon } from '../../icons/success-icon'
+import { WarningIcon } from '../../icons/warning-icon'
+import { Button } from '../button/button.js'
+import styles from './alert.module.css'
+import type { Intent } from './@types/alert.js'
+
+export interface AlertProps {
+  intent?: Intent
+  icon?: boolean
+  close?: boolean
+  className?: string
+  title?: string
+  children: React.ReactNode
+}
+
+const alertIcons = {
+  primary: WarningIcon,
+  secondary: InfoIcon,
+  success: SuccessIcon,
+  info: InfoIcon,
+  warning: WarningIcon,
+  danger: DangerIcon,
+}
+
+export const Alert = function Alert({
+  ref,
+  intent = 'success',
+  icon = true,
+  close = true,
+  title,
+  className,
+  children,
+  ...rest
+}: AlertProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}): React.JSX.Element | null {
+  const [show, setShow] = useState(true)
+  const [fade, setFade] = useState(false)
+
+  const Icon = alertIcons[intent as keyof typeof alertIcons]
+
+  const handleOnClose = (): void => {
+    setFade(true)
+    setTimeout(() => setShow(false), 400) // Match the CSS transition duration
+  }
+
+  useEffect(() => {
+    if (!show) {
+      // Perform any cleanup if necessary
+    }
+  }, [show])
+
+  if (show === false) return null
+
+  return (
+    <div
+      ref={ref}
+      className={cx(
+        'infonomic-alert',
+        `infonomic-alert-${intent}`,
+        styles.alert,
+        styles[intent],
+        className,
+        {
+          [styles.fade]: fade,
+        }
+      )}
+      {...rest}
+    >
+      {title != null ? (
+        <div className={cx('infonomic-alert-with-title', styles['alert-with-title'])}>
+          <div className={cx('infonomic-alert-header', styles.header)}>
+            {icon && <Icon className={cx('infonomic-alert-icon', styles.icon)} />}
+            <div className={cx('infonomic-alert-title', styles.title)}>
+              <span>{title}</span>
+            </div>
+            {close === true && (
+              <Button
+                intent={intent}
+                variant="filled"
+                aria-label="Close"
+                className={cx('infonomic-alert-close', styles.close)}
+                type="button"
+                onClick={handleOnClose}
+                {...rest}
+              >
+                <CloseIcon height="12px" width="12px" />
+              </Button>
+            )}
+          </div>
+          <div className={cx('infonomic-alert-content', styles.content)}>{children}</div>
+        </div>
+      ) : (
+        <>
+          {icon && <Icon className={cx('infonomic-alert-icon', styles.icon)} />}
+          <div className={cx('infonomic-alert-content', styles.content)}>{children}</div>
+          {close === true && (
+            <Button
+              intent={intent}
+              variant="filled"
+              aria-label="Close"
+              className={cx('infonomic-alert-close', styles.close)}
+              type="button"
+              onClick={handleOnClose}
+              {...rest}
+            >
+              <CloseIcon height="12px" width="12px" />
+            </Button>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/notifications/index.ts

@@ -0,0 +1,2 @@
+export * from './alert.js'
+export * from './toast.js'

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

@@ -0,0 +1,234 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  /* ============================================
+     Viewport — fixed-position container for toasts.
+     Position classes are applied here.
+     ============================================ */
+
+  .viewport,
+  :global(.infonomic-toast-viewport) {
+    --viewport-padding: 16px;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    z-index: var(--z-index-toast);
+    outline: none;
+  }
+
+  /* Mobile: full-width at all positions */
+
+  .top-left,
+  :global(.infonomic-toast-top-left) {
+    top: 88px;
+    right: var(--viewport-padding);
+    left: var(--viewport-padding);
+  }
+
+  .top-right,
+  :global(.infonomic-toast-top-right) {
+    top: 88px;
+    right: var(--viewport-padding);
+    left: var(--viewport-padding);
+  }
+
+  .bottom-left,
+  :global(.infonomic-toast-bottom-left) {
+    bottom: var(--viewport-padding);
+    right: var(--viewport-padding);
+    left: var(--viewport-padding);
+  }
+
+  .bottom-right,
+  :global(.infonomic-toast-bottom-right) {
+    bottom: var(--viewport-padding);
+    right: var(--viewport-padding);
+    left: var(--viewport-padding);
+  }
+
+  @media (min-width: 48rem) {
+    .bottom-right,
+    :global(.infonomic-toast-bottom-right) {
+      bottom: var(--viewport-padding);
+      right: var(--viewport-padding);
+      left: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .bottom-left,
+    :global(.infonomic-toast-bottom-left) {
+      bottom: var(--viewport-padding);
+      left: var(--viewport-padding);
+      right: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .top-left,
+    :global(.infonomic-toast-top-left) {
+      top: 88px;
+      left: var(--viewport-padding);
+      right: auto;
+      bottom: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .top-right,
+    :global(.infonomic-toast-top-right) {
+      top: 88px;
+      right: var(--viewport-padding);
+      bottom: auto;
+      left: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+  }
+
+  /* ============================================
+     Root — individual toast wrapper
+     ============================================ */
+
+  .root,
+  :global(.infonomic-toast-root) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-1);
+    padding-top: 12px;
+    padding-bottom: 16px;
+    background: var(--surface-panel-elevated);
+    border-width: var(--border-width-thin);
+    border-color: var(--border-color);
+    border-style: var(--border-style-solid);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-sm);
+    transform: translateX(var(--toast-swipe-movement-x, 0))
+      translateY(var(--toast-swipe-movement-y, 0));
+    transition:
+      transform 200ms ease-out,
+      opacity 150ms ease-in;
+  }
+
+  /* Entry animation */
+  .root[data-starting-style],
+  :global(.infonomic-toast-root[data-starting-style]) {
+    opacity: 0;
+    transform: translateY(calc(100% + var(--viewport-padding)));
+  }
+
+  @media (min-width: 48rem) {
+    .viewport.top-right .root[data-starting-style],
+    .viewport.bottom-right .root[data-starting-style],
+    :global(.infonomic-toast-viewport.top-right .infonomic-toast-root[data-starting-style]),
+    :global(.infonomic-toast-viewport.bottom-right .infonomic-toast-root[data-starting-style]) {
+      opacity: 0;
+      transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+
+    .viewport.top-left .root[data-starting-style],
+    .viewport.bottom-left .root[data-starting-style],
+    :global(.infonomic-toast-viewport.top-left .infonomic-toast-root[data-starting-style]),
+    :global(.infonomic-toast-viewport.bottom-left .infonomic-toast-root[data-starting-style]) {
+      opacity: 0;
+      transform: translateX(calc(-100% - var(--viewport-padding)));
+    }
+  }
+
+  /* Exit animation */
+  .root[data-ending-style],
+  :global(.infonomic-toast-root[data-ending-style]) {
+    opacity: 0;
+  }
+
+  .root[data-ending-style][data-swipe-direction="right"],
+  :global(.infonomic-toast-root[data-ending-style][data-swipe-direction="right"]) {
+    transform: translateX(calc(var(--toast-swipe-movement-x, 0) + 100% + var(--viewport-padding)));
+  }
+
+  .root[data-ending-style][data-swipe-direction="left"],
+  :global(.infonomic-toast-root[data-ending-style][data-swipe-direction="left"]) {
+    transform: translateX(calc(var(--toast-swipe-movement-x, 0) - 100% - var(--viewport-padding)));
+  }
+
+  .root[data-ending-style][data-swipe-direction="down"],
+  :global(.infonomic-toast-root[data-ending-style][data-swipe-direction="down"]) {
+    transform: translateY(calc(var(--toast-swipe-movement-y, 0) + 150%));
+  }
+
+  /* ============================================
+     Content — overflow container for stacking
+     ============================================ */
+
+  .content,
+  :global(.infonomic-toast-content) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-1);
+  }
+
+  /* ============================================
+     Header / Close / Title / Description / Action
+     ============================================ */
+
+  .header,
+  :global(.infonomic-toast-header) {
+    display: flex;
+    padding: 0 16px 0 12px;
+    align-items: start;
+    gap: var(--gap-2);
+    justify-content: space-between;
+  }
+
+  .close,
+  :global(.infonomic-toast-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;
+  }
+
+  .close svg,
+  :global(.infonomic-toast-close svg) {
+    fill: white;
+  }
+
+  .title,
+  :global(.infonomic-toast-title) {
+    display: flex;
+    padding: 0 12px 0 8px;
+    align-items: start;
+    gap: var(--gap-2);
+    margin-bottom: 5px;
+    font-weight: 500;
+    font-size: 15px;
+  }
+
+  .description,
+  :global(.infonomic-toast-description) {
+    margin: 0;
+    padding: 0 8px 0 12px;
+    font-size: var(--font-size-sm);
+    line-height: 1.3;
+  }
+
+  .action,
+  :global(.infonomic-toast-action) {
+    display: flex;
+    justify-content: end;
+    padding: 0 12px 0 12px;
+  }
+}

package/src/components/notifications/toast.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import React from 'react'
+
+import { Toast as ToastPrimitive } from '@base-ui/react/toast'
+import cx from 'classnames'
+
+import { CloseIcon } from '../../icons/close-icon'
+import { DangerIcon } from '../../icons/danger-icon'
+import { InfoIcon } from '../../icons/info-icon'
+import { SuccessIcon } from '../../icons/success-icon'
+import { WarningIcon } from '../../icons/warning-icon'
+import { Button } from '../button/button.js'
+import styles from './toast.module.css'
+import type { Position, ToastData } from './@types/toast.js'
+
+const toastIcons = {
+  success: SuccessIcon,
+  info: InfoIcon,
+  warning: WarningIcon,
+  danger: DangerIcon,
+}
+
+// Re-export Base UI toast utilities
+export const useToastManager = ToastPrimitive.useToastManager<ToastData>
+export const createToastManager = ToastPrimitive.createToastManager<ToastData>
+
+export interface ToastProviderProps {
+  children: React.ReactNode
+  timeout?: number
+  limit?: number
+  toastManager?: ReturnType<typeof createToastManager>
+}
+
+export function ToastProvider({
+  children,
+  timeout = 5000,
+  limit = 3,
+  toastManager,
+}: ToastProviderProps) {
+  return (
+    <ToastPrimitive.Provider timeout={timeout} limit={limit} toastManager={toastManager}>
+      {children}
+    </ToastPrimitive.Provider>
+  )
+}
+
+export interface ToastViewportProps {
+  position?: Position
+  className?: string
+}
+
+export function ToastViewport({ position = 'bottom-right', className }: ToastViewportProps) {
+  const { toasts } = ToastPrimitive.useToastManager<ToastData>()
+  return (
+    <ToastPrimitive.Portal>
+      <ToastPrimitive.Viewport
+        className={cx('infonomic-toast-viewport', styles.viewport, styles[position], className)}
+      >
+        {toasts.map((toast) => (
+          <ToastItem key={toast.id} toast={toast} />
+        ))}
+      </ToastPrimitive.Viewport>
+    </ToastPrimitive.Portal>
+  )
+}
+
+function ToastItem({ toast }: { toast: ToastPrimitive.Root.ToastObject<ToastData> }) {
+  const { intent = 'success', iconType = 'success', icon = true, close = true } = toast.data ?? {}
+  const eventDateRef = React.useRef(new Date())
+  const Icon = toastIcons[iconType as keyof typeof toastIcons]
+
+  const swipeDirection = React.useMemo<
+    React.ComponentProps<typeof ToastPrimitive.Root>['swipeDirection']
+  >(() => ['down', 'right'], [])
+
+  return (
+    <ToastPrimitive.Root
+      toast={toast}
+      swipeDirection={swipeDirection}
+      className={cx('infonomic-toast', styles.root)}
+    >
+      <ToastPrimitive.Content className={cx('infonomic-toast-content', styles.content)}>
+        <div className={cx('infonomic-toast-header', styles.header)}>
+          <time dateTime={eventDateRef.current.toISOString()} className="text-sm">
+            {new Intl.DateTimeFormat('default', {
+              hour12: true,
+              hour: 'numeric',
+              minute: 'numeric',
+            }).format(eventDateRef.current)}
+          </time>
+          {close && (
+            <ToastPrimitive.Close
+              render={
+                <Button
+                  intent={intent}
+                  tabIndex={0}
+                  variant="filled"
+                  aria-label="Close"
+                  className={cx('infonomic-toast-close', styles.close)}
+                  type="button"
+                />
+              }
+            >
+              <CloseIcon height="12px" width="12px" />
+            </ToastPrimitive.Close>
+          )}
+        </div>
+        <ToastPrimitive.Title className={cx('infonomic-toast-title', styles.title)}>
+          {icon && Icon && <Icon />}
+          {toast.title}
+        </ToastPrimitive.Title>
+        <ToastPrimitive.Description
+          className={cx('infonomic-toast-description', styles.description)}
+        >
+          {toast.description}
+        </ToastPrimitive.Description>
+      </ToastPrimitive.Content>
+    </ToastPrimitive.Root>
+  )
+}

package/src/components/pager/@types/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Available layout variants for the Pagination component.
+ */
+export const variant = ['default', 'classic', 'dashboard'] as const
+
+/**
+ * Layout variant of the pagination control.
+ *
+ * - `default`   — numbered page buttons with previous/next arrows (default)
+ * - `classic`   — previous/next arrows with a direct page number input
+ * - `dashboard` — compact variant optimised for data tables and dashboards
+ *
+ * @default 'default'
+ */
+export type Variant = (typeof variant)[number]

package/src/components/pager/ellipses.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { usePager } from './pagination'
+import styles from './pagination.module.css'
+
+export function Ellipses(): React.JSX.Element {
+  const { variant } = usePager()
+  return (
+    // TODO - extract ellipses component
+    <li className="flex">
+      <div className={cx(styles.ellipses, 'pagination-ellipses')}>...</div>
+    </li>
+  )
+}

package/src/components/pager/event-pager.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import type React from 'react'
+
+import { Pagination } from './pagination'
+import type { PaginationProps } from './pagination'
+
+/**
+ * A convenience event-based pager
+ */
+export function EventPager(props: PaginationProps): React.JSX.Element {
+  const { className, 'aria-label': ariaLabel, ...rest } = props
+  return (
+    <Pagination {...rest}>
+      <Pagination.Root className={className} ariaLabel={ariaLabel}>
+        <Pagination.Pager />
+      </Pagination.Root>
+    </Pagination>
+  )
+}

package/src/components/pager/first-button.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import React from 'react'
+
+import cx from 'classnames'
+
+import { ChevronLeftDoubleIcon } from '../../icons/chevron-left-double-icon.js'
+import { usePager } from './pagination'
+import styles from './pagination.module.css'
+import type { PagerButtonProps, RefType } from './pagination'
+
+export const FirstButton = ({
+  ref,
+  className,
+  disabled,
+  render,
+  children,
+  ...rest
+}: PagerButtonProps & {
+  ref?: React.RefObject<RefType>
+}) => {
+  const { variant } = usePager()
+
+  const sharedProps = {
+    className: cx(
+      styles['first-button'],
+      styles[variant],
+      styles['rounded-left'],
+      'pagination-first',
+      className
+    ),
+    disabled,
+    'data-testid': 'pagination-first',
+    title: 'First',
+    ...(disabled ? { 'aria-disabled': true } : { 'aria-label': 'First' }),
+    ...rest,
+  }
+
+  return (
+    <li className={styles['mobile-toggle']}>
+      {render ? (
+        React.cloneElement(
+          render,
+          { ref, ...sharedProps } as React.Attributes & Record<string, unknown>,
+          children
+        )
+      ) : (
+        <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
+          {children ?? <ChevronLeftDoubleIcon width="18px" height="18px" />}
+        </button>
+      )}
+    </li>
+  )
+}
+
+FirstButton.displayName = 'FirstButton'

package/src/components/pager/hooks/types/usePagination.ts

@@ -0,0 +1,80 @@
+// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js
+// https://github.com/mui/material-ui/blob/master/LICENSE
+
+import type * as React from 'react'
+
+export interface UsePaginationProps {
+  /**
+   * Number of always visible pages at the beginning and end.
+   * @default 1
+   */
+  boundaryCount?: number
+  /**
+   * The name of the component where this hook is used.
+   */
+  componentName?: string
+  /**
+   * The total number of pages.
+   * @default 1
+   */
+  count: number
+  /**
+   * The page selected by default when the component is uncontrolled.
+   * @default 1
+   */
+  defaultPage?: number
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * If `true`, hide the next-page button.
+   * @default false
+   */
+  hideNextButton?: boolean
+  /**
+   * If `true`, hide the previous-page button.
+   * @default false
+   */
+  hidePrevButton?: boolean
+  /**
+   * Callback fired when the page is changed.
+   *
+   * @param {React.ChangeEvent<unknown>} event The event source of the callback.
+   * @param {number} page The page selected.
+   */
+  onChange?: (event: React.ChangeEvent<unknown>, page: number) => void
+  /**
+   * The current page.
+   */
+  page: number
+  /**
+   * If `true`, show the first-page button.
+   * @default false
+   */
+  showFirstButton?: boolean
+  /**
+   * If `true`, show the last-page button.
+   * @default false
+   */
+  showLastButton?: boolean
+  /**
+   * Number of always visible pages before and after the current page.
+   * @default 1
+   */
+  siblingCount?: number
+}
+
+export interface UsePaginationItem {
+  onClick: React.ReactEventHandler
+  type: 'page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'
+  page: number
+  selected: boolean
+  disabled: boolean
+  'aria-current'?: string | undefined
+}
+
+export interface UsePaginationResult {
+  items: UsePaginationItem[]
+}