@overmap-ai/blocks 0.0.1-alpha.9 → 0.0.1

package/README.md

@@ -1,27 +1,3 @@
-# React + TypeScript + Vite
+# overmap-ai blocks
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
--   [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
--   [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
--   Configure the top-level `parserOptions` property like this:
-
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
-```
-
--   Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
--   Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
--   Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+Contains basic components used by overmap-ai libraries.

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { BadgeProps } from "./typings.ts";
+/** The Badge Component is a user interface element that provides visual feedback, typically displaying a small amount
+ * of information. It is commonly used to indicate counts, statuses, or labels in a concise and visually appealing
+ * manner. This Badge components wraps the Badge component from Radix-ui found here https://www.radix-ui.com/themes/docs/components/badge */
+export declare const Badge: FC<BadgeProps>;

package/dist/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Badge";
+export * from "./typings.ts";

package/dist/Badge/typings.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from "react";
+import { Badge as RadixBadge, MarginProps } from "@radix-ui/themes";
+import { Severity } from "../typings.ts";
+export interface BadgeProps extends Omit<ComponentProps<typeof RadixBadge>, keyof MarginProps> {
+    /** The severity of the Badge, supports all global severities. Note that specifying a severity will overwrite any
+     * color passed into the Badge component. */
+    severity?: Severity;
+}

package/dist/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { ButtonGroupProps } from "./typings.ts";
+/** The ButtonGroup Component is a user interface element that groups multiple buttons together for improved user
+ * interaction and visual clarity. It is commonly used to present related actions or options in a compact and organized
+ * manner. The ButtonGroup supports all props of the RadixUI Flex layout component besides MarginProps,
+ * further documentation for the Flex layout component can be found here https://www.radix-ui.com/themes/docs/components/flex */
+export declare const ButtonGroup: FC<ButtonGroupProps>;

package/dist/ButtonGroup/context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ButtonProps } from "../Buttons/typings";
+export type ButtonContextType = Pick<ButtonProps, "variant" | "size" | "severity" | "hoverEffects" | "fluid">;
+export declare const ButtonGroupContext: import("react").Context<ButtonContextType>;
+export declare const useButtonGroupContext: () => ButtonContextType;

package/dist/ButtonGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ButtonGroup";
+export * from "./typings.ts";

package/dist/ButtonGroup/typings.d.ts

@@ -0,0 +1,33 @@
+import { Flex, MarginProps, Responsive } from "@radix-ui/themes";
+import { ComponentProps } from "react";
+import { Severity, Size, Variant } from "../typings.ts";
+import { ButtonHoverEffect } from "../Buttons";
+export interface ButtonGroupProps extends Omit<ComponentProps<typeof Flex>, keyof MarginProps | "size" | "direction" | "asChild"> {
+    /** The direction in which the Buttons within the ButtonGroup are stacked
+     * @default "row"
+     * */
+    direction?: "column" | "row";
+    /** The size of the ButtonGroup, will be applied to all Buttons contained within the ButtonGroup
+     * @default "medium"
+     * */
+    size?: Responsive<Size>;
+    /** The variant of the ButtonGroup, will be applied to all Buttons contained within the ButtonGroup
+     * @default "solid"
+     * */
+    variant?: Variant;
+    /** The severity of the ButtonGroup, will be applied to all Buttons contained within the ButtonGroup
+     * @default "primary"
+     * */
+    severity?: Severity;
+    /** The hover effects of the ButtonGroup, will be applied to all Buttons contained within the ButtonGroup */
+    hoverEffects?: ButtonHoverEffect[];
+    /** When merged the internal borders of the Buttons within the ButtonGroup will be flush with one another,
+     * will overwrite gap prop if one is passed in
+     * @default false
+     * */
+    merged?: boolean;
+    /** When set to true, all Buttons will fill as much space as possible within the ButtonGroup
+     * @default false
+     * */
+    fluid: boolean;
+}

package/dist/Buttons/Button.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ButtonProps } from "./typings.ts";
+declare const Button: FC<ButtonProps>;
+export default Button;

package/dist/Buttons/IconButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { ButtonProps } from "./typings.ts";
+interface IconButtonProps extends ButtonProps {
+    "aria-label": string;
+}
+/** The `IconButton` is a `Button` variant specifically designed for single icons. */
+declare const IconButton: FC<IconButtonProps>;
+export default IconButton;

package/dist/Buttons/constants.d.ts

@@ -0,0 +1,2 @@
+import { ButtonHoverEffect } from "./typings.ts";
+export declare const hoverEffectClassNameMapping: Record<ButtonHoverEffect, string | undefined>;

package/dist/Buttons/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Button } from "./Button.tsx";
+export { default as IconButton } from "./IconButton.tsx";
+export type { ButtonHoverEffect } from "./typings.ts";

package/dist/Buttons/typings.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { Button as RadixButton, MarginProps, Responsive } from "@radix-ui/themes";
+import { Severity, Size, Variant } from "../typings.ts";
+export type RadixButtonProps = React.ComponentProps<typeof RadixButton>;
+export type ButtonHoverEffect = "spin90Clockwise" | "spin180Clockwise" | "spin360Clockwise";
+export interface ButtonProps extends Omit<RadixButtonProps, "size" | "color" | "variant" | keyof MarginProps> {
+    children: RadixButtonProps["children"];
+    /** @default false */
+    fluid?: boolean;
+    /** @default solid */
+    variant?: Variant;
+    /** @default primary */
+    severity?: Severity;
+    size?: Responsive<Size>;
+    hoverEffects?: ButtonHoverEffect[];
+}

package/dist/Dialogs/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { AlertDialogProps } from "./typings";
+/**
+ * The AlertDialog is used to confirm an action or prompt the user for a decision.
+ * Unlike the Dialog, the AlertDialog is not dismissible by clicking outside of the dialog, nor can it be nested.
+ *
+ * To use, place the `AlertDialogProvider` at the root of your app and use the `useAlertDialog` hook to open the dialog.
+ *
+ * To set the content of the dialog, use the `content` prop or pass values for the `title`, `description`, and `onAction` props.
+ */
+export declare const AlertDialog: import("react").NamedExoticComponent<AlertDialogProps>;

package/dist/Dialogs/AlertDialog/AlertDialogContent.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog } from "@radix-ui/themes";
+import { AlertDialogStandardContent } from "./typings";
+export declare const Title: typeof AlertDialog.Title;
+export declare const AlertDialogContent: (props: AlertDialogStandardContent) => import("react/jsx-runtime").JSX.Element;

package/dist/Dialogs/AlertDialog/context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AlertDialogContextType } from "./typings";
+interface AlertDialogProviderProps {
+    children: React.ReactNode;
+}
+export declare const AlertDialogContent: import("react").Context<AlertDialogContextType>;
+export declare const AlertDialogProvider: import("react").NamedExoticComponent<AlertDialogProviderProps>;
+export {};

package/dist/Dialogs/AlertDialog/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useAlertDialog: () => import("./typings").AlertDialogContextType;

package/dist/Dialogs/AlertDialog/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./AlertDialog";
+export * from "./hooks";
+export * from "./context";

package/dist/Dialogs/AlertDialog/typings.d.ts

@@ -0,0 +1,49 @@
+import { AlertDialog } from "@radix-ui/themes";
+import { ReactNode } from "react";
+import { CloseDialog } from "../typings";
+import { Severity } from "../../typings.ts";
+interface AlertDialogBaseProps {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    children?: ReactNode;
+}
+export interface AlertDialogStandardContent {
+    /** The title of the Dialog. Should be only a few words. For example: "Delete users" */
+    title: string;
+    /** The description of the Dialog. Should be longer than the title and explain the consequences of the action. */
+    description: string;
+    /** Callback when the action button is clicked */
+    onAction: () => void;
+    /** Callback when the cancel button is clicked */
+    onCancel?: CloseDialog;
+    /** Textual content of the action button
+     * @default Confirm
+     */
+    actionText?: string;
+    /** Textual content of the cancel button
+     * @default Cancel
+     */
+    cancelText?: string;
+    /**
+     * The severity (color) of the action button.
+     * @default primary
+     */
+    severity?: Exclude<Severity, "info">;
+}
+export interface AlertDialogContentHelpers {
+    /** Closes the dialog */
+    close: CloseDialog;
+    /** Specify the title of the alert. Required for accessability. */
+    Title: typeof AlertDialog.Title;
+    /** Specify the description of the alert. Required for accessability. */
+    Description: typeof AlertDialog.Description;
+}
+export interface AlertDialogCustomContent {
+    /** Custom alert content. Be sure to use the provided `Title` and `Description`
+     * components to maintain the dialog accessability support */
+    content: (helpers: AlertDialogContentHelpers) => ReactNode;
+}
+export type AlertDialogOptions = AlertDialogStandardContent | AlertDialogCustomContent;
+export type AlertDialogProps = AlertDialogBaseProps & AlertDialogOptions;
+export type AlertDialogContextType = (options: AlertDialogOptions) => void;
+export {};

package/dist/Dialogs/Dialog/Dialog.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DialogProps } from "./typings";
+/**
+ * Display or collect information in a modal. Unlike the `AlertDialog`, the `Dialog`'s can be nested
+ * and close when clicking outside of the dialog content.
+ */
+export declare const Dialog: import("react").NamedExoticComponent<DialogProps>;

package/dist/Dialogs/Dialog/DialogContent.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DialogContentProps } from "./typings";
+export declare const DialogContent: import("react").NamedExoticComponent<DialogContentProps>;

package/dist/Dialogs/Dialog/index.d.ts

@@ -0,0 +1 @@
+export * from "./Dialog";

package/dist/Dialogs/Dialog/typings.d.ts

@@ -0,0 +1,33 @@
+import { DialogTrigger, DialogContent } from "@radix-ui/themes";
+import { CloseDialog } from "../typings";
+import { ReactNode } from "react";
+export interface CloseDialogOptions {
+    /** Bypass the `onCloseInterrupt` and force the dialog to close */
+    force?: boolean;
+}
+export type CloseDialogWithOptions = (options?: CloseDialogOptions) => void;
+type RadixDialogContentProps = React.ComponentProps<typeof DialogContent>;
+export interface DialogProps {
+    /** Use the `Trigger` to open the dialog by wrapping it around a button */
+    children: (Trigger: typeof DialogTrigger) => ReactNode;
+    /** The content of the dialog, which is rendered below the description.
+     * Should include buttons to close the dialog.
+     */
+    content: (close: CloseDialogWithOptions) => ReactNode;
+    /** The title of the Dialog should only be a few words */
+    title: string;
+    /** The description of the Dialog should explain what is happening and possible ramifications. */
+    description: string;
+    /** Changes the padding of the dialog content
+     * @default 3
+     */
+    size?: RadixDialogContentProps["size"];
+    /** Called with the dialog opens. Unlike `onCloseInterrupt`, it does not interrupt the dialog opening */
+    onOpen?: () => void;
+    /** Interrupts the close process; use the provided `confirmClose` callback to continue the close process. */
+    onCloseInterrupt?: (confirmClose: CloseDialog) => void;
+}
+export interface DialogContentProps extends Pick<DialogProps, "title" | "description" | "content"> {
+    closeDialog: CloseDialogWithOptions;
+}
+export {};

package/dist/Dialogs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Dialog/";
+export * from "./AlertDialog/";

package/dist/Dialogs/typings.d.ts

@@ -0,0 +1,2 @@
+/** Triggers the dialog to close */
+export type CloseDialog = () => void;

package/dist/Input/Input.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { InputProps } from "./typings.ts";
+export declare const Input: FC<InputProps>;

package/dist/Input/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Input";
+export * from "./typings.ts";

package/dist/Input/typings.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Responsive, TextField as RadixTextField } from "@radix-ui/themes";
+import { Severity, Size } from "../typings.ts";
+import { MarginProps } from "@radix-ui/themes";
+type TextFieldInputProps = React.ComponentProps<typeof RadixTextField.Input>;
+export interface InputProps extends Omit<TextFieldInputProps, "size" | "color" | "radius" | keyof MarginProps> {
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    size?: Responsive<Size>;
+    severity?: Exclude<Severity, "success" | "info">;
+    showInputLength?: boolean;
+}
+export {};

package/dist/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,27 @@
+import { Select } from "@radix-ui/themes";
+import { ComponentProps, FC } from "react";
+import { Severity, Size } from "../typings";
+import { MultiSelectOption } from "./MultiSelectItem";
+type RadixTriggerProps = ComponentProps<typeof Select.Trigger>;
+export interface MultiSelectProps {
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    options: MultiSelectOption[];
+    disabled?: boolean;
+    /** @default medium */
+    size?: Size;
+    name?: string;
+    placeholder?: string;
+    id?: string;
+    /** @default surface */
+    variant?: Exclude<RadixTriggerProps["variant"], "classic">;
+    radius?: RadixTriggerProps["radius"];
+    /** @default primary */
+    severity?: Severity;
+}
+/**
+ * `MultiSelect` does not support being used as an uncontrolled component,
+ * hence `onValueChange` and `value` are required.
+ */
+export declare const MultiSelect: FC<MultiSelectProps>;
+export {};

package/dist/MultiSelect/MultiSelectItem.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react";
+import { SizeMapping } from "../constants";
+import { Size } from "../typings";
+import { Responsive } from "@radix-ui/themes";
+export interface MultiSelectOption {
+    label: ReactNode;
+    value: string;
+}
+interface MultiSelectItemProps extends MultiSelectOption {
+    checked: boolean;
+    size?: Responsive<(typeof SizeMapping)[Size]>;
+}
+export declare const MultiSelectItem: FC<MultiSelectItemProps>;
+export {};

package/dist/MultiSelect/index.d.ts

@@ -0,0 +1 @@
+export * from "./MultiSelect";

package/dist/Popover/Popover.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { PopoverProps } from "./typings.ts";
+export declare const Popover: FC<PopoverProps>;

package/dist/Popover/index.d.ts

@@ -0,0 +1 @@
+export * from "./Popover";

package/dist/Popover/typings.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+import { Popover as RadixPopover } from "@radix-ui/themes";
+type RadixPopoverRootProps = React.ComponentProps<typeof RadixPopover.Root>;
+type RadixPopoverContentProps = React.ComponentProps<typeof RadixPopover.Content>;
+export interface PopoverProps extends Omit<RadixPopoverContentProps, "children" | "content"> {
+    /** children will represent the content contained within the popover,
+     it is using the RenderProps pattern to pass a 'Close' tag which
+     can be used to wrap any components in to close the popover on click of those said components*/
+    content: (Close: typeof RadixPopover.Close) => ReactNode;
+    /** The component that will cause the popover to show or hide on click depending on its current open state */
+    children: ReactNode;
+    /** determines if popover should default to open on render */
+    defaultOpen?: RadixPopoverRootProps["defaultOpen"];
+    /** if true disables interaction with other elements until popover is closed*/
+    modal?: RadixPopoverRootProps["modal"];
+}
+export {};

package/dist/Select/Select.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { SelectProps } from "./typings.ts";
+export declare const Select: FC<SelectProps>;

package/dist/Select/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Select";
+export * from "./typings.ts";

package/dist/Select/typings.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps, ReactNode } from "react";
+import { Responsive, Select as RadixSelect } from "@radix-ui/themes";
+import { Severity, Size, Variant } from "../typings.ts";
+type RadixSelectItemProps = ComponentProps<typeof RadixSelect.Item>;
+type RadixSelectContentProps = ComponentProps<typeof RadixSelect.Content>;
+export interface SelectItemProps extends Omit<RadixSelectItemProps, "asChild" | "textValue"> {
+    itemContent: ReactNode;
+}
+export interface SelectProps extends Omit<ComponentProps<typeof RadixSelect.Root>, "dir" | "open" | "onOpenChange" | "size"> {
+    className?: string;
+    size?: Responsive<Size>;
+    label?: string;
+    placeholder?: string;
+    fluid?: boolean;
+    id?: string;
+    side?: RadixSelectContentProps["side"];
+    items?: SelectItemProps[];
+    severity?: Severity;
+    itemSeverity?: Severity;
+    variant?: Extract<Variant, "surface" | "ghost" | "soft">;
+}
+export {};

package/dist/Switch/Switch.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { SwitchProps } from "./typings.ts";
+/** The Switch Component is a user interface element that allows users to toggle between two states, typically
+ * representing "on" and "off" or "enabled" and "disabled". It is commonly used for settings, preferences, or any
+ * binary options. This Switch component is a wrapper around the Radix-ui Switch component found here https://www.radix-ui.com/themes/docs/components/switch
+ */
+export declare const Switch: FC<SwitchProps>;

package/dist/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Switch";
+export * from "./typings.ts";

package/dist/Switch/typings.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { MarginProps, Switch as RadixSwitch } from "@radix-ui/themes";
+import { Severity } from "../typings.ts";
+interface SwitchIconProps {
+    checked: ReactNode;
+    unchecked: ReactNode;
+}
+export interface SwitchProps extends Omit<ComponentProps<typeof RadixSwitch>, "radius" | "color" | "asChild" | keyof MarginProps> {
+    severity?: Severity;
+    /** an icon or icons to be rendered within the Switch thumb on checked and unchecked states */
+    icon?: ReactElement | SwitchIconProps;
+}
+export {};

package/dist/Text/Text.d.ts

@@ -0,0 +1,24 @@
+import { FC, ForwardRefExoticComponent } from "react";
+import { MarginProps, Text as RadixText } from "@radix-ui/themes";
+import { Severity } from "../typings";
+type RadixTextProps = typeof RadixText extends ForwardRefExoticComponent<infer P> ? P : never;
+export type TextProps = Omit<RadixTextProps, keyof MarginProps | "ref" | "asChild" | "color"> & {
+    /** If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+     * @default false
+     */
+    noWrap?: boolean;
+    severity?: Severity;
+    /** @default span */
+    as?: RadixTextProps["as"];
+    /** @default 3 */
+    size?: RadixTextProps["size"];
+};
+/**
+ * A foundational text primitive.
+ *
+ * Use the `as` prop to render text as a `p`, `label`, `div` or `span`. This prop is purely semantic and does not alter visual appearance.
+ *
+ * For the complete documentation, refer to https://www.radix-ui.com/themes/docs/components/text.
+ */
+export declare const Text: FC<TextProps>;
+export {};

package/dist/Text/index.d.ts

@@ -0,0 +1 @@
+export * from "./Text";

package/dist/TextArea/TextArea.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { TextAreaProps } from "./typings.ts";
+/** The TextArea Component is a user interface element that allows users to input and edit multi-line text.
+ It is commonly used in forms, chat applications, and other scenarios where longer text inputs are required.
+ This TextArea is a wrapper of the RadixUI TextArea component found here https://www.radix-ui.com/themes/docs/components/text-area.
+ */
+export declare const TextArea: FC<TextAreaProps>;

package/dist/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TextArea";
+export * from "./typings.ts";

package/dist/TextArea/typings.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from "react";
+import { TextArea as RadixTextArea, MarginProps } from "@radix-ui/themes";
+import { Severity } from "../typings.ts";
+export interface TextAreaProps extends Omit<ComponentProps<typeof RadixTextArea>, keyof MarginProps | "color"> {
+    /** used to set the severity of the TextArea, supports all 5 global severities
+     * @default "primary"
+     * */
+    severity?: Severity;
+    /** Renders text to the bottom right of the TextArea to show the current input length in characters
+     * @default false
+     * */
+    showInputLength?: boolean;
+    resize: "vertical" | "horizontal" | "both";
+    inputLengthTemplate?: string;
+}

package/dist/Theme/DefaultTheme.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from "@radix-ui/themes";
+import { ComponentProps, FC } from "react";
+export type DefaultThemeProps = ComponentProps<typeof Theme>;
+export declare const DefaultTheme: FC<DefaultThemeProps>;

package/dist/Theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DefaultTheme";
+export { Theme, type ThemeOptions, useThemeContext, updateThemeAppearanceClass } from "@radix-ui/themes";

package/dist/Toast/Toast.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { ToastProps } from "./typings";
+export declare const Toast: FC<ToastProps>;

package/dist/Toast/ToastContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IToastContext } from "./typings";
+export declare const ToastContext: import("react").Context<IToastContext>;
+export declare const useToast: () => IToastContext;

package/dist/Toast/ToastProvider.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ToastContextProviderProps } from "./typings";
+/** Toasts will be displayed in the top-right handle corner of the screen */
+export declare const ToastProvider: FC<ToastContextProviderProps>;

package/dist/Toast/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Toast";
+export * from "./ToastContext";
+export * from "./ToastProvider";
+export * from "./typings";

package/dist/Toast/typings.d.ts

@@ -0,0 +1,45 @@
+import { ComponentProps, ReactNode } from "react";
+import { ToastProps as RadixToastProps, ToastProviderProps, ToastViewportProps } from "@radix-ui/react-toast";
+import { Callout } from "@radix-ui/themes";
+import { Severity } from "../typings.ts";
+export interface ToastProps {
+    size?: ComponentProps<typeof Callout.Root>["size"];
+    /**
+     * to indicate the severity of each Toast
+     * @default "primary"
+     */
+    severity?: Severity;
+    /** the title of the Toast*/
+    title: string;
+    /** description of the Toast located underneath the title*/
+    description: string;
+    /**
+     * the icon located to the left of the Toast
+     * @default "an 'i' in a circle"
+     */
+    icon?: ReactNode;
+    /**
+     * duration that the specific instance of Toast is visible for (in milliseconds)
+     * @default 5000
+     */
+    duration?: RadixToastProps["duration"];
+    /** a callback that will trigger when the Toast is closed */
+    onClose?: () => void;
+    /**
+     * Control the sensitivity of the toast for screen readers.
+     * For toasts that are the result of a user action, choose `foreground`.
+     * Toasts generated from background tasks (ex: Update available) should use `background`.
+     * @default "foreground"
+     */
+    sensitivity?: RadixToastProps["type"];
+}
+export interface ToastContextProviderProps extends ToastProviderProps, Omit<ToastViewportProps, "label" | "asChild"> {
+}
+export type SimpleToastProps = Omit<ToastProps, "severity">;
+export interface IToastContext {
+    showToast: (toastMessage: ToastProps) => void;
+    showPrimary: (simpleMessage: SimpleToastProps) => void;
+    showSuccess: (simpleMessage: SimpleToastProps) => void;
+    showInfo: (simpleMessage: SimpleToastProps) => void;
+    showError: (simpleMessage: SimpleToastProps) => void;
+}

package/dist/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { ToggleGroupSingleProps } from "./typings.ts";
+/** The Toggle Group Component is a user interface element that allows users to select a single option from a set of
+ * mutually exclusive choices. It is commonly used in situations where users need to make a single selection from a
+ * predefined list of options. This component is built using the ButtonGroup and IconButton components in combination
+ * with the Radix Toggle Group primitive found here https://www.radix-ui.com/primitives/docs/components/toggle-group */
+export declare const ToggleGroup: FC<ToggleGroupSingleProps>;

package/dist/ToggleGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ToggleGroup";
+export * from "./typings.ts";

package/dist/ToggleGroup/typings.d.ts

@@ -0,0 +1,7 @@
+import { ToggleGroupItemProps as RadixToggleGroupItemProps, ToggleGroupSingleProps as RadixToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
+import { ButtonGroupProps } from "../ButtonGroup";
+export interface ToggleGroupItemProps extends Omit<RadixToggleGroupItemProps, "asChild"> {
+}
+export interface ToggleGroupSingleProps extends Omit<RadixToggleGroupSingleProps, "dir" | "orientation">, Omit<ButtonGroupProps, "children" | "defaultValue" | "variant"> {
+    items: ToggleGroupItemProps[];
+}