@chassis-ui/react 0.3.0 → 0.4.0

package/README.md

@@ -30,7 +30,7 @@ The components render `@chassis-ui/css`'s markup and class names, so install bot
 npm install @chassis-ui/react @chassis-ui/css
 ```
 
-`@chassis-ui/css` is a peer dependency, pinned to one 0.x minor (`>=0.6.0 <0.7.0` today): before
+`@chassis-ui/css` is a peer dependency, pinned to one 0.x minor (`>=0.7.0 <0.8.0` today): before
 1.0 a minor release of it can rename the tokens the components rely on.
 
 ## Stylesheets
@@ -92,7 +92,7 @@ examples.
 ## Peer dependencies
 
 - `react` and `react-dom`: `^19.0.0`
-- `@chassis-ui/css`: `>=0.6.0 <0.7.0`
+- `@chassis-ui/css`: `>=0.7.0 <0.8.0`
 
 ## Browser support
 

package/dist/alert.d.ts

@@ -1,2 +1,2 @@
-import { a as AlertIcon, c as AlertFooterProps, d as AlertCancel, f as AlertCancelProps, g as AlertProps, h as Alert, i as AlertTextProps, l as AlertCode, m as AlertBodyProps, n as AlertTitleProps, o as AlertIconProps, p as AlertBody, r as AlertText, s as AlertFooter, t as AlertTitle, u as AlertCodeProps } from "./chunks/index-DgHvXzVh.js";
+import { a as AlertIcon, c as AlertFooterProps, d as AlertCancel, f as AlertCancelProps, g as AlertProps, h as Alert, i as AlertTextProps, l as AlertCode, m as AlertBodyProps, n as AlertTitleProps, o as AlertIconProps, p as AlertBody, r as AlertText, s as AlertFooter, t as AlertTitle, u as AlertCodeProps } from "./chunks/index-DHcztR18.js";
 export { Alert, AlertBody, type AlertBodyProps, AlertCancel, type AlertCancelProps, AlertCode, type AlertCodeProps, AlertFooter, type AlertFooterProps, AlertIcon, type AlertIconProps, type AlertProps, AlertText, type AlertTextProps, AlertTitle, type AlertTitleProps };

package/dist/avatar.d.ts

@@ -1,2 +1,2 @@
-import { a as AvatarImageProps, i as AvatarImage, n as AvatarStackItemDef, o as Avatar, r as AvatarStackProps, s as AvatarProps, t as AvatarStack } from "./chunks/index-D9PZHY_I.js";
+import { a as AvatarImageProps, i as AvatarImage, n as AvatarStackItemDef, o as Avatar, r as AvatarStackProps, s as AvatarProps, t as AvatarStack } from "./chunks/index-B19ZH3fm.js";
 export { Avatar, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarStack, type AvatarStackItemDef, type AvatarStackProps };

package/dist/badge.d.ts

@@ -1,2 +1,2 @@
-import { n as BadgeProps, t as Badge } from "./chunks/index-Dh5CaHTP.js";
+import { n as BadgeProps, t as Badge } from "./chunks/index-aRdgpeRb.js";
 export { Badge, type BadgeProps };

package/dist/button.d.ts

@@ -1,3 +1,3 @@
 import "./chunks/focus-ring-SR_LwaN7.js";
-import { n as ButtonProps, t as Button } from "./chunks/Button-Cptd4Yk7.js";
+import { n as ButtonProps, t as Button } from "./chunks/Button-BuZ_GOHS.js";
 export { Button, type ButtonProps };

package/dist/card.d.ts

@@ -1,2 +1,2 @@
-import { S as CardProps, _ as CardFooter, a as CardSubtitle, b as CardBodyProps, c as CardLinkProps, d as CardImage, f as CardImageProps, g as CardGroupProps, h as CardGroup, i as CardTextProps, l as CardImageOverlay, m as CardHeaderProps, n as CardTitleProps, o as CardSubtitleProps, p as CardHeader, r as CardText, s as CardLink, t as CardTitle, u as CardImageOverlayProps, v as CardFooterProps, x as Card, y as CardBody } from "./chunks/index-CKx1KHED.js";
+import { S as CardProps, _ as CardFooter, a as CardSubtitle, b as CardBodyProps, c as CardLinkProps, d as CardImage, f as CardImageProps, g as CardGroupProps, h as CardGroup, i as CardTextProps, l as CardImageOverlay, m as CardHeaderProps, n as CardTitleProps, o as CardSubtitleProps, p as CardHeader, r as CardText, s as CardLink, t as CardTitle, u as CardImageOverlayProps, v as CardFooterProps, x as Card, y as CardBody } from "./chunks/index-NGgDkhyn.js";
 export { Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardGroup, type CardGroupProps, CardHeader, type CardHeaderProps, CardImage, CardImageOverlay, type CardImageOverlayProps, type CardImageProps, CardLink, type CardLinkProps, type CardProps, CardSubtitle, type CardSubtitleProps, CardText, type CardTextProps, CardTitle, type CardTitleProps };

package/dist/card.js

@@ -1 +1 @@
-"use client";import{a as e,c as t,d as n,i as r,l as i,n as a,o,r as s,s as c,t as l,u}from"./chunks/card-YXn3bj_d.js";export{e as Card,n as CardBody,u as CardFooter,r as CardGroup,s as CardHeader,i as CardImage,a as CardImageOverlay,l as CardLink,t as CardSubtitle,c as CardText,o as CardTitle};
+"use client";import{a as e,c as t,d as n,i as r,l as i,n as a,o,r as s,s as c,t as l,u}from"./chunks/card-CobeDpf1.js";export{e as Card,n as CardBody,u as CardFooter,r as CardGroup,s as CardHeader,i as CardImage,a as CardImageOverlay,l as CardLink,t as CardSubtitle,c as CardText,o as CardTitle};

package/dist/checkbox.d.ts

@@ -1,3 +1,3 @@
-import { t as ButtonObject } from "./chunks/renderFormCheck-DZh_5Df8.js";
-import { i as CheckboxProps, n as CheckboxGroupProps, r as Checkbox, t as CheckboxGroup } from "./chunks/index-DXjbI7Yv.js";
+import { t as ButtonObject } from "./chunks/renderFormCheck-nKgpa_a3.js";
+import { i as CheckboxProps, n as CheckboxGroupProps, r as Checkbox, t as CheckboxGroup } from "./chunks/index-DM01FX3a.js";
 export { type ButtonObject, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };

package/dist/checkbox.js

@@ -1 +1 @@
-"use client";import{n as e,t}from"./chunks/checkbox-ChACalAw.js";export{e as Checkbox,t as CheckboxGroup};
+"use client";import{n as e,t}from"./chunks/checkbox-ZyQn5Ku5.js";export{e as Checkbox,t as CheckboxGroup};

package/dist/chip.d.ts

@@ -1,2 +1,2 @@
-import { n as ChipProps, t as Chip } from "./chunks/index-COsIPd8L.js";
+import { n as ChipProps, t as Chip } from "./chunks/index-B1kw0jzM.js";
 export { Chip, type ChipProps };

package/dist/chunks/{Button-Cptd4Yk7.d.ts → Button-BuZ_GOHS.d.ts}

@@ -1,5 +1,5 @@
 import { r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
-import { a as Shapes, n as ContextColor, r as ContextStyle } from "./types-CS_40Txv.js";
+import { i as ContextStyle, r as ContextColor, s as Shapes } from "./types-D6FM7bYR.js";
 import { ElementType, MouseEventHandler, ReactElement } from "react";
 //#region src/components/button/Button.d.ts
 type ButtonOwnProps<C extends ElementType> = {
@@ -63,4 +63,4 @@ type ButtonComponent = (<C extends ElementType = 'button'>(props: ButtonProps<C>
 declare const Button: ButtonComponent;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=Button-Cptd4Yk7.d.ts.map
+//# sourceMappingURL=Button-BuZ_GOHS.d.ts.map

package/dist/chunks/{Link-nrd0JWlO.d.ts → Link-CKymd2ru.d.ts}

@@ -1,5 +1,5 @@
 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, MouseEventHandler, ReactElement } from "react";
 //#region src/components/link/Link.d.ts
 type LinkOwnProps<C extends ElementType> = {
@@ -68,4 +68,4 @@ type LinkComponent = (<C extends ElementType = 'a'>(props: LinkProps<C> & {
 declare const Link: LinkComponent;
 //#endregion
 export { LinkProps as n, Link as t };
-//# sourceMappingURL=Link-nrd0JWlO.d.ts.map
+//# sourceMappingURL=Link-CKymd2ru.d.ts.map

package/dist/chunks/breakpoints-CGk8szzR.js

@@ -0,0 +1,2 @@
+const e=[`sm`,`md`,`lg`,`xl`,`2xl`],t=[`@sm`,`@md`,`@lg`,`@xl`,`@2xl`],n=[...e,...t],r=e=>typeof e==`object`&&!!e,i=e=>r(e)?e.base:e,a=(e,t)=>n=>{let i=r(e)?e[n]:n===`base`?e:void 0;return i==null?null:t(i,n===`base`?``:`${n}:`)},o=(t,n=e)=>[`base`,...n].flatMap(e=>t.map(t=>t(e))),s=(e,t)=>`${t}flex-${e}`;export{a,o as i,i as n,s as r,n as t};
+//# sourceMappingURL=breakpoints-CGk8szzR.js.map

package/dist/chunks/breakpoints-CGk8szzR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints-CGk8szzR.js","names":[],"sources":["../../src/utils/breakpoints.ts"],"sourcesContent":["import { Breakpoint, ContainerBreakpoint, Responsive } from '../types'\n\n// Mobile-first ascending order. Every responsive layout prop (of `Flex`, `Stack`, `Grid`,\n// `GridItem`, `Card`, `CardBody`, `CardImage` and `Skeleton`) keys its values by these literal\n// chassis-css breakpoint names, after `base`.\nexport const BREAKPOINTS: Breakpoint[] = ['sm', 'md', 'lg', 'xl', '2xl']\n\n// The keys of chassis-css's container-query classes (`@md:col-span-4`), which follow the width of\n// the nearest query container where a breakpoint class follows the viewport. Only `Grid` and\n// `GridItem` take them.\nexport const CONTAINER_BREAKPOINTS: ContainerBreakpoint[] = ['@sm', '@md', '@lg', '@xl', '@2xl']\n\n// Viewport keys first: chassis-css writes its container rules after every breakpoint rule, so\n// the container class wins on an element both apply to, and the class list reads in that order.\nexport const GRID_BREAKPOINTS: Array<Breakpoint | ContainerBreakpoint> = [\n  ...BREAKPOINTS,\n  ...CONTAINER_BREAKPOINTS\n]\n\n// A width in twelfths of the parent: a count, `'auto'` for the natural width, or `true` to fill\n// the rest of a flex row. `Skeleton` maps it to chassis-css's width utilities.\nexport type WidthSpan = 'auto' | number | string | boolean\n\ntype ResponsiveKey = Breakpoint | ContainerBreakpoint\ntype ResponsiveObject<T> = { base?: T } & Partial<Record<ResponsiveKey, T>>\ntype ClassName = string | false | null | undefined\n\n// No responsive prop takes an object as its plain value, so an object is the per-width form.\nconst isResponsiveObject = <T>(\n  value: Responsive<T, ResponsiveKey> | undefined\n): value is ResponsiveObject<T> => typeof value === 'object' && value !== null\n\n/**\n * The value a responsive prop has below the first breakpoint: the plain value, or `base` of the\n * per-width object. A component reads it for what only the base can do, such as a default class\n * or an inline style, which holds no media query.\n */\nexport const baseValue = <T>(value: Responsive<T, ResponsiveKey> | undefined): T | undefined =>\n  isResponsiveObject<T>(value) ? value.base : (value as T | undefined)\n\n/**\n * One responsive prop, ready for `responsiveClassNames` to read at each width.\n */\nexport type ResponsiveProp = (key: 'base' | ResponsiveKey) => ClassName\n\n/**\n * Pairs a responsive prop with the class it maps to. `toClassName` gets one width's value and\n * its prefix: `''` for the base, `` `${breakpoint}:` `` otherwise. A falsy return is no class.\n */\nexport const responsiveProp =\n  <T>(\n    value: Responsive<T, ResponsiveKey> | undefined,\n    toClassName: (value: T, prefix: string) => ClassName\n  ): ResponsiveProp =>\n  (key) => {\n    const at = isResponsiveObject<T>(value)\n      ? value[key]\n      : key === 'base'\n        ? (value as T | undefined)\n        : undefined\n\n    return at === undefined || at === null ? null : toClassName(at, key === 'base' ? '' : `${key}:`)\n  }\n\n/**\n * Builds the class list of a component's responsive props: the base class of every prop first,\n * then the classes of each breakpoint in turn, as in `flex-column gap-sm md:flex-row md:gap-md`.\n *\n * `keys` is the list of keys read from each prop after `base`, in class order: the viewport\n * breakpoints unless the component also takes the container ones (`GRID_BREAKPOINTS`).\n */\nexport const responsiveClassNames = (\n  props: ResponsiveProp[],\n  keys: ReadonlyArray<ResponsiveKey> = BREAKPOINTS\n): ClassName[] => (['base', ...keys] as const).flatMap((key) => props.map((prop) => prop(key)))\n\nexport type FlexDirection = 'row' | 'column'\n\n// The `responsiveProp` class of the `flex-row`/`flex-column` direction toggle shared by `Card`\n// and `CardBody`, both of which map a `direction` prop to the same chassis-css class.\nexport const flexDirectionClassName = (direction: FlexDirection, prefix: string): string =>\n  `${prefix}flex-${direction}`\n"],"mappings":"AAKA,MAAa,EAA4B,CAAC,KAAM,KAAM,KAAM,KAAM,KAAK,EAK1D,EAA+C,CAAC,MAAO,MAAO,MAAO,MAAO,MAAM,EAIlF,EAA4D,CACvE,GAAG,EACH,GAAG,CACL,EAWM,EACJ,GACiC,OAAO,GAAU,YAAY,EAOnD,EAAgB,GAC3B,EAAsB,CAAK,EAAI,EAAM,KAAQ,EAWlC,GAET,EACA,IAED,GAAQ,CACP,IAAM,EAAK,EAAsB,CAAK,EAClC,EAAM,GACN,IAAQ,OACL,EACD,IAAA,GAEN,OAAO,GAA2B,KAAO,KAAO,EAAY,EAAI,IAAQ,OAAS,GAAK,GAAG,EAAI,EAAE,CACjG,EASW,GACX,EACA,EAAqC,IACpB,CAAC,OAAQ,GAAG,CAAI,CAAC,CAAW,QAAS,GAAQ,EAAM,IAAK,GAAS,EAAK,CAAG,CAAC,CAAC,EAMjF,GAA0B,EAA0B,IAC/D,GAAG,EAAO,OAAO"}

package/dist/chunks/breakpoints-ECy4lKQT.d.ts

@@ -0,0 +1,6 @@
+//#region src/utils/breakpoints.d.ts
+type WidthSpan = 'auto' | number | string | boolean;
+type FlexDirection = 'row' | 'column';
+//#endregion
+export { WidthSpan as n, FlexDirection as t };
+//# sourceMappingURL=breakpoints-ECy4lKQT.d.ts.map

package/dist/chunks/card-CobeDpf1.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{t}from"./Link-CZsWCnQb.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-CobeDpf1.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-CobeDpf1.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/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-CJzKu7QI.d.ts → index-B5bF1JxF.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 } from "react";
 //#region src/components/spinner/Spinner.d.ts
 type SpinnerOwnProps<C extends ElementType> = {
@@ -38,4 +38,4 @@ type SpinnerComponent = (<C extends ElementType = 'div'>(props: SpinnerProps<C>
 declare const Spinner: SpinnerComponent;
 //#endregion
 export { SpinnerProps as n, Spinner as t };
-//# sourceMappingURL=index-CJzKu7QI.d.ts.map
+//# sourceMappingURL=index-B5bF1JxF.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

package/dist/chunks/index-BSLneLYu.d.ts

@@ -0,0 +1,79 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { l as Spacing, o as Responsive } from "./types-D6FM7bYR.js";
+import { ElementType, ReactElement } from "react";
+//#region src/components/flex/Flex.d.ts
+type FlexOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Renders an inline flex container (`.d-inline-flex`) instead of a block-level one (`.d-flex`,
+   * the default).
+   */
+  inline?: boolean;
+  /**
+   * Sets `flex-direction`. Omit for the browser default (`row`). An object sets it per
+   * breakpoint, `base` being the narrowest width: `{ base: 'column', md: 'row' }`. The
+   * breakpoints are widths of the viewport, so unlike `Stack`'s `direction` they need no
+   * `.contains-inline` ancestor.
+   */
+  direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
+  /**
+   * Sets `flex-wrap`. Omit for the browser default (`nowrap`). Takes an object per breakpoint,
+   * as `direction` does.
+   */
+  wrap?: Responsive<'wrap' | 'nowrap' | 'wrap-reverse'>;
+  /**
+   * Sets `justify-content`, aligning items along the main axis. Takes an object per breakpoint,
+   * as `direction` does.
+   */
+  justify?: Responsive<'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'>;
+  /**
+   * Sets `align-items`, aligning items along the cross axis. Takes an object per breakpoint, as
+   * `direction` does.
+   */
+  align?: Responsive<'start' | 'end' | 'center' | 'baseline' | 'stretch'>;
+  /**
+   * Sets `align-content`, distributing wrapped lines along the cross axis. Has no effect on
+   * single-line (non-wrapping) containers. Takes an object per breakpoint, as `direction` does.
+   */
+  alignContent?: Responsive<'start' | 'end' | 'center' | 'between' | 'around' | 'stretch'>;
+  /**
+   * Spacing between children on both axes, mapped to the `gap-*` utility classes. Overridden per
+   * axis by `rowGap`/`columnGap` where set. Takes an object per breakpoint, as `direction` does.
+   *
+   * @type { Responsive<Spacing | 0> }
+   */
+  gap?: Responsive<Spacing | 0>;
+  /**
+   * Spacing between rows (the cross axis when wrapped), mapped to the `row-gap-*` utility
+   * classes. Independent of `gap`/`columnGap`. Takes an object per breakpoint, as `direction`
+   * does.
+   *
+   * @type { Responsive<Spacing | 0> }
+   */
+  rowGap?: Responsive<Spacing | 0>;
+  /**
+   * Spacing between columns (the main axis), mapped to the `column-gap-*` utility classes.
+   * Independent of `gap`/`rowGap`. Takes an object per breakpoint, as `direction` does.
+   *
+   * @type { Responsive<Spacing | 0> }
+   */
+  columnGap?: Responsive<Spacing | 0>;
+};
+type FlexProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FlexOwnProps<C>>;
+type FlexComponent = (<C extends ElementType = 'div'>(props: FlexProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Flex: FlexComponent;
+//#endregion
+export { FlexProps as n, Flex as t };
+//# sourceMappingURL=index-BSLneLYu.d.ts.map