@chassis-ui/react 0.1.3 → 0.3.0

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

@@ -0,0 +1,99 @@
+import "./focus-ring-SR_LwaN7.js";
+import { i as MenuItemsDef } from "./MenuItemDef-D0VDtYIQ.js";
+import "./ComboboxItem-C9TpoJOI.js";
+import React, { HTMLAttributes, ReactNode } from "react";
+import { Key as Key$1 } from "react-stately";
+//#region src/components/combobox/Combobox.d.ts
+interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  /**
+   * An accessible label for the combobox, used when there's no visible `<label>`.
+   */
+  'aria-label'?: string;
+  /**
+   * Identifies a visible `<label>` element for the combobox.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * `ComboboxItem` elements, optionally wrapped in `ComboboxGroup` — read as data by
+   * `Combobox` to build the option list. Not rendered directly. Ignored when `items` is set.
+   */
+  children?: ReactNode;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * The initial selected option's id (uncontrolled).
+   */
+  defaultValue?: Key$1 | null;
+  /**
+   * Prevents the combobox from being focused or interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * A description for the field, rendered below the combobox.
+   */
+  help?: ReactNode;
+  /**
+   * `id` forwarded to the input element — useful for pairing with a `<label for>`.
+   */
+  id?: string;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * An error message for the field, rendered below the combobox when `invalid` is set.
+   */
+  invalidFeedback?: ReactNode;
+  /**
+   * Array of item/header/divider definitions for data-driven rendering. When provided, children
+   * are ignored. A `'header'` entry starts a group that all following items join until the next
+   * header or the end of the array. `'divider'` entries are a no-op here (dividers aren't
+   * meaningful for a listbox/option collection) — use `ComboboxGroup` composition instead if
+   * you need finer control over grouping. An entry's `href`/`onClick` are `Menu`-only and are not
+   * read here — use `onChange` to react to the selection instead.
+   */
+  items?: MenuItemsDef;
+  /**
+   * The field's caption, rendered as a `FormLabel` associated with the input.
+   */
+  label?: ReactNode;
+  /**
+   * `name` of an auto-created hidden input, kept in sync with the selection, for native form
+   * submission. Omit to skip creating one.
+   */
+  name?: string;
+  /**
+   * Text shown in the listbox when no options match the current query.
+   */
+  noResultsText?: ReactNode;
+  /**
+   * Callback fired when the selected option changes.
+   */
+  onChange?: (value: Key$1 | null) => void;
+  /**
+   * Placeholder shown in the input when nothing is selected.
+   */
+  placeholder?: string;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * A success message for the field, rendered below the combobox when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+  /**
+   * The selected option's id (controlled).
+   */
+  value?: Key$1 | null;
+}
+declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ComboboxProps as n, Combobox as t };
+//# sourceMappingURL=index-Bi8FFadV.d.ts.map

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

@@ -0,0 +1,51 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { ElementType, ReactElement } from "react";
+//#region src/components/input-group/InputGroup.d.ts
+type InputGroupOwnProps<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;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+};
+type InputGroupProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, InputGroupOwnProps<C>>;
+type InputGroupComponent = (<C extends ElementType = 'div'>(props: InputGroupProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const InputGroup: InputGroupComponent;
+//#endregion
+//#region src/components/input-group/InputGroupAddon.d.ts
+type InputGroupAddonOwnProps<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;
+  /**
+   * The id of the form control this addon labels, when rendered as `component="label"`.
+   */
+  htmlFor?: string;
+};
+type InputGroupAddonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<C, InputGroupAddonOwnProps<C>>;
+type InputGroupAddonComponent = (<C extends ElementType = 'span'>(props: InputGroupAddonProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const InputGroupAddon: InputGroupAddonComponent;
+//#endregion
+export { InputGroupProps as i, InputGroupAddonProps as n, InputGroup as r, InputGroupAddon as t };
+//# sourceMappingURL=index-Bkj17NEQ.d.ts.map

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

@@ -0,0 +1,82 @@
+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 { ElementType, ReactElement } from "react";
+//#region src/components/placeholder/Placeholder.d.ts
+type PlaceholderAlign = 'start' | 'center' | 'end';
+type PlaceholderOwnProps<C extends ElementType> = {
+  /**
+   * Set the horizontal alignment. Only applies when `src` is set.
+   */
+  align?: PlaceholderAlign;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the generated placeholder graphic to one of Chassis context colors. Has no
+   * effect when `src` is set.
+   */
+  color?: ContextColor;
+  /**
+   * Sets the variant of the generated placeholder graphic to one of Chassis context styles. Has no
+   * effect when `src` is set.
+   */
+  variant?: Exclude<ContextStyle, 'basic' | 'outline'>;
+  /**
+   * 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. With `asChild`, the
+   * child element is the image and carries its own `src`.
+   */
+  component?: C;
+  /**
+   * Make the image responsive, so it never grows larger than its parent. Only applies when `src`
+   * is set.
+   */
+  fluid?: boolean;
+  /**
+   * Placeholder height.
+   */
+  height?: number | string;
+  /**
+   * Give the image a rounded border-radius. Only applies when `src` is set.
+   */
+  rounded?: boolean;
+  /**
+   * Renders a real image instead of the generated placeholder graphic, e.g. a default asset or a
+   * `placehold.co` URL.
+   */
+  src?: string;
+  /**
+   * Text shown in the generated placeholder graphic. Defaults to `{width}x{height}`. Pass `false`
+   * to hide it. Has no effect when `src` is set.
+   */
+  text?: string | false;
+  /**
+   * Give the image a thumbnail appearance (padding, background, border, box-shadow). Only
+   * applies when `src` is set.
+   */
+  thumbnail?: boolean;
+  /**
+   * Accessible title for the generated placeholder graphic, rendered as an SVG `<title>`. Pass
+   * `false` to hide it. Has no effect when `src` is set.
+   *
+   * @default 'Placeholder'
+   */
+  title?: string | false;
+  /**
+   * Placeholder width.
+   */
+  width?: number | string;
+};
+type PlaceholderProps<C extends ElementType = 'img'> = PolymorphicComponentProps<C, PlaceholderOwnProps<C>>;
+type PlaceholderComponent = (<C extends ElementType = 'img'>(props: PlaceholderProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Placeholder: PlaceholderComponent;
+//#endregion
+export { PlaceholderProps as n, Placeholder as t };
+//# sourceMappingURL=index-Bm2NpgND.d.ts.map

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

@@ -0,0 +1,68 @@
+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/close-button/CloseButton.d.ts
+type CloseButtonOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the component to one of Chassis context colors. Applies the
+   * `context` class alongside it, so the icon picks up that color without needing
+   * an ancestor `.context` wrapper.
+   */
+  color?: ContextColor;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A custom HTML tag (e.g. `'span'`) gets button semantics — role, focus, Enter/Space
+   * activation — filled in automatically. A component is trusted to handle its own semantics,
+   * so pass one that's already interactive (e.g. `Button`).
+   */
+  component?: C;
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean;
+  /**
+   * The href attribute specifies the URL of the page the link goes to. Renders an `<a>` in place
+   * of the `<button>`, unless `component` or `asChild` chose the element.
+   */
+  href?: string;
+  /**
+   * The accessible label announced by assistive technology. Override this to
+   * localize the button for non-English contexts.
+   */
+  label?: string;
+  /**
+   * Fires on click. Typed for every element `component` can actually render (`button` or `a`
+   * natively, plus whatever a custom `component` renders), rather than narrowed to
+   * `HTMLButtonElement` alone.
+   */
+  onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Specifies the type of button. Always specify the type attribute for the `<button>` element.
+   * Different browsers may use different default types for the `<button>` element.
+   */
+  type?: 'button' | 'submit' | 'reset';
+  /**
+   * Set the close button's context style variant. Applies the `context` class
+   * alongside it, same as `color`.
+   */
+  variant?: ContextStyle;
+};
+type CloseButtonProps<C extends ElementType = 'button'> = PolymorphicComponentProps<C, CloseButtonOwnProps<C>>;
+type CloseButtonComponent = (<C extends ElementType = 'button'>(props: CloseButtonProps<C> & {
+  ref?: PolymorphicRefWithFallback<C, HTMLButtonElement | HTMLAnchorElement>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CloseButton: CloseButtonComponent;
+//#endregion
+export { CloseButtonProps as n, CloseButton as t };
+//# sourceMappingURL=index-BnR7wjax.d.ts.map

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

@@ -0,0 +1,18 @@
+import "./focus-ring-SR_LwaN7.js";
+import "./Icon-CioraWLF.js";
+import { n as IconConfig } from "./iconConfig-C6gbYhsD.js";
+import React, { ReactNode } from "react";
+//#region src/components/icon/IconProvider.d.ts
+interface IconProviderProps extends IconConfig {
+  /**
+   * The part of the app these icon settings apply to.
+   */
+  children?: ReactNode;
+}
+declare const IconProvider: {
+  ({ children, className, component, font, fontPrefix, icons, sprite }: IconProviderProps): React.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { IconProviderProps as n, IconProvider as t };
+//# sourceMappingURL=index-BxROljJI.d.ts.map

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

@@ -0,0 +1,85 @@
+import "./focus-ring-SR_LwaN7.js";
+import { i as IconValue } from "./iconConfig-C6gbYhsD.js";
+import React, { InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/search-field/SearchField.d.ts
+interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'onSubmit' | 'size' | 'type' | 'value'> {
+  /**
+   * The accessible name of the clear button. Defaults to react-aria's, in the locale's language
+   * ("Clear search").
+   */
+  clearAriaLabel?: string;
+  /**
+   * The icon of the clear button, in place of `IconProvider`'s `clear` icon.
+   */
+  clearIcon?: IconValue;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The value of the field, uncontrolled.
+   */
+  defaultValue?: string;
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean;
+  /**
+   * A description for the field, rendered below it.
+   */
+  help?: ReactNode;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * An error message for the field, rendered below it when `invalid` is set.
+   */
+  invalidFeedback?: ReactNode;
+  /**
+   * The field's caption, rendered as a `FormLabel` associated with the input.
+   */
+  label?: ReactNode;
+  /**
+   * Handler that is called when the value changes.
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Handler that is called when the field is cleared, by the clear button or the Escape key.
+   */
+  onClear?: () => void;
+  /**
+   * Handler that is called when the Enter key is pressed, with the value. When set, Enter, with
+   * or without a modifier key, no longer submits the input's form.
+   */
+  onSubmit?: (value: string) => void;
+  /**
+   * Toggle the readonly state for the component.
+   */
+  readOnly?: boolean;
+  /**
+   * The icon at the field's start, in place of `IconProvider`'s `search` icon. `false` leaves it
+   * out.
+   */
+  searchIcon?: IconValue | false;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * A success message for the field, rendered below it when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+  /**
+   * The value of the field, controlled.
+   */
+  value?: string;
+}
+declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { SearchFieldProps as n, SearchField as t };
+//# sourceMappingURL=index-Bz8MDq0H.d.ts.map

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

@@ -0,0 +1,139 @@
+import "./focus-ring-SR_LwaN7.js";
+import { r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { i as IconValue } from "./iconConfig-C6gbYhsD.js";
+import React, { ElementType, HTMLAttributes, MouseEvent, ReactElement, RefObject } from "react";
+//#region src/components/pagination/Pagination.d.ts
+interface PaginationProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Current active page (1-indexed). Used with `pages` for data-driven mode.
+   */
+  activePage?: number;
+  /**
+   * Set the alignment of pagination components.
+   */
+  align?: 'start' | 'center' | 'end';
+  /**
+   * Accessible label for the pagination `<nav>` landmark. Override for non-English locales,
+   * or when multiple paginators appear on the same page.
+   *
+   * @default 'Pagination'
+   */
+  'aria-label'?: string;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Maximum number of visible page buttons (default: 5). Flanking pages are collapsed to ellipsis.
+   */
+  maxVisiblePages?: number;
+  /**
+   * The "next page" control's icon in smart pagination mode: an icon name, or an element of your
+   * own icon set. Defaults to `IconProvider`'s `next` icon.
+   */
+  nextIcon?: IconValue;
+  /**
+   * Accessible label for the "next page" control, used in smart pagination mode. Override for
+   * non-English locales.
+   *
+   * @default 'Next'
+   */
+  nextLabel?: string;
+  /**
+   * Callback fired when the active page changes.
+   */
+  onActivePageChange?: (page: number) => void;
+  /**
+   * Total number of pages. When provided alongside `activePage` and `onActivePageChange`,
+   * the component renders a fully-controlled smart paginator with Prev/Next and ellipsis.
+   */
+  pages?: number;
+  /**
+   * The "previous page" control's icon in smart pagination mode: an icon name, or an element of
+   * your own icon set. Defaults to `IconProvider`'s `previous` icon.
+   */
+  previousIcon?: IconValue;
+  /**
+   * Accessible label for the "previous page" control, used in smart pagination mode. Override
+   * for non-English locales.
+   *
+   * @default 'Previous'
+   */
+  previousLabel?: string;
+  /**
+   * Show the numbered page buttons in smart pagination mode. Set `false` alongside
+   * `showPrevNext` to build a Prev/Next-only paginator.
+   *
+   * @default true
+   */
+  showPageNumbers?: boolean;
+  /**
+   * Show the Prev/Next controls in smart pagination mode. Set `false` alongside
+   * `showPageNumbers` to build a page-numbers-only paginator.
+   *
+   * @default true
+   */
+  showPrevNext?: boolean;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+}
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/components/pagination/PaginationItem.d.ts
+type PaginationItemOwnProps<C extends ElementType> = {
+  /**
+   * Toggle the active state for the component.
+   */
+  active?: boolean;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean;
+  /**
+   * The href attribute. When provided the item renders as an `<a>` tag; otherwise as a `<button>`.
+   */
+  href?: string;
+};
+type PaginationItemProps<C extends ElementType = 'button'> = PolymorphicComponentProps<C, PaginationItemOwnProps<C>>;
+type PaginationItemComponent = (<C extends ElementType = 'button'>(props: PaginationItemProps<C> & {
+  ref?: PolymorphicRefWithFallback<C, HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const PaginationItem: PaginationItemComponent;
+//#endregion
+//#region src/hooks/usePagination.d.ts
+interface UsePaginationOptions {
+  /**
+   * Whether the Previous control is currently disabled.
+   */
+  prevDisabled: boolean;
+  /**
+   * Whether the Next control is currently disabled.
+   */
+  nextDisabled: boolean;
+  /**
+   * Called when Previous is clicked, before the state change that may disable it.
+   */
+  onPrev: () => void;
+  /**
+   * Called when Next is clicked, before the state change that may disable it.
+   */
+  onNext: () => void;
+}
+interface UsePaginationResult<T extends HTMLElement = HTMLButtonElement> {
+  prevRef: RefObject<T | null>;
+  nextRef: RefObject<T | null>;
+  handlePrevClick: (event: MouseEvent<T>) => void;
+  handleNextClick: (event: MouseEvent<T>) => void;
+}
+declare function usePagination<T extends HTMLElement = HTMLButtonElement>({ prevDisabled, nextDisabled, onPrev, onNext }: UsePaginationOptions): UsePaginationResult<T>;
+//#endregion
+export { Pagination as a, PaginationItemProps as i, usePagination as n, PaginationProps as o, PaginationItem as r, UsePaginationResult as t };
+//# sourceMappingURL=index-C4Dks__B.d.ts.map

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

@@ -0,0 +1,53 @@
+import "./focus-ring-SR_LwaN7.js";
+import React, { ChangeEventHandler, InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/file-input/FileInput.d.ts
+interface FileInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean;
+  /**
+   * A description for the field, rendered below the input.
+   */
+  help?: ReactNode;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * An error message for the field, rendered below the input when `invalid` is set.
+   */
+  invalidFeedback?: ReactNode;
+  /**
+   * The field's caption, rendered as a `FormLabel` associated with this input.
+   */
+  label?: ReactNode;
+  /**
+   * Allows selecting more than one file.
+   */
+  multiple?: boolean;
+  /**
+   * Method called when the selected file(s) change.
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * A success message for the field, rendered below the input when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+}
+declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { FileInputProps as n, FileInput as t };
+//# sourceMappingURL=index-CCXJXToc.d.ts.map