@chassis-ui/react 0.1.3 → 0.3.0

package/src/components/skeleton/Skeleton.tsx

@@ -1,89 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { Span, buildResponsiveClassNames } from '../../utils/breakpoints'
-import { Breakpoint, ContextColor } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type SkeletonOwnProps<C extends ElementType> = {
-  /**
-   * Adds `skeleton-{animation}` alongside the base `skeleton` class, so the element animates
-   * itself as well as any nested `<Skeleton>` children. Nest plain `<Skeleton>` children inside
-   * it for the glow pulse to reach them too, or apply `wave` to a container of one or more
-   * `<Skeleton>` children for a directional sweep across the whole group.
-   */
-  animation?: 'glow' | 'wave'
-  /**
-   * 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 an HTML element or a component —
-   * e.g. `Avatar` or `Button`. Its own props are type-checked at the call site once passed here.
-   *
-   * @default 'span'
-   */
-  component?: C
-  /**
-   * Width of the skeleton, expressed as a column span (of 12), or `'auto'`/`true` for a
-   * natural-width skeleton. Unset by default, so the rendered element's own intrinsic width
-   * applies — set it explicitly (e.g. `span={12}`) for a full-width text line; leave it unset
-   * when `component` is something that sizes itself, like `Avatar` or `Button`.
-   *
-   * @type { 'auto' | number | string | boolean }
-   */
-  span?: Span
-  /**
-   * Overrides `span` at a breakpoint and up.
-   *
-   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', 'auto' | number | string | boolean>> }
-   */
-  responsive?: Partial<Record<Breakpoint, Span>>
-}
-
-export type SkeletonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<
-  C,
-  SkeletonOwnProps<C>
->
-
-type SkeletonComponent = (<C extends ElementType = 'span'>(
-  props: SkeletonProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-const spanClassNames = (span: Span | undefined, prefix: string) => [
-  typeof span === 'number' || typeof span === 'string' ? `${prefix}col-${span}` : null,
-  span === true ? `${prefix}col` : null
-]
-
-function SkeletonRender<C extends ElementType = 'span'>(
-  { children, animation, className, color, component, span, responsive, ...rest }: SkeletonProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'span'
-  const _className = classNames(
-    'skeleton',
-    animation && `skeleton-${animation}`,
-    { [`bg-${color}`]: color },
-    buildResponsiveClassNames(spanClassNames, span, responsive),
-    className
-  )
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const Skeleton = createPolymorphicComponent<SkeletonComponent>(
-  SkeletonRender as ForwardRefRenderFunction<Element, SkeletonProps<ElementType>>,
-  'Skeleton'
-)

package/src/components/skeleton/SkeletonLoader.tsx

@@ -1,91 +0,0 @@
-import React, { ElementType, Fragment, ReactElement, ReactNode } from 'react'
-
-import { Span } from '../../utils/breakpoints'
-import { ContextColor } from '../../types'
-import { PolymorphicComponentProps } from '../../utils/polymorphic'
-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[]
-}
-
-export type SkeletonLoaderProps<C extends ElementType = 'span'> = PolymorphicComponentProps<
-  C,
-  SkeletonLoaderOwnProps<C>
->
-
-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,4 +0,0 @@
-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,2 +0,0 @@
-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,2 +0,0 @@
-export { Stack } from './Stack'
-export type { StackProps } from './Stack'

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,4 +0,0 @@
-export { Stepper } from './Stepper'
-export type { StepperProps, StepperItemDef } from './Stepper'
-export { StepperItem } from './StepperItem'
-export type { StepperItemProps } from './StepperItem'