@byline/ui 0.9.3 → 0.10.1

package/src/components/shimmer/shimmer.tsx

@@ -0,0 +1,71 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import styles from './shimmer.module.css'
+
+interface ShimmerProps {
+  className?: string
+  width?: string | number
+  height?: string | number
+  borderRadius?: string
+  variant?: 'text' | 'rectangular' | 'circular'
+  lines?: number
+  children?: React.ReactNode
+}
+
+export function Shimmer({
+  className,
+  width = '100%',
+  height = '1rem',
+  borderRadius,
+  variant = 'rectangular',
+  lines = 1,
+  children,
+  ...other
+}: ShimmerProps): React.JSX.Element {
+  const shimmerStyle = {
+    width: typeof width === 'number' ? `${width}px` : width,
+    height: typeof height === 'number' ? `${height}px` : height,
+    borderRadius: borderRadius,
+  }
+
+  const getVariantClass = () => {
+    switch (variant) {
+      case 'text':
+        return styles.text
+      case 'circular':
+        return styles.circular
+      default:
+        return styles.rectangular
+    }
+  }
+
+  if (variant === 'text' && lines > 1) {
+    return (
+      <div className={cx(styles.shimmerContainer, className)} {...other}>
+        {Array.from({ length: lines }, (_, index) => (
+          <div
+            key={`shimmer-line-${index}`}
+            className={cx(styles.shimmer, styles.text)}
+            style={{
+              ...shimmerStyle,
+              width: index === lines - 1 ? '75%' : '100%',
+              marginBottom: index === lines - 1 ? 0 : '0.5rem',
+            }}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cx(styles.shimmer, getVariantClass(), className)}
+      style={shimmerStyle}
+      {...other}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/table/table.module.css

@@ -0,0 +1,120 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+/* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
+@layer byline-components {
+  /* 'table--container break-normal overflow-hidden relative shadow-md rounded-md my-[16px] dark:border dark:border-canvas-700', */
+  .table-container,
+  :global(.infonomic-table-container) {
+    display: block;
+    overflow: hidden;
+    word-break: normal;
+    position: relative;
+    box-shadow: var(--shadow-sm);
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--border-color);
+  }
+
+  .table-scroller,
+  :global(.infonomic-table-scroller) {
+    overflow-x: auto;
+    max-width: calc(100vw - 32px);
+  }
+
+  .table,
+  :global(.infonomic-table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0;
+    font-size: var(--font-size-sm);
+    text-align: left;
+  }
+
+  /* 'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', */
+  .table-header,
+  :global(.infonomic-table-header) {
+    font-size: var(--font-size-sm);
+    /* text-transform: uppercase; */
+    background-color: var(--canvas-50);
+  }
+
+  /* 'border-b border-solid border-canvas-200 bg-white hover:bg-canvas-100/50 dark:border-canvas-700/60 dark:bg-canvas-800/50 dark:hover:bg-canvas-700/50', */
+  .table-row,
+  :global(.infonomic-table-row) {
+    border-bottom: 1px solid var(--canvas-50);
+    background-color: white;
+  }
+
+  .table-row:hover,
+  :global(.infonomic-table-row:hover) {
+    background-color: var(--canvas-50);
+  }
+
+  /* 'whitespace-nowrap px-2 py-4 text-sm text-gray-700 uppercase bg-canvas-100/50 dark:bg-canvas-800/50 dark:text-gray-200', */
+  .table-heading-cell,
+  :global(.infonomic-table-heading-cell) {
+    white-space: nowrap;
+    padding: var(--spacing-8) var(--spacing-8);
+    font-size: 0.975rem;
+    /* 15.6px */
+    /* text-transform: uppercase; */
+    background-color: var(--canvas-50);
+  }
+
+  /* not-prose px-2 py-2 text-sm [&_a]:underline */
+  .table-cell,
+  :global(.infonomic-table-cell) {
+    padding: var(--spacing-8);
+    font-size: var(--font-size-sm);
+
+    & a {
+      text-decoration: underline;
+    }
+  }
+
+  /* 'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', */
+  .table-footer,
+  :global(.infonomic-table-footer) {
+    font-size: var(--font-size-sm);
+    /* text-transform: uppercase; */
+    background-color: var(--canvas-100);
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark),
+  :global([data-theme="dark"]) {
+    .table-header,
+    :global(.infonomic-table-header) {
+      background-color: var(--canvas-700);
+    }
+
+    .table-row,
+    :global(.infonomic-table-row) {
+      border-bottom: 1px solid var(--canvas-700);
+      background-color: var(--canvas-800);
+    }
+
+    .table-row:hover,
+    :global(.infonomic-table-row:hover) {
+      background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
+    }
+
+    .table-heading-cell,
+    :global(.infonomic-table-heading-cell) {
+      background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
+    }
+
+    .table-footer,
+    :global(.infonomic-table-footer) {
+      background-color: var(--canvas-800);
+    }
+  }
+}

package/src/components/table/table.tsx

@@ -0,0 +1,171 @@
+import type * as React from 'react'
+
+import cx from 'classnames'
+
+import styles from './table.module.css'
+
+export type TableProps = React.JSX.IntrinsicElements['table']
+
+function Table({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableProps & {
+  ref?: React.RefObject<HTMLTableElement>
+}): React.JSX.Element {
+  const classes = cx(styles.table, 'infonomic-table', className)
+
+  return (
+    <table ref={ref} className={classes} {...rest}>
+      {children}
+    </table>
+  )
+}
+
+export type TableContainerProps = React.JSX.IntrinsicElements['div']
+
+function Container({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableContainerProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}) {
+  const classes = cx(styles['table-container'], 'infonomic-table-container', className)
+  return (
+    <div ref={ref} className={classes} {...rest}>
+      <div className={cx('infonomic-table-scroller', styles['table-scroller'])}>{children}</div>
+    </div>
+  )
+}
+
+export type TableBodyProps = React.JSX.IntrinsicElements['tbody']
+
+function Body({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableBodyProps & {
+  ref?: React.RefObject<HTMLTableSectionElement>
+}): React.JSX.Element {
+  return (
+    <tbody ref={ref} className={cx('infonomic-table-body', className)} {...rest}>
+      {children}
+    </tbody>
+  )
+}
+
+export type TableHeaderProps = React.JSX.IntrinsicElements['thead']
+
+function Header({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableHeaderProps & {
+  ref?: React.RefObject<HTMLTableSectionElement>
+}): React.JSX.Element {
+  const classes = cx(styles['table-header'], 'infonomic-table-header', className)
+
+  return (
+    <thead ref={ref} className={classes} {...rest}>
+      {children}
+    </thead>
+  )
+}
+
+export type TableRowProps = React.JSX.IntrinsicElements['tr']
+
+function Row({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableRowProps & {
+  ref?: React.RefObject<HTMLTableRowElement>
+}): React.JSX.Element {
+  const classes = cx(styles['table-row'], 'infonomic-table-row', className)
+
+  return (
+    <tr ref={ref} className={classes} {...rest}>
+      {children}
+    </tr>
+  )
+}
+
+export type TableHeadingCellProps = React.JSX.IntrinsicElements['th']
+
+function HeadingCell({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableHeadingCellProps & {
+  ref?: React.RefObject<HTMLTableCellElement>
+}): React.JSX.Element {
+  const classes = cx(
+    styles['table-heading-cell'],
+    'infonomic-table-heading-cell',
+    'not-prose',
+    className
+  )
+  return (
+    <th ref={ref} className={classes} {...rest}>
+      {children}
+    </th>
+  )
+}
+
+export type TableCellProps = React.JSX.IntrinsicElements['td']
+
+function Cell({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableCellProps & {
+  ref?: React.RefObject<HTMLTableCellElement>
+}): React.JSX.Element {
+  const classes = cx(styles['table-cell'], 'infonomic-table-cell', className)
+
+  return (
+    <td ref={ref} className={classes} {...rest}>
+      {children}
+    </td>
+  )
+}
+
+export type TableFooterProps = React.JSX.IntrinsicElements['tfoot']
+
+function Footer({
+  ref,
+  className,
+  children,
+  ...rest
+}: TableFooterProps & {
+  ref?: React.RefObject<HTMLTableSectionElement>
+}): React.JSX.Element {
+  const classes = cx(
+    'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400',
+    className
+  )
+
+  return (
+    <tfoot ref={ref} className={classes} {...rest}>
+      {children}
+    </tfoot>
+  )
+}
+
+Table.Container = Container
+Table.Body = Body
+Table.Header = Header
+Table.Row = Row
+Table.HeadingCell = HeadingCell
+Table.Cell = Cell
+Table.Footer = Footer
+
+export { Table }

package/src/components/tabs/tabs.module.css

@@ -0,0 +1,64 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .tabs-root,
+  :global(.infonomic-tabs-root) {
+    display: flex;
+    padding: var(--spacing-8);
+    flex-direction: column;
+    gap: var(--spacing-4);
+    border-radius: var(--border-radius-md);
+    border: 1px solid var(--border-color);
+  }
+
+  .tabs-list,
+  :global(.infonomic-tabs-list) {
+    display: flex;
+    width: 100%;
+    gap: var(--gap-2);
+    align-items: center;
+    border-radius: var(--border-radius-md);
+    padding: var(--spacing-4);
+    border: 1px solid var(--border-color);
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .tabs-trigger,
+  :global(.infonomic-tabs-trigger) {
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    width: 100%;
+
+    &:focus {
+      position: relative;
+    }
+  }
+
+  .tabs-content,
+  :global(.infonomic-tabs-content) {
+    margin-top: var(--spacing-8);
+    padding: 6px;
+    outline: none;
+
+    &[data-hidden] {
+      display: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import type * as React from 'react'
+
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
+import cx from 'classnames'
+
+import styles from './tabs.module.css'
+
+const Tabs = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root> & {
+  ref?: React.RefObject<HTMLDivElement>
+}) => (
+  <TabsPrimitive.Root
+    ref={ref}
+    className={cx(styles['tabs-root'], 'infonomic-tabs-root', className)}
+    {...props}
+  />
+)
+Tabs.displayName = 'Tabs'
+
+const TabsList = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & {
+  ref?: React.RefObject<HTMLDivElement>
+}) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cx(styles['tabs-list'], 'infonomic-tabs-list', className)}
+    {...props}
+  />
+)
+TabsList.displayName = 'TabsList'
+
+const TabsTrigger = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Tab> & {
+  ref?: React.RefObject<HTMLButtonElement>
+}) => (
+  <TabsPrimitive.Tab
+    ref={ref}
+    className={cx(styles['tabs-trigger'], 'infonomic-tabs-trigger', className)}
+    {...props}
+  />
+)
+TabsTrigger.displayName = 'TabsTrigger'
+
+const TabsContent = ({
+  ref,
+  className,
+  keepMounted = true,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Panel> & {
+  ref?: React.RefObject<HTMLDivElement>
+}) => (
+  <TabsPrimitive.Panel
+    ref={ref}
+    keepMounted={keepMounted}
+    className={cx(styles['tabs-content'], 'infonomic-tabs-content', className)}
+    {...props}
+  />
+)
+TabsContent.displayName = 'TabsContent'
+
+Tabs.List = TabsList
+Tabs.Trigger = TabsTrigger
+Tabs.Content = TabsContent
+
+export { Tabs }

package/src/components/tooltip/tooltip.module.css

@@ -0,0 +1,80 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .tooltip,
+  :global(.infonomic-tooltip) {
+    font-size: 0.75rem;
+    line-height: 1;
+    color: var(--surface-item-text);
+    user-select: none;
+    padding: 0.625rem 1rem;
+    border-radius: var(--border-radius-sm);
+    border-width: var(--border-width-thin);
+    border-style: var(--border-style-solid);
+    background-color: var(--surface-panel-elevated);
+    border-color: var(--surface-panel-border);
+    box-shadow: var(--shadow-xs);
+    will-change: transform, opacity;
+    animation: var(--transition-normal);
+  }
+
+  /* Dark mode handled by semantic tokens in theme layer */
+
+  .tooltip[data-open][data-side="top"] :global {
+    animation-name: slideDownAndFade;
+  }
+
+  .tooltip[data-open][data-side="right"] :global {
+    animation-name: slideLeftAndFade;
+  }
+
+  .tooltip[data-open][data-side="left"] :global {
+    animation-name: slideRightAndFade;
+  }
+
+  .tooltip[data-open][data-side="bottom"] :global {
+    animation-name: slideUpAndFade;
+  }
+
+  .tooltip-arrow,
+  :global(.infonomic-tooltip-arrow) {
+    display: flex;
+
+    &[data-side="top"] {
+      bottom: -6px;
+      rotate: 180deg;
+    }
+
+    &[data-side="bottom"] {
+      top: -6px;
+      rotate: 0deg;
+    }
+
+    &[data-side="left"] {
+      right: -10px;
+      rotate: 90deg;
+    }
+
+    &[data-side="right"] {
+      left: -10px;
+      rotate: -90deg;
+    }
+  }
+
+  .arrow-fill {
+    fill: var(--surface-panel-elevated);
+  }
+
+  .arrow-outer-stroke {
+    fill: var(--surface-panel-border);
+  }
+
+  .arrow-inner-stroke {
+    fill: var(--surface-panel-elevated);
+  }
+}

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import type React from 'react'
+
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
+import cx from 'classnames'
+
+import styles from './tooltip.module.css'
+
+export interface TooltipProps {
+  text: string
+  delay?: number
+  side?: 'bottom' | 'top' | 'right' | 'left'
+  sideOffset?: number
+  disableHoverablePopup?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactElement
+  ref?: React.RefObject<HTMLDivElement>
+}
+
+function ArrowSvg(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="15"
+      height="8"
+      viewBox="0 0 20 10"
+      fill="none"
+      aria-hidden
+      role="presentation"
+      {...props}
+    >
+      <path
+        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+        className={styles['arrow-fill']}
+      />
+      <path
+        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
+        className={styles['arrow-outer-stroke']}
+      />
+      <path
+        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
+        className={styles['arrow-inner-stroke']}
+      />
+    </svg>
+  )
+}
+
+export const Tooltip = function Tooltip({
+  ref,
+  text,
+  delay = 500,
+  side = 'top',
+  sideOffset = 10,
+  disableHoverablePopup,
+  open,
+  onOpenChange,
+  children,
+}: TooltipProps): React.JSX.Element {
+  return (
+    <TooltipPrimitive.Provider delay={delay}>
+      <TooltipPrimitive.Root
+        open={open}
+        onOpenChange={onOpenChange}
+        disableHoverablePopup={disableHoverablePopup}
+      >
+        <TooltipPrimitive.Trigger render={children} />
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Positioner ref={ref} side={side} sideOffset={sideOffset}>
+            <TooltipPrimitive.Popup className={cx(styles.tooltip, 'infonomic-tooltip')}>
+              <TooltipPrimitive.Arrow
+                className={cx(styles['tooltip-arrow'], 'infonomic-tooltip-arrow')}
+              >
+                <ArrowSvg />
+              </TooltipPrimitive.Arrow>
+              {text}
+            </TooltipPrimitive.Popup>
+          </TooltipPrimitive.Positioner>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  )
+}

package/src/dnd/draggable-sortable/demo/draggable-list-demo.tsx

@@ -2,9 +2,9 @@
 
 import { useState } from 'react'
 
-import { Card, GripperVerticalIcon } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
+import { Card, GripperVerticalIcon } from '../../../uikit.js'
 import { DraggableSortable, moveItem, useSortable } from '..'
 import styles from './draggable-list-demo.module.css'
 

package/src/dnd/draggable-sortable/draggable-sortable.tsx

@@ -28,11 +28,11 @@ import {
 } from '@dnd-kit/core'
 import { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'
 
-import type { Props } from './types.js'
+import type { DraggableSortableProps } from './types.js'
 
-export type { Props }
+export type { DraggableSortableProps }
 
-export const DraggableSortable: React.FC<Props> = (props) => {
+export const DraggableSortable: React.FC<DraggableSortableProps> = (props) => {
   const { children, className, ids, onDragEnd } = props
 
   const id = useId()

package/src/dnd/draggable-sortable/types.ts

@@ -15,7 +15,7 @@ import type { Ref } from 'react'
 
 import type { DragEndEvent } from '@dnd-kit/core'
 
-export type Props = {
+export type DraggableSortableProps = {
   children: React.ReactNode
   className?: string
   droppableRef?: Ref<HTMLElement>