@theroutingcompany/components 0.0.99-alpha.9 → 0.0.100-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.99-alpha.9",
+  "version": "0.0.100-alpha.0",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -107,11 +107,10 @@
     "@styled-system/prop-types": "^5.1.2",
     "@styled-system/props": "^5.1.5",
     "@tanstack/react-table": "^8.9.1",
-    "@theroutingcompany/design-tokens": "0.0.14-alpha.0",
+    "@theroutingcompany/design-tokens": "^0.0.9",
     "@types/styled-system": "^5.1.16",
     "csstype": "^3.1.2",
     "react-focus-lock": "^2.9.4",
-    "react-google-autocomplete": "^2.7.3",
     "react-scrolllock": "^5.0.1",
     "react-transition-group": "^4.4.5",
     "styled-components": "^5.3.9",
@@ -139,7 +138,6 @@
     "@storybook/react-vite": "^7.0.3",
     "@storybook/testing-library": "^0.1.0",
     "@types/eslint": "^8.37.0",
-    "@types/google.maps": "^3.55.11",
     "@types/prettier": "^2.7.2",
     "@types/react": "^18.0.34",
     "@types/react-dom": "^18.0.11",

package/types/components/Accordion/Accordion.d.ts

@@ -11,7 +11,7 @@ export declare function SectionHeader({ children, icon, bold, ...rest }: Section
 type SectionItemProps = {
     children: ReactNode;
     includeBottomDivider?: boolean;
-    style: CSSProperties;
+    style?: CSSProperties;
 } & AccordionItemProps;
 export declare function SectionItem({ children, includeBottomDivider, style, ...rest }: SectionItemProps): import("react/jsx-runtime").JSX.Element;
 export interface AccordionProps {

package/types/components/BoxPopover/BoxPopover.d.ts

@@ -11,6 +11,5 @@ interface BoxPopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
 export declare function BoxPopover(props: Omit<BoxPopoverProps, 'triggerRef'> & {
     targetRef: React.RefObject<HTMLElement>;
     disableFocusManagement?: boolean;
-    className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,7 @@ export declare const ChevronDown: import("styled-components").StyledComponent<im
 declare function ComboBox<T extends object>(props: ComboBoxProps<T> & {
     tooltipContent?: React.ReactNode;
     errorMessage?: string;
+    boldLabel?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ComboBox {
     var Item: <T>(props: import("@react-types/shared").ItemProps<T>) => React.JSX.Element;

package/types/components/Drawer/Drawer.d.ts

@@ -2,6 +2,7 @@ import { type ForwardRefExoticComponent, type ReactNode } from 'react';
 import { type PortalProps } from '../Portal';
 import Content from './Content';
 import Header from './Header';
+import Footer from './Footer';
 declare const Close: ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
@@ -24,6 +25,7 @@ declare const Drawer: ForwardRefExoticComponent<DrawerProps> & {
     Close: typeof Close;
     Content: typeof Content;
     Header: typeof Header;
+    Footer: typeof Footer;
 };
 export default Drawer;
 type UseDrawerProps = {

package/types/components/Drawer/Footer.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+type HeaderProps = {
+    children?: ReactNode;
+    loading?: boolean;
+    skeleton?: ReactNode;
+};
+declare const Footer: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Footer;

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

@@ -8,7 +8,7 @@ type FormControlProps<FieldProps = AriaFieldProps> = PropsWithChildren<{
     tooltipIcon?: ReactNode;
 } & FieldProps>;
 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 function FormControl({ children, label, errorMessage, tooltipContent, tooltipIcon, validationState, id, ...props }: FormControlProps): import("react/jsx-runtime").JSX.Element;
 export declare const TextFormControl: import("react").ForwardRefExoticComponent<{
     errorMessage?: ReactNode;
     tooltipContent?: string | undefined;
@@ -60,15 +60,11 @@ export declare const TextAreaFormControl: import("react").ForwardRefExoticCompon
     maxLength?: number | undefined;
     minLength?: number | undefined;
     readOnly?: boolean | undefined;
-    required?: boolean | undefined;
+    required?: unknown;
     description?: ReactNode;
     onFocusChange?: ((isFocused: boolean) => void) | undefined;
     excludeFromTabOrder?: boolean | undefined;
-    validationState?: import("@react-types/shared").ValidationState | undefined;
-    isInvalid?: boolean | undefined;
     errorMessage?: ReactNode | ((v: import("@react-types/shared").ValidationResult) => ReactNode);
-    validationBehavior?: "aria" | "native" | undefined;
-    validate?: ((value: unknown) => true | import("@react-types/shared").ValidationError | null | undefined) | undefined;
 } & import("components/Input/InputBase").InputBaseProps & {
     rows?: number | undefined;
     errorMessage?: ReactNode;
@@ -91,5 +87,7 @@ export declare const NumberFormControl: import("react").ForwardRefExoticComponen
     locale?: string | undefined;
     errorMessage?: ReactNode;
     required?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    boldLabel?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -16,6 +16,8 @@ interface DateInputProps {
     isInvalid?: boolean;
     isDisabled?: boolean;
     hideIcon?: boolean;
+    errorMessage?: string;
+    placeholder?: string;
 }
-export declare function DateInput({ label, labelId, inputId, timeZone, hideLabel, boldLabel, onChange, isInvalid, isDisabled, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateInput({ label, labelId, inputId, timeZone, hideLabel, boldLabel, onChange, isInvalid, isDisabled, placeholder, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -30,6 +30,7 @@ export declare function defaultFormInput({ paddingSize, }: {
 }): 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>;
-export declare const InputDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EndIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputErrorMessageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputErrorMessage: ({ children }: {
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -12,6 +12,8 @@ export type NumberInputProps = ReactAriaNumberInputProps & InputBaseProps & Stan
     locale?: NumberFieldStateOptions['locale'];
     errorMessage?: ReactNode;
     required?: boolean;
+    isInvalid?: boolean;
+    boldLabel?: boolean;
 };
 /**
  * Use cases
@@ -41,6 +43,8 @@ export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit
     locale?: string | undefined;
     errorMessage?: ReactNode;
     required?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    boldLabel?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export declare const handleFormWithNumbers: (form: HTMLFormElement) => {
     [k: string]: FormDataEntryValue;

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

@@ -19,6 +19,7 @@ export type TextInputProps = ReactAriaInputProps & InputBaseProps & CustomTextIn
     errorMessage?: ReactNode;
     required?: boolean;
     tooltipContent?: string;
+    boldLabel?: boolean;
 };
 export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & CustomTextInputProps & {
     isInvalid?: boolean | undefined;
@@ -26,5 +27,6 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<ReactA
     errorMessage?: ReactNode;
     required?: boolean | undefined;
     tooltipContent?: string | undefined;
+    boldLabel?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -19,5 +19,6 @@ interface TimeInputProps {
     isInvalid?: boolean;
     isDisabled?: boolean;
     hideIcon?: boolean;
+    placeholder?: string;
 }
-export declare function TimeInput({ label, labelId, inputId, hideLabel, boldLabel, interval, hourCycle, defaultValue, onChange, isInvalid, isDisabled, ...props }: TimeInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimeInput({ label, labelId, inputId, hideLabel, boldLabel, interval, hourCycle, defaultValue, onChange, isInvalid, isDisabled, placeholder, ...props }: TimeInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import type { CollectionChildren } from '@react-types/shared';
 import React from 'react';
 import { useMultiSelectState } from './useMultiSelectState';
-export { Item as MultiSelectItem, Section as MultiSelectSection } from '@react-stately/collections';
+export { Item as MultiSelectItem, Section as MultiSelectSection, } from '@react-stately/collections';
 export type OptionItem = {
     children?: never;
     id: string;

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

@@ -9,6 +9,6 @@ export declare const Search: import("react").ForwardRefExoticComponent<{
     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/Skeleton/Skeleton.d.ts

@@ -7,6 +7,12 @@ export type SkeletonHeaderProps = {
     width?: string;
 };
 export declare const SkeletonHeader: React.ForwardRefExoticComponent<SkeletonHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export type SkeletonFooterProps = {
+    'data-id'?: string;
+    looksLike?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    width?: string;
+};
+export declare const SkeletonFooter: React.ForwardRefExoticComponent<SkeletonHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export type SkeletonBodyProps = {
     'data-id'?: string;
     lines?: number;
@@ -26,5 +32,6 @@ declare namespace Skeleton {
         'data-id'?: string | undefined;
     } & React.RefAttributes<HTMLDivElement>>;
     var Body: React.ForwardRefExoticComponent<SkeletonBodyProps & React.RefAttributes<HTMLDivElement>>;
+    var Footer: React.ForwardRefExoticComponent<SkeletonHeaderProps & React.RefAttributes<HTMLDivElement>>;
 }
 export default Skeleton;

package/types/components/Stack/Stack.d.ts

@@ -9,8 +9,5 @@ export interface StackProps extends BoxProps {
     space?: ResponsiveValue<SpacingTokenValues>;
     'data-id'?: string;
 }
-export declare function Stack(props: StackProps): JSX.Element;
-export declare namespace Stack {
-    var displayName: string;
-}
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
 export default Stack;

package/types/components/index.d.ts

@@ -18,9 +18,9 @@ export * from './DropdownMenu/DropdownMenu';
 export * from './Fieldset/Fieldset';
 export * from './FileUpload/FileUpload';
 export * from './Flex/Flex';
-export * from './GoogleInput';
 export * from './FormControl/FormControl';
 export * from './IconButton/IconButton';
+export * from './Input/InputBase';
 export * from './Input/InlineEdit/InlineEdit';
 export * from './Input/NumberInput/NumberInput';
 export * from './Input/TextInput/TextInput';

package/types/hooks/useOutsideClick.d.ts

@@ -1 +1 @@
-export declare const useOutsideClick: (ref: React.RefObject<HTMLElement>, onOutsideClick: (event: MouseEvent) => void) => void;
+export declare const useOutsideClick: (ref: React.RefObject<HTMLElement>, onOutsideClick: () => void) => void;

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/GoogleInput/GoogleInput.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="google.maps" />
-import { type ReactNode } from 'react';
-declare const PlaceResult: import("styled-components").StyledComponent<import("components/Text/Text").PolymorphicText, any, {}, never>;
-export declare const getSelectedName: (selected: google.maps.places.PlaceResult) => string | undefined;
-export type GoogleInputProps = {
-    googleApiKey: string;
-    placeholder?: string;
-    options?: google.maps.places.AutocompleteOptions;
-    libraries?: string[];
-    googleMapsScriptBaseUrl?: string;
-    debounce?: number;
-    defaultValue?: string;
-    value?: string;
-    onChange?: (value: google.maps.places.PlaceResult) => void;
-    disabled?: boolean;
-    isInvalid?: boolean;
-    id?: string;
-    'data-id'?: string;
-    label?: ReactNode;
-    boldLabel?: boolean;
-    hideLabel?: boolean;
-    labelId?: string;
-    inputId?: string;
-    tooltipContent?: React.ReactNode;
-    autoFocus?: boolean;
-};
-declare const GoogleInput: ({ googleApiKey, placeholder, options, libraries, googleMapsScriptBaseUrl, debounce, defaultValue, value, onChange, disabled, isInvalid, label, labelId, inputId, hideLabel, boldLabel, autoFocus, ...props }: GoogleInputProps) => import("react/jsx-runtime").JSX.Element;
-export default GoogleInput;
-export { GoogleInput };

package/types/components/GoogleInput/index.d.ts

@@ -1 +0,0 @@
-export * from './GoogleInput';