@artsy/palette 40.3.0 → 40.5.0-canary.1420.31535.0

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

@@ -0,0 +1,24 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithMultipleComponents: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithOneComponent: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithSomeOfTheChildrenEmpty: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithNestedChildren: () => React.JSX.Element;

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

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

package/dist/elements/Label/Label.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { BoxProps } from "../Box";
+export declare const LABEL_VARIANTS: {
+    light: {
+        backgroundColor: string;
+        color: string;
+    };
+    dark: {
+        backgroundColor: string;
+        color: string;
+    };
+    brand: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare type LabelVariant = keyof typeof LABEL_VARIANTS;
+export interface LabelProps extends BoxProps {
+    variant?: LabelVariant;
+    children: React.ReactNode;
+}
+export declare const Label: React.FC<React.PropsWithChildren<LabelProps>>;

package/dist/elements/Label/Label.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 OverflowEllipsis: () => React.JSX.Element;

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

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

package/dist/elements/LabeledInput/LabeledInput.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { InputProps } from "../Input";
+export interface LabeledInputProps extends InputProps {
+    label: React.ReactNode;
+    variant?: "suffix" | "prefix";
+}
+/** Input with a right-aligned or left-aligned label */
+export declare const LabeledInput: React.ForwardRefExoticComponent<LabeledInputProps & React.RefAttributes<HTMLInputElement>>;

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

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

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

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

package/dist/elements/Link/Link.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ResponsiveValue } from "styled-system";
+import { BoxProps } from "../Box";
+export interface LinkProps extends BoxProps {
+    textDecoration?: ResponsiveValue<string>;
+}
+/**
+ * Basic <a> tag styled with additional LinkProps
+ *
+ * Tip: If working on Force, please use <Link as={RouterLink}>.
+
+ */
+export declare const Link: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, LinkProps>> & string;

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

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

package/dist/elements/Marquee/Marquee.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { BoxProps } from "../Box";
+declare const VARIANTS: {
+    defaultLight: {
+        backgroundColor: string;
+        color: string;
+    };
+    defaultDark: {
+        backgroundColor: string;
+        color: string;
+    };
+    brand: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export interface MarqueeProps extends BoxProps {
+    variant?: keyof typeof VARIANTS;
+    speed?: string;
+    color?: string;
+    marqueeText: string;
+    divider?: boolean;
+}
+export declare const Marquee: React.FC<React.PropsWithChildren<MarqueeProps>>;
+export {};

package/dist/elements/Marquee/Marquee.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/Marquee/index.d.ts

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

package/dist/elements/Message/Message.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { FlexProps } from "../Flex";
+export declare const MESSAGE_VARIANTS: {
+    default: {
+        backgroundColor: string;
+        color: string;
+    };
+    info: {
+        backgroundColor: string;
+        color: string;
+    };
+    success: {
+        backgroundColor: string;
+        color: string;
+    };
+    alert: {
+        backgroundColor: string;
+        color: string;
+    };
+    warning: {
+        backgroundColor: string;
+        color: string;
+    };
+    error: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare type MessageVariant = keyof typeof MESSAGE_VARIANTS;
+export interface MessageProps extends FlexProps {
+    children?: React.ReactNode;
+    title?: string;
+    variant?: MessageVariant;
+}
+/**
+ * `Message` is used for in-line communication. These should fill the allotted
+ * container or space they are placed and key for temporal messages and
+ * comments within flows. Additionally, they can be used to highlight particular
+ * messaging within a specific section of a page or screen.
+ */
+export declare const Message: React.FC<React.PropsWithChildren<MessageProps>>;

package/dist/elements/Message/Message.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/Message/index.d.ts

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

package/dist/elements/Modal/ModalBase.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { ZIndexProps } from "styled-system";
+import { FlexProps } from "../Flex";
+/** BaseModal */
+export declare type ModalBaseProps = React.HTMLAttributes<HTMLDivElement> & FlexProps & ZIndexProps & {
+    children?: React.ReactNode;
+    dialogProps?: FlexProps;
+    onClose?(): void;
+};
+/**
+ * It seems we've landed on this value as the 'top'
+ */
+export declare const DEFAULT_MODAL_Z_INDEX = 9999;
+/**
+ * BaseModal
+ * Low-level modal that has no opinions about layout/overlay
+ * Modals content using a portal, locks scroll.
+ */
+export declare const ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>>;
+export declare const _ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>>;

package/dist/elements/Modal/ModalBase.story.d.ts

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

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

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

package/dist/elements/ModalDialog/ModalDialog.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ModalBaseProps } from "../Modal";
+import { ModalDialogContentProps } from "./ModalDialogContent";
+export declare type ModalDialogProps = Omit<ModalBaseProps, "title"> & ModalDialogContentProps & {
+    leftPanel?: React.ReactNode;
+    rightPanel?: React.ReactNode;
+};
+export declare const ModalDialog: React.FC<React.PropsWithChildren<ModalDialogProps>>;

package/dist/elements/ModalDialog/ModalDialog.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/ModalDialog/ModalDialogContent.d.ts

@@ -0,0 +1,16 @@
+import React, { FC } from "react";
+import { ClickableProps } from "../Clickable";
+import { BoxProps } from "../Box";
+export interface ModalDialogContentProps extends BoxProps, Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    hasLogo?: boolean;
+    leftPanel?: React.ReactNode;
+    onClose: () => void;
+    rightPanel?: React.ReactNode;
+    title?: React.ReactNode;
+    header?: React.ReactNode;
+}
+export declare const ModalDialogContent: React.FC<React.PropsWithChildren<ModalDialogContentProps>>;
+export declare type ModalCloseProps = ClickableProps;
+export declare const ModalClose: FC<React.PropsWithChildren<ModalCloseProps>>;

package/dist/elements/ModalDialog/ModalDialogContent.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/ModalDialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ModalDialog";
+export * from "./ModalDialogContent";

package/dist/elements/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { BoxProps } from "../Box";
+import { Option } from "../Select";
+export interface MultiSelectProps extends BoxProps {
+    complete?: boolean;
+    description?: string;
+    disabled?: boolean;
+    error?: string | boolean;
+    focus?: boolean;
+    hover?: boolean;
+    name?: string;
+    options: Option[];
+    required?: boolean;
+    title?: string;
+    onSelect?: (selection: Option[]) => void;
+    visible?: boolean;
+}
+/** A drop-down multi-select menu */
+export declare const MultiSelect: React.FC<React.PropsWithChildren<MultiSelectProps>>;

package/dist/elements/MultiSelect/MultiSelect.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 Example: () => React.JSX.Element;

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

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

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

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

package/dist/elements/Pagination/Pagination.d.ts

@@ -0,0 +1,33 @@
+import React, { FC } from "react";
+import { FlexProps } from "../Flex";
+import { BoxProps } from "../Box";
+interface PageCursor {
+    cursor: string;
+    isCurrent: boolean;
+    page: number;
+}
+export interface PageCursors {
+    around: PageCursor[];
+    first: PageCursor;
+    last: PageCursor;
+    previous: PageCursor;
+}
+export declare const PageLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, BoxProps>> & string;
+export interface PaginationProps extends FlexProps {
+    getHref?: (page: number) => string;
+    hasNextPage: boolean;
+    onClick?: (cursor: string, page: number, event: React.MouseEvent) => void;
+    onNext?: (event: React.MouseEvent, page: number) => void;
+    pageCursors: PageCursors;
+    scrollTo?: string;
+}
+/** Pagination */
+export declare const Pagination: React.FC<React.PropsWithChildren<PaginationProps>>;
+export interface NextPrevButtonProps extends BoxProps {
+    disabled: boolean;
+    getHref?: (page: number) => string;
+    onClick?: (event: React.MouseEvent) => void;
+    page?: number;
+}
+export declare const PaginationSkeleton: FC<React.PropsWithChildren<unknown>>;
+export {};

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

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

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

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

package/dist/elements/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { InputProps } from "../Input";
+export interface PasswordInputProps extends InputProps {
+    defaultVisibility?: boolean;
+}
+export declare const PasswordInput: React.FC<React.PropsWithChildren<PasswordInputProps>>;

package/dist/elements/PasswordInput/PasswordInput.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/PasswordInput/index.d.ts

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

package/dist/elements/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { InputProps } from "../Input";
+/**
+ * The option structure for the list in the dropdown menu
+ *
+ * @interface Option
+ * @property {string} `text` is the content that will be displayed as selected option
+ * @property {string} `name` is the content that will be displayed in the dropdown list
+ * @property {string} `value` is the value that will be passed to onSelect
+ */
+interface Option {
+    text: string;
+    name: string;
+    value: string;
+    countryCode?: string;
+    flag?: string;
+}
+export interface PhoneInputProps extends Omit<InputProps, "onSelect"> {
+    options: Option[];
+    onSelect: (option: Option) => void;
+    active?: boolean;
+    disabled?: boolean;
+    error?: string | boolean;
+    focus?: boolean;
+    hover?: boolean;
+    required?: boolean;
+    dropdownValue?: string;
+    inputValue?: string;
+}
+export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/elements/PhoneInput/PhoneInput.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/PhoneInput/index.d.ts

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

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

@@ -0,0 +1,9 @@
+export declare const PHONE_INPUT_STATES: {
+    default: import("styled-components").RuleSet<object>;
+    active: import("styled-components").RuleSet<object>;
+    focus: import("styled-components").RuleSet<object>;
+    hover: import("styled-components").RuleSet<object>;
+    completed: import("styled-components").RuleSet<object>;
+    disabled: import("styled-components").RuleSet<object>;
+    error: import("styled-components").RuleSet<object>;
+};

package/dist/elements/Pill/Pill.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import { ClickableProps } from "../Clickable";
+import { BoxProps } from "../Box";
+import { ResponsiveValue } from "styled-system";
+export declare const PILL_VARIANT_NAMES: readonly ["badge", "dotted", "default", "filter", "gray", "profile", "search"];
+export declare type PillVariant = typeof PILL_VARIANT_NAMES[number];
+export declare type PillState = "active" | "default" | "disabled" | "focus" | "hover" | "selected";
+/** PillProps */
+export declare type PillProps = ClickableProps & {
+    as?: keyof JSX.IntrinsicElements | React.ComponentType<React.PropsWithChildren<unknown>>;
+    /** Forces focus state */
+    focus?: boolean;
+    /** Forces hover state */
+    hover?: boolean;
+    /** Forces active state. This is for working with :active; not denoting a selected state */
+    active?: boolean;
+    /** Forces selected state. Use this state to denote the selected state */
+    selected?: boolean;
+    /** Optional icon slot */
+    Icon?: React.FunctionComponent<React.PropsWithChildren<BoxProps & {
+        fill?: ResponsiveValue<string>;
+    }>>;
+    /** Optional: Icon positioning */
+    iconPosition?: "left" | "right";
+} & ({
+    variant?: Extract<PillVariant, "badge" | "default" | "dotted" | "filter" | "gray" | "search">;
+} | {
+    /** `"profile"` pills have an optional `src` */
+    variant?: Extract<PillVariant, "profile">;
+    /**
+     * Optional avatar; 1x or [1x, 2x]
+     * Should target 30x30 @1x, 60x60 @2x
+     */
+    src?: string | [string, string];
+    /** Optionally switch into a condensed form */
+    compact?: boolean;
+} | {
+    /** `search` pills have an optional `count` */
+    variant?: Extract<PillVariant, "search">;
+    /** Optional count */
+    count?: number;
+});
+/**
+ * A Pill is a non-CTA button.
+ * It may be used for things like active filters, search states,
+ * or to denote an profile entity (possibly in the context of a card).
+ */
+export declare const Pill: React.ForwardRefExoticComponent<PillProps & React.RefAttributes<HTMLAnchorElement & HTMLButtonElement>>;

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

@@ -0,0 +1,14 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Variants: () => React.JSX.Element;
+export declare const LinkExample: () => React.JSX.Element;
+export declare const LongExampleWithTruncation: () => React.JSX.Element;
+export declare const SearchWithCount: () => React.JSX.Element;
+export declare const ArtistWithImage: () => React.JSX.Element;
+export declare const PillWithIcon: () => React.JSX.Element;
+export declare const Demo: () => React.JSX.Element;
+export declare const ProfileVariant: () => React.JSX.Element;
+export declare const PillWithPopover: () => React.JSX.Element;

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

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

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

@@ -0,0 +1,3 @@
+import { Interpolation } from "styled-components";
+import { PillState, PillVariant } from "./Pill";
+export declare const PILL_VARIANTS: Record<PillVariant, Record<PillState, Interpolation<any>[]>>;

package/dist/elements/Pointer/Pointer.d.ts

@@ -0,0 +1,23 @@
+import React, { FC } from "react";
+import { Position } from "../../utils";
+declare const POINTER_VARIANTS: {
+    defaultLight: {
+        backgroundColor: string;
+    };
+    defaultDark: {
+        backgroundColor: string;
+    };
+};
+declare type PointerVariant = keyof typeof POINTER_VARIANTS;
+export interface PointerProps {
+    anchorRef: React.RefObject<HTMLElement>;
+    tooltipRef: React.RefObject<HTMLElement>;
+    isFlipped: boolean;
+    placement: Position;
+    variant?: PointerVariant;
+}
+/**
+ * Internal-use component for displaying a triangular pointer to an anchor node
+ */
+export declare const Pointer: FC<React.PropsWithChildren<PointerProps>>;
+export {};

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

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

package/dist/elements/Popover/Popover.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import { Position } from "../../utils";
+import { BoxProps } from "../Box";
+export declare const POPOVER_VARIANTS: {
+    defaultLight: {
+        backgroundColor: string;
+        color: string;
+    };
+    defaultDark: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare type PopoverVariant = keyof typeof POPOVER_VARIANTS;
+export interface PopoverActions {
+    /** Call to show popover */
+    onVisible(): void;
+    /** Call to hide popover */
+    onHide(): void;
+    /** Call to dismiss popover */
+    onDismiss(): void;
+    /** Pass ref to element you want the popover to be anchored to */
+    anchorRef: React.MutableRefObject<HTMLElement>;
+}
+export interface PopoverProps extends BoxProps {
+    children: (actions: PopoverActions) => JSX.Element;
+    ignoreClickOutside?: boolean;
+    manageFocus?: boolean;
+    offset?: number;
+    /** Called whenever the Popver is closed (both explcitly dismissed and through click outside) */
+    onClose?: () => void;
+    /** Called whenever the Popover is dismissed (explicitly) */
+    onDismiss?: () => void;
+    placement?: Position;
+    /** Display triangular pointer back to anchor node */
+    pointer?: boolean;
+    popover: ((actions: Omit<PopoverActions, "anchorRef">) => JSX.Element) | React.ReactNode;
+    variant?: PopoverVariant;
+    /** Initial default visibility */
+    visible?: boolean;
+}
+/**
+ * A `Popover` is a small modal-type element which is anchored, and can be
+ * positioned relative to, another element.
+ */
+export declare const Popover: ({ children, ignoreClickOutside, manageFocus, offset, onClose, onDismiss, placement, pointer, popover, variant, visible: _visible, zIndex, ...rest }: PopoverProps) => React.JSX.Element;

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

@@ -0,0 +1,27 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    (): React.JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export declare const Placement: {
+    (): React.JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export declare const ManageFocus: () => React.JSX.Element;
+export declare const PopoverActions: () => React.JSX.Element;

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

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

package/dist/elements/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Color } from "../../themes/types";
+import { BoxProps } from "../Box";
+export interface ProgressBarProps extends BoxProps {
+    percentComplete: number;
+    highlight?: Color;
+    showBackground?: boolean;
+    transition?: string;
+}
+/** ProgressBar */
+export declare const ProgressBar: React.FC<React.PropsWithChildren<ProgressBarProps>>;

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

@@ -0,0 +1,16 @@
+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;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};

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

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