@byline/ui 0.9.3 → 0.10.1

package/src/components/button/combo-button.tsx

@@ -0,0 +1,89 @@
+import cx from 'classnames'
+
+import { ChevronDownIcon } from '../../icons/chevron-down-icon'
+import { Dropdown as DropdownComponent } from '../dropdown/dropdown'
+import { Button, type ButtonProps } from './button'
+import styles from './combo-button.module.css'
+
+export type ComboButtonProps = ButtonProps & {
+  options: { label: string; value: string }[]
+  onButtonClick?: () => void
+  onOptionSelect?: (value: string) => void
+  disabled?: boolean
+  buttonDisabled?: boolean
+  optionsDisabled?: boolean
+  children?: React.ReactNode
+  align?: 'start' | 'center' | 'end'
+  dataSide?: 'top' | 'bottom' | 'left' | 'right'
+  sideOffset?: number
+  className?: string
+  buttonClassName?: string
+  triggerClassName?: string
+}
+
+export const ComboButton = ({
+  options,
+  onButtonClick,
+  onOptionSelect,
+  disabled = false,
+  buttonDisabled = false,
+  optionsDisabled = false,
+  children,
+  align = 'end',
+  dataSide = 'top',
+  sideOffset = 5,
+  className,
+  buttonClassName,
+  triggerClassName,
+  intent = 'primary',
+  ...rest
+}: ComboButtonProps) => {
+  return (
+    <div
+      className={cx('combo-button-wrapper', styles['combo-button-wrapper'], className)}
+      style={{ '--ring-color': `var(--ring-${intent})` } as React.CSSProperties}
+    >
+      <Button
+        className={cx('combo-button-button', styles['combo-button-button'], buttonClassName)}
+        disabled={disabled || buttonDisabled}
+        intent={intent}
+        {...rest}
+        onClick={onButtonClick}
+      >
+        {children}
+      </Button>
+      <DropdownComponent.Root>
+        <DropdownComponent.Trigger
+          className={cx('combo-button-trigger', styles['combo-button-trigger'], triggerClassName)}
+          render={<Button disabled={disabled || optionsDisabled} intent={intent} {...rest} />}
+        >
+          <ChevronDownIcon width="16px" height="16px" />
+        </DropdownComponent.Trigger>
+
+        {options.length > 0 && (
+          <DropdownComponent.Portal>
+            <DropdownComponent.Content
+              className={cx('combo-button-options', styles['combo-button-options'])}
+              align={align}
+              data-side={dataSide}
+              sideOffset={sideOffset}
+            >
+              {options.map((option) => (
+                <DropdownComponent.Item
+                  key={option.value}
+                  onClick={() => onOptionSelect?.(option.value)}
+                >
+                  <div
+                    className={cx('combo-button-options-item', styles['combo-button-options-item'])}
+                  >
+                    {option.label}
+                  </div>
+                </DropdownComponent.Item>
+              ))}
+            </DropdownComponent.Content>
+          </DropdownComponent.Portal>
+        )}
+      </DropdownComponent.Root>
+    </div>
+  )
+}

package/src/components/button/control-buttons.module.css

@@ -0,0 +1,134 @@
+@layer byline-base, byline-utilities, byline-theme, byline-components;
+
+@layer byline-components {
+  .stop-button,
+  .play-button,
+  .directional-button,
+  :global(.infonomic-stop-button),
+  :global(.infonomic-play-button),
+  :global(.infonomic-directional-button) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    border-style: none;
+    border-radius: 100%;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    color: white;
+    background-color: var(--fill-primary-strong);
+    transition-property: all, color;
+    transition-duration: 0.3s, 1ms;
+    transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1), ease;
+    transition-delay: 0s, 0s;
+    cursor: pointer;
+  }
+
+  .directional-button span {
+    width: 40%;
+    padding-bottom: 3px;
+  }
+
+  .play-button span {
+    width: 80%;
+    height: 80%;
+  }
+
+  .stop-button span {
+    width: 50%;
+    height: 50%;
+  }
+
+  .directional-button span .icon path {
+    stroke: none;
+    fill: white;
+  }
+
+  .stop-button:hover,
+  .play-button:hover,
+  .stop-button:focus,
+  .play-button:focus,
+  .directional-button:hover,
+  .directional-button:focus {
+    color: white;
+    background-color: var(--fill-primary-strong-hover);
+    transform: translateY(-5px);
+  }
+
+  /* Sizes */
+  .xs {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    min-height: 20px;
+  }
+
+  .sm {
+    width: 30px;
+    min-width: 30px;
+    height: 30px;
+    min-height: 30px;
+  }
+
+  .md {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    min-height: 40px;
+  }
+
+  .lg {
+    width: 50px;
+    min-width: 50px;
+    height: 50px;
+    min-height: 50px;
+  }
+
+  .xl {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    min-height: 40px;
+  }
+
+  /* Up is default so no need to rotate */
+  .up:hover,
+  .up:focus {
+    transform: translateY(-5px);
+  }
+
+  .down span,
+  .down span {
+    transform: rotate(180deg);
+  }
+
+  .down:hover,
+  .down:focus {
+    transform: translateY(5px);
+  }
+
+  .left span,
+  .left span {
+    transform: rotate(-90deg);
+  }
+
+  .left:hover,
+  .left:focus {
+    transform: translateX(-5px);
+  }
+
+  .right span,
+  .right span {
+    transform: rotate(90deg);
+  }
+
+  .right:hover,
+  .right:focus {
+    transform: translateX(5px);
+  }
+
+  /* No dark theme overrides needed! 
+   * Tokens automatically switch in .dark and respect .not-dark 
+  */
+}

package/src/components/button/control-buttons.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import type React from 'react'
+
+import cx from 'classnames'
+
+import styles from './control-buttons.module.css'
+import type { Size } from './@types/button.js'
+
+type ButtonType = React.JSX.IntrinsicElements['button']
+
+interface ControlButtonProps extends ButtonType {
+  size?: Size
+  className?: string
+  onClick?: () => void
+  ref?: React.RefObject<HTMLButtonElement>
+}
+
+interface DirectionalButtonProps extends ControlButtonProps {
+  direction: 'up' | 'down' | 'left' | 'right'
+}
+
+export const DirectionalButton = ({
+  size = 'md',
+  direction,
+  className,
+  onClick,
+  ref,
+  ...rest
+}: DirectionalButtonProps) => {
+  const handleClick = (): void => {
+    if (onClick != null) {
+      onClick()
+    }
+  }
+
+  return (
+    <button
+      ref={ref}
+      {...rest}
+      onClick={handleClick}
+      type="button"
+      aria-label={direction}
+      className={cx(
+        'infonomic-control-button',
+        direction,
+        size,
+        styles['directional-button'],
+        styles[direction],
+        styles[size],
+        className
+      )}
+    >
+      <span>
+        <svg className="icon" focusable="false" aria-hidden="true" viewBox="0 0 51 32">
+          <path
+            fill="currentColor"
+            d="M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z"
+          />
+        </svg>
+      </span>
+    </button>
+  )
+}
+
+export const PlayButton = ({
+  size = 'md',
+  className,
+  onClick,
+  ref,
+  ...rest
+}: ControlButtonProps) => {
+  const handleClick = (): void => {
+    if (onClick != null) {
+      onClick()
+    }
+  }
+
+  return (
+    <button
+      ref={ref}
+      {...rest}
+      onClick={handleClick}
+      type="button"
+      aria-label="play"
+      className={cx('control-button', 'play', size, styles['play-button'], styles[size], className)}
+    >
+      <span>
+        <svg className="icon" focusable="false" aria-hidden="true" viewBox="0 0 32 32">
+          <path
+            d="M12 8L26 16L12 24V8Z"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </span>
+    </button>
+  )
+}
+
+export const StopButton = ({
+  size = 'md',
+  className,
+  onClick,
+  ref,
+  ...rest
+}: ControlButtonProps) => {
+  const handleClick = (): void => {
+    if (onClick != null) {
+      onClick()
+    }
+  }
+
+  return (
+    <button
+      ref={ref}
+      {...rest}
+      onClick={handleClick}
+      type="button"
+      aria-label="stop"
+      className={cx('control-button', 'stop', size, styles['stop-button'], styles[size], className)}
+    >
+      <span>
+        <svg className="icon" focusable="false" aria-hidden="true" viewBox="0 0 32 32">
+          <rect
+            x="4"
+            y="4"
+            width="24"
+            height="24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="3"
+          />
+        </svg>
+      </span>
+    </button>
+  )
+}

package/src/components/button/copy-button.module.css

@@ -0,0 +1,61 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .copy-button-container,
+  :global(.infonomic-copy-button-container) {
+    display: inline-block;
+  }
+
+  .copy-button svg,
+  :global(.infonomic-copy-button) svg {
+    width: 90%;
+    height: 90%;
+    display: block;
+  }
+
+  /* Sizes */
+  .xs,
+  :global(.infonomic-copy-button-xs) {
+    width: 26px;
+    height: 26px;
+    min-height: 26px;
+    padding: 0.25rem;
+  }
+
+  .sm,
+  :global(.infonomic-copy-button-sm) {
+    width: 32px;
+    height: 32px;
+    min-height: 32px;
+    padding: 0.35rem;
+  }
+
+  .md,
+  :global(.infonomic-copy-button-md) {
+    width: 38px;
+    height: 38px;
+    min-height: 38px;
+    padding: 0.45rem;
+  }
+
+  .lg,
+  :global(.infonomic-copy-button-lg) {
+    width: 46px;
+    height: 46px;
+    min-height: 46px;
+    padding: 0.55rem;
+  }
+
+  .xl,
+  :global(.infonomic-copy-button-xl) {
+    width: 54px;
+    height: 54px;
+    min-height: 54px;
+    padding: 0.65rem;
+  }
+}

package/src/components/button/copy-button.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import type React from 'react'
+import { useEffect, useState } from 'react'
+
+import cx from 'classnames'
+
+import { Tooltip } from '../tooltip/tooltip.js'
+import { Button } from './button.js'
+import styles from './copy-button.module.css'
+import type { ButtonProps } from './button.js'
+
+interface CopyButtonProps extends Omit<ButtonProps, 'children'> {
+  text: string
+  hoverText?: string
+  copiedText?: string
+  containerClassName?: string
+  svgClassName?: string
+}
+
+export function CopyButton({
+  text,
+  hoverText = 'Copy',
+  copiedText = 'Copied!',
+  variant,
+  size = 'sm',
+  intent,
+  fullWidth,
+  ripple,
+  className,
+  containerClassName,
+  svgClassName,
+  ...rest
+}: CopyButtonProps): React.JSX.Element {
+  // Track copied-feedback and hover-open as separate booleans so the
+  // tooltip's `open` prop is always a boolean. Passing `undefined` -> `true`
+  // makes Base UI's Tooltip switch from uncontrolled to controlled and emits
+  // a React warning in consumer apps.
+  const [copied, setCopied] = useState(false)
+  const [hoverOpen, setHoverOpen] = useState(false)
+
+  const handleCopied = (): void => {
+    // TODO: Permissions check?
+    if (navigator.clipboard != null && navigator.permissions != null) {
+      void navigator.clipboard.writeText(text).then(() => {
+        setCopied(true)
+      })
+    } else if (document.queryCommandSupported('copy')) {
+      const element = document.createElement('textarea')
+      element.value = text
+      document.body.appendChild(element)
+      element.select()
+      document.execCommand('copy')
+      document.body.removeChild(element)
+      setCopied(true)
+    }
+  }
+
+  useEffect(() => {
+    if (!copied) return
+    const timer = setTimeout(() => setCopied(false), 900)
+    return () => clearTimeout(timer)
+  }, [copied])
+
+  const tooltipText = copied ? copiedText : hoverText
+
+  return (
+    <div
+      className={cx(
+        'infonomic-copy-button-container',
+        styles['copy-button-container'],
+        containerClassName
+      )}
+    >
+      <Tooltip
+        side="top"
+        sideOffset={2}
+        text={tooltipText}
+        open={copied || hoverOpen}
+        onOpenChange={(next) => {
+          // While the "Copied!" feedback is showing, ignore hover-close so
+          // the tooltip stays visible for the full confirmation window.
+          if (copied && !next) return
+          setHoverOpen(next)
+        }}
+      >
+        <Button
+          variant={variant}
+          size={size}
+          intent={intent}
+          fullWidth={fullWidth}
+          ripple={ripple}
+          className={cx(
+            'infonomic-copy-button',
+            `infonomic-copy-button-${variant}`,
+            `infonomic-copy-button-${size}`,
+            `infonomic-copy-button-${intent}`,
+            styles[size],
+            className
+          )}
+          onClick={handleCopied}
+          {...rest}
+        >
+          <svg
+            className={svgClassName}
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+            aria-hidden="true"
+            viewBox="0 0 15 15"
+            strokeWidth="0"
+          >
+            <path
+              d="M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z"
+              fill="currentColor"
+              fillRule="evenodd"
+              clipRule="evenodd"
+            />
+          </svg>
+        </Button>
+      </Tooltip>
+    </div>
+  )
+}

package/src/components/button/icon-button.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import cx from 'classnames'
+
+import { Button } from './button'
+import styles from './button.module.css'
+import type { ButtonProps } from './button.js'
+
+type IconButtonProps = ButtonProps & {
+  square?: boolean
+  round?: boolean
+}
+
+export const IconButton = ({
+  square = false,
+  round = true,
+  variant,
+  size = 'sm',
+  intent,
+  className,
+  children,
+  ...rest
+}: IconButtonProps) => {
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      intent={intent}
+      className={cx(
+        'icon-button',
+        variant,
+        size,
+        intent,
+        { [styles.square]: square },
+        { [styles.round]: !square && round },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </Button>
+  )
+}

package/src/components/button/index.ts

@@ -0,0 +1,5 @@
+export * from './button'
+export * from './button-group'
+export * from './control-buttons'
+export * from './copy-button'
+export * from './icon-button'

package/src/components/card/card.module.css

@@ -0,0 +1,80 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .card,
+  :global(.infonomic-card) {
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    width: 100%;
+    max-width: 100%;
+    color: var(--foreground);
+    background: var(--surface-panel);
+    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);
+  }
+
+  .card-hover,
+  :global(.infonomic-card-hover) {
+    transition: background 0.2s ease-in-out;
+  }
+
+  .card-hover:hover,
+  :global(.infonomic-card-hover):hover {
+    background: oklch(from var(--theme-50) 1 0.03 h);
+  }
+
+  :global(.dark),
+  :global([data-theme="dark"]) {
+    .card-hover:hover,
+    :global(.infonomic-card-hover):hover {
+      background: oklch(from var(--canvas-800) 0.2 c h);
+    }
+  }
+
+  .card-header,
+  :global(.infonomic-card-header) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+  }
+
+  .card-title,
+  :global(.infonomic-card-title) {
+    color: var(--headings);
+    font-size: 1.8rem;
+    font-weight: bold;
+    line-height: 1;
+    letter-spacing: -0.015em;
+  }
+
+  .card-description,
+  :global(.infonomic-card-description) {
+    font-size: 0.875rem;
+    color: var(--muted);
+  }
+
+  .card-content,
+  :global(.infonomic-card-content) {
+    flex: 1;
+    padding: 1rem;
+    padding-top: 0;
+  }
+
+  .card-footer,
+  :global(.infonomic-card-footer) {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    padding-top: 0;
+  }
+}