@byline/ui 0.9.3 → 0.10.1

package/src/components/chips/chip.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import type React from 'react'
+
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import cx from 'classnames'
+
+import { CheckIcon } from '../../icons/check-icon.js'
+import { CloseIcon } from '../../icons/close-icon.js'
+import styles from './chip.module.css'
+import type { ChipIntent, ChipSize, ChipVariant } from './@types/chip.js'
+
+type ToggleEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+type RemoveEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+
+export type ChipProps = Omit<useRender.ComponentProps<'button'>, 'onToggle'> & {
+  variant?: ChipVariant
+  intent?: ChipIntent
+  size?: ChipSize
+  selected?: boolean
+  disabled?: boolean
+  startIcon?: React.ReactNode
+  endIcon?: React.ReactNode
+  selectedIcon?: React.ReactNode
+  removeLabel?: string
+  onToggle?: (selected: boolean, event: ToggleEvent) => void
+  onRemove?: (event: RemoveEvent) => void
+  className?: string
+  ref?: React.Ref<HTMLButtonElement>
+} & Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'>
+
+export const Chip = ({
+  variant = 'assist',
+  intent = 'primary',
+  size = 'md',
+  selected = false,
+  disabled = false,
+  startIcon,
+  endIcon,
+  selectedIcon,
+  removeLabel = 'Remove chip',
+  onToggle,
+  onRemove,
+  className,
+  children,
+  render,
+  ref,
+  ...rest
+}: ChipProps) => {
+  const { onClick, onKeyDown, role, tabIndex, ...restProps } = rest
+  const isCustomElement = render != null
+  const isSelectable = variant === 'selectable' || variant === 'selectable-removable'
+  const isRemovable = variant === 'removable' || variant === 'selectable-removable'
+  const isSelected = Boolean(selected)
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (disabled) {
+      event.preventDefault()
+      return
+    }
+
+    if (onClick) {
+      ;(onClick as React.MouseEventHandler<HTMLElement>)(event)
+    }
+
+    if (isSelectable && onToggle) {
+      onToggle(!isSelected, event)
+    }
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (disabled) {
+      return
+    }
+
+    if ((event.key === 'Enter' || event.key === ' ') && isCustomElement) {
+      event.preventDefault()
+      if (onClick) {
+        ;(onClick as React.MouseEventHandler<HTMLElement>)(
+          event as unknown as React.MouseEvent<HTMLElement>
+        )
+      }
+      if (isSelectable && onToggle) {
+        onToggle(!isSelected, event)
+      }
+    }
+
+    if ((event.key === 'Backspace' || event.key === 'Delete') && isRemovable && onRemove) {
+      event.preventDefault()
+      onRemove(event)
+    }
+
+    if (onKeyDown) {
+      onKeyDown(event)
+    }
+  }
+
+  const handleRemoveClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (disabled) {
+      return
+    }
+    event.stopPropagation()
+    if (onRemove) {
+      onRemove(event)
+    }
+  }
+
+  const handleRemoveKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (disabled) {
+      return
+    }
+
+    if (
+      event.key === 'Enter' ||
+      event.key === ' ' ||
+      event.key === 'Backspace' ||
+      event.key === 'Delete'
+    ) {
+      event.preventDefault()
+      event.stopPropagation()
+      if (onRemove) {
+        onRemove(event)
+      }
+    }
+  }
+
+  const leadingIcon =
+    startIcon ??
+    (isSelectable && isSelected ? (selectedIcon ?? <CheckIcon className={styles.icon} />) : null)
+
+  const trailingIcon = isRemovable ? (
+    <button
+      type="button"
+      tabIndex={disabled ? -1 : 0}
+      disabled={disabled}
+      aria-label={removeLabel}
+      onClick={handleRemoveClick}
+      onKeyDown={handleRemoveKeyDown}
+    >
+      <CloseIcon className={cx('infonomic-chip-close-icon', styles.icon, styles['close-icon'])} />
+    </button>
+  ) : (
+    endIcon
+  )
+
+  const appliedVariant = isSelected ? 'filled' : 'outlined'
+
+  const defaultProps: Record<string, unknown> = {
+    type: isCustomElement ? undefined : 'button',
+    role: role ?? (isCustomElement ? 'button' : undefined),
+    tabIndex: disabled ? -1 : (tabIndex ?? 0),
+    'aria-disabled': disabled || undefined,
+    'aria-pressed': isSelectable ? isSelected : undefined,
+    'aria-selected': isSelectable ? isSelected : undefined,
+    className: cx(
+      'infonomic-chip',
+      `infonomic-chip-${variant}`,
+      `infonomic-chip-${intent}`,
+      `infonomic-chip-${size}`,
+      { selected: isSelected, disabled, removable: isRemovable },
+      styles.chip,
+      styles[appliedVariant],
+      styles[intent],
+      styles[size],
+      className
+    ),
+    disabled: isCustomElement ? undefined : disabled,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    children: (
+      <>
+        {leadingIcon != null && (
+          <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>
+            {leadingIcon}
+          </span>
+        )}
+        <span className={cx('infonomic-chip-label', styles.label)}>{children}</span>
+        {trailingIcon != null && (
+          <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>
+            {trailingIcon}
+          </span>
+        )}
+      </>
+    ),
+  }
+
+  const element = useRender({
+    defaultTagName: 'button',
+    render,
+    ref,
+    props: mergeProps<'button'>(defaultProps, restProps),
+  })
+
+  return element
+}
+
+Chip.displayName = 'Chip'

package/src/components/chips/index.ts

@@ -0,0 +1,2 @@
+export * from './@types/chip.js'
+export * from './chip.js'

package/src/components/container/container.module.css

@@ -0,0 +1,41 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .container,
+  :global(.infonomic-container) {
+    width: 100%;
+    padding: 0 1rem;
+    margin: 0 auto;
+    max-width: 60rem;
+  }
+
+  /* Shy edges */
+  /* Large */
+  @media (min-width: 66rem) {
+    .container,
+    :global(.infonomic-container) {
+      max-width: 64rem;
+    }
+  }
+
+  /* X-Large */
+  @media (min-width: 77rem) {
+    .container,
+    :global(.infonomic-container) {
+      max-width: 74.375rem;
+    }
+  }
+
+  /* 2X-Large */
+  @media (min-width: 94rem) {
+    .container,
+    :global(.infonomic-container) {
+      max-width: 87.5rem;
+    }
+  }
+}

package/src/components/container/container.tsx

@@ -0,0 +1,23 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import styles from './container.module.css'
+
+type ContainerIntrinsicProps = React.JSX.IntrinsicElements['div']
+export interface ContainerProps extends ContainerIntrinsicProps {}
+
+export const Container = function Container({
+  ref,
+  className,
+  children,
+  ...rest
+}: ContainerProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}): React.JSX.Element {
+  return (
+    <div ref={ref} {...rest} className={cx('infonomic-container', styles.container, className)}>
+      {children}
+    </div>
+  )
+}

package/src/components/dropdown/dropdown.module.css

@@ -0,0 +1,128 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .dropdown-content,
+  .dropdown-subcontent,
+  :global(.infonomic-dropdown-content),
+  :global(.infonomic-dropdown-subcontent) {
+    z-index: 20;
+    background-color: var(--surface-panel-elevated);
+    padding: 4px;
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform, opacity;
+    border-width: var(--border-width-thin);
+    border-color: var(--surface-panel-border);
+    border-style: var(--border-style-solid);
+    border-radius: var(--border-radius-sm);
+    box-shadow: var(--shadow-sm);
+
+    &[data-side="top"] {
+      animation-name: slideDownAndFade;
+    }
+
+    &[data-side="right"] {
+      animation-name: slideLeftAndFade;
+    }
+
+    &[data-side="bottom"] {
+      animation-name: slideUpAndFade;
+    }
+
+    &[data-side="left"] {
+      animation-name: slideRightAndFade;
+    }
+  }
+
+  .dropdown-item,
+  :global(.infonomic-dropdown-item) {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-1);
+    width: 100%;
+    padding: 5px 2px;
+    font-size: var(--font-size-sm);
+    color: var(--surface-item-text);
+    background-color: var(--surface-item);
+    transition: background-color 0.2s;
+    cursor: default;
+    outline: none;
+    border-radius: var(--border-radius-sm);
+  }
+
+  /* Updated to also cover data-highlighted presence */
+  .dropdown-item:hover,
+  .dropdown-item:focus,
+  .dropdown-item[data-highlighted],
+  :global(.infonomic-dropdown-item):hover,
+  :global(.infonomic-dropdown-item):focus,
+  :global(.infonomic-dropdown-item)[data-highlighted] {
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
+  }
+
+  .dropdown-separator,
+  :global(.infonomic-dropdown-separator) {
+    width: 90%;
+    background-color: var(--surface-panel-border);
+    margin: var(--spacing-4) 0;
+    border-top-width: var(--border-width-thin);
+    border-top-color: var(--surface-panel-border);
+    border-top-style: var(--border-style-solid);
+  }
+
+  /* Dark mode handled by surface tokens in theme layer */
+
+  @keyframes slideUpAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideRightAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideDownAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideLeftAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}

package/src/components/dropdown/dropdown.tsx

@@ -0,0 +1,225 @@
+'use client'
+
+import type React from 'react'
+
+import { Menu } from '@base-ui/react/menu'
+import cx from 'classnames'
+
+import styles from './dropdown.module.css'
+
+function Root({ children, ...rest }: React.ComponentProps<typeof Menu.Root>): React.JSX.Element {
+  return <Menu.Root {...rest}>{children}</Menu.Root>
+}
+
+const Trigger = ({
+  ref,
+  className,
+  children,
+  ...rest
+}: React.ComponentProps<typeof Menu.Trigger> & {
+  ref?: React.RefObject<React.ComponentRef<'button'>>
+}): React.JSX.Element => {
+  return (
+    <Menu.Trigger className={cx('infonomic-dropdown-trigger', className)} ref={ref} {...rest}>
+      {children}
+    </Menu.Trigger>
+  )
+}
+Trigger.displayName = 'Trigger'
+
+function Portal({
+  children,
+  ...rest
+}: React.ComponentProps<typeof Menu.Portal>): React.JSX.Element {
+  return <Menu.Portal {...rest}>{children}</Menu.Portal>
+}
+
+const Content = ({
+  ref,
+  className,
+  children,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionPadding,
+  ...rest
+}: {
+  ref?: React.RefObject<React.ComponentRef<'div'>>
+  className?: string
+  children?: React.ReactNode
+  side?: React.ComponentProps<typeof Menu.Positioner>['side']
+  sideOffset?: React.ComponentProps<typeof Menu.Positioner>['sideOffset']
+  align?: React.ComponentProps<typeof Menu.Positioner>['align']
+  alignOffset?: React.ComponentProps<typeof Menu.Positioner>['alignOffset']
+  collisionPadding?: React.ComponentProps<typeof Menu.Positioner>['collisionPadding']
+} & Omit<React.ComponentProps<typeof Menu.Popup>, 'className'>): React.JSX.Element => {
+  return (
+    <Menu.Positioner
+      side={side}
+      sideOffset={sideOffset}
+      align={align}
+      alignOffset={alignOffset}
+      collisionPadding={collisionPadding}
+    >
+      <Menu.Popup
+        ref={ref}
+        className={cx('infonomic-dropdown-content', styles['dropdown-content'], className)}
+        {...rest}
+      >
+        {children}
+      </Menu.Popup>
+    </Menu.Positioner>
+  )
+}
+Content.displayName = 'Content'
+
+const Group = ({
+  ref,
+  className,
+  children,
+  ...rest
+}: React.ComponentProps<typeof Menu.Group> & {
+  ref?: React.RefObject<React.ComponentRef<'div'>>
+}): React.JSX.Element => {
+  return (
+    <Menu.Group ref={ref} className={cx('infonomic-dropdown-group', className)} {...rest}>
+      {children}
+    </Menu.Group>
+  )
+}
+Group.displayName = 'Group'
+
+const Item = ({
+  ref,
+  className,
+  children,
+  ...rest
+}: React.ComponentProps<typeof Menu.Item> & {
+  ref?: React.RefObject<React.ComponentRef<'div'>>
+}): React.JSX.Element => {
+  return (
+    <Menu.Item
+      ref={ref}
+      className={cx('infonomic-dropdown-item', styles['dropdown-item'], className)}
+      {...rest}
+    >
+      {children}
+    </Menu.Item>
+  )
+}
+Item.displayName = 'Item'
+
+const Label = ({
+  ref,
+  className,
+  children,
+  ...rest
+}: React.ComponentProps<typeof Menu.GroupLabel> & {
+  ref?: React.RefObject<React.ComponentRef<'div'>>
+}): React.JSX.Element => {
+  return (
+    <Menu.GroupLabel ref={ref} className={cx('infonomic-dropdown-label', className)} {...rest}>
+      {children}
+    </Menu.GroupLabel>
+  )
+}
+Label.displayName = 'Label'
+
+const Separator = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof Menu.Separator> & {
+  ref?: React.RefObject<React.ComponentRef<'div'>>
+}): React.JSX.Element => {
+  return (
+    <Menu.Separator
+      ref={ref}
+      className={cx('infonomic-dropdown-separator', styles['dropdown-separator'], className)}
+      {...props}
+    />
+  )
+}
+Separator.displayName = 'Separator'
+
+function Sub({
+  children,
+  ...rest
+}: React.ComponentProps<typeof Menu.SubmenuRoot>): React.JSX.Element {
+  return <Menu.SubmenuRoot {...rest}>{children}</Menu.SubmenuRoot>
+}
+
+const SubContent = ({
+  ref,
+  className,
+  children,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionPadding,
+  ...rest
+}: {
+  ref?: React.RefObject<React.ComponentRef<'div'>>
+  className?: string
+  children?: React.ReactNode
+  side?: React.ComponentProps<typeof Menu.Positioner>['side']
+  sideOffset?: React.ComponentProps<typeof Menu.Positioner>['sideOffset']
+  align?: React.ComponentProps<typeof Menu.Positioner>['align']
+  alignOffset?: React.ComponentProps<typeof Menu.Positioner>['alignOffset']
+  collisionPadding?: React.ComponentProps<typeof Menu.Positioner>['collisionPadding']
+} & Omit<React.ComponentProps<typeof Menu.Popup>, 'className'>): React.JSX.Element => {
+  return (
+    <Menu.Positioner
+      side={side}
+      sideOffset={sideOffset}
+      align={align}
+      alignOffset={alignOffset}
+      collisionPadding={collisionPadding}
+    >
+      <Menu.Popup
+        ref={ref}
+        className={cx('infonomic-dropdown-subcontent', styles['dropdown-subcontent'], className)}
+        {...rest}
+      >
+        {children}
+      </Menu.Popup>
+    </Menu.Positioner>
+  )
+}
+SubContent.displayName = 'SubContent'
+
+const SubTrigger = ({
+  ref,
+  className,
+  children,
+  ...rest
+}: React.ComponentProps<typeof Menu.SubmenuTrigger> & {
+  ref?: React.RefObject<React.ComponentRef<'div'>>
+}): React.JSX.Element => {
+  return (
+    <Menu.SubmenuTrigger
+      ref={ref}
+      className={cx('infonomic-dropdown-subtrigger', className)}
+      {...rest}
+    >
+      {children}
+    </Menu.SubmenuTrigger>
+  )
+}
+SubTrigger.displayName = 'SubTrigger'
+
+export const Dropdown = {
+  Root,
+  Trigger,
+  Portal,
+  Content,
+  Group,
+  Item,
+  Label,
+  Separator,
+  Sub,
+  SubContent,
+  SubTrigger,
+}