@chassis-ui/react 0.2.0 → 0.4.0

package/src/components/skeleton/SkeletonLoader.tsx

@@ -1,98 +0,0 @@
-import React, {
-  ComponentPropsWithoutRef,
-  ElementType,
-  Fragment,
-  ReactElement,
-  ReactNode
-} from 'react'
-
-import { Span } from '../../utils/breakpoints'
-import { ContextColor } from '../../types'
-import { Skeleton, SkeletonProps } from './Skeleton'
-
-type SkeletonLoaderOwnProps<C extends ElementType> = {
-  /**
-   * The real content, rendered unchanged (no wrapping element) once `loading` is `false`.
-   */
-  children: ReactNode
-  /**
-   * Sets the color of the generated skeleton lines to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Component used for the generated skeleton(s) — e.g. `Avatar` or `Button` — for swapping
-   * non-text content, not just text runs. Its own props are type-checked at the call site once
-   * passed here, same as `Skeleton`'s own `component` prop.
-   *
-   * @default 'span'
-   */
-  component?: C
-  /**
-   * Swaps `children` for one `<Skeleton>` per entry in `spans` while `true`.
-   */
-  loading: boolean
-  /**
-   * One skeleton line per entry, using the same values as `Skeleton`'s `span` prop — e.g.
-   * `[12, 6]` for a full-width line followed by a half-width one. A single value (e.g. `6`) is
-   * shorthand for a single line, equivalent to `[6]`. Leave unset for a single skeleton sized by
-   * `component`'s own intrinsic width instead — e.g. an `Avatar`'s `size` prop. Rendered instead
-   * of `children` while `loading` is `true`; ignored once `loading` is `false`.
-   *
-   * @type { 'auto' | number | string | boolean | Array<'auto' | number | string | boolean> }
-   */
-  spans?: Span | Span[]
-}
-
-// Spelled out rather than `PolymorphicComponentProps`, which adds `asChild`: `SkeletonLoader`
-// renders no element of its own (it swaps its `children` for generated `Skeleton` lines), so
-// there's nothing for a child element to stand in for. (`Omit`-ing it from that type instead
-// breaks `C`'s inference from `component`.)
-export type SkeletonLoaderProps<C extends ElementType = 'span'> = SkeletonLoaderOwnProps<C> &
-  Omit<ComponentPropsWithoutRef<C>, keyof SkeletonLoaderOwnProps<C> | 'asChild'>
-
-type SkeletonLoaderComponent = (<C extends ElementType = 'span'>(
-  props: SkeletonLoaderProps<C>
-) => ReactElement | null) & { displayName?: string }
-
-/**
- * A pure content swap: no wrapping element of its own, so `.skeleton-glow`/`.skeleton-wave`
- * won't reach the lines it generates unless applied to a container already in the tree — see
- * `Skeleton`'s own docs for why the animation classes need a `.skeleton` descendant to animate.
- */
-function SkeletonLoaderRender<C extends ElementType = 'span'>({
-  children,
-  color,
-  component,
-  loading,
-  spans,
-  ...rest
-}: SkeletonLoaderProps<C>) {
-  if (!loading) return <>{children}</>
-
-  const spanList = spans === undefined ? [undefined] : Array.isArray(spans) ? spans : [spans]
-
-  return (
-    <>
-      {spanList.map((span, index) => (
-        // eslint-disable-next-line react/no-array-index-key -- `spans` is a static prop array
-        <Fragment key={index}>
-          {index > 0 && ' '}
-          {/* `rest` is `C`'s own props minus `SkeletonLoaderOwnProps`'s keys, which structurally
-              satisfies what `Skeleton<C>` wants (`C`'s own props minus its own, different, key
-              set) — TS can't verify that across two independently-generic components, hence the
-              cast. */}
-          <Skeleton
-            component={component}
-            span={span}
-            color={color}
-            {...(rest as unknown as SkeletonProps<C>)}
-          />
-        </Fragment>
-      ))}
-    </>
-  )
-}
-
-export const SkeletonLoader = SkeletonLoaderRender as SkeletonLoaderComponent
-
-SkeletonLoader.displayName = 'SkeletonLoader'

package/src/components/skeleton/index.ts

@@ -1,8 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Skeleton } from './Skeleton'
-export type { SkeletonProps } from './Skeleton'
-export { SkeletonLoader } from './SkeletonLoader'
-export type { SkeletonLoaderProps } from './SkeletonLoader'

package/src/components/spinner/Spinner.tsx

@@ -1,77 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { ContextColor } from '../../types'
-
-type SpinnerOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * Size the component sm.
-   */
-  size?: 'sm'
-  /**
-   * Set the button variant to an outlined button or a ghost button.
-   */
-  variant?: 'border' | 'grow'
-  /**
-   * Set visually hidden label for accessibility purposes.
-   */
-  visuallyHiddenLabel?: string
-}
-
-export type SpinnerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  SpinnerOwnProps<C>
->
-
-type SpinnerComponent = (<C extends ElementType = 'div'>(
-  props: SpinnerProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function SpinnerRender<C extends ElementType = 'div'>(
-  {
-    className,
-    color,
-    component,
-    size,
-    variant = 'border',
-    visuallyHiddenLabel = 'Loading...',
-    ...rest
-  }: SpinnerProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames(
-    `spinner-${variant}`,
-    color ? `fg-${color}` : null,
-    size && `spinner-${variant}-${size}`,
-    className
-  )
-
-  return (
-    <Component className={_className} role="status" {...rest} ref={ref}>
-      <span className="visually-hidden">{visuallyHiddenLabel}</span>
-    </Component>
-  )
-}
-
-export const Spinner = createPolymorphicComponent<SpinnerComponent>(
-  SpinnerRender as ForwardRefRenderFunction<Element, SpinnerProps<ElementType>>,
-  'Spinner'
-)

package/src/components/spinner/index.ts

@@ -1,6 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Spinner } from './Spinner'
-export type { SpinnerProps } from './Spinner'

package/src/components/stack/Stack.tsx

@@ -1,81 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { buildResponsiveClassNames } from '../../utils/breakpoints'
-import { spacingClassName } from '../../utils/spacingClassName'
-import { Breakpoint, Spacing } from '../../types'
-
-const directionClassName = (direction: 'horizontal' | 'vertical', prefix: string) => [
-  `${prefix}${direction === 'vertical' ? 'vstack' : 'hstack'}`
-]
-
-type StackOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * Lays children out in a row (`horizontal`, the default, maps to `.hstack`) or a column
-   * (`vertical`, maps to `.vstack`).
-   */
-  direction?: 'horizontal' | 'vertical'
-  /**
-   * Spacing between children, mapped to the `gap-*` utility classes.
-   */
-  gap?: Spacing | 0
-  /**
-   * Switches `direction` at one or more breakpoints via container queries. Requires a
-   * `.contains-inline` ancestor (not applied by `Stack` itself — see the docs) to establish the
-   * container context these queries evaluate against.
-   */
-  responsive?: Partial<Record<Breakpoint, 'horizontal' | 'vertical'>>
-}
-
-export type StackProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  StackOwnProps<C>
->
-
-type StackComponent = (<C extends ElementType = 'div'>(
-  props: StackProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function StackRender<C extends ElementType = 'div'>(
-  {
-    children,
-    className,
-    component,
-    direction = 'horizontal',
-    gap,
-    responsive,
-    ...rest
-  }: StackProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames(
-    buildResponsiveClassNames(directionClassName, direction, responsive),
-    spacingClassName('gap', gap),
-    className
-  )
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const Stack = createPolymorphicComponent<StackComponent>(
-  StackRender as ForwardRefRenderFunction<Element, StackProps<ElementType>>,
-  'Stack'
-)

package/src/components/stack/index.ts

@@ -1,6 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Stack } from './Stack'
-export type { StackProps } from './Stack'

package/src/components/static-table/StaticTable.tsx

@@ -1,78 +0,0 @@
-import React, { forwardRef, ReactNode, TableHTMLAttributes } from 'react'
-
-import { TableStyleProps, tableClassName, tableWrapperClassName } from '../../utils/tableClassName'
-
-export interface StaticTableProps
-  extends TableStyleProps, Omit<TableHTMLAttributes<HTMLTableElement>, 'align' | 'color'> {
-  /**
-   * Content shown above the table, functioning as a heading for it.
-   */
-  caption?: ReactNode
-  /**
-   * The table's own markup — plain `<thead>`/`<tbody>`/`<tfoot>`/`<tr>`/`<th>`/`<td>` elements,
-   * rendered as-is.
-   */
-  children?: ReactNode
-  /**
-   * Convert rows into stacked label/value blocks below a container width, for tables with too
-   * many columns to read comfortably even with horizontal scrolling. `true` always stacks; a
-   * breakpoint name stacks only below it. Implies `responsive` when `responsive` isn't set
-   * separately. Unlike `Table`, which derives each cell's label from its column header, a static
-   * table has no collection to read labels from — give each `<td>` a `data-cell` attribute with
-   * the label to show before its value.
-   */
-  stacked?: TableStyleProps['stacked']
-}
-
-// A plain, server-renderable `<table>` with `Table`'s styling props and none of its behavior — no
-// sorting, selection, or keyboard grid navigation, and no hooks, so it needs no client JavaScript
-// at all. Imported from `@chassis-ui/react/static-table`, whose entry deliberately has no
-// `'use client'` directive (see `RSC.md`). `forwardRef` is fine here: React Server Components
-// render forwardRef components like any other function component (a ref just can't be passed
-// from the server side).
-export const StaticTable = forwardRef<HTMLTableElement, StaticTableProps>(
-  (
-    {
-      align,
-      bordered,
-      borderless,
-      caption,
-      children,
-      className,
-      color,
-      hover,
-      responsive,
-      sm,
-      stacked,
-      striped,
-      ...rest
-    },
-    ref
-  ) => {
-    const table = (
-      <table
-        {...rest}
-        className={tableClassName({
-          align,
-          bordered,
-          borderless,
-          className,
-          color,
-          hover,
-          sm,
-          stacked,
-          striped
-        })}
-        ref={ref}
-      >
-        {caption && <caption>{caption}</caption>}
-        {children}
-      </table>
-    )
-
-    const wrapperClassName = tableWrapperClassName({ responsive, stacked })
-    return wrapperClassName ? <div className={wrapperClassName}>{table}</div> : table
-  }
-)
-
-StaticTable.displayName = 'StaticTable'

package/src/components/static-table/index.ts

@@ -1,8 +0,0 @@
-// Deliberately no 'use client' directive — unlike every other component folder's barrel, this one
-// is the server-safe entry point, `@chassis-ui/react/static-table`, and must stay importable from
-// a React Server Component without creating a client boundary (see RSC.md). Nothing reachable from
-// here may use hooks, context, or browser APIs; `scripts/check-rsc-directive.ts` fails the build if
-// the built entry ever gains a directive. For the same reason it skips the
-// `suppressFocusRingGlobally` import the other barrels carry — there's no client module to run it.
-export { StaticTable } from './StaticTable'
-export type { StaticTableProps } from './StaticTable'

package/src/components/stepper/Stepper.tsx

@@ -1,172 +0,0 @@
-import React, {
-  Children,
-  ElementType,
-  ForwardRefRenderFunction,
-  isValidElement,
-  ReactElement
-} from 'react'
-import classNames from 'classnames'
-
-import { ContextColor } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { StepperItem } from './StepperItem'
-
-export interface StepperItemDef {
-  /**
-   * Step label content.
-   */
-  label: React.ReactNode
-  /**
-   * Marks the item as the current step.
-   */
-  active?: boolean
-  /**
-   * Sets the color of the item.
-   */
-  color?: ContextColor
-  /**
-   * Renders the item as a link to the given URL.
-   */
-  href?: string
-}
-
-type StepperOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   * Defaults to `'ol'`, unless a step (a data-driven item with `href`, or a `<StepperItem
-   * component="a">`/`<StepperItem component="button">` child) is interactive — a bare `<a>`/
-   * `<button>` isn't a valid direct child of `<ol>`, so the default switches to `'div'` instead.
-   * Pass `component` explicitly to opt out of this.
-   */
-  component?: C
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Replaces the step counters with icons, driven by the `--status-icon` custom property.
-   */
-  icon?: boolean
-  /**
-   * Array of step definitions for data-driven rendering. When provided, children are ignored.
-   */
-  items?: StepperItemDef[]
-  /**
-   * Lays out steps side-by-side instead of stacking them vertically, either unconditionally or
-   * from a given breakpoint up.
-   */
-  layout?:
-    | 'horizontal'
-    | 'sm:horizontal'
-    | 'md:horizontal'
-    | 'lg:horizontal'
-    | 'xl:horizontal'
-    | '2xl:horizontal'
-  /**
-   * Wraps the stepper in a horizontally scrollable container so steps keep their natural width
-   * instead of shrinking to fit.
-   */
-  overflow?: boolean
-}
-
-export type StepperProps<C extends ElementType = 'ol'> = PolymorphicComponentProps<
-  C,
-  StepperOwnProps<C>
->
-
-type StepperComponent = (<C extends ElementType = 'ol'>(
-  props: StepperProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function StepperRender<C extends ElementType = 'ol'>(
-  {
-    children,
-    className,
-    component,
-    color,
-    icon,
-    items,
-    layout,
-    overflow,
-    ...rest
-  }: StepperProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  // A linked step (data-driven `href`, or a `<StepperItem component="a"|"button">` child) can't
-  // render as a bare `<a>`/`<button>` inside the default `<ol>` root — only `<li>`/`script`/
-  // `template` are valid children there. Default to `<div>` instead when that's the case
-  // (unless the caller already chose their own `component`) — matching the
-  // `<Stepper component="div">` pattern already documented for composed interactive usage.
-  const hasInteractiveItem = items
-    ? items.some((item) => !!item.href)
-    : Children.toArray(children).some(
-        (child) =>
-          isValidElement<{ component?: ElementType }>(child) &&
-          child.type === StepperItem &&
-          (child.props.component === 'a' || child.props.component === 'button')
-      )
-  const Component = (component ?? (hasInteractiveItem ? 'div' : 'ol')) as ElementType
-  const isListSemantic = Component === 'ol' || Component === 'ul'
-
-  const _className = classNames(
-    'stepper',
-    color && 'context',
-    color,
-    layout,
-    { 'icon-stepper': icon },
-    className
-  )
-
-  const autoContent = items
-    ? items.map((item, idx) => (
-        <StepperItem
-          // eslint-disable-next-line react/no-array-index-key
-          key={idx}
-          active={item.active}
-          color={item.color}
-          component={item.href ? 'a' : isListSemantic ? 'li' : 'div'}
-          href={item.href}
-        >
-          {item.label}
-        </StepperItem>
-      ))
-    : null
-
-  // When the root switched to `div` because of an interactive step, every plain `<StepperItem>`
-  // sibling defaulting to `<li>` would be just as invalid (only valid inside `<ul>`/`<ol>`/
-  // `<menu>`) — so give each `StepperItem` child the same `div` treatment the auto-generated
-  // steps above already get, unless it set its own `component`. Other child types are left
-  // untouched — this is only meaningful for `Stepper`'s own steps.
-  const renderedChildren =
-    autoContent ??
-    (isListSemantic
-      ? children
-      : Children.map(children, (child) =>
-          isValidElement<{ component?: ElementType }>(child) && child.type === StepperItem
-            ? React.cloneElement(child, { component: child.props.component ?? 'div' })
-            : child
-        ))
-
-  const stepperEl = (
-    <Component className={_className} {...rest} ref={ref}>
-      {renderedChildren}
-    </Component>
-  )
-
-  if (!overflow) return stepperEl
-
-  return <div className="stepper-overflow">{stepperEl}</div>
-}
-
-export const Stepper = createPolymorphicComponent<StepperComponent>(
-  StepperRender as ForwardRefRenderFunction<Element, StepperProps<ElementType>>,
-  'Stepper'
-)

package/src/components/stepper/StepperItem.tsx

@@ -1,66 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { ContextColor } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type StepperItemOwnProps<C extends ElementType> = {
-  /**
-   * Marks the item as the current step.
-   */
-  active?: boolean
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * The `href` attribute for an interactive step rendered as a link.
-   */
-  href?: string
-}
-
-export type StepperItemProps<C extends ElementType = 'li'> = PolymorphicComponentProps<
-  C,
-  StepperItemOwnProps<C>
->
-
-type StepperItemComponent = (<C extends ElementType = 'li'>(
-  props: StepperItemProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function StepperItemRender<C extends ElementType = 'li'>(
-  { active, children, className, color, component, href, ...rest }: StepperItemProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = (component ?? 'li') as ElementType
-  const _className = classNames('stepper-item', color && 'context', color, { active }, className)
-
-  const mergedProps = {
-    ...(href ? { href } : {}),
-    ...(active ? { 'aria-current': 'step' } : {}),
-    ...rest
-  }
-
-  return (
-    <Component className={_className} {...mergedProps} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const StepperItem = createPolymorphicComponent<StepperItemComponent>(
-  StepperItemRender as ForwardRefRenderFunction<Element, StepperItemProps<ElementType>>,
-  'StepperItem'
-)

package/src/components/stepper/index.ts

@@ -1,8 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Stepper } from './Stepper'
-export type { StepperProps, StepperItemDef } from './Stepper'
-export { StepperItem } from './StepperItem'
-export type { StepperItemProps } from './StepperItem'