@chassis-ui/react 0.0.0-20260831090525

package/src/components/card/CardGroup.tsx

@@ -0,0 +1,51 @@
+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 small 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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,70 @@
+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. `{ large: '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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,22 @@
+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'