@theroutingcompany/components 0.0.99-alpha.8 → 0.0.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.99-alpha.8",
+  "version": "0.0.99",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -77,7 +77,7 @@
     "@react-aria/listbox": "^3.9.1",
     "@react-aria/menu": "^3.9.1",
     "@react-aria/numberfield": "^3.5.1",
-    "@react-aria/overlays": "^3.14.1",
+    "@react-aria/overlays": "^3.23.1",
     "@react-aria/progress": "^3.4.2",
     "@react-aria/radio": "^3.6.1",
     "@react-aria/searchfield": "^3.5.2",
@@ -107,7 +107,7 @@
     "@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.14",
     "@types/styled-system": "^5.1.16",
     "csstype": "^3.1.2",
     "react-focus-lock": "^2.9.4",
@@ -115,7 +115,8 @@
     "react-scrolllock": "^5.0.1",
     "react-transition-group": "^4.4.5",
     "styled-components": "^5.3.9",
-    "styled-system": "^5.1.5"
+    "styled-system": "^5.1.5",
+    "usehooks-ts": "^3.1.0"
   },
   "peerDependencies": {
     "@material-ui/icons": "^4.11.3",

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

@@ -1,6 +1,6 @@
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { AccordionItemProps } from '@radix-ui/react-accordion';
-import { CSSProperties, type ReactNode } from 'react';
+import { type AccordionItemProps } from '@radix-ui/react-accordion';
+import { type CSSProperties, type ReactNode } from 'react';
 export declare const SectionTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
 export interface SectionHeaderProps extends AccordionPrimitive.AccordionHeaderProps {
     children: ReactNode;
@@ -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/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;
@@ -91,5 +91,8 @@ export declare const NumberFormControl: import("react").ForwardRefExoticComponen
     locale?: string | undefined;
     errorMessage?: ReactNode;
     required?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    boldLabel?: boolean | undefined;
+    tooltipContent?: string | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -5,7 +5,7 @@ export declare const getSelectedName: (selected: google.maps.places.PlaceResult)
 export type GoogleInputProps = {
     googleApiKey: string;
     placeholder?: string;
-    options?: google.maps.places.AutocompleteOptions;
+    options?: Omit<google.maps.places.AutocompletionRequest, 'input'>;
     libraries?: string[];
     googleMapsScriptBaseUrl?: string;
     debounce?: number;
@@ -23,7 +23,14 @@ export type GoogleInputProps = {
     inputId?: string;
     tooltipContent?: React.ReactNode;
     autoFocus?: boolean;
+    errorMessage?: string;
+    extraMenuActions?: {
+        label: ReactNode;
+        id: string;
+        onClick: () => void;
+    }[];
+    showExtraActionsWithResults?: 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;
+declare const GoogleInput: ({ googleApiKey, placeholder, options, libraries, googleMapsScriptBaseUrl, debounce, defaultValue, value, onChange, disabled, isInvalid, label, labelId, inputId, hideLabel, boldLabel, autoFocus, extraMenuActions, showExtraActionsWithResults, ...props }: GoogleInputProps) => import("react/jsx-runtime").JSX.Element;
 export default GoogleInput;
 export { GoogleInput };

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,9 @@ export type NumberInputProps = ReactAriaNumberInputProps & InputBaseProps & Stan
     locale?: NumberFieldStateOptions['locale'];
     errorMessage?: ReactNode;
     required?: boolean;
+    isInvalid?: boolean;
+    boldLabel?: boolean;
+    tooltipContent?: string;
 };
 /**
  * Use cases
@@ -41,6 +44,9 @@ export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit
     locale?: string | undefined;
     errorMessage?: ReactNode;
     required?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    boldLabel?: boolean | undefined;
+    tooltipContent?: string | 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

@@ -13,6 +13,7 @@ interface TimeInputProps {
     defaultValue?: Time | null;
     value?: Time | null;
     onChange?: (newValue: Time) => void;
+    placeholder?: string;
     hourCycle?: '12' | '24' | '';
     interval?: number;
     errorMessage?: string;
@@ -20,4 +21,4 @@ interface TimeInputProps {
     isDisabled?: boolean;
     hideIcon?: boolean;
 }
-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, placeholder, isInvalid, isDisabled, ...props }: TimeInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,8 @@
 import type { AriaSelectProps } from '@react-types/select';
 import type { CollectionChildren } from '@react-types/shared';
 import * as React from 'react';
+export { Item as SingleSelectItem, Section as SingleSelectSection } from '@react-stately/collections';
 export { CollectionChildren as SingleSelectChildren };
-export { Item as SingleSelectItem, Section as SingleSelectSection, } from '@react-stately/collections';
 type SingleSelectProps<T> = Omit<AriaSelectProps<T>, 'children'> & {
     placeholder?: string;
     tooltipIcon?: string;

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

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

@@ -1,3 +1,3 @@
 export * from './useWindowEvent';
-export * from './useOutsideClick';
+export * from './useOnEscapeKey';
 export * from './usePrevious';

package/types/hooks/useOnEscapeKey.d.ts

@@ -0,0 +1,2 @@
+declare const useOnEscapeKey: (handler: () => void) => void;
+export default useOnEscapeKey;

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

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