@chassis-ui/react 0.1.2 → 0.2.0

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

@@ -0,0 +1,40 @@
+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 { ElementType, ReactElement } from "react";
+//#region src/components/spinner/Spinner.d.ts
+type SpinnerOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Size the component sm.
+   */
+  size?: 'sm';
+  /**
+   * Set the button variant to an outlined button or a ghost button.
+   */
+  variant?: 'border' | 'grow';
+  /**
+   * Set visually hidden label for accessibility purposes.
+   */
+  visuallyHiddenLabel?: string;
+};
+type SpinnerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, SpinnerOwnProps<C>>;
+type SpinnerComponent = (<C extends ElementType = 'div'>(props: SpinnerProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Spinner: SpinnerComponent;
+//#endregion
+export { SpinnerProps as n, Spinner as t };

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

@@ -0,0 +1,62 @@
+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 { ElementType, MouseEventHandler, ReactElement } from "react";
+//#region src/components/chip/Chip.d.ts
+type ChipOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   * Defaults to `span`, or `a` when `href` is set.
+   */
+  component?: C;
+  /**
+   * Toggle the disabled state for the component. Applied as the native `disabled` attribute when
+   * `component` is `button`, or the `.disabled` class for every other element (a bare `<span>`/
+   * `<a>` has no real `disabled` attribute).
+   */
+  disabled?: boolean;
+  /**
+   * Renders the chip as a link to this URL. Defaults `component` to `a`.
+   */
+  href?: string;
+  /**
+   * Fires on click. Typed for every element `component` can actually render, rather than
+   * narrowed to whichever element `C` happens to be.
+   */
+  onClick?: MouseEventHandler<HTMLElement>;
+  /**
+   * Marks the chip as pressed for toggle-style usage (e.g. a filter chip). Applies the `.active`
+   * class and sets `aria-pressed` so assistive technology announces the toggle state.
+   */
+  pressed?: boolean;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Specifies the type of button. Only applies when `component` is `button`. Different browsers
+   * may use different default types for the `<button>` element, so always specify it explicitly.
+   */
+  type?: 'button' | 'submit' | 'reset';
+  /**
+   * Set the chip style variant. `solid`/`basic` render the default look with no extra class.
+   */
+  variant?: ContextStyle;
+};
+type ChipProps<C extends ElementType = 'span'> = PolymorphicComponentProps<C, ChipOwnProps<C>>;
+type ChipComponent = (<C extends ElementType = 'span'>(props: ChipProps<C> & {
+  ref?: PolymorphicRefWithFallback<C, HTMLSpanElement | HTMLAnchorElement>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Chip: ChipComponent;
+//#endregion
+export { ChipProps as n, Chip as t };

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

@@ -0,0 +1,109 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import React, { AriaAttributes, ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
+import { Key as Key$1 } from "react-stately";
+//#region src/components/tabs/Tabs.d.ts
+type TabsOwnProps<C extends ElementType> = {
+  /**
+   * A `TabList` (containing `Tab` children) followed by one `TabPanel` per tab.
+   */
+  children?: ReactNode;
+  /**
+   * 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;
+  /**
+   * The initially selected tab's key (uncontrolled).
+   */
+  defaultSelectedKey?: Key$1;
+  /**
+   * The keys of tabs that cannot be selected, focused, or otherwise interacted with.
+   */
+  disabledKeys?: Iterable<Key$1>;
+  /**
+   * Whether tabs are selected automatically on arrow-key focus (`'automatic'`, the default) or
+   * only on explicit activation — Enter/Space or click (`'manual'`).
+   */
+  keyboardActivation?: 'automatic' | 'manual';
+  /**
+   * Callback fired when the selected tab changes.
+   */
+  onSelectionChange?: (key: Key$1) => void;
+  /**
+   * The orientation of the tab list.
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The selected tab's key (controlled).
+   */
+  selectedKey?: Key$1;
+};
+type TabsProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, TabsOwnProps<C>>;
+type TabsComponent = (<C extends ElementType = 'div'>(props: TabsProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Tabs: TabsComponent;
+//#endregion
+//#region src/components/tabs/Tab.d.ts
+interface TabProps {
+  /**
+   * Label content for the tab. Must be a plain string for it to be used as the tab's accessible
+   * name when the rendered content itself doesn't expose one (e.g. an icon-only tab).
+   */
+  children: ReactNode;
+  /**
+   * Prevents the tab from being selected, focused, or otherwise interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * Identifies this tab and pairs it with the `TabPanel` of the same `id`.
+   */
+  id: Key$1;
+}
+declare const Tab: {
+  (_props: TabProps): null;
+  displayName: string;
+};
+//#endregion
+//#region src/components/tabs/TabList.d.ts
+interface TabListProps extends AriaAttributes {
+  /**
+   * `Tab` elements — read as data by `Tabs` to build the tab collection (see `Tabs.tsx`). Not
+   * rendered directly.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Set the tab list variant to tabs or pills.
+   */
+  variant?: 'tabs' | 'pills';
+}
+declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLUListElement>>;
+//#endregion
+//#region src/components/tabs/TabPanel.d.ts
+interface TabPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+  /**
+   * Content of the panel, shown while the `Tab` of the same `id` is selected.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Pairs this panel with the `Tab` of the same `id`.
+   */
+  id: Key$1;
+}
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tab as a, TabsProps as c, TabListProps as i, TabPanelProps as n, TabProps as o, TabList as r, Tabs as s, TabPanel as t };

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

@@ -0,0 +1,230 @@
+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 };

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

@@ -0,0 +1,73 @@
+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 };

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

@@ -0,0 +1,49 @@
+import "./focus-ring-SR_LwaN7.js";
+import { t as FormFieldIds } from "./renderFormField-fBEny6JV.js";
+import { ReactNode } from "react";
+//#region src/components/form-field/FormField.d.ts
+interface FormFieldProps {
+  /**
+   * The form control(s) this field wraps.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * A description for the field, rendered below the control(s).
+   */
+  help?: ReactNode;
+  /**
+   * The DOM ids of the wrapped control(s), used to associate the label (`htmlFor`) and
+   * point your control's own `aria-describedby` at the rendered help/feedback text.
+   */
+  ids?: FormFieldIds;
+  /**
+   * Set field validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * An error message for the field, rendered below the control(s) when `invalid` is set.
+   */
+  invalidFeedback?: ReactNode;
+  /**
+   * The field's caption, rendered as a `FormLabel` associated with `ids.input`.
+   */
+  label?: ReactNode;
+  /**
+   * Set field validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * A success message for the field, rendered below the control(s) when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+}
+declare const FormField: {
+  ({ children, className, help, ids, invalid, invalidFeedback, label, valid, validFeedback }: FormFieldProps): ReactNode;
+  displayName: string;
+};
+//#endregion
+export { FormFieldProps as n, FormField as t };