@chassis-ui/react 0.1.3 → 0.3.0

package/src/components/calendar/labels.tsx

@@ -1,71 +0,0 @@
-import React, { createContext, ReactNode, useContext, useMemo } from 'react'
-
-/**
- * The user-facing strings the calendar/datepicker family renders itself, rather than getting from
- * the active locale.
- *
- * Everything else these components say — weekday names, month names, the calendar system, segment
- * order — comes from `I18nProvider`'s locale via react-aria, which ships its own translations. The
- * strings below have no equivalent in react-aria's dictionaries, so they were hardcoded English
- * with no way to override them: under `<I18nProvider locale="ar-SA">` a user got Arabic month
- * names interleaved with an English "Previous years". Pass `labels` to translate them, the same
- * way `Pagination`'s `previousLabel`/`nextLabel` are translated (see the Internationalization
- * docs page).
- */
-export interface CalendarLabels {
-  /** Accessible name of the year view's "page back" arrow. */
-  previousYears: string
-  /** Accessible name of the year view's "page forward" arrow. */
-  nextYears: string
-  /** Prefix of the year view's live-region announcement, rendered as `${selectYear}, 2020 – 2034`. */
-  selectYear: string
-  /** Prefix of the month view's live-region announcement, rendered as `${selectMonth}, 2024`. */
-  selectMonth: string
-  /** Prefix of the header month button's accessible name, rendered as `${month}: March`. */
-  month: string
-  /** Prefix of the header year button's accessible name, rendered as `${year}: 2024`. */
-  year: string
-  /** Accessible name of the trigger that opens the calendar overlay. */
-  calendar: string
-  /** Accessible name of the adornment that resets the current selection. */
-  clear: string
-}
-
-export const DEFAULT_CALENDAR_LABELS: CalendarLabels = {
-  previousYears: 'Previous years',
-  nextYears: 'Next years',
-  selectYear: 'Select year',
-  selectMonth: 'Select month',
-  month: 'Month',
-  year: 'Year',
-  calendar: 'Calendar',
-  clear: 'Clear'
-}
-
-const CalendarLabelsContext = createContext<CalendarLabels>(DEFAULT_CALENDAR_LABELS)
-
-/**
- * Reads the merged labels. Internal — every component in this family that renders one of these
- * strings goes through here rather than taking its own prop, because most of them
- * (`CalendarYearGrid`, `CalendarMonthGrid`, `CalendarMonthYearPicker`) sit three or four levels
- * below the public component a consumer actually passes `labels` to.
- */
-export const useCalendarLabels = (): CalendarLabels => useContext(CalendarLabelsContext)
-
-interface CalendarLabelsProviderProps {
-  children: ReactNode
-  labels?: Partial<CalendarLabels>
-}
-
-/**
- * Merges `labels` over whatever is already in context, rather than replacing it. `DatePicker`
- * renders a `Calendar` internally, so both provide — without merging, the inner `Calendar`
- * (which usually has no `labels` of its own) would reset the outer `DatePicker`'s overrides back
- * to English.
- */
-export const CalendarLabelsProvider = ({ children, labels }: CalendarLabelsProviderProps) => {
-  const parent = useContext(CalendarLabelsContext)
-  const value = useMemo(() => (labels ? { ...parent, ...labels } : parent), [parent, labels])
-
-  return <CalendarLabelsContext.Provider value={value}>{children}</CalendarLabelsContext.Provider>
-}

package/src/components/card/Card.tsx

@@ -1,173 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement, ReactNode } from 'react'
-import classNames from 'classnames'
-
-import { Breakpoint, ContextColor, ContextStyle, Sizing } from '../../types'
-import {
-  buildResponsiveClassNames,
-  flexDirectionClassNames,
-  FlexDirection
-} from '../../utils/breakpoints'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { CardBody } from './CardBody'
-import { CardFooter } from './CardFooter'
-import { CardImage } from './CardImage'
-import { CardSubtitle } from './CardSubtitle'
-import { CardText } from './CardText'
-import { CardTitle } from './CardTitle'
-
-type CardOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Switches the card from its default stacked (column) layout to a side-by-side (row) layout.
-   * Wrap the image and body in `Col` to control each side's width.
-   */
-  direction?: FlexDirection
-  /**
-   * Shorthand for a `CardFooter`, rendered after the image/title/subtitle/text/`children` block.
-   */
-  footer?: ReactNode
-  /**
-   * Shorthand for a `CardImage` — pass either a `src` URL (combine with `imageAlt`/
-   * `imageOrientation`) or a fully-formed element — a `<CardImage>`, `<Skeleton>`,
-   * `<Placeholder>`, or anything else — rendered as-is in its place. `imageAlt`/`imageOrientation`
-   * only apply to the `src` form; set them directly on your own element otherwise. For a
-   * horizontal layout or an overlay, omit this and compose `CardImage` directly as a child
-   * instead.
-   */
-  image?: ReactNode
-  /**
-   * Accessible alt text for `image`. Ignored unless `image` is set.
-   */
-  imageAlt?: string
-  /**
-   * Orientates `image` to the top (default) or bottom of the card.
-   */
-  imageOrientation?: 'top' | 'bottom'
-  /**
-   * Overrides `direction` at one or more breakpoints — e.g. `{ lg: 'row' }` to lay the card
-   * out horizontally from `lg` up while stacking below it.
-   */
-  responsive?: Partial<Record<Breakpoint, FlexDirection>>
-  /**
-   * Sets the size of the component to one of Chassis component sizes.
-   */
-  size?: Sizing
-  /**
-   * Shorthand for a `CardSubtitle`, rendered directly after `title`.
-   */
-  subtitle?: ReactNode
-  /**
-   * Shorthand for a `CardText`, rendered after `title`/`subtitle`.
-   */
-  text?: ReactNode
-  /**
-   * Shorthand for a `CardTitle`. Set alongside `subtitle`/`text` (or plain `children`, e.g. a
-   * `Button`) to build a standard card without composing `CardBody`/`CardTitle` yourself — all
-   * render together inside a single `CardBody`, in that order. Only takes effect when at least
-   * one of `image`/`title`/`subtitle`/`text`/`footer` is set; otherwise `children` render as-is,
-   * so full manual composition (`CardHeader`, lists, overlays, nav headers, …) keeps working
-   * unchanged. Mixing shorthand props with a manually-composed `children` tree isn't supported —
-   * pick one approach per card.
-   */
-  title?: ReactNode
-  /**
-   * Sets the context style of the component. `basic` (the default) renders with no extra class.
-   */
-  variant?: ContextStyle
-}
-
-export type CardProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CardOwnProps<C>>
-
-type CardComponent = (<C extends ElementType = 'div'>(
-  props: CardProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function CardRender<C extends ElementType = 'div'>(
-  {
-    children,
-    className,
-    color,
-    component,
-    direction,
-    footer,
-    image,
-    imageAlt,
-    imageOrientation = 'top',
-    responsive,
-    size,
-    subtitle,
-    text,
-    title,
-    variant,
-    ...rest
-  }: CardProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames(
-    'card',
-    color,
-    {
-      context: !!color,
-      solid: variant === 'solid',
-      smooth: variant === 'smooth',
-      outline: variant === 'outline',
-      sm: size === 'sm',
-      lg: size === 'lg'
-    },
-    buildResponsiveClassNames(flexDirectionClassNames, direction, responsive),
-    className
-  )
-
-  const hasShorthand =
-    image != null || title != null || subtitle != null || footer != null || text != null
-  const hasBodyContent = title != null || subtitle != null || text != null || children != null
-  const renderedImage =
-    typeof image === 'string' ? (
-      <CardImage orientation={imageOrientation} src={image} alt={imageAlt ?? ''} />
-    ) : (
-      image
-    )
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {hasShorthand ? (
-        <>
-          {image != null && imageOrientation === 'top' && renderedImage}
-          {hasBodyContent && (
-            <CardBody>
-              {title != null && <CardTitle>{title}</CardTitle>}
-              {subtitle != null && <CardSubtitle>{subtitle}</CardSubtitle>}
-              {text != null && <CardText>{text}</CardText>}
-              {children}
-            </CardBody>
-          )}
-          {image != null && imageOrientation === 'bottom' && renderedImage}
-          {footer != null && <CardFooter>{footer}</CardFooter>}
-        </>
-      ) : (
-        children
-      )}
-    </Component>
-  )
-}
-
-export const Card = createPolymorphicComponent<CardComponent>(
-  CardRender as ForwardRefRenderFunction<Element, CardProps<ElementType>>,
-  'Card'
-)

package/src/components/card/CardBody.tsx

@@ -1,75 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { Breakpoint, Spacing } from '../../types'
-import {
-  buildResponsiveClassNames,
-  flexDirectionClassNames,
-  FlexDirection
-} from '../../utils/breakpoints'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { spacingClassName } from '../../utils/spacingClassName'
-
-type CardBodyOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * Switches the body from its default stacked (column) layout to a side-by-side (row) layout —
-   * for placing an image beside text within a single padded region. Wrap the image and text in
-   * `Col` to control each side's width, and nest another `CardBody` (with `.p-0`) for the text
-   * side so it doesn't receive double padding.
-   */
-  direction?: FlexDirection
-  /**
-   * Spacing between children, mapped to the `gap-*` utility classes. Overrides the card's default
-   * gap between body children.
-   */
-  gap?: Spacing | 0
-  /**
-   * Overrides `direction` at one or more breakpoints.
-   */
-  responsive?: Partial<Record<Breakpoint, FlexDirection>>
-}
-
-export type CardBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  CardBodyOwnProps<C>
->
-
-type CardBodyComponent = (<C extends ElementType = 'div'>(
-  props: CardBodyProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function CardBodyRender<C extends ElementType = 'div'>(
-  { children, className, component, direction, gap, responsive, ...rest }: CardBodyProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames(
-    'card-body',
-    buildResponsiveClassNames(flexDirectionClassNames, direction, responsive),
-    spacingClassName('gap', gap),
-    className
-  )
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const CardBody = createPolymorphicComponent<CardBodyComponent>(
-  CardBodyRender as ForwardRefRenderFunction<Element, CardBodyProps<ElementType>>,
-  'CardBody'
-)

package/src/components/card/CardFooter.tsx

@@ -1,47 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type CardFooterOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-}
-
-export type CardFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  CardFooterOwnProps<C>
->
-
-type CardFooterComponent = (<C extends ElementType = 'div'>(
-  props: CardFooterProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function CardFooterRender<C extends ElementType = 'div'>(
-  { children, className, component, ...rest }: CardFooterProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames('card-footer', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const CardFooter = createPolymorphicComponent<CardFooterComponent>(
-  CardFooterRender as ForwardRefRenderFunction<Element, CardFooterProps<ElementType>>,
-  'CardFooter'
-)

package/src/components/card/CardGroup.tsx

@@ -1,51 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type CardGroupOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-}
-
-export type CardGroupProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  CardGroupOwnProps<C>
->
-
-type CardGroupComponent = (<C extends ElementType = 'div'>(
-  props: CardGroupProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-// Arranges direct-child Cards as an equal-width row, joined edge-to-edge, once its container
-// reaches the sm container breakpoint — below that, cards stack vertically. Requires a
-// `.contains-inline` ancestor (not applied by CardGroup itself, e.g. a wrapping
-// `<div className="contains-inline">`) to establish the container query context.
-function CardGroupRender<C extends ElementType = 'div'>(
-  { children, className, component, ...rest }: CardGroupProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames('card-group', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const CardGroup = createPolymorphicComponent<CardGroupComponent>(
-  CardGroupRender as ForwardRefRenderFunction<Element, CardGroupProps<ElementType>>,
-  'CardGroup'
-)

package/src/components/card/CardHeader.tsx

@@ -1,47 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type CardHeaderOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-}
-
-export type CardHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  CardHeaderOwnProps<C>
->
-
-type CardHeaderComponent = (<C extends ElementType = 'div'>(
-  props: CardHeaderProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function CardHeaderRender<C extends ElementType = 'div'>(
-  { children, className, component, ...rest }: CardHeaderProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames('card-header', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const CardHeader = createPolymorphicComponent<CardHeaderComponent>(
-  CardHeaderRender as ForwardRefRenderFunction<Element, CardHeaderProps<ElementType>>,
-  'CardHeader'
-)

package/src/components/card/CardImage.tsx

@@ -1,70 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { Breakpoint } from '../../types'
-import { buildResponsiveClassNames } from '../../utils/breakpoints'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type CardImageOrientation = 'top' | 'bottom' | 'start' | 'end'
-
-type CardImageOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component —
-   * e.g. a framework's own `Image` component. Its own props (`src`, `fill`, `priority`, etc.)
-   * are type-checked at the call site once passed here.
-   */
-  component?: C
-  /**
-   * Orientates the image to the top or bottom of the card as an "image cap", or to the start/end
-   * for a horizontal layout. Omit to round all four corners for use inside `CardBody`.
-   */
-  orientation?: CardImageOrientation
-  /**
-   * Overrides `orientation` at one or more breakpoints — e.g. `{ lg: 'start' }` to switch an
-   * image cap from `top` to `start` once the card lays out horizontally.
-   */
-  responsive?: Partial<Record<Breakpoint, CardImageOrientation>>
-}
-
-export type CardImageProps<C extends ElementType = 'img'> = PolymorphicComponentProps<
-  C,
-  CardImageOwnProps<C>
->
-
-type CardImageComponent = (<C extends ElementType = 'img'>(
-  props: CardImageProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-const layoutClassNames = (orientation: CardImageOrientation | undefined, prefix: string) => [
-  orientation ? `${prefix}card-image-${orientation}` : prefix === '' ? 'card-image' : null
-]
-
-function CardImageRender<C extends ElementType = 'img'>(
-  { children, className, component, orientation, responsive, ...rest }: CardImageProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'img'
-  const _className = classNames(
-    buildResponsiveClassNames(layoutClassNames, orientation, responsive),
-    className
-  )
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const CardImage = createPolymorphicComponent<CardImageComponent>(
-  CardImageRender as ForwardRefRenderFunction<Element, CardImageProps<ElementType>>,
-  'CardImage'
-)

package/src/components/card/CardImageOverlay.tsx

@@ -1,47 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type CardImageOverlayOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-}
-
-export type CardImageOverlayProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  CardImageOverlayOwnProps<C>
->
-
-type CardImageOverlayComponent = (<C extends ElementType = 'div'>(
-  props: CardImageOverlayProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function CardImageOverlayRender<C extends ElementType = 'div'>(
-  { children, className, component, ...rest }: CardImageOverlayProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames('card-overlay', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const CardImageOverlay = createPolymorphicComponent<CardImageOverlayComponent>(
-  CardImageOverlayRender as ForwardRefRenderFunction<Element, CardImageOverlayProps<ElementType>>,
-  'CardImageOverlay'
-)

package/src/components/card/CardLink.tsx

@@ -1,40 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { createPolymorphicComponent, PolymorphicRef } from '../../utils/polymorphic'
-import { Link, LinkProps } from '../link/Link'
-
-type CardLinkOwnProps = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export type CardLinkProps<C extends ElementType = 'a'> = LinkProps<C> & CardLinkOwnProps
-
-type CardLinkComponent = (<C extends ElementType = 'a'>(
-  props: CardLinkProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function CardLinkRender<C extends ElementType = 'a'>(
-  { children, className, ...rest }: CardLinkProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const _className = classNames('card-link', className)
-
-  return (
-    <Link
-      className={_className}
-      {...(rest as Record<string, unknown>)}
-      ref={ref as PolymorphicRef<ElementType>}
-    >
-      {children}
-    </Link>
-  )
-}
-
-export const CardLink = createPolymorphicComponent<CardLinkComponent>(
-  CardLinkRender as ForwardRefRenderFunction<Element, CardLinkProps<ElementType>>,
-  'CardLink'
-)

package/src/components/card/CardSubtitle.tsx

@@ -1,47 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type CardSubtitleOwnProps<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
-}
-
-export type CardSubtitleProps<C extends ElementType = 'h6'> = PolymorphicComponentProps<
-  C,
-  CardSubtitleOwnProps<C>
->
-
-type CardSubtitleComponent = (<C extends ElementType = 'h6'>(
-  props: CardSubtitleProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function CardSubtitleRender<C extends ElementType = 'h6'>(
-  { children, component, className, ...rest }: CardSubtitleProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'h6'
-  const _className = classNames('card-subtitle', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const CardSubtitle = createPolymorphicComponent<CardSubtitleComponent>(
-  CardSubtitleRender as ForwardRefRenderFunction<Element, CardSubtitleProps<ElementType>>,
-  'CardSubtitle'
-)