@theroutingcompany/components 0.0.71-alpha.0 → 0.0.71-alpha.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.71-alpha.0",
+  "version": "0.0.71-alpha.10",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -97,6 +97,7 @@
     "@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,6 +1,8 @@
 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

@@ -1,12 +1,13 @@
 import type { ComboBoxProps } from '@react-types/combobox';
 import * as React from 'react';
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChevronDown: import("styled-components").StyledComponent<import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>, any, {}, never>;
 declare function ComboBox<T extends object>(props: ComboBoxProps<T> & {
     tooltipContent?: React.ReactNode;
     errorMessage?: string;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ComboBox {
-    var Item: <T>(props: import("@react-types/shared").ItemProps<T>) => JSX.Element;
-    var Section: <T>(props: import("@react-types/shared").SectionProps<T>) => JSX.Element;
+    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;
 }
 export default ComboBox;

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

@@ -0,0 +1,11 @@
+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/Drawer/Drawer.d.ts

@@ -26,9 +26,6 @@ declare const Drawer: ForwardRefExoticComponent<DrawerProps> & {
     Header: typeof Header;
 };
 export default Drawer;
-/**
- * Reusable hook to be used with the Drawer component
- */
 type UseDrawerProps = {
     initialOpen?: boolean;
     triggerToggle?: boolean;

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

@@ -1,83 +1,25 @@
-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>>;
-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>>;
+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 {};

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

@@ -0,0 +1,16 @@
+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;

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

@@ -1,11 +1,33 @@
 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 type InputBaseProps = {
+export interface 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,6 +10,8 @@ type ShowStepper = {
 type StandardInputProps = Pick<ComponentPropsWithoutStyles<'input'>, 'name'>;
 export type NumberInputProps = ReactAriaNumberInputProps & InputBaseProps & StandardInputProps & ShowStepper & {
     locale?: NumberFieldStateOptions['locale'];
+    errorMessage?: ReactNode;
+    required?: boolean;
 };
 /**
  * Use cases
@@ -37,5 +39,7 @@ 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,8 +1,16 @@
-/// <reference types="react" />
+import { type ReactNode } from '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;
-export declare const TextAreaInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+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 {};

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

@@ -1,16 +1,26 @@
-/// <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;
-export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & CustomTextInputProps & import("react").RefAttributes<HTMLInputElement>>;
+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 {};

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

@@ -1,6 +1,8 @@
 /// <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;
@@ -8,6 +10,6 @@ interface TimeInputProps {
     onChange?: TODOFIXME;
     hourCycle?: 12 | 24;
     errorMessage?: string;
-    wrapper?: React.ComponentType<any>;
+    wrapper?: React.ComponentType<TODOFIXME>;
 }
 export declare function TimeInput({ ...props }: TimeInputProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,4 +1,4 @@
 export declare const timezones: {
     name: string;
-    key: string;
+    id: string;
 }[];

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

@@ -2,6 +2,7 @@ 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/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { type ForwardRefExoticComponent, type ReactNode } from 'react';
 import { type MaxWidthProps } from 'styled-system';
 import { type PortalProps } from '../Portal';
 import Content from './Content';
@@ -11,7 +11,7 @@ export declare const dialogWidths: {
 };
 export type DialogWidth = keyof typeof dialogWidths;
 export type ModalProps = {
-    children?: React.ReactNode;
+    children?: ReactNode;
     className?: string;
     closeOnEscape?: boolean;
     closeOnOutsideClick?: boolean;
@@ -21,9 +21,36 @@ export type ModalProps = {
     size?: 'small' | 'medium' | 'large';
     maxWidth?: string;
 } & MaxWidthProps;
-declare const Modal: React.ForwardRefExoticComponent<ModalProps> & {
+declare const Modal: ForwardRefExoticComponent<ModalProps> & {
     Header: typeof Header;
     Content: typeof Content;
     Footer: typeof Footer;
 };
 export default Modal;
+export type UseModalProps = {
+    initialOpen?: boolean;
+    id?: string;
+};
+export type UseModalState = {
+    isOpen: boolean;
+    toggleModal: () => void;
+    openModal: () => void;
+    closeModal: () => void;
+    getActivatorProps: (additionalProps?: {
+        [k: string]: unknown;
+    }) => {
+        'aria-controls': UseModalProps['id'];
+        onClick: () => void;
+        [key: string]: unknown;
+    };
+    getModalProps: (props?: {
+        [k: string]: unknown;
+    }) => {
+        id: UseModalProps['id'];
+        onClose: () => void;
+        open: boolean;
+        [key: string]: unknown;
+    };
+};
+declare const useModal: ({ initialOpen, id, }?: UseModalProps) => UseModalState;
+export { useModal };

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

@@ -14,4 +14,4 @@ export interface MultiSelectListState<T> extends ListState<T> {
     /** The type of selection. */
     selectionMode: MultipleSelection["selectionMode"];
 }
-export declare function useMultiSelectListState<T extends {}>(props: MultiSelectListProps<T>): MultiSelectListState<T>;
+export declare function useMultiSelectListState<T extends object>(props: MultiSelectListProps<T>): MultiSelectListState<T>;

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, 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<T>, 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 {}>(props: MultiSelectProps<T>): MultiSelectState<T>;
+export declare function useMultiSelectState<T extends object>(props: MultiSelectProps<T>): MultiSelectState<T>;

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

@@ -4,8 +4,9 @@ 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?: boolean | undefined;
+    required?: unknown;
     readOnly?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -6,6 +6,11 @@ type SingleSelectProps<T> = AriaSelectProps<T> & {
     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,6 +25,7 @@ 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/hooks/useModal.d.ts

@@ -1,7 +0,0 @@
-declare function useModal({ initialOpen, id }?: {
-    initialOpen?: boolean | undefined;
-    id?: string | undefined;
-}): {
-    isOpen: boolean;
-};
-export default useModal;