@artsy/palette 40.3.0 → 40.4.0

package/dist/elements/Swiper/Swiper.story.d.ts

@@ -0,0 +1,72 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Simple: () => React.JSX.Element;
+export declare const WithHorizontalMargins: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SimpleWithLeftEdgeSnapping: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ProgressBarExample: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ProgressDotsExample: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const CustomRailAndCells: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const DynamicItems: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export declare const SwiperWithText: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const InitialIndexOnMount: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const NavigateViaProps: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const OverwritingDefaultMargins: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ConditionalChildren: () => React.JSX.Element;

package/dist/elements/Swiper/activeIndex.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Remaps the progress into the active index, given an array of `length`.
+ * @param progress number from 1 to 100
+ * @param length length of an array
+ */
+export declare const activeIndex: ({ progress, length, }: {
+    progress: number;
+    length: number;
+}) => number;

package/dist/elements/Swiper/index.d.ts

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

package/dist/elements/Swiper/percentage.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Calculate the percentage of the rail that has been scrolled.
+ * If the left edge is at the total minus the viewport we are done scrolling.
+ * @param viewport window width
+ * @param total total width of the rail
+ * @param left left edge of scroll
+ */
+export declare const percentage: ({ viewport, total, left, }: {
+    viewport: number;
+    total: number;
+    left: number;
+}) => number;

package/dist/elements/Tabs/Tabs.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { BaseTabsProps } from "../BaseTabs";
+export interface TabLike extends JSX.Element {
+    props: TabProps;
+}
+export interface TabInfo extends TabProps {
+    /** Index of the newly selected Tab */
+    tabIndex: number;
+    /**
+     * Arbitrary data that can be associated with a Tab.
+     * Will be passed to the parent <Tabs>'s onChange handler.
+     */
+    data: any;
+}
+export interface TabsProps extends BaseTabsProps {
+    /** Index of the Tab that should be pre-selected */
+    initialTabIndex?: number;
+    /** @deprecated */
+    autoScroll?: boolean;
+    /** Function that will be called when a new Tab is selected */
+    onChange?: (tabInfo?: TabInfo) => void;
+}
+/** Tabs functionality */
+export declare const useTabs: ({ children, initialTabIndex, onChange, }: TabsProps) => {
+    activeTab: React.MutableRefObject<{
+        child: TabLike;
+        ref: React.RefObject<HTMLButtonElement | null>;
+    }>;
+    activeTabIndex: number;
+    handleClick: (index: number) => () => void;
+    ref: React.MutableRefObject<HTMLDivElement | null>;
+    tabs: {
+        child: TabLike;
+        ref: React.RefObject<HTMLButtonElement | null>;
+    }[];
+};
+/** A tab bar navigation component */
+export declare const Tabs: React.FC<React.PropsWithChildren<TabsProps>>;
+export interface TabProps {
+    /** Display name of the Tab */
+    name: string | JSX.Element;
+    /**
+     * Arbitrary data that can be associated with a Tab.
+     * Will be passed to the parent <Tabs>'s onChange handler.
+     */
+    data?: any;
+}
+/**
+ * An individual tab.
+ * Does nothing on its own; props are dealt with inside of Tabs.
+ */
+export declare const Tab: React.FC<React.PropsWithChildren<TabProps>>;

package/dist/elements/Tabs/Tabs.story.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const WithData: () => React.JSX.Element;
+export declare const Counts: () => React.JSX.Element;
+export declare const ConditionalTabs: () => React.JSX.Element;
+export declare const AutoScrolling: {
+    (): React.JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export declare const InitialAutoScroll: {
+    (): React.JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export declare const Cached: () => React.JSX.Element;

package/dist/elements/Tabs/index.d.ts

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

package/dist/elements/Text/Text.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
+import { ColorProps, ResponsiveValue, TypographyProps } from "styled-system";
+import { Color } from "../../Theme";
+import { BoxProps } from "../Box";
+/** BaseTextProps */
+export declare type BaseTextProps = TypographyProps & Omit<ColorProps, "color"> & {
+    /**
+     * @description
+     * Variants of the text. Possible to pass an array that
+     * behaves accordingly to the media breakpoints ["sm", "md", "lg", "xl"]
+     * @example
+     * "sm"
+     * "md"
+     * ["md", "sm"]
+     * @see {@link TextVariant}
+     */
+    variant?: ResponsiveValue<TextVariant>;
+    textColor?: ResponsiveValue<Color>;
+    /**
+     * Max number of lines before truncating the content with an ellipsis at the end of the last line.
+     * Overwriting display is required for this.
+     */
+    lineClamp?: number;
+};
+export declare type TextTransform = "none" | "capitalize" | "uppercase" | "lowercase" | "initial" | "inherit";
+/** styled functions for Text */
+export declare const textMixin: import("styled-system").styleFn;
+/** Adds ellipsis to overflowing text */
+export declare const overflowEllipsisMixin: import("styled-components").RuleSet<object>;
+/** Adds hyphenation to overflowing text */
+export declare const hyphenate: import("styled-components").RuleSet<object>;
+/** TextProps */
+export declare type TextProps = BaseTextProps & BoxProps & {
+    hyphenate?: boolean;
+    overflowEllipsis?: boolean;
+    textTransform?: ResponsiveValue<TextTransform>;
+    lineClamp?: ResponsiveValue<number>;
+};
+/** Text */
+export declare const Text: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, TextProps>> & string;

package/dist/elements/Text/Text.story.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Variants: () => React.JSX.Element;
+export declare const As: () => React.JSX.Element;
+export declare const Truncation: () => React.JSX.Element;
+export declare const Caps: () => React.JSX.Element;

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

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

package/dist/elements/TextArea/TextArea.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { BoxProps } from "../Box";
+export interface TextAreaProps extends BoxProps, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "title"> {
+    active?: boolean;
+    characterLimit?: number;
+    characterLimitHelper?: boolean;
+    defaultValue?: string;
+    description?: React.ReactNode;
+    required?: boolean;
+    title?: string;
+    disabled?: boolean;
+    error?: string | boolean;
+    focus?: boolean;
+    hover?: boolean;
+    onChange?(result: TextAreaChange): void;
+}
+export interface TextAreaChange {
+    value: string;
+    exceedsCharacterLimit: boolean;
+}
+/** TextArea */
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/elements/TextArea/TextArea.story.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const Required: () => React.JSX.Element;

package/dist/elements/TextArea/index.d.ts

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

package/dist/elements/TextArea/tokens.d.ts

@@ -0,0 +1,2 @@
+import { State } from "./types";
+export declare const TEXTAREA_STATES: Record<State, any>;

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

@@ -0,0 +1 @@
+export declare type State = "active" | "default" | "disabled" | "error" | "focus" | "hover" | "completed";

package/dist/elements/Toasts/Toast.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { BoxProps } from "../Box";
+export declare type ToastVariant = keyof typeof TOAST_VARIANTS;
+export interface ToastProps extends BoxProps {
+    id: string;
+    action?: {
+        label: string;
+        onClick(): void;
+    };
+    description?: string;
+    message: string;
+    onClose?(id: string): void;
+    variant?: ToastVariant;
+}
+export declare const Toast: React.FC<React.PropsWithChildren<ToastProps>>;
+export declare const TOAST_VARIANTS: {
+    message: {
+        backgroundColor: string;
+        color: string;
+    };
+    alert: {
+        backgroundColor: string;
+        color: string;
+    };
+    success: {
+        backgroundColor: string;
+        color: string;
+    };
+    error: {
+        backgroundColor: string;
+        color: string;
+    };
+};

package/dist/elements/Toasts/Toast.story.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/dist/elements/Toasts/Toasts.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { BoxProps } from "../Box";
+export interface ToastsProps extends BoxProps {
+    limit?: number;
+}
+export declare const Toasts: React.FC<React.PropsWithChildren<ToastsProps>>;

package/dist/elements/Toasts/Toasts.story.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Demo: {
+    (): React.JSX.Element;
+    decorators: ((Story: any) => React.JSX.Element)[];
+};

package/dist/elements/Toasts/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Toast";
+export * from "./Toasts";
+export * from "./useToasts";

package/dist/elements/Toasts/useToasts.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { ToastProps } from "./Toast";
+interface Toast extends ToastProps {
+    id: string;
+    ttl: number;
+    onClose(id: string): void;
+}
+declare type Payload = Omit<Toast, "id" | "ttl" | "onClose"> & {
+    ttl?: number;
+    onClose?(id: string): void;
+};
+declare type State = {
+    toasts: Toast[];
+};
+export declare const ToastsContext: React.Context<{
+    state: State;
+    sendToast(toast: Payload): {
+        id: string;
+        handleClose: () => void;
+    };
+    retractToast(id: string): void;
+}>;
+export declare const ToastsProvider: React.FC<React.PropsWithChildren<unknown>>;
+export declare const useToasts: () => {
+    toasts: Toast[];
+    sendToast: (toast: Payload) => {
+        id: string;
+        handleClose: () => void;
+    };
+    retractToast: (id: string) => void;
+};
+export {};

package/dist/elements/Toggle/Toggle.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { BoxProps } from "../Box";
+export interface ToggleProps extends BoxProps, Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Disable toggle interactions */
+    disabled?: boolean;
+    /** Select the toggle on render */
+    selected?: boolean;
+    /** Used to force the toggle into the visual hover state */
+    hover?: boolean;
+    /** Callback when selected */
+    onSelect?: (selected: boolean) => void;
+}
+/** A toggle */
+export declare const Toggle: React.FC<React.PropsWithChildren<ToggleProps>>;

package/dist/elements/Toggle/Toggle.story.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const Demo: () => React.JSX.Element;

package/dist/elements/Toggle/index.d.ts

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

package/dist/elements/Toggle/tokens.d.ts

@@ -0,0 +1,13 @@
+export declare const SWITCH_STATES: {
+    readonly selected: import("styled-components").RuleSet<object>;
+    readonly default: import("styled-components").RuleSet<object>;
+};
+export declare const TOGGLE_STATES: {
+    readonly default: import("styled-components").RuleSet<object>;
+    readonly selected: import("styled-components").RuleSet<object>;
+    readonly hover: import("styled-components").RuleSet<object>;
+    readonly disabled: {
+        readonly default: import("styled-components").RuleSet<object>;
+        readonly selected: import("styled-components").RuleSet<object>;
+    };
+};

package/dist/elements/Tooltip/Tooltip.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { Position } from "../../utils/usePosition";
+import { BoxProps } from "../Box";
+export declare const TOOLTIP_VARIANTS: {
+    defaultLight: {
+        backgroundColor: string;
+        color: string;
+    };
+    defaultDark: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare type TooltipVariant = keyof typeof TOOLTIP_VARIANTS;
+export interface TooltipProps extends BoxProps {
+    /** Anchor element to attach to tooltip */
+    children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    /** Content of tooltip */
+    content: React.ReactNode;
+    offset?: number;
+    placement?: Position;
+    pointer?: boolean;
+    variant?: TooltipVariant;
+    visible?: boolean;
+}
+/**
+ * A tooltip
+ */
+export declare const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>>;

package/dist/elements/Tooltip/Tooltip.story.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const _Clickable: {
+    (): React.JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export declare const Placement: () => React.JSX.Element;
+export declare const IconExample: () => React.JSX.Element;
+export declare const ExternalControl: () => React.JSX.Element;
+export declare const PointerCentering: () => React.JSX.Element;
+export declare const StressTest: {
+    (): React.JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export declare const PositioningBug: () => React.JSX.Element;

package/dist/elements/Tooltip/index.d.ts

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

package/dist/elements/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { BoxProps } from "../Box";
+/**
+ * Visually the hide element, but present in DOM so that it is accessible
+ * for screen readers.
+ * See:
+ * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+ * https://webaim.org/techniques/css/invisiblecontent/
+ * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
+ */
+export declare const visuallyHiddenMixin: import("styled-components").RuleSet<object>;
+/** Reset to `inherit` all properties that cause visually-hidden */
+export declare const visuallyUnhiddenMixin: import("styled-components").RuleSet<object>;
+export interface VisuallyHiddenProps extends BoxProps {
+    show?: boolean;
+}
+/**
+ * Visually the hide element, but present in DOM so that it is accessible
+ * for screen readers.
+ * See:
+ * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+ * https://webaim.org/techniques/css/invisiblecontent/
+ * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
+ */
+export declare const VisuallyHidden: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, VisuallyHiddenProps>> & string;

package/dist/elements/VisuallyHidden/index.d.ts

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

package/dist/elements/index.d.ts

@@ -0,0 +1,70 @@
+export * from "./AutocompleteInput";
+export * from "./Avatar";
+export * from "./Banner";
+export * from "./BaseTabs";
+export * from "./BorderBox";
+export * from "./BorderedRadio";
+export * from "./Box";
+export * from "./Breadcrumbs";
+export * from "./Button";
+export * from "./Cards";
+export * from "./Carousel";
+export * from "./CarouselBar";
+export * from "./Checkbox";
+export * from "./CleanTag";
+export * from "./Clickable";
+export * from "./Collapse";
+export * from "./CSSGrid";
+export * from "./Drawer";
+export * from "./Dropdown";
+export * from "./EntityHeader";
+export * from "./Expandable";
+export * from "./FilterSelect";
+export * from "./Flex";
+export * from "./FullBleed";
+export * from "./GridColumns";
+export * from "./HorizontalOverflow";
+export * from "./HTML";
+export * from "./Image";
+export * from "./Input";
+export * from "./Join";
+export * from "./Label";
+export * from "./LabeledInput";
+export * from "./Link";
+export * from "./Marquee";
+export * from "./Message";
+export * from "./Modal";
+export * from "./ModalDialog";
+export * from "./MultiSelect";
+export * from "./Pagination";
+export * from "./PasswordInput";
+export * from "./PhoneInput";
+export * from "./Pill";
+export * from "./Popover";
+export * from "./ProgressBar";
+export * from "./ProgressDots";
+export * from "./Radio";
+export * from "./RadioGroup";
+export * from "./Range";
+export * from "./ReadMore";
+export * from "./ResponsiveBox";
+export * from "./Select";
+export * from "./Separator";
+export * from "./Shelf";
+export * from "./ShowMore";
+export * from "./Skeleton";
+export * from "./Skip";
+export * from "./Spacer";
+export * from "./Spinner";
+export * from "./StackableBorderBox";
+export * from "./Stepper";
+export * from "./Stack";
+export * from "./Sup";
+export * from "./Swiper";
+export * from "./Tabs";
+export * from "./Text";
+export * from "./TextArea";
+export * from "./Toasts";
+export * from "./Toggle";
+export * from "./Tooltip";
+export * from "./VisuallyHidden";

package/dist/helpers/color.d.ts

@@ -0,0 +1,8 @@
+import { Color } from "../Theme";
+/**
+ * A helper to easily access colors when not in a styled-components or
+ * styled-systems context.
+ *
+ * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`
+ */
+export declare const color: (colorKey: Color | "currentColor") => any;

package/dist/helpers/flattenChildren.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+/**
+ * Convert a fragment or nested fragment into an array of elements
+ */
+export declare const flattenChildren: <T extends React.ReactElement<any, string | React.JSXElementConstructor<any>>>(children: React.ReactNode) => T[];

package/dist/helpers/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./isText";
+export * from "./color";
+export * from "./injectGlobalStyles";
+export * from "./media";
+export * from "./space";
+export * from "./visuallyDisableScrollbar";
+export * from "./transition";

package/dist/helpers/injectGlobalStyles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { css } from "styled-components";
+/**
+ * Injects globally relevant styles, including helper classes for our Typography.
+ * Apps that use palette should mount this component at the root of their tree.
+ */
+export declare function injectGlobalStyles<P extends object>(additionalStyles?: string | ReturnType<typeof css>): {
+    GlobalStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & P>;
+};

package/dist/helpers/isReactNative.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A helper used to detect if we're running in a React Native environment. Useful For
+ * universal (shared) platform code.
+ */
+export declare function isReactNative(): boolean;

package/dist/helpers/isText.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+/**
+ * Check whether a `children` prop is text — e.g. just a string (or interpolated string)
+ */
+export declare const isText: (children: ReactNode) => any;