@theroutingcompany/components 0.0.26-alpha.18 → 0.0.26-alpha.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.26-alpha.18",
+  "version": "0.0.26-alpha.19",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -102,7 +102,7 @@
     "@types/styled-system": "^5.1.16",
     "@react-types/select": "^3.8.1",
     "@tanstack/react-table": "^8.9.1",
-    "@theroutingcompany/design-tokens": "^0.0.4-alpha.4",
+    "@theroutingcompany/design-tokens": "^0.0.4-alpha.5",
     "@styled-system/prop-types": "^5.1.2",
     "@styled-system/props": "^5.1.5",
     "csstype": "^3.1.2",

package/types/components/Avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+type AlphaUpper = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
+type AlphaLower = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z';
+type Letter = AlphaUpper | AlphaLower;
+export type AvatarSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export interface AvatarProps {
+    size?: AvatarSize;
+    color?: string;
+}
+export declare const Avatar: ({ size, letter }: {
+    size: AvatarSize;
+    color: string;
+    letter: Letter;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/types/components/Banner/Action.d.ts

@@ -0,0 +1,3 @@
+import { type PolymorphicButton } from '../ButtonV2/ButtonV2';
+declare const Action: PolymorphicButton;
+export default Action;

package/types/components/Banner/Banner.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import Action from './Action';
+declare const DEFAULT_VARIANT = "default";
+declare const INFO_VARIANT = "info";
+declare const SUCCESS_VARIANT = "success";
+declare const WARNING_VARIANT = "warning";
+declare const ERROR_VARIANT = "danger";
+export type Variant = typeof DEFAULT_VARIANT | typeof INFO_VARIANT | typeof SUCCESS_VARIANT | typeof WARNING_VARIANT | typeof ERROR_VARIANT;
+interface BannerProps extends React.ComponentPropsWithRef<'div'> {
+    'data-id'?: string;
+    title?: string;
+    variant?: Variant;
+    layout?: 'default' | 'inline';
+    onDismiss?: (any: any) => void;
+}
+export declare const Banner: import("react").ForwardRefExoticComponent<BannerProps> & {
+    Action: typeof Action;
+};
+export default Banner;

package/types/components/Banner/styles.d.ts

@@ -0,0 +1,5 @@
+import type { Variant } from "./Banner";
+export declare function dismissBase(): string;
+export declare function dismissColor(props: {
+    variant: Variant;
+}): string;

package/types/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+export declare const StyledButtonGroup: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(ToggleGroup.ToggleGroupSingleProps | ToggleGroup.ToggleGroupMultipleProps) & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export type ButtonGroupProps = Omit<ToggleGroup.ToggleGroupSingleProps, 'type' | 'style' | 'className'> & {
+    size?: 'small' | 'large';
+};
+export declare const ButtonGroup: {
+    ({ children, size, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+    Item: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+};

package/types/components/ButtonV2/ButtonV2.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { type ClickHandler, type FocusHandler } from 'helpers';
+import { type BoxProps } from 'components/Box/Box';
+import { type ClickHandler, type FocusHandler, type ForwardRefComponent } from 'helpers';
 export type Variant = 'primary' | 'secondary' | 'tertiary' | 'danger';
 export type Size = 'small' | 'large';
 export declare const buttonV2System: import("styled-system").styleFn;
-export declare const StyledButtonBox: import("styled-components").StyledComponent<import("helpers").ForwardRefComponent<"div", import("components/Box/Box").BoxProps>, any, any, never>;
-export interface ButtonPropsV2 {
+export declare const StyledButtonBox: import("styled-components").StyledComponent<ForwardRefComponent<"div", BoxProps>, any, any, never>;
+export interface ButtonPropsV2 extends BoxProps {
     'data-id'?: string;
     as?: React.ElementType;
     to?: string;
@@ -13,7 +14,6 @@ export interface ButtonPropsV2 {
     inverse?: boolean;
     disabled?: boolean;
     size?: Size;
-    fullWidth?: boolean;
     submit?: boolean;
     children?: React.ReactNode;
     className?: string;
@@ -21,5 +21,6 @@ export interface ButtonPropsV2 {
     onFocus?: FocusHandler;
     onBlur?: FocusHandler;
 }
+export type PolymorphicButton = ForwardRefComponent<'button', ButtonPropsV2>;
 export declare const ButtonV2: import("react").ForwardRefExoticComponent<ButtonPropsV2 & import("react").RefAttributes<HTMLButtonElement>>;
 export default ButtonV2;

package/types/components/ButtonV2/styles.d.ts

@@ -8,9 +8,6 @@ export declare const childwrapper: (props: LoadingProp) => string;
 export declare const disabled: (props: {
     disabled: boolean;
 }) => "\n      opacity: 0.8;\n\n      &:hover {\n        cursor: not-allowed;\n      }\n    " | undefined;
-export declare const fullWidth: (props: {
-    fullWidth: boolean;
-}) => "\n      display: block;\n      width: 100%;\n    " | undefined;
 export declare const group: () => string;
 export declare const primary: import("styled-components").FlattenSimpleInterpolation;
 export declare const inverse_primary: import("styled-components").FlattenSimpleInterpolation;

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

@@ -6,6 +6,7 @@ type CalendarCellProps = {
     currentMonth: CalendarDate;
     disabled?: boolean | undefined;
     today: CalendarDate;
+    single?: boolean;
 };
-export declare function CalendarCell({ state, date, today, disabled, currentMonth, }: CalendarCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function CalendarCell({ state, date, today, disabled, currentMonth, single, }: CalendarCellProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,6 +4,7 @@ interface CalendarGridProps<T> {
     state: T;
     offset?: DateDuration;
     timeZone: string;
+    single?: boolean;
 }
 export declare function CalendarGrid<T extends CalendarState | RangeCalendarState>({ state, ...props }: CalendarGridProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
-import type { DOMAttributes } from 'react';
 import type { AriaButtonProps } from '@react-aria/button';
 import type { RangeCalendarState } from '@react-stately/calendar';
+import type { DOMAttributes } from 'react';
 export declare function CalendarHeader({ state, calendarProps, prevButtonProps, nextButtonProps, }: {
     state: RangeCalendarState;
     calendarProps: DOMAttributes<any>;

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

@@ -3,8 +3,9 @@ import React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { type TODOFIXME } from 'helpers';
 export interface TimeDateSelectProps {
-    onTimeChange?: TODOFIXME;
-    onDateChange?: TODOFIXME;
+    dateString: string;
+    timeZone: string;
+    onChange?: (date: TODOFIXME) => void;
 }
 export declare const TimeDateSelect: React.ForwardRefExoticComponent<TimeDateSelectProps & React.RefAttributes<HTMLDivElement>>;
 export interface TimeDateSelectItemProps extends SelectPrimitive.SelectItemProps {

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

@@ -64,11 +64,7 @@ export declare const TextAreaFormControl: import("react").ForwardRefExoticCompon
     excludeFromTabOrder?: boolean | undefined;
     validationState?: import("@react-types/shared").ValidationState | undefined;
     errorMessage?: ReactNode;
-} & {
-    borderRadius?: import("components/Input/InputBase").InputRadius | undefined;
-    paddingSize?: import("components/Input/InputBase").InputSize | undefined;
-    height?: string | number | undefined;
-} & import("components/Input/InputBase").FullWidth & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & import("components/Input/InputBase").InputBaseProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export declare const NumberFormControl: import("react").ForwardRefExoticComponent<{
     tooltipContent?: string | undefined;
     tooltipIcon?: ReactNode;
@@ -77,11 +73,7 @@ export declare const NumberFormControl: import("react").ForwardRefExoticComponen
 } & Omit<import("../../helpers/typeHelpers").RenameBooleanProps<import("@react-types/numberfield").AriaNumberFieldProps>, "minValue" | "maxValue"> & {
     min?: number | undefined;
     max?: number | undefined;
-} & {
-    borderRadius?: import("components/Input/InputBase").InputRadius | undefined;
-    paddingSize?: import("components/Input/InputBase").InputSize | undefined;
-    height?: string | number | undefined;
-} & import("components/Input/InputBase").FullWidth & {
+} & import("components/Input/InputBase").InputBaseProps & {
     name?: string | undefined;
 } & {
     showStepper?: boolean | undefined;

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

@@ -1,24 +1,21 @@
+import { type ButtonPropsV2 } from 'components/ButtonV2/ButtonV2';
 import { type TODOFIXME } from 'helpers';
 import type { ReactNode } from 'react';
 export declare const EditButtonRight: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("components/Button/Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
-type TextAlign = 'left' | 'center';
-export interface InlineEditProps {
+export interface InlineEditProps extends ButtonPropsV2 {
     'data-id'?: string;
     children: ReactNode;
     value?: number | string;
     editValue?: number | string;
     placeholder?: string;
-    fullWidth?: boolean;
-    minWidth?: string;
-    textAlign?: TextAlign;
     hideIcon?: boolean;
     p?: string;
     onChange: TODOFIXME;
     onToggle: TODOFIXME;
     disabled?: boolean;
+    valid?: boolean;
 }
 export declare const InlineEdit: {
-    ({ children, placeholder, value, editValue, minWidth, hideIcon, fullWidth, textAlign, p, onChange, onToggle, disabled, ...rest }: InlineEditProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, placeholder, value, editValue, hideIcon, p, onChange, onToggle, disabled, valid, ...rest }: InlineEditProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export {};

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

@@ -1,20 +1,13 @@
 import tokens from '@theroutingcompany/design-tokens';
 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 FullWidth = {
-    fullWidth?: true;
-};
 export type InputBaseProps = {
     borderRadius?: InputRadius;
     paddingSize?: InputSize;
     height?: number | string;
-} & FullWidth;
-export declare const InputBase: import("styled-components").StyledComponent<"input", any, {
-    borderRadius?: InputRadius | undefined;
-    paddingSize?: InputSize | undefined;
-    height?: string | number | undefined;
-} & FullWidth, never>;
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, FullWidth, never>;
+};
+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>;

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

@@ -2,7 +2,7 @@
 import { type AriaNumberFieldProps } from '@react-aria/numberfield';
 import { type NumberFieldStateOptions } from '@react-stately/numberfield';
 import type { ComponentPropsWithoutStyles, RenameBooleanProps, RenameMissuffixedProps } from '../../../helpers/typeHelpers';
-import { type FullWidth, type InputBaseProps } from '../InputBase';
+import { type InputBaseProps } from '../InputBase';
 type ReactAriaNumberInputProps = RenameMissuffixedProps<RenameBooleanProps<AriaNumberFieldProps>, 'Value', 'minValue' | 'maxValue'>;
 type ShowStepper = {
     showStepper?: boolean;
@@ -35,11 +35,7 @@ export type NumberInputProps = ReactAriaNumberInputProps & InputBaseProps & Stan
 export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<RenameBooleanProps<AriaNumberFieldProps>, "minValue" | "maxValue"> & {
     min?: number | undefined;
     max?: number | undefined;
-} & {
-    borderRadius?: import("../InputBase").InputRadius | undefined;
-    paddingSize?: import("../InputBase").InputSize | undefined;
-    height?: string | number | undefined;
-} & FullWidth & StandardInputProps & ShowStepper & {
+} & InputBaseProps & StandardInputProps & ShowStepper & {
     locale?: string | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -4,9 +4,5 @@ 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 & {
-    borderRadius?: import("../InputBase").InputRadius | undefined;
-    paddingSize?: import("../InputBase").InputSize | undefined;
-    height?: string | number | undefined;
-} & import("../InputBase").FullWidth & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const TextAreaInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

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

@@ -5,7 +5,6 @@ import { type InputBaseProps, type InputRadius } from '../InputBase';
 type ReactAriaInputProps = Omit<RenameBooleanProps<AriaTextFieldOptions<'input'>>, 'inputElementType'>;
 interface CustomTextInputProps {
     focus?: boolean;
-    fullWidth?: boolean;
     height?: number | string;
     inputBorderRadius?: InputRadius;
     connectLeft?: React.ReactNode | null;
@@ -13,9 +12,5 @@ interface CustomTextInputProps {
     className?: string;
 }
 export type TextInputProps = ReactAriaInputProps & InputBaseProps & CustomTextInputProps;
-export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & {
-    borderRadius?: InputRadius | undefined;
-    paddingSize?: import("../InputBase").InputSize | undefined;
-    height?: string | number | undefined;
-} & import("../InputBase").FullWidth & CustomTextInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & CustomTextInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/types/components/Label/Label.d.ts

@@ -8,5 +8,6 @@ export interface LabelProps extends ComponentPropsWithoutStyles<'label'> {
     display?: 'flex' | 'inline-flex' | 'inline' | 'block' | undefined;
     children: ReactNode;
     as?: 'legend' | 'span' | undefined;
+    style?: Record<string, any>;
 }
-export declare function Label({ children, bold, size, display, srOnly, ...remainingProps }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function Label({ children, bold, size, display, srOnly, style, ...remainingProps }: LabelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,6 +6,7 @@ export type StackProps = {
     children?: React.ReactNode;
     align?: ResponsiveValue<AlignX>;
     space?: ResponsiveValue<SpacingTokenValues>;
+    addLastSpace?: boolean;
     'data-id'?: string;
 };
 export declare function Stack(props: StackProps): JSX.Element;

package/types/components/Title/Title.d.ts

@@ -2,6 +2,9 @@ import type * as Polymorphic from '@radix-ui/react-polymorphic';
 export interface TitleProps {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'legend' | 'figcaption';
     size: 'small' | 'medium' | 'large' | 'xsmall';
+    weight?: 'light' | 'regular' | 'medium' | 'bold';
+    marginBottom?: string;
+    mb?: string;
 }
 export type PolymorphicTitle = Polymorphic.ForwardRefComponent<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', TitleProps>;
 export declare const Title: PolymorphicTitle;

package/types/components/index.d.ts

@@ -16,7 +16,6 @@ export * from './Fieldset/Fieldset';
 export * from './FileUpload/FileUpload';
 export * from './Flex/Flex';
 export * from './FormControl/FormControl';
-export * from './Heading/Heading';
 export * from './Input/NumberInput/NumberInput';
 export * from './Input/TextInput/TextInput';
 export * from './Input/InlineEdit/InlineEdit';

package/types/styles/index.d.ts

@@ -1,2 +1 @@
 export declare const buttonReset = "\n  border: none;\n  margin: 0;\n  padding: 0;\n  overflow: visible;\n  width: auto;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: normal;\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n  -webkit-appearance: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n    padding: 0;\n  }\n";
-export declare const visuallyHidden = "\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  word-wrap: normal !important;\n";

package/types/components/Heading/Heading.d.ts

@@ -1,10 +0,0 @@
-import type * as Polymorphic from '@radix-ui/react-polymorphic';
-type HeadingProps = {
-    size: 'small' | 'medium' | 'large';
-    className: never;
-    style: never;
-};
-type PolymorphicHeading = Polymorphic.ForwardRefComponent<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', // more? span? div?
-HeadingProps>;
-export declare const Heading: PolymorphicHeading;
-export {};

package/types/components/SegmentControl/SegmentControl.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import * as ToggleGroup from '@radix-ui/react-toggle-group';
-export declare const StyledSegmentControlRoot: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(ToggleGroup.ToggleGroupSingleProps | ToggleGroup.ToggleGroupMultipleProps) & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export type SegmentControlRootProps = Omit<ToggleGroup.ToggleGroupSingleProps, 'type' | 'style' | 'className'> & {
-    size?: 'small' | 'large';
-};
-export declare const SegmentControlRoot: ({ children, size, ...props }: SegmentControlRootProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SegmentControlItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;