@theroutingcompany/components 0.0.71-alpha.6 → 0.0.73-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.71-alpha.6",
+  "version": "0.0.73-alpha.1",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -97,7 +97,6 @@
     "@react-stately/searchfield": "^3.4.2",
     "@react-stately/select": "^3.5.1",
     "@react-stately/selection": "^3.13.1",
-    "@react-stately/tree": "^3.7.6",
     "@react-types/calendar": "^3.2.1",
     "@react-types/combobox": "^3.6.2",
     "@react-types/datepicker": "^3.3.1",

package/types/components/Calendar/TimeDateSelect.d.ts

@@ -1,8 +1,6 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
-export declare const TriggerContent: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>, any, {}, never>;
-export declare const DropdownContent: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
 export interface TimeDateSelectOutput {
     day: number;
     month: number;

package/types/components/ComboBox/ComboBox.d.ts

@@ -6,7 +6,7 @@ declare function ComboBox<T extends object>(props: ComboBoxProps<T> & {
     errorMessage?: string;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ComboBox {
-    var Item: <T>(props: import("@react-types/shared").ItemProps<T>) => React.JSX.Element;
-    var Section: <T>(props: import("@react-types/shared").SectionProps<T>) => React.JSX.Element;
+    var Item: <T>(props: import("@react-types/shared").ItemProps<T>) => JSX.Element;
+    var Section: <T>(props: import("@react-types/shared").SectionProps<T>) => JSX.Element;
 }
 export default ComboBox;

package/types/components/FormControl/FormControl.d.ts

@@ -1,25 +1,83 @@
+import { type PropsWithChildren, type ReactNode } from 'react';
 import { type AriaFieldProps, type FieldAria } from '@react-aria/label';
 import type { AriaTextFieldProps } from '@react-aria/textfield';
-import { type NumberInputProps } from 'components/Input/NumberInput/NumberInput';
-import { type TextAreaInputProps } from 'components/Input/TextArea/TextArea';
-import { type PropsWithChildren, type ReactNode } from 'react';
 import type { ComponentPropsWithoutStyles } from '../../helpers/typeHelpers';
 type FormControlProps<FieldProps = AriaFieldProps> = PropsWithChildren<{
-    errorMessage?: ReactNode;
     tooltipContent?: string;
     tooltipIcon?: ReactNode;
 } & FieldProps>;
+/** If in a `<FormControl/>`, read `fieldProps` generated by that FormControl's `useField` hook  */
 export declare function useFieldProps(): FieldAria['fieldProps'];
 export declare function FormControl({ children, label, errorMessage, description, tooltipContent, tooltipIcon, validationState, id, ...props }: FormControlProps): import("react/jsx-runtime").JSX.Element;
 export declare const TextFormControl: import("react").ForwardRefExoticComponent<{
-    errorMessage?: ReactNode;
     tooltipContent?: string | undefined;
     tooltipIcon?: ReactNode;
 } & AriaTextFieldProps & {
     children?: ReactNode;
 } & Omit<ComponentPropsWithoutStyles<"input">, "onChange"> & import("react").RefAttributes<HTMLInputElement>>;
-type TextAreaFormControlProps = FormControlProps & ComponentPropsWithoutStyles<'textarea'> & TextAreaInputProps;
-export declare const TextAreaFormControl: import("react").ForwardRefExoticComponent<Omit<TextAreaFormControlProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
-type NumberFormControlProps = FormControlProps & NumberInputProps;
-export declare const NumberFormControl: import("react").ForwardRefExoticComponent<Omit<NumberFormControlProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextAreaFormControl: import("react").ForwardRefExoticComponent<{
+    tooltipContent?: string | undefined;
+    tooltipIcon?: ReactNode;
+} & AriaFieldProps & {
+    children?: ReactNode;
+} & ComponentPropsWithoutStyles<"textarea"> & {
+    label?: ReactNode;
+    pattern?: string | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    type?: "search" | "text" | (string & {}) | "tel" | "url" | "email" | "password" | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-details'?: string | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onFocus?: ((e: import("react").FocusEvent<Element, Element>) => void) | undefined;
+    onBlur?: ((e: import("react").FocusEvent<Element, Element>) => void) | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+    onKeyDown?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
+    onKeyUp?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    defaultValue?: string | undefined;
+    autoFocus?: boolean | undefined;
+    placeholder?: string | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    autoComplete?: string | undefined;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    description?: ReactNode;
+    onFocusChange?: ((isFocused: boolean) => void) | undefined;
+    excludeFromTabOrder?: boolean | undefined;
+    validationState?: import("@react-types/shared").ValidationState | undefined;
+    errorMessage?: ReactNode;
+} & import("components/Input/InputBase").InputBaseProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const NumberFormControl: import("react").ForwardRefExoticComponent<{
+    tooltipContent?: string | undefined;
+    tooltipIcon?: ReactNode;
+} & AriaFieldProps & {
+    children?: ReactNode;
+} & Omit<import("../../helpers/typeHelpers").RenameBooleanProps<import("@react-types/numberfield").AriaNumberFieldProps>, "minValue" | "maxValue"> & {
+    min?: number | undefined;
+    max?: number | undefined;
+} & import("components/Input/InputBase").InputBaseProps & {
+    name?: string | undefined;
+} & {
+    showStepper?: boolean | undefined;
+} & {
+    locale?: string | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/types/components/Input/InputBase.d.ts

@@ -1,33 +1,11 @@
 import tokens from '@theroutingcompany/design-tokens';
-import { type FlattenSimpleInterpolation } from 'styled-components';
 export type InputSize = 'small' | 'large';
 export type InputRadius = typeof tokens.border_radius_0 | typeof tokens.border_radius_100 | typeof tokens.border_radius_200 | typeof tokens.border_radius_400 | typeof tokens.border_radius_800;
-export interface InputBaseProps {
+export type InputBaseProps = {
     borderRadius?: InputRadius;
     paddingSize?: InputSize;
     height?: number | string;
-    fontSize?: number | string;
-    lineHeight?: number | string;
-}
-export declare const inputPadding: {
-    readonly small: ".293rem .5rem";
-    readonly large: ".5rem .5rem";
 };
-export declare const inputHeight: {
-    readonly small: "2rem";
-    readonly large: "2.25rem";
-};
-export declare function placeholderStyles({ lineHeight, fontSize, }: {
-    lineHeight?: string | number;
-    fontSize?: string | number;
-}): FlattenSimpleInterpolation;
-export declare function defaultTypography({ lineHeight, fontSize, }: {
-    lineHeight?: string | number;
-    fontSize?: string | number;
-}): FlattenSimpleInterpolation;
-export declare function defaultFormInput({ paddingSize, }: {
-    paddingSize?: string;
-}): FlattenSimpleInterpolation;
 export declare const InputBase: import("styled-components").StyledComponent<"input", any, InputBaseProps, never>;
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InputErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;

package/types/components/Input/NumberInput/NumberInput.d.ts

@@ -1,6 +1,6 @@
+/// <reference types="react" />
 import { type AriaNumberFieldProps } from '@react-aria/numberfield';
 import { type NumberFieldStateOptions } from '@react-stately/numberfield';
-import type { ReactNode } from 'react';
 import type { ComponentPropsWithoutStyles, RenameBooleanProps, RenameMissuffixedProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps } from '../InputBase';
 type ReactAriaNumberInputProps = RenameMissuffixedProps<RenameBooleanProps<AriaNumberFieldProps>, 'Value', 'minValue' | 'maxValue'>;
@@ -10,8 +10,6 @@ type ShowStepper = {
 type StandardInputProps = Pick<ComponentPropsWithoutStyles<'input'>, 'name'>;
 export type NumberInputProps = ReactAriaNumberInputProps & InputBaseProps & StandardInputProps & ShowStepper & {
     locale?: NumberFieldStateOptions['locale'];
-    errorMessage?: ReactNode;
-    required?: boolean;
 };
 /**
  * Use cases
@@ -39,7 +37,5 @@ export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit
     max?: number | undefined;
 } & InputBaseProps & StandardInputProps & ShowStepper & {
     locale?: string | undefined;
-    errorMessage?: ReactNode;
-    required?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/types/components/Input/TextArea/TextArea.d.ts

@@ -1,16 +1,8 @@
-import { type ReactNode } from 'react';
+/// <reference types="react" />
 import { type AriaTextFieldOptions } from '@react-aria/textfield';
 import type { RenameBooleanProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps } from '../InputBase';
 type ReactAriaInputProps = Omit<RenameBooleanProps<AriaTextFieldOptions<'textarea'>>, 'inputElementType'>;
-export type TextAreaInputProps = ReactAriaInputProps & InputBaseProps & {
-    rows?: number;
-    errorMessage?: ReactNode;
-    validationState?: 'valid' | 'invalid' | 'invalid-disabled';
-};
-export declare const TextAreaInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & {
-    rows?: number | undefined;
-    errorMessage?: ReactNode;
-    validationState?: "invalid" | "valid" | "invalid-disabled" | undefined;
-} & import("react").RefAttributes<HTMLTextAreaElement>>;
+export type TextAreaInputProps = ReactAriaInputProps & InputBaseProps;
+export declare const TextAreaInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/types/components/Input/TextInput/TextInput.d.ts

@@ -1,26 +1,16 @@
+/// <reference types="react" />
 import { type AriaTextFieldOptions } from '@react-aria/textfield';
-import { type ReactNode } from 'react';
 import type { RenameBooleanProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps, type InputRadius } from '../InputBase';
 type ReactAriaInputProps = Omit<RenameBooleanProps<AriaTextFieldOptions<'input'>>, 'inputElementType'>;
 interface CustomTextInputProps {
     focus?: boolean;
     height?: number | string;
-    fontSize?: number | string;
-    lineHeight?: number | string;
     inputBorderRadius?: InputRadius;
     connectLeft?: React.ReactNode | null;
     connectRight?: React.ReactNode | null;
     className?: string;
 }
-export type TextInputProps = ReactAriaInputProps & InputBaseProps & CustomTextInputProps & {
-    validationState?: 'valid' | 'invalid' | 'invalid-disabled';
-    errorMessage?: ReactNode;
-    required?: boolean;
-};
-export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & CustomTextInputProps & {
-    validationState?: "invalid" | "valid" | "invalid-disabled" | undefined;
-    errorMessage?: ReactNode;
-    required?: boolean | undefined;
-} & import("react").RefAttributes<HTMLInputElement>>;
+export type TextInputProps = ReactAriaInputProps & InputBaseProps & CustomTextInputProps;
+export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & CustomTextInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/types/components/Input/TimeInput/TimeInput.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 import { type TODOFIXME } from 'helpers';
 export { Time } from '@internationalized/date';
-export declare const TimeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TimeField: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface TimeInputProps {
     label?: string;
     defaultValue?: TODOFIXME;
@@ -10,6 +8,6 @@ interface TimeInputProps {
     onChange?: TODOFIXME;
     hourCycle?: 12 | 24;
     errorMessage?: string;
-    wrapper?: React.ComponentType<TODOFIXME>;
+    wrapper?: React.ComponentType<any>;
 }
 export declare function TimeInput({ ...props }: TimeInputProps): import("react/jsx-runtime").JSX.Element;

package/types/components/ListBox/ListBox.d.ts

@@ -34,7 +34,5 @@ interface ListBoxPopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
     state: OverlayTriggerState;
     popoverRef?: React.RefObject<HTMLDivElement>;
 }
-export declare function ListBoxPopover(props: Omit<ListBoxPopoverProps, 'triggerRef'> & {
-    targetRef: React.RefObject<HTMLElement>;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function ListBoxPopover(props: ListBoxPopoverProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/types/components/Modal/Header.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 export type ModalHeaderProps = {
     children?: React.ReactNode;
     showCloseButton?: boolean;
-    mb?: string;
 };
 declare const Header: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export default Header;

package/types/components/MultiSelect/MultiSelect.d.ts

@@ -56,6 +56,7 @@ type MultiSelectProps = {
     tooltipIcon?: string;
     errorMessage?: string;
 };
+export declare const MultiSelectComponent: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & {
     /** Item objects in the collection. */
     options: Option[];

package/types/components/MultiSelect/useMultiSelectState.d.ts

@@ -1,8 +1,8 @@
-import type { MenuTriggerState } from '@react-stately/menu';
-import type { OverlayTriggerProps } from '@react-types/overlays';
-import type { AsyncLoadable, CollectionBase, FocusableProps, InputBase, LabelableProps, MultipleSelection, TextInputBase, Validation } from '@react-types/shared';
-import type { MultiSelectListState } from './useMultiSelectListState';
-export interface MultiSelectProps<T> extends CollectionBase<T>, AsyncLoadable, Omit<InputBase, 'isReadOnly'>, Validation<T>, LabelableProps, TextInputBase, MultipleSelection, FocusableProps, OverlayTriggerProps {
+import type { MenuTriggerState } from "@react-stately/menu";
+import type { OverlayTriggerProps } from "@react-types/overlays";
+import type { AsyncLoadable, CollectionBase, FocusableProps, InputBase, LabelableProps, MultipleSelection, TextInputBase, Validation } from "@react-types/shared";
+import type { MultiSelectListState } from "./useMultiSelectListState";
+export interface MultiSelectProps<T> extends CollectionBase<T>, AsyncLoadable, Omit<InputBase, "isReadOnly">, Validation, LabelableProps, TextInputBase, MultipleSelection, FocusableProps, OverlayTriggerProps {
     /**
      * Whether the menu should automatically flip direction when space is limited.
      * @default true
@@ -15,4 +15,4 @@ export interface MultiSelectState<T> extends MultiSelectListState<T>, MenuTrigge
     /** Sets whether the select is focused. */
     setFocused(isFocused: boolean): void;
 }
-export declare function useMultiSelectState<T extends object>(props: MultiSelectProps<T>): MultiSelectState<T>;
+export declare function useMultiSelectState<T extends {}>(props: MultiSelectProps<T>): MultiSelectState<T>;

package/types/components/Search/Search.d.ts

@@ -4,9 +4,8 @@ export declare const Search: import("react").ForwardRefExoticComponent<{
     size: 'small' | 'large';
     leadingIcon?: boolean | undefined;
     hideLabel?: boolean | undefined;
-    height?: string | undefined;
 } & Omit<AriaSearchFieldProps, "isDisabled" | "isRequired" | "isReadOnly"> & {
     disabled?: boolean | undefined;
-    required?: unknown;
+    required?: boolean | undefined;
     readOnly?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/types/components/SingleSelect/SingleSelect.d.ts

@@ -1,16 +1,11 @@
 import type { AriaSelectProps } from '@react-types/select';
-export { Item as SingleSelectItem, Section as SingleSelectSection } from '@react-stately/collections';
+export { Item as SingleSelectItem, Section as SingleSelectSection, } from '@react-stately/collections';
 type SingleSelectProps<T> = AriaSelectProps<T> & {
     placeholder?: string;
     tooltipIcon?: string;
     tooltipContent?: string;
     showCaret?: boolean;
 };
-type PlaceholderProps = {
-    lineHeight?: number | string;
-    fontSize?: number | string;
-};
-export declare const Placeholder: import("styled-components").StyledComponent<"span", any, PlaceholderProps, never>;
 export declare function SingleSelect<T extends object>(props: SingleSelectProps<T> & {
     hideLabel?: boolean | undefined;
     errorMessage?: string;

package/types/components/index.d.ts

@@ -25,7 +25,6 @@ export * from './Input/InlineEdit/InlineEdit';
 export * from './Input/NumberInput/NumberInput';
 export * from './Input/TextInput/TextInput';
 export * from './Input/TimeInput/TimeInput';
-export * from './Input/DateInput/DateInput';
 export * from './Label/Label';
 export * from './Modal';
 export * from './LabeledText';

package/types/components/DateSegment/DateSegment.d.ts

@@ -1,11 +0,0 @@
-import { type DateFieldState, type DateSegment } from '@react-stately/datepicker';
-export { Time } from '@internationalized/date';
-export declare const SegmentDiv: import("styled-components").StyledComponent<"div", any, {
-    literal: boolean;
-}, never>;
-export type DateSegmentProps = {
-    segment: DateSegment;
-    state: DateFieldState;
-};
-declare function DateSegment({ segment, state }: DateSegmentProps): import("react/jsx-runtime").JSX.Element;
-export default DateSegment;

package/types/components/Input/DateInput/DateInput.d.ts

@@ -1,16 +0,0 @@
-import { CalendarDateTime } from '@internationalized/date';
-import { type Granularity } from '@react-types/datepicker';
-export declare const DateField: import("styled-components").StyledComponent<"div", any, {
-    height: string;
-    paddingSize: string;
-}, never>;
-export interface DateInputProps {
-    defaultValue?: CalendarDateTime;
-    date?: Date;
-    label?: string;
-    granularity?: Granularity;
-    order?: string[];
-    height?: string;
-    paddingSize?: string;
-}
-export declare function DateInput({ granularity, height, paddingSize, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;