@planningcenter/tapestry-react 2.10.0-rc.9 → 2.10.0

package/dist/types/Spinner/Spinner.d.ts

@@ -1,11 +1,25 @@
 import React from 'react';
 import { StyleProps } from '../index';
 export declare type SpinnerProps = {
+    /**
+     * Uses position absolute and transforms to position in the center of a relative parent.
+     */
     center?: boolean;
+    /**
+     * Primary color of spinner.
+     */
     color?: string;
+    /**
+     * Size of spinner.
+     */
     size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string;
+    /**
+     * Thickness of spinner.
+     */
     thickness?: number;
+    /**
+     * Secondary color of spinner.
+     */
     trackColor?: string;
 } & StyleProps & React.HTMLAttributes<HTMLElement>;
 export declare function Spinner({ center, size, thickness, ...props }: SpinnerProps): JSX.Element;
-//# sourceMappingURL=Spinner.d.ts.map

package/dist/types/Spinner/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Spinner';
 export { Spinner as default } from './Spinner';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/StackView/StackView.d.ts

@@ -1,29 +1,50 @@
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import * as React from 'react';
 import { BoxProps } from '../Box';
 export declare type StackViewProps<E extends React.ElementType = React.ElementType> = {
+    /** Render custom component or HTML element tag. (Defaults to a `<div>` element). */
     as?: E;
+    /** The axis along which children are laid out. */
     axis?: 'horizontal' | 'vertical';
+    /** The alignment of children perpendicular to the stack view’s main axis. */
     alignment?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /** The content of the StackView. */
     children?: React.ReactNode;
+    /** The distribution of children along the main axis. */
     distribution?: 'start' | 'center' | 'end' | 'fill' | 'space-between' | 'space-evenly';
+    /**  If true, sets `display: inline-flex`, otherwise it defaults to `display: flex` */
     inline?: boolean;
+    /** Gain access to the internal ref */
     innerRef?: React.Ref<any>;
+    /** The amount of space or element that is inserted between each child. */
     spacing?: number | string | React.ReactNode;
+    /** Describes styles at various points in time. [Read about variants](/variants). */
     variants?: object;
+    /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
     mediaQueries?: object;
 } & BoxProps;
 export declare const StackView: {
     <E extends React.ElementType<any> = "div">({ as, children, inline, innerRef, ...props }: {
+        /** Render custom component or HTML element tag. (Defaults to a `<div>` element). */
         as?: E;
+        /** The axis along which children are laid out. */
         axis?: 'horizontal' | 'vertical';
+        /** The alignment of children perpendicular to the stack view’s main axis. */
         alignment?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+        /** The content of the StackView. */
         children?: React.ReactNode;
+        /** The distribution of children along the main axis. */
         distribution?: 'start' | 'center' | 'end' | 'fill' | 'space-between' | 'space-evenly';
+        /**  If true, sets `display: inline-flex`, otherwise it defaults to `display: flex` */
         inline?: boolean;
+        /** Gain access to the internal ref */
         innerRef?: React.Ref<any>;
+        /** The amount of space or element that is inserted between each child. */
         spacing?: number | string | React.ReactNode;
+        /** Describes styles at various points in time. [Read about variants](/variants). */
         variants?: object;
+        /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
         mediaQueries?: object;
     } & {
         as?: React.ElementType<any>;
@@ -75,4 +96,3 @@ export declare const StackView: {
     STRETCH: string;
     VERTICAL: string;
 };
-//# sourceMappingURL=StackView.d.ts.map

package/dist/types/StackView/index.d.ts

@@ -1,3 +1,2 @@
 export * from './StackView';
 export { StackView as default } from './StackView';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/StepperField/StepperField.d.ts

@@ -1,10 +1,24 @@
 declare type StepperFieldProps = {
+    /**
+     * Maximum number that can be selected.
+     */
     max?: number;
+    /**
+     * Minimum number that can be selected.
+     */
     min?: number;
+    /**
+     * Called when incrementing/decrementing the value.
+     */
     onChange?: (newValue: number) => void;
+    /**
+     * Specifies the size of each movement when incrementing/decrementing the value. Defaults to `1`.
+     */
     step?: number;
+    /**
+     * The current value of the stepper.
+     */
     value?: number;
 };
 declare const StepperField: ({ max, min, onChange, step, value, ...restProps }: StepperFieldProps) => JSX.Element;
 export default StepperField;
-//# sourceMappingURL=StepperField.d.ts.map

package/dist/types/Summary/Summary.d.ts

@@ -1,9 +1,20 @@
 import React from 'react';
 export declare type SummaryProps = {
+    /**
+     * Provide a centered image at the top of the content block.
+     */
     image?: React.ReactNode;
+    /**
+     * Provide a centered title above the content and below the optional image.
+     */
     title?: string;
+    /**
+     * Brief description. Can include any markup like links and emphasised text.
+     */
     children?: React.ReactNode;
 };
+/**
+ * Use for brief content that could have an accompanying image or title.
+ */
 declare const Summary: ({ children, image, title, ...restProps }: SummaryProps) => JSX.Element;
 export default Summary;
-//# sourceMappingURL=Summary.d.ts.map

package/dist/types/Tab/Tab.d.ts

@@ -1,11 +1,15 @@
 import { ColorProp } from '../index';
 import { TextProps } from '../Text';
 export declare type TabProps = {
+    /** Whether or not the tab is active. Sets element to span and removes `href` and hover effects if `true`. */
     active?: boolean;
+    /** Whether or not the tab is disabled. */
     disabled?: boolean;
+    /** Link to URL. Sets element to an anchor, otherwise it will use a button. */
     href?: string;
+    /** The size of the tab which includes `fontSize`, `lineHeight` and `padding`. */
     size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** The background color of the tab. */
     color?: ColorProp;
 } & TextProps;
 export declare function Tab({ active, disabled, href, color, size, ...props }: TabProps): JSX.Element;
-//# sourceMappingURL=Tab.d.ts.map

package/dist/types/Tab/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Tab';
 export { Tab as default } from './Tab';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/TabNav/Tab.d.ts

@@ -0,0 +1,25 @@
+export declare type TabProps = {
+    /** Number or string to display in a badge to the right of the label. */
+    badge?: string | number;
+    /** Whether the tab is disabled. */
+    disabled?: boolean;
+    /** The icon to display to the left of the label. */
+    iconLeft?: string | object;
+    /** The icon to display to the left of the label. */
+    iconRight?: string | object;
+    /** Whether the tab is currently being displayed at a mobile breakpoint. This is provided by its TabNav parent. */
+    isMobile: boolean;
+    /** Whether the tab is selected. */
+    isSelected?: boolean;
+    /** The label for the tab. */
+    label: string;
+    /** The function to call when the tab is clicked. */
+    onClick?: () => void;
+    /** The background color of the selected tab. */
+    selectedTabBackgroundColor: string;
+};
+export declare const Tab: {
+    ({ badge, disabled, iconLeft, iconRight, isMobile, isSelected, label, onClick, selectedTabBackgroundColor, }: TabProps): JSX.Element;
+    displayName: string;
+};
+export default Tab;

package/dist/types/TabNav/TabNav.d.ts

@@ -0,0 +1,13 @@
+import { TabProps } from './Tab';
+export declare type TabNavProps = {
+    /**
+     * The background color of the selected tab.
+     */
+    selectedTabBackgroundColor?: string;
+    /**
+     * The tabs to display. Tabs accept all the same props as `TabNav.Tab`.
+     */
+    tabs: Omit<TabProps, 'isMobile' | 'selectedTabBackgroundColor'>[];
+};
+export declare const TabNav: ({ selectedTabBackgroundColor, tabs, }: TabNavProps) => JSX.Element;
+export default TabNav;

package/dist/types/TabNav/TabNav.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/types/TabNav/index.d.ts

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

package/dist/types/Text/Text.d.ts

@@ -1,19 +1,55 @@
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import * as React from 'react';
 import { BoxProps } from '../Box';
 export declare type TextProps<E extends React.ElementType = React.ElementType> = {
+    /**
+     * Render custom component or HTML element tag. (Defaults to a `<div>` element).
+     */
     as?: E;
+    /**
+     * Gain access to the internal ref
+     */
     innerRef?: Function | Object;
+    /**
+     * If `true`, sets `display: inline-block`, otherwise it defaults to `display: block`
+     */
     inline?: boolean;
+    /**
+     * Maps to CSS `textAlign` property
+     */
     align?: 'left' | 'center' | 'right';
+    /**
+     * Sets `fontStyle: italic`
+     */
     italic?: boolean;
+    /**
+     * Sets `whiteSpace: nowrap`, `overflow: hidden`, `textOverflow: ellipsis`
+     */
     truncate?: boolean;
+    /**
+     * Maps to CSS `fontSize` property. Accepts an index to `fontSizes` theme when using a numeric value, sets a pixel value if a no theme value found.
+     */
     size?: number | string;
+    /**
+     * Maps to CSS `textDecoration` property
+     */
     underline?: string;
+    /**
+     * Maps to CSS `fontWeight` property
+     */
     weight?: number | string;
+    /**
+     * Sets `whiteSpace: nowrap` when `false`
+     */
     wrap?: boolean;
+    /**
+     * Describes styles at various points in time. [Read about variants](/variants).
+     */
     variants?: object;
+    /**
+     * Describes props at different breakpoints. [Read about mediaQueries](/responsive).
+     */
     mediaQueries?: object;
 } & BoxProps;
 export declare const Text: <E extends React.ElementType<any> = "p">({ as, innerRef, ...props }: TextProps<E>) => jsx.JSX.Element;
-//# sourceMappingURL=Text.d.ts.map

package/dist/types/Text/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Text';
 export { Text as default } from './Text';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/TextArea/TextArea.d.ts

@@ -1,6 +1,6 @@
 export declare type TextAreaProps = {
+    /** Provides an initial value to the `textarea`. */
     defaultValue?: string;
 };
 declare const TextArea: ({ defaultValue, ...restProps }: TextAreaProps) => JSX.Element;
 export default TextArea;
-//# sourceMappingURL=TextArea.d.ts.map

package/dist/types/ThemeProvider/ThemeProvider.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { BoxProps } from '../Box';
 import { Theme } from '../index';
 import { setRootStyles, styleReset } from './styles';
-export declare const cache: import("@emotion/utils").EmotionCache;
 export declare const themeStorage: {
     get: () => string;
     set: (value: any) => void;
@@ -24,4 +23,3 @@ export declare namespace ThemeProvider {
     };
 }
 export { setRootStyles, styleReset };
-//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/types/ThemeProvider/index.d.ts

@@ -1,3 +1,2 @@
 export * from './ThemeProvider';
 export { ThemeProvider as default } from './ThemeProvider';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/ThemeProvider/styles.d.ts

@@ -2,4 +2,3 @@ export declare function getThemeDataAttribute(themeId: any): string;
 export declare const setRootStyles: (themeId: any, styles: any) => void;
 export declare const defaultColorProperties: any;
 export declare const styleReset: string;
-//# sourceMappingURL=styles.d.ts.map

package/dist/types/TileView/TileView.d.ts

@@ -1,17 +1,24 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import * as React from 'react';
 import { BoxProps } from '../Box';
 import { MediaQueries, Variants } from '../index';
 export declare type TileViewProps = {
     children?: any;
+    /** Render custom component or HTML element tag. (Defaults to a `<div>` element).*/
     as?: any;
+    /** The minimum width a cell must be. */
     minCellWidth?: number;
+    /** The amount of space between children. */
     spacing?: number | string;
+    /** Gain access to the internal ref */
     innerRef?: any;
+    /** Describes styles at various points in time. [Read about variants](/variants). */
     variants?: object;
+    /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
     mediaQueries?: object;
 } & BoxProps;
 declare type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & TileViewProps & MediaQueries<TileViewProps> & Variants<TileViewProps>;
 export declare function TileView({ as, innerRef, ...props }: Props): jsx.JSX.Element;
 export {};
-//# sourceMappingURL=TileView.d.ts.map

package/dist/types/TileView/index.d.ts

@@ -1,3 +1,2 @@
 export * from './TileView';
 export { TileView as default } from './TileView';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/TimeField/TimeField.d.ts

@@ -1,11 +1,28 @@
 declare type TimeFieldProps = {
+    /**
+     * An array of keys to ignore when pushed.
+     * ex: ["ArrowUp", "ArrowDown"].
+     */
     ignoredKeys?: string[];
     interval?: number;
+    /**
+     * Render native time input, defaults to `true` if user platform is an iOS device, otherwise `false`.
+     */
     isIOS?: boolean;
     max?: number;
     min?: number;
+    /**
+     * Receives new time from typing or navigating with up and down arrow keys.
+     */
     onChange: (event: any) => void;
+    /**
+     * Displays time based on a 12 hour clock, `true` by default.
+     */
     twelveHourClock?: boolean;
+    /**
+     * The controlled value passed to the internal input.
+     * Accepts an array of [hours, minutes] based on a 24 hour clock.
+     */
     value: [number, number];
 };
 declare const TimeField: {
@@ -16,4 +33,3 @@ declare const TimeField: {
     getTimeFromDate: any;
 };
 export default TimeField;
-//# sourceMappingURL=TimeField.d.ts.map

package/dist/types/TimeField/TimeField.test.d.ts

@@ -1,2 +1 @@
 import '@testing-library/jest-dom/extend-expect';
-//# sourceMappingURL=TimeField.test.d.ts.map

package/dist/types/ToggleSwitch/ToggleSwitch.d.ts

@@ -2,15 +2,21 @@ import React from 'react';
 import { StackViewProps } from '../StackView';
 import { MediaQueries } from '..';
 export declare type ToggleSwitchProps = {
+    /** The color of the toggle background when it is active. */
     backgroundColor?: string;
+    /** Whether the toggle is disabled. */
     disabled?: boolean;
+    /** Whether the toggle is checked. */
     isChecked: boolean;
+    /** The label for the toggle. */
     label: string;
+    /** The function to call when the toggle is clicked. */
     onClick: () => void;
+    /** The size of the toggle. */
     size?: 'xs' | 'sm' | 'md';
+    /** The tooltip to display when the toggle is hovered. */
     tooltip?: string;
 } & StackViewProps;
 declare type Props = React.RefAttributes<any> & ToggleSwitchProps & MediaQueries<ToggleSwitchProps>;
 export declare function ToggleSwitch(props: Props): JSX.Element;
 export default ToggleSwitch;
-//# sourceMappingURL=ToggleSwitch.d.ts.map

package/dist/types/ToggleSwitch/ToggleSwitch.test.d.ts

@@ -1,2 +1 @@
 import '@testing-library/jest-dom/extend-expect';
-//# sourceMappingURL=ToggleSwitch.test.d.ts.map

package/dist/types/ToggleSwitch/index.d.ts

@@ -1,3 +1,2 @@
 export * from './ToggleSwitch';
 export { ToggleSwitch as default } from './ToggleSwitch';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/Tooltip/Tooltip.test.d.ts

@@ -1,2 +1 @@
 import '@testing-library/jest-dom/extend-expect';
-//# sourceMappingURL=Tooltip.test.d.ts.map

package/dist/types/Wizard/Wizard.d.ts

@@ -5,20 +5,54 @@ export declare type Step = {
     valid?: (payload: Record<string, any>) => boolean;
 };
 export declare type WizardProps = {
+    /**
+     * Pass props to the back button.
+     */
     backButtonProps?: ButtonProps;
+    /**
+     * Pass props to all Button components in the footer.
+     */
     buttonProps?: ButtonProps;
+    /**
+     * Pass props to the cancel button.
+     */
     cancelButtonProps?: ButtonProps;
+    /**
+     * The content of the component.
+     */
     children: React.ReactNode;
+    /**
+     * Pass props to the Button components.
+     */
     footerProps?: ButtonProps;
+    /**
+     * The initial payload state.
+     */
     initialPayload?: Record<string, any>;
+    /**
+     * Pass props to the next button.
+     */
     nextButtonProps?: ButtonProps;
+    /**
+     * Determines what the next button title displays.
+     */
     nextButtonTitle?: (props: {
         activeStepIndex: number;
         steps: Step[];
         totalSteps: number;
     }) => string;
+    /**
+     * Creates a cancel button for canceling a process from the first step.
+     */
     onCancel?: () => void;
+    /**
+     * Called when the `Done` button is pressed on the last view. Passes back the `payload` state
+     * as well as an option `complete` callback to revert the button spinner back to normal.
+     */
     onSubmit?: (payload: Record<string, any>, complete: () => void) => void;
+    /**
+     * Provide a custom progress component to render in place of `StepperProgress`.
+     */
     renderProgress?: (props: {
         activeStepIndex: number;
         steps: Step[];
@@ -27,4 +61,3 @@ export declare type WizardProps = {
 };
 declare const Wizard: (props: WizardProps) => JSX.Element;
 export default Wizard;
-//# sourceMappingURL=Wizard.d.ts.map

package/dist/types/WrapView/WrapView.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { BoxProps } from '../Box';
 export declare type WrapViewProps = {
     children?: any;
+    /** The amount of space between children. */
     spacing?: number | string;
 } & BoxProps;
 declare type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & WrapViewProps;
 export declare function WrapView({ children, spacing, ...restProps }: Props): JSX.Element;
 export {};
-//# sourceMappingURL=WrapView.d.ts.map

package/dist/types/WrapView/index.d.ts

@@ -1,3 +1,2 @@
 export * from './WrapView';
 export { WrapView as default } from './WrapView';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/designTokens/index.d.ts

@@ -5,5 +5,44 @@ export declare const designTokens: {
     input: {
         borderRadius: number;
     };
+    tabNav: {
+        desktop: {
+            paddingX: number;
+            selectedTabBackgroundColor: string;
+            spacing: number;
+        };
+        mobile: {
+            backgroundColor: string;
+            borderBottomColor: string;
+            borderBottomStyle: string;
+            borderBottomWidth: number;
+            paddingX: number;
+            spacing: number;
+        };
+        tab: {
+            badgeBackgroundColor: string;
+            badgeFontSize: number;
+            badgeTextColor: string;
+            disabledTextColor: string;
+            iconColor: string;
+            selectedTextColor: string;
+            textColor: string;
+            desktop: {
+                activeTextColor: string;
+                borderRadiusTop: number;
+                defaultBackgroundColor: string;
+                hoverTextColor: string;
+                fontSize: number;
+                height: number;
+                paddingX: number;
+            };
+            mobile: {
+                borderBottomWidth: number;
+                fontSize: number;
+                height: number;
+                paddingBottom: number;
+                paddingTop: number;
+            };
+        };
+    };
 };
-//# sourceMappingURL=index.d.ts.map

package/dist/types/hooks/use-accessibility-violation.d.ts

@@ -1,5 +1,12 @@
 import * as React from 'react';
-export declare function useAccessibilityViolation(tooltipContent: React.ReactNode, consoleContent: string): {
+/**
+ * Provide an on-screen and optional console accessibilty violation.
+ */
+export declare function useAccessibilityViolation(
+/** Content to be displayed in tooltip when hovering element. */
+tooltipContent: React.ReactNode, 
+/** Content to be displayed in the console with a reference to the element. */
+consoleContent: string): {
     tooltipProps?: undefined;
     wrapperProps?: undefined;
 } | {
@@ -25,4 +32,3 @@ export declare function useAccessibilityViolation(tooltipContent: React.ReactNod
         strokeWeight: number;
     };
 };
-//# sourceMappingURL=use-accessibility-violation.d.ts.map

package/dist/types/hooks/useConstant.d.ts

@@ -1,2 +1 @@
 export default function useConstant<T>(fn: () => T): T;
-//# sourceMappingURL=useConstant.d.ts.map