@purple/phoenix-components 4.16.0 → 4.19.0

package/dist/index.d.ts

@@ -1,22 +1,67 @@
 import * as React$1 from 'react';
-import React__default, { InputHTMLAttributes, ReactElement, JSXElementConstructor, HTMLAttributes, MouseEventHandler, FocusEventHandler, TextareaHTMLAttributes } from 'react';
+import React__default, { HTMLAttributes, InputHTMLAttributes, ReactElement, JSXElementConstructor, MouseEventHandler, FocusEventHandler, TextareaHTMLAttributes } from 'react';
+import * as styled_components from 'styled-components';
+import { IntrinsicElementsKeys } from 'styled-components';
+import { LayoutProps, FlexboxProps, GridProps, BackgroundColorProps, BackgroundProps, OpacityProps, PositionProps } from 'styled-system';
 import { DayPickerProps } from 'react-day-picker';
 import { Props } from 'tippy.js';
 import { OptionTypeBase, NamedProps } from 'react-select';
 import { TippyProps } from '@tippyjs/react';
 export { TabPanel, Tabs } from 'react-tabs';
-import * as styled_components from 'styled-components';
 
 declare type GenericComponentProps = {
     testId?: string;
     className?: string;
 };
 
+declare const Spacing: readonly ["xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "xxxl"];
+declare type Spacing = typeof Spacing[number];
+
+interface MarginProps {
+    ml?: Spacing | string | number;
+    mr?: Spacing | string | number;
+    mt?: Spacing | string | number;
+    mb?: Spacing | string | number;
+    mx?: Spacing | string | number;
+    my?: Spacing | string | number;
+    m?: Spacing | string | number;
+}
+
+interface PaddingProps {
+    pl?: Spacing | string | number;
+    pr?: Spacing | string | number;
+    pt?: Spacing | string | number;
+    pb?: Spacing | string | number;
+    px?: Spacing | string | number;
+    py?: Spacing | string | number;
+    p?: Spacing | string | number;
+}
+
 declare const ColorTheme: readonly ["primary", "success", "warning", "error", "info", "neutral"];
 declare type ColorTheme = typeof ColorTheme[number];
 declare const ButtonColorTheme: readonly ["primary", "success", "error", "neutral"];
 declare type ButtonColorTheme = typeof ButtonColorTheme[number];
 
+declare const TextAlignment: readonly ["left", "center", "right", "justify"];
+declare type TextAlignment = typeof TextAlignment[number];
+
+declare const TextColor: readonly ["darkest", "dark", "light", "lightest", "white"];
+declare type TextColor = typeof TextColor[number];
+
+interface CommonTextProps<T> extends HTMLAttributes<T>, GenericComponentProps, TextAlignProp {
+    colorTheme?: ColorTheme;
+    color?: TextColor;
+    bold?: boolean;
+}
+interface TextAlignProp {
+    textAlign?: TextAlignment;
+}
+
+interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, LayoutProps, FlexboxProps, GridProps, MarginProps, PaddingProps, BackgroundColorProps, BackgroundProps, OpacityProps, PositionProps, TextAlignProp, GenericComponentProps {
+    element?: IntrinsicElementsKeys;
+}
+declare const Box: React__default.FC<BoxProps>;
+
 declare const ComponentSize: readonly ["tiny", "small", "medium", "large"];
 declare type ComponentSize = typeof ComponentSize[number];
 declare const ComponentSizeSmallMedium: readonly ["small", "medium"];
@@ -197,28 +242,15 @@ declare const PhoenixIconsSrc: {
     readonly withdrawal: string;
     readonly wrench: string;
 };
-declare const PhoenixIconsOutlined: ("filter" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "browser" | "burger" | "calendar" | "camera" | "check" | "check-circle" | "clock" | "cog" | "copy" | "cross" | "deposit" | "document" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "download" | "edit" | "ellipsis" | "email" | "exclamation" | "exit" | "external" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "list" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "revert" | "scales" | "search" | "star" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench")[];
+declare const PhoenixIconsOutlined: ("filter" | "revert" | "document" | "list" | "search" | "email" | "copy" | "download" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "browser" | "burger" | "calendar" | "camera" | "check" | "check-circle" | "clock" | "cog" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "scales" | "star" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench")[];
 declare type PhoenixIconsOutlined = keyof typeof PhoenixIconsOutlinedSrc;
 declare const PhoenixIconsColored: ("calendar-primary" | "camera-primary" | "email-primary" | "exclamation-error" | "exclamation-warning" | "house-primary" | "id-card-primary" | "lock-primary" | "lock-success" | "paper-primary" | "passport-primary" | "photo-user-primary" | "pin-primary" | "trash-error")[];
 declare type PhoenixIconsColored = keyof typeof PhoenixIconsColoredSrc;
-declare const PhoenixIcons: ("filter" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "browser" | "burger" | "calendar" | "camera" | "check" | "check-circle" | "clock" | "cog" | "copy" | "cross" | "deposit" | "document" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "download" | "edit" | "ellipsis" | "email" | "exclamation" | "exit" | "external" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "list" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "revert" | "scales" | "search" | "star" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench" | "calendar-primary" | "camera-primary" | "email-primary" | "exclamation-error" | "exclamation-warning" | "house-primary" | "id-card-primary" | "lock-primary" | "lock-success" | "paper-primary" | "passport-primary" | "photo-user-primary" | "pin-primary" | "trash-error")[];
+declare const PhoenixIcons: ("filter" | "revert" | "document" | "list" | "search" | "email" | "copy" | "download" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "browser" | "burger" | "calendar" | "camera" | "check" | "check-circle" | "clock" | "cog" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "scales" | "star" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench" | "calendar-primary" | "camera-primary" | "email-primary" | "exclamation-error" | "exclamation-warning" | "house-primary" | "id-card-primary" | "lock-primary" | "lock-success" | "paper-primary" | "passport-primary" | "photo-user-primary" | "pin-primary" | "trash-error")[];
 declare type PhoenixIcons = keyof typeof PhoenixIconsSrc;
 
 declare type IconType = PhoenixIconsOutlined | React.ReactElement | string;
 
-declare const Spacing: readonly ["xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "xxxl"];
-declare type Spacing = typeof Spacing[number];
-
-interface MarginProps {
-    ml?: Spacing | string | number;
-    mr?: Spacing | string | number;
-    mt?: Spacing | string | number;
-    mb?: Spacing | string | number;
-    mx?: Spacing | string | number;
-    my?: Spacing | string | number;
-    m?: Spacing | string | number;
-}
-
 interface CommonButtonProps extends MarginProps {
     colorTheme?: ButtonColorTheme;
     size?: ComponentSize;
@@ -239,20 +271,10 @@ interface ButtonGroupProps extends GenericComponentProps {
 }
 declare const ButtonGroup: React__default.FC<ButtonGroupProps>;
 
-interface PaddingProps {
-    pl?: Spacing | string | number;
-    pr?: Spacing | string | number;
-    pt?: Spacing | string | number;
-    pb?: Spacing | string | number;
-    px?: Spacing | string | number;
-    py?: Spacing | string | number;
-    p?: Spacing | string | number;
-}
-
 interface CardProps extends PaddingProps, MarginProps, GenericComponentProps {
     elevated?: boolean;
     disabled?: boolean;
-    onClick?: () => void;
+    onClick?: React__default.MouseEventHandler<HTMLDivElement>;
 }
 declare const Card: React__default.FC<CardProps>;
 
@@ -267,12 +289,12 @@ declare type CheckboxProps = CheckboxRadioCommonProps;
 declare const Checkbox: React__default.VoidFunctionComponent<CheckboxProps>;
 
 interface ClosableButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement>, GenericComponentProps {
-    onClose?: () => void;
+    onClose?: React__default.MouseEventHandler<HTMLButtonElement>;
 }
 declare const ClosableButton: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ClosableButtonProps> & React__default.RefAttributes<HTMLButtonElement>>;
 
 interface ClosableItemProps extends GenericComponentProps {
-    onClose?: () => void;
+    onClose?: React__default.MouseEventHandler<HTMLButtonElement>;
 }
 declare const ClosableItem: React__default.FC<ClosableItemProps>;
 
@@ -370,20 +392,9 @@ interface FileUploadProps extends GenericComponentProps {
 }
 declare const FileUpload: React__default.FC<FileUploadProps>;
 
-declare const TextAlignment: readonly ["left", "center", "right", "justify"];
-declare type TextAlignment = typeof TextAlignment[number];
+declare const Flex: React__default.FC<BoxProps>;
 
-declare const TextColor: readonly ["darkest", "dark", "light", "lightest", "white"];
-declare type TextColor = typeof TextColor[number];
-
-interface CommonTextProps<T> extends HTMLAttributes<T>, GenericComponentProps, TextAlignProp {
-    colorTheme?: ColorTheme;
-    color?: TextColor;
-    bold?: boolean;
-}
-interface TextAlignProp {
-    textAlign?: TextAlignment;
-}
+declare const Grid: React__default.FC<BoxProps>;
 
 declare type HeadingSizes = 'h1' | 'h2' | 'h3' | 'h4';
 interface HeadingProps extends CommonTextProps<HTMLHeadingElement>, PaddingProps, MarginProps {
@@ -433,11 +444,22 @@ interface MenuItemProps extends GenericComponentProps {
     target?: string;
     href?: string;
     onClick?: MouseEventHandler<HTMLAnchorElement>;
-    icon?: IconType;
+    icon?: IconType | PhoenixIconsColored;
     colorTheme?: ColorTheme;
+    disabled?: boolean;
 }
 declare const MenuItem: React__default.FC<MenuItemProps>;
 
+interface ModalProps extends GenericComponentProps, PaddingProps, MarginProps {
+    open: boolean;
+    onClose: () => void;
+    showCloseButton?: boolean;
+    size?: ComponentSize;
+    animate?: boolean;
+    center?: boolean;
+}
+declare const Modal: React__default.FC<ModalProps>;
+
 declare type SubRange = number | [number] | [number, number];
 interface CommonSliderProps extends GenericComponentProps {
     range: {
@@ -457,11 +479,12 @@ interface MultiSliderProps extends CommonSliderProps {
 }
 declare const MultiSlider: React__default.FC<MultiSliderProps>;
 
-interface NoticeProps extends GenericComponentProps {
+interface NoticeProps extends GenericComponentProps, MarginProps, PaddingProps {
     colorTheme?: ColorTheme;
     buttonText?: string;
     onClick?: (event: React__default.MouseEvent) => void;
     onClose?: (event: React__default.MouseEvent) => void;
+    breakpoint?: number;
 }
 declare const Notice: React__default.FC<NoticeProps>;
 
@@ -770,6 +793,17 @@ declare const prefixedTheme: {
                 h4: number;
             };
         };
+        modal: {
+            zIndex: number;
+            overlayBackground: string;
+            windowShadow: string;
+            size: {
+                tiny: number;
+                small: number;
+                medium: number;
+                large: number;
+            };
+        };
         multiSelect: {
             multiValueLabel: {
                 paddingX: {
@@ -833,4 +867,4 @@ declare const prefixedTheme: {
 
 declare const GlobalStyles: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
 
-export { Button, ButtonColorTheme, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, Checkbox, CheckboxProps, ClosableButton, ClosableButtonProps, ClosableItem, ClosableItemProps, Collapsible, CollapsibleCard, CollapsibleCardProps, CollapsibleProps, ColorTheme, ComponentSize, ComponentSizeMediumLarge, ComponentSizeSmallMedium, ComponentSizeSmallMediumLarge, DateInput, DateInputProps, DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps, DateRangeValue, DateValue, Dropdown, DropdownProps, FileUpload, FileUploadProps, FileWithPreview, GlobalStyles, Heading, HeadingProps, HeadingSizes, HorizontalDivider, HorizontalDividerProps, Icon, IconAlignment, IconProps, IconType, Label, LabelProps, Link, LinkButton, LinkButtonProps, LinkProps, Menu, MenuDivider, MenuItem, MenuItemProps, MenuProps, MultiSlider, MultiSliderProps, MultiSliderValue, Notice, NoticeProps, Paragraph, ParagraphProps, PhoenixIcons, PhoenixIconsColored, PhoenixIconsColoredSrc, PhoenixIconsOutlined, PhoenixIconsOutlinedSrc, PhoenixIconsSrc, Radio, RadioProps, Select, SelectNative, SelectNativeProps, SelectOption, SelectPicker, SelectPickerOption, SelectPickerProps, SelectProps, Slider, SliderProps, SliderValue, Spacer, SpacerProps, Spacing, Spinner, SpinnerProps, Tab, TabFunctionProps, TabList, TabListProps, TabProps, Tag, TagProps, Text, TextArea, TextAreaProps, TextColor, TextInput, TextInputProps, TextProps, prefixedTheme as Theme, TimezonePicker, TimezonePickerProps, Tooltip, TooltipProps, getOptions as getTimezoneOptions };
+export { Box, BoxProps, Button, ButtonColorTheme, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, Checkbox, CheckboxProps, ClosableButton, ClosableButtonProps, ClosableItem, ClosableItemProps, Collapsible, CollapsibleCard, CollapsibleCardProps, CollapsibleProps, ColorTheme, ComponentSize, ComponentSizeMediumLarge, ComponentSizeSmallMedium, ComponentSizeSmallMediumLarge, DateInput, DateInputProps, DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps, DateRangeValue, DateValue, Dropdown, DropdownProps, FileUpload, FileUploadProps, FileWithPreview, Flex, GlobalStyles, Grid, Heading, HeadingProps, HeadingSizes, HorizontalDivider, HorizontalDividerProps, Icon, IconAlignment, IconProps, IconType, Label, LabelProps, Link, LinkButton, LinkButtonProps, LinkProps, Menu, MenuDivider, MenuItem, MenuItemProps, MenuProps, Modal, ModalProps, MultiSlider, MultiSliderProps, MultiSliderValue, Notice, NoticeProps, Paragraph, ParagraphProps, PhoenixIcons, PhoenixIconsColored, PhoenixIconsColoredSrc, PhoenixIconsOutlined, PhoenixIconsOutlinedSrc, PhoenixIconsSrc, Radio, RadioProps, Select, SelectNative, SelectNativeProps, SelectOption, SelectPicker, SelectPickerOption, SelectPickerProps, SelectProps, Slider, SliderProps, SliderValue, Spacer, SpacerProps, Spacing, Spinner, SpinnerProps, Tab, TabFunctionProps, TabList, TabListProps, TabProps, Tag, TagProps, Text, TextArea, TextAreaProps, TextColor, TextInput, TextInputProps, TextProps, prefixedTheme as Theme, TimezonePicker, TimezonePickerProps, Tooltip, TooltipProps, getOptions as getTimezoneOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@purple/phoenix-components",
-	"version": "4.16.0",
+	"version": "4.19.0",
 	"description": "",
 	"main": "dist/bundle.umd.js",
 	"module": "dist/bundle.esm.js",
@@ -60,7 +60,8 @@
 		"react-inlinesvg": "~2.3.0",
 		"react-pdf": "~5.3.2",
 		"react-select": "~4.3.1",
-		"react-tabs": "~3.2.2"
+		"react-tabs": "~3.2.2",
+		"styled-system": "~5.1.5"
 	},
 	"peerDependencies": {
 		"react": ">=16.3",
@@ -130,7 +131,6 @@
 		"standard-version": "^9.3.0",
 		"storybook-addon-designs": "^6.0.0",
 		"styled-components": "^5.3.0",
-		"styled-system": "^5.1.5",
 		"ts-transformer-keys": "^0.4.3",
 		"tslib": "^2.2.0",
 		"typescript": "~4.2.2",