@chassis-ui/react 0.1.3 → 0.3.0

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

@@ -0,0 +1,271 @@
+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 IconProps } from "./Icon-CioraWLF.js";
+import React, { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
+import { ToastQueue } from "react-stately";
+//#region src/components/toast/Toast.d.ts
+interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Apply a CSS fade transition to the toast.
+   */
+  animation?: boolean;
+  /**
+   * Auto hide the toast. The timer starts once the show transition completes and pauses
+   * while the pointer is over the toast or focus is within it.
+   */
+  autohide?: boolean;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Adds a close button — shorthand for `ToastHeader`'s/`ToastBody`'s `closeButton` prop.
+   * Placed in the header when `icon`/`title`/`time` is set; otherwise placed in the body
+   * alongside `message`, or in a header containing only the close button if `message` is
+   * also unset.
+   */
+  closeButton?: boolean;
+  /**
+   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for
+   * non-English UIs. Shorthand for `ToastHeader`'s `closeLabel` prop.
+   */
+  closeLabel?: string;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Whether the toast is shown when it first renders. Such a toast is uncontrolled: its close
+   * button and the `autohide` timer hide it. Use `visible` to show and hide it from outside.
+   */
+  defaultVisible?: boolean;
+  /**
+   * Delay hiding the toast (ms).
+   */
+  delay?: number;
+  /**
+   * Trailing content — typically a row of `Button`s — rendered via a single `ToastFooter`,
+   * after `message`/`children`. Pass a function to receive `close` directly, instead of
+   * calling `useToast()` from a child component to wire up a "Close" action.
+   */
+  footer?: ReactNode | ((close: () => void) => ReactNode);
+  /**
+   * Leading icon for the header. A string is an icon name, rendered like
+   * `<ToastIcon name={icon} />` (or by `IconProvider`'s `component`); pass
+   * any other node for a fully custom icon (typically a logo or avatar). Shorthand for
+   * `ToastHeader`'s `icon` prop; hidden from assistive technology by default, since it
+   * duplicates `title` visually.
+   */
+  icon?: string | ReactNode;
+  /**
+   * Message body, rendered via a single `ToastBody`. For multi-block content, compose
+   * `children` manually instead — `message` wraps everything in one element.
+   */
+  message?: ReactNode;
+  /**
+   * Header timestamp, rendered after `title`. Shorthand for `ToastHeader`'s `time` prop.
+   */
+  time?: ReactNode;
+  /**
+   * Header heading, rendered before `time`. Shorthand for `ToastHeader`'s children. When set
+   * alongside `message`, wires the toast's `aria-labelledby`/`aria-describedby` to them
+   * automatically.
+   */
+  title?: ReactNode;
+  /**
+   * Callback fired once the toast has hidden: after its exit transition.
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the toast starts to show.
+   */
+  onShow?: () => void;
+  /**
+   * Callback fired with `false` when the toast asks to hide: its close button, `close` from
+   * `useToast` or `footer`, or the `autohide` timer. With `visible` set, the toast 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
+   * immediate attention — validation errors, failed operations — which interrupt speech.
+   */
+  role?: 'status' | 'alert';
+  /**
+   * Apply a full-color background with inverted text. Only meaningful alongside `color`.
+   */
+  solid?: boolean;
+  /**
+   * Apply a semi-transparent background.
+   */
+  translucent?: boolean;
+  /**
+   * Whether the toast is shown. Setting it makes the toast controlled: it hides only when this
+   * becomes `false`, so pair it with `onVisibleChange`. Without either `visible` or
+   * `defaultVisible` a toast renders nothing.
+   */
+  visible?: boolean;
+}
+declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/toast/ToastBody.d.ts
+type ToastBodyOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Adds a close button alongside the body content, so a toast composed without a
+   * `ToastHeader` still gets a dismiss control without any manual layout markup.
+   */
+  closeButton?: boolean;
+  /**
+   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for
+   * non-English UIs.
+   */
+  closeLabel?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type ToastBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ToastBodyOwnProps<C>>;
+type ToastBodyComponent = (<C extends ElementType = 'div'>(props: ToastBodyProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ToastBody: ToastBodyComponent;
+//#endregion
+//#region src/components/toast/ToastFooter.d.ts
+type ToastFooterOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type ToastFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ToastFooterOwnProps<C>>;
+type ToastFooterComponent = (<C extends ElementType = 'div'>(props: ToastFooterProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ToastFooter: ToastFooterComponent;
+//#endregion
+//#region src/components/toast/ToastHeader.d.ts
+type ToastHeaderOwnProps<C extends ElementType> = {
+  /**
+   * Heading, rendered before `time` as a `<strong>`.
+   */
+  children?: ReactNode;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Automatically add a close button to the header.
+   */
+  closeButton?: boolean;
+  /**
+   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for
+   * non-English UIs.
+   */
+  closeLabel?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Leading icon. A string is an icon name, rendered like `<ToastIcon name={icon} />` (or by
+   * `IconProvider`'s `component`) and hidden from
+   * assistive technology by default, since it duplicates the heading visually. Pass any other
+   * node for a fully custom icon (typically a logo or avatar) — a custom node is left as-is,
+   * since it may carry its own meaningful accessible name (e.g. an avatar's `alt` text).
+   */
+  icon?: string | ReactNode;
+  /**
+   * Trailing timestamp, rendered after the heading.
+   */
+  time?: ReactNode;
+  /**
+   * Sets the `id` on the rendered heading element, for `aria-labelledby` wiring. Set
+   * automatically by `Toast` when both `title` and `message` are used together; only needed
+   * here for manual wiring in a fully custom composition.
+   */
+  titleId?: string;
+};
+type ToastHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ToastHeaderOwnProps<C>>;
+type ToastHeaderComponent = (<C extends ElementType = 'div'>(props: ToastHeaderProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ToastHeader: ToastHeaderComponent;
+//#endregion
+//#region src/components/toast/ToastIcon.d.ts
+type ToastIconProps = IconProps & {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+};
+declare const ToastIcon: React.ForwardRefExoticComponent<ToastIconProps & React.RefAttributes<HTMLSpanElement | SVGSVGElement>>;
+//#endregion
+//#region src/components/toast/Toaster.d.ts
+interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Overrides the toast region's accessible name (defaults to `'Notifications'`, per
+   * react-aria). Set this for non-English UIs, or to distinguish multiple toasters on the
+   * same page.
+   */
+  'aria-label'?: string;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Describes the placement of your component.
+   *
+   * @type 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | string
+   */
+  placement?: 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | string;
+}
+declare const Toaster: React.ForwardRefExoticComponent<ToasterProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/toast/toastQueue.d.ts
+interface ToastContent extends Pick<ToastProps, 'animation' | 'autohide' | 'closeButton' | 'closeLabel' | 'color' | 'delay' | 'footer' | 'icon' | 'message' | 'role' | 'solid' | 'time' | 'title' | 'translucent'> {
+  /**
+   * Content of the toast. Compose manually (typically a `ToastHeader`/`ToastBody`/
+   * `ToastFooter`), or leave empty and use the `title`/`message`/`footer` shorthand options
+   * instead.
+   */
+  children?: ReactNode;
+}
+declare const toastQueue: ToastQueue<ToastContent>;
+declare function addToast(children?: ReactNode, options?: Omit<ToastContent, 'children'>): string;
+declare function closeToast(key: string): void;
+//#endregion
+//#region src/components/toast/context.d.ts
+interface ToastContextProps {
+  /**
+   * Whether the toast is currently visible.
+   */
+  visible?: boolean;
+  /**
+   * Dismisses the toast. Wire this to any element's `onClick` — see `useToast`.
+   */
+  close: () => void;
+}
+//#endregion
+//#region src/hooks/useToast.d.ts
+type UseToastResult = ToastContextProps;
+declare const useToast: () => UseToastResult;
+//#endregion
+export { Toast as _, closeToast as a, ToasterProps as c, ToastHeader as d, ToastHeaderProps as f, ToastBodyProps as g, ToastBody as h, addToast as i, ToastIcon as l, ToastFooterProps as m, useToast as n, toastQueue as o, ToastFooter as p, ToastContent as r, Toaster as s, UseToastResult as t, ToastIconProps as u, ToastProps as v };
+//# sourceMappingURL=index-CYgBmZ8w.d.ts.map

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

@@ -0,0 +1,205 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import React, { DialogHTMLAttributes, ElementType, ReactElement } from "react";
+//#region src/components/drawer/Drawer.d.ts
+interface DrawerProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onCancel' | 'onClose'> {
+  /**
+   * Show a backdrop while the drawer is open. `'static'` blocks closing on backdrop click
+   * (the drawer nudges instead).
+   */
+  backdrop?: boolean | 'static';
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Whether the drawer is open when it first renders. Such a drawer is uncontrolled: it closes
+   * itself on a close request. Use `visible` to open and close it from outside.
+   */
+  defaultVisible?: boolean;
+  /**
+   * Size the height to the drawer's content instead of `--drawer-height`. Meaningful for
+   * `placement="bottom"`.
+   */
+  fitContent?: boolean;
+  /**
+   * Expand the panel to fill the viewport, animating in from the direction of `placement`.
+   */
+  fullscreen?: boolean;
+  /**
+   * Disable the open/close transition entirely.
+   */
+  instant?: boolean;
+  /**
+   * Closes the drawer when the escape key is pressed.
+   */
+  keyboard?: boolean;
+  /**
+   * Renders the drawer open from its first paint, server HTML included, as a non-modal dialog: a
+   * static preview. It stays open until a close request. Use `visible` or `defaultVisible` to
+   * open it as a modal dialog.
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the drawer requests to be closed (escape, backdrop click, close button,
+   * or another drawer opening).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when a close attempt is blocked (static backdrop click, or escape with `keyboard=false`).
+   */
+  onClosePrevented?: () => void;
+  /**
+   * Callback fired after the exit transition completes and the drawer is fully hidden.
+   */
+  onHidden?: () => void;
+  /**
+   * Callback fired when the drawer starts to open.
+   */
+  onShow?: () => void;
+  /**
+   * Callback fired after the entry transition completes and the drawer is fully visible.
+   */
+  onShown?: () => void;
+  /**
+   * Callback fired with `false` when the drawer requests to be closed, at the same moments as
+   * `onClose`. It makes `visible` and `onVisibleChange` a pair that takes a state setter.
+   */
+  onVisibleChange?: (visible: boolean) => void;
+  /**
+   * Which viewport edge the panel slides in from. Always required — there is no default
+   * off-screen transform without one.
+   */
+  placement: 'start' | 'end' | 'top' | 'bottom';
+  /**
+   * Renders as a drawer only below this breakpoint — inline as a flex container above it.
+   */
+  responsive?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * Allow the page behind the drawer to scroll while it's open.
+   */
+  scroll?: boolean;
+  /**
+   * Remove the inset gap, border radius, and border so the panel sits flush against the
+   * viewport edge.
+   */
+  sheet?: boolean;
+  /**
+   * Apply a frosted-glass background to the panel.
+   */
+  translucent?: boolean;
+  /**
+   * Whether the drawer is open. The drawer is then controlled: a close request only fires
+   * `onClose` and `onVisibleChange`, and the drawer closes when this becomes `false`.
+   */
+  visible?: boolean;
+}
+interface DrawerContextProps {
+  /**
+   * Requests the drawer be closed — fires `onClose`. Wire this to any element's `onClick`; see
+   * `useDrawer`.
+   */
+  close: () => void;
+  /**
+   * Id generated by `Drawer` and applied automatically by `DrawerTitle` to itself, so the
+   * dialog's `aria-labelledby` resolves to it without any manual wiring.
+   */
+  titleId?: string;
+}
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDialogElement>>;
+//#endregion
+//#region src/components/drawer/DrawerBody.d.ts
+type DrawerBodyOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type DrawerBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, DrawerBodyOwnProps<C>>;
+type DrawerBodyComponent = (<C extends ElementType = 'div'>(props: DrawerBodyProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const DrawerBody: DrawerBodyComponent;
+//#endregion
+//#region src/components/drawer/DrawerFooter.d.ts
+type DrawerFooterOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Stack the footer actions as full-width columns instead of a right-aligned row.
+   */
+  stacked?: boolean;
+};
+type DrawerFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, DrawerFooterOwnProps<C>>;
+type DrawerFooterComponent = (<C extends ElementType = 'div'>(props: DrawerFooterProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const DrawerFooter: DrawerFooterComponent;
+//#endregion
+//#region src/components/drawer/DrawerHeader.d.ts
+type DrawerHeaderOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Add a close button component to the header.
+   */
+  closeButton?: boolean;
+  /**
+   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for
+   * non-English UIs.
+   */
+  closeLabel?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type DrawerHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, DrawerHeaderOwnProps<C>>;
+type DrawerHeaderComponent = (<C extends ElementType = 'div'>(props: DrawerHeaderProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const DrawerHeader: DrawerHeaderComponent;
+//#endregion
+//#region src/components/drawer/DrawerTitle.d.ts
+type DrawerTitleOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type DrawerTitleProps<C extends ElementType = 'h2'> = PolymorphicComponentProps<C, DrawerTitleOwnProps<C>>;
+type DrawerTitleComponent = (<C extends ElementType = 'h2'>(props: DrawerTitleProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const DrawerTitle: DrawerTitleComponent;
+//#endregion
+//#region src/hooks/useDrawer.d.ts
+type UseDrawerResult = DrawerContextProps;
+declare const useDrawer: () => UseDrawerResult;
+//#endregion
+export { DrawerHeader as a, DrawerFooterProps as c, Drawer as d, DrawerProps as f, DrawerTitleProps as i, DrawerBody as l, useDrawer as n, DrawerHeaderProps as o, DrawerTitle as r, DrawerFooter as s, UseDrawerResult as t, DrawerBodyProps as u };
+//# sourceMappingURL=index-Cc4SSslb.d.ts.map

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

@@ -0,0 +1,25 @@
+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-adorn/InputAdorn.d.ts
+type InputAdornOwnProps<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. Use
+   * `"button"` or `"a"` for an actionable adorn, e.g. a password reveal toggle or a clear button.
+   */
+  component?: C;
+};
+type InputAdornProps<C extends ElementType = 'span'> = PolymorphicComponentProps<C, InputAdornOwnProps<C>>;
+type InputAdornComponent = (<C extends ElementType = 'span'>(props: InputAdornProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const InputAdorn: InputAdornComponent;
+//#endregion
+export { InputAdornProps as n, InputAdorn as t };
+//# sourceMappingURL=index-CftERHnE.d.ts.map

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

@@ -0,0 +1,47 @@
+import "./focus-ring-SR_LwaN7.js";
+import { t as FormFieldIds } from "./renderFormField-ChNagAFN.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: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { FormFieldProps as n, FormField as t };
+//# sourceMappingURL=index-Ci7AEgEc.d.ts.map