@wavv/ui 2.2.0 → 2.2.2-alpha.1

package/build/esm/types/components/ToggleButton/ToggleButton.d.ts

@@ -1,29 +0,0 @@
-import { type ToggleButtonProps } from 'react-aria-components';
-import type { IconName } from '../Icon/Icon';
-import type { MarginPadding, Sizes } from '../types';
-type Props = {
-    /** The unique id of the toggle button */
-    id: string | number;
-    /** The content of the toggle button */
-    children: React.ReactNode;
-    /** Defines the size of the button */
-    size?: Sizes;
-    /** Displays a button with secondary colors */
-    secondary?: boolean;
-    /** Displays a red button */
-    negative?: boolean;
-    /** Displays a green button */
-    positive?: boolean;
-    /** Displays a yellow button */
-    caution?: boolean;
-    /** Disables the toggle button */
-    disabled?: boolean;
-    /** Adds an icon to the left of the button text */
-    iconLeft?: IconName;
-    /** Adds an icon to the right of the button text */
-    iconRight?: IconName;
-    /** The border radius of the toggle button */
-    borderRadius?: string | number;
-} & Omit<ToggleButtonProps, 'children' | 'id' | 'isDisabled'> & MarginPadding;
-declare const ToggleButton: ({ children, disabled, size, positive, negative, caution, secondary, iconLeft, iconRight, borderRadius, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
-export default ToggleButton;

package/build/esm/types/components/ToggleButton/ToggleButtonGroup.d.ts

@@ -1,22 +0,0 @@
-import { type ToggleButtonGroupProps } from 'react-aria-components';
-import type { MarginPadding, Sizes, WidthHeight } from '../types';
-type Props = {
-    /** Disables the toggle button group from being selected */
-    disabled?: boolean;
-    /** Defines the size of the buttons in the group */
-    size?: Sizes;
-    /** Displays buttons with secondary colors */
-    secondary?: boolean;
-    /** Displays buttons with red colors */
-    negative?: boolean;
-    /** Displays buttons with green colors */
-    positive?: boolean;
-    /** Displays buttons with yellow colors */
-    caution?: boolean;
-    /** Displays buttons as joined */
-    joined?: boolean;
-    /** The gap between the toggle buttons */
-    gap?: string | number;
-} & Omit<ToggleButtonGroupProps, 'isDisabled'> & MarginPadding & WidthHeight;
-declare const ToggleButtonGroup: ({ disabled, secondary, negative, positive, caution, joined, gap, size, height, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
-export default ToggleButtonGroup;

package/build/esm/types/components/ToggleButton/context.d.ts

@@ -1,8 +0,0 @@
-import type { Height, Sizes } from '../types';
-export type ToggleButtonType = 'primary' | 'secondary' | 'negative' | 'positive' | 'caution' | 'disabled';
-export type ToggleContextType = {
-    type?: ToggleButtonType;
-    joined?: boolean;
-    size: Sizes;
-} & Height;
-export declare const ToggleContext: import("react").Context<ToggleContextType>;

package/build/esm/types/components/ToggleButton/index.d.ts

@@ -1,2 +0,0 @@
-export { default as ToggleButton } from './ToggleButton';
-export { default as ToggleButtonGroup } from './ToggleButtonGroup';

package/build/esm/types/components/Tooltip.d.ts

@@ -1,50 +0,0 @@
-import { type ReactNode } from 'react';
-import { type TooltipTriggerComponentProps } from 'react-aria-components';
-import type { Attributes } from './typeDefs/elementTypes';
-import type { Placement, ThemeProp } from './types';
-export type TooltipProps = {
-    children?: ReactNode;
-    /** The element that will trigger the opening of the Tooltip */
-    trigger: ReactNode;
-    /** Props to pass to the trigger's container element */
-    triggerProps?: Attributes<HTMLSpanElement>;
-    /** The text content of the Tooltip */
-    content?: string;
-    /** The position of the Tooltip body and arrow in relation to the trigger */
-    position?: Placement;
-    /** Offset of the Tooltip from the trigger */
-    offset?: number;
-    /** zIndex of the Tooltip's portal container */
-    zIndex?: number;
-    /** The width of the Tooltip element */
-    width?: number | string;
-    /** The maxWidth of the Tooltip element */
-    maxWidth?: number | string;
-    /** The textAlignment of the Tooltip text */
-    textAlign?: 'left' | 'right' | 'center';
-    /** Controls the open state of the Tooltip */
-    open?: boolean;
-    /** Prevents the Tooltip from opening */
-    disabled?: boolean;
-    /** The backgroundColor of the Tooltip element */
-    bgColor?: string;
-    /** The text color of the Tooltip element */
-    color?: string;
-    className?: string;
-    /** The function called after the Tooltip opens */
-    afterShow?: () => void;
-    /** The function called after the Tooltip closes */
-    afterHide?: () => void;
-} & Omit<TooltipTriggerComponentProps, 'children' | 'trigger' | 'isDisabled' | 'isOpen'>;
-declare const Tooltip: {
-    ({ trigger, triggerProps, children, content, position, offset, zIndex, width, maxWidth, textAlign, open, disabled, bgColor, color, className, afterShow, afterHide, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
-    Header: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme;
-        as?: React.ElementType;
-    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Body: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme;
-        as?: React.ElementType;
-    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-};
-export default Tooltip;

package/build/esm/types/components/TransferList.d.ts

@@ -1,48 +0,0 @@
-import { type CSSProperties as CSS, type ReactElement } from 'react';
-import type { ColorNames } from '../theme/core/colors';
-import type { Margin, Width } from './types';
-type Color = ColorNames | CSS['color'];
-export type Item = {
-    /** Unique ID of the item */
-    id: number | string;
-    /** The text displayed for the transfer item */
-    label: string;
-    /** Used as the data of the item */
-    value?: unknown;
-    /** If both `header` and `body` are provided, this text will be styled as the transfer item's header */
-    header?: string;
-    /** If both `header` and `body` are provided, this text will be styled as the transfer item's body */
-    body?: string;
-    /** Any element to be displayed to the left of the item's label/header/body */
-    leftElement?: ReactElement;
-    /** Any element to be displayed to the right of the item's label/header/body */
-    rightElement?: ReactElement;
-    /** The left border color of the transfer item */
-    color?: Color;
-    /** Used to preselect an item */
-    selected?: boolean;
-    [key: string]: unknown;
-};
-export type Action = 'select' | 'remove';
-export type Next = (item?: Item) => void;
-type TransferListProps = {
-    /** Array of objects that will be rendered as individual items in the list */
-    items: Item[];
-    /** The function called when an item is selected or removed. It passes the entire list of selected items. */
-    onChange: (list: Item[]) => void;
-    /** The function called before an item is selected or removed */
-    beforeItemChange?: (item: Item, action: Action, next: Next) => void;
-    /** The header title of the transfer list */
-    listTitle?: string;
-    /** The text to display in a readOnly state where there are no selected items */
-    noItemsMessage?: string;
-    /** Disables moving items and only displays the list of selected items */
-    readOnly?: boolean;
-    /** Hides the select all button */
-    hideSelectAll?: boolean;
-    /** Hides the remove all button */
-    hideRemoveAll?: boolean;
-    className?: string;
-} & Width & Margin;
-declare const TransferList: ({ items, onChange, beforeItemChange, listTitle, noItemsMessage, hideSelectAll, hideRemoveAll, readOnly, width, ...rest }: TransferListProps) => import("react/jsx-runtime").JSX.Element;
-export default TransferList;

package/build/esm/types/components/Tree/Tree.d.ts

@@ -1,23 +0,0 @@
-import { type TreeProps } from 'react-aria-components';
-import type { Padding, WidthHeight } from '../types';
-type Props = {
-    /** The background color of the tree */
-    backgroundColor?: string;
-    /** The currently selected keys in the collection */
-    selectedKeys?: Set<React.Key>;
-    /** Handler that is called when the selection changes */
-    onSelectionChange?: (keys: Set<React.Key>) => void;
-} & WidthHeight & Padding & Omit<TreeProps<object>, 'selectedKeys' | 'onSelectionChange'>;
-declare const Tree: {
-    ({ backgroundColor, expandedKeys: expandedKeysProp, onExpandedChange, defaultExpandedKeys, selectedKeys, onSelectionChange, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-    Item: ({ children, title, id, iconLeft, iconRight, expandOnSelect, indent, content, ...props }: {
-        title: string;
-        children?: import("react").ReactNode;
-        content?: import("react").ReactNode;
-        iconLeft?: import("../helpers/getIcon").IconType;
-        iconRight?: import("../helpers/getIcon").IconType;
-        expandOnSelect?: boolean;
-        indent?: number;
-    } & Omit<import("react-aria-components").TreeItemProps<string>, "children" | "value" | "textValue">) => import("react/jsx-runtime").JSX.Element;
-};
-export default Tree;

package/build/esm/types/components/Tree/TreeContext.d.ts

@@ -1,5 +0,0 @@
-export type Selection = Set<React.Key> | 'all';
-export type TreeContextValue = {
-    requestExpand?: (keys: React.Key[]) => void;
-};
-export declare const TreeContext: import("react").Context<TreeContextValue>;

package/build/esm/types/components/Tree/TreeItem.d.ts

@@ -1,21 +0,0 @@
-import type { ReactNode } from 'react';
-import { type TreeItemProps } from 'react-aria-components';
-import { type IconType } from '../helpers/getIcon';
-type ItemProps = {
-    /** The title of the item */
-    title: string;
-    /** Other Tree.Item components to create a submenu of the item */
-    children?: ReactNode;
-    /** Any content to display on the right side of the item title */
-    content?: ReactNode;
-    /** The icon to display on the left of the item */
-    iconLeft?: IconType;
-    /** The icon to display on the right of the item */
-    iconRight?: IconType;
-    /** Whether to automatically expand the item when it is selected */
-    expandOnSelect?: boolean;
-    /** The indentation level of the item (default: 1 === 16px) */
-    indent?: number;
-} & Omit<TreeItemProps<string>, 'textValue' | 'value' | 'children'>;
-declare const Item: ({ children, title, id, iconLeft, iconRight, expandOnSelect, indent, content, ...props }: ItemProps) => import("react/jsx-runtime").JSX.Element;
-export default Item;

package/build/esm/types/components/Tree/index.d.ts

@@ -1 +0,0 @@
-export { default } from './Tree';

package/build/esm/types/components/UnstyledButton.d.ts

@@ -1,3 +0,0 @@
-import { type ButtonProps } from 'react-aria-components';
-declare const UnstyledButton: ({ children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default UnstyledButton;

package/build/esm/types/components/Waveform.d.ts

@@ -1,25 +0,0 @@
-import { type SliderProps as AriaSliderProps } from 'react-aria-components';
-import type { Margin, WidthHeight } from './types';
-type Waveform2Props = {
-    /** Audio source URL for generating waveform peaks */
-    src: string;
-    /** Show label with title */
-    label?: string;
-    /** Show current value output */
-    showOutput?: boolean;
-    /** Show hover tooltip with timestamp */
-    showHoverTime?: boolean;
-    /** Color for the unplayed portion of the waveform */
-    unplayedColor?: string;
-    /** Color for the played portion of the waveform */
-    playedColor?: string;
-    /** Number of bars to render in the waveform */
-    barCount?: number;
-    /** Multiplier for the height of the waveform */
-    heightMultiplier?: number;
-    /** Format function for the output value */
-    formatOptions?: Intl.NumberFormatOptions;
-    className?: string;
-} & Omit<AriaSliderProps, 'children' | 'className'> & WidthHeight & Margin;
-declare const Waveform2: ({ src, label, showOutput, showHoverTime, unplayedColor, playedColor, barCount, heightMultiplier, width, height, formatOptions, ...sliderProps }: Waveform2Props) => import("react/jsx-runtime").JSX.Element;
-export default Waveform2;

package/build/esm/types/components/draftUtils.d.ts

@@ -1,49 +0,0 @@
-import { CompositeDecorator, type ContentState, EditorState, type RawDraftContentState, type RawDraftEntity } from 'draft-js';
-import type { MergeField } from './types';
-export declare const decorator: CompositeDecorator;
-export declare const decode: (data: RawDraftContentState) => string;
-export declare const encode: (text: string, fields: MergeField[], displayValue: boolean) => ContentState;
-/**
- * Returns a new EditorState using the content passed in.
- * @param {string} value - The string of text to go in the editor
- * @param {array} fields - Array of field objects
- * @param {boolean} displayValue - Flag to display the merge fields value or label
- */
-export declare const createStateWithContent: (value: string, fields: MergeField[], displayValue: boolean) => EditorState;
-/**
- * Returns the raw form of the Editor content.
- * @param {EditorState} state - The current state of the editor
- * @param {boolean} decoded - Whether or not the state is to be decoded into plain text
- */
-export declare const getRawState: (state: EditorState, decoded?: boolean) => string | RawDraftContentState;
-/**
- * Returns an array of entities contained in the EditorState.
- * @param {EditorState} state - The current state of the editor
- */
-export declare const getEntities: (state: EditorState) => RawDraftEntity<{
-    [key: string]: any;
-}>[];
-/**
- * Checks if the editor contains any merged but unknown fields. Returns a true or false
- * @param {EditorState} state - The current state of the editor
- */
-export declare const hasMissingEntities: (state: EditorState) => boolean;
-/**
- * Returns a new EditorState with a merge field inserted at the cursor, then places the cursor at the end of the newly inserted text.
- * @param {object} field - The merge field object to be inserted
- * @param {array} fields - Array of field objects
- * @param {EditorState} state - The current state of the editor
- * @param {boolean} displayValue - Flag to display the merge fields value or label
- */
-export declare const insertFieldEntity: (field: MergeField, fields: MergeField[], state: EditorState, displayValue: boolean) => EditorState;
-/**
- * Returns a new EditorState with the cursor focused at the end of the text.
- * @param {EditorState} state - The current state of the editor
- */
-export declare const getFocusStateAtEnd: (state: EditorState) => EditorState;
-/**
- * Returns a new EditorState with the pasted content merged in with the current state.
- * @param {string} text - The text string being pasted
- * @param {EditorState} state - The current state of the editor
- */
-export declare const getPastedState: (text: string, state: EditorState) => EditorState;

package/build/esm/types/components/helpers/getIcon.d.ts

@@ -1,8 +0,0 @@
-import { type ReactElement } from 'react';
-import type { IconName } from '../Icon/Icon';
-import { type IconProps } from '../Icon/Icon';
-import type { TooltipProps } from '../Tooltip';
-export type IconType = IconName | IconProps | ReactElement<IconProps> | ReactElement<TooltipProps>;
-type ReducedIconProps = Omit<IconProps, 'name' | 'svg' | 'external'>;
-declare const getIcon: (icon: IconType, props?: ReducedIconProps) => ReactElement<IconProps | TooltipProps>;
-export default getIcon;

package/build/esm/types/components/helpers/getPopPosition.d.ts

@@ -1,6 +0,0 @@
-import type { ArrowAlign, PopPosition, PopSide } from '../types';
-declare const getPopPosition: (pos?: PopPosition) => {
-    side: PopSide;
-    align: ArrowAlign;
-};
-export default getPopPosition;

package/build/esm/types/components/helpers/isPropAllowed.d.ts

@@ -1,2 +0,0 @@
-declare const isPropAllowed: (prop: string, propArray: string[]) => boolean;
-export default isPropAllowed;

package/build/esm/types/components/helpers/mergePadding.d.ts

@@ -1,8 +0,0 @@
-import type { Padding } from '../types';
-declare const mergePadding: (paddingObj: Padding) => {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-};
-export default mergePadding;

package/build/esm/types/components/helpers/styledProps.d.ts

@@ -1,8 +0,0 @@
-import type { CSSObject } from '@emotion/react';
-import type { Margin, MaxWidthHeight, MinWidthHeight, Padding, Position, WidthHeight } from '../types';
-export declare const widthHeightProps: ({ width, height }: WidthHeight) => CSSObject;
-export declare const maxWidthHeightProps: ({ maxWidth, maxHeight }: MaxWidthHeight) => CSSObject;
-export declare const minWidthHeightProps: ({ minWidth, minHeight }: MinWidthHeight) => CSSObject;
-export declare const paddingProps: ({ padding, paddingTop, paddingBottom, paddingRight, paddingLeft, }: Padding) => CSSObject;
-export declare const marginProps: ({ margin, marginTop, marginBottom, marginRight, marginLeft }: Margin) => CSSObject;
-export declare const positionProps: ({ position, top, bottom, right, left }: Position) => CSSObject;

package/build/esm/types/components/typeDefs/elementTypes.d.ts

@@ -1,2 +0,0 @@
-import type { HTMLProps } from 'react';
-export type Attributes<T> = Omit<HTMLProps<T>, 'onChange' | 'as'>;

package/build/esm/types/components/typeDefs/inputTypes.d.ts

@@ -1,67 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ValidationResult } from 'react-aria-components';
-import type { IconType } from '../helpers/getIcon';
-import type { Height, MarginPadding, MinHeight, Width } from '../types';
-export type InputContainerStyleProps = {
-    /** Sets the input backgroundColor */
-    backgroundColor?: string;
-    /** Sets the input borderRadius */
-    borderRadius?: number | string;
-    /** Sets the input borderColor */
-    borderColor?: string;
-    /** Removes the background and padding from the input */
-    textOnly?: boolean;
-} & Width & Height & MinHeight & MarginPadding;
-export type InputElementStyleProps = {
-    /** Sets the input fontSize */
-    fontSize?: number | string;
-    /** Sets the fontWeight */
-    fontWeight?: number | string;
-    /** The color of the input text */
-    color?: string;
-    /** Sets the color of the input placeholder */
-    placeholderColor?: string;
-    /** Sets the disabled styles of the input */
-    isDisabled?: boolean;
-} & Width;
-export type InputBaseProps = {
-    /** Adds a label to the input */
-    label?: string;
-    /** Sets the placeholder text */
-    placeholder?: string;
-    /** Places a description message below the input */
-    description?: string;
-    /** Places an error message below the input if invalid */
-    errorMessage?: string | ((validation: ValidationResult) => string);
-    /** Adds a loading spinner to the input */
-    loading?: boolean;
-    /** Disables the input */
-    disabled?: boolean;
-    /** Prevents the input from being edited */
-    readOnly?: boolean;
-    /** Sets the invalid styles of the input */
-    invalid?: boolean;
-    /** Requires the input to filled */
-    required?: boolean;
-    ref?: React.Ref<HTMLInputElement>;
-} & InputContainerStyleProps & Omit<InputElementStyleProps, 'isDisabled'>;
-export type TextInputProps = {
-    /** A regex string, similar to `pattern`, but prevents input outside the pattern */
-    accepts?: string;
-};
-export type TextAreaProps = TextInputProps & {
-    /** Maximum height of the textarea. Content will scroll after this height is reached */
-    maxHeight?: number | string;
-    /** Reference to the textarea element */
-    ref?: React.Ref<HTMLTextAreaElement>;
-};
-export type InputProps = {
-    /** The name of the icon that should appear on the left side of the input */
-    iconLeft?: IconType;
-    /** The name of the icon that should appear on the right side of the input */
-    iconRight?: IconType;
-    /** The element to display on the left side of the input */
-    leftElement?: ReactNode;
-    /** The element to display on the right side of the input */
-    rightElement?: ReactNode;
-} & InputBaseProps;

package/build/esm/types/components/typeDefs/selectionTypes.d.ts

@@ -1,83 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import type { Key, PopoverProps } from 'react-aria-components';
-import type { Placement, WithRequired } from '../types';
-import type { InputProps } from './inputTypes';
-export type ShowHideCallbacks = {
-    /** The function to be called when the menu is opened */
-    afterShow?: () => void;
-    /** The function to be called when the menu is closed */
-    afterHide?: () => void;
-};
-export type OpenStateProps = {
-    /** Controls whether the menu is open */
-    open?: boolean;
-    /** Called when the open state changes */
-    onOpenChange?: (isOpen: boolean) => void;
-};
-export type ListItem = {
-    /** The id of the option that will be returned on selection */
-    id?: string;
-    /** The value displayed within the input after selection */
-    value: string;
-    /** The header text displayed above the body text */
-    header?: string;
-    /** The body text displayed below the header text */
-    body?: string;
-    /** An element to be displayed on the left side of the item */
-    leftElement?: ReactElement;
-    /** An element to be displayed on the right side of the item */
-    rightElement?: ReactElement;
-    /** Displays the header & body inline rather than column */
-    inline?: boolean;
-    /** Disables the Item from being clicked */
-    disabled?: boolean;
-    /** The function to be called when the item is clicked */
-    onClick?: () => void;
-};
-export type ListSection<T = ListItem> = {
-    id: string;
-    title?: string;
-    options: T[];
-};
-export type ListOption<T = ListItem> = T | ListSection<T>;
-export type SelectItem = Omit<ListItem, 'onClick'>;
-export type MultiSelectItem = WithRequired<SelectItem, 'id'>;
-export type MultiSelectOption = ListOption<MultiSelectItem>;
-export type SelectInputProps = {
-    /** The option Items to be displayed in the menu */
-    children?: ReactNode;
-    /** The options to be displayed in the menu */
-    options?: ListOption<SelectItem>[];
-    /** The controlled value of the input */
-    value?: Key;
-    /** The uncontrolled initial value of the input */
-    defaultValue?: Key;
-    /** Allow the selected option to be re-selected */
-    allowRepeatSelection?: boolean;
-    /** Hides the caret icon toggle */
-    hideCaret?: boolean;
-    /** The position of the menu body in relation to the trigger */
-    position?: Placement;
-    /** Prevents dynamic opening position of the menu */
-    fixedPosition?: boolean;
-    /** The background color of the menu */
-    menuBackground?: string;
-    /** The element to display before the menu options */
-    before?: ReactNode;
-    /** The element to display after the menu options */
-    after?: ReactNode;
-    /** The function to be called when an option is selected */
-    onChange?: (key: string) => void;
-} & Omit<InputProps, 'iconRight'> & ShowHideCallbacks & Pick<PopoverProps, 'maxHeight'>;
-export type CalendarBaseProps = {
-    /** Prevents selection of dates in the past (relative to the set date or current date). */
-    preventPast?: boolean | Date;
-    /** Prevents selection of dates in the future (relative to the set date or current date). */
-    preventFuture?: boolean | Date;
-    /** Removes the Calendar's boxShadow */
-    noShadow?: boolean;
-};
-export type DateInputProps = {
-    /** Hides the calendar picker icon */
-    hidePicker?: boolean;
-} & ShowHideCallbacks & Omit<CalendarBaseProps, 'noShadow'> & Omit<InputProps, 'placeholder'>;

package/build/esm/types/components/typeDefs/tagTypes.d.ts

@@ -1,17 +0,0 @@
-import type { IconType } from '../helpers/getIcon';
-import type { Placement } from '../types';
-export type TagItem = {
-    id: string;
-    value: string;
-    disabled?: boolean;
-    invalid?: boolean;
-    removable?: boolean;
-    /** The name of the icon that should appear on the left side of the input */
-    iconLeft?: IconType;
-    /** The name of the icon that should appear on the right side of the input */
-    iconRight?: IconType;
-    tooltip?: {
-        content: string;
-        position?: Placement;
-    };
-};