@chassis-ui/react 0.3.0 → 0.4.1

package/dist/chunks/card-CTP9K8xG.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{t}from"./Link-DyZyAQFj.js";import{a as n,i as r,n as i,r as a}from"./breakpoints-CGk8szzR.js";import{t as o}from"./spacingClassName-DVhk8m3P.js";import s from"react";import c from"classnames";function l({children:e,className:t,component:i,direction:l,gap:u,...d},f){let p=i??`div`,m=c(`card-body`,r([n(l,a)]),o(`gap`,u),t);return s.createElement(p,{className:m,...d,ref:f},e)}const u=e(l,`CardBody`);function d({children:e,className:t,component:n,...r},i){let a=n??`div`,o=c(`card-footer`,t);return s.createElement(a,{className:o,...r,ref:i},e)}const f=e(d,`CardFooter`),p=(e,t)=>`${t}card-image-${e}`;function m({children:e,className:t,component:a,orientation:o,...l},u){let d=a??`img`,f=c(i(o)===void 0&&`card-image`,r([n(o,p)]),t);return s.createElement(d,{className:f,...l,ref:u},e)}const h=e(m,`CardImage`);function g({children:e,component:t,className:n,...r},i){let a=t??`h6`,o=c(`card-subtitle`,n);return s.createElement(a,{className:o,...r,ref:i},e)}const _=e(g,`CardSubtitle`);function v({children:e,component:t,className:n,...r},i){let a=t??`p`,o=c(`card-text`,n);return s.createElement(a,{className:o,...r,ref:i},e)}const y=e(v,`CardText`);function b({children:e,component:t,className:n,...r},i){let a=t??`h5`,o=c(`card-title`,n);return s.createElement(a,{className:o,...r,ref:i},e)}const x=e(b,`CardTitle`);function S({children:e,className:t,color:i,component:o,direction:l,footer:d,image:p,imageAlt:m,imageOrientation:g=`top`,size:v,subtitle:b,text:S,title:C,variant:w,...T},E){let D=o??`div`,O=c(`card`,i,{context:!!i,solid:w===`solid`,smooth:w===`smooth`,outline:w===`outline`,sm:v===`sm`,lg:v===`lg`},r([n(l,a)]),t),k=p!=null||C!=null||b!=null||d!=null||S!=null,A=C!=null||b!=null||S!=null||e!=null,j=typeof p==`string`?s.createElement(h,{orientation:g,src:p,alt:m??``}):p;return s.createElement(D,{className:O,...T,ref:E},k?s.createElement(s.Fragment,null,p!=null&&g===`top`&&j,A&&s.createElement(u,null,C!=null&&s.createElement(x,null,C),b!=null&&s.createElement(_,null,b),S!=null&&s.createElement(y,null,S),e),p!=null&&g===`bottom`&&j,d!=null&&s.createElement(f,null,d)):e)}const C=e(S,`Card`);function w({children:e,className:t,component:n,...r},i){let a=n??`div`,o=c(`card-group`,t);return s.createElement(a,{className:o,...r,ref:i},e)}const T=e(w,`CardGroup`);function E({children:e,className:t,component:n,...r},i){let a=n??`div`,o=c(`card-header`,t);return s.createElement(a,{className:o,...r,ref:i},e)}const D=e(E,`CardHeader`);function O({children:e,className:t,component:n,...r},i){let a=n??`div`,o=c(`card-overlay`,t);return s.createElement(a,{className:o,...r,ref:i},e)}const k=e(O,`CardImageOverlay`);function A({children:e,className:n,...r},i){let a=c(`card-link`,n);return s.createElement(t,{className:a,...r,ref:i},e)}const j=e(A,`CardLink`);export{C as a,_ as c,u as d,T as i,h as l,k as n,x as o,D as r,y as s,j as t,f as u};
+//# sourceMappingURL=card-CTP9K8xG.js.map

package/dist/chunks/card-CTP9K8xG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-CTP9K8xG.js","names":[],"sources":["../../src/components/card/CardBody.tsx","../../src/components/card/CardFooter.tsx","../../src/components/card/CardImage.tsx","../../src/components/card/CardSubtitle.tsx","../../src/components/card/CardText.tsx","../../src/components/card/CardTitle.tsx","../../src/components/card/Card.tsx","../../src/components/card/CardGroup.tsx","../../src/components/card/CardHeader.tsx","../../src/components/card/CardImageOverlay.tsx","../../src/components/card/CardLink.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { Responsive, Spacing } from '../../types'\nimport {\n  flexDirectionClassName,\n  FlexDirection,\n  responsiveClassNames,\n  responsiveProp\n} from '../../utils/breakpoints'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { spacingClassName } from '../../utils/spacingClassName'\n\ntype CardBodyOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Switches the body from its default stacked (column) layout to a side-by-side (row) layout —\n   * for placing an image beside text within a single padded region. Give the image and the text\n   * a width utility (`w-4/12`, `w-8/12`) to control each side's width, and nest another\n   * `CardBody` (with `.p-0`) for the text side so it doesn't receive double padding. An object\n   * sets the direction from a breakpoint up: `{ md: 'row' }`.\n   */\n  direction?: Responsive<FlexDirection>\n  /**\n   * Spacing between children, mapped to the `gap-*` utility classes. Overrides the card's default\n   * gap between body children.\n   *\n   * @type { Spacing | 0 }\n   */\n  gap?: Spacing | 0\n}\n\nexport type CardBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  CardBodyOwnProps<C>\n>\n\ntype CardBodyComponent = (<C extends ElementType = 'div'>(\n  props: CardBodyProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction CardBodyRender<C extends ElementType = 'div'>(\n  { children, className, component, direction, gap, ...rest }: CardBodyProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames(\n    'card-body',\n    responsiveClassNames([responsiveProp(direction, flexDirectionClassName)]),\n    spacingClassName('gap', gap),\n    className\n  )\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const CardBody = createPolymorphicComponent<CardBodyComponent>(\n  CardBodyRender as ForwardRefRenderFunction<Element, CardBodyProps<ElementType>>,\n  'CardBody'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype CardFooterOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type CardFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  CardFooterOwnProps<C>\n>\n\ntype CardFooterComponent = (<C extends ElementType = 'div'>(\n  props: CardFooterProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction CardFooterRender<C extends ElementType = 'div'>(\n  { children, className, component, ...rest }: CardFooterProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('card-footer', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const CardFooter = createPolymorphicComponent<CardFooterComponent>(\n  CardFooterRender as ForwardRefRenderFunction<Element, CardFooterProps<ElementType>>,\n  'CardFooter'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { Responsive } from '../../types'\nimport { baseValue, responsiveClassNames, responsiveProp } from '../../utils/breakpoints'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype CardImageOrientation = 'top' | 'bottom' | 'start' | 'end'\n\ntype CardImageOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component —\n   * e.g. a framework's own `Image` component. Its own props (`src`, `fill`, `priority`, etc.)\n   * are type-checked at the call site once passed here.\n   */\n  component?: C\n  /**\n   * Orientates the image to the top or bottom of the card as an \"image cap\", or to the start/end\n   * for a horizontal layout. Omit to round all four corners for use inside `CardBody`. An object\n   * sets the orientation from a breakpoint up — e.g. `{ base: 'top', lg: 'start' }` to switch an\n   * image cap from `top` to `start` once the card lays out horizontally.\n   */\n  orientation?: Responsive<CardImageOrientation>\n}\n\nexport type CardImageProps<C extends ElementType = 'img'> = PolymorphicComponentProps<\n  C,\n  CardImageOwnProps<C>\n>\n\ntype CardImageComponent = (<C extends ElementType = 'img'>(\n  props: CardImageProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nconst orientationClassName = (orientation: CardImageOrientation, prefix: string) =>\n  `${prefix}card-image-${orientation}`\n\nfunction CardImageRender<C extends ElementType = 'img'>(\n  { children, className, component, orientation, ...rest }: CardImageProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'img'\n  const _className = classNames(\n    // With no orientation at the base, the image is the plain one of `CardBody`.\n    baseValue(orientation) === undefined && 'card-image',\n    responsiveClassNames([responsiveProp(orientation, orientationClassName)]),\n    className\n  )\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const CardImage = createPolymorphicComponent<CardImageComponent>(\n  CardImageRender as ForwardRefRenderFunction<Element, CardImageProps<ElementType>>,\n  'CardImage'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype CardSubtitleOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type CardSubtitleProps<C extends ElementType = 'h6'> = PolymorphicComponentProps<\n  C,\n  CardSubtitleOwnProps<C>\n>\n\ntype CardSubtitleComponent = (<C extends ElementType = 'h6'>(\n  props: CardSubtitleProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction CardSubtitleRender<C extends ElementType = 'h6'>(\n  { children, component, className, ...rest }: CardSubtitleProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'h6'\n  const _className = classNames('card-subtitle', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const CardSubtitle = createPolymorphicComponent<CardSubtitleComponent>(\n  CardSubtitleRender as ForwardRefRenderFunction<Element, CardSubtitleProps<ElementType>>,\n  'CardSubtitle'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype CardTextOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type CardTextProps<C extends ElementType = 'p'> = PolymorphicComponentProps<\n  C,\n  CardTextOwnProps<C>\n>\n\ntype CardTextComponent = (<C extends ElementType = 'p'>(\n  props: CardTextProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction CardTextRender<C extends ElementType = 'p'>(\n  { children, component, className, ...rest }: CardTextProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'p'\n  const _className = classNames('card-text', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const CardText = createPolymorphicComponent<CardTextComponent>(\n  CardTextRender as ForwardRefRenderFunction<Element, CardTextProps<ElementType>>,\n  'CardText'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype CardTitleOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type CardTitleProps<C extends ElementType = 'h5'> = PolymorphicComponentProps<\n  C,\n  CardTitleOwnProps<C>\n>\n\ntype CardTitleComponent = (<C extends ElementType = 'h5'>(\n  props: CardTitleProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction CardTitleRender<C extends ElementType = 'h5'>(\n  { children, component, className, ...rest }: CardTitleProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'h5'\n  const _className = classNames('card-title', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const CardTitle = createPolymorphicComponent<CardTitleComponent>(\n  CardTitleRender as ForwardRefRenderFunction<Element, CardTitleProps<ElementType>>,\n  'CardTitle'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement, ReactNode } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor, ContextStyle, Responsive, Sizing } from '../../types'\nimport {\n  flexDirectionClassName,\n  FlexDirection,\n  responsiveClassNames,\n  responsiveProp\n} from '../../utils/breakpoints'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { CardBody } from './CardBody'\nimport { CardFooter } from './CardFooter'\nimport { CardImage } from './CardImage'\nimport { CardSubtitle } from './CardSubtitle'\nimport { CardText } from './CardText'\nimport { CardTitle } from './CardTitle'\n\ntype CardOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Sets the color of the component to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Switches the card from its default stacked (column) layout to a side-by-side (row) layout.\n   * Give the image and the body a width utility (`w-4/12`, `w-8/12`) to control each side's\n   * width. An object sets the direction from a breakpoint up — e.g. `{ lg: 'row' }` to lay the\n   * card out horizontally from `lg` up while stacking below it.\n   */\n  direction?: Responsive<FlexDirection>\n  /**\n   * Shorthand for a `CardFooter`, rendered after the image/title/subtitle/text/`children` block.\n   */\n  footer?: ReactNode\n  /**\n   * Shorthand for a `CardImage` — pass either a `src` URL (combine with `imageAlt`/\n   * `imageOrientation`) or a fully-formed element — a `<CardImage>`, `<Skeleton>`,\n   * `<Placeholder>`, or anything else — rendered as-is in its place. `imageAlt`/`imageOrientation`\n   * only apply to the `src` form; set them directly on your own element otherwise. For a\n   * horizontal layout or an overlay, omit this and compose `CardImage` directly as a child\n   * instead.\n   */\n  image?: ReactNode\n  /**\n   * Accessible alt text for `image`. Ignored unless `image` is set.\n   */\n  imageAlt?: string\n  /**\n   * Orientates `image` to the top (default) or bottom of the card.\n   */\n  imageOrientation?: 'top' | 'bottom'\n  /**\n   * Sets the size of the component to one of Chassis component sizes.\n   */\n  size?: Sizing\n  /**\n   * Shorthand for a `CardSubtitle`, rendered directly after `title`.\n   */\n  subtitle?: ReactNode\n  /**\n   * Shorthand for a `CardText`, rendered after `title`/`subtitle`.\n   */\n  text?: ReactNode\n  /**\n   * Shorthand for a `CardTitle`. Set alongside `subtitle`/`text` (or plain `children`, e.g. a\n   * `Button`) to build a standard card without composing `CardBody`/`CardTitle` yourself — all\n   * render together inside a single `CardBody`, in that order. Only takes effect when at least\n   * one of `image`/`title`/`subtitle`/`text`/`footer` is set; otherwise `children` render as-is,\n   * so full manual composition (`CardHeader`, lists, overlays, nav headers, …) keeps working\n   * unchanged. Mixing shorthand props with a manually-composed `children` tree isn't supported —\n   * pick one approach per card.\n   */\n  title?: ReactNode\n  /**\n   * Sets the context style of the component. `basic` (the default) renders with no extra class.\n   */\n  variant?: ContextStyle\n}\n\nexport type CardProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CardOwnProps<C>>\n\ntype CardComponent = (<C extends ElementType = 'div'>(\n  props: CardProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction CardRender<C extends ElementType = 'div'>(\n  {\n    children,\n    className,\n    color,\n    component,\n    direction,\n    footer,\n    image,\n    imageAlt,\n    imageOrientation = 'top',\n    size,\n    subtitle,\n    text,\n    title,\n    variant,\n    ...rest\n  }: CardProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames(\n    'card',\n    color,\n    {\n      context: !!color,\n      solid: variant === 'solid',\n      smooth: variant === 'smooth',\n      outline: variant === 'outline',\n      sm: size === 'sm',\n      lg: size === 'lg'\n    },\n    responsiveClassNames([responsiveProp(direction, flexDirectionClassName)]),\n    className\n  )\n\n  const hasShorthand =\n    image != null || title != null || subtitle != null || footer != null || text != null\n  const hasBodyContent = title != null || subtitle != null || text != null || children != null\n  const renderedImage =\n    typeof image === 'string' ? (\n      <CardImage orientation={imageOrientation} src={image} alt={imageAlt ?? ''} />\n    ) : (\n      image\n    )\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {hasShorthand ? (\n        <>\n          {image != null && imageOrientation === 'top' && renderedImage}\n          {hasBodyContent && (\n            <CardBody>\n              {title != null && <CardTitle>{title}</CardTitle>}\n              {subtitle != null && <CardSubtitle>{subtitle}</CardSubtitle>}\n              {text != null && <CardText>{text}</CardText>}\n              {children}\n            </CardBody>\n          )}\n          {image != null && imageOrientation === 'bottom' && renderedImage}\n          {footer != null && <CardFooter>{footer}</CardFooter>}\n        </>\n      ) : (\n        children\n      )}\n    </Component>\n  )\n}\n\nexport const Card = createPolymorphicComponent<CardComponent>(\n  CardRender as ForwardRefRenderFunction<Element, CardProps<ElementType>>,\n  'Card'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype CardGroupOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type CardGroupProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  CardGroupOwnProps<C>\n>\n\ntype CardGroupComponent = (<C extends ElementType = 'div'>(\n  props: CardGroupProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// Arranges direct-child Cards as an equal-width row, joined edge-to-edge, once its container\n// reaches the sm container breakpoint — below that, cards stack vertically. Requires a\n// `.contains-inline` ancestor (not applied by CardGroup itself, e.g. a wrapping\n// `<div className=\"contains-inline\">`) to establish the container query context.\nfunction CardGroupRender<C extends ElementType = 'div'>(\n  { children, className, component, ...rest }: CardGroupProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('card-group', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const CardGroup = createPolymorphicComponent<CardGroupComponent>(\n  CardGroupRender as ForwardRefRenderFunction<Element, CardGroupProps<ElementType>>,\n  'CardGroup'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype CardHeaderOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type CardHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  CardHeaderOwnProps<C>\n>\n\ntype CardHeaderComponent = (<C extends ElementType = 'div'>(\n  props: CardHeaderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction CardHeaderRender<C extends ElementType = 'div'>(\n  { children, className, component, ...rest }: CardHeaderProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('card-header', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const CardHeader = createPolymorphicComponent<CardHeaderComponent>(\n  CardHeaderRender as ForwardRefRenderFunction<Element, CardHeaderProps<ElementType>>,\n  'CardHeader'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype CardImageOverlayOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type CardImageOverlayProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  CardImageOverlayOwnProps<C>\n>\n\ntype CardImageOverlayComponent = (<C extends ElementType = 'div'>(\n  props: CardImageOverlayProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction CardImageOverlayRender<C extends ElementType = 'div'>(\n  { children, className, component, ...rest }: CardImageOverlayProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('card-overlay', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const CardImageOverlay = createPolymorphicComponent<CardImageOverlayComponent>(\n  CardImageOverlayRender as ForwardRefRenderFunction<Element, CardImageOverlayProps<ElementType>>,\n  'CardImageOverlay'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { createPolymorphicComponent, PolymorphicRef } from '../../utils/polymorphic'\nimport { Link, LinkProps } from '../link/Link'\n\ntype CardLinkOwnProps = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n}\n\nexport type CardLinkProps<C extends ElementType = 'a'> = LinkProps<C> & CardLinkOwnProps\n\ntype CardLinkComponent = (<C extends ElementType = 'a'>(\n  props: CardLinkProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction CardLinkRender<C extends ElementType = 'a'>(\n  { children, className, ...rest }: CardLinkProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const _className = classNames('card-link', className)\n\n  return (\n    <Link\n      className={_className}\n      {...(rest as Record<string, unknown>)}\n      ref={ref as PolymorphicRef<ElementType>}\n    >\n      {children}\n    </Link>\n  )\n}\n\nexport const CardLink = createPolymorphicComponent<CardLinkComponent>(\n  CardLinkRender as ForwardRefRenderFunction<Element, CardLinkProps<ElementType>>,\n  'CardLink'\n)\n"],"mappings":"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"}

package/dist/chunks/{checkbox-ChACalAw.js → checkbox-ZyQn5Ku5.js}

@@ -1,2 +1,2 @@
-import"./focus-ring-SR_LwaN7.js";import{_ as e,c as t,v as n}from"./slot-CNhFZdHF.js";import{t as r}from"./useForkedRef-DVEfT-KI.js";import{n as i,t as a}from"./FormHelp-AE6_iSLJ.js";import{t as o}from"./validationClassName-gRGs4KBm.js";import{t as s}from"./renderFormCheck-DN_-V62U.js";import{n as c,r as l}from"./unhandledProps-9Kdj7WVf.js";import{t as u}from"./flex-CmlJbKVj.js";import d,{createContext as f,forwardRef as p,useContext as m,useEffect as h,useRef as g}from"react";import _ from"classnames";import{useCheckbox as v,useCheckboxGroup as y,useCheckboxGroupItem as b}from"react-aria";import{useCheckboxGroupState as x,useToggleState as S}from"react-stately";const C=f(null),w=p(({button:e,children:t,className:n,color:i,defaultSelected:a,disabled:u,id:f,indeterminate:p,invalid:m,isSelected:h,label:y,onChange:b,size:x,style:C,valid:w,...T},E)=>{let D=g(null),O=r(E,D),k=S({defaultSelected:a,isDisabled:u,isSelected:h,onChange:b}),A=y??t,{inputProps:j}=v({...T,children:A,isDisabled:u,isIndeterminate:p,isInvalid:m,value:T.value},k,D),M=_(o(m,w));return s({button:e,className:n,color:i,input:d.createElement(`input`,{...l(j,T,c),"aria-describedby":T[`aria-describedby`],className:M,id:f,ref:O}),invalid:m,label:A,size:x,style:C,valid:w})});w.displayName=`CheckboxStandalone`;const T=p(({button:i,children:a,className:u,color:f,defaultSelected:p,disabled:m,groupDescribedBy:v,groupState:y,groupValid:x,id:S,indeterminate:C,invalid:w,isSelected:T,label:E,onChange:D,size:O,style:k,valid:A,...j},M)=>{let N=w??y.isInvalid,P=A??x,F=g(null),I=r(M,F);h(()=>{e(!j.value,"Checkbox: a `value` prop is required when rendered inside a CheckboxGroup."),n(p!==void 0||T!==void 0||D!==void 0,"Checkbox: `defaultSelected`, `isSelected`, and `onChange` are ignored inside a CheckboxGroup — selection is owned by the group's `value`/`defaultValue`/`onChange`.")},[]);let L=E??a,{inputProps:R}=b({...j,children:L,isDisabled:m,isIndeterminate:C,isInvalid:N,value:j.value},y,F),z=_(o(N,P));return s({button:i,className:u,color:f,input:d.createElement(`input`,{...l(R,j,c),"aria-describedby":t(j[`aria-describedby`],v),className:z,id:S,ref:I}),invalid:N,label:L,size:O,style:k,valid:P})});T.displayName=`CheckboxGroupItem`;const E=p((e,t)=>{let n=m(C);return n?d.createElement(T,{...e,groupDescribedBy:n.describedBy,groupState:n.state,groupValid:n.valid,ref:t}):d.createElement(w,{...e,ref:t})});E.displayName=`Checkbox`;const D=p(({children:e,className:n,defaultValue:r,description:s,disabled:c,errorMessage:l,invalid:f,label:p,name:m,onChange:h,orientation:g,required:v,valid:b,value:S,...w},T)=>{let E={...w,defaultValue:r,description:s,errorMessage:l,isDisabled:c,isInvalid:f,isRequired:v,label:p,name:m,onChange:h,value:S},D=x(E),{groupProps:O,labelProps:k,descriptionProps:A,errorMessageProps:j}=y(E,D),M=_(`form-field`,o(f,b),n),N=t(!!s&&A.id,!!(f&&l)&&j.id),P=d.createElement(C.Provider,{value:{describedBy:N,state:D,valid:b}},e);return d.createElement(`fieldset`,{...w,...O,"aria-describedby":t(N,w[`aria-describedby`]),className:M,ref:T},p&&d.createElement(`legend`,{className:`form-label`,...k},p),g===`horizontal`?d.createElement(u,{wrap:`wrap`,gap:`md`},P):P,s&&d.createElement(a,A,s),f&&l&&d.createElement(i,{invalid:!0,...j},l))});D.displayName=`CheckboxGroup`;export{E as n,D as t};
-//# sourceMappingURL=checkbox-ChACalAw.js.map
+import"./focus-ring-SR_LwaN7.js";import{_ as e,c as t,v as n}from"./slot-CNhFZdHF.js";import{t as r}from"./useForkedRef-DVEfT-KI.js";import{n as i,t as a}from"./FormHelp-AE6_iSLJ.js";import{t as o}from"./validationClassName-gRGs4KBm.js";import{t as s}from"./renderFormCheck-DN_-V62U.js";import{n as c,r as l}from"./unhandledProps-9Kdj7WVf.js";import{t as u}from"./flex-B52oLCCC.js";import d,{createContext as f,forwardRef as p,useContext as m,useEffect as h,useRef as g}from"react";import _ from"classnames";import{useCheckbox as v,useCheckboxGroup as y,useCheckboxGroupItem as b}from"react-aria";import{useCheckboxGroupState as x,useToggleState as S}from"react-stately";const C=f(null),w=p(({button:e,children:t,className:n,color:i,defaultSelected:a,disabled:u,id:f,indeterminate:p,invalid:m,isSelected:h,label:y,onChange:b,size:x,style:C,valid:w,...T},E)=>{let D=g(null),O=r(E,D),k=S({defaultSelected:a,isDisabled:u,isSelected:h,onChange:b}),A=y??t,{inputProps:j}=v({...T,children:A,isDisabled:u,isIndeterminate:p,isInvalid:m,value:T.value},k,D),M=_(o(m,w));return s({button:e,className:n,color:i,input:d.createElement(`input`,{...l(j,T,c),"aria-describedby":T[`aria-describedby`],className:M,id:f,ref:O}),invalid:m,label:A,size:x,style:C,valid:w})});w.displayName=`CheckboxStandalone`;const T=p(({button:i,children:a,className:u,color:f,defaultSelected:p,disabled:m,groupDescribedBy:v,groupState:y,groupValid:x,id:S,indeterminate:C,invalid:w,isSelected:T,label:E,onChange:D,size:O,style:k,valid:A,...j},M)=>{let N=w??y.isInvalid,P=A??x,F=g(null),I=r(M,F);h(()=>{e(!j.value,"Checkbox: a `value` prop is required when rendered inside a CheckboxGroup."),n(p!==void 0||T!==void 0||D!==void 0,"Checkbox: `defaultSelected`, `isSelected`, and `onChange` are ignored inside a CheckboxGroup — selection is owned by the group's `value`/`defaultValue`/`onChange`.")},[]);let L=E??a,{inputProps:R}=b({...j,children:L,isDisabled:m,isIndeterminate:C,isInvalid:N,value:j.value},y,F),z=_(o(N,P));return s({button:i,className:u,color:f,input:d.createElement(`input`,{...l(R,j,c),"aria-describedby":t(j[`aria-describedby`],v),className:z,id:S,ref:I}),invalid:N,label:L,size:O,style:k,valid:P})});T.displayName=`CheckboxGroupItem`;const E=p((e,t)=>{let n=m(C);return n?d.createElement(T,{...e,groupDescribedBy:n.describedBy,groupState:n.state,groupValid:n.valid,ref:t}):d.createElement(w,{...e,ref:t})});E.displayName=`Checkbox`;const D=p(({children:e,className:n,defaultValue:r,description:s,disabled:c,errorMessage:l,invalid:f,label:p,name:m,onChange:h,orientation:g,required:v,valid:b,value:S,...w},T)=>{let E={...w,defaultValue:r,description:s,errorMessage:l,isDisabled:c,isInvalid:f,isRequired:v,label:p,name:m,onChange:h,value:S},D=x(E),{groupProps:O,labelProps:k,descriptionProps:A,errorMessageProps:j}=y(E,D),M=_(`form-field`,o(f,b),n),N=t(!!s&&A.id,!!(f&&l)&&j.id),P=d.createElement(C.Provider,{value:{describedBy:N,state:D,valid:b}},e);return d.createElement(`fieldset`,{...w,...O,"aria-describedby":t(N,w[`aria-describedby`]),className:M,ref:T},p&&d.createElement(`legend`,{className:`form-label`,...k},p),g===`horizontal`?d.createElement(u,{wrap:`wrap`,gap:`md`},P):P,s&&d.createElement(a,A,s),f&&l&&d.createElement(i,{invalid:!0,...j},l))});D.displayName=`CheckboxGroup`;export{E as n,D as t};
+//# sourceMappingURL=checkbox-ZyQn5Ku5.js.map

package/dist/chunks/{checkbox-ChACalAw.js.map → checkbox-ZyQn5Ku5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-ChACalAw.js","names":[],"sources":["../../src/components/checkbox/context.ts","../../src/components/checkbox/Checkbox.tsx","../../src/components/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext } from 'react'\nimport { CheckboxGroupState } from 'react-stately'\n\nexport interface CheckboxGroupContextValue {\n  state: CheckboxGroupState\n  /**\n   * `CheckboxGroup`'s own `valid` prop, mirrored here since it has no react-stately equivalent to\n   * read off `state` the way `isInvalid` does — each `Checkbox` needs it to apply its own\n   * `is-valid` class when the item doesn't set its own (same pattern as `RadioGroupContext`).\n   */\n  valid?: boolean\n  /**\n   * The ids of the group's description and error message, when they are rendered. Each item is\n   * described by them too.\n   */\n  describedBy?: string\n}\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null)\n","import React, {\n  forwardRef,\n  InputHTMLAttributes,\n  ReactNode,\n  useContext,\n  useEffect,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\nimport {\n  AriaCheckboxGroupItemProps,\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem\n} from 'react-aria'\nimport { CheckboxGroupState, useToggleState } from 'react-stately'\n\nimport { useForkedRef } from '../../hooks'\nimport { ContextColor } from '../../types'\nimport { validationClassName } from '../../utils/validationClassName'\n\nimport { CheckboxGroupContext } from './context'\nimport { ButtonObject, renderFormCheck } from '../form/renderFormCheck'\nimport { devError, devWarning } from '../../utils/devWarning'\nimport { joinIds } from '../../utils/idRefs'\nimport { mergeUnhandledProps, TOGGLE_PROPS } from '../../utils/unhandledProps'\n\nexport type { ButtonObject } from '../form/renderFormCheck'\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> {\n  /**\n   * Create button-like checkboxes.\n   */\n  button?: ButtonObject\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the check indicator to one of Chassis context colors. Ignored when `button` is set.\n   */\n  color?: ContextColor\n  /**\n   * Whether the checkbox is selected, uncontrolled. Ignored when rendered inside a `<CheckboxGroup>` —\n   * the group's `value`/`defaultValue` owns selection there.\n   */\n  defaultSelected?: boolean\n  /**\n   * The id global attribute defines an identifier (ID) that must be unique in the whole document.\n   */\n  id?: string\n  /**\n   * Checkbox indeterminate property.\n   */\n  indeterminate?: boolean\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * Whether the checkbox is selected, controlled. Ignored when rendered inside a `<CheckboxGroup>` —\n   * the group's `value`/`defaultValue` owns selection there.\n   */\n  isSelected?: boolean\n  /**\n   * The element represents a caption for a component.\n   *\n   * Children are accepted as an alias for this prop — `label` wins when both are given.\n   * react-aria, which backs this component, calls the same thing `children`; this package renames\n   * it to `label`, and honouring both means the shape React developers reach for first still\n   * names the control instead of silently producing an unlabelled one.\n   */\n  label?: ReactNode\n  /**\n   * Callback fired when the selected state changes. Ignored when rendered inside a `<CheckboxGroup>` —\n   * use the group's `onChange` instead.\n   */\n  onChange?: (isSelected: boolean) => void\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * The value of the checkbox, used when submitting an HTML form. Required when rendered inside a\n   * `<CheckboxGroup>` — it identifies this item within the group's selected values.\n   */\n  value?: string\n}\n\nconst CheckboxStandalone = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      button,\n      children,\n      className,\n      color,\n      defaultSelected,\n      disabled,\n      id,\n      indeterminate,\n      invalid,\n      isSelected,\n      label,\n      onChange,\n      size,\n      style,\n      valid,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n\n    const toggleState = useToggleState({\n      defaultSelected,\n      isDisabled: disabled,\n      isSelected,\n      onChange\n    })\n\n    // `label` is this package's name for what react-aria calls `children`. Accept either, so the\n    // shape React developers reach for first names the control instead of vanishing.\n    const resolvedLabel = label ?? children\n\n    const { inputProps } = useCheckbox(\n      {\n        ...rest,\n        children: resolvedLabel,\n        isDisabled: disabled,\n        isIndeterminate: indeterminate,\n        isInvalid: invalid,\n        value: rest.value as string | undefined\n      } as AriaCheckboxProps,\n      toggleState,\n      inputRef\n    )\n\n    const inputClassName = classNames(validationClassName(invalid, valid))\n\n    return renderFormCheck({\n      button,\n      className,\n      color,\n      // `aria-describedby` after the spread: react-aria's own adds ids it never renders (FORMS.md,\n      // gotcha 6).\n      input: (\n        <input\n          {...mergeUnhandledProps(inputProps, rest, TOGGLE_PROPS)}\n          aria-describedby={rest['aria-describedby']}\n          className={inputClassName}\n          id={id}\n          ref={forkedRef}\n        />\n      ),\n      invalid,\n      label: resolvedLabel,\n      size,\n      style,\n      valid\n    })\n  }\n)\nCheckboxStandalone.displayName = 'CheckboxStandalone'\n\ninterface CheckboxGroupItemProps extends CheckboxProps {\n  groupDescribedBy?: string\n  groupState: CheckboxGroupState\n  groupValid?: boolean\n}\n\nconst CheckboxGroupItem = forwardRef<HTMLInputElement, CheckboxGroupItemProps>(\n  (\n    {\n      button,\n      children,\n      className,\n      color,\n      defaultSelected: _defaultSelected,\n      disabled,\n      groupDescribedBy,\n      groupState,\n      groupValid,\n      id,\n      indeterminate,\n      invalid: itemInvalid,\n      isSelected: _isSelected,\n      label,\n      onChange: _onChange,\n      size,\n      style,\n      valid: itemValid,\n      ...rest\n    },\n    ref\n  ) => {\n    // The group's own invalid/valid cascades to every item, same as RadioGroup does for Radio —\n    // but an item can still override it with its own invalid/valid, since (unlike a lone Radio) a\n    // lone Checkbox's validity is independently meaningful (see FORMS.md).\n    const invalid = itemInvalid ?? groupState.isInvalid\n    const valid = itemValid ?? groupValid\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n\n    // Once per mount, not on every render — these are dev-time misuse warnings, not something\n    // that needs to re-fire for every keystroke a parent's re-render happens to cause.\n    useEffect(() => {\n      devError(\n        !rest.value,\n        'Checkbox: a `value` prop is required when rendered inside a CheckboxGroup.'\n      )\n      devWarning(\n        _defaultSelected !== undefined || _isSelected !== undefined || _onChange !== undefined,\n        'Checkbox: `defaultSelected`, `isSelected`, and `onChange` are ignored inside a ' +\n          \"CheckboxGroup — selection is owned by the group's `value`/`defaultValue`/`onChange`.\"\n      )\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    // `label` is this package's name for what react-aria calls `children`. Accept either, so the\n    // shape React developers reach for first names the control instead of vanishing.\n    const resolvedLabel = label ?? children\n\n    const { inputProps } = useCheckboxGroupItem(\n      {\n        ...rest,\n        children: resolvedLabel,\n        isDisabled: disabled,\n        isIndeterminate: indeterminate,\n        isInvalid: invalid,\n        value: rest.value as string\n      } as AriaCheckboxGroupItemProps,\n      groupState,\n      inputRef\n    )\n\n    const inputClassName = classNames(validationClassName(invalid, valid))\n\n    return renderFormCheck({\n      button,\n      className,\n      color,\n      // Described by the group's description and error message, as react-aria intends, but only\n      // by those the group renders (FORMS.md, gotcha 6).\n      input: (\n        <input\n          {...mergeUnhandledProps(inputProps, rest, TOGGLE_PROPS)}\n          aria-describedby={joinIds(rest['aria-describedby'], groupDescribedBy)}\n          className={inputClassName}\n          id={id}\n          ref={forkedRef}\n        />\n      ),\n      invalid,\n      label: resolvedLabel,\n      size,\n      style,\n      valid\n    })\n  }\n)\nCheckboxGroupItem.displayName = 'CheckboxGroupItem'\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n  const group = useContext(CheckboxGroupContext)\n  return group ? (\n    <CheckboxGroupItem\n      {...props}\n      groupDescribedBy={group.describedBy}\n      groupState={group.state}\n      groupValid={group.valid}\n      ref={ref}\n    />\n  ) : (\n    <CheckboxStandalone {...props} ref={ref} />\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\n","import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria'\nimport { useCheckboxGroupState } from 'react-stately'\n\nimport { validationClassName } from '../../utils/validationClassName'\nimport { joinIds } from '../../utils/idRefs'\n\nimport { CheckboxGroupContext } from './context'\nimport { FormFeedback } from '../form/FormFeedback'\nimport { FormHelp } from '../form/FormHelp'\nimport { Flex } from '../flex'\n\nexport interface CheckboxGroupProps extends Omit<\n  HTMLAttributes<HTMLFieldSetElement>,\n  'defaultValue' | 'onChange'\n> {\n  /**\n   * One or more `<Checkbox>` elements.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The selected values, uncontrolled.\n   */\n  defaultValue?: string[]\n  /**\n   * A description for the group, rendered below the options.\n   */\n  description?: ReactNode\n  /**\n   * Disables every checkbox in the group.\n   */\n  disabled?: boolean\n  /**\n   * An error message for the group, rendered below the options when `invalid` is set.\n   */\n  errorMessage?: ReactNode\n  /**\n   * Set group validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * The group's caption, rendered as a `<legend>`.\n   */\n  label?: ReactNode\n  /**\n   * The name for the group, used for native form submission.\n   */\n  name?: string\n  /**\n   * Callback fired when the selected values change.\n   */\n  onChange?: (value: string[]) => void\n  /**\n   * Lay the group's checkboxes out on the same horizontal row instead of stacking them.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * Marks the group as required.\n   */\n  required?: boolean\n  /**\n   * Set group validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * The selected values, controlled.\n   */\n  value?: string[]\n}\n\nexport const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(\n  (\n    {\n      children,\n      className,\n      defaultValue,\n      description,\n      disabled,\n      errorMessage,\n      invalid,\n      label,\n      name,\n      onChange,\n      orientation,\n      required,\n      valid,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const groupProps = {\n      ...rest,\n      defaultValue,\n      description,\n      errorMessage,\n      isDisabled: disabled,\n      isInvalid: invalid,\n      isRequired: required,\n      label,\n      name,\n      onChange,\n      value\n    }\n\n    const state = useCheckboxGroupState(groupProps)\n    const {\n      groupProps: ariaGroupProps,\n      labelProps,\n      descriptionProps,\n      errorMessageProps\n    } = useCheckboxGroup(groupProps as AriaCheckboxGroupProps, state)\n\n    const _className = classNames('form-field', validationClassName(invalid, valid), className)\n\n    // Only the ids this group renders. react-aria's own describe the group and every item by a\n    // description and an error message whether or not they exist (FORMS.md, gotcha 6).\n    const describedBy = joinIds(\n      Boolean(description) && descriptionProps.id,\n      Boolean(invalid && errorMessage) && errorMessageProps.id\n    )\n\n    const items = (\n      <CheckboxGroupContext.Provider value={{ describedBy, state, valid }}>\n        {children}\n      </CheckboxGroupContext.Provider>\n    )\n\n    return (\n      <fieldset\n        {...rest}\n        {...ariaGroupProps}\n        aria-describedby={joinIds(describedBy, rest['aria-describedby'])}\n        className={_className}\n        ref={ref}\n      >\n        {label && (\n          <legend className=\"form-label\" {...labelProps}>\n            {label}\n          </legend>\n        )}\n        {orientation === 'horizontal' ? (\n          <Flex wrap=\"wrap\" gap=\"md\">\n            {items}\n          </Flex>\n        ) : (\n          items\n        )}\n        {description && <FormHelp {...descriptionProps}>{description}</FormHelp>}\n        {invalid && errorMessage && (\n          <FormFeedback invalid {...errorMessageProps}>\n            {errorMessage}\n          </FormFeedback>\n        )}\n      </fieldset>\n    )\n  }\n)\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"mappings":"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"}
+{"version":3,"file":"checkbox-ZyQn5Ku5.js","names":[],"sources":["../../src/components/checkbox/context.ts","../../src/components/checkbox/Checkbox.tsx","../../src/components/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext } from 'react'\nimport { CheckboxGroupState } from 'react-stately'\n\nexport interface CheckboxGroupContextValue {\n  state: CheckboxGroupState\n  /**\n   * `CheckboxGroup`'s own `valid` prop, mirrored here since it has no react-stately equivalent to\n   * read off `state` the way `isInvalid` does — each `Checkbox` needs it to apply its own\n   * `is-valid` class when the item doesn't set its own (same pattern as `RadioGroupContext`).\n   */\n  valid?: boolean\n  /**\n   * The ids of the group's description and error message, when they are rendered. Each item is\n   * described by them too.\n   */\n  describedBy?: string\n}\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null)\n","import React, {\n  forwardRef,\n  InputHTMLAttributes,\n  ReactNode,\n  useContext,\n  useEffect,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\nimport {\n  AriaCheckboxGroupItemProps,\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem\n} from 'react-aria'\nimport { CheckboxGroupState, useToggleState } from 'react-stately'\n\nimport { useForkedRef } from '../../hooks'\nimport { ContextColor } from '../../types'\nimport { validationClassName } from '../../utils/validationClassName'\n\nimport { CheckboxGroupContext } from './context'\nimport { ButtonObject, renderFormCheck } from '../form/renderFormCheck'\nimport { devError, devWarning } from '../../utils/devWarning'\nimport { joinIds } from '../../utils/idRefs'\nimport { mergeUnhandledProps, TOGGLE_PROPS } from '../../utils/unhandledProps'\n\nexport type { ButtonObject } from '../form/renderFormCheck'\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> {\n  /**\n   * Create button-like checkboxes.\n   */\n  button?: ButtonObject\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the check indicator to one of Chassis context colors. Ignored when `button` is set.\n   */\n  color?: ContextColor\n  /**\n   * Whether the checkbox is selected, uncontrolled. Ignored when rendered inside a `<CheckboxGroup>` —\n   * the group's `value`/`defaultValue` owns selection there.\n   */\n  defaultSelected?: boolean\n  /**\n   * The id global attribute defines an identifier (ID) that must be unique in the whole document.\n   */\n  id?: string\n  /**\n   * Checkbox indeterminate property.\n   */\n  indeterminate?: boolean\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * Whether the checkbox is selected, controlled. Ignored when rendered inside a `<CheckboxGroup>` —\n   * the group's `value`/`defaultValue` owns selection there.\n   */\n  isSelected?: boolean\n  /**\n   * The element represents a caption for a component.\n   *\n   * Children are accepted as an alias for this prop — `label` wins when both are given.\n   * react-aria, which backs this component, calls the same thing `children`; this package renames\n   * it to `label`, and honouring both means the shape React developers reach for first still\n   * names the control instead of silently producing an unlabelled one.\n   */\n  label?: ReactNode\n  /**\n   * Callback fired when the selected state changes. Ignored when rendered inside a `<CheckboxGroup>` —\n   * use the group's `onChange` instead.\n   */\n  onChange?: (isSelected: boolean) => void\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * The value of the checkbox, used when submitting an HTML form. Required when rendered inside a\n   * `<CheckboxGroup>` — it identifies this item within the group's selected values.\n   */\n  value?: string\n}\n\nconst CheckboxStandalone = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      button,\n      children,\n      className,\n      color,\n      defaultSelected,\n      disabled,\n      id,\n      indeterminate,\n      invalid,\n      isSelected,\n      label,\n      onChange,\n      size,\n      style,\n      valid,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n\n    const toggleState = useToggleState({\n      defaultSelected,\n      isDisabled: disabled,\n      isSelected,\n      onChange\n    })\n\n    // `label` is this package's name for what react-aria calls `children`. Accept either, so the\n    // shape React developers reach for first names the control instead of vanishing.\n    const resolvedLabel = label ?? children\n\n    const { inputProps } = useCheckbox(\n      {\n        ...rest,\n        children: resolvedLabel,\n        isDisabled: disabled,\n        isIndeterminate: indeterminate,\n        isInvalid: invalid,\n        value: rest.value as string | undefined\n      } as AriaCheckboxProps,\n      toggleState,\n      inputRef\n    )\n\n    const inputClassName = classNames(validationClassName(invalid, valid))\n\n    return renderFormCheck({\n      button,\n      className,\n      color,\n      // `aria-describedby` after the spread: react-aria's own adds ids it never renders (FORMS.md,\n      // gotcha 6).\n      input: (\n        <input\n          {...mergeUnhandledProps(inputProps, rest, TOGGLE_PROPS)}\n          aria-describedby={rest['aria-describedby']}\n          className={inputClassName}\n          id={id}\n          ref={forkedRef}\n        />\n      ),\n      invalid,\n      label: resolvedLabel,\n      size,\n      style,\n      valid\n    })\n  }\n)\nCheckboxStandalone.displayName = 'CheckboxStandalone'\n\ninterface CheckboxGroupItemProps extends CheckboxProps {\n  groupDescribedBy?: string\n  groupState: CheckboxGroupState\n  groupValid?: boolean\n}\n\nconst CheckboxGroupItem = forwardRef<HTMLInputElement, CheckboxGroupItemProps>(\n  (\n    {\n      button,\n      children,\n      className,\n      color,\n      defaultSelected: _defaultSelected,\n      disabled,\n      groupDescribedBy,\n      groupState,\n      groupValid,\n      id,\n      indeterminate,\n      invalid: itemInvalid,\n      isSelected: _isSelected,\n      label,\n      onChange: _onChange,\n      size,\n      style,\n      valid: itemValid,\n      ...rest\n    },\n    ref\n  ) => {\n    // The group's own invalid/valid cascades to every item, same as RadioGroup does for Radio —\n    // but an item can still override it with its own invalid/valid, since (unlike a lone Radio) a\n    // lone Checkbox's validity is independently meaningful (see FORMS.md).\n    const invalid = itemInvalid ?? groupState.isInvalid\n    const valid = itemValid ?? groupValid\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n\n    // Once per mount, not on every render — these are dev-time misuse warnings, not something\n    // that needs to re-fire for every keystroke a parent's re-render happens to cause.\n    useEffect(() => {\n      devError(\n        !rest.value,\n        'Checkbox: a `value` prop is required when rendered inside a CheckboxGroup.'\n      )\n      devWarning(\n        _defaultSelected !== undefined || _isSelected !== undefined || _onChange !== undefined,\n        'Checkbox: `defaultSelected`, `isSelected`, and `onChange` are ignored inside a ' +\n          \"CheckboxGroup — selection is owned by the group's `value`/`defaultValue`/`onChange`.\"\n      )\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    // `label` is this package's name for what react-aria calls `children`. Accept either, so the\n    // shape React developers reach for first names the control instead of vanishing.\n    const resolvedLabel = label ?? children\n\n    const { inputProps } = useCheckboxGroupItem(\n      {\n        ...rest,\n        children: resolvedLabel,\n        isDisabled: disabled,\n        isIndeterminate: indeterminate,\n        isInvalid: invalid,\n        value: rest.value as string\n      } as AriaCheckboxGroupItemProps,\n      groupState,\n      inputRef\n    )\n\n    const inputClassName = classNames(validationClassName(invalid, valid))\n\n    return renderFormCheck({\n      button,\n      className,\n      color,\n      // Described by the group's description and error message, as react-aria intends, but only\n      // by those the group renders (FORMS.md, gotcha 6).\n      input: (\n        <input\n          {...mergeUnhandledProps(inputProps, rest, TOGGLE_PROPS)}\n          aria-describedby={joinIds(rest['aria-describedby'], groupDescribedBy)}\n          className={inputClassName}\n          id={id}\n          ref={forkedRef}\n        />\n      ),\n      invalid,\n      label: resolvedLabel,\n      size,\n      style,\n      valid\n    })\n  }\n)\nCheckboxGroupItem.displayName = 'CheckboxGroupItem'\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n  const group = useContext(CheckboxGroupContext)\n  return group ? (\n    <CheckboxGroupItem\n      {...props}\n      groupDescribedBy={group.describedBy}\n      groupState={group.state}\n      groupValid={group.valid}\n      ref={ref}\n    />\n  ) : (\n    <CheckboxStandalone {...props} ref={ref} />\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\n","import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria'\nimport { useCheckboxGroupState } from 'react-stately'\n\nimport { validationClassName } from '../../utils/validationClassName'\nimport { joinIds } from '../../utils/idRefs'\n\nimport { CheckboxGroupContext } from './context'\nimport { FormFeedback } from '../form/FormFeedback'\nimport { FormHelp } from '../form/FormHelp'\nimport { Flex } from '../flex'\n\nexport interface CheckboxGroupProps extends Omit<\n  HTMLAttributes<HTMLFieldSetElement>,\n  'defaultValue' | 'onChange'\n> {\n  /**\n   * One or more `<Checkbox>` elements.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The selected values, uncontrolled.\n   */\n  defaultValue?: string[]\n  /**\n   * A description for the group, rendered below the options.\n   */\n  description?: ReactNode\n  /**\n   * Disables every checkbox in the group.\n   */\n  disabled?: boolean\n  /**\n   * An error message for the group, rendered below the options when `invalid` is set.\n   */\n  errorMessage?: ReactNode\n  /**\n   * Set group validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * The group's caption, rendered as a `<legend>`.\n   */\n  label?: ReactNode\n  /**\n   * The name for the group, used for native form submission.\n   */\n  name?: string\n  /**\n   * Callback fired when the selected values change.\n   */\n  onChange?: (value: string[]) => void\n  /**\n   * Lay the group's checkboxes out on the same horizontal row instead of stacking them.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * Marks the group as required.\n   */\n  required?: boolean\n  /**\n   * Set group validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * The selected values, controlled.\n   */\n  value?: string[]\n}\n\nexport const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(\n  (\n    {\n      children,\n      className,\n      defaultValue,\n      description,\n      disabled,\n      errorMessage,\n      invalid,\n      label,\n      name,\n      onChange,\n      orientation,\n      required,\n      valid,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const groupProps = {\n      ...rest,\n      defaultValue,\n      description,\n      errorMessage,\n      isDisabled: disabled,\n      isInvalid: invalid,\n      isRequired: required,\n      label,\n      name,\n      onChange,\n      value\n    }\n\n    const state = useCheckboxGroupState(groupProps)\n    const {\n      groupProps: ariaGroupProps,\n      labelProps,\n      descriptionProps,\n      errorMessageProps\n    } = useCheckboxGroup(groupProps as AriaCheckboxGroupProps, state)\n\n    const _className = classNames('form-field', validationClassName(invalid, valid), className)\n\n    // Only the ids this group renders. react-aria's own describe the group and every item by a\n    // description and an error message whether or not they exist (FORMS.md, gotcha 6).\n    const describedBy = joinIds(\n      Boolean(description) && descriptionProps.id,\n      Boolean(invalid && errorMessage) && errorMessageProps.id\n    )\n\n    const items = (\n      <CheckboxGroupContext.Provider value={{ describedBy, state, valid }}>\n        {children}\n      </CheckboxGroupContext.Provider>\n    )\n\n    return (\n      <fieldset\n        {...rest}\n        {...ariaGroupProps}\n        aria-describedby={joinIds(describedBy, rest['aria-describedby'])}\n        className={_className}\n        ref={ref}\n      >\n        {label && (\n          <legend className=\"form-label\" {...labelProps}>\n            {label}\n          </legend>\n        )}\n        {orientation === 'horizontal' ? (\n          <Flex wrap=\"wrap\" gap=\"md\">\n            {items}\n          </Flex>\n        ) : (\n          items\n        )}\n        {description && <FormHelp {...descriptionProps}>{description}</FormHelp>}\n        {invalid && errorMessage && (\n          <FormFeedback invalid {...errorMessageProps}>\n            {errorMessage}\n          </FormFeedback>\n        )}\n      </fieldset>\n    )\n  }\n)\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"mappings":"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"}

package/dist/chunks/colorClassNames-CEh5Yzfp.js

@@ -0,0 +1,2 @@
+const e={default:`bg-default`,alternate:`bg-alternate`,primary:`bg-primary`,secondary:`bg-secondary`,neutral:`bg-neutral`,success:`bg-success`,danger:`bg-danger`,warning:`bg-warning`,info:`bg-info`,black:`bg-black`,white:`bg-white`},t={default:`fg-default`,alternate:`fg-alternate`,primary:`fg-primary`,secondary:`fg-secondary`,neutral:`fg-neutral`,success:`fg-success`,danger:`fg-danger`,warning:`fg-warning`,info:`fg-info`,black:`fg-black`,white:`fg-white`},n={default:`icon-default`,alternate:`icon-alternate`,primary:`icon-primary`,secondary:`icon-secondary`,neutral:`icon-neutral`,success:`icon-success`,danger:`icon-danger`,warning:`icon-warning`,info:`icon-info`,black:`icon-black`,white:`icon-white`},r={default:`link-default`,alternate:`link-alternate`,primary:`link-primary`,secondary:`link-secondary`,neutral:`link-neutral`,success:`link-success`,danger:`link-danger`,warning:`link-warning`,info:`link-info`,black:`link-black`,white:`link-white`};export{r as i,t as n,n as r,e as t};
+//# sourceMappingURL=colorClassNames-CEh5Yzfp.js.map

package/dist/chunks/colorClassNames-CEh5Yzfp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorClassNames-CEh5Yzfp.js","names":[],"sources":["../../src/utils/colorClassNames.ts"],"sourcesContent":["import { ContextColor } from '../types'\n\n// The class of a context color, per family, as whole names: never `bg-${color}`.\n//\n// In the Tailwind entry of chassis-css these are utilities, generated only where Tailwind's\n// scanner finds the full class name in a source file, and it cannot read a name joined at\n// runtime: the class would have no rule, with no warning. A whole name in `dist` is found once a\n// project registers the package with `@source`. `test/utils/tailwindClassNames.spec.tsx` fails on\n// a utility name built from parts anywhere in `src/`.\n//\n// `Record<ContextColor, string>` fails the type check when a color joins the type and not a table.\n\nexport const BG_COLOR_CLASS_NAMES: Record<ContextColor, string> = {\n  default: 'bg-default',\n  alternate: 'bg-alternate',\n  primary: 'bg-primary',\n  secondary: 'bg-secondary',\n  neutral: 'bg-neutral',\n  success: 'bg-success',\n  danger: 'bg-danger',\n  warning: 'bg-warning',\n  info: 'bg-info',\n  black: 'bg-black',\n  white: 'bg-white'\n}\n\nexport const FG_COLOR_CLASS_NAMES: Record<ContextColor, string> = {\n  default: 'fg-default',\n  alternate: 'fg-alternate',\n  primary: 'fg-primary',\n  secondary: 'fg-secondary',\n  neutral: 'fg-neutral',\n  success: 'fg-success',\n  danger: 'fg-danger',\n  warning: 'fg-warning',\n  info: 'fg-info',\n  black: 'fg-black',\n  white: 'fg-white'\n}\n\nexport const ICON_COLOR_CLASS_NAMES: Record<ContextColor, string> = {\n  default: 'icon-default',\n  alternate: 'icon-alternate',\n  primary: 'icon-primary',\n  secondary: 'icon-secondary',\n  neutral: 'icon-neutral',\n  success: 'icon-success',\n  danger: 'icon-danger',\n  warning: 'icon-warning',\n  info: 'icon-info',\n  black: 'icon-black',\n  white: 'icon-white'\n}\n\nexport const LINK_COLOR_CLASS_NAMES: Record<ContextColor, string> = {\n  default: 'link-default',\n  alternate: 'link-alternate',\n  primary: 'link-primary',\n  secondary: 'link-secondary',\n  neutral: 'link-neutral',\n  success: 'link-success',\n  danger: 'link-danger',\n  warning: 'link-warning',\n  info: 'link-info',\n  black: 'link-black',\n  white: 'link-white'\n}\n"],"mappings":"AAYA,MAAa,EAAqD,CAChE,QAAS,aACT,UAAW,eACX,QAAS,aACT,UAAW,eACX,QAAS,aACT,QAAS,aACT,OAAQ,YACR,QAAS,aACT,KAAM,UACN,MAAO,WACP,MAAO,UACT,EAEa,EAAqD,CAChE,QAAS,aACT,UAAW,eACX,QAAS,aACT,UAAW,eACX,QAAS,aACT,QAAS,aACT,OAAQ,YACR,QAAS,aACT,KAAM,UACN,MAAO,WACP,MAAO,UACT,EAEa,EAAuD,CAClE,QAAS,eACT,UAAW,iBACX,QAAS,eACT,UAAW,iBACX,QAAS,eACT,QAAS,eACT,OAAQ,cACR,QAAS,eACT,KAAM,YACN,MAAO,aACP,MAAO,YACT,EAEa,EAAuD,CAClE,QAAS,eACT,UAAW,iBACX,QAAS,eACT,UAAW,iBACX,QAAS,eACT,QAAS,eACT,OAAQ,cACR,QAAS,eACT,KAAM,YACN,MAAO,aACP,MAAO,YACT"}

package/dist/chunks/datagrid-DOYxx0sF.js

@@ -0,0 +1,3 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./useForkedRef-DVEfT-KI.js";import{n as t}from"./lazyElement-tfMG21pZ.js";import{t as n}from"./tableClassName-DleBjOj2.js";import r,{forwardRef as i,useEffect as a,useId as o,useMemo as s,useRef as c,useState as l}from"react";import u from"classnames";import{useCheckbox as d}from"react-aria";import{useToggleState as f}from"react-stately";import{Cell as p,CheckboxContext as m,Column as h,Row as g,Table as _,TableBody as v,TableHeader as y,TableLayout as b,TableLoadMoreItem as x,Virtualizer as S,useSlottedContext as C}from"react-aria-components";const w=/^\d+(\.\d+)?%?$/,T=e=>e!=null&&(typeof e==`number`||w.test(e)),E=(e,t)=>typeof e==`number`?e:e.endsWith(`%`)?parseFloat(e)/100*t:parseFloat(e);function D(e,t){let n=new Map,r=0,i=!0;for(let a of e){if(!i||!T(a.defaultWidth)){i=!1,n.set(a.id,null);continue}let e=E(a.defaultWidth,t);T(a.minWidth)&&(e=Math.max(e,E(a.minWidth,t))),T(a.maxWidth)&&(e=Math.min(e,E(a.maxWidth,t))),n.set(a.id,{id:a.id,offset:r,width:e}),r+=e}return n}const O=e=>{let t=new Map;return e.querySelectorAll(`[role="columnheader"]`).forEach(e=>{let n=Number(e.getAttribute(`aria-colindex`));!Number.isInteger(n)||n<1||t.set(n-1,{offset:e.offsetLeft,width:e.offsetWidth})}),t};function k(e,t){let[n,r]=l(0),[i,o]=l(()=>new Map);a(()=>{let e=t.current;if(!e||typeof ResizeObserver>`u`)return;let n=()=>{r(e.clientWidth),o(O(e))};n();let i=new ResizeObserver(n);return i.observe(e),()=>i.disconnect()},[t]);let c=s(()=>D(e,n),[e,n]);return s(()=>{let t=new Map;return e.forEach((e,n)=>{let r=c.get(e.id),a=i.get(n);r?t.set(e.id,r):a&&t.set(e.id,{id:e.id,...a})}),t},[e,c,i])}const A=e=>`[aria-colindex="${e+1}"]`,j=({header:e,instanceClassName:n,containerRef:i})=>{let o=t(e).props.children,c=s(()=>typeof o==`function`?[]:r.Children.toArray(o),[o]),l=c.map(e=>{if(!r.isValidElement(e))return``;let{defaultWidth:t,maxWidth:n,minWidth:i,pin:a}=e.props;return`${t??``}/${i??``}/${n??``}/${a??``}`}).join(`|`),{all:u,endIndices:d,startIndices:f}=s(()=>{let e={all:[],endIndices:[],startIndices:[]};return c.forEach((t,n)=>{if(!r.isValidElement(t))return;let{defaultWidth:i,maxWidth:a,minWidth:o,pin:s}=t.props;e.all.push({id:n,defaultWidth:i,maxWidth:a,minWidth:o}),s===`start`?e.startIndices.push(n):s===`end`&&e.endIndices.push(n)}),e},[l]),p=k(u,i),m=s(()=>{let e=new Map,t=0;for(let n=d.length-1;n>=0;n--){let r=d[n];if(r==null)continue;let i=p.get(r)?.width??0;e.set(r,{index:r,rightOffset:t}),t+=i}return e},[d,p]);if(a(()=>{let e=i.current;if(!e||m.size===0)return;let t=null,n=new Set,r=()=>{t=null;let r=e.clientWidth,i=e.scrollLeft;e.querySelectorAll(`[role="row"]`).forEach(e=>{m.forEach(({index:t,rightOffset:a})=>{let o=e.querySelector(A(t))?.parentElement;if(!o)return;let s=p.get(t);if(!s)return;let c=s.offset+s.width,l=r-a-c+i;o.style.transform=`translateX(${l}px)`,o.style.zIndex=`2`,n.add(o)})})},a=()=>{t??=requestAnimationFrame(r)};a(),e.addEventListener(`scroll`,a,{passive:!0});let o=typeof ResizeObserver>`u`?null:new ResizeObserver(a);o?.observe(e);let s=typeof MutationObserver>`u`?null:new MutationObserver(a);return s?.observe(e,{childList:!0,subtree:!0}),()=>{t!=null&&cancelAnimationFrame(t),e.removeEventListener(`scroll`,a),o?.disconnect(),s?.disconnect(),n.forEach(e=>{e.style.transform=``,e.style.zIndex=``})}},[i,m,p]),f.length===0&&d.length===0)return null;let h=[];if(f.length>0){let e=Math.max(...f);h.push(`.${n}.datagrid-scrolled-start ${A(e)} { box-shadow: var(--datagrid-pin-cue-shadow-start); }`)}if(d.length>0){let e=Math.min(...d);h.push(`.${n}.datagrid-scrolled-end ${A(e)} { box-shadow: var(--datagrid-pin-cue-shadow-end); }`)}return r.createElement(`style`,null,h.join(`
+`))};var M=class extends b{isStickyColumn(e){let t=e.type===`column`?e.index:e.colIndex??e.index;return t!=null&&this.collection.columns[t]?.props?.pin===`start`}buildRowGroup(...e){let t=super.buildRowGroup(...e);return t.layoutInfo.rect.height=Math.max(0,t.layoutInfo.rect.height),t}};const N=i(({align:t,bordered:i,borderless:d,children:f,className:p,color:m,disabledKeys:h,estimatedRowHeight:g,footer:v,hover:y,onSelectionChange:b,onSortChange:x,rowHeight:C,selectedKeys:w,selectionMode:T=`none`,sm:E,sortDescriptor:D,...O},k)=>{let A=C===`auto`,N=s(()=>new M(A?{estimatedRowHeight:g,headingHeight:g}:{rowHeight:C}),[A,C,g]),P=c(null),F=e(k,P),I=`datagrid-${o().replace(/[^a-zA-Z0-9]/g,``)}`,[L,R]=l(!1),[z,B]=l(!1);a(()=>{let e=P.current;if(!e)return;let t=()=>{R(e.scrollLeft>0),B(Math.ceil(e.scrollLeft+e.clientWidth)<e.scrollWidth)};t(),e.addEventListener(`scroll`,t,{passive:!0});let n=typeof ResizeObserver>`u`?null:new ResizeObserver(t);return n?.observe(e),()=>{e.removeEventListener(`scroll`,t),n?.disconnect()}},[]);let V=u(`datagrid`,I,m,t&&n[t],{bordered:i,borderless:d,hoverable:y,sm:E,"datagrid-scrolled-start":L,"datagrid-scrolled-end":z},p);return r.createElement(S,{layout:N,shouldObserveItemSize:A},r.createElement(_,{"aria-label":O[`aria-label`],"aria-labelledby":O[`aria-labelledby`],className:V||void 0,disabledKeys:h,onSelectionChange:b,onSortChange:x,ref:F,selectedKeys:w,selectionMode:T,sortDescriptor:D,render:e=>r.createElement(`div`,{...e,"aria-describedby":e[`aria-describedby`]||void 0})},f),v&&r.createElement(`div`,{className:u(`datagrid-footer`,{borderless:d})},v),r.createElement(j,{containerRef:P,header:f[0],instanceClassName:I}))});N.displayName=`DataGrid`;const P={id:`__datagrid-body-loader__`},F=({children:e,className:t,dependencies:n,isLoading:i,items:a,loadingContent:o,onLoadMore:c,renderEmptyState:l})=>{let d=c!=null&&a!=null,f=s(()=>d?[...a,P]:a,[d,a]),p=s(()=>d?[...n??[],i,c,o]:n,[n,d,i,c,o]),m=d?t=>t===P?r.createElement(x,{className:`datagrid-loader`,isLoading:i,onLoadMore:i?void 0:c},o):e(t):e;return r.createElement(v,{className:u(`datagrid-body`,t),dependencies:p,items:f,renderEmptyState:l},m)},I=({children:e,className:t,colSpan:n,id:i,textValue:a})=>r.createElement(p,{className:u(`datagrid-cell`,t),colSpan:n,id:i,textValue:a},e),L=({allowsSorting:e,children:t,className:n,defaultWidth:i,id:a,isRowHeader:o,maxWidth:s,minWidth:c,pin:l,textValue:d})=>r.createElement(h,{allowsSorting:e,className:u(`datagrid-col`,l&&`datagrid-col-pinned-${l}`,n),defaultWidth:i,id:a,isRowHeader:o,maxWidth:s,minWidth:c,textValue:d,pin:l},e?({sortDirection:e})=>r.createElement(r.Fragment,null,t,r.createElement(`span`,{"aria-hidden":`true`,className:`datagrid-sort-icon`},e===`ascending`?`▲`:e===`descending`?`▼`:`⇅`)):t),R=({children:e,className:t,columns:n,dependencies:i})=>r.createElement(y,{className:u(`datagrid-header`,t),columns:n,dependencies:i},e),z=({children:e,className:t,columns:n,id:i,textValue:a})=>r.createElement(g,{className:u(`datagrid-row`,t),columns:n,id:i,textValue:a},e),B=e=>{let t=C(m,`selection`);if(!t)throw Error(`${e} must be rendered inside a DataGrid with selection enabled.`);return t},V=({className:e})=>{let t=B(`DataGridSelectionCell`);return r.createElement(U,{checkboxProps:t,className:e})},H=({className:e})=>{let t=B(`DataGridSelectAllCell`);return r.createElement(U,{checkboxProps:t,className:e})},U=({checkboxProps:e,className:t})=>{let n=f(e),i=c(null),{inputProps:a}=d(e,n,i);return r.createElement(`input`,{...a,"aria-describedby":void 0,className:t??`check-input`,ref:i})};export{L as a,N as c,R as i,V as n,I as o,z as r,F as s,H as t};
+//# sourceMappingURL=datagrid-DOYxx0sF.js.map

package/dist/chunks/datagrid-DOYxx0sF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datagrid-DOYxx0sF.js","names":["AriaTable","AriaTableBody","AriaCell","AriaColumn","AriaTableHeader","AriaRow"],"sources":["../../src/components/datagrid/useColumnGeometry.ts","../../src/components/datagrid/DataGridPinBehavior.tsx","../../src/components/datagrid/DataGridTableLayout.ts","../../src/components/datagrid/DataGrid.tsx","../../src/components/datagrid/DataGridBody.tsx","../../src/components/datagrid/DataGridCell.tsx","../../src/components/datagrid/DataGridColumn.tsx","../../src/components/datagrid/DataGridHeader.tsx","../../src/components/datagrid/DataGridRow.tsx","../../src/components/datagrid/DataGridSelectionCell.tsx"],"sourcesContent":["import { RefObject, useEffect, useMemo, useState } from 'react'\nimport { Key } from 'react-aria-components'\nimport { ColumnSize, ColumnStaticSize } from 'react-stately'\n\nexport interface ColumnGeometryColumn {\n  /**\n   * The column's unique id — matches `DataGridColumn`'s `id`/collection key.\n   */\n  id: Key\n  /**\n   * Mirrors `DataGridColumn`'s prop of the same name.\n   */\n  defaultWidth?: ColumnSize | null\n  /**\n   * Mirrors `DataGridColumn`'s prop of the same name.\n   */\n  minWidth?: ColumnStaticSize | null\n  /**\n   * Mirrors `DataGridColumn`'s prop of the same name.\n   */\n  maxWidth?: ColumnStaticSize | null\n}\n\nexport interface ColumnOffset {\n  id: Key\n  /**\n   * Cumulative distance in pixels from the start edge of the row to this column's start edge.\n   */\n  offset: number\n  width: number\n}\n\nconst STATIC_SIZE_PATTERN = /^\\d+(\\.\\d+)?%?$/\n\n/**\n * Whether a `ColumnSize` resolves to a definite pixel value without waiting for layout: a plain\n * number, a numeric string (`'150'`), or a percentage string (`'50%'`) — resolvable as soon as\n * the container's own width is known. An `'<n>fr'` string is proportional — it only resolves to\n * pixels once the layout engine has distributed the container's remaining space among every\n * fractional column, so it's excluded here.\n */\nexport const isStaticColumnSize = (size: ColumnSize | null | undefined): size is ColumnStaticSize =>\n  size != null && (typeof size === 'number' || STATIC_SIZE_PATTERN.test(size))\n\nconst resolveStaticWidth = (size: ColumnStaticSize, containerWidth: number): number => {\n  if (typeof size === 'number') return size\n  return size.endsWith('%') ? (parseFloat(size) / 100) * containerWidth : parseFloat(size)\n}\n\n/**\n * Computes cumulative left-edge offsets for a list of columns from their declared\n * `defaultWidth`/`minWidth`/`maxWidth` props, without reading the DOM. Only correct for a column\n * whose own width — and every preceding column's width — is statically resolvable (see\n * `isStaticColumnSize`): a column at or after the first `fr`-sized column has no offset that can\n * be known before layout runs, so it resolves to `null`. Callers should fall back to\n * `useColumnGeometry`'s DOM measurement for those.\n */\nexport function calculateStaticColumnOffsets(\n  columns: readonly ColumnGeometryColumn[],\n  containerWidth: number\n): Map<Key, ColumnOffset | null> {\n  const offsets = new Map<Key, ColumnOffset | null>()\n  let offset = 0\n  let resolvable = true\n\n  for (const column of columns) {\n    if (!resolvable || !isStaticColumnSize(column.defaultWidth)) {\n      resolvable = false\n      offsets.set(column.id, null)\n      continue\n    }\n\n    let width = resolveStaticWidth(column.defaultWidth, containerWidth)\n    if (isStaticColumnSize(column.minWidth)) {\n      width = Math.max(width, resolveStaticWidth(column.minWidth, containerWidth))\n    }\n    if (isStaticColumnSize(column.maxWidth)) {\n      width = Math.min(width, resolveStaticWidth(column.maxWidth, containerWidth))\n    }\n\n    offsets.set(column.id, { id: column.id, offset, width })\n    offset += width\n  }\n\n  return offsets\n}\n\ninterface MeasuredRect {\n  offset: number\n  width: number\n}\n\n/**\n * Measures the mounted column-header cells, keyed by their 0-based column position.\n *\n * Keyed off each cell's own `aria-colindex` (1-based, assigned from the column's position in the\n * resolved collection) rather than its position among the cells that happen to be in the DOM: the\n * layout engine windows columns horizontally as well as rows, so `querySelectorAll` returns only\n * the headers intersecting the horizontal viewport. Matching those positionally to the full column\n * list — as this used to — mapped every column past the first unmounted one onto the wrong rect.\n * A header without the attribute is skipped rather than guessed at.\n */\nconst measureColumnHeaders = (container: HTMLElement): Map<number, MeasuredRect> => {\n  const measured = new Map<number, MeasuredRect>()\n  container.querySelectorAll<HTMLElement>('[role=\"columnheader\"]').forEach((cell) => {\n    const colIndex = Number(cell.getAttribute('aria-colindex'))\n    if (!Number.isInteger(colIndex) || colIndex < 1) return\n    measured.set(colIndex - 1, { offset: cell.offsetLeft, width: cell.offsetWidth })\n  })\n  return measured\n}\n\n/**\n * Resolves each column's rendered left-offset and width, independent of the virtualizer's\n * private layout internals. Statically-sized columns (see `isStaticColumnSize`) resolve\n * immediately from their declared props; `fr`-sized (proportional) columns fall back to\n * `ResizeObserver`-measured DOM rects of the mounted `[role=\"columnheader\"]` cells inside\n * `containerRef`, matched to `columns` by `aria-colindex` (see `measureColumnHeaders`), since\n * those only resolve to real pixels after the layout engine has actually distributed space.\n */\nexport function useColumnGeometry(\n  columns: readonly ColumnGeometryColumn[],\n  containerRef: RefObject<HTMLElement | null>\n): Map<Key, ColumnOffset> {\n  const [containerWidth, setContainerWidth] = useState(0)\n  const [measured, setMeasured] = useState<Map<number, MeasuredRect>>(() => new Map())\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container || typeof ResizeObserver === 'undefined') return\n\n    const measure = () => {\n      setContainerWidth(container.clientWidth)\n      setMeasured(measureColumnHeaders(container))\n    }\n\n    measure()\n    const observer = new ResizeObserver(measure)\n    observer.observe(container)\n    return () => observer.disconnect()\n  }, [containerRef])\n\n  const staticOffsets = useMemo(\n    () => calculateStaticColumnOffsets(columns, containerWidth),\n    [columns, containerWidth]\n  )\n\n  return useMemo(() => {\n    const result = new Map<Key, ColumnOffset>()\n    columns.forEach((column, index) => {\n      const staticOffset = staticOffsets.get(column.id)\n      const measuredRect = measured.get(index)\n      if (staticOffset) {\n        result.set(column.id, staticOffset)\n      } else if (measuredRect) {\n        result.set(column.id, { id: column.id, ...measuredRect })\n      }\n    })\n    return result\n  }, [columns, staticOffsets, measured])\n}\n","import React, { ReactElement, RefObject, useEffect, useMemo } from 'react'\n\nimport { resolveLazy } from '../../utils/lazyElement'\nimport { DataGridColumnProps } from './DataGridColumn'\nimport { DataGridHeaderProps } from './DataGridHeader'\nimport { ColumnGeometryColumn, useColumnGeometry } from './useColumnGeometry'\n\nexport interface DataGridPinBehaviorProps<T> {\n  /**\n   * The same header element passed as `DataGrid`'s first child. Read directly (rather than via\n   * `TableStateContext`) because react-aria-components' virtualized `<Table>` only ever renders\n   * DOM output for its own collection-derived tree — an arbitrary extra child (like this\n   * component, if it were nested inside `<Table>`) never mounts, regardless of context\n   * availability. Only the static-children form of `DataGridHeader` can be introspected this\n   * way; the `columns`/render-function form gets no pinned-column behavior from here (`pin=\n   * \"start\"`'s positioning still works either way — see `DataGridTableLayout`, which reads pin\n   * state off the resolved collection instead, not off this introspection).\n   */\n  header: ReactElement<DataGridHeaderProps<T>>\n  /**\n   * A CSS class unique to this `DataGrid` instance, scoping the generated rules below so\n   * multiple grids on the same page (with different pinned columns) don't collide.\n   */\n  instanceClassName: string\n  /**\n   * Ref to `DataGrid`'s own scrolling root — used both to measure `fr`-sized pinned columns via\n   * `useColumnGeometry` and, for `pin=\"end\"`, to find and reposition its cells on scroll (see\n   * below).\n   */\n  containerRef: RefObject<HTMLElement | null>\n}\n\ninterface PinnedColumnInfo {\n  index: number\n  /** Cumulative width of the end-pinned columns after this one — its distance from the edge. */\n  rightOffset: number\n}\n\ninterface DeclaredColumns {\n  all: ColumnGeometryColumn[]\n  endIndices: number[]\n  startIndices: number[]\n}\n\n/**\n * A cell's (1-based) `aria-colindex` for the (0-based) column position it was declared at.\n *\n * Every cell and column header react-aria-components renders carries `aria-colindex`, set from the\n * column's position in the resolved collection — which is the declaration order this component\n * reads off the header's JSX. That makes it the one stable handle from a declared column back to\n * its rendered DOM, and the reason nothing here counts DOM children: the layout engine windows\n * columns horizontally as well as rows (only the cells intersecting the horizontal viewport are\n * mounted, see `datagrid.mdx`'s Scope section), so a row's child count is the size of the mounted\n * window, not the column count. The `nth-child`/`nth-last-child` arithmetic this used to do was\n * therefore only correct while every column happened to be mounted, and silently moved and\n * shadowed the wrong cells in exactly the wide grids pinning exists for.\n */\nconst colIndexSelector = (index: number) => `[aria-colindex=\"${index + 1}\"]`\n\n/**\n * Handles the two things `DataGrid`'s own layout subclass (`DataGridTableLayout`) can't:\n *\n * - `pin=\"end\"`'s positioning. `DataGridTableLayout` reuses the layout engine's own sticky\n *   mechanism for `pin=\"start\"`, but that mechanism is hardcoded to the leading edge — there's no\n *   upstream hook for a trailing-edge pin. A pure-CSS `position: sticky; right: 0` equivalent\n *   doesn't work either: for the *last* child of a horizontally-scrolling container, the browser's\n *   own max-scroll bound is defined such that its gap to the viewport's trailing edge never goes\n *   negative until the very last pixel of scroll — sticky has nothing to correct until then, so it\n *   renders exactly like `position: absolute` for the entire scroll range up to that point (this is\n *   a well-known, verified-here CSS limitation, not specific to this layout). So `pin=\"end\"` is\n *   positioned imperatively instead: on every scroll (and on mount/resize), each `pin=\"end\"`\n *   column's auto-generated wrapper div gets a `transform: translateX(...)` that keeps it flush\n *   against the scroll viewport's trailing edge, computed from `useColumnGeometry`'s cumulative\n *   offsets, plus the `z-index` that keeps it above the cells it now overlaps. This bypasses React\n *   for those two styles, similar to how other virtualized grids (e.g. AG-Grid) handle right-pinned\n *   columns — react-aria-components' own layout doesn't re-render an already-mounted cell's style on\n *   a plain scroll (its `layoutInfo` doesn't depend on scroll position), so there's no fight between\n *   this and React's own reconciliation; newly-mounted rows (from vertical scroll bringing fresh\n *   cells into the virtualized window) are covered by the same scroll-driven sync running again.\n * - The scroll-cue box-shadow on the boundary column of each pinned group (the last `pin=\"start\"`\n *   column, the first `pin=\"end\"` column) — shown only once the grid has actually scrolled far\n *   enough to hide content under it, via the `datagrid-scrolled-start`/`datagrid-scrolled-end`\n *   classes `DataGrid` toggles on scroll. This part stays pure CSS since box-shadow, unlike\n *   sticky's position offsets, has no \"last child\" gotcha.\n *\n * Rendered as a plain sibling of `DataGrid`'s `<Table>`, not inside it.\n */\nexport const DataGridPinBehavior = <T extends object>({\n  header,\n  instanceClassName,\n  containerRef\n}: DataGridPinBehaviorProps<T>) => {\n  // A header written in a Server Component can arrive as a lazy node (see `utils/lazyElement`).\n  const headerChildren = resolveLazy(header).props.children\n\n  // Re-derived only when a column's own sizing/pin props actually change, not on every parent\n  // render: `useColumnGeometry` keys its memoized result off this array's identity, and the\n  // scroll-sync effect below keys off that result in turn — rebuilding it unconditionally tore\n  // down and re-registered the effect's scroll listener and its two observers on every single\n  // `DataGrid` render.\n  const columnElements = useMemo(\n    () => (typeof headerChildren === 'function' ? [] : React.Children.toArray(headerChildren)),\n    [headerChildren]\n  )\n  const declaredKey = columnElements\n    .map((element) => {\n      if (!React.isValidElement<DataGridColumnProps>(element)) return ''\n      const { defaultWidth, maxWidth, minWidth, pin } = element.props\n      return `${defaultWidth ?? ''}/${minWidth ?? ''}/${maxWidth ?? ''}/${pin ?? ''}`\n    })\n    .join('|')\n\n  const {\n    all: allColumns,\n    endIndices,\n    startIndices\n  } = useMemo<DeclaredColumns>(() => {\n    const declared: DeclaredColumns = { all: [], endIndices: [], startIndices: [] }\n    columnElements.forEach((element, index) => {\n      if (!React.isValidElement<DataGridColumnProps>(element)) return\n      const { defaultWidth, maxWidth, minWidth, pin } = element.props\n      declared.all.push({ id: index, defaultWidth, maxWidth, minWidth })\n      if (pin === 'start') declared.startIndices.push(index)\n      else if (pin === 'end') declared.endIndices.push(index)\n    })\n    return declared\n    // `declaredKey` is the value-based identity of `columnElements` — a fresh JSX array every\n    // render, so its own reference can't be the dependency.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [declaredKey])\n\n  const offsets = useColumnGeometry(allColumns, containerRef)\n\n  // Cumulative width of the end-pinned columns after this one, keyed by column index — how far\n  // from the viewport's trailing edge each one needs to sit so they stack correctly.\n  const endPinnedInfo = useMemo(() => {\n    const info = new Map<number, PinnedColumnInfo>()\n    let right = 0\n    for (let i = endIndices.length - 1; i >= 0; i--) {\n      const index = endIndices[i]\n      if (index == null) continue\n      const width = offsets.get(index)?.width ?? 0\n      info.set(index, { index, rightOffset: right })\n      right += width\n    }\n    return info\n  }, [endIndices, offsets])\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container || endPinnedInfo.size === 0) return\n\n    let frame: number | null = null\n    // The wrappers this effect has written inline styles onto, so they can be handed back\n    // unstyled when it tears down — un-pinning a column at runtime (or unmounting this behavior\n    // while the grid stays) otherwise left its cells stuck at their last scroll offset.\n    const styled = new Set<HTMLElement>()\n\n    const sync = () => {\n      frame = null\n      const clientWidth = container.clientWidth\n      const scrollLeft = container.scrollLeft\n      const rows = container.querySelectorAll<HTMLElement>('[role=\"row\"]')\n      rows.forEach((row) => {\n        endPinnedInfo.forEach(({ index, rightOffset }) => {\n          const cell = row.querySelector<HTMLElement>(colIndexSelector(index))\n          const wrapper = cell?.parentElement\n          if (!wrapper) return\n          const offset = offsets.get(index)\n          if (!offset) return\n          const rightEdge = offset.offset + offset.width\n          const delta = clientWidth - rightOffset - rightEdge + scrollLeft\n          wrapper.style.transform = `translateX(${delta}px)`\n          // Above the unpinned cells it now overlaps. Set here rather than in the generated\n          // stylesheet below because the virtualizer writes the wrapper's own `z-index` inline,\n          // which no plain rule can outrank without `!important`.\n          wrapper.style.zIndex = '2'\n          styled.add(wrapper)\n        })\n      })\n    }\n\n    const scheduleSync = () => {\n      if (frame == null) frame = requestAnimationFrame(sync)\n    }\n\n    scheduleSync()\n    container.addEventListener('scroll', scheduleSync, { passive: true })\n    const resizeObserver =\n      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleSync)\n    resizeObserver?.observe(container)\n    const mutationObserver =\n      typeof MutationObserver === 'undefined' ? null : new MutationObserver(scheduleSync)\n    mutationObserver?.observe(container, { childList: true, subtree: true })\n\n    return () => {\n      if (frame != null) cancelAnimationFrame(frame)\n      container.removeEventListener('scroll', scheduleSync)\n      resizeObserver?.disconnect()\n      mutationObserver?.disconnect()\n      styled.forEach((wrapper) => {\n        wrapper.style.transform = ''\n        wrapper.style.zIndex = ''\n      })\n    }\n  }, [containerRef, endPinnedInfo, offsets])\n\n  if (startIndices.length === 0 && endIndices.length === 0) return null\n\n  const rules: string[] = []\n\n  if (startIndices.length > 0) {\n    const lastStartIndex = Math.max(...startIndices)\n    rules.push(\n      `.${instanceClassName}.datagrid-scrolled-start ${colIndexSelector(lastStartIndex)} { box-shadow: var(--datagrid-pin-cue-shadow-start); }`\n    )\n  }\n\n  if (endIndices.length > 0) {\n    const firstEndIndex = Math.min(...endIndices)\n    rules.push(\n      `.${instanceClassName}.datagrid-scrolled-end ${colIndexSelector(firstEndIndex)} { box-shadow: var(--datagrid-pin-cue-shadow-end); }`\n    )\n  }\n\n  return <style>{rules.join('\\n')}</style>\n}\n","import { TableLayout } from 'react-aria-components'\n\ninterface StickyColumnNode {\n  type: string\n  index: number\n  colIndex?: number | null\n}\n\n/**\n * `DataGrid`'s own subclass of react-aria-components' `TableLayout`, overriding the (protected,\n * hardcoded-`false` upstream) `isStickyColumn` hook so a `pin=\"start\"` `DataGridColumn` uses the\n * layout engine's own sticky-positioning machinery — the same mechanism that already makes the\n * header row pin to the top (`buildTableHeader` sets `layoutInfo.isSticky = true` unconditionally\n * there). The subclass exists instead of a pure-CSS `position: sticky` override because\n * react-aria-components' own `TableLayout` never overrides `isStickyColumn`, so no column becomes\n * visually sticky by default — and because the engine, not CSS, owns each cell wrapper's `left`.\n *\n * `pin=\"end\"` isn't handled here — the engine's sticky positioning is hardcoded to the leading\n * edge (`position: sticky; left: ...`, mirrored to `right` only for RTL *direction*, never per\n * column), so there's no upstream mechanism to reuse for a trailing pin in an LTR grid. See\n * `DataGrid.scss`'s `nth-last-child`-based rules for that half instead.\n */\nexport class DataGridTableLayout<T> extends TableLayout<T> {\n  protected isStickyColumn(node: StickyColumnNode): boolean {\n    const colIndex = node.type === 'column' ? node.index : (node.colIndex ?? node.index)\n    if (colIndex == null) return false\n    const column = this.collection.columns[colIndex]\n    return (column?.props as { pin?: 'start' | 'end' } | undefined)?.pin === 'start'\n  }\n\n  // An empty body fills the viewport below the header. On the server the viewport has no size,\n  // so the body came out as tall as minus the header (`height: -40px`), which CSS doesn't allow.\n  protected buildRowGroup(...args: Parameters<TableLayout<T>['buildRowGroup']>) {\n    const group = super.buildRowGroup(...args)\n    group.layoutInfo.rect.height = Math.max(0, group.layoutInfo.rect.height)\n    return group\n  }\n}\n","import React, {\n  ReactElement,\n  ReactNode,\n  Ref,\n  forwardRef,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState\n} from 'react'\nimport classNames from 'classnames'\nimport {\n  Key,\n  Selection,\n  SortDescriptor,\n  Table as AriaTable,\n  Virtualizer\n} from 'react-aria-components'\n\nimport { useForkedRef } from '../../hooks/useForkedRef'\nimport { ContextColor } from '../../types'\nimport { TABLE_ALIGN_CLASS_NAMES } from '../../utils/tableClassName'\nimport { DataGridBodyProps } from './DataGridBody'\nimport { DataGridHeaderProps } from './DataGridHeader'\nimport { DataGridPinBehavior } from './DataGridPinBehavior'\nimport { DataGridTableLayout } from './DataGridTableLayout'\nimport './DataGrid.scss'\n\n// No `striped`/`stacked` props: zebra-striping via CSS `:nth-of-type` (Table's approach) isn't\n// virtualization-safe — a windowed row's DOM siblings are only the currently-mounted rows, not\n// every logical row, so the stripe parity would flip as the mounted window's starting index\n// changes during scroll. A correct implementation needs the row's real index at render time, not\n// a pure-CSS trick; deferred rather than shipped broken.\ninterface DataGridOwnProps<T extends object> {\n  /**\n   * An accessible label for the grid, used when there's no visible heading.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible heading element for the grid.\n   */\n  'aria-labelledby'?: string\n  /**\n   * Set the vertical alignment of cell content. Mirrors `Table`'s prop of the same name for API\n   * parity — same as `Table`, this awaits chassis-css adding the matching `.align-*` styles.\n   */\n  align?: 'bottom' | 'middle' | 'top'\n  /**\n   * Add borders on all sides of the grid and cells.\n   */\n  bordered?: boolean\n  /**\n   * Remove borders on all sides of the grid and cells.\n   */\n  borderless?: boolean\n  /**\n   * A `DataGridHeader` and a `DataGridBody`, each built from `DataGridColumn`/`DataGridRow`/\n   * `DataGridCell`.\n   */\n  children: [ReactElement<DataGridHeaderProps<T>>, ReactElement<DataGridBodyProps<T>>]\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the component.\n   */\n  color?: ContextColor\n  /**\n   * A list of row keys to disable. Disabled rows cannot be selected, focused, or interacted with.\n   */\n  disabledKeys?: Iterable<Key>\n  /**\n   * Content shown below the grid, e.g. a totals row or a \"load more\" control. Rendered as plain\n   * markup outside the grid's own scrollable/virtualized region — not part of the\n   * keyboard-navigable grid, and never scrolls out of view along with the body rows. Mirrors\n   * `Table`'s `footer` prop for API parity.\n   */\n  footer?: ReactNode\n  /**\n   * Enable a hover state on grid rows.\n   */\n  hover?: boolean\n  /**\n   * Handler that is called when the selection changes.\n   */\n  onSelectionChange?: (keys: Selection) => void\n  /**\n   * Handler that is called when a column is sorted.\n   */\n  onSortChange?: (descriptor: SortDescriptor) => void\n  /**\n   * The currently selected row keys (controlled).\n   */\n  selectedKeys?: Selection\n  /**\n   * The type of selection that is allowed.\n   */\n  selectionMode?: 'none' | 'single' | 'multiple'\n  /**\n   * Make the grid more compact by cutting all cell padding.\n   */\n  sm?: boolean\n  /**\n   * The current sort column and direction.\n   */\n  sortDescriptor?: SortDescriptor\n}\n\ntype DataGridRowHeightProps =\n  | {\n      /**\n       * Row height in pixels, or `\"auto\"` to measure each row from its own rendered content\n       * instead of a single fixed height shared by every row (pair it with a required\n       * `estimatedRowHeight`, and see the docs site's \"Variable row height\" section for the\n       * tradeoffs). A fixed number renders every row, including the header, at that exact\n       * height; content taller than it visually overflows rather than growing the row.\n       */\n      rowHeight: number\n      estimatedRowHeight?: never\n    }\n  | {\n      rowHeight: 'auto'\n      /**\n       * Seeds the virtualizer's scroll-position math for rows that haven't been measured yet.\n       * Required when `rowHeight=\"auto\"` — pick a value close to the typical row's real height\n       * to minimize scroll-jump on first measurement. A row's real height can still turn out far\n       * from this estimate once it renders, which can cause a visible scroll-jump for rows the\n       * viewport hasn't reached yet.\n       */\n      estimatedRowHeight: number\n    }\n\nexport type DataGridProps<T extends object> = DataGridOwnProps<T> & DataGridRowHeightProps\n\nconst DataGridInner = <T extends object>(\n  {\n    align,\n    bordered,\n    borderless,\n    children,\n    className,\n    color,\n    disabledKeys,\n    estimatedRowHeight,\n    footer,\n    hover,\n    onSelectionChange,\n    onSortChange,\n    rowHeight,\n    selectedKeys,\n    selectionMode = 'none',\n    sm,\n    sortDescriptor,\n    ...rest\n  }: DataGridProps<T>,\n  forwardedRef: Ref<HTMLDivElement>\n) => {\n  const isVariableRowHeight = rowHeight === 'auto'\n  const layout = useMemo(\n    () =>\n      new DataGridTableLayout<T>(\n        // `headingHeight` is pinned to `estimatedRowHeight` (fixed, not itself an estimate) in\n        // variable-height mode — leaving it unset falls back to `estimatedRowHeight` as an\n        // *estimate* for the header too, which sounds harmless but isn't: the header's own\n        // sticky-positioned outer wrapper (built once in `buildTableHeader`, see\n        // `DataGridTableLayout`'s doc comment for why the header is sticky at all) is never\n        // recomputed when a column-header cell's later real measurement corrects its height, so\n        // the outer wrapper's stale height desyncs from the cell's real one, spilling header\n        // content into the body's first row instead of the header growing to fit it. Fixing the\n        // header's height sidesteps that gap instead of shipping it.\n        isVariableRowHeight\n          ? { estimatedRowHeight, headingHeight: estimatedRowHeight }\n          : { rowHeight }\n      ),\n    [isVariableRowHeight, rowHeight, estimatedRowHeight]\n  )\n  const gridRef = useRef<HTMLDivElement>(null)\n  const ref = useForkedRef(forwardedRef, gridRef)\n\n  // A stable per-instance class, scoping DataGridPinBehavior's generated CSS so multiple grids on\n  // the same page (each with their own pinned columns) don't collide.\n  const rawId = useId()\n  const instanceClassName = `datagrid-${rawId.replace(/[^a-zA-Z0-9]/g, '')}`\n\n  // Drives the pin=start/pin=end scroll-cue box-shadow — see DataGridPinBehavior — which should\n  // only appear once there's actually hidden content under the pinned column to cue.\n  const [scrolledStart, setScrolledStart] = useState(false)\n  const [scrolledEnd, setScrolledEnd] = useState(false)\n\n  useEffect(() => {\n    const grid = gridRef.current\n    if (!grid) return\n\n    const updateScrollState = () => {\n      setScrolledStart(grid.scrollLeft > 0)\n      setScrolledEnd(Math.ceil(grid.scrollLeft + grid.clientWidth) < grid.scrollWidth)\n    }\n\n    updateScrollState()\n    grid.addEventListener('scroll', updateScrollState, { passive: true })\n    const observer =\n      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(updateScrollState)\n    observer?.observe(grid)\n    return () => {\n      grid.removeEventListener('scroll', updateScrollState)\n      observer?.disconnect()\n    }\n  }, [])\n\n  const _className = classNames(\n    'datagrid',\n    instanceClassName,\n    color,\n    align && TABLE_ALIGN_CLASS_NAMES[align],\n    {\n      bordered,\n      borderless,\n      hoverable: hover,\n      sm,\n      'datagrid-scrolled-start': scrolledStart,\n      'datagrid-scrolled-end': scrolledEnd\n    },\n    className\n  )\n\n  return (\n    <Virtualizer layout={layout} shouldObserveItemSize={isVariableRowHeight}>\n      <AriaTable\n        aria-label={rest['aria-label']}\n        aria-labelledby={rest['aria-labelledby']}\n        className={_className || undefined}\n        disabledKeys={disabledKeys}\n        onSelectionChange={onSelectionChange}\n        onSortChange={onSortChange}\n        ref={ref}\n        selectedKeys={selectedKeys}\n        selectionMode={selectionMode}\n        sortDescriptor={sortDescriptor}\n        // react-aria joins the grid's descriptions without dropping an empty result, so a grid\n        // with none had `aria-describedby=\"\"`.\n        render={(props) => (\n          <div\n            {...(props as React.ComponentProps<'div'>)}\n            aria-describedby={props['aria-describedby'] || undefined}\n          />\n        )}\n      >\n        {children}\n      </AriaTable>\n      {footer && <div className={classNames('datagrid-footer', { borderless })}>{footer}</div>}\n      <DataGridPinBehavior\n        containerRef={gridRef}\n        header={children[0]}\n        instanceClassName={instanceClassName}\n      />\n    </Virtualizer>\n  )\n}\n\n// `forwardRef` erases type parameters, so the generic component is cast back to a generic\n// signature for callers — same pattern `Table` uses.\nexport const DataGrid = forwardRef(DataGridInner) as <T extends object>(\n  props: DataGridProps<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement\n\n;(DataGrid as { displayName?: string }).displayName = 'DataGrid'\n","import React, { ReactElement, ReactNode, useMemo } from 'react'\nimport classNames from 'classnames'\nimport {\n  TableBody as AriaTableBody,\n  TableBodyRenderProps,\n  TableLoadMoreItem\n} from 'react-aria-components'\n\n// A unique value appended to `items` internally to represent the trailing \"load more\" row in\n// react-aria-components' collection. `TableLoadMoreItem` has to be returned from the per-item\n// render function like any other row — react-aria-components' `useCachedChildren` only supports\n// EITHER `items` + a render function OR static `children`, never a mix of both in the same\n// `children` prop, so a `<TableLoadMoreItem>` placed as a plain JSX sibling inside `<TableBody>`\n// is silently dropped (or crashes, if `children` becomes an array mixing the render function in).\n// Checked by reference (`item === LOADER_ITEM`), so it can never collide with a real `T` the way a\n// `{ __loader: true }` marker object might if compared structurally. Its `id` matters too, not\n// just its identity: react-aria-components derives each rendered item's React key from\n// `rendered.props.id ?? item?.key ?? item?.id ?? <positional index>` (`useCachedChildren`) —\n// `TableLoadMoreItem` doesn't accept an `id` prop itself, so without this object's own `id` the\n// loader's key falls back to its position in the array, which collides with a real row whenever a\n// row's own `id` happens to equal that count (e.g. a 2-item list with a row literally id `\"2\"`).\nconst LOADER_ITEM = { id: '__datagrid-body-loader__' }\n\ninterface DataGridBodyOwnProps {\n  /**\n   * A string of all className you want applied to the body row group.\n   */\n  className?: string\n  /**\n   * Values that should invalidate the row cache when using the `items`/render-function form of\n   * `children` — e.g. a value from outside `items` that the render function reads. Without this,\n   * changing that outside value won't re-render already-cached rows, since dynamic rows are only\n   * rebuilt when `items` or `dependencies` change by reference, not on every parent re-render.\n   */\n  dependencies?: ReadonlyArray<unknown>\n  /**\n   * Content shown in place of rows when `items` is empty.\n   */\n  renderEmptyState?: (props: TableBodyRenderProps) => React.ReactNode\n}\n\n/**\n * The `items` + render-function form. `isLoading`/`loadingContent`/`onLoadMore` live here rather\n * than alongside the static form because the loader row is generated by appending to `items` and\n * rendering through that same function — there's no growing dataset to load more of, and nothing\n * to render the loader with, in a hand-written list of `DataGridRow` elements.\n */\ninterface DataGridBodyDynamicProps<T> {\n  /**\n   * A render function called once per item in `items`, returning that row's `DataGridRow`.\n   */\n  children: (item: T) => ReactElement\n  /**\n   * Whether more items are currently being fetched. Shows `loadingContent` in the loader row while\n   * true, and — until this goes back to `false` — suppresses further `onLoadMore` calls, so one\n   * scroll-into-view doesn't fire the callback again before the in-flight fetch resolves.\n   */\n  isLoading?: boolean\n  /**\n   * A list of row data objects, rendered via the function form of `children`.\n   */\n  items: Iterable<T>\n  /**\n   * Content rendered inside the loader row while `isLoading` is true, e.g. a spinner. Only takes\n   * effect alongside `onLoadMore`.\n   */\n  loadingContent?: ReactNode\n  /**\n   * Called when the grid scrolls near its last row, so more data can be fetched and appended to\n   * `items`. Pair with `isLoading` so a fetch already in flight isn't triggered again before it\n   * resolves.\n   */\n  onLoadMore?: () => void\n}\n\n/** The static form: `DataGridRow` elements written out directly. */\ninterface DataGridBodyStaticProps {\n  /**\n   * `DataGridRow` elements.\n   */\n  children: ReactElement | ReactElement[]\n  isLoading?: never\n  items?: never\n  loadingContent?: never\n  onLoadMore?: never\n}\n\n/**\n * Split into a static and a dynamic form so the two can't be mixed: the loader row is appended to\n * `items` and rendered through `children`, so `onLoadMore` alongside a static list of elements used\n * to type-check and then throw at render (\"children is not a function\") the moment the loader row\n * came up.\n */\nexport type DataGridBodyProps<T> = DataGridBodyOwnProps &\n  (DataGridBodyDynamicProps<T> | DataGridBodyStaticProps)\n\n/**\n * Body row group for `DataGrid`, containing `DataGridRow`s. Unlike `Table`'s sub-parts, this\n * renders directly — it's a thin wrapper over react-aria-components' own `TableBody`.\n *\n * Always carries the `datagrid-body` class — see `DataGridHeader`'s equivalent note.\n */\nexport const DataGridBody = <T extends object>({\n  children,\n  className,\n  dependencies,\n  isLoading,\n  items,\n  loadingContent,\n  onLoadMore,\n  renderEmptyState\n}: DataGridBodyProps<T>) => {\n  const hasLoader = onLoadMore != null && items != null\n\n  const itemsWithLoader = useMemo(() => {\n    if (!hasLoader) return items\n    return [...(items as Iterable<T>), LOADER_ITEM] as Iterable<T>\n  }, [hasLoader, items])\n\n  // react-aria-components caches each rendered row by item identity (see `dependencies`'s own doc\n  // comment above) — the loader branch below reads `isLoading`/`onLoadMore`/`loadingContent`, none\n  // of which are part of `items`, so without surfacing them here the cached loader row would keep\n  // whatever `isLoading` value (and stale `onLoadMore` closure) was in scope the first time it\n  // rendered, never picking up a later change.\n  const dependenciesWithLoader = useMemo(\n    () =>\n      hasLoader ? [...(dependencies ?? []), isLoading, onLoadMore, loadingContent] : dependencies,\n    [dependencies, hasLoader, isLoading, onLoadMore, loadingContent]\n  )\n\n  const bodyChildren = hasLoader\n    ? (item: T) =>\n        (item as unknown) === LOADER_ITEM ? (\n          <TableLoadMoreItem\n            className=\"datagrid-loader\"\n            isLoading={isLoading}\n            // Suppresses re-triggering onLoadMore while a fetch is already in flight — the\n            // underlying sentinel has no built-in debounce of its own and calls onLoadMore again\n            // whenever it (re-)observes the sentinel still intersecting, e.g. after the collection\n            // changes but the loader row hasn't yet scrolled out of view.\n            onLoadMore={isLoading ? undefined : onLoadMore}\n          >\n            {loadingContent}\n          </TableLoadMoreItem>\n        ) : (\n          // `hasLoader` implies the dynamic form of the props union, whose `children` is the\n          // render function — `onLoadMore` isn't assignable alongside static children.\n          (children as (item: T) => ReactElement)(item)\n        )\n    : children\n\n  return (\n    <AriaTableBody\n      className={classNames('datagrid-body', className)}\n      dependencies={dependenciesWithLoader}\n      items={itemsWithLoader}\n      renderEmptyState={renderEmptyState}\n    >\n      {bodyChildren}\n    </AriaTableBody>\n  )\n}\n","import React, { ReactNode } from 'react'\nimport { Key, Cell as AriaCell } from 'react-aria-components'\nimport classNames from 'classnames'\n\nexport interface DataGridCellProps {\n  /**\n   * The contents of the cell.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the cell.\n   */\n  className?: string\n  /**\n   * Indicates how many columns the cell spans.\n   */\n  colSpan?: number\n  /**\n   * The unique id of the cell.\n   */\n  id?: Key\n  /**\n   * A string representation of the cell's contents, used for typeahead.\n   */\n  textValue?: string\n}\n\n/**\n * A cell within a `DataGrid` row. Unlike `Table`'s sub-parts, this renders directly — it's a\n * thin wrapper over react-aria-components' own `Cell`.\n */\nexport const DataGridCell = ({\n  children,\n  className,\n  colSpan,\n  id,\n  textValue\n}: DataGridCellProps) => (\n  <AriaCell\n    className={classNames('datagrid-cell', className)}\n    colSpan={colSpan}\n    id={id}\n    textValue={textValue}\n  >\n    {children}\n  </AriaCell>\n)\n","import React, { ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { Key, Column as AriaColumn } from 'react-aria-components'\nimport { ColumnSize, ColumnStaticSize } from 'react-stately'\n\nexport interface DataGridColumnProps {\n  /**\n   * Whether the column allows sorting. Adds a sort indicator and makes the header\n   * clickable/keyboard-activatable.\n   */\n  allowsSorting?: boolean\n  /**\n   * Rendered contents of the column header.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the column header.\n   */\n  className?: string\n  /**\n   * The initial width of the column, e.g. for a narrow selection/icon column — a plain number or\n   * `'<n>%'` for a fixed size, or `'<n>fr'` to share remaining space with other fractional\n   * columns in proportion (columns default to `'1fr'`, so they split space evenly unless given\n   * one of these). Unlike `Table`, which sizes a narrow column via `width: 1%` relying on native\n   * `<table>` auto-layout, `DataGrid`'s virtualized layout computes every column's width itself —\n   * a CSS `width` rule on the cell has no effect, so this prop is the only way to size a column.\n   */\n  defaultWidth?: ColumnSize | null\n  /**\n   * The unique id of the column, referenced by `sortDescriptor.column`.\n   */\n  id?: Key\n  /**\n   * Whether this column is a row header, announced by assistive technology during row\n   * navigation.\n   */\n  isRowHeader?: boolean\n  /**\n   * The maximum width of the column, as a fixed pixel number or `'<n>%'`.\n   */\n  maxWidth?: ColumnStaticSize | null\n  /**\n   * The minimum width of the column, as a fixed pixel number or `'<n>%'`.\n   */\n  minWidth?: ColumnStaticSize | null\n  /**\n   * Pin the column so it stays visible while the grid scrolls horizontally: `'start'` pins it to\n   * the leading edge, `'end'` to the trailing edge. Stacks correctly with other pinned columns on\n   * the same side, in declaration order.\n   */\n  pin?: 'start' | 'end'\n  /**\n   * A string representation of the column header, used for accessibility announcements. Defaults\n   * to `children` when it's a plain string — set this explicitly when the header contains\n   * anything else (an icon, a `Tooltip`, etc.).\n   */\n  textValue?: string\n}\n\n/**\n * A column within `DataGrid`. Unlike `Table`'s sub-parts, this renders directly — it's a thin\n * wrapper over react-aria-components' own `Column`.\n *\n * When `allowsSorting` is set, renders a sort indicator after `children` — mirrors `Table`'s own\n * `TableColumnHeader`, but reads the active direction from react-aria-components' own\n * `ColumnRenderProps` (via the `children` render-prop form) instead of reaching into table state\n * directly, since this wrapper has no state of its own to read.\n */\nexport const DataGridColumn = ({\n  allowsSorting,\n  children,\n  className,\n  defaultWidth,\n  id,\n  isRowHeader,\n  maxWidth,\n  minWidth,\n  pin,\n  textValue\n}: DataGridColumnProps) => (\n  <AriaColumn\n    allowsSorting={allowsSorting}\n    className={classNames('datagrid-col', pin && `datagrid-col-pinned-${pin}`, className)}\n    defaultWidth={defaultWidth}\n    id={id}\n    isRowHeader={isRowHeader}\n    maxWidth={maxWidth}\n    minWidth={minWidth}\n    textValue={textValue}\n    // `pin` isn't a react-aria-components `Column` prop, but its collection builder preserves\n    // the full props object it's given verbatim (see react-stately's `Column.getCollectionNode`)\n    // — passing it through here is what makes it reach `column.props.pin` in\n    // `DataGridTableLayout`'s `isStickyColumn` override, which is what positions `pin=\"start\"`.\n    // `pin=\"end\"` is handled separately by `DataGridPinBehavior`, which reads the same prop off\n    // the header's JSX rather than the resolved collection.\n    {...({ pin } as Record<string, unknown>)}\n  >\n    {allowsSorting\n      ? ({ sortDirection }) => (\n          <>\n            {children}\n            <span aria-hidden=\"true\" className=\"datagrid-sort-icon\">\n              {sortDirection === 'ascending' ? '▲' : sortDirection === 'descending' ? '▼' : '⇅'}\n            </span>\n          </>\n        )\n      : children}\n  </AriaColumn>\n)\n","import React, { ReactElement, ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { TableHeader as AriaTableHeader } from 'react-aria-components'\n\nexport interface DataGridHeaderProps<T> {\n  /**\n   * `DataGridColumn` elements, or a render function paired with `columns` for dynamic column\n   * generation.\n   */\n  children: ReactNode | ((column: T) => ReactElement)\n  /**\n   * A string of all className you want applied to the header row group.\n   */\n  className?: string\n  /**\n   * A list of column data objects, rendered via the function form of `children`.\n   */\n  columns?: Iterable<T>\n  /**\n   * Values that should invalidate the column cache when using the `columns`/render-function form\n   * of `children` — see `DataGridBody`'s `dependencies` for why this matters.\n   */\n  dependencies?: ReadonlyArray<unknown>\n}\n\n/**\n * Header row group for `DataGrid`, containing `DataGridColumn`s. Unlike `Table`'s sub-parts,\n * this renders directly — it's a thin wrapper over react-aria-components' own `TableHeader`.\n *\n * Always carries the `datagrid-header` class (not just the caller's `className`) — `DataGrid.scss`\n * uses it to tell header cells from body cells, since react-aria-components renders both as plain\n * `[role=\"rowgroup\"]` divs with no structural difference to select on otherwise.\n */\nexport const DataGridHeader = <T extends object>({\n  children,\n  className,\n  columns,\n  dependencies\n}: DataGridHeaderProps<T>) => (\n  <AriaTableHeader\n    className={classNames('datagrid-header', className)}\n    columns={columns}\n    dependencies={dependencies}\n  >\n    {children}\n  </AriaTableHeader>\n)\n","import React, { ReactElement, ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { Key, Row as AriaRow } from 'react-aria-components'\n\nexport interface DataGridRowProps<T> {\n  /**\n   * `DataGridCell` elements, or a render function called once per column with that column's\n   * data — required when the row's parent `DataGridBody` uses the `items`/render-function form.\n   */\n  children: ReactNode | ((column: T) => ReactElement)\n  /**\n   * A string of all className you want applied to the row.\n   */\n  className?: string\n  /**\n   * A list of column data objects, rendered via the function form of `children`.\n   */\n  columns?: Iterable<T>\n  /**\n   * The unique id of the row, referenced by `selectedKeys`/`disabledKeys`.\n   */\n  id?: Key\n  /**\n   * A string representation of the row's contents, used for typeahead.\n   */\n  textValue?: string\n}\n\n/**\n * A row within `DataGrid`. Unlike `Table`'s sub-parts, this renders directly — it's a thin\n * wrapper over react-aria-components' own `Row`.\n */\nexport const DataGridRow = <T extends object>({\n  children,\n  className,\n  columns,\n  id,\n  textValue\n}: DataGridRowProps<T>) => (\n  <AriaRow\n    className={classNames('datagrid-row', className)}\n    columns={columns}\n    id={id}\n    textValue={textValue}\n  >\n    {children}\n  </AriaRow>\n)\n","import React, { useRef } from 'react'\nimport { AriaCheckboxProps, useCheckbox } from 'react-aria'\nimport { useToggleState } from 'react-stately'\nimport { CheckboxContext, CheckboxProps, useSlottedContext } from 'react-aria-components'\n\nexport interface DataGridSelectionCellProps {\n  /**\n   * A string of all className you want applied to the checkbox, replacing the default\n   * `check-input`.\n   */\n  className?: string\n}\n\n/**\n * Reads the selection checkbox props react-aria-components' own `Row`/`TableHeader` publish on\n * `CheckboxContext`'s `selection` slot — the same ones its `<Checkbox slot=\"selection\">` would\n * consume, already carrying the localized label, the row-header `aria-labelledby`, and the\n * selected/disabled/indeterminate state.\n *\n * Reading them off that context (rather than calling react-aria's `useTableSelectionCheckbox`/\n * `useTableSelectAllCheckbox` against `TableStateContext` ourselves, as this file used to) is what\n * keeps this working when more than one copy of `react-aria` is installed. Those hooks resolve the\n * grid's id through a module-scoped `WeakMap` that only `useTable` populates, in whichever copy\n * ran it — always the copy bundled inside `react-aria-components` here, since its `Table` is what\n * calls `useTable`. `react-aria-components` pins `react-aria` to an exact version, so a consumer\n * whose own `react-aria` resolves anywhere else in our `^` range gets a second copy and the lookup\n * throws `Error: Unknown grid` on every selection cell. Letting react-aria-components compute the\n * props in its own copy sidesteps that entirely, and drops the duplicated `rowKey` this component\n * used to need — the context is already scoped to the row it's rendered in, so a `rowKey` that\n * disagreed with the surrounding `DataGridRow` can no longer silently toggle a different row.\n */\nconst useSelectionCheckboxProps = (component: string): AriaCheckboxProps => {\n  const props = useSlottedContext(CheckboxContext, 'selection') as CheckboxProps | null | undefined\n  if (!props) {\n    throw new Error(`${component} must be rendered inside a DataGrid with selection enabled.`)\n  }\n  return props as AriaCheckboxProps\n}\n\n/**\n * Selection checkbox for one `DataGrid` row — place inside a `DataGridCell`.\n *\n * react-aria-components' own `Checkbox` always visually hides its native `<input>` behind a custom\n * indicator the caller must supply. This renders a plain native `<input className=\"check-input\">`\n * instead, wired to the same state, so it picks up chassis-css's existing checkbox styling for\n * free with no new CSS of its own.\n */\nexport const DataGridSelectionCell = ({ className }: DataGridSelectionCellProps) => {\n  const checkboxProps = useSelectionCheckboxProps('DataGridSelectionCell')\n  return <DataGridCheckboxInput checkboxProps={checkboxProps} className={className} />\n}\n\n/**\n * \"Select all\" checkbox for `DataGrid`'s header row — place inside a `DataGridColumn`. See\n * `DataGridSelectionCell` for why this bypasses react-aria-components' own `Checkbox`.\n */\nexport const DataGridSelectAllCell = ({ className }: DataGridSelectionCellProps) => {\n  const checkboxProps = useSelectionCheckboxProps('DataGridSelectAllCell')\n  return <DataGridCheckboxInput checkboxProps={checkboxProps} className={className} />\n}\n\nconst DataGridCheckboxInput = ({\n  checkboxProps,\n  className\n}: {\n  checkboxProps: AriaCheckboxProps\n  className?: string\n}) => {\n  const toggleState = useToggleState(checkboxProps)\n  const ref = useRef<HTMLInputElement>(null)\n  const { inputProps } = useCheckbox(checkboxProps, toggleState, ref)\n\n  // `aria-describedby` after the spread: react-aria's own adds ids it never renders (FORMS.md,\n  // gotcha 6).\n  return (\n    <input\n      {...inputProps}\n      aria-describedby={undefined}\n      className={className ?? 'check-input'}\n      ref={ref}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/chunks/flex-B52oLCCC.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{a as t,i as n}from"./breakpoints-CGk8szzR.js";import{t as r}from"./spacingClassName-DVhk8m3P.js";import i from"react";import a from"classnames";function o({children:e,className:o,component:s,inline:c,direction:l,wrap:u,justify:d,align:f,alignContent:p,gap:m,rowGap:h,columnGap:g,..._},v){let y=s??`div`,b=a(c?`d-inline-flex`:`d-flex`,n([t(l,(e,t)=>`${t}flex-${e}`),t(u,(e,t)=>`${t}flex-${e}`),t(d,(e,t)=>`${t}justify-content-${e}`),t(f,(e,t)=>`${t}align-items-${e}`),t(p,(e,t)=>`${t}align-content-${e}`),t(m,(e,t)=>r(`gap`,e,t)),t(h,(e,t)=>r(`row-gap`,e,t)),t(g,(e,t)=>r(`column-gap`,e,t))]),o);return i.createElement(y,{className:b,..._,ref:v},e)}const s=e(o,`Flex`);export{s as t};
+//# sourceMappingURL=flex-B52oLCCC.js.map

package/dist/chunks/flex-B52oLCCC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-B52oLCCC.js","names":[],"sources":["../../src/components/flex/Flex.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { responsiveClassNames, responsiveProp } from '../../utils/breakpoints'\nimport { spacingClassName } from '../../utils/spacingClassName'\nimport { Responsive, Spacing } from '../../types'\n\ntype FlexOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Renders an inline flex container (`.d-inline-flex`) instead of a block-level one (`.d-flex`,\n   * the default).\n   */\n  inline?: boolean\n  /**\n   * Sets `flex-direction`. Omit for the browser default (`row`). An object sets it per\n   * breakpoint, `base` being the narrowest width: `{ base: 'column', md: 'row' }`. The\n   * breakpoints are widths of the viewport, so unlike `Stack`'s `direction` they need no\n   * `.contains-inline` ancestor.\n   */\n  direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>\n  /**\n   * Sets `flex-wrap`. Omit for the browser default (`nowrap`). Takes an object per breakpoint,\n   * as `direction` does.\n   */\n  wrap?: Responsive<'wrap' | 'nowrap' | 'wrap-reverse'>\n  /**\n   * Sets `justify-content`, aligning items along the main axis. Takes an object per breakpoint,\n   * as `direction` does.\n   */\n  justify?: Responsive<'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'>\n  /**\n   * Sets `align-items`, aligning items along the cross axis. Takes an object per breakpoint, as\n   * `direction` does.\n   */\n  align?: Responsive<'start' | 'end' | 'center' | 'baseline' | 'stretch'>\n  /**\n   * Sets `align-content`, distributing wrapped lines along the cross axis. Has no effect on\n   * single-line (non-wrapping) containers. Takes an object per breakpoint, as `direction` does.\n   */\n  alignContent?: Responsive<'start' | 'end' | 'center' | 'between' | 'around' | 'stretch'>\n  /**\n   * Spacing between children on both axes, mapped to the `gap-*` utility classes. Overridden per\n   * axis by `rowGap`/`columnGap` where set. Takes an object per breakpoint, as `direction` does.\n   *\n   * @type { Responsive<Spacing | 0> }\n   */\n  gap?: Responsive<Spacing | 0>\n  /**\n   * Spacing between rows (the cross axis when wrapped), mapped to the `row-gap-*` utility\n   * classes. Independent of `gap`/`columnGap`. Takes an object per breakpoint, as `direction`\n   * does.\n   *\n   * @type { Responsive<Spacing | 0> }\n   */\n  rowGap?: Responsive<Spacing | 0>\n  /**\n   * Spacing between columns (the main axis), mapped to the `column-gap-*` utility classes.\n   * Independent of `gap`/`rowGap`. Takes an object per breakpoint, as `direction` does.\n   *\n   * @type { Responsive<Spacing | 0> }\n   */\n  columnGap?: Responsive<Spacing | 0>\n}\n\nexport type FlexProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FlexOwnProps<C>>\n\ntype FlexComponent = (<C extends ElementType = 'div'>(\n  props: FlexProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction FlexRender<C extends ElementType = 'div'>(\n  {\n    children,\n    className,\n    component,\n    inline,\n    direction,\n    wrap,\n    justify,\n    align,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n    ...rest\n  }: FlexProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames(\n    inline ? 'd-inline-flex' : 'd-flex',\n    responsiveClassNames([\n      responsiveProp(direction, (value, prefix) => `${prefix}flex-${value}`),\n      responsiveProp(wrap, (value, prefix) => `${prefix}flex-${value}`),\n      responsiveProp(justify, (value, prefix) => `${prefix}justify-content-${value}`),\n      responsiveProp(align, (value, prefix) => `${prefix}align-items-${value}`),\n      responsiveProp(alignContent, (value, prefix) => `${prefix}align-content-${value}`),\n      responsiveProp(gap, (value, prefix) => spacingClassName('gap', value, prefix)),\n      responsiveProp(rowGap, (value, prefix) => spacingClassName('row-gap', value, prefix)),\n      responsiveProp(columnGap, (value, prefix) => spacingClassName('column-gap', value, prefix))\n    ]),\n    className\n  )\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const Flex = createPolymorphicComponent<FlexComponent>(\n  FlexRender as ForwardRefRenderFunction<Element, FlexProps<ElementType>>,\n  'Flex'\n)\n"],"mappings":"sOAmFA,SAAS,EACP,CACE,WACA,YACA,YACA,SACA,YACA,OACA,UACA,QACA,eACA,MACA,SACA,YACA,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EACjB,EAAS,gBAAkB,SAC3B,EAAqB,CACnB,EAAe,GAAY,EAAO,IAAW,GAAG,EAAO,OAAO,GAAO,EACrE,EAAe,GAAO,EAAO,IAAW,GAAG,EAAO,OAAO,GAAO,EAChE,EAAe,GAAU,EAAO,IAAW,GAAG,EAAO,kBAAkB,GAAO,EAC9E,EAAe,GAAQ,EAAO,IAAW,GAAG,EAAO,cAAc,GAAO,EACxE,EAAe,GAAe,EAAO,IAAW,GAAG,EAAO,gBAAgB,GAAO,EACjF,EAAe,GAAM,EAAO,IAAW,EAAiB,MAAO,EAAO,CAAM,CAAC,EAC7E,EAAe,GAAS,EAAO,IAAW,EAAiB,UAAW,EAAO,CAAM,CAAC,EACpF,EAAe,GAAY,EAAO,IAAW,EAAiB,aAAc,EAAO,CAAM,CAAC,CAC5F,CAAC,EACD,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAO,EAClB,EACA,MACF"}

package/dist/chunks/grid-C7tO-ppc.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{a as t,i as n,n as r,t as i}from"./breakpoints-CGk8szzR.js";import a from"react";import o from"classnames";function s({children:e,className:t,component:n,fluidUntil:r,fluid:i,...s},c){let l=n??`div`,u=o(`container`,i&&`fluid`,r,t);return a.createElement(l,{className:u,...s,ref:c},e)}const c=e(s,`Container`),l=new Set([`zero`,`4xs`,`3xs`,`2xs`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`,`3xl`,`4xl`,`5xl`,`6xl`]),u=(e,t=``)=>e!==void 0&&l.has(e)?`${t}gap-${e}`:null,d=e=>e!==void 0&&!l.has(e)?e:void 0,f=e=>e!==void 0&&Number.isInteger(e)&&e>=1&&e<=6,p=e=>e!==void 0&&!f(e)?`repeat(${e}, minmax(0, 1fr))`:void 0,m=e=>e!==void 0&&Number.isInteger(e)&&e>=1&&e<=12,h=(e,t)=>`${t}grid-flow-${e.replace(`column`,`col`)}`;function g({children:e,className:s,component:c,columns:l,rows:g,gap:_,flow:v,contained:y,fill:b,min:x,style:S,...C},w){let T=c??`div`,E=r(l),D=r(g),O=r(_),k=o(b?`grid-fill`:`grid`,y&&`contained`,n([t(l,(e,t)=>!b&&(t!==``||m(e))&&`${t}grid-cols-${e}`),t(g,(e,t)=>!b&&(t!==``||f(e))&&`${t}grid-rows-${e}`),t(_,u),t(v,h)],i),s),A={...S},j=d(O);if(j!==void 0&&(A[`--cx-grid-gap`]=j),b)x!==void 0&&(A[`--cx-grid-min`]=x);else{E!==void 0&&!m(E)&&(A[`--cx-grid-columns`]=E);let e=p(D);e!==void 0&&(A.gridTemplateRows=e)}return a.createElement(T,{className:k,style:A,...C,ref:w},e)}const _=e(g,`Grid`);function v({children:e,className:r,component:s,span:c,start:l,end:m,rowSpan:h,rowStart:g,rowEnd:_,subgrid:v,rows:y,gap:b,style:x,...S},C){let w=s??`div`,T=o(n([t(c,(e,t)=>`${t}col-span-${e}`),t(l,(e,t)=>`${t}col-start-${e}`),t(m,(e,t)=>`${t}col-end-${e}`),t(h,(e,t)=>`${t}row-span-${e}`),t(g,(e,t)=>`${t}row-start-${e}`),t(_,(e,t)=>`${t}row-end-${e}`)],i),v&&`grid grid-cols-subgrid`,v&&f(y)&&`grid-rows-${y}`,v&&u(b),r),E={...x};if(v){let e=p(y);e!==void 0&&(E.gridTemplateRows=e);let t=d(b);t!==void 0&&(E[`--cx-grid-gap`]=t)}return a.createElement(w,{className:T,style:E,...S,ref:C},e)}const y=e(v,`GridItem`);export{_ as n,c as r,y as t};
+//# sourceMappingURL=grid-C7tO-ppc.js.map

package/dist/chunks/grid-C7tO-ppc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-C7tO-ppc.js","names":[],"sources":["../../src/components/grid/Container.tsx","../../src/types.ts","../../src/components/grid/gap.ts","../../src/components/grid/rows.ts","../../src/components/grid/Grid.tsx","../../src/components/grid/GridItem.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { Breakpoint } from '../../types'\n\ntype ContainerOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Set container 100% wide until the given breakpoint, after which it scales up with `max-width`\n   * at every larger breakpoint.\n   *\n   * @type Breakpoint\n   */\n  fluidUntil?: Breakpoint\n  /**\n   * Set container 100% wide, spanning the entire width of the viewport.\n   */\n  fluid?: boolean\n}\n\nexport type ContainerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ContainerOwnProps<C>\n>\n\ntype ContainerComponent = (<C extends ElementType = 'div'>(\n  props: ContainerProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ContainerRender<C extends ElementType = 'div'>(\n  { children, className, component, fluidUntil, fluid, ...rest }: ContainerProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('container', fluid && 'fluid', fluidUntil, className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const Container = createPolymorphicComponent<ContainerComponent>(\n  ContainerRender as ForwardRefRenderFunction<Element, ContainerProps<ElementType>>,\n  'Container'\n)\n","/**\n * Breakpoints\n */\nexport type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\n/**\n * Container breakpoints: the same widths, measured on the nearest query container instead of the\n * viewport. chassis-css's `@md:` classes.\n */\nexport type ContainerBreakpoint = '@sm' | '@md' | '@lg' | '@xl' | '@2xl'\n\n/**\n * A prop value that can change with the width. A plain value applies at every width. An object\n * holds one value per width: `base` from the narrowest, each breakpoint key from that breakpoint\n * up, as in `{ base: 'column', md: 'row' }`. `K` is the keys the prop reads: the viewport\n * breakpoints unless the component also takes the container ones.\n */\nexport type Responsive<T, K extends string = Breakpoint> =\n  T | ({ base?: T } & Partial<Record<K, T>>)\n\n/**\n * Context colors\n */\nexport type ContextColor =\n  | 'default'\n  | 'alternate'\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info'\n  | 'black'\n  | 'white'\n\n/**\n * Context styles\n */\nexport type ContextStyle = 'basic' | 'solid' | 'outline' | 'smooth'\n\n/**\n * Component sizes\n */\nexport type Sizing = 'sm' | 'md' | 'lg'\n\n/**\n * Extended sizes\n */\nexport type ExtendedSizing = '2xs' | 'xs' | Sizing | 'xl' | '2xl'\n\n/**\n * Spacing values. `SPACING` is the runtime source of truth — `Spacing` is derived from it so the\n * two can't drift apart; anything needing the values at runtime (e.g. validating a string against\n * the scale) should import `SPACING`, not hand-copy the list.\n */\nexport const SPACING = [\n  'zero',\n  '4xs',\n  '3xs',\n  '2xs',\n  'xs',\n  'sm',\n  'md',\n  'lg',\n  'xl',\n  '2xl',\n  '3xl',\n  '4xl',\n  '5xl',\n  '6xl'\n] as const\n\nexport type Spacing = (typeof SPACING)[number]\n\n/**\n * Font families\n */\nexport type FontFamily = 'text' | 'display' | 'code' | 'html'\n\n/**\n * Font weights\n */\nexport type FontWeight = 'elegant' | 'normal' | 'strong' | 'mass'\n\n/**\n * Font sizes\n */\nexport type FontSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'\n\n/**\n * Component placements\n */\nexport type Placements =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top-end'\n  | 'top'\n  | 'top-start'\n  | 'bottom-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'right-start'\n  | 'right'\n  | 'right-end'\n  | 'left-start'\n  | 'left'\n  | 'left-end'\n\n/**\n * Component shapes\n */\nexport type Shapes =\n  | 'rounded'\n  | 'rounded-top'\n  | 'rounded-end'\n  | 'rounded-bottom'\n  | 'rounded-start'\n  | 'rounded-circle'\n  | 'rounded-pill'\n  | 'rounded-0'\n  | 'rounded-1'\n  | 'rounded-2'\n  | 'rounded-3'\n\nexport type TextColor =\n  | ContextColor\n  | 'main'\n  | 'subtle'\n  | 'slight'\n  | 'solid'\n  | 'inverse'\n  | 'highlight'\n  | 'active'\n  | 'contrast'\n\nexport type Triggers = 'hover' | 'focus' | 'click'\n","import { SPACING } from '../../types'\n\nconst SPACING_TOKENS = new Set<string>(SPACING)\n\n// A `Spacing` token is chassis-css's own `gap-{token}` utility, which a breakpoint prefix makes\n// responsive. Anything else (a raw CSS value, e.g. `\"1rem\"` or `\".25rem 1rem\"`) has no class and\n// goes to the `--cx-grid-gap` custom property instead: see `gapValue`.\nexport const gapClassName = (gap: string | undefined, prefix = ''): string | null =>\n  gap !== undefined && SPACING_TOKENS.has(gap) ? `${prefix}gap-${gap}` : null\n\nexport const gapValue = (gap: string | undefined): string | undefined =>\n  gap !== undefined && !SPACING_TOKENS.has(gap) ? gap : undefined\n","// chassis-css has `grid-rows-1` to `grid-rows-6`.\nexport const hasRowsClass = (rows: number | undefined) =>\n  rows !== undefined && Number.isInteger(rows) && rows >= 1 && rows <= 6\n\n// A row count with no class is the declaration of the class, set inline: see `Grid`'s `rows`.\n// `grid-template-rows` isn't inherited, so unlike a custom property it stays on the one grid.\nexport const rowsTemplate = (rows: number | undefined): string | undefined =>\n  rows !== undefined && !hasRowsClass(rows) ? `repeat(${rows}, minmax(0, 1fr))` : undefined\n","import React, { CSSProperties, ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport {\n  baseValue,\n  GRID_BREAKPOINTS,\n  responsiveClassNames,\n  responsiveProp\n} from '../../utils/breakpoints'\nimport { Breakpoint, ContainerBreakpoint, Responsive, Spacing } from '../../types'\nimport { gapClassName, gapValue } from './gap'\nimport { hasRowsClass, rowsTemplate } from './rows'\n\ntype GridStyle = CSSProperties & {\n  '--cx-grid-columns'?: number\n  '--cx-grid-gap'?: string\n  '--cx-grid-min'?: string\n}\n\n/**\n * The direction a grid places its items in, and whether it fills earlier gaps (`dense`): the\n * values of CSS `grid-auto-flow`.\n */\nexport type GridFlow = 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'\n\n// A token is a class at any width. A raw CSS value is a custom property, which only the base\n// can be: an inline style holds no media query.\ntype GridGap = Spacing | (string & {})\n\ntype GridOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Number of columns in the grid template (the column count of `@chassis-ui/css` when omitted,\n   * `12` by default). A count from 1 to 12 is mapped to the `grid-cols-{n}` class, which applies\n   * to this grid alone. Any other count has no class and is set via the `--cx-grid-columns`\n   * custom property, which a grid nested in this one inherits: give that grid `columns` of its\n   * own. Has no effect when `fill` is set.\n   *\n   * An object sets the count from a width up, as in `{ base: 1, md: 3 }`, here and on `rows`,\n   * `gap` and `flow`. A breakpoint key (`md`) is a width of the viewport. A container key\n   * (`'@md'`) is the same width of the nearest query container (an ancestor with the\n   * `contains-inline` class), and wins over a breakpoint key where both apply. Without a query\n   * container above the grid, a container key never applies. The count of a key is a class, so\n   * a count from 1 to 12.\n   */\n  columns?: Responsive<number, Breakpoint | ContainerBreakpoint>\n  /**\n   * Number of equal rows in the grid template. A grid has none when omitted: its rows are as\n   * tall as their content. A count from 1 to 6 is mapped to the `grid-rows-{n}` class; any other\n   * count has no class and is set inline, as the `grid-template-rows` the class declares. Has no\n   * effect when `fill` is set. An object sets the count from a width up, where it is a class, so\n   * a count from 1 to 6.\n   */\n  rows?: Responsive<number, Breakpoint | ContainerBreakpoint>\n  /**\n   * Gap between grid items: a `Spacing` token (mapped to the `gap-{token}` class) or any raw CSS\n   * `gap` value, including a `\"{row} {column}\"` pair (set via the `--cx-grid-gap` custom\n   * property). The gutter of the current breakpoint when omitted, or of the query container when\n   * `contained` is set. An object sets the gap from a width up: only a token fits a key other\n   * than `base`, since a raw value has no class.\n   *\n   * @type { Spacing | string | { base?: Spacing | string } & Partial<Record<Breakpoint | ContainerBreakpoint, Spacing>> }\n   */\n  gap?: GridGap | ({ base?: GridGap } & Partial<Record<Breakpoint | ContainerBreakpoint, Spacing>>)\n  /**\n   * The direction items are placed in, mapped to the `grid-flow-*` classes: by `'row'` (the CSS\n   * default) or by `'column'`, which fills the `rows` of one column before it starts the next.\n   * `'dense'`, `'row-dense'` and `'column-dense'` also move later items into gaps that earlier,\n   * wider ones left. An object sets the flow from a width up.\n   */\n  flow?: Responsive<GridFlow, Breakpoint | ContainerBreakpoint>\n  /**\n   * Adds the `contained` class: the default gutter and column count follow the width of the\n   * nearest query container instead of the viewport, so a grid in a narrow column of a wide page\n   * has the gutter of a narrow page. Without a query container above it the grid keeps the\n   * values of the viewport. `columns` and `gap` still override them.\n   */\n  contained?: boolean\n  /**\n   * Renders `.grid-fill` instead of `.grid` — columns expand equally to fill the available\n   * width, with the column count determined by the number of children rather than `columns`.\n   */\n  fill?: boolean\n  /**\n   * Minimum column width of a `fill` grid, set via the `--cx-grid-min` custom property: any CSS\n   * length, e.g. `\"16rem\"`. Children wrap to a new row when they would get narrower. `12rem` in\n   * `@chassis-ui/css` when omitted. Only relevant when `fill` is set.\n   */\n  min?: string\n}\n\nexport type GridProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridOwnProps<C>>\n\n// chassis-css has `grid-cols-1` to `grid-cols-12`.\nconst hasColumnsClass = (columns: number | undefined) =>\n  columns !== undefined && Number.isInteger(columns) && columns >= 1 && columns <= 12\n\n// chassis-css names the values as Tailwind does: `grid-flow-col`, `grid-flow-col-dense`.\nconst flowClassName = (flow: GridFlow, prefix: string) =>\n  `${prefix}grid-flow-${flow.replace('column', 'col')}`\n\ntype GridComponent = (<C extends ElementType = 'div'>(\n  props: GridProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction GridRender<C extends ElementType = 'div'>(\n  {\n    children,\n    className,\n    component,\n    columns,\n    rows,\n    gap,\n    flow,\n    contained,\n    fill,\n    min,\n    style,\n    ...rest\n  }: GridProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n\n  // A class where chassis-css has one: `--cx-grid-columns` set inline is inherited by every grid\n  // nested in this one, which then has this grid's column count instead of its own. Only a base\n  // count with no class falls back to the property; a breakpoint's can't, since an inline style\n  // holds no media query. `.grid-fill` counts its own columns. A base row count with no class is\n  // set inline too, as a declaration: see `rowsTemplate`.\n  const baseColumns = baseValue(columns)\n  const baseRows = baseValue(rows)\n  const baseGap = baseValue<string>(gap)\n\n  const _className = classNames(\n    fill ? 'grid-fill' : 'grid',\n    contained && 'contained',\n    responsiveClassNames(\n      [\n        responsiveProp(\n          columns,\n          (value, prefix) =>\n            !fill && (prefix !== '' || hasColumnsClass(value)) && `${prefix}grid-cols-${value}`\n        ),\n        responsiveProp(\n          rows,\n          (value, prefix) =>\n            !fill && (prefix !== '' || hasRowsClass(value)) && `${prefix}grid-rows-${value}`\n        ),\n        responsiveProp<string>(gap, gapClassName),\n        responsiveProp(flow, flowClassName)\n      ],\n      GRID_BREAKPOINTS\n    ),\n    className\n  )\n\n  const _style: GridStyle = { ...style }\n  const _gap = gapValue(baseGap)\n\n  if (_gap !== undefined) _style['--cx-grid-gap'] = _gap\n\n  if (fill) {\n    if (min !== undefined) _style['--cx-grid-min'] = min\n  } else {\n    if (baseColumns !== undefined && !hasColumnsClass(baseColumns)) {\n      _style['--cx-grid-columns'] = baseColumns\n    }\n    const _rows = rowsTemplate(baseRows)\n    if (_rows !== undefined) _style.gridTemplateRows = _rows\n  }\n\n  return (\n    <Component className={_className} style={_style} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const Grid = createPolymorphicComponent<GridComponent>(\n  GridRender as ForwardRefRenderFunction<Element, GridProps<ElementType>>,\n  'Grid'\n)\n","import React, { CSSProperties, ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { GRID_BREAKPOINTS, responsiveClassNames, responsiveProp } from '../../utils/breakpoints'\nimport { Breakpoint, ContainerBreakpoint, Responsive, Spacing } from '../../types'\nimport { gapClassName, gapValue } from './gap'\nimport { hasRowsClass, rowsTemplate } from './rows'\n\ntype GridItemStyle = CSSProperties & {\n  '--cx-grid-gap'?: string\n}\n\ntype GridItemOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Number of grid column tracks (of the parent `<Grid>`'s `columns`) this item spans, mapped to\n   * the `col-span-{n}` class, or `'full'` for every track of the row (`col-span-full`). An item\n   * with no `span` is one track wide.\n   *\n   * An object sets the span from a width up, as in `{ base: 'full', md: 6 }`, here and on\n   * `start`, `end`, `rowSpan`, `rowStart` and `rowEnd`. A breakpoint key (`md`) is a width of\n   * the viewport. A container key (`'@md'`) is the same width of the nearest query container\n   * (an ancestor with the `contains-inline` class), and wins over a breakpoint key where both\n   * apply. Without a query container above the grid, a container key never applies.\n   *\n   * @type { Responsive<number | 'full', Breakpoint | ContainerBreakpoint> }\n   */\n  span?: Responsive<number | 'full', Breakpoint | ContainerBreakpoint>\n  /**\n   * Grid column line to start this item at, mapped to the `col-start-{n}` class (1 to 12).\n   * `'auto'` (`col-start-auto`) returns the item to the flow, to undo a start line at a wider\n   * breakpoint: `{ base: 4, md: 'auto' }`.\n   *\n   * @type { Responsive<number | 'auto', Breakpoint | ContainerBreakpoint> }\n   */\n  start?: Responsive<number | 'auto', Breakpoint | ContainerBreakpoint>\n  /**\n   * Grid column line to end this item at, mapped to the `col-end-{n}` class (1 to 13, the line\n   * after the last of 12 columns). With `span`, it places the item against the end edge of the\n   * grid: `span={3} end={13}`. `'auto'` (`col-end-auto`) undoes an end line at a wider\n   * breakpoint: `{ base: 13, md: 'auto' }`.\n   *\n   * @type { Responsive<number | 'auto', Breakpoint | ContainerBreakpoint> }\n   */\n  end?: Responsive<number | 'auto', Breakpoint | ContainerBreakpoint>\n  /**\n   * Number of grid row tracks this item spans, mapped to the `row-span-{n}` class. Takes an\n   * object per width, as `span` does.\n   */\n  rowSpan?: Responsive<number, Breakpoint | ContainerBreakpoint>\n  /**\n   * Grid row line to start this item at, mapped to the `row-start-{n}` class (1 to 6), or\n   * `'auto'` (`row-start-auto`) to return it to the flow. Takes an object per width, as `span`\n   * does.\n   *\n   * @type { Responsive<number | 'auto', Breakpoint | ContainerBreakpoint> }\n   */\n  rowStart?: Responsive<number | 'auto', Breakpoint | ContainerBreakpoint>\n  /**\n   * Grid row line to end this item at, mapped to the `row-end-{n}` class (1 to 7, the line after\n   * the last of 6 rows), or `'auto'` (`row-end-auto`) to undo an end line at a wider breakpoint.\n   * Takes an object per width, as `span` does.\n   *\n   * @type { Responsive<number | 'auto', Breakpoint | ContainerBreakpoint> }\n   */\n  rowEnd?: Responsive<number | 'auto', Breakpoint | ContainerBreakpoint>\n  /**\n   * Turns this item into a nested subgrid: adds `.grid`/`.grid-cols-subgrid` alongside its\n   * `col-span-{n}`/`col-start-{n}` placement classes, so its own children inherit the parent\n   * `<Grid>`'s column tracks instead of defining new ones. Combine with `span` — a subgrid\n   * item must itself be a grid item of the parent for `grid-template-columns: subgrid` to take\n   * effect, which is why `subgrid` lives on `<GridItem>` (the element actually placed as a grid\n   * item) rather than on a `<Grid>` nested inside it.\n   */\n  subgrid?: boolean\n  /**\n   * Number of equal rows in the subgrid's own row template: the `grid-rows-{n}` class for a\n   * count from 1 to 6, the same `grid-template-rows` set inline for any other. Only relevant\n   * when `subgrid` is set — subgrid only inherits the parent's column tracks, not its rows.\n   */\n  rows?: number\n  /**\n   * Gap between the subgrid's children: a `Spacing` token (mapped to the `gap-{token}` class) or\n   * any raw CSS `gap` value (set via the `--cx-grid-gap` custom property). Only relevant when\n   * `subgrid` is set. A subgrid has the gap of its own: when the parent `<Grid>` takes a `gap`\n   * token, give the subgrid the same one, or its children are narrower than the parent's tracks.\n   *\n   * @type { Spacing | string }\n   */\n  gap?: Spacing | (string & {})\n}\n\nexport type GridItemProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  GridItemOwnProps<C>\n>\n\ntype GridItemComponent = (<C extends ElementType = 'div'>(\n  props: GridItemProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction GridItemRender<C extends ElementType = 'div'>(\n  {\n    children,\n    className,\n    component,\n    span,\n    start,\n    end,\n    rowSpan,\n    rowStart,\n    rowEnd,\n    subgrid,\n    rows,\n    gap,\n    style,\n    ...rest\n  }: GridItemProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames(\n    responsiveClassNames(\n      [\n        responsiveProp(span, (value, prefix) => `${prefix}col-span-${value}`),\n        responsiveProp(start, (value, prefix) => `${prefix}col-start-${value}`),\n        responsiveProp(end, (value, prefix) => `${prefix}col-end-${value}`),\n        responsiveProp(rowSpan, (value, prefix) => `${prefix}row-span-${value}`),\n        responsiveProp(rowStart, (value, prefix) => `${prefix}row-start-${value}`),\n        responsiveProp(rowEnd, (value, prefix) => `${prefix}row-end-${value}`)\n      ],\n      GRID_BREAKPOINTS\n    ),\n    subgrid && 'grid grid-cols-subgrid',\n    subgrid && hasRowsClass(rows) && `grid-rows-${rows}`,\n    subgrid && gapClassName(gap),\n    className\n  )\n\n  const _style: GridItemStyle = { ...style }\n\n  if (subgrid) {\n    const _rows = rowsTemplate(rows)\n    if (_rows !== undefined) _style.gridTemplateRows = _rows\n    const _gap = gapValue(gap)\n    if (_gap !== undefined) _style['--cx-grid-gap'] = _gap\n  }\n\n  return (\n    <Component className={_className} style={_style} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const GridItem = createPolymorphicComponent<GridItemComponent>(\n  GridItemRender as ForwardRefRenderFunction<Element, GridItemProps<ElementType>>,\n  'GridItem'\n)\n"],"mappings":"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"}

package/dist/chunks/{index-Bm2NpgND.d.ts → index-0jbACjYQ.d.ts}

@@ -1,6 +1,6 @@
 import "./focus-ring-SR_LwaN7.js";
 import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
-import { n as ContextColor, r as ContextStyle } from "./types-CS_40Txv.js";
+import { i as ContextStyle, r as ContextColor } from "./types-D6FM7bYR.js";
 import { ElementType, ReactElement } from "react";
 //#region src/components/placeholder/Placeholder.d.ts
 type PlaceholderAlign = 'start' | 'center' | 'end';
@@ -79,4 +79,4 @@ type PlaceholderComponent = (<C extends ElementType = 'img'>(props: PlaceholderP
 declare const Placeholder: PlaceholderComponent;
 //#endregion
 export { PlaceholderProps as n, Placeholder as t };
-//# sourceMappingURL=index-Bm2NpgND.d.ts.map
+//# sourceMappingURL=index-0jbACjYQ.d.ts.map

package/dist/chunks/{index-D9PZHY_I.d.ts → index-B19ZH3fm.d.ts}

@@ -1,6 +1,6 @@
 import "./focus-ring-SR_LwaN7.js";
 import { n as PolymorphicRef, r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
-import { i as ExtendedSizing, n as ContextColor } from "./types-CS_40Txv.js";
+import { a as ExtendedSizing, r as ContextColor } from "./types-D6FM7bYR.js";
 import React, { ElementType, ImgHTMLAttributes, ReactElement, ReactNode } from "react";
 //#region src/components/avatar/Avatar.d.ts
 type AvatarOwnProps<C extends ElementType> = {
@@ -133,4 +133,4 @@ type AvatarStackComponent = (<C extends ElementType = 'div'>(props: AvatarStackP
 declare const AvatarStack: AvatarStackComponent;
 //#endregion
 export { AvatarImageProps as a, AvatarImage as i, AvatarStackItemDef as n, Avatar as o, AvatarStackProps as r, AvatarProps as s, AvatarStack as t };
-//# sourceMappingURL=index-D9PZHY_I.d.ts.map
+//# sourceMappingURL=index-B19ZH3fm.d.ts.map

package/dist/chunks/{index-COsIPd8L.d.ts → index-B1kw0jzM.d.ts}

@@ -1,6 +1,6 @@
 import "./focus-ring-SR_LwaN7.js";
 import { r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
-import { n as ContextColor, r as ContextStyle } from "./types-CS_40Txv.js";
+import { i as ContextStyle, r as ContextColor } from "./types-D6FM7bYR.js";
 import { ElementType, MouseEventHandler, ReactElement } from "react";
 //#region src/components/chip/Chip.d.ts
 type ChipOwnProps<C extends ElementType> = {
@@ -60,4 +60,4 @@ type ChipComponent = (<C extends ElementType = 'span'>(props: ChipProps<C> & {
 declare const Chip: ChipComponent;
 //#endregion
 export { ChipProps as n, Chip as t };
-//# sourceMappingURL=index-COsIPd8L.d.ts.map
+//# sourceMappingURL=index-B1kw0jzM.d.ts.map

package/dist/chunks/{index-e7SJkI_m.d.ts → index-BLS1jhSJ.d.ts}

@@ -1,6 +1,6 @@
 import "./focus-ring-SR_LwaN7.js";
 import { n as PolymorphicRef, r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
-import { n as ContextColor } from "./types-CS_40Txv.js";
+import { r as ContextColor } from "./types-D6FM7bYR.js";
 import React, { ElementType, ReactElement } from "react";
 //#region src/components/stepper/Stepper.d.ts
 interface StepperItemDef {
@@ -99,4 +99,4 @@ type StepperItemComponent = (<C extends ElementType = 'li'>(props: StepperItemPr
 declare const StepperItem: StepperItemComponent;
 //#endregion
 export { StepperProps as a, StepperItemDef as i, StepperItemProps as n, Stepper as r, StepperItem as t };
-//# sourceMappingURL=index-e7SJkI_m.d.ts.map
+//# sourceMappingURL=index-BLS1jhSJ.d.ts.map

package/dist/chunks/{index-DjrEvKd-.d.ts → index-BMkbJVHg.d.ts}

@@ -1,6 +1,6 @@
 import "./focus-ring-SR_LwaN7.js";
 import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
-import { n as ContextColor } from "./types-CS_40Txv.js";
+import { r as ContextColor } from "./types-D6FM7bYR.js";
 import { n as IconProps } from "./Icon-CioraWLF.js";
 import React, { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
 import { ToastQueue } from "react-stately";
@@ -190,4 +190,4 @@ type UseNotificationResult = NotificationContextProps;
 declare const useNotification: () => UseNotificationResult;
 //#endregion
 export { closeNotification as a, NotificationStackProps as c, NotificationIcon as d, NotificationIconProps as f, NotificationProps as g, Notification as h, addNotification as i, NotificationText as l, NotificationTitleProps as m, useNotification as n, notificationQueue as o, NotificationTitle as p, NotificationContent as r, NotificationStack as s, UseNotificationResult as t, NotificationTextProps as u };
-//# sourceMappingURL=index-DjrEvKd-.d.ts.map
+//# sourceMappingURL=index-BMkbJVHg.d.ts.map

package/dist/chunks/{index-t_x6jj7l.d.ts → index-BOx8v-oT.d.ts}

@@ -1,6 +1,6 @@
 import "./focus-ring-SR_LwaN7.js";
 import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
-import { n as ContextColor } from "./types-CS_40Txv.js";
+import { r as ContextColor } from "./types-D6FM7bYR.js";
 import { ElementType, ReactElement, ReactNode } from "react";
 //#region src/components/progress/Progress.d.ts
 type ProgressOwnProps<C extends ElementType> = {
@@ -94,4 +94,4 @@ type ProgressBarComponent = (<C extends ElementType = 'div'>(props: ProgressBarP
 declare const ProgressBar: ProgressBarComponent;
 //#endregion
 export { ProgressProps as i, ProgressBarProps as n, Progress as r, ProgressBar as t };
-//# sourceMappingURL=index-t_x6jj7l.d.ts.map
+//# sourceMappingURL=index-BOx8v-oT.d.ts.map