@byline/ui 0.9.3 → 0.10.1

package/src/components/hamburger/hamburger.module.css

@@ -0,0 +1,141 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .hamburger,
+  :global(.infonomic-hamburger) {
+    --hamburger-color: currentColor;
+    --hamburger-focus-ring-color: currentColor;
+
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    z-index: 200;
+    width: 42px;
+    height: 34px;
+    overflow: hidden;
+    cursor: pointer;
+    transition-property: opacity, filter;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    border-radius: var(--border-radius-sm);
+  }
+
+  .hamburger:focus-visible,
+  :global(.infonomic-hamburger):focus-visible {
+    outline: 2px solid var(--hamburger-focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  /* Box container for the bars */
+  .box,
+  :global(.infonomic-hamburger-box) {
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: relative;
+    pointer-events: none;
+  }
+
+  /* Inner bar + ::before/::after pseudo-elements form the 3 lines */
+  .inner,
+  :global(.infonomic-hamburger-inner) {
+    display: block;
+    top: 50%;
+    margin-top: -1px;
+    transition-duration: 0.075s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  .inner,
+  .inner::before,
+  .inner::after,
+  :global(.infonomic-hamburger-inner),
+  :global(.infonomic-hamburger-inner)::before,
+  :global(.infonomic-hamburger-inner)::after {
+    position: absolute;
+    width: 24px;
+    height: 2px;
+    border-radius: 0;
+    background-color: var(--hamburger-color);
+    transition-property: transform;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+  }
+
+  .inner::before,
+  .inner::after,
+  :global(.infonomic-hamburger-inner)::before,
+  :global(.infonomic-hamburger-inner)::after {
+    content: "";
+    display: block;
+  }
+
+  .inner::before,
+  :global(.infonomic-hamburger-inner)::before {
+    top: -8px;
+    transition:
+      top 0.075s 0.12s ease,
+      opacity 0.075s ease;
+  }
+
+  .inner::after,
+  :global(.infonomic-hamburger-inner)::after {
+    bottom: -8px;
+    transition:
+      bottom 0.075s 0.12s ease,
+      transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  /* Open state */
+  .open .inner,
+  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner) {
+    transform: rotate(45deg);
+    transition-delay: 0.12s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  .open .inner::before,
+  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner)::before {
+    top: 0;
+    opacity: 0;
+    transition:
+      top 0.075s ease,
+      opacity 0.075s 0.12s ease;
+  }
+
+  .open .inner::after,
+  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner)::after {
+    bottom: 0;
+    transform: rotate(-90deg);
+    transition:
+      bottom 0.075s ease,
+      transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  /* Color scheme: onDark (white bars for dark backgrounds) */
+  .onDark,
+  :global(.infonomic-hamburger-on-dark) {
+    --hamburger-color: white;
+    --hamburger-focus-ring-color: rgba(255, 255, 255, 0.7);
+  }
+
+  /* Color scheme: onLight (dark bars for light backgrounds) */
+  .onLight,
+  :global(.infonomic-hamburger-on-light) {
+    --hamburger-color: var(--foreground, #1a1a1a);
+    --hamburger-focus-ring-color: var(--foreground, #1a1a1a);
+  }
+}

package/src/components/hamburger/hamburger.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import type React from 'react'
+import { useCallback, useEffect } from 'react'
+
+import cx from 'classnames'
+
+import styles from './hamburger.module.css'
+
+type ColorScheme = 'auto' | 'onDark' | 'onLight'
+
+export interface HamburgerProps {
+  className?: string
+  colorScheme?: ColorScheme
+  open?: boolean
+  onChange?: (open: boolean) => void
+  ariaLabel?: string
+  ariaControls?: string
+}
+
+export function Hamburger({
+  className,
+  colorScheme = 'auto',
+  open = false,
+  onChange,
+  ariaLabel = 'Toggle menu',
+  ariaControls,
+  ...other
+}: HamburgerProps): React.JSX.Element {
+  const handleClick = (event: React.MouseEvent): void => {
+    event.stopPropagation()
+    onChange?.(!open)
+  }
+
+  const handleEscapeKey = useCallback(
+    (event: KeyboardEvent): void => {
+      if (event.key === 'Escape' && open) {
+        onChange?.(false)
+      }
+    },
+    [open, onChange]
+  )
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleEscapeKey, false)
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey, false)
+    }
+  }, [handleEscapeKey])
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className={cx(
+        'infonomic-hamburger',
+        styles.hamburger,
+        {
+          [styles.open]: open,
+          [styles.onDark]: colorScheme === 'onDark',
+          [styles.onLight]: colorScheme === 'onLight',
+        },
+        className
+      )}
+      aria-label={ariaLabel}
+      aria-controls={ariaControls}
+      aria-expanded={open}
+      {...other}
+    >
+      <span className={cx('infonomic-hamburger-box', styles.box)} aria-hidden="true">
+        <span className={cx('infonomic-hamburger-inner', styles.inner)} />
+      </span>
+    </button>
+  )
+}

package/src/components/inputs/@types/autocomplete.ts

@@ -0,0 +1,39 @@
+import type { Intent as t } from '../../@types/shared.js'
+
+/**
+ * Available visual style variants for the Autocomplete input.
+ */
+export const variant = ['outlined', 'filled', 'underlined'] as const
+
+/**
+ * Visual style variant of the autocomplete input field.
+ *
+ * - `outlined`   — full border on all sides with a transparent background (default)
+ * - `filled`     — tinted background
+ * - `underlined` — bottom border only, no background (minimal style)
+ *
+ * @default 'outlined'
+ */
+export type Variant = (typeof variant)[number]
+
+/**
+ * Available size tokens for the Autocomplete component.
+ */
+export const size = ['sm', 'md', 'lg'] as const
+
+/**
+ * Visual size of the autocomplete component.
+ *
+ * - `sm` — compact, suitable for inline forms or dense layouts
+ * - `md` — standard form size (default)
+ * - `lg` — large, prominent input
+ *
+ * @default 'md'
+ */
+export type Size = (typeof size)[number]
+
+/**
+ * Semantic color intent applied to the autocomplete border and focus ring.
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t

package/src/components/inputs/@types/checkbox.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { ReactNode } from 'react'
+
+// generic types
+import type { Intent as t } from '../../@types/shared.js'
+
+/**
+ * This file contains the types and prop-types for the Checkbox and CheckboxGroup components.
+ */
+
+// typescript types
+
+/**
+ * Available visual style variants for the Checkbox component.
+ */
+export const variant = ['outlined', 'filled'] as const
+
+/**
+ * Visual style variant of the checkbox.
+ *
+ * - `outlined` — hollow checkbox with an intent-colored border; fills on check (default)
+ * - `filled`   — always has a tinted background, more prominent in forms
+ *
+ * @default 'outlined'
+ */
+export type Variant = (typeof variant)[number]
+
+/**
+ * Available size tokens for checkboxes.
+ */
+export const size = ['sm', 'md', 'lg'] as const
+
+/**
+ * Visual size of the checkbox.
+ *
+ * - `sm` — small, for dense lists
+ * - `md` — standard size (default)
+ * - `lg` — large, for touch-friendly or prominent forms
+ *
+ * @default 'md'
+ */
+export type Size = (typeof size)[number]
+
+/**
+ * Semantic color intent applied to the checkbox border and checked state.
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t
+export type ClassName = string
+export type Children = ReactNode

package/src/components/inputs/@types/input.ts

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { ReactNode } from 'react'
+
+// generic types
+import type { Intent as t } from '../../@types/shared.js'
+
+/**
+ * This file contains the types and prop-types for the Input and related form components.
+ */
+
+// typescript types
+
+/**
+ * Available visual style variants for the Input component.
+ */
+export const variant = ['outlined', 'filled', 'underlined'] as const
+
+/**
+ * Visual style variant of the input field.
+ *
+ * - `outlined`   — full border on all sides with a transparent background (default)
+ * - `filled`     — tinted background with only a bottom border
+ * - `underlined` — bottom border only, no background (minimal style)
+ *
+ * @default 'outlined'
+ */
+export type Variant = (typeof variant)[number]
+
+/**
+ * Available size tokens for form inputs.
+ */
+export const size = ['sm', 'md', 'lg'] as const
+
+/**
+ * Visual size of the input field.
+ *
+ * - `sm` — compact, suitable for inline forms or dense layouts
+ * - `md` — standard form size (default)
+ * - `lg` — large, prominent or hero input
+ *
+ * @default 'md'
+ */
+export type Size = (typeof size)[number]
+
+/**
+ * Semantic color intent applied to the input border and focus ring.
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t
+export type ClassName = string
+export type Children = ReactNode