@chassis-ui/react 0.1.3 → 0.3.0

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

@@ -0,0 +1,231 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as ContextColor } from "./types-CS_40Txv.js";
+import { Key, ReactElement, ReactNode, Ref } from "react";
+import { Key as Key$1 } from "react-aria";
+import { Selection, SortDescriptor, TableBodyProps, TableHeaderProps } from "react-stately";
+//#region src/components/table/Table.d.ts
+interface TableProps<T extends object> {
+  /**
+   * An accessible label for the table, used when there's no visible heading.
+   */
+  'aria-label'?: string;
+  /**
+   * Identifies a visible heading element for the table.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Set the vertical alignment of cell content.
+   */
+  align?: 'bottom' | 'middle' | 'top';
+  /**
+   * Add borders on all sides of the table and cells.
+   */
+  bordered?: boolean;
+  /**
+   * Remove borders on all sides of the table and cells.
+   */
+  borderless?: boolean;
+  /**
+   * Content shown above the table, functioning as a heading for it.
+   */
+  caption?: ReactNode;
+  /**
+   * A `TableHeader` and a `TableBody`, each built from `TableColumn`/`TableRow`/
+   * `TableCell` — read as data to build the table's collection. Not rendered directly.
+   */
+  children: [ReactElement<TableHeaderProps<T> & {
+    className?: string;
+  }>, ReactElement<TableBodyProps<T> & {
+    className?: string;
+  }>];
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the component.
+   */
+  color?: ContextColor;
+  /**
+   * A list of row keys to disable. Disabled rows cannot be selected, focused, or interacted with.
+   */
+  disabledKeys?: Iterable<Key$1>;
+  /**
+   * Content shown below the table in a `<tfoot>`, e.g. a totals row. Rendered as plain markup —
+   * not part of the keyboard-navigable grid.
+   */
+  footer?: ReactNode;
+  /**
+   * Enable a hover state on table rows.
+   */
+  hover?: boolean;
+  /**
+   * `id` forwarded to the table element.
+   */
+  id?: string;
+  /**
+   * Handler that is called when the selection changes.
+   */
+  onSelectionChange?: (keys: Selection) => void;
+  /**
+   * Handler that is called when a column is sorted.
+   */
+  onSortChange?: (descriptor: SortDescriptor) => void;
+  /**
+   * Make any table responsive across all viewports or pick a maximum breakpoint.
+   */
+  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * The currently selected row keys (controlled).
+   */
+  selectedKeys?: Selection;
+  /**
+   * The type of selection that is allowed.
+   */
+  selectionMode?: 'none' | 'single' | 'multiple';
+  /**
+   * Make table more compact by cutting all cell padding.
+   */
+  sm?: boolean;
+  /**
+   * The current sort column and direction.
+   */
+  sortDescriptor?: SortDescriptor;
+  /**
+   * Convert rows into stacked label/value blocks below a container width, for tables with too
+   * many columns to read comfortably even with horizontal scrolling. `true` always stacks; a
+   * breakpoint name stacks only below it. Implies `responsive` when `responsive` isn't set
+   * separately, since stacking needs the same `.table-responsive` container-query ancestor.
+   * Labels come from each `TableColumn`'s text (or its `textValue`, for non-text headers).
+   */
+  stacked?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * Add zebra-striping to table rows.
+   */
+  striped?: boolean;
+}
+declare const Table: <T extends object>(props: TableProps<T> & {
+  ref?: Ref<HTMLTableElement>;
+}) => ReactElement;
+//#endregion
+//#region src/components/table/TableBody.d.ts
+interface TableBodyProps$1<T> {
+  /**
+   * `TableRow` elements, or a render function paired with `items` for dynamic row generation.
+   */
+  children: ReactElement | ReactElement[] | ((item: T) => ReactElement);
+  /**
+   * A string of all className you want applied to the `<tbody>` element.
+   */
+  className?: string;
+  /**
+   * A list of row data objects, rendered via the function form of `children`.
+   */
+  items?: Iterable<T>;
+}
+/**
+ * Collection node, data-only — read by `Table` to build the table's row collection. Never
+ * rendered directly.
+ */
+declare const TableBody$1: <T>(props: TableBodyProps$1<T>) => ReactElement;
+//#endregion
+//#region src/components/table/TableCell.d.ts
+interface TableCellProps {
+  /**
+   * The contents of the cell.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the cell.
+   */
+  className?: string;
+  /**
+   * Indicates how many columns the cell spans.
+   */
+  colSpan?: number;
+  /**
+   * A string representation of the cell's contents, used for typeahead.
+   */
+  textValue?: string;
+}
+/**
+ * Collection node, data-only — see `TableHeader`. Read by `Table` to build a cell in the
+ * table's collection; never rendered directly.
+ */
+declare const TableCell: (props: TableCellProps) => ReactElement;
+//#endregion
+//#region src/components/table/TableColumn.d.ts
+interface TableColumnProps {
+  /**
+   * Whether the column allows sorting. Adds a sort indicator and makes the header
+   * clickable/keyboard-activatable.
+   */
+  allowsSorting?: boolean;
+  /**
+   * Rendered contents of the column header.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the column header.
+   */
+  className?: string;
+  /**
+   * A string representation of the column header, used for accessibility announcements and,
+   * when `Table`'s `stacked` prop is set, as the label shown before each row's value for this
+   * column. Defaults to `children` when it's a plain string — set this explicitly when the
+   * header contains anything else (an icon, a `Tooltip`, etc.).
+   */
+  textValue?: string;
+}
+/**
+ * Collection node, data-only — see `TableHeader`. Read by `Table` to build a column in the
+ * table's collection; never rendered directly.
+ */
+declare const TableColumn: (props: TableColumnProps) => ReactElement;
+//#endregion
+//#region src/components/table/TableHeader.d.ts
+interface TableHeaderProps$1<T> {
+  /**
+   * `TableColumn` elements, or a render function paired with `columns` for dynamic column
+   * generation.
+   */
+  children: ReactElement | ReactElement[] | ((column: T) => ReactElement);
+  /**
+   * A string of all className you want applied to the `<thead>` element.
+   */
+  className?: string;
+  /**
+   * A list of column data objects, rendered via the function form of `children`.
+   */
+  columns?: readonly T[];
+}
+/**
+ * Collection node, data-only — read by `Table` to build the table's column collection. Never
+ * rendered directly.
+ */
+declare const TableHeader$1: <T>(props: TableHeaderProps$1<T>) => ReactElement;
+//#endregion
+//#region src/components/table/TableRow.d.ts
+interface TableRowProps {
+  /**
+   * `TableCell` elements, or a render function called once per column with that column's key —
+   * required when the row's parent `TableBody` uses the `items`/render-function form.
+   */
+  children: ReactElement | ReactElement[] | ((columnKey: Key) => ReactElement);
+  /**
+   * A string of all className you want applied to the row.
+   */
+  className?: string;
+  /**
+   * A string representation of the row's contents, used for typeahead.
+   */
+  textValue?: string;
+}
+/**
+ * Collection node, data-only — see `TableHeader`. Read by `Table` to build a row in the
+ * table's collection; never rendered directly.
+ */
+declare const TableRow: (props: TableRowProps) => ReactElement;
+//#endregion
+export { TableColumn as a, TableCellProps as c, Table as d, TableProps as f, TableHeaderProps$1 as i, TableBody$1 as l, TableRowProps as n, TableColumnProps as o, TableHeader$1 as r, TableCell as s, TableRow as t, TableBodyProps$1 as u };
+//# sourceMappingURL=index-CRfm7W6C.d.ts.map

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

@@ -0,0 +1,236 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { i as IconValue } from "./iconConfig-C6gbYhsD.js";
+import React, { ButtonHTMLAttributes, ElementType, HTMLAttributes, ReactElement } from "react";
+//#region src/components/carousel/context.d.ts
+type CarouselEnds = 'loop' | 'wrap' | 'stop';
+//#endregion
+//#region src/components/carousel/Carousel.d.ts
+type CarouselTransition = 'scroll' | 'fade';
+interface CarouselSlideDetail {
+  /**
+   * Direction of travel, mirrored in RTL.
+   */
+  direction: 'left' | 'right';
+  /**
+   * Index of the outgoing slide.
+   */
+  from: number;
+  /**
+   * Index of the incoming slide.
+   */
+  to: number;
+}
+interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The active slide's index, for controlled usage. Pair with `onSlide` or `onSlid` to feed the
+   * new index back — they're the only way a controlled carousel's `activeIndex` gets updated.
+   */
+  activeIndex?: number;
+  /**
+   * Let each CarouselItem size itself instead of dividing the track evenly; snap points still land on every slide.
+   */
+  auto?: boolean;
+  /**
+   * Cycle through slides automatically on mount.
+   */
+  autoplay?: boolean;
+  /**
+   * Snap the active slide to the center of the viewport instead of its start.
+   */
+  center?: boolean;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * The active slide's index, for uncontrolled usage.
+   */
+  defaultActiveIndex?: number;
+  /**
+   * Behavior at the first/last slide. `loop` continues seamlessly past the ends for a single-slide layout, falling back to `wrap` for multi-item, peek, centered, or variable-width layouts, and under reduced motion. `wrap` jumps from the last slide back to the first, and vice versa. `stop` hard-stops and disables the previous/next controls at each end.
+   */
+  ends?: CarouselEnds;
+  /**
+   * Milliseconds to wait before automatically advancing to the next slide. Override per slide with CarouselItem's own `interval` prop.
+   */
+  interval?: number;
+  /**
+   * Number of whole slides visible per view, applied as the `--cx-carousel-items` custom property.
+   */
+  items?: number;
+  /**
+   * Space between slides, applied as the `--cx-carousel-items-gap` custom property.
+   */
+  itemsGap?: string;
+  /**
+   * How much of the neighboring slides to reveal, applied as the `--cx-carousel-items-peek` custom property.
+   */
+  itemsPeek?: string;
+  /**
+   * Move to the previous/next slide with the Left/Right arrow keys while focus is inside the carousel.
+   */
+  keyboard?: boolean;
+  /**
+   * Callback fired once a slide transition completes.
+   */
+  onSlid?: (detail: CarouselSlideDetail) => void;
+  /**
+   * Callback fired when a slide transition begins.
+   */
+  onSlide?: (detail: CarouselSlideDetail) => void;
+  /**
+   * Pause autoplay on `mouseenter`, resuming on `mouseleave`. Set to `false` to disable pause-on-hover.
+   */
+  pause?: 'hover' | false;
+  /**
+   * Replace the scroll transition with a crossfade.
+   */
+  transition?: CarouselTransition;
+}
+declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/carousel/CarouselControlNext.d.ts
+interface CarouselControlNextProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The control's icon: an icon name, or an element of your own icon set. Defaults to
+   * `IconProvider`'s `next` icon.
+   */
+  icon?: IconValue;
+  /**
+   * The accessible label announced by assistive technology.
+   */
+  label?: string;
+}
+declare const CarouselControlNext: React.ForwardRefExoticComponent<CarouselControlNextProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/components/carousel/CarouselControlPrev.d.ts
+interface CarouselControlPrevProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The control's icon: an icon name, or an element of your own icon set. Defaults to
+   * `IconProvider`'s `previous` icon.
+   */
+  icon?: IconValue;
+  /**
+   * The accessible label announced by assistive technology.
+   */
+  label?: string;
+}
+declare const CarouselControlPrev: React.ForwardRefExoticComponent<CarouselControlPrevProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/components/carousel/CarouselIndicators.d.ts
+interface CarouselIndicatorsProps extends HTMLAttributes<HTMLOListElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Accessible label for each indicator button. Receives the slide's 1-based position.
+   */
+  label?: (position: number) => string;
+}
+declare const CarouselIndicators: React.ForwardRefExoticComponent<CarouselIndicatorsProps & React.RefAttributes<HTMLOListElement>>;
+//#endregion
+//#region src/components/carousel/CarouselInner.d.ts
+type CarouselInnerOwnProps<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;
+};
+type CarouselInnerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CarouselInnerOwnProps<C>>;
+type CarouselInnerComponent = (<C extends ElementType = 'div'>(props: CarouselInnerProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CarouselInner: CarouselInnerComponent;
+//#endregion
+//#region src/components/carousel/CarouselItem.d.ts
+type CarouselItemOwnProps<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;
+  /**
+   * Milliseconds to wait before autoplay advances past this slide, overriding the carousel's own `interval`.
+   */
+  interval?: number;
+};
+type CarouselItemProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CarouselItemOwnProps<C>>;
+type CarouselItemComponent = (<C extends ElementType = 'div'>(props: CarouselItemProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CarouselItem: CarouselItemComponent;
+//#endregion
+//#region src/components/carousel/CarouselOverlay.d.ts
+type CarouselOverlayOwnProps<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;
+};
+type CarouselOverlayProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CarouselOverlayOwnProps<C>>;
+type CarouselOverlayComponent = (<C extends ElementType = 'div'>(props: CarouselOverlayProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CarouselOverlay: CarouselOverlayComponent;
+//#endregion
+//#region src/components/carousel/CarouselPlayPause.d.ts
+interface CarouselPlayPauseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The icon shown while autoplay is running: an icon name, or an element of your own icon set.
+   * Defaults to `IconProvider`'s `pause` icon.
+   */
+  pauseIcon?: IconValue;
+  /**
+   * The accessible label announced while autoplay is running.
+   */
+  pauseLabel?: string;
+  /**
+   * The accessible label announced while autoplay is stopped.
+   */
+  playLabel?: string;
+  /**
+   * The icon shown while autoplay is stopped: an icon name, or an element of your own icon set.
+   * Defaults to `IconProvider`'s `play` icon.
+   */
+  playIcon?: IconValue;
+}
+/**
+ * A discoverable toggle so a viewer can stop an autoplaying carousel, as required by WCAG 2.2
+ * Success Criterion 2.2.2 (Pause, Stop, Hide). Reflects the current state automatically — a pause
+ * icon while playing, a play icon once stopped.
+ */
+declare const CarouselPlayPause: React.ForwardRefExoticComponent<CarouselPlayPauseProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { CarouselSlideDetail as _, CarouselItem as a, CarouselInnerProps as c, CarouselControlPrev as d, CarouselControlPrevProps as f, CarouselProps as g, Carousel as h, CarouselOverlayProps as i, CarouselIndicators as l, CarouselControlNextProps as m, CarouselPlayPauseProps as n, CarouselItemProps as o, CarouselControlNext as p, CarouselOverlay as r, CarouselInner as s, CarouselPlayPause as t, CarouselIndicatorsProps as u, CarouselTransition as v, CarouselEnds as y };
+//# sourceMappingURL=index-CTpwB1yR.d.ts.map

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

@@ -0,0 +1,74 @@
+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 { ElementType, ReactElement } from "react";
+//#region src/components/flex/Flex.d.ts
+interface FlexLayout {
+  /**
+   * Sets `flex-direction`. Omit for the browser default (`row`).
+   */
+  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  /**
+   * Sets `flex-wrap`. Omit for the browser default (`nowrap`).
+   */
+  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+  /**
+   * Sets `justify-content`, aligning items along the main axis.
+   */
+  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+  /**
+   * Sets `align-items`, aligning items along the cross axis.
+   */
+  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+  /**
+   * Sets `align-content`, distributing wrapped lines along the cross axis. Has no effect on
+   * single-line (non-wrapping) containers.
+   */
+  alignContent?: '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.
+   */
+  gap?: Spacing | 0;
+  /**
+   * Spacing between rows (the cross axis when wrapped), mapped to the `row-gap-*` utility
+   * classes. Independent of `gap`/`columnGap`.
+   */
+  rowGap?: Spacing | 0;
+  /**
+   * Spacing between columns (the main axis), mapped to the `column-gap-*` utility classes.
+   * Independent of `gap`/`rowGap`.
+   */
+  columnGap?: Spacing | 0;
+}
+type FlexOwnProps<C extends ElementType> = FlexLayout & {
+  /**
+   * 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;
+  /**
+   * Overrides any of `direction`/`wrap`/`justify`/`align`/`alignContent`/`gap`/`rowGap`/
+   * `columnGap` at one or more breakpoints, via regular viewport media queries (unlike `Stack`'s
+   * `responsive` prop, this doesn't require a `.contains-inline` ancestor).
+   */
+  responsive?: Partial<Record<Breakpoint, FlexLayout>>;
+};
+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-CVUMS0x7.d.ts.map