@chassis-ui/react 0.2.0 → 0.4.0

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":"iMAyCA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,aAAY,QAAO,GAAG,GACxD,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EAAW,YAAa,GAAS,QAAS,EAAY,CAAS,EAElF,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAY,EACvB,EACA,WACF,EExDM,EAAiB,IAAI,IAAY,CDuDrC,OACA,MACA,MACA,MACA,KACA,KACA,KACA,KACA,KACA,MACA,MACA,MACA,MACA,KCpEqC,CAAO,EAKjC,GAAgB,EAAyB,EAAS,KAC7D,IAAQ,IAAA,IAAa,EAAe,IAAI,CAAG,EAAI,GAAG,EAAO,MAAM,IAAQ,KAE5D,EAAY,GACvB,IAAQ,IAAA,IAAa,CAAC,EAAe,IAAI,CAAG,EAAI,EAAM,IAAA,GCV3C,EAAgB,GAC3B,IAAS,IAAA,IAAa,OAAO,UAAU,CAAI,GAAK,GAAQ,GAAK,GAAQ,EAI1D,EAAgB,GAC3B,IAAS,IAAA,IAAa,CAAC,EAAa,CAAI,EAAI,UAAU,EAAK,mBAAqB,IAAA,GCmG5E,EAAmB,GACvB,IAAY,IAAA,IAAa,OAAO,UAAU,CAAO,GAAK,GAAW,GAAK,GAAW,GAG7E,GAAiB,EAAgB,IACrC,GAAG,EAAO,YAAY,EAAK,QAAQ,SAAU,KAAK,IAMpD,SAAS,EACP,CACE,WACA,YACA,YACA,UACA,OACA,MACA,OACA,YACA,OACA,MACA,QACA,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MAOzB,EAAc,EAAU,CAAO,EAC/B,EAAW,EAAU,CAAI,EACzB,EAAU,EAAkB,CAAG,EAE/B,EAAa,EACjB,EAAO,YAAc,OACrB,GAAa,YACb,EACE,CACE,EACE,GACC,EAAO,IACN,CAAC,IAAS,IAAW,IAAM,EAAgB,CAAK,IAAM,GAAG,EAAO,YAAY,GAChF,EACA,EACE,GACC,EAAO,IACN,CAAC,IAAS,IAAW,IAAM,EAAa,CAAK,IAAM,GAAG,EAAO,YAAY,GAC7E,EACA,EAAuB,EAAK,CAAY,EACxC,EAAe,EAAM,CAAa,CACpC,EACA,CACF,EACA,CACF,EAEM,EAAoB,CAAE,GAAG,CAAM,EAC/B,EAAO,EAAS,CAAO,EAI7B,GAFI,IAAS,IAAA,KAAW,EAAO,iBAAmB,GAE9C,EACE,IAAQ,IAAA,KAAW,EAAO,iBAAmB,OAC5C,CACD,IAAgB,IAAA,IAAa,CAAC,EAAgB,CAAW,IAC3D,EAAO,qBAAuB,GAEhC,IAAM,EAAQ,EAAa,CAAQ,EAC/B,IAAU,IAAA,KAAW,EAAO,iBAAmB,EACrD,CAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,MAAO,EAAQ,GAAI,EAAW,KAErD,EADR,CACQ,CAEf,CAEA,MAAa,EAAO,EAClB,EACA,MACF,EChFA,SAAS,EACP,CACE,WACA,YACA,YACA,OACA,QACA,MACA,UACA,WACA,SACA,UACA,OACA,MACA,QACA,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EACjB,EACE,CACE,EAAe,GAAO,EAAO,IAAW,GAAG,EAAO,WAAW,GAAO,EACpE,EAAe,GAAQ,EAAO,IAAW,GAAG,EAAO,YAAY,GAAO,EACtE,EAAe,GAAM,EAAO,IAAW,GAAG,EAAO,UAAU,GAAO,EAClE,EAAe,GAAU,EAAO,IAAW,GAAG,EAAO,WAAW,GAAO,EACvE,EAAe,GAAW,EAAO,IAAW,GAAG,EAAO,YAAY,GAAO,EACzE,EAAe,GAAS,EAAO,IAAW,GAAG,EAAO,UAAU,GAAO,CACvE,EACA,CACF,EACA,GAAW,yBACX,GAAW,EAAa,CAAI,GAAK,aAAa,IAC9C,GAAW,EAAa,CAAG,EAC3B,CACF,EAEM,EAAwB,CAAE,GAAG,CAAM,EAEzC,GAAI,EAAS,CACX,IAAM,EAAQ,EAAa,CAAI,EAC3B,IAAU,IAAA,KAAW,EAAO,iBAAmB,GACnD,IAAM,EAAO,EAAS,CAAG,EACrB,IAAS,IAAA,KAAW,EAAO,iBAAmB,EACpD,CAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,MAAO,EAAQ,GAAI,EAAW,KAErD,EADR,CACQ,CAEf,CAEA,MAAa,EAAW,EACtB,EACA,UACF"}

package/dist/chunks/{icon-mxYpL5nL.js → icon-BQsT6YtE.js}

@@ -1 +1,2 @@
-import"./focus-ring-SR_LwaN7.js";import{i as e,n as t}from"./Icon-BIwkD-kx.js";import n,{useMemo as r}from"react";const i=({children:i,className:a,component:o,font:s,fontPrefix:c,icons:l,sprite:u})=>{let d=t(),f=r(()=>({className:a??d.className,component:o??d.component,font:s??d.font,fontPrefix:c??d.fontPrefix,icons:l?{...d.icons,...l}:d.icons,sprite:u??d.sprite}),[d,a,o,s,c,l,u]);return n.createElement(e.Provider,{value:f},i)};i.displayName=`IconProvider`;export{i as t};
+import"./focus-ring-SR_LwaN7.js";import{i as e,n as t}from"./Icon-DLB1f88W.js";import n,{useMemo as r}from"react";const i=({children:i,className:a,component:o,font:s,fontPrefix:c,icons:l,sprite:u})=>{let d=t(),f=r(()=>({className:a??d.className,component:o??d.component,font:s??d.font,fontPrefix:c??d.fontPrefix,icons:l?{...d.icons,...l}:d.icons,sprite:u??d.sprite}),[d,a,o,s,c,l,u]);return n.createElement(e.Provider,{value:f},i)};i.displayName=`IconProvider`;export{i as t};
+//# sourceMappingURL=icon-BQsT6YtE.js.map

package/dist/chunks/icon-BQsT6YtE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-BQsT6YtE.js","names":[],"sources":["../../src/components/icon/IconProvider.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react'\n\nimport { useIconConfig } from '../../hooks/useIconConfig'\nimport { IconConfig, IconContext } from '../../utils/iconConfig'\n\nexport interface IconProviderProps extends IconConfig {\n  /**\n   * The part of the app these icon settings apply to.\n   */\n  children?: ReactNode\n}\n\n// Nested providers extend the one above them: a setting left unset here keeps the outer value,\n// and `icons` merges per key, so an inner provider can remap one icon without restating the rest.\nexport const IconProvider = ({\n  children,\n  className,\n  component,\n  font,\n  fontPrefix,\n  icons,\n  sprite\n}: IconProviderProps) => {\n  const parent = useIconConfig()\n  const value = useMemo<IconConfig>(\n    () => ({\n      className: className ?? parent.className,\n      component: component ?? parent.component,\n      font: font ?? parent.font,\n      fontPrefix: fontPrefix ?? parent.fontPrefix,\n      icons: icons ? { ...parent.icons, ...icons } : parent.icons,\n      sprite: sprite ?? parent.sprite\n    }),\n    [parent, className, component, font, fontPrefix, icons, sprite]\n  )\n\n  return <IconContext.Provider value={value}>{children}</IconContext.Provider>\n}\n\nIconProvider.displayName = 'IconProvider'\n"],"mappings":"kHAcA,MAAa,GAAgB,CAC3B,WACA,YACA,YACA,OACA,aACA,QACA,YACuB,CACvB,IAAM,EAAS,EAAc,EACvB,EAAQ,OACL,CACL,UAAW,GAAa,EAAO,UAC/B,UAAW,GAAa,EAAO,UAC/B,KAAM,GAAQ,EAAO,KACrB,WAAY,GAAc,EAAO,WACjC,MAAO,EAAQ,CAAE,GAAG,EAAO,MAAO,GAAG,CAAM,EAAI,EAAO,MACtD,OAAQ,GAAU,EAAO,MAC3B,GACA,CAAC,EAAQ,EAAW,EAAW,EAAM,EAAY,EAAO,CAAM,CAChE,EAEA,OAAO,EAAA,cAAC,EAAY,SAAb,CAA6B,OAAuC,EAA/B,CAA+B,CAC7E,EAEA,EAAa,YAAc"}

package/dist/chunks/{iconConfig-Bu6Pt9o3.d.ts → iconConfig-C6gbYhsD.d.ts}

@@ -4,7 +4,7 @@ import { ComponentType, ReactElement } from "react";
  * The icons this library's own components draw, by purpose rather than by icon name — so a
  * consumer can map each one onto any icon set (see `IconProvider`'s `icons`).
  */
-type IconKey = 'check' | 'previous' | 'next' | 'menu' | 'play' | 'pause';
+type IconKey = 'check' | 'previous' | 'next' | 'menu' | 'more' | 'play' | 'pause' | 'increment' | 'decrement' | 'search' | 'clear' | 'expand';
 /**
  * An icon given to `IconProvider`'s `icons` or to a component's icon prop: a string is an icon
  * name, rendered by `IconProvider`'s `component` (or the built-in `Icon`); an element is rendered
@@ -53,7 +53,8 @@ interface IconConfig {
   /**
    * The icon to render for each of the library's own icons, by purpose. Unset ones keep their
    * defaults (`check-solid`, `chevron-left-outline`, `chevron-right-outline`, `bars-outline`,
-   * `play-solid`, `pause-solid`).
+   * `ellipsis-h-solid`, `play-solid`, `pause-solid`, `chevron-up-outline`, `chevron-down-outline`,
+   * `search-outline`, `xmark-outline`, `chevron-right-outline`).
    */
   icons?: Partial<Record<IconKey, IconValue>>;
   /**
@@ -66,4 +67,5 @@ interface IconConfig {
   sprite?: string;
 }
 //#endregion
-export { IconValue as i, IconConfig as n, IconKey as r, IconComponentProps as t };
+export { IconValue as i, IconConfig as n, IconKey as r, IconComponentProps as t };
+//# sourceMappingURL=iconConfig-C6gbYhsD.d.ts.map

package/dist/chunks/iconSlot-BNu2MrFI.js

@@ -0,0 +1,2 @@
+import{n as e}from"./lazyElement-tfMG21pZ.js";import{n as t,r as n,t as r}from"./Icon-DLB1f88W.js";import i,{cloneElement as a}from"react";import{mergeProps as o}from"react-aria";function s({value:n,...s}){let{component:c}=t(),l={"aria-hidden":!0,...s};if(typeof n!=`string`){let t=e(n);return a(t,o(l,t.props))}return c?i.createElement(c,{name:n,...l}):i.createElement(r,{name:n,...l})}function c({icon:e,override:r,...a}){let{icons:o}=t();return i.createElement(s,{value:r??o?.[e]??n[e],...a})}export{s as n,c as t};
+//# sourceMappingURL=iconSlot-BNu2MrFI.js.map

package/dist/chunks/iconSlot-BNu2MrFI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconSlot-BNu2MrFI.js","names":[],"sources":["../../src/utils/iconSlot.tsx"],"sourcesContent":["import React, { cloneElement, ReactElement } from 'react'\nimport { mergeProps } from 'react-aria'\n\nimport { Icon } from '../components/icon/Icon'\nimport { useIconConfig } from '../hooks/useIconConfig'\nimport { DEFAULT_ICONS, IconKey, IconValue } from './iconConfig'\nimport { resolveLazy } from './lazyElement'\n\n// Every icon this library's own components draw goes through here, never through `<Icon>`\n// directly, so a consumer can swap in their own icons (`IconProvider`'s `icons`/`component`, or a\n// component's own icon prop). The rendering component passes the class names chassis-css hooks\n// onto (`menu-item-check` positions the check, `navbar-toggler-icon` sizes and colors it,\n// `carousel-icon-play`/`-pause` are toggled by state, `directional-icon` flips in RTL); those are\n// merged onto whatever icon ends up rendered, so a custom icon lands in the same place a built-in\n// one would. `aria-hidden` defaults on: each of these icons sits beside its own visible or\n// visually-hidden label.\n//\n// A custom *element* deliberately doesn't get the `icon` class itself: chassis-css's `.icon` sets\n// `fill`, which would paint over an outline icon set's `fill=\"none\"` (Lucide, Heroicons outline,\n// ...). It keeps its own size and color — `currentColor` icons still follow the control's text.\ntype IconRenderProps = { className?: string } & Record<string, unknown>\n\nexport function ResolvedIcon({ value, ...props }: IconRenderProps & { value: IconValue }) {\n  const { component: Component } = useIconConfig()\n  const iconProps = { 'aria-hidden': true, ...props }\n\n  if (typeof value !== 'string') {\n    // An icon element passed from a Server Component can be a lazy node (see `./lazyElement`).\n    const element = resolveLazy(value) as ReactElement<Record<string, unknown>>\n    return cloneElement(element, mergeProps(iconProps, element.props))\n  }\n  if (Component) return <Component name={value} {...iconProps} />\n  return <Icon name={value} {...iconProps} />\n}\n\nexport function IconSlot({\n  icon,\n  override,\n  ...props\n}: IconRenderProps & { icon: IconKey; override?: IconValue }) {\n  const { icons } = useIconConfig()\n  return <ResolvedIcon value={override ?? icons?.[icon] ?? DEFAULT_ICONS[icon]} {...props} />\n}\n"],"mappings":"mLAsBA,SAAgB,EAAa,CAAE,QAAO,GAAG,GAAiD,CACxF,GAAM,CAAE,UAAW,GAAc,EAAc,EACzC,EAAY,CAAE,cAAe,GAAM,GAAG,CAAM,EAElD,GAAI,OAAO,GAAU,SAAU,CAE7B,IAAM,EAAU,EAAY,CAAK,EACjC,OAAO,EAAa,EAAS,EAAW,EAAW,EAAQ,KAAK,CAAC,CACnE,CAEA,OADI,EAAkB,EAAA,cAAC,EAAD,CAAW,KAAM,EAAO,GAAI,CAAY,CAAA,EACvD,EAAA,cAAC,EAAD,CAAM,KAAM,EAAO,GAAI,CAAY,CAAA,CAC5C,CAEA,SAAgB,EAAS,CACvB,OACA,WACA,GAAG,GACyD,CAC5D,GAAM,CAAE,SAAU,EAAc,EAChC,OAAO,EAAA,cAAC,EAAD,CAAc,MAAO,GAAY,IAAQ,IAAS,EAAc,GAAO,GAAI,CAAQ,CAAA,CAC5F"}

package/dist/chunks/{index-BKMW0rkw.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';
@@ -26,7 +26,8 @@ type PlaceholderOwnProps<C extends ElementType> = {
   /**
    * Component used for the root node when `src` is set. Either a string to use an HTML element
    * or a component — e.g. a framework's own `Image` component. Its own props (`src`, `fill`,
-   * `priority`, etc.) are type-checked at the call site once passed here.
+   * `priority`, etc.) are type-checked at the call site once passed here. With `asChild`, the
+   * child element is the image and carries its own `src`.
    */
   component?: C;
   /**
@@ -77,4 +78,5 @@ type PlaceholderComponent = (<C extends ElementType = 'img'>(props: PlaceholderP
 };
 declare const Placeholder: PlaceholderComponent;
 //#endregion
-export { PlaceholderProps as n, Placeholder as t };
+export { PlaceholderProps as n, Placeholder as t };
+//# sourceMappingURL=index-0jbACjYQ.d.ts.map

package/dist/chunks/{index-BO_1MN66.d.ts → index-4cKG9KWB.d.ts}

@@ -79,9 +79,7 @@ interface PasswordStrengthProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
    */
   weights?: Partial<StrengthWeights>;
 }
-declare const PasswordStrength: {
-  ({ "aria-label": ariaLabel, className, id, maxScore, messages, minLength, onStrengthChange, scorer, showText, thresholds, value, variant, weights, ...rest }: PasswordStrengthProps): React.JSX.Element;
-  displayName: string;
-};
+declare const PasswordStrength: React.ForwardRefExoticComponent<PasswordStrengthProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { PasswordStrengthProps as n, PasswordStrength as t };
+export { PasswordStrengthProps as n, PasswordStrength as t };
+//# sourceMappingURL=index-4cKG9KWB.d.ts.map

package/dist/chunks/index-6uob77s9.d.ts

@@ -77,4 +77,5 @@ interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'de
 }
 declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 //#endregion
-export { TextInputProps as n, TextInput as t };
+export { TextInputProps as n, TextInput as t };
+//# sourceMappingURL=index-6uob77s9.d.ts.map

package/dist/chunks/{index-tOodmT36.d.ts → index-91YA-jkp.d.ts}

@@ -1,7 +1,7 @@
 import "./focus-ring-SR_LwaN7.js";
 import { i as MenuItemsDef } from "./MenuItemDef-D0VDtYIQ.js";
 import { i as ComboboxGroupProps, n as ComboboxItemProps } from "./ComboboxItem-C9TpoJOI.js";
-import { HTMLAttributes, ReactNode } from "react";
+import React, { HTMLAttributes, ReactNode } from "react";
 import { Key as Key$1 } from "react-stately";
 //#region src/components/autocomplete/Autocomplete.d.ts
 interface AutocompleteProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
@@ -107,10 +107,7 @@ interface AutocompleteProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChan
    */
   value?: Key$1 | Key$1[] | null;
 }
-declare const Autocomplete: {
-  ({ children, className, defaultValue, disabled, help, id, invalid, invalidFeedback, items, label, multiple, name, noResultsText, onChange, placeholder, searchPlaceholder, size, valid, validFeedback, value, ...rest }: AutocompleteProps): ReactNode;
-  displayName: string;
-};
+declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 //#region src/components/autocomplete/AutocompleteGroup.d.ts
 type AutocompleteGroupProps = ComboboxGroupProps;
@@ -126,4 +123,5 @@ declare const AutocompleteItem: {
   displayName: string;
 };
 //#endregion
-export { Autocomplete as a, AutocompleteGroupProps as i, AutocompleteItemProps as n, AutocompleteProps as o, AutocompleteGroup as r, AutocompleteItem as t };
+export { Autocomplete as a, AutocompleteGroupProps as i, AutocompleteItemProps as n, AutocompleteProps as o, AutocompleteGroup as r, AutocompleteItem as t };
+//# sourceMappingURL=index-91YA-jkp.d.ts.map

package/dist/chunks/index-9rQeMqVI.d.ts

@@ -0,0 +1,42 @@
+import "./focus-ring-SR_LwaN7.js";
+import { r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { ElementType, ReactElement, ReactNode } from "react";
+//#region src/components/divider/Divider.d.ts
+type DividerOwnProps<C extends ElementType> = {
+  /**
+   * A label shown in the line, such as "or" between two ways to sign in. It names the separator
+   * for screen readers. Not possible on an `<hr>`, which can't hold content.
+   */
+  children?: ReactNode;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use an HTML element or a component.
+   * Defaults to `hr`, or `div` for a vertical divider or one with a label.
+   */
+  component?: C;
+  /**
+   * Where the label sits along the line. `start` and `end` draw the line on one side only.
+   *
+   * @default 'center'
+   */
+  labelPlacement?: 'start' | 'center' | 'end';
+  /**
+   * The direction of the line. A vertical divider stretches to the height of its flex row.
+   *
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+};
+type DividerProps<C extends ElementType = 'hr'> = PolymorphicComponentProps<C, DividerOwnProps<C>>;
+type DividerComponent = (<C extends ElementType = 'hr'>(props: DividerProps<C> & {
+  ref?: PolymorphicRefWithFallback<C, HTMLDivElement>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Divider: DividerComponent;
+//#endregion
+export { DividerProps as n, Divider as t };
+//# sourceMappingURL=index-9rQeMqVI.d.ts.map

package/dist/chunks/index-B0-8n-Gs.d.ts

@@ -102,4 +102,5 @@ interface OtpInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'
 }
 declare const OtpInput: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { OtpInputProps as n, OtpInput as t };
+export { OtpInputProps as n, OtpInput as t };
+//# sourceMappingURL=index-B0-8n-Gs.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> = {
@@ -132,4 +132,5 @@ 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 };
+export { AvatarImageProps as a, AvatarImage as i, AvatarStackItemDef as n, Avatar as o, AvatarStackProps as r, AvatarProps as s, AvatarStack as t };
+//# 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> = {
@@ -59,4 +59,5 @@ type ChipComponent = (<C extends ElementType = 'span'>(props: ChipProps<C> & {
 };
 declare const Chip: ChipComponent;
 //#endregion
-export { ChipProps as n, Chip as t };
+export { ChipProps as n, Chip as t };
+//# sourceMappingURL=index-B1kw0jzM.d.ts.map

package/dist/chunks/index-B2K-O9kl.d.ts

@@ -0,0 +1,59 @@
+import "./focus-ring-SR_LwaN7.js";
+import { ReactElement, ReactNode, RefObject } from "react";
+//#region src/components/scrollspy/useScrollspy.d.ts
+interface UseScrollspyOptions {
+  /**
+   * The element that scrolls, or a ref to it. The viewport when unset.
+   */
+  root?: Element | RefObject<Element | null> | null;
+  /**
+   * The margin around `root`, as `IntersectionObserver` takes it: one to four lengths in `px` or
+   * `%`. Its bottom edge is the line a section's top has to pass to become the active one;
+   * `-25%` puts it a quarter of the root's height above the root's bottom.
+   *
+   * @default '0px 0px -25%'
+   */
+  rootMargin?: string;
+}
+/**
+ * Tracks which of the sections named by `ids` the reader is in, as a scrollspy does: the last
+ * section, in document order, whose top has scrolled past a line near the bottom of `root` (set
+ * by `rootMargin`), or the first one while its top is still in view at the top of `root`. Returns
+ * its id, or `null` when no section has reached the line yet.
+ *
+ * It returns `null` on the server and on the first render in the browser, so hydration matches,
+ * and the active id from the first observation after that. Sections added, removed or renamed
+ * later are picked up; an id with no element in `root` is ignored.
+ */
+declare function useScrollspy(ids: readonly string[], options?: UseScrollspyOptions): string | null;
+//#endregion
+//#region src/components/scrollspy/Scrollspy.d.ts
+interface ScrollspyProps extends UseScrollspyOptions {
+  /**
+   * The navigation whose links are marked: a `Nav`, a `List`, `Link`s, or anything holding them.
+   */
+  children?: ReactNode;
+  /**
+   * Fires when the active section changes, with its id, or `null` when no section is active.
+   */
+  onActiveChange?: (id: string | null) => void;
+  /**
+   * Scrolls smoothly to a section when one of the links is clicked, instead of jumping to it. The
+   * page's address doesn't change. When the reader asks for reduced motion, it jumps.
+   *
+   * @default false
+   */
+  smoothScroll?: boolean;
+}
+/**
+ * Marks the link to the section being read as active, in the navigation it wraps. The links are
+ * `Link`s and the components built on it (`NavLink`, `ListItem`, `MenuItem`) whose `href` points
+ * to an element's `id` on the page. It renders no element of its own.
+ */
+declare function Scrollspy({ children, onActiveChange, root, rootMargin, smoothScroll }: ScrollspyProps): ReactElement;
+declare namespace Scrollspy {
+  var displayName: string;
+}
+//#endregion
+export { useScrollspy as i, ScrollspyProps as n, UseScrollspyOptions as r, Scrollspy as t };
+//# sourceMappingURL=index-B2K-O9kl.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> = {
@@ -37,4 +37,5 @@ type SpinnerComponent = (<C extends ElementType = 'div'>(props: SpinnerProps<C>
 };
 declare const Spinner: SpinnerComponent;
 //#endregion
-export { SpinnerProps as n, Spinner as t };
+export { SpinnerProps as n, Spinner as t };
+//# sourceMappingURL=index-B5bF1JxF.d.ts.map

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

@@ -92,4 +92,5 @@ interface ChipInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'
 }
 declare const ChipInput: React.ForwardRefExoticComponent<ChipInputProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { ChipInputProps as n, ChipInput as t };
+export { ChipInputProps as n, ChipInput as t };
+//# sourceMappingURL=index-B8uaSJA9.d.ts.map

package/dist/chunks/index-BA-raEMm.d.ts

@@ -25,4 +25,5 @@ interface CollapseProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { CollapseProps as n, Collapse as t };
+export { CollapseProps as n, Collapse as t };
+//# sourceMappingURL=index-BA-raEMm.d.ts.map

package/dist/chunks/{index-C61tPIJ-.d.ts → index-BAsbRx5n.d.ts}

@@ -16,7 +16,10 @@ type ButtonGroupOwnProps<C extends ElementType> = {
    */
   size?: 'sm' | 'lg';
   /**
-   * Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
+   * Create a set of buttons that appear vertically stacked rather than horizontally, with the
+   * `.button-group-vertical` class in place of `.button-group`. Split button dropdowns are not
+   * supported here, and `size` has no effect: chassis-css sizes the buttons of a horizontal group
+   * only, so size the buttons of a vertical one themselves.
    */
   vertical?: boolean;
 };
@@ -47,4 +50,5 @@ type ButtonToolbarComponent = (<C extends ElementType = 'div'>(props: ButtonTool
 };
 declare const ButtonToolbar: ButtonToolbarComponent;
 //#endregion
-export { ButtonGroupProps as i, ButtonToolbarProps as n, ButtonGroup as r, ButtonToolbar as t };
+export { ButtonGroupProps as i, ButtonToolbarProps as n, ButtonGroup as r, ButtonToolbar as t };
+//# sourceMappingURL=index-BAsbRx5n.d.ts.map

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

@@ -0,0 +1,66 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { n as MenuAutoClose } from "./Menu-QeYOzrUL.js";
+import { ElementType, ReactElement } from "react";
+//#region src/components/context-menu/ContextMenu.d.ts
+type ContextMenuOwnProps<C extends ElementType> = {
+  /**
+   * Controls which presses close the menu. `true` closes on a click on an item and on a press
+   * outside the menu. `false` leaves closing to the Escape key and `visible`. `'inside'` closes
+   * only on a click on an item. `'outside'` closes only on a press outside the menu.
+   */
+  autoClose?: MenuAutoClose;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node, the region the menu opens from. Either a string to use an
+   * HTML element or a component.
+   *
+   * @default 'div'
+   */
+  component?: C;
+  /**
+   * Whether the menu is open when it first renders. Use it instead of `visible` when nothing
+   * outside needs to control the menu. Opened this way, the menu sits under the region's start
+   * edge, since no pointer has asked for it anywhere.
+   */
+  defaultVisible?: boolean;
+  /**
+   * Leaves the region to the browser: a right-click shows the browser's own menu, a long press
+   * and the keys do nothing.
+   */
+  disabled?: boolean;
+  /**
+   * Callback fired when the menu hides.
+   */
+  onHide?: () => void;
+  /**
+   * Callback fired when the menu shows.
+   */
+  onShow?: () => void;
+  /**
+   * Callback fired when the menu asks to show or hide: a right-click, a long press or Shift+F10
+   * in the region, a click on an item, a press outside, the Escape key, or the closing of the
+   * dialog it is in. Receives the state it asks for. With `visible` set, the menu changes only
+   * when `visible` does.
+   */
+  onVisibleChange?: (visible: boolean) => void;
+  /**
+   * Whether the menu is open. Setting it makes the menu controlled: it shows and hides only when
+   * this changes, so pair it with `onVisibleChange`. Leave it unset, or use `defaultVisible`, for
+   * a menu that opens and closes itself.
+   */
+  visible?: boolean;
+};
+type ContextMenuProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ContextMenuOwnProps<C>>;
+type ContextMenuComponent = (<C extends ElementType = 'div'>(props: ContextMenuProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ContextMenu: ContextMenuComponent;
+//#endregion
+export { ContextMenuProps as n, ContextMenu as t };
+//# sourceMappingURL=index-BF3OWUVc.d.ts.map

package/dist/chunks/{index-Ctuk1xBU.d.ts → index-BLS1jhSJ.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 { n as PolymorphicRef, r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { r as ContextColor } from "./types-D6FM7bYR.js";
 import React, { ElementType, ReactElement } from "react";
 //#region src/components/stepper/Stepper.d.ts
 interface StepperItemDef {
@@ -28,8 +28,8 @@ type StepperOwnProps<C extends ElementType> = {
   className?: string;
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
-   * Defaults to `'ol'`, unless a step (a data-driven item with `href`, or a `<StepperItem
-   * component="a">`/`<StepperItem component="button">` child) is interactive — a bare `<a>`/
+   * Defaults to `'ol'`, unless a step (a data-driven item with `href`, or a `<StepperItem>` child
+   * rendering an `<a>`/`<button>` through `component` or `asChild`) is interactive — a bare `<a>`/
    * `<button>` isn't a valid direct child of `<ol>`, so the default switches to `'div'` instead.
    * Pass `component` explicitly to opt out of this.
    */
@@ -84,16 +84,19 @@ type StepperItemOwnProps<C extends ElementType> = {
    */
   component?: C;
   /**
-   * The `href` attribute for an interactive step rendered as a link.
+   * The `href` attribute for an interactive step rendered as a link. Renders an `<a>` in place of
+   * the `<li>`, unless `component` or `asChild` chose the element. Inside a `Stepper`, the stepper
+   * renders a `<div>` around it in place of the `<ol>`.
    */
   href?: string;
 };
 type StepperItemProps<C extends ElementType = 'li'> = PolymorphicComponentProps<C, StepperItemOwnProps<C>>;
 type StepperItemComponent = (<C extends ElementType = 'li'>(props: StepperItemProps<C> & {
-  ref?: PolymorphicRef<C>;
+  ref?: PolymorphicRefWithFallback<C, HTMLLIElement | HTMLAnchorElement>;
 }) => ReactElement | null) & {
   displayName?: string;
 };
 declare const StepperItem: StepperItemComponent;
 //#endregion
-export { StepperProps as a, StepperItemDef as i, StepperItemProps as n, Stepper as r, StepperItem as t };
+export { StepperProps as a, StepperItemDef as i, StepperItemProps as n, Stepper as r, StepperItem as t };
+//# sourceMappingURL=index-BLS1jhSJ.d.ts.map

package/dist/chunks/{index-JllMXhVx.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";
@@ -29,6 +29,14 @@ interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
    * Sets the color of the component to one of Chassis context colors.
    */
   color?: ContextColor;
+  /**
+   * Whether the notification is shown when it first renders. Such a notification is
+   * uncontrolled: its close button and the `autohide` timer hide it. Use `visible` to show and
+   * hide it from outside.
+   *
+   * @default true
+   */
+  defaultVisible?: boolean;
   /**
    * Delay in ms before an `autohide` notification dismisses itself.
    */
@@ -63,13 +71,19 @@ interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
    */
   titleComponent?: ElementType;
   /**
-   * Callback fired when the component requests to be closed.
+   * Callback fired once the notification has hidden: after its exit transition.
    */
   onClose?: () => void;
   /**
-   * Callback fired when the component requests to be shown.
+   * Callback fired when the notification starts to show.
    */
   onShow?: () => void;
+  /**
+   * Callback fired with `false` when the notification asks to hide: its close button, `close`
+   * from `useNotification`, or the `autohide` timer. With `visible` set, the notification hides
+   * only when `visible` becomes `false`.
+   */
+  onVisibleChange?: (visible: boolean) => void;
   /**
    * ARIA live-region role. Use `status` (the default) for confirmation, progress, and
    * informational messages, which announce politely. Use `alert` for messages that need
@@ -77,7 +91,9 @@ interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
    */
   role?: 'status' | 'alert';
   /**
-   * Toggle the visibility of component.
+   * Whether the notification is shown. Setting it makes the notification controlled: it hides
+   * only when this becomes `false`, so pair it with `onVisibleChange`. Left unset, the
+   * notification is shown and hides itself (see `defaultVisible`).
    */
   visible?: boolean;
 }
@@ -173,4 +189,5 @@ interface NotificationContextProps {
 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 };
+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-BMkbJVHg.d.ts.map

package/dist/chunks/{index-DB_ToPdz.d.ts → index-BNf0jIIL.d.ts}

@@ -22,6 +22,11 @@ interface CalendarBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChan
    * A string of all className you want applied to the base component.
    */
   className?: string;
+  /**
+   * The date the calendar first shows and focuses, in place of the selected date or today.
+   * `DatePicker` and `DateRangePicker` pass their `placeholderValue` here while empty.
+   */
+  defaultFocusedValue?: DateValue$1 | null;
   /**
    * Prevents the calendar from being focused or interacted with.
    */
@@ -132,6 +137,11 @@ interface RangeCalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCha
    * A string of all className you want applied to the base component.
    */
   className?: string;
+  /**
+   * The date the calendar first shows and focuses, in place of the selected date or today.
+   * `DatePicker` and `DateRangePicker` pass their `placeholderValue` here while empty.
+   */
+  defaultFocusedValue?: DateValue$1 | null;
   /**
    * The initial selected date range (uncontrolled).
    */
@@ -199,4 +209,5 @@ interface RangeCalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCha
 }
 declare const RangeCalendar: React.ForwardRefExoticComponent<RangeCalendarProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { CalendarProps as a, CalendarMultipleProps as i, RangeCalendarProps as n, CalendarSingleProps as o, Calendar as r, RangeCalendar as t };
+export { CalendarProps as a, CalendarMultipleProps as i, RangeCalendarProps as n, CalendarSingleProps as o, Calendar as r, RangeCalendar as t };
+//# sourceMappingURL=index-BNf0jIIL.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> = {
@@ -93,4 +93,5 @@ 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 };
+export { ProgressProps as i, ProgressBarProps as n, Progress as r, ProgressBar as t };
+//# sourceMappingURL=index-BOx8v-oT.d.ts.map