@chassis-ui/react 0.3.0 → 0.4.0

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

@@ -1,273 +0,0 @@
-import "./focus-ring-SR_LwaN7.js";
-import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
-import { s as Spacing, t as Breakpoint } from "./types-CS_40Txv.js";
-import { n as Span } from "./breakpoints-CJ-498B7.js";
-import React, { ElementType, HTMLAttributes, ReactElement } from "react";
-//#region src/components/grid/Col.d.ts
-interface ColLayout {
-  /**
-   * Columns (of 12) this Col spans, or `'auto'`/`true` for a natural-width column.
-   *
-   * @type { 'auto' | number | string | boolean }
-   */
-  span?: Span;
-  /**
-   * Columns to offset the start of this Col by.
-   */
-  offset?: number | string;
-  /**
-   * Visual order relative to sibling columns.
-   *
-   * @type { 'first' | 'last' | number | string }
-   */
-  order?: 'first' | 'last' | number | string;
-}
-/**
- * @deprecated Use `GridItemProps`: `Col` is deprecated with the flexbox grid of `@chassis-ui/css`.
- */
-interface ColProps extends HTMLAttributes<HTMLDivElement>, ColLayout {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string;
-  /**
-   * Overrides `span`/`offset`/`order` at a breakpoint and up.
-   *
-   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { span?: 'auto' | number | string | boolean, offset?: number | string, order?: 'first' | 'last' | number | string }>> }
-   */
-  responsive?: Partial<Record<Breakpoint, ColLayout>>;
-}
-/**
- * @deprecated Use `GridItem` in a `Grid`, with `start` for `offset`. A column as wide as its
- * content (`span="auto"`) has no grid equivalent: use `Flex`. `@chassis-ui/css` deprecates its
- * flexbox grid (`.row`, `.col-*`) in 0.6 and removes it in 0.7, and `Col` goes with it.
- */
-declare const Col: React.ForwardRefExoticComponent<ColProps & React.RefAttributes<HTMLDivElement>>;
-//#endregion
-//#region src/components/grid/Container.d.ts
-type ContainerOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string;
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C;
-  /**
-   * Set container 100% wide until the given breakpoint, after which it scales up with `max-width`
-   * at every larger breakpoint.
-   *
-   * @type Breakpoint
-   */
-  fluidUntil?: Breakpoint;
-  /**
-   * Set container 100% wide, spanning the entire width of the viewport.
-   */
-  fluid?: boolean;
-};
-type ContainerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ContainerOwnProps<C>>;
-type ContainerComponent = (<C extends ElementType = 'div'>(props: ContainerProps<C> & {
-  ref?: PolymorphicRef<C>;
-}) => ReactElement | null) & {
-  displayName?: string;
-};
-declare const Container: ContainerComponent;
-//#endregion
-//#region src/components/grid/Grid.d.ts
-interface GridLayout {
-  /**
-   * Number of columns in the grid template from this breakpoint up, mapped to the
-   * `grid-cols-{n}` class (1 to 12). Has no effect when `fill` is set.
-   */
-  columns?: number;
-  /**
-   * Gap between grid items from this breakpoint up, mapped to the `gap-{token}` class.
-   */
-  gap?: Spacing;
-}
-type GridOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string;
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C;
-  /**
-   * Number of columns in the grid template (the column count of `@chassis-ui/css` when omitted,
-   * `12` by default). A count from 1 to 12 is mapped to the `grid-cols-{n}` class, which applies
-   * to this grid alone. Any other count has no class and is set via the `--cx-grid-columns`
-   * custom property, which a grid nested in this one inherits: give that grid `columns` of its
-   * own. Has no effect when `fill` is set.
-   */
-  columns?: number;
-  /**
-   * Number of rows in the grid template, set via the `--cx-grid-rows` custom property (defaults
-   * to `1` in CSS when omitted). Has no effect when `fill` is set.
-   */
-  rows?: number;
-  /**
-   * Gap between grid items: a `Spacing` token (mapped to the `gap-{token}` class) or any raw CSS
-   * `gap` value, including a `"{row} {column}"` pair (set via the `--cx-grid-gap` custom
-   * property). The gutter of the current breakpoint when omitted.
-   *
-   * @type { Spacing | string }
-   */
-  gap?: Spacing | (string & {});
-  /**
-   * Overrides `columns`/`gap` at a breakpoint and up, with the `grid-cols-{n}` and `gap-{token}`
-   * classes.
-   *
-   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { columns?: number, gap?: Spacing }>> }
-   */
-  responsive?: Partial<Record<Breakpoint, GridLayout>>;
-  /**
-   * Renders `.grid-fill` instead of `.grid` — columns expand equally to fill the available
-   * width, with the column count determined by the number of children rather than `columns`.
-   */
-  fill?: boolean;
-  /**
-   * Minimum column width of a `fill` grid, set via the `--cx-grid-min` custom property: any CSS
-   * length, e.g. `"12rem"`. Children wrap to a new row when they would get narrower. Only
-   * relevant when `fill` is set.
-   */
-  min?: string;
-};
-type GridProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridOwnProps<C>>;
-type GridComponent = (<C extends ElementType = 'div'>(props: GridProps<C> & {
-  ref?: PolymorphicRef<C>;
-}) => ReactElement | null) & {
-  displayName?: string;
-};
-declare const Grid: GridComponent;
-//#endregion
-//#region src/components/grid/GridItem.d.ts
-interface GridItemLayout {
-  /**
-   * Number of grid column tracks (of the parent `<Grid>`'s `columns`) this item spans, mapped to
-   * the `col-span-{n}` class, or `'full'` for every track of the row (`col-span-full`). An item
-   * with no `span` is one track wide.
-   *
-   * @type { number | 'full' }
-   */
-  span?: number | 'full';
-  /**
-   * Grid column line to start this item at, mapped to the `col-start-{n}` class. `'auto'`
-   * (`col-start-auto`) returns the item to the flow, to undo a start line at a wider breakpoint.
-   *
-   * @type { number | 'auto' }
-   */
-  start?: number | 'auto';
-  /**
-   * Number of grid row tracks this item spans, mapped to the `row-span-{n}` class.
-   */
-  rowSpan?: number;
-  /**
-   * Grid row line to start this item at, mapped to the `row-start-{n}` class, or `'auto'`
-   * (`row-start-auto`) to return it to the flow.
-   *
-   * @type { number | 'auto' }
-   */
-  rowStart?: number | 'auto';
-}
-type GridItemOwnProps<C extends ElementType> = GridItemLayout & {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string;
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C;
-  /**
-   * Overrides `span`/`start`/`rowSpan`/`rowStart` at a breakpoint and up.
-   *
-   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { span?: number | 'full', start?: number | 'auto', rowSpan?: number, rowStart?: number | 'auto' }>> }
-   */
-  responsive?: Partial<Record<Breakpoint, GridItemLayout>>;
-  /**
-   * Turns this item into a nested subgrid: adds `.grid`/`.grid-cols-subgrid` alongside its
-   * `col-span-{n}`/`col-start-{n}` placement classes, so its own children inherit the parent
-   * `<Grid>`'s column tracks instead of defining new ones. Combine with `span` — a subgrid
-   * item must itself be a grid item of the parent for `grid-template-columns: subgrid` to take
-   * effect, which is why `subgrid` lives on `<GridItem>` (the element actually placed as a grid
-   * item) rather than on a `<Grid>` nested inside it.
-   */
-  subgrid?: boolean;
-  /**
-   * Number of rows in the subgrid's own row template, set via the `--cx-grid-rows` custom
-   * property (defaults to `1` in CSS when omitted). Only relevant when `subgrid` is set —
-   * subgrid only inherits the parent's column tracks, not its rows.
-   */
-  rows?: number;
-  /**
-   * Gap between the subgrid's children: a `Spacing` token (mapped to the `gap-{token}` class) or
-   * any raw CSS `gap` value (set via the `--cx-grid-gap` custom property). Only relevant when
-   * `subgrid` is set. A subgrid has the gap of its own: when the parent `<Grid>` takes a `gap`
-   * token, give the subgrid the same one, or its children are narrower than the parent's tracks.
-   *
-   * @type { Spacing | string }
-   */
-  gap?: Spacing | (string & {});
-};
-type GridItemProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridItemOwnProps<C>>;
-type GridItemComponent = (<C extends ElementType = 'div'>(props: GridItemProps<C> & {
-  ref?: PolymorphicRef<C>;
-}) => ReactElement | null) & {
-  displayName?: string;
-};
-declare const GridItem: GridItemComponent;
-//#endregion
-//#region src/components/grid/Row.d.ts
-interface RowLayout {
-  /**
-   * Equal-width columns per row, or `'auto'` for content-sized columns.
-   *
-   * @type { 'auto' | number | string }
-   */
-  cols?: 'auto' | number | string;
-  /**
-   * Gutter width on both axes.
-   *
-   * @type { Spacing | 0 }
-   */
-  gutter?: Spacing | 0;
-  /**
-   * Horizontal gutter width.
-   *
-   * @type { Spacing | 0 }
-   */
-  gutterX?: Spacing | 0;
-  /**
-   * Vertical gutter width.
-   *
-   * @type { Spacing | 0 }
-   */
-  gutterY?: Spacing | 0;
-}
-/**
- * @deprecated Use `GridProps`: `Row` is deprecated with the flexbox grid of `@chassis-ui/css`.
- */
-interface RowProps extends HTMLAttributes<HTMLDivElement>, RowLayout {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string;
-  /**
-   * Overrides `cols`/`gutter`/`gutterX`/`gutterY` at a breakpoint and up.
-   *
-   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { cols?: 'auto' | number | string, gutter?: Spacing | 0, gutterX?: Spacing | 0, gutterY?: Spacing | 0 }>> }
-   */
-  responsive?: Partial<Record<Breakpoint, RowLayout>>;
-}
-/**
- * @deprecated Use `Grid`, with `columns` for `cols` and `gap` for `gutter`. `@chassis-ui/css`
- * deprecates its flexbox grid (`.row`, `.col-*`) in 0.6 and removes it in 0.7, and `Row` goes
- * with it.
- */
-declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
-//#endregion
-export { GridItemProps as a, GridProps as c, Col as d, ColProps as f, GridItemLayout as i, Container as l, RowProps as n, Grid as o, GridItem as r, GridLayout as s, Row as t, ContainerProps as u };
-//# sourceMappingURL=index-RHJhkSY-.d.ts.map

package/dist/chunks/skeleton-BrD2JwNx.js

@@ -1,2 +0,0 @@
-import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{t}from"./breakpoints-o_2Ev7ir.js";import n,{Fragment as r,forwardRef as i}from"react";import a from"classnames";const o=(e,t)=>e===!0?`${t}flex-fill`:e===`auto`?`${t}w-auto`:typeof e==`number`||typeof e==`string`?Number(e)===12?`${t}w-100`:`${t}w-${e}/12`:null,s=(e,t)=>[o(e,t)];function c({children:e,animation:r,className:i,color:o,component:c,span:l,responsive:u,...d},f){let p=c??`span`,m=a(`skeleton`,r&&`skeleton-${r}`,{[`bg-${o}`]:o},t(s,l,u),i);return n.createElement(p,{className:m,...d,ref:f},e)}const l=e(c,`Skeleton`);function u({children:e,color:t,component:i,loading:a,spans:o,...s},c){if(!a)return n.createElement(n.Fragment,null,e);let u=o===void 0?[void 0]:Array.isArray(o)?o:[o];return n.createElement(n.Fragment,null,u.map((e,a)=>n.createElement(r,{key:a},a>0&&` `,n.createElement(l,{component:i,span:e,color:t,...s,ref:a===0?c:void 0}))))}const d=i(u);d.displayName=`SkeletonLoader`;export{l as n,d as t};
-//# sourceMappingURL=skeleton-BrD2JwNx.js.map

package/dist/chunks/skeleton-BrD2JwNx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton-BrD2JwNx.js","names":[],"sources":["../../src/components/skeleton/Skeleton.tsx","../../src/components/skeleton/SkeletonLoader.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { WidthSpan, buildResponsiveClassNames } from '../../utils/breakpoints'\nimport { Breakpoint, ContextColor } from '../../types'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype SkeletonOwnProps<C extends ElementType> = {\n  /**\n   * Adds `skeleton-{animation}` alongside the base `skeleton` class, so the element animates\n   * itself as well as any nested `<Skeleton>` children. Nest plain `<Skeleton>` children inside\n   * it for the glow pulse to reach them too, or apply `wave` to a container of one or more\n   * `<Skeleton>` children for a directional sweep across the whole group.\n   */\n  animation?: 'glow' | 'wave'\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the component to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Component used for the root node. Either a string to use an HTML element or a component —\n   * e.g. `Avatar` or `Button`. Its own props are type-checked at the call site once passed here.\n   *\n   * @default 'span'\n   */\n  component?: C\n  /**\n   * Width of the skeleton in twelfths of its parent (`span={6}` is half, mapped to the\n   * `w-{n}/12` class; `span={12}` is `w-100`), `'auto'` for its natural width (`w-auto`), or\n   * `true` to fill the rest of a flex row (`flex-fill`). Unset by default, so the rendered\n   * element's own intrinsic width applies — set it explicitly (e.g. `span={12}`) for a\n   * full-width text line; leave it unset when `component` is something that sizes itself, like\n   * `Avatar` or `Button`.\n   *\n   * @type { 'auto' | number | string | boolean }\n   */\n  span?: WidthSpan\n  /**\n   * Overrides `span` at a breakpoint and up.\n   *\n   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', 'auto' | number | string | boolean>> }\n   */\n  responsive?: Partial<Record<Breakpoint, WidthSpan>>\n}\n\nexport type SkeletonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  SkeletonOwnProps<C>\n>\n\ntype SkeletonComponent = (<C extends ElementType = 'span'>(\n  props: SkeletonProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// chassis-css has the fractions `w-1/12` to `w-11/12`; twelve twelfths is `w-100`.\nconst spanClassName = (span: WidthSpan | undefined, prefix: string) => {\n  if (span === true) return `${prefix}flex-fill`\n  if (span === 'auto') return `${prefix}w-auto`\n  if (typeof span === 'number' || typeof span === 'string') {\n    return Number(span) === 12 ? `${prefix}w-100` : `${prefix}w-${span}/12`\n  }\n  return null\n}\n\nconst spanClassNames = (span: WidthSpan | undefined, prefix: string) => [\n  spanClassName(span, prefix)\n]\n\nfunction SkeletonRender<C extends ElementType = 'span'>(\n  { children, animation, className, color, component, span, responsive, ...rest }: SkeletonProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'span'\n  const _className = classNames(\n    'skeleton',\n    animation && `skeleton-${animation}`,\n    { [`bg-${color}`]: color },\n    buildResponsiveClassNames(spanClassNames, span, responsive),\n    className\n  )\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const Skeleton = createPolymorphicComponent<SkeletonComponent>(\n  SkeletonRender as ForwardRefRenderFunction<Element, SkeletonProps<ElementType>>,\n  'Skeleton'\n)\n","import React, {\n  ComponentPropsWithoutRef,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ForwardRefRenderFunction,\n  Fragment,\n  ReactElement,\n  ReactNode\n} from 'react'\n\nimport { WidthSpan } from '../../utils/breakpoints'\nimport { PolymorphicRef } from '../../utils/polymorphic'\nimport { ContextColor } from '../../types'\nimport { Skeleton, SkeletonProps } from './Skeleton'\n\ntype SkeletonLoaderOwnProps<C extends ElementType> = {\n  /**\n   * The real content, rendered unchanged (no wrapping element) once `loading` is `false`.\n   */\n  children: ReactNode\n  /**\n   * Sets the color of the generated skeleton lines to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Component used for the generated skeleton(s) — e.g. `Avatar` or `Button` — for swapping\n   * non-text content, not just text runs. Its own props are type-checked at the call site once\n   * passed here, same as `Skeleton`'s own `component` prop.\n   *\n   * @default 'span'\n   */\n  component?: C\n  /**\n   * Swaps `children` for one `<Skeleton>` per entry in `spans` while `true`.\n   */\n  loading: boolean\n  /**\n   * One skeleton line per entry, using the same values as `Skeleton`'s `span` prop — e.g.\n   * `[12, 6]` for a full-width line followed by a half-width one. A single value (e.g. `6`) is\n   * shorthand for a single line, equivalent to `[6]`. Leave unset for a single skeleton sized by\n   * `component`'s own intrinsic width instead — e.g. an `Avatar`'s `size` prop. Rendered instead\n   * of `children` while `loading` is `true`; ignored once `loading` is `false`.\n   *\n   * @type { 'auto' | number | string | boolean | Array<'auto' | number | string | boolean> }\n   */\n  spans?: WidthSpan | WidthSpan[]\n}\n\n// Spelled out rather than `PolymorphicComponentProps`, which adds `asChild`: `SkeletonLoader`\n// renders no element of its own (it swaps its `children` for generated `Skeleton` lines), so\n// there's nothing for a child element to stand in for. (`Omit`-ing it from that type instead\n// breaks `C`'s inference from `component`.)\nexport type SkeletonLoaderProps<C extends ElementType = 'span'> = SkeletonLoaderOwnProps<C> &\n  Omit<ComponentPropsWithoutRef<C>, keyof SkeletonLoaderOwnProps<C> | 'asChild'>\n\ntype SkeletonLoaderComponent = (<C extends ElementType = 'span'>(\n  props: SkeletonLoaderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n/**\n * A pure content swap: no wrapping element of its own, so `.skeleton-glow`/`.skeleton-wave`\n * won't reach the lines it generates unless applied to a container already in the tree — see\n * `Skeleton`'s own docs for why the animation classes need a `.skeleton` descendant to animate.\n *\n * The ref goes to the first generated skeleton while `loading`, and is `null` once the real\n * content shows: that content is the caller's, with refs of its own.\n */\nfunction SkeletonLoaderRender<C extends ElementType = 'span'>(\n  { children, color, component, loading, spans, ...rest }: SkeletonLoaderProps<C>,\n  ref: ForwardedRef<Element>\n) {\n  if (!loading) return <>{children}</>\n\n  const spanList = spans === undefined ? [undefined] : Array.isArray(spans) ? spans : [spans]\n\n  return (\n    <>\n      {spanList.map((span, index) => (\n        // eslint-disable-next-line react/no-array-index-key -- `spans` is a static prop array\n        <Fragment key={index}>\n          {index > 0 && ' '}\n          {/* `rest` is `C`'s own props minus `SkeletonLoaderOwnProps`'s keys, which structurally\n              satisfies what `Skeleton<C>` wants (`C`'s own props minus its own, different, key\n              set) — TS can't verify that across two independently-generic components, hence the\n              cast. */}\n          <Skeleton\n            component={component}\n            span={span}\n            color={color}\n            {...(rest as unknown as SkeletonProps<C>)}\n            ref={index === 0 ? ref : undefined}\n          />\n        </Fragment>\n      ))}\n    </>\n  )\n}\n\n// `forwardRef` takes a render function that isn't generic, so the generic type is cast back on,\n// as `createPolymorphicComponent` does.\nexport const SkeletonLoader = forwardRef(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  SkeletonLoaderRender as ForwardRefRenderFunction<Element, any>\n) as unknown as SkeletonLoaderComponent\n\nSkeletonLoader.displayName = 'SkeletonLoader'\n"],"mappings":"sMA+DA,MAAM,GAAiB,EAA6B,IAC9C,IAAS,GAAa,GAAG,EAAO,WAChC,IAAS,OAAe,GAAG,EAAO,QAClC,OAAO,GAAS,UAAY,OAAO,GAAS,SACvC,OAAO,CAAI,IAAM,GAAK,GAAG,EAAO,OAAS,GAAG,EAAO,IAAI,EAAK,KAE9D,KAGH,GAAkB,EAA6B,IAAmB,CACtE,EAAc,EAAM,CAAM,CAC5B,EAEA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,QAAO,YAAW,OAAM,aAAY,GAAG,GACzE,EACA,CACA,IAAM,EAAY,GAAa,OACzB,EAAa,EACjB,WACA,GAAa,YAAY,IACzB,EAAG,MAAM,KAAU,CAAM,EACzB,EAA0B,EAAgB,EAAM,CAAU,EAC1D,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAW,EACtB,EACA,UACF,EC/BA,SAAS,EACP,CAAE,WAAU,QAAO,YAAW,UAAS,QAAO,GAAG,GACjD,EACA,CACA,GAAI,CAAC,EAAS,OAAO,EAAA,cAAA,EAAA,SAAA,KAAG,CAAW,EAEnC,IAAM,EAAW,IAAU,IAAA,GAAY,CAAC,IAAA,EAAS,EAAI,MAAM,QAAQ,CAAK,EAAI,EAAQ,CAAC,CAAK,EAE1F,OACE,EAAA,cAAA,EAAA,SAAA,KACG,EAAS,KAAK,EAAM,IAEnB,EAAA,cAAC,EAAD,CAAU,IAAK,CAaL,EAZP,EAAQ,GAAK,IAKd,EAAA,cAAC,EAAD,CACa,YACL,OACC,QACP,GAAK,EACL,IAAK,IAAU,EAAI,EAAM,IAAA,EAC1B,CAAA,CACO,CACX,CACD,CAEN,CAIA,MAAa,EAAiB,EAE5B,CACF,EAEA,EAAe,YAAc"}

package/dist/chunks/stack-CsMiQbpq.js

@@ -1,2 +0,0 @@
-import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{t}from"./breakpoints-o_2Ev7ir.js";import{t as n}from"./spacingClassName-DVhk8m3P.js";import r from"react";import i from"classnames";const a=(e,t)=>[`${t}${e===`vertical`?`vstack`:`hstack`}`];function o({children:e,className:o,component:s,direction:c=`horizontal`,gap:l,responsive:u,...d},f){let p=s??`div`,m=i(t(a,c,u),n(`gap`,l),o);return r.createElement(p,{className:m,...d,ref:f},e)}const s=e(o,`Stack`);export{s as t};
-//# sourceMappingURL=stack-CsMiQbpq.js.map

package/dist/chunks/stack-CsMiQbpq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stack-CsMiQbpq.js","names":[],"sources":["../../src/components/stack/Stack.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 { buildResponsiveClassNames } from '../../utils/breakpoints'\nimport { spacingClassName } from '../../utils/spacingClassName'\nimport { Breakpoint, Spacing } from '../../types'\n\nconst directionClassName = (direction: 'horizontal' | 'vertical', prefix: string) => [\n  `${prefix}${direction === 'vertical' ? 'vstack' : 'hstack'}`\n]\n\ntype StackOwnProps<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   * Lays children out in a row (`horizontal`, the default, maps to `.hstack`) or a column\n   * (`vertical`, maps to `.vstack`).\n   */\n  direction?: 'horizontal' | 'vertical'\n  /**\n   * Spacing between children, mapped to the `gap-*` utility classes.\n   */\n  gap?: Spacing | 0\n  /**\n   * Switches `direction` at one or more breakpoints via container queries. Requires a\n   * `.contains-inline` ancestor (not applied by `Stack` itself — see the docs) to establish the\n   * container context these queries evaluate against.\n   */\n  responsive?: Partial<Record<Breakpoint, 'horizontal' | 'vertical'>>\n}\n\nexport type StackProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  StackOwnProps<C>\n>\n\ntype StackComponent = (<C extends ElementType = 'div'>(\n  props: StackProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction StackRender<C extends ElementType = 'div'>(\n  {\n    children,\n    className,\n    component,\n    direction = 'horizontal',\n    gap,\n    responsive,\n    ...rest\n  }: StackProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames(\n    buildResponsiveClassNames(directionClassName, direction, responsive),\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 Stack = createPolymorphicComponent<StackComponent>(\n  StackRender as ForwardRefRenderFunction<Element, StackProps<ElementType>>,\n  'Stack'\n)\n"],"mappings":"0NAYA,MAAM,GAAsB,EAAsC,IAAmB,CACnF,GAAG,IAAS,IAAc,WAAa,SAAW,UACpD,EAqCA,SAAS,EACP,CACE,WACA,YACA,YACA,YAAY,aACZ,MACA,aACA,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EACjB,EAA0B,EAAoB,EAAW,CAAU,EACnE,EAAiB,MAAO,CAAG,EAC3B,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAQ,EACnB,EACA,OACF"}