@chassis-ui/react 0.2.0 → 0.4.0

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'
-)

package/src/components/card/CardText.tsx

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

package/src/components/card/CardTitle.tsx

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

package/src/components/card/index.ts

@@ -1,26 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Card } from './Card'
-export type { CardProps } from './Card'
-export { CardBody } from './CardBody'
-export type { CardBodyProps } from './CardBody'
-export { CardFooter } from './CardFooter'
-export type { CardFooterProps } from './CardFooter'
-export { CardGroup } from './CardGroup'
-export type { CardGroupProps } from './CardGroup'
-export { CardHeader } from './CardHeader'
-export type { CardHeaderProps } from './CardHeader'
-export { CardImage } from './CardImage'
-export type { CardImageProps } from './CardImage'
-export { CardImageOverlay } from './CardImageOverlay'
-export type { CardImageOverlayProps } from './CardImageOverlay'
-export { CardLink } from './CardLink'
-export type { CardLinkProps } from './CardLink'
-export { CardSubtitle } from './CardSubtitle'
-export type { CardSubtitleProps } from './CardSubtitle'
-export { CardText } from './CardText'
-export type { CardTextProps } from './CardText'
-export { CardTitle } from './CardTitle'
-export type { CardTitleProps } from './CardTitle'