@artsy/palette 40.3.0 → 40.5.0-canary.1420.31535.0

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

package/dist/elements/ResponsiveBox/ResponsiveBox.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { BoxProps } from "../Box";
+/** ResponsiveBoxMaxDimensions */
+export declare type ResponsiveBoxMaxDimensions = {
+    maxWidth: number;
+    maxHeight: number;
+} | {
+    maxWidth: number;
+} | {
+    maxHeight: number;
+} | {
+    maxWidth: "100%";
+};
+export interface ResponsiveBoxAspectDimensions {
+    aspectWidth: number;
+    aspectHeight: number;
+}
+/** ResponsiveBoxProps */
+export declare type ResponsiveBoxProps = Omit<BoxProps, "maxWidth" | "maxHeight"> & ResponsiveBoxAspectDimensions & ResponsiveBoxMaxDimensions;
+/** ResponsiveBox */
+export declare const ResponsiveBox: React.FC<React.PropsWithChildren<ResponsiveBoxProps>>;

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

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

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

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

package/dist/elements/Select/Select.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { BoxProps } from "../Box";
+export interface Option {
+    value: string;
+    text: string;
+}
+export interface SelectProps extends BoxProps, Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onSelect" | "size"> {
+    description?: string;
+    disabled?: boolean;
+    error?: string | boolean;
+    focus?: boolean;
+    hover?: boolean;
+    name?: string;
+    options: Option[];
+    required?: boolean;
+    selected?: string;
+    title?: string;
+    onSelect?: (value: string) => void;
+}
+/** A drop-down select menu */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLElement>>;
+/** Creates a small caret */
+export declare const caretMixin: import("styled-components").RuleSet<object>;

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

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

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

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

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

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

package/dist/elements/Separator/Separator.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BorderProps, ColorProps, SpaceProps, WidthProps } from "styled-system";
+export interface SeparatorProps extends SpaceProps, WidthProps, BorderProps, ColorProps {
+}
+/**
+ * A horizontal divider whose width and spacing can be adjusted
+ */
+export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SeparatorProps>> & string;

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

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

package/dist/elements/Shelf/Shelf.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { BoxProps } from "../Box";
+import { FlexProps } from "../Flex";
+/** ShelfProps */
+export declare type ShelfProps = BoxProps & {
+    alignItems?: FlexProps["alignItems"];
+    showProgress?: boolean;
+    snap?: "none" | "start" | "end" | "center";
+    children: JSX.Element | JSX.Element[];
+    onChange?(index: number): void;
+};
+/**
+ * A Shelf is a new kind of carousel...
+ */
+export declare const Shelf: React.FC<React.PropsWithChildren<ShelfProps>>;

package/dist/elements/Shelf/Shelf.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 DifferingAmounts: () => React.JSX.Element;
+export declare const NavigationButtons: () => React.JSX.Element;
+export declare const ClientSideUpdates: {
+    (): React.JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};

package/dist/elements/Shelf/ShelfNavigation.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ClickableProps } from "../Clickable";
+/** ShelfNavigationProps */
+export interface ShelfNavigationProps extends ClickableProps {
+    hover?: boolean;
+    focus?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Default next button
+ */
+export declare const ShelfNext: React.FC<React.PropsWithChildren<ShelfNavigationProps>>;
+/**
+ * Default previous button
+ */
+export declare const ShelfPrevious: React.FC<React.PropsWithChildren<ShelfNavigationProps>>;

package/dist/elements/Shelf/ShelfScrollBar.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { BoxProps } from "../Box";
+interface ShelfScrollBarProps extends BoxProps {
+    viewport?: HTMLDivElement | null;
+}
+/**
+ * A synthetic scrollbar
+ */
+export declare const ShelfScrollBar: React.FC<React.PropsWithChildren<ShelfScrollBarProps>>;
+interface ScrollState {
+    /** Left most scroll edge */
+    scrollLeft: number;
+    /** Width of the underlying rail */
+    scrollWidth: number;
+    /** Width of the viewport */
+    clientWidth: number;
+}
+export declare const buildScrollBar: ({ trackWidth, scrollLeft, scrollWidth, clientWidth, }: ScrollState & {
+    /** Width of the scrollbar track */
+    trackWidth: number;
+}) => {
+    requiresScrolling: boolean;
+    progress: number;
+    percentageVisible: number;
+    percentageOffset: number;
+    thumbWidth: number;
+    thumbOffset: number;
+};
+export {};

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

@@ -0,0 +1,3 @@
+export * from "./Shelf";
+export * from "./ShelfScrollBar";
+export * from "./ShelfNavigation";

package/dist/elements/Shelf/useClickScroll.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface UseClickScroll {
+    trackRef?: React.MutableRefObject<HTMLElement | null>;
+    thumbRef?: React.MutableRefObject<HTMLElement | null>;
+    viewport?: HTMLElement | null;
+    scrollWidth: number;
+    trackWidth: number;
+}
+export declare const useClickScroll: ({ trackRef, thumbRef, viewport, scrollWidth, trackWidth, }: UseClickScroll) => void;
+export {};

package/dist/elements/Shelf/useDragScroll.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface UseDragScroll {
+    viewport?: HTMLElement | null;
+    thumbRef?: React.MutableRefObject<HTMLElement | null>;
+    scrollWidth: number;
+    trackWidth: number;
+    scrollLeft: number;
+    clientWidth: number;
+}
+export declare const useDragScroll: ({ viewport, thumbRef, scrollWidth, trackWidth, scrollLeft, clientWidth, }: UseDragScroll) => void;
+export {};

package/dist/elements/ShowMore/ShowMore.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ClickableProps } from "../Clickable";
+import { TextProps } from "../Text";
+export interface ShowMoreProps extends ClickableProps, Pick<TextProps, "variant"> {
+    children: React.ReactNode;
+    initial?: number;
+    expanded?: boolean;
+    hideText?: string;
+    showMoreText?: string;
+}
+export declare const INITIAL_ITEMS_TO_SHOW = 6;
+export declare const ShowMore: React.FC<React.PropsWithChildren<ShowMoreProps>>;

package/dist/elements/ShowMore/ShowMore.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;
+export declare const CommaSeparatedList: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

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

package/dist/elements/Skeleton/Skeleton.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { BoxProps } from "../Box";
+import { TextProps } from "../Text";
+/** SkeletonProps */
+export declare type SkeletonBoxProps = BoxProps;
+/** A black10 Box */
+export declare const SkeletonBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+/** SkeletonTextProps */
+export declare type SkeletonTextProps = TextProps;
+/**
+ * Allows you to create boxes the exact dimensions of a given piece of text
+ */
+export declare const SkeletonText: React.FC<React.PropsWithChildren<SkeletonTextProps>>;
+export declare type SkeletonProps = BoxProps;
+/**
+ * Animated wrapper for Skeletons
+ */
+export declare const Skeleton: React.FC<React.PropsWithChildren<SkeletonProps>>;

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

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

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

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

package/dist/elements/Skip/Skip.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ClickableProps } from "../Clickable";
+/**
+ * Either a button or an anchor tag
+ */
+export declare type SkipProps = ClickableProps | (ClickableProps & {
+    as: "a";
+    href: string;
+});
+/**
+ * Skip link or button.
+ * Utilize `as="a"` for an anchor tag to link to landmark IDs.
+ * Used, for example, to skip to content in the nav.
+ * Is visually hidden until focused, which reveals it.
+ */
+export declare const Skip: React.ForwardRefExoticComponent<SkipProps & React.RefAttributes<unknown>>;

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

@@ -0,0 +1,23 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const SkipButton: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SkipButtonWithSpacing: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SkipLink: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

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

package/dist/elements/Spacer/Spacer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { BoxProps } from "../../elements/Box";
+export declare type SpacerProps = {
+    x?: BoxProps["ml"];
+    y?: BoxProps["mt"];
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Used to inject space where it's needed.
+ */
+export declare const Spacer: {
+    ({ x, y, ...restProps }: SpacerProps): React.JSX.Element;
+    displayName: string;
+};