@theroutingcompany/components 0.0.1

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@theroutingcompany/components",
+  "version": "0.0.1",
+  "description": "The Routing Company Components",
+  "main": "./dist/trc-components.umd.js",
+  "module": "./dist/trc-components.es.js",
+  "engines": {
+    "node": ">= 17.4.0",
+    "npm": ">= 8.3.1"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/trc-components.es.js",
+      "require": "./dist/trc-components.umd.js"
+    }
+  },
+  "types": "./types/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "types"
+  ],
+  "scripts": {
+    "prebuild": "npm run clean",
+    "format": "prettier ./dist/**/*.{js,css,scss} --write --no-config",
+    "clean": "rimraf ./dist ./types",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint:css": "stylelint components/**/*.{tsx,ts}",
+    "build:types": "tsc",
+    "build:components": "vite build",
+    "build": "npm run clean && npm run build:components && npm run build:types",
+    "chromatic": "npx chromatic --project-token=df154c51409f"
+  },
+  "sideEffects": false,
+  "license": "ISC",
+  "dependencies": {
+    "@material-ui/icons": "^4.11.3",
+    "@radix-ui/react-accessible-icon": "^1.0.1",
+    "@radix-ui/react-alert-dialog": "^1.0.2",
+    "@radix-ui/react-checkbox": "^1.0.1",
+    "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-polymorphic": "^0.0.14",
+    "@radix-ui/react-popover": "^1.0.2",
+    "@radix-ui/react-radio-group": "^1.1.0",
+    "@radix-ui/react-select": "^1.1.2",
+    "@radix-ui/react-separator": "^1.0.1",
+    "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-toast": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.0.1",
+    "@radix-ui/react-tooltip": "^1.0.2",
+    "@react-aria/breadcrumbs": "^3.4.1",
+    "@react-aria/button": "^3.6.4",
+    "@react-aria/focus": "^3.10.1",
+    "@react-aria/label": "^3.4.4",
+    "@react-aria/numberfield": "^3.3.4",
+    "@react-aria/radio": "^3.4.2",
+    "@react-aria/textfield": "^3.8.1",
+    "@react-aria/utils": "^3.14.2",
+    "@react-stately/numberfield": "^3.3.1",
+    "@react-stately/radio": "^3.6.2",
+    "@tanstack/react-table": "^8.7.4",
+    "@theroutingcompany/design-tokens": "^0.0.1",
+    "flag-icons": "^6.6.6",
+    "lodash.kebabcase": "^4.1.1",
+    "styled-components": "^5.3.6",
+    "styled-system": "^5.1.5",
+    "system-props": "^0.22.0"
+  },
+  "peerDependencies": {
+    "@material-ui/icons": "^4.11.3",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "styled-components": "^5.3.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@material-ui/core": "^4.12.4",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "@storybook/addon-a11y": "^7.0.0-beta.2",
+    "@storybook/addon-actions": "^7.0.0-beta.2",
+    "@storybook/addon-essentials": "^7.0.0-beta.2",
+    "@storybook/addon-interactions": "^7.0.0-beta.2",
+    "@storybook/addon-links": "^7.0.0-beta.2",
+    "@storybook/react": "^7.0.0-beta.2",
+    "@storybook/react-vite": "^7.0.0-beta.2",
+    "@storybook/testing-library": "^0.0.14-next.0",
+    "@styled-system/prop-types": "^5.1.5",
+    "@types/lodash.kebabcase": "^4.1.7",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "@types/react-dom": "^17.0.0 || ^18.0.0",
+    "@types/react-is": "^17.0.0 || ^18.0.0",
+    "@vitejs/plugin-react": "^2.2.0",
+    "chromatic": "^6.11.4",
+    "csstype": "^3.1.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-is": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "rimraf": "^3.0.2",
+    "storybook": "^7.0.0-beta.13",
+    "stylelint": "^14.15.0",
+    "type-fest": "^3.4.0",
+    "typescript": "^4.9.4",
+    "vite": "^3.2.4",
+    "vite-tsconfig-paths": "^3.6.0"
+  }
+}

package/types/components/AccessibleIcon/AccessibleIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as AccessibleIconPrimitive from '@radix-ui/react-accessible-icon';
+export declare function AccessibleIcon({ children, label, }: AccessibleIconPrimitive.AccessibleIconProps): JSX.Element;

package/types/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import type { ComponentPropsWithRef } from 'react';
+import { dialogWidths } from 'components/Dialog/Dialog';
+type DialogWidth = keyof typeof dialogWidths;
+type StyledContentProps = {
+    size?: DialogWidth;
+};
+export type AlertDialogContentProps = StyledContentProps & AlertDialogPrimitive.DialogContentProps & ComponentPropsWithRef<'div'>;
+export declare function AlertDialogContent({ children, size, ...props }: AlertDialogContentProps): JSX.Element;
+export declare const AlertDialogTitle: any;
+export declare const AlertDialogDescription: any;
+export declare const AlertDialogFooter: any;
+export declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/types/components/Box/Box.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { ForwardRefComponent } from '@radix-ui/react-polymorphic';
+import type { BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps, ResponsiveValue } from 'styled-system';
+export interface BoxProps extends BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, Omit<PositionProps, 'zIndex'>, // Override because styled-system by default only allows numbers here
+ShadowProps, SpaceProps, TypographyProps {
+    truncate?: boolean;
+    children?: ReactNode;
+    zIndex?: ResponsiveValue<string | number>;
+}
+type PolymorphicBox = ForwardRefComponent<'div', BoxProps>;
+export declare const Box: PolymorphicBox;
+export {};

package/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { type AriaBreadcrumbItemProps, type AriaBreadcrumbsProps } from '@react-aria/breadcrumbs';
+import type { ComponentPropsWithoutStyles, RenameMisprefixedProps } from 'helpers/typeHelpers';
+export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<AriaBreadcrumbsProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLOListElement>>;
+export type BreadcrumbItemProps = RenameMisprefixedProps<AriaBreadcrumbItemProps, 'is', 'isDisabled'> & ComponentPropsWithoutStyles<'a'> & {
+    as?: string;
+    navigate?: any;
+};
+export declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<Omit<AriaBreadcrumbItemProps, "isDisabled"> & {
+    disabled?: boolean;
+} & ComponentPropsWithoutStyles<"a"> & {
+    as?: string;
+    navigate?: any;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/types/components/Button/Button.d.ts

@@ -0,0 +1,55 @@
+import { type ComponentPropsWithRef, type PropsWithChildren } from 'react';
+import { type AriaButtonProps } from '@react-aria/button';
+import type { RenameMisprefixedProps } from 'helpers';
+type Variant = 'primary' | 'secondary' | 'danger' | 'inverse';
+type Size = 'small' | 'large';
+type ButtonDesignProps = {
+    emphasis?: 'low';
+    variant?: 'primary' | 'danger' | 'inverse';
+    size?: Size;
+} | {
+    emphasis?: 'medium';
+    variant?: 'primary' | 'danger' | 'inverse';
+    size?: Size;
+} | {
+    emphasis?: 'high';
+    variant?: Variant;
+    size?: Size;
+};
+export type ButtonBaseProps = {
+    paddingSize: Size;
+};
+type ReactAriaProps = RenameMisprefixedProps<AriaButtonProps, 'is', 'isDisabled'>;
+export type ButtonProps = PropsWithChildren<ButtonDesignProps> & ComponentPropsWithRef<'button'> & ReactAriaProps;
+export declare const Button: import("react").ForwardRefExoticComponent<(Pick<{
+    emphasis?: 'low';
+    variant?: 'primary' | 'danger' | 'inverse';
+    size?: Size;
+} & {
+    children?: import("react").ReactNode;
+} & Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+} & Omit<AriaButtonProps<"button">, "isDisabled"> & {
+    disabled?: boolean;
+}, "key" | "size" | "onFocusChange" | "elementType" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "href" | "rel" | "target" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "excludeFromTabOrder" | "emphasis" | "variant"> | Pick<{
+    emphasis?: 'medium';
+    variant?: 'primary' | 'danger' | 'inverse';
+    size?: Size;
+} & {
+    children?: import("react").ReactNode;
+} & Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+} & Omit<AriaButtonProps<"button">, "isDisabled"> & {
+    disabled?: boolean;
+}, "key" | "size" | "onFocusChange" | "elementType" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "href" | "rel" | "target" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "excludeFromTabOrder" | "emphasis" | "variant"> | Pick<{
+    emphasis?: 'high';
+    variant?: Variant;
+    size?: Size;
+} & {
+    children?: import("react").ReactNode;
+} & Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+} & Omit<AriaButtonProps<"button">, "isDisabled"> & {
+    disabled?: boolean;
+}, "key" | "size" | "onFocusChange" | "elementType" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "href" | "rel" | "target" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "excludeFromTabOrder" | "emphasis" | "variant">) & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/types/components/Button/ButtonBase.d.ts

@@ -0,0 +1 @@
+export declare const ButtonBase: any;

package/types/components/Button/HighEmphasisButton/HighEmphasisButton.d.ts

@@ -0,0 +1,6 @@
+export declare const highEmphasisButtons: {
+    readonly primary: any;
+    readonly secondary: any;
+    readonly danger: any;
+    readonly inverse: any;
+};

package/types/components/Button/LowEmphasisButton/LowEmphasisButton.d.ts

@@ -0,0 +1,5 @@
+export declare const lowEmphasisButtons: {
+    readonly primary: any;
+    readonly danger: any;
+    readonly inverse: any;
+};

package/types/components/Button/MediumEmphasisButton/MediumEmphasisButton.d.ts

@@ -0,0 +1,5 @@
+export declare const mediumEmphasisButtons: {
+    readonly primary: any;
+    readonly danger: any;
+    readonly inverse: any;
+};

package/types/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+export type CheckedState = CheckboxPrimitive.CheckedState;
+export type CheckboxProps = CheckboxPrimitive.CheckboxProps & {
+    invalid?: boolean;
+};
+export declare function Checkbox({ disabled, checked, invalid, ...props }: CheckboxProps): JSX.Element;

package/types/components/Dialog/Dialog.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import type { ComponentPropsWithRef } from 'react';
+export declare const overlayShow: any;
+export declare const contentShow: any;
+export declare const dialogWidths: {
+    readonly small: "360px";
+    readonly medium: "540px";
+    readonly large: "960px";
+};
+type DialogWidth = keyof typeof dialogWidths;
+type StyledContentProps = {
+    size?: DialogWidth;
+};
+export type DialogContentProps = StyledContentProps & DialogPrimitive.DialogContentProps & ComponentPropsWithRef<'div'>;
+export declare function DialogContent({ children, size, ...props }: DialogContentProps): JSX.Element;
+export declare const DialogTitle: any;
+export declare const DialogDescription: any;
+export declare const DialogFooter: any;
+export declare const DialogCloseButton: any;
+export declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+export declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/types/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ComponentPropsWithoutStyles } from 'helpers/typeHelpers';
+export declare const StyledFieldSet: any;
+/** Adding disabled to <fieldset> will disable all inputs inside it HTML wise,
+ *  the problem is that React won't know about that they the input components are disabled (prop-wise)
+ * This 'compound component' makes it known to child input components via React context (for example for react-aria input hooks)
+ */
+export declare function Fieldset({ children, disabled, ...fieldsetProps }: ComponentPropsWithoutStyles<'fieldset'>): JSX.Element;
+export declare function useFieldset(): boolean;

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

@@ -0,0 +1,19 @@
+import { type PropsWithChildren, type ReactNode } from 'react';
+import { type AriaFieldProps } from '@react-aria/label';
+import type { ComponentPropsWithoutStyles, InputValidationProps } from 'helpers/typeHelpers';
+import { type NumberInputProps } from 'components/Input/NumberInput/NumberInput';
+import { type TextAreaInputProps } from 'components/Input/TextArea/TextArea';
+type FormControlProps = PropsWithChildren<{
+    tooltipContent?: string;
+    tooltipIcon?: ReactNode;
+} & AriaFieldProps>;
+/** If in a `<FormControl/>`, read `fieldProps` generated by that FormControl's `useField` hook  */
+export declare function useFieldProps(): import("@react-types/shared").AriaLabelingProps & import("@react-types/shared").DOMProps;
+export declare function FormControl({ children, label, errorMessage, description, tooltipContent, tooltipIcon, validationState, id, ...props }: FormControlProps): JSX.Element;
+type TextFormControlProps = FormControlProps & InputValidationProps & ComponentPropsWithoutStyles<'input'>;
+export declare const TextFormControl: import("react").ForwardRefExoticComponent<TextFormControlProps & import("react").RefAttributes<HTMLInputElement>>;
+type TextAreaFormControlProps = FormControlProps & InputValidationProps & ComponentPropsWithoutStyles<'textarea'> & TextAreaInputProps;
+export declare const TextAreaFormControl: import("react").ForwardRefExoticComponent<TextAreaFormControlProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+type NumberFormControlProps = FormControlProps & NumberInputProps;
+export declare const NumberFormControl: import("react").ForwardRefExoticComponent<NumberFormControlProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,9 @@
+/** Returns the right field props when the input component is used inside a `<FormField>`. Also ensures a `disabled`  */
+export declare function useFormInput(disabled?: boolean): {
+    disabled: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-details'?: string;
+    id?: string;
+};

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

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

@@ -0,0 +1,21 @@
+import { AriaButtonProps } from '@react-aria/button';
+import { type ComponentPropsWithRef } from 'react';
+type Size = 'small' | 'large';
+type Variant = 'primary' | 'secondary' | 'danger' | 'inverse';
+type Shape = 'circle' | 'square';
+export type StyledIconButtonProps = ComponentPropsWithRef<'button'> & AriaButtonProps & {
+    label: string;
+    size?: Size;
+    variant?: Variant;
+    shape?: Shape;
+    disabled?: boolean;
+};
+/** Be sure to add add a `label`.
+ * ```jsx
+ * <IconButton label="Add new item">
+ *   <AddIcon/>
+ * </IconButton>
+ *
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<Pick<StyledIconButtonProps, "form" | "label" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "isDisabled" | "autoFocus" | "onFocusChange" | "value" | "disabled" | "elementType" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "href" | "rel" | "target" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "excludeFromTabOrder" | "variant" | "shape"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+export type InputSize = 'small' | 'large';
+export type InputBaseProps = {
+    paddingSize?: InputSize;
+};
+export declare const InputBase: any;
+export declare const InputWrapper: any;
+export declare const InputErrorMessage: any;
+export declare const InputDescription: any;
+export declare const EndIconWrapper: any;

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { type AriaNumberFieldProps } from '@react-aria/numberfield';
+import type { ComponentPropsWithoutStyles, InputValidationProps, RenameBooleanProps, RenameMissuffixedProps } from 'helpers/typeHelpers';
+import { type InputBaseProps } from '../InputBase';
+type ReactAriaNumberInputProps = Omit<RenameBooleanProps<AriaNumberFieldProps>, 'minValue' | 'maxValue'> & RenameMissuffixedProps<AriaNumberFieldProps, 'Value', 'minValue' | 'maxValue'>;
+type ShowStepper = {
+    showStepper?: boolean;
+};
+export type NumberInputProps = Pick<ComponentPropsWithoutStyles<'input'>, 'name'> & ReactAriaNumberInputProps & InputBaseProps & InputValidationProps & ShowStepper;
+/**
+ * Use cases
+ *
+ * 1. With custom Label element as prop
+ * ```jsx
+ * <NumberInput label={<Label>Label text</Label>} />
+ * ```
+ *
+ * 2. With string label as prop
+ * ```jsx
+ * <NumberInput label="Label text" />
+ * ```
+ *
+ * 3. Wrapped by `<label>`
+ * ```jsx
+ * <label>
+ *   Label text
+ *   <NumberInput />
+ * </label>
+ * ```
+ */
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,8 @@
+/// <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;
+export declare const TextAreaInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { type AriaTextFieldOptions } from '@react-aria/textfield';
+import type { ComponentPropsWithoutStyles, RenameBooleanProps } from 'helpers/typeHelpers';
+import { type InputBaseProps } from '../InputBase';
+type ReactAriaInputProps = Omit<RenameBooleanProps<AriaTextFieldOptions<'input'>>, 'inputElementType'>;
+export type TextInputProps = ReactAriaInputProps & InputBaseProps & ComponentPropsWithoutStyles<'input'>;
+/**
+ * 1. With custom label element as prop
+ * ```jsx
+ * <TextInput label={<Label>Label text</Label>} />
+ * ```
+ *
+ * 2. With string label as prop
+ * ```jsx
+ * <TextInput label="Label text" />
+ * ```
+ *
+ * 3. Wrapped by <label>
+ * ```jsx
+ * <label>
+ *   Label text
+ *   <TextInput />
+ * </label>
+ * ```
+ */
+export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & ComponentPropsWithoutStyles<"input"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ComponentPropsWithoutStyles } from 'helpers/typeHelpers';
+interface LabelProps extends ComponentPropsWithoutStyles<'label'> {
+    size?: 'small' | 'medium' | 'large';
+    bold?: boolean;
+    display?: 'flex' | 'inline-flex' | 'inline' | 'black';
+}
+export declare function Label({ children, bold, size, display, ...labelProps }: LabelProps): JSX.Element;
+export {};

package/types/components/Page/Page.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from 'react';
+export declare function Page({ children }: {
+    children: ReactNode;
+}): JSX.Element;

package/types/components/Popover/Popover.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare function Content({ children, ...props }: PopoverPrimitive.PopoverContentProps): JSX.Element;
+export declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const PopoverContent: typeof Content;
+export declare const PopoverClose: any;
+export {};

package/types/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+export declare function RadioGroup({ children, disabled, ...props }: RadioGroupPrimitive.RadioGroupProps): JSX.Element;
+export declare const RadioGroupRadio: any;
+export declare const RadioGroupIndicator: any;
+export declare function Radio({ disabled, ...props }: RadioGroupPrimitive.RadioGroupItemProps): JSX.Element;

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

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

package/types/components/Select/Select.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+export declare const StyledTrigger: any;
+declare function Content({ children, ...props }: SelectPrimitive.SelectContentProps): JSX.Element;
+export declare const Select: React.FC<SelectPrimitive.SelectProps>;
+export declare const SelectTrigger: any;
+export declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectIcon: any;
+export declare const SelectContent: typeof Content;
+export declare const SelectViewport: any;
+export declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: any;
+export declare const SelectItemText: React.ForwardRefExoticComponent<SelectPrimitive.SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectItemIndicator: any;
+export declare const SelectGroupLabel: any;
+export declare const SelectSeparator: any;
+export declare const SelectScrollUpButton: any;
+export declare const SelectScrollDownButton: any;
+type SingleSelectProps = {
+    items: string[];
+} & SelectPrimitive.SelectProps;
+export declare function SingleSelect({ items, ...selectProps }: SingleSelectProps): JSX.Element;
+export {};

package/types/components/Switch/Switch.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+export type { SwitchProps } from '@radix-ui/react-switch';
+export declare function Switch({ disabled, ...props }: SwitchPrimitive.SwitchProps): JSX.Element;

package/types/components/Text/Text.d.ts

@@ -0,0 +1,39 @@
+import type * as Polymorphic from '@radix-ui/react-polymorphic';
+import { type ComponentPropsWithoutRef } from 'react';
+type TextElements = 'p' | 'div' | 'span' | 'legend' | 'caption' | 'figcaption' | 'strong' | 'em' | 'strong' | 'abbr' | 'mark' | 'q' | 'small' | 'time';
+interface BodyTextProps extends ComponentPropsWithoutRef<'p'> {
+    type: 'body';
+    size?: 'small' | 'medium' | 'large';
+    bold?: boolean;
+    as?: TextElements;
+}
+interface NumberTextProps extends ComponentPropsWithoutRef<'p'> {
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
+    bold?: boolean;
+    type: 'number';
+    as?: TextElements;
+}
+interface CaptionTextProps extends ComponentPropsWithoutRef<'p'> {
+    size?: 'small' | 'medium';
+    bold?: boolean;
+    type: 'caption';
+    as?: TextElements;
+}
+type NormalVariant = 'standard' | 'strong' | 'weak';
+type SentimentVariant = 'positive' | 'negative' | 'notice' | 'neutral';
+type NormalTextColorProps = {
+    textType?: 'normal';
+    variant?: NormalVariant;
+};
+type SentimentTextColorProps = {
+    textType?: 'sentiment';
+    variant?: SentimentVariant;
+};
+type TextColorProps = NormalTextColorProps | SentimentTextColorProps;
+export type TextProps = TextColorProps & Partial<NumberTextProps | CaptionTextProps | BodyTextProps> & {
+    bold?: boolean;
+    as?: TextElements;
+};
+type PolymorphicText = Polymorphic.ForwardRefComponent<TextElements, TextProps>;
+export declare const Text: PolymorphicText;
+export {};

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

@@ -0,0 +1,9 @@
+import type * as Polymorphic from '@radix-ui/react-polymorphic';
+interface TitleProps {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'legend';
+    size: 'small' | 'medium' | 'large' | 'xsmall';
+}
+type PolymorphicTitle = Polymorphic.ForwardRefComponent<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', // more? span? div?
+TitleProps>;
+export declare const Title: PolymorphicTitle;
+export {};

package/types/components/Toast/Toast.d.ts

@@ -0,0 +1,16 @@
+import { type PropsWithChildren } from 'react';
+import * as ToastPrimitive from '@radix-ui/react-toast';
+export declare const ToastAction: any;
+export declare const ToastClose: any;
+export declare const ToastSeparator: any;
+type Sentiment = 'inverse' | 'negative' | 'info';
+export declare const ToastViewport: any;
+export declare function ToastProvider({ children, ...props }: ToastPrimitive.ToastProviderProps): JSX.Element;
+export type ToastProps = PropsWithChildren<{
+    sentiment: Sentiment;
+    title: string;
+    onDismiss?: () => void;
+}> & ToastPrimitive.ToastProps;
+export type ToastActionProps = ToastPrimitive.ToastActionProps;
+export declare function Toast({ title, children, sentiment, onDismiss, ...toastRootProps }: ToastProps): JSX.Element;
+export {};

package/types/components/Tooltip/IconTooltip.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+type IconTooltipProps = {
+    children: ReactNode;
+    label?: string;
+    icon?: ReactNode;
+};
+export declare function IconTooltip({ children, icon, label, }: IconTooltipProps): JSX.Element;
+export {};