@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/components/progress/index.tsx

@@ -1,174 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): progress on Base UI's
- * Progress (the `progressbar` role and its values). The determinate fill is a
- * full-width bar slid in with `translateX` on `spring.moderate`, after
- * upstream FF's CarouselDots fill (never scaled, so its rounded end keeps its
- * shape); the indeterminate bar sweeps a segment across the track and the
- * spinner draws Button's figure-eight loading glyph, both on `--duration-loop`
- * (`progress.css`).
- */
-
-import { Progress as ProgressPrimitive } from '@base-ui/react/progress'
-import { motion } from 'motion/react'
-import {
-  type ComponentPropsWithoutRef,
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type ReactNode,
-  type Ref,
-  type RefAttributes,
-} from 'react'
-import { useReduceMotion } from '../../lib/reduced-motion'
-import { type SizeVariant, useSize } from '../../lib/size-context'
-import { spring } from '../../lib/springs'
-import { cn } from '../../lib/utils'
-
-// Literal tables: UnoCSS only generates the classes it can read whole.
-const SPINNER_BOX = { default: 'size-9', compact: 'size-7' }
-const CAPTION = { default: 'text-caption', compact: 'text-caption-compact' }
-
-interface SpinnerProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
-  /** Pins the spinner to one step of the size ladder: one control tall (36px default, 28px compact), like a loading Button's. Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** What is loading, read to assistive tech. Defaults to `"Loading"`. */
-  label?: string
-  /** Classes for the box: a size off the ladder (`size-5` inline in text), a color. */
-  className?: string
-}
-
-/** An indeterminate wait in a small space: Button's loading glyph on its own. */
-const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
-  ({ size: sizeProp, label = 'Loading', className, ...props }, ref) => {
-    const size = useSize(sizeProp)
-    const reduced = useReduceMotion()
-    return (
-      <ProgressPrimitive.Root
-        // The root renders a span (render below); Base UI types its ref as a div's.
-        ref={ref as unknown as Ref<HTMLDivElement>}
-        value={null}
-        aria-label={label}
-        render={<span />}
-        {...props}
-        className={cn('inline-flex shrink-0 text-current', SPINNER_BOX[size.variant], className)}
-      >
-        <svg className="size-full" viewBox="0 0 24 24" fill="none" aria-hidden>
-          <path
-            d="M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z"
-            stroke="currentColor"
-            strokeWidth="1.125"
-            strokeLinecap="round"
-            pathLength="100"
-            className={reduced ? 'progress-breathe' : 'progress-spin'}
-          />
-        </svg>
-      </ProgressPrimitive.Root>
-    )
-  },
-)
-
-Spinner.displayName = 'Spinner'
-
-interface ProgressProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
-  /** How far along the task is, between `min` and `max`. `null` is an indeterminate bar: a segment sweeping the track while the amount is unknown. Defaults to `null`. */
-  value?: number | null
-  /** The value of an empty bar. Defaults to `0`. */
-  min?: number
-  /** The value of a full bar. Defaults to `100`. */
-  max?: number
-  /** A label above the bar, also its accessible name. Without one, give the bar an `aria-label`. */
-  label?: ReactNode
-  /** Shows the value, formatted as a percentage, at the end of the label row. Defaults to `false`. */
-  showValue?: boolean
-  /** Number format for the shown value and for assistive tech, as `Intl.NumberFormat` options. Defaults to a percentage. */
-  format?: Intl.NumberFormatOptions
-  /** Pins the label row to one step of the size ladder. Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** Classes for the root: a width, or `absolute inset-x-0 top-0` for a loading line along a region's top edge. */
-  className?: string
-}
-
-type ProgressComponent = ForwardRefExoticComponent<ProgressProps & RefAttributes<HTMLDivElement>> & {
-  Spinner: typeof Spinner
-}
-
-/**
- * Shows how far along a task is, or that something is still working when
- * nobody knows how far.
- *
- * A determinate bar (`value`) slides its fill to the new amount on the
- * indicator spring, never stretching it, so the rounded end keeps its shape;
- * an indeterminate one (`value={null}`) sweeps an ink segment along a recessed
- * track. The fill is ink, not the brand blue: progress is information, not a
- * selection. Base UI's Progress gives the bar its `progressbar` role, its
- * values and their text for assistive tech; `label` names it and `showValue`
- * prints the formatted value beside the label. Under reduced motion the fill
- * jumps to its amount and the indeterminate bar breathes in place instead of
- * travelling.
- *
- * Statics:
- * - `Progress.Spinner` — the same wait in a small space: Button's loading
- *   glyph on its own, one control tall (`size`), `label` for assistive tech.
- *   Also exported as `Spinner`.
- *
- * @example {@include ./examples.mdx}
- */
-const Progress = forwardRef<HTMLDivElement, ProgressProps>(
-  (
-    { value = null, min = 0, max = 100, label, showValue = false, format, size: sizeProp, className, ...props },
-    ref,
-  ) => {
-    const size = useSize(sizeProp)
-    const reduced = useReduceMotion()
-    const share = value === null ? null : Math.min(Math.max((value - min) / (max - min), 0), 1)
-    const { exit: _exit, ...enter } = spring.moderate
-
-    return (
-      <ProgressPrimitive.Root
-        ref={ref}
-        value={value}
-        min={min}
-        max={max}
-        format={format}
-        {...props}
-        className={cn('flex w-full flex-col gap-2', className)}
-      >
-        {(label || showValue) && (
-          <div className={cn('flex items-baseline justify-between gap-3', CAPTION[size.variant])}>
-            {label && (
-              <ProgressPrimitive.Label className="min-w-0 truncate text-foreground">{label}</ProgressPrimitive.Label>
-            )}
-            {showValue && value !== null && (
-              <ProgressPrimitive.Value className="ml-auto shrink-0 tabular-nums text-muted-foreground" />
-            )}
-          </div>
-        )}
-        <ProgressPrimitive.Track className="relative h-1 w-full overflow-hidden rounded-full bg-progress-track">
-          {share === null ? (
-            <span
-              className={cn(
-                'absolute inset-y-0 left-0 rounded-full bg-foreground',
-                reduced ? 'w-full progress-breathe' : 'w-2/5 progress-sweep',
-              )}
-            />
-          ) : (
-            <motion.span
-              className="absolute inset-0 rounded-full bg-foreground"
-              initial={false}
-              animate={{ x: `${(share - 1) * 100}%` }}
-              transition={reduced ? { duration: 0 } : enter}
-            />
-          )}
-        </ProgressPrimitive.Track>
-      </ProgressPrimitive.Root>
-    )
-  },
-) as ProgressComponent
-
-Progress.displayName = 'Progress'
-
-Object.assign(Progress, { Spinner })
-
-export type { ProgressProps, SpinnerProps }
-export { Progress, Spinner }
-
-export default Progress

package/components/progress/progress.css

@@ -1,49 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): Progress's loops. The
- * indeterminate bar sweeps a segment across the track (transform only); the
- * spinner reuses Button's figure-eight keyframes from base.css. Both run on
- * `--duration-loop`. Under reduced motion (Progress swaps the classes through
- * useReduceMotion; the media query covers the first paint) nothing travels:
- * the fill breathes in opacity instead.
- */
-
-@keyframes progress-sweep {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(250%);
-  }
-}
-
-@keyframes progress-breathe {
-  50% {
-    opacity: 0.4;
-  }
-}
-
-.progress-sweep {
-  animation: progress-sweep var(--duration-loop) ease-in-out infinite;
-}
-
-.progress-spin {
-  stroke-dasharray: 15 85;
-  animation:
-    spinner-move var(--duration-loop) linear infinite,
-    spinner-dash calc(var(--duration-loop) * 2) ease-in-out infinite;
-}
-
-.progress-breathe {
-  animation: progress-breathe var(--duration-loop) ease-in-out infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .progress-sweep {
-    width: 100%;
-    animation: progress-breathe var(--duration-loop) ease-in-out infinite;
-  }
-  .progress-spin {
-    stroke-dasharray: none;
-    animation: progress-breathe var(--duration-loop) ease-in-out infinite;
-  }
-}

package/components/progress/step-demo.tsx

@@ -1,27 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the docs stage of the
- * Progress page's fill. A Progress whose value steps through a list each time
- * its button is pressed, so the example stays hook-free.
- */
-
-import { useState } from 'react'
-import Button from '../button'
-import Progress, { type ProgressProps } from './index'
-
-interface StepDemoProps extends Omit<ProgressProps, 'value'> {
-  /** The values, one per press; after the last it starts over. */
-  values: number[]
-}
-
-export default function StepDemo({ values, ...props }: StepDemoProps) {
-  const [at, setAt] = useState(0)
-
-  return (
-    <div className="flex w-80 items-end gap-3">
-      <Progress {...props} value={values[at]} />
-      <Button variant="tertiary" size="compact" onClick={() => setAt((at + 1) % values.length)}>
-        Step
-      </Button>
-    </div>
-  )
-}

package/components/table/examples.mdx

@@ -1,188 +0,0 @@
-import Table from './index'
-import SortDemo from './sort-demo'
-
-# Basics
-
-## Basic
-
-Body rows join the fluid hover highlight in document order, so they need no
-`index`; the header row stays out.
-
-<div className="w-full">
-  <Table>
-    <Table.Header>
-      <Table.Row>
-        <Table.Head>Name</Table.Head>
-        <Table.Head>Role</Table.Head>
-        <Table.Head>Status</Table.Head>
-      </Table.Row>
-    </Table.Header>
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>Alice</Table.Cell>
-        <Table.Cell>Engineer</Table.Cell>
-        <Table.Cell>Active</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Bob</Table.Cell>
-        <Table.Cell>Designer</Table.Cell>
-        <Table.Cell>Away</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Carol</Table.Cell>
-        <Table.Cell>Manager</Table.Cell>
-        <Table.Cell>Active</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-  </Table>
-</div>
-
-## Compact
-
-`size="compact"` lands every row on the 28px step with 12px text, for
-dense data.
-
-<div className="w-full">
-  <Table size="compact">
-    <Table.Header>
-      <Table.Row>
-        <Table.Head>Name</Table.Head>
-        <Table.Head>Role</Table.Head>
-        <Table.Head>Status</Table.Head>
-      </Table.Row>
-    </Table.Header>
-    <Table.Body>
-      {[['Alice', 'Engineer', 'Active'], ['Bob', 'Designer', 'Away'], ['Carol', 'Manager', 'Active'], ['Dan', 'Researcher', 'Offline']].map((row, i) => (
-        <Table.Row key={row[0]} index={i}>
-          {row.map((cell) => (
-            <Table.Cell key={cell}>{cell}</Table.Cell>
-          ))}
-        </Table.Row>
-      ))}
-    </Table.Body>
-  </Table>
-</div>
-
-## Footer and caption
-
-`Table.Footer` holds totals: its rows render semibold, stay out of the hover and keep their bottom border while the first body row is lit. `Table.Caption` adds a muted line below.
-
-<div className="w-full">
-  <Table>
-    <Table.Caption>Invoices issued in March.</Table.Caption>
-    <Table.Header>
-      <Table.Row>
-        <Table.Head>Invoice</Table.Head>
-        <Table.Head>Customer</Table.Head>
-        <Table.Head className="text-right">Amount</Table.Head>
-      </Table.Row>
-    </Table.Header>
-    <Table.Body>
-      <Table.Row index={0}>
-        <Table.Cell>INV-001</Table.Cell>
-        <Table.Cell>Northwind</Table.Cell>
-        <Table.Cell className="text-right tabular-nums">€250.00</Table.Cell>
-      </Table.Row>
-      <Table.Row index={1}>
-        <Table.Cell>INV-002</Table.Cell>
-        <Table.Cell>Contoso</Table.Cell>
-        <Table.Cell className="text-right tabular-nums">€150.00</Table.Cell>
-      </Table.Row>
-      <Table.Row index={2}>
-        <Table.Cell>INV-003</Table.Cell>
-        <Table.Cell>Fabrikam</Table.Cell>
-        <Table.Cell className="text-right tabular-nums">€350.00</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-    <Table.Footer>
-      <Table.Row>
-        <Table.Cell colSpan={2}>Total</Table.Cell>
-        <Table.Cell className="text-right tabular-nums">€750.00</Table.Cell>
-      </Table.Row>
-    </Table.Footer>
-  </Table>
-</div>
-
-## Empty
-
-`Table.Empty` spans every column with a message, or a loading indicator while rows arrive.
-
-<div className="w-full">
-  <Table>
-    <Table.Header>
-      <Table.Row>
-        <Table.Head>Name</Table.Head>
-        <Table.Head>Role</Table.Head>
-        <Table.Head>Status</Table.Head>
-      </Table.Row>
-    </Table.Header>
-    <Table.Body>
-      <Table.Empty colSpan={3}>No people yet.</Table.Empty>
-    </Table.Body>
-  </Table>
-</div>
-
-## Stacked on small screens
-
-`stacked` turns every row into a two-column card below the `md` breakpoint: the header hides and each cell is led by its muted `label` and its value reads in the primary text colour. Narrow the window to see it; `stacked={false}` on a header or row keeps it tabular.
-
-<div className="w-full">
-  <Table stacked>
-    <Table.Header>
-      <Table.Row>
-        <Table.Head>Name</Table.Head>
-        <Table.Head>Role</Table.Head>
-        <Table.Head>Team</Table.Head>
-        <Table.Head>Status</Table.Head>
-      </Table.Row>
-    </Table.Header>
-    <Table.Body>
-      {[['Alice', 'Engineer', 'Platform', 'Active'], ['Bob', 'Designer', 'Brand', 'Away'], ['Carol', 'Manager', 'Platform', 'Active']].map(row => (
-        <Table.Row key={row[0]}>
-          <Table.Cell label="Name">{row[0]}</Table.Cell>
-          <Table.Cell label="Role">{row[1]}</Table.Cell>
-          <Table.Cell label="Team">{row[2]}</Table.Cell>
-          <Table.Cell label="Status">{row[3]}</Table.Cell>
-        </Table.Row>
-      ))}
-    </Table.Body>
-  </Table>
-</div>
-
-# Sorting
-
-## Sortable
-
-A head with `sortDirection` and `onSort` becomes a sort button: a press cycles ascending, descending and unsorted, and its arrow crossfades into the new direction. Here a small stage sorts the rows.
-
-<div className="w-full">
-  <SortDemo />
-</div>
-
-## Sort without state
-
-`defaultSortDirection` lets a head keep its own direction, for a table that sorts elsewhere (a server, TanStack) and only listens to `onSort`.
-
-<div className="w-full">
-  <Table>
-    <Table.Header>
-      <Table.Row>
-        <Table.Head defaultSortDirection="desc">Invoice</Table.Head>
-        <Table.Head defaultSortDirection={false}>Customer</Table.Head>
-        <Table.Head>Status</Table.Head>
-      </Table.Row>
-    </Table.Header>
-    <Table.Body>
-      <Table.Row index={0}>
-        <Table.Cell>INV-003</Table.Cell>
-        <Table.Cell>Northwind</Table.Cell>
-        <Table.Cell>Paid</Table.Cell>
-      </Table.Row>
-      <Table.Row index={1}>
-        <Table.Cell>INV-002</Table.Cell>
-        <Table.Cell>Contoso</Table.Cell>
-        <Table.Cell>Pending</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-  </Table>
-</div>