@artsy/palette 40.3.0 → 40.4.0

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";

package/dist/elements/ProgressDots/ProgressDots.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { BoxProps } from "../Box";
+declare const VARIANTS: {
+    dot: {
+        width: string;
+        height: string;
+        borderRadius: string;
+    };
+    dash: {
+        height: string;
+        flex: number;
+    };
+};
+declare type Variant = keyof typeof VARIANTS;
+/** ProgressDotsProps */
+export interface ProgressDotsProps extends BoxProps {
+    activeIndex: number;
+    amount: number;
+    variant?: Variant;
+    onClick?: (index: number) => void;
+}
+/**
+ * Renders an `amount` of dots and announces progress when updated
+ */
+export declare const ProgressDots: React.FC<React.PropsWithChildren<ProgressDotsProps>>;
+export {};

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

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

package/dist/elements/Radio/Radio.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { FlexProps } from "../../elements/Flex";
+import { RADIO_SIZES } from "./tokens";
+export interface RadioProps<T> extends FlexProps, Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Disable interactions */
+    disabled?: boolean;
+    /** Select the button on render. If the Radio is inside a RadioGroup, use RadioGroup.defaultValue instead. */
+    selected?: boolean;
+    /** Show an error indicator */
+    error?: boolean;
+    /** Show hover state on render */
+    hover?: boolean;
+    /** Forces focus state */
+    focus?: boolean;
+    /** Value of radio button */
+    value?: T;
+    /** Name of the radio button */
+    name?: string;
+    /** The label content, if not specified the children will be used  */
+    label?: React.ReactNode;
+    /** The radio size, if not specified, "sm" will be used  */
+    size?: keyof typeof RADIO_SIZES;
+    /** Callback when selected */
+    onSelect?: (selected: {
+        selected: boolean;
+        value: T;
+    }) => void;
+}
+/** A Radio button */
+export declare const Radio: <T>({ children, disabled, hover, focus, error, label, selected, value, size, onSelect, ...rest }: RadioProps<T>) => React.JSX.Element;

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

package/dist/elements/Radio/RadioDot.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface CheckProps {
+    disabled?: boolean;
+    error?: boolean;
+    hover?: boolean;
+    focus?: boolean;
+    selected?: boolean;
+}
+export declare const RadioDot: 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 import("../Box").BoxProps> & import("../Box").BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, CheckProps>> & string;

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

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

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

@@ -0,0 +1,39 @@
+import { ResponsiveValue } from "styled-system";
+import { TextVariant } from "../../Theme";
+export declare const RADIO_DOT_STATES: {
+    default: {
+        resting: import("styled-components").RuleSet<object>;
+        selected: import("styled-components").RuleSet<object>;
+    };
+    focus: {
+        resting: import("styled-components").RuleSet<object>;
+        selected: import("styled-components").RuleSet<object>;
+    };
+    disabled: {
+        resting: import("styled-components").RuleSet<object>;
+        selected: import("styled-components").RuleSet<object>;
+    };
+    error: {
+        resting: import("styled-components").RuleSet<object>;
+        selected: import("styled-components").RuleSet<object>;
+    };
+    hover: {
+        resting: import("styled-components").RuleSet<object>;
+        selected: import("styled-components").RuleSet<object>;
+    };
+};
+export declare const RADIO_STATES: {
+    readonly default: import("styled-components").RuleSet<object>;
+    readonly focus: import("styled-components").RuleSet<object>;
+    readonly selected: import("styled-components").RuleSet<object>;
+    readonly hover: import("styled-components").RuleSet<object>;
+    readonly disabled: import("styled-components").RuleSet<object>;
+    readonly error: import("styled-components").RuleSet<object>;
+};
+interface SizeVariant {
+    labelFontSize: ResponsiveValue<TextVariant>;
+    descriptionFontSize: ResponsiveValue<TextVariant>;
+    dotSize: string;
+}
+export declare const RADIO_SIZES: Record<string, SizeVariant>;
+export {};

package/dist/elements/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { FlexProps } from "../Flex";
+import { RadioProps } from "../Radio";
+export interface RadioGroupProps<T> extends FlexProps {
+    /** Ability to deselect the selection */
+    deselectable?: boolean;
+    /** Disable interactions */
+    disabled?: boolean;
+    /** Text to display when disabled */
+    disabledText?: string;
+    /** Callback when selected */
+    onSelect?: (selectedOption: T) => void;
+    /** Default value of radio button */
+    defaultValue?: T;
+    /** Child <Radio /> elements */
+    children: Array<React.ReactElement<RadioProps<T>>> | React.ReactElement<RadioProps<T>>;
+}
+interface RadioGroupState<T> {
+    selectedOption: T | null;
+}
+/**
+ * A stateful collection of Radio buttons
+ */
+export declare class RadioGroup<T> extends React.Component<RadioGroupProps<T>, RadioGroupState<T>> {
+    state: {
+        selectedOption: NonNullable<T> | null;
+    };
+    componentDidUpdate(prevProps: any): void;
+    onSelect: ({ value }: {
+        value: any;
+    }) => void;
+    renderRadioButtons(): React.ReactElement<RadioProps<T>, string | React.JSXElementConstructor<any>>[];
+    render(): React.JSX.Element;
+}
+export {};

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

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

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

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

package/dist/elements/Range/Range.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { BoxProps } from "../Box";
+export declare const RANGE_HANDLE_SIZE = 24;
+export interface RangeProps extends BoxProps {
+    ariaLabels?: [string, string];
+    min: number;
+    max: number;
+    step: number;
+    value?: number[];
+    onChange?: (range: [number, number]) => void;
+}
+export declare const Range: React.FC<React.PropsWithChildren<RangeProps>>;

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

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

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

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

package/dist/elements/ReadMore/ReadMore.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface ReadMoreProps {
+    content: string;
+    disabled?: boolean;
+    inlineReadMoreLink?: boolean;
+    isExpanded?: boolean;
+    maxChars?: number;
+    onReadLessClicked?: () => void;
+    onReadMoreClicked?: () => void;
+}
+/** ReadMore */
+export declare const ReadMore: React.FC<React.PropsWithChildren<ReadMoreProps>>;

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

@@ -0,0 +1,53 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithCharacterCap: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ShortContent: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const AsString: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const CharacterCapWithHtml: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomizableTypography: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomizableTypography2: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const CharacterCapWithHtmlDisabled: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithBottomReadMore: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

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