@chassis-ui/react 0.1.3 → 0.3.0

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

@@ -0,0 +1,81 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import React, { ElementType, FormHTMLAttributes, LabelHTMLAttributes, ReactElement } from "react";
+//#region src/components/form/Form.d.ts
+interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component.
+   */
+  validated?: boolean;
+}
+declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+//#endregion
+//#region src/components/form/FormLabel.d.ts
+interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * A string of all className you want to be applied to the component, and override standard className value.
+   */
+  customClassName?: string;
+}
+declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;
+//#endregion
+//#region src/components/form/FormHelp.d.ts
+type FormHelpOwnProps<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 FormHelpProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FormHelpOwnProps<C>>;
+type FormHelpComponent = (<C extends ElementType = 'div'>(props: FormHelpProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const FormHelp: FormHelpComponent;
+//#endregion
+//#region src/components/form/FormFeedback.d.ts
+type FormFeedbackOwnProps<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;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * If your form layout allows it, you can display validation feedback in a styled tooltip.
+   */
+  tooltip?: boolean;
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+};
+type FormFeedbackProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FormFeedbackOwnProps<C>>;
+type FormFeedbackComponent = (<C extends ElementType = 'div'>(props: FormFeedbackProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const FormFeedback: FormFeedbackComponent;
+//#endregion
+export { FormLabel as a, FormProps as c, FormHelpProps as i, FormFeedbackProps as n, FormLabelProps as o, FormHelp as r, Form as s, FormFeedback as t };
+//# sourceMappingURL=index-DAoPg59I.d.ts.map

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

@@ -0,0 +1,59 @@
+import "./focus-ring-SR_LwaN7.js";
+import React, { ChangeEventHandler, InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/color-input/ColorInput.d.ts
+interface ColorInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The value of the input, uncontrolled.
+   */
+  defaultValue?: 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;
+  /**
+   * Method called immediately after the `value` prop changes.
+   */
+  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;
+  /**
+   * The `value` attribute of component.
+   *
+   * @controllable onChange
+   * */
+  value?: string;
+}
+declare const ColorInput: React.ForwardRefExoticComponent<ColorInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { ColorInputProps as n, ColorInput as t };
+//# sourceMappingURL=index-DHGgezXU.d.ts.map

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

@@ -0,0 +1,121 @@
+import "./focus-ring-SR_LwaN7.js";
+import { i as IconValue } from "./iconConfig-C6gbYhsD.js";
+import React, { InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/number-field/NumberField.d.ts
+interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'inputMode' | 'max' | 'min' | 'onChange' | 'size' | 'step' | 'type' | 'value'> {
+  /**
+   * Content rendered at the input's trailing edge, before the step buttons, e.g. a unit as an
+   * `InputAdorn`.
+   */
+  adornEnd?: ReactNode;
+  /**
+   * Content rendered at the input's leading edge, e.g. an `InputAdorn` icon or text.
+   */
+  adornStart?: ReactNode;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The name of the decrement button for screen readers. Defaults to "Decrease" and the field's
+   * label, in the locale's language.
+   */
+  decrementAriaLabel?: string;
+  /**
+   * The decrement button's icon, in place of `IconProvider`'s `decrement`.
+   */
+  decrementIcon?: IconValue;
+  /**
+   * The value of the field, uncontrolled.
+   */
+  defaultValue?: number;
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean;
+  /**
+   * How the value is shown and typed: decimals, a percent, a currency or a unit, with the
+   * locale's separators. `Intl.NumberFormat`'s options.
+   */
+  formatOptions?: Intl.NumberFormatOptions;
+  /**
+   * A description for the field, rendered below the input.
+   */
+  help?: ReactNode;
+  /**
+   * The name of the increment button for screen readers. Defaults to "Increase" and the field's
+   * label, in the locale's language.
+   */
+  incrementAriaLabel?: string;
+  /**
+   * The increment button's icon, in place of `IconProvider`'s `increment`.
+   */
+  incrementIcon?: IconValue;
+  /**
+   * 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;
+  /**
+   * The largest value. A larger one typed in is clamped to it when the field loses focus.
+   */
+  max?: number;
+  /**
+   * The smallest value. A smaller one typed in is clamped to it when the field loses focus.
+   */
+  min?: number;
+  /**
+   * Handler that is called when the value is committed: on a step (a button, an arrow key, Home,
+   * End, the mouse wheel), on Enter or when the field loses focus after typing, on a paste that
+   * replaces the whole text, and on a form reset. `NaN` when the field is empty.
+   */
+  onChange?: (value: number) => void;
+  /**
+   * Toggle the readonly state for the component.
+   */
+  readOnly?: boolean;
+  /**
+   * Toggle the required state for the component.
+   */
+  required?: boolean;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * The amount the buttons and the arrow keys add or take away. A typed value snaps to it,
+   * counted from `min`.
+   *
+   * @default 1
+   */
+  step?: number;
+  /**
+   * Show the increment and decrement buttons. Without them the arrow keys still step the value.
+   *
+   * @default true
+   */
+  stepButtons?: boolean;
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * A success message for the field, rendered below the input when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+  /**
+   * The value of the field, controlled. `NaN` for an empty field.
+   */
+  value?: number;
+}
+declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { NumberFieldProps as n, NumberField as t };
+//# sourceMappingURL=index-DHOG_rjE.d.ts.map

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

@@ -0,0 +1,57 @@
+import "./focus-ring-SR_LwaN7.js";
+import { t as Placement } from "./overlayPlacement-CIsLpycT.js";
+import React, { HTMLAttributes, ReactElement, ReactNode } from "react";
+//#region src/components/tooltip/Tooltip.d.ts
+interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'content'> {
+  /**
+   * The trigger: a single element, which shows the tooltip on hover and focus.
+   */
+  children: ReactElement;
+  /**
+   * Content node for your component.
+   */
+  content: ReactNode | string;
+  /**
+   * Whether the tooltip is shown when it first renders. Use it instead of `visible` when nothing
+   * outside needs to control the tooltip.
+   */
+  defaultVisible?: boolean;
+  /**
+   * Offset of the tooltip relative to its target, as `[crossAxis, mainAxis]`.
+   */
+  offset?: [number, number];
+  /**
+   * Callback fired when the tooltip hides.
+   */
+  onHide?: () => void;
+  /**
+   * Callback fired when the tooltip shows.
+   */
+  onShow?: () => void;
+  /**
+   * Callback fired when the tooltip asks to show or hide: hover, focus, blur, the Escape key, or
+   * the closing of the dialog it is in. Receives the state it asks for. With `visible` set, the
+   * tooltip changes only when `visible` does.
+   */
+  onVisibleChange?: (visible: boolean) => void;
+  /**
+   * Describes the preferred placement of your component. Chassis will flip it to keep it in
+   * view.
+   */
+  placement?: Placement;
+  /**
+   * Tooltips always show on focus, since keyboard/screen-reader users need them too. Set to
+   * `'focus'` to disable the hover trigger and show on focus only.
+   */
+  trigger?: 'hover' | 'focus';
+  /**
+   * Whether the tooltip is shown. Setting it makes the tooltip controlled: it shows and hides
+   * only when this changes, so pair it with `onVisibleChange`. Leave it unset, or use
+   * `defaultVisible`, for a tooltip that shows and hides itself.
+   */
+  visible?: boolean;
+}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TooltipProps as n, Tooltip as t };
+//# sourceMappingURL=index-DJfga0Ce.d.ts.map

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

@@ -0,0 +1,110 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { n as LinkProps } from "./Link-nrd0JWlO.js";
+import { t as NavVariant } from "./navVariant-CnD21GBS.js";
+import React, { ElementType, HTMLAttributes, ReactElement, Ref } from "react";
+//#region src/components/nav/Nav.d.ts
+interface NavItemDef {
+  /**
+   * Label content for the nav item.
+   */
+  label: React.ReactNode;
+  /**
+   * URL for the nav link.
+   */
+  href?: string;
+  /**
+   * Marks the item as active.
+   */
+  active?: boolean;
+  /**
+   * Marks the item as disabled.
+   */
+  disabled?: boolean;
+}
+type NavOwnProps<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;
+  /**
+   * Array of nav item definitions for data-driven rendering. When provided, children are ignored.
+   */
+  items?: NavItemDef[];
+  /**
+   * Specify a layout type for component.
+   */
+  layout?: 'fill' | 'justified';
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Set the nav variant to tabs, to segments (a segmented control) or to underline, which
+   * underlines the active link. `'pills'` is the former name of `'segments'`: deprecated, it
+   * renders the same.
+   *
+   * @type { 'tabs' | 'segments' | 'underline' | 'pills' }
+   */
+  variant?: NavVariant;
+};
+type NavProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<C, NavOwnProps<C>>;
+type NavComponent = (<C extends ElementType = 'ul'>(props: NavProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Nav: NavComponent;
+//#endregion
+//#region src/components/nav/NavLink.d.ts
+type NavLinkOwnProps = {
+  /**
+   * Toggle the active state for the component.
+   */
+  active?: boolean;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean;
+};
+type NavLinkProps<C extends ElementType = 'a'> = LinkProps<C> & NavLinkOwnProps;
+type NavLinkComponent = (<C extends ElementType = 'a'>(props: NavLinkProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const NavLink: NavLinkComponent;
+//#endregion
+//#region src/components/nav/NavItem.d.ts
+type NavItemProps<C extends ElementType = 'a'> = NavLinkProps<C> & {
+  /**
+   * Keeps the item in the list inside a `NavOverflow`, whatever the width.
+   */
+  keepVisible?: boolean;
+};
+type NavItemComponent = (<C extends ElementType = 'a'>(props: NavItemProps<C> & {
+  ref?: Ref<HTMLLIElement>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const NavItem: NavItemComponent;
+//#endregion
+//#region src/components/nav/NavTitle.d.ts
+interface NavTitleProps extends HTMLAttributes<HTMLLIElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+}
+declare const NavTitle: React.ForwardRefExoticComponent<NavTitleProps & React.RefAttributes<HTMLLIElement>>;
+//#endregion
+export { NavLink as a, NavItemDef as c, NavItemProps as i, NavProps as l, NavTitleProps as n, NavLinkProps as o, NavItem as r, Nav as s, NavTitle as t };
+//# sourceMappingURL=index-DJr_ZK4b.d.ts.map

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

@@ -0,0 +1,119 @@
+import "./focus-ring-SR_LwaN7.js";
+import React, { HTMLAttributes, ReactNode } from "react";
+import { TimeValue } from "react-aria";
+//#region src/components/time-field/TimeField.d.ts
+interface TimeFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+  /**
+   * An accessible label for the field, used when there's no visible `label`.
+   */
+  'aria-label'?: string;
+  /**
+   * Identifies a visible element that labels the field.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Focus the first segment when the field mounts.
+   */
+  autoFocus?: boolean;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The value of the field, uncontrolled.
+   */
+  defaultValue?: TimeValue | null;
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean;
+  /**
+   * The id of a form elsewhere on the page that the field belongs to.
+   */
+  form?: string;
+  /**
+   * The smallest unit shown and edited.
+   *
+   * @default 'minute'
+   */
+  granularity?: 'hour' | 'minute' | 'second';
+  /**
+   * A description for the field, rendered below it.
+   */
+  help?: ReactNode;
+  /**
+   * Hide the time zone of a `ZonedDateTime` value.
+   */
+  hideTimeZone?: boolean;
+  /**
+   * Show 12 or 24 hours. Defaults to the locale's.
+   */
+  hourCycle?: 12 | 24;
+  /**
+   * 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` that names the field.
+   */
+  label?: ReactNode;
+  /**
+   * The latest time. A later one entered marks the field invalid.
+   */
+  maxValue?: TimeValue | null;
+  /**
+   * The earliest time. An earlier one entered marks the field invalid.
+   */
+  minValue?: TimeValue | null;
+  /**
+   * The name the value is submitted under with a form, as an ISO 8601 time (`09:30:00`).
+   */
+  name?: string;
+  /**
+   * Handler that is called when the value changes: once every segment has a value, and with
+   * `null` once every segment is empty. A partly emptied field keeps its last value.
+   */
+  onChange?: (value: TimeValue | null) => void;
+  /**
+   * The time the segments start from when the field is empty, such as `new Time(9)`. It also
+   * sets the type of value `onChange` receives.
+   */
+  placeholderValue?: TimeValue;
+  /**
+   * Toggle the readonly state for the component.
+   */
+  readOnly?: boolean;
+  /**
+   * Toggle the required state for the component.
+   */
+  required?: boolean;
+  /**
+   * Show a leading zero on the hour, as `09:30` rather than `9:30`, whatever the locale does.
+   */
+  shouldForceLeadingZeros?: boolean;
+  /**
+   * 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: a `Time`, or a `CalendarDateTime` or `ZonedDateTime`
+   * whose date is kept. `null` for an empty field.
+   */
+  value?: TimeValue | null;
+}
+declare const TimeField: React.ForwardRefExoticComponent<TimeFieldProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TimeFieldProps as n, TimeField as t };
+//# sourceMappingURL=index-DMbdEm__.d.ts.map

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

@@ -0,0 +1,133 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as ContextColor } from "./types-CS_40Txv.js";
+import { t as ButtonObject } from "./renderFormCheck-DZh_5Df8.js";
+import React, { HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/checkbox/Checkbox.d.ts
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'defaultChecked' | 'onChange' | 'size'> {
+  /**
+   * Create button-like checkboxes.
+   */
+  button?: ButtonObject;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the check indicator to one of Chassis context colors. Ignored when `button` is set.
+   */
+  color?: ContextColor;
+  /**
+   * Whether the checkbox is selected, uncontrolled. Ignored when rendered inside a `<CheckboxGroup>` —
+   * the group's `value`/`defaultValue` owns selection there.
+   */
+  defaultSelected?: boolean;
+  /**
+   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+   */
+  id?: string;
+  /**
+   * Checkbox indeterminate property.
+   */
+  indeterminate?: boolean;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * Whether the checkbox is selected, controlled. Ignored when rendered inside a `<CheckboxGroup>` —
+   * the group's `value`/`defaultValue` owns selection there.
+   */
+  isSelected?: boolean;
+  /**
+   * The element represents a caption for a component.
+   *
+   * Children are accepted as an alias for this prop — `label` wins when both are given.
+   * react-aria, which backs this component, calls the same thing `children`; this package renames
+   * it to `label`, and honouring both means the shape React developers reach for first still
+   * names the control instead of silently producing an unlabelled one.
+   */
+  label?: ReactNode;
+  /**
+   * Callback fired when the selected state changes. Ignored when rendered inside a `<CheckboxGroup>` —
+   * use the group's `onChange` instead.
+   */
+  onChange?: (isSelected: boolean) => void;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * The value of the checkbox, used when submitting an HTML form. Required when rendered inside a
+   * `<CheckboxGroup>` — it identifies this item within the group's selected values.
+   */
+  value?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/components/checkbox/CheckboxGroup.d.ts
+interface CheckboxGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'defaultValue' | 'onChange'> {
+  /**
+   * One or more `<Checkbox>` elements.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The selected values, uncontrolled.
+   */
+  defaultValue?: string[];
+  /**
+   * A description for the group, rendered below the options.
+   */
+  description?: ReactNode;
+  /**
+   * Disables every checkbox in the group.
+   */
+  disabled?: boolean;
+  /**
+   * An error message for the group, rendered below the options when `invalid` is set.
+   */
+  errorMessage?: ReactNode;
+  /**
+   * Set group validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * The group's caption, rendered as a `<legend>`.
+   */
+  label?: ReactNode;
+  /**
+   * The name for the group, used for native form submission.
+   */
+  name?: string;
+  /**
+   * Callback fired when the selected values change.
+   */
+  onChange?: (value: string[]) => void;
+  /**
+   * Lay the group's checkboxes out on the same horizontal row instead of stacking them.
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Marks the group as required.
+   */
+  required?: boolean;
+  /**
+   * Set group validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * The selected values, controlled.
+   */
+  value?: string[];
+}
+declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+//#endregion
+export { CheckboxProps as i, CheckboxGroupProps as n, Checkbox as r, CheckboxGroup as t };
+//# sourceMappingURL=index-DXjbI7Yv.d.ts.map