@chassis-ui/react 0.1.3 → 0.2.0

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

@@ -0,0 +1,187 @@
+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;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * Toggle the visibility of the drawer component.
+   */
+  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 };

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

@@ -0,0 +1,66 @@
+import "./focus-ring-SR_LwaN7.js";
+import React, { ChangeEventHandler, InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/range-input/RangeInput.d.ts
+interface RangeInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * 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 range input.
+   */
+  help?: ReactNode;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * An error message for the field, rendered below the range input when `invalid` is set.
+   */
+  invalidFeedback?: ReactNode;
+  /**
+   * The field's caption, rendered as a `FormLabel` associated with this range input.
+   */
+  label?: ReactNode;
+  /**
+   * Specifies the maximum value for the component.
+   */
+  max?: number;
+  /**
+   * Specifies the minimum value for the component.
+   */
+  min?: number;
+  /**
+   * Method called immediately after the `value` prop changes.
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  /**
+   * Toggle the readonly state for the component.
+   */
+  readOnly?: boolean;
+  /**
+   * Specifies the interval between legal numbers in the component.
+   */
+  step?: number;
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * A success message for the field, rendered below the range input when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+  /**
+   * The `value` attribute of component.
+   *
+   * @controllable onChange
+   * */
+  value?: string | number;
+}
+declare const RangeInput: React.ForwardRefExoticComponent<RangeInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { RangeInputProps as n, RangeInput as t };

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

@@ -0,0 +1,176 @@
+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/notification/Notification.d.ts
+interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Optional trailing content — e.g. a row of `Button`s — rendered after `text`/`children`.
+   */
+  actions?: ReactNode;
+  /**
+   * Automatically dismiss the notification after `delay`. The timer pauses while the pointer
+   * or focus is on the notification, and only starts once the notification is visible.
+   * Defaults to `false` — unlike `Toast`, notifications are persistent banners by default.
+   */
+  autohide?: boolean;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Overrides the dismiss button's accessible name (defaults to `'Close'`). Set this for
+   * non-English UIs.
+   */
+  closeLabel?: string;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Delay in ms before an `autohide` notification dismisses itself.
+   */
+  delay?: number;
+  /**
+   * Optionally add a close button to the notification and allow it to self dismiss.
+   */
+  dismissible?: boolean;
+  /**
+   * Leading icon. A string is an icon name, rendered like `<NotificationIcon name={icon} />` (or
+   * by `IconProvider`'s `component`); pass any other
+   * node for a fully custom icon. Automatically top-aligns with `title` when both are set —
+   * a custom icon node is responsible for its own alignment.
+   */
+  icon?: string | ReactNode;
+  /**
+   * Applies the solid context style to the notification.
+   */
+  solid?: boolean;
+  /**
+   * Message body, rendered via a single `<NotificationText>`. For multi-block content, compose
+   * `children` manually instead — `text` wraps everything in one element.
+   */
+  text?: ReactNode;
+  /**
+   * Heading, rendered via `<NotificationTitle>`.
+   */
+  title?: ReactNode;
+  /**
+   * Element or component used for the `title` heading. Passed through to `NotificationTitle`'s
+   * own `component` prop. Defaults to `'h4'`.
+   */
+  titleComponent?: ElementType;
+  /**
+   * Callback fired when the component requests to be closed.
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the component requests to be shown.
+   */
+  onShow?: () => 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';
+  /**
+   * Toggle the visibility of component.
+   */
+  visible?: boolean;
+}
+declare const Notification: React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/notification/NotificationTitle.d.ts
+type NotificationTitleOwnProps<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 NotificationTitleProps<C extends ElementType = 'h4'> = PolymorphicComponentProps<C, NotificationTitleOwnProps<C>>;
+type NotificationTitleComponent = (<C extends ElementType = 'h4'>(props: NotificationTitleProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const NotificationTitle: NotificationTitleComponent;
+//#endregion
+//#region src/components/notification/NotificationIcon.d.ts
+type NotificationIconProps = IconProps & {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+};
+declare const NotificationIcon: React.ForwardRefExoticComponent<NotificationIconProps & React.RefAttributes<HTMLSpanElement | SVGSVGElement>>;
+//#endregion
+//#region src/components/notification/NotificationText.d.ts
+type NotificationTextOwnProps<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 NotificationTextProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, NotificationTextOwnProps<C>>;
+type NotificationTextComponent = (<C extends ElementType = 'div'>(props: NotificationTextProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const NotificationText: NotificationTextComponent;
+//#endregion
+//#region src/components/notification/NotificationStack.d.ts
+interface NotificationStackProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Queued notifications show newest-first by default — the typical toast pattern. Set
+   * `reverse` for a chronological transcript instead, oldest-first.
+   */
+  reverse?: boolean;
+}
+declare const NotificationStack: React.ForwardRefExoticComponent<NotificationStackProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/notification/notificationQueue.d.ts
+interface NotificationContent extends Pick<NotificationProps, 'actions' | 'autohide' | 'closeLabel' | 'color' | 'delay' | 'dismissible' | 'icon' | 'role' | 'solid' | 'text' | 'title' | 'titleComponent'> {
+  /**
+   * Content of the notification. Compose manually (typically a `NotificationIcon`/
+   * `NotificationTitle`/`NotificationText`), or leave empty and use the `icon`/`title`/`text`
+   * shorthand options instead.
+   */
+  children?: ReactNode;
+}
+declare const notificationQueue: ToastQueue<NotificationContent>;
+declare function addNotification(children?: ReactNode, options?: Omit<NotificationContent, 'children'>): string;
+declare function closeNotification(key: string): void;
+//#endregion
+//#region src/components/notification/context.d.ts
+interface NotificationContextProps {
+  /**
+   * Whether the notification is currently visible.
+   */
+  visible?: boolean;
+  /**
+   * Dismisses the notification. Wire this to any element's `onClick` — see `useNotification`.
+   */
+  close: () => void;
+}
+//#endregion
+//#region src/hooks/useNotification.d.ts
+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 };

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

@@ -0,0 +1,67 @@
+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, 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. Only meaningful when
+   * `component` is `'a'`.
+   */
+  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?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CloseButton: CloseButtonComponent;
+//#endregion
+export { CloseButtonProps as n, CloseButton as t };