@purple/phoenix-components 5.3.0 → 5.4.0

package/dist/index.d.ts

@@ -51,12 +51,23 @@ declare type TextColor = typeof TextColor[number];
 declare const isTextColor: (color?: Color) => color is "primary" | "secondary" | "tertiary" | "quaternary";
 declare type Color = TextColor | ColorTheme | CSSColor;
 
+declare const Sizing: readonly ["xs", "sm", "md", "lg"];
+declare type Sizing = typeof Sizing[number];
+declare const isSizing: (size?: Sizing | CSSValue) => size is "xs" | "sm" | "md" | "lg";
+declare const SizingSmMd: readonly ["sm", "md"];
+declare type SizingSmMd = typeof SizingSmMd[number];
+declare const SizingMdLg: readonly ["md", "lg"];
+declare type SizingMdLg = typeof SizingMdLg[number];
+declare const SizingSmMdLg: readonly ["sm", "md", "lg"];
+declare type SizingSmMdLg = typeof SizingSmMdLg[number];
+
 declare const TextAlignment: readonly ["left", "center", "right", "justify"];
 declare type TextAlignment = typeof TextAlignment[number];
 
 interface CommonTextProps<T> extends HTMLAttributes<T>, GenericComponentProps, TextAlignProp {
     color?: Color;
     bold?: boolean;
+    size?: Sizing | CSSValue;
 }
 interface TextAlignProp {
     textAlign?: TextAlignment;
@@ -283,16 +294,6 @@ declare type PhoenixIcons = keyof typeof PhoenixIconsSrc;
 
 declare type IconType = PhoenixIconsOutlined | React.ReactElement | string;
 
-declare const Sizing: readonly ["xs", "sm", "md", "lg"];
-declare type Sizing = typeof Sizing[number];
-declare const isSizing: (size?: Sizing | CSSValue) => size is "xs" | "sm" | "md" | "lg";
-declare const SizingSmMd: readonly ["sm", "md"];
-declare type SizingSmMd = typeof SizingSmMd[number];
-declare const SizingMdLg: readonly ["md", "lg"];
-declare type SizingMdLg = typeof SizingMdLg[number];
-declare const SizingSmMdLg: readonly ["sm", "md", "lg"];
-declare type SizingSmMdLg = typeof SizingSmMdLg[number];
-
 interface CommonButtonProps extends MarginProps {
     colorTheme?: ColorTheme;
     size?: Sizing;
@@ -352,8 +353,13 @@ interface CollapsibleProps extends GenericComponentProps {
 declare const Collapsible: React$1.FC<PropsWithChildren<CollapsibleProps>>;
 
 interface CollapsibleCardProps extends CardProps, GenericComponentProps {
-    heading: string;
-    rightContent?: React$1.ReactNode;
+    heading: ReactElement | string;
+    headingMarginBottom?: Spacing | CSSValue;
+    rightContent?: ReactElement;
+    initialOpen?: boolean;
+    arrowReverse?: boolean;
+    arrow?: ReactElement;
+    showCard?: boolean;
 }
 declare const CollapsibleCard: React$1.FC<PropsWithChildren<CollapsibleCardProps>>;
 
@@ -503,7 +509,6 @@ declare const Grid: React$1.FC<BoxProps>;
 declare type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4';
 interface HeadingProps extends CommonTextProps<HTMLHeadingElement>, PaddingProps, MarginProps {
     element?: HeadingElement;
-    size?: Sizing | CSSValue;
 }
 declare const Heading: React$1.FC<HeadingProps>;
 
@@ -628,7 +633,6 @@ interface NoticeProps extends GenericComponentProps, MarginProps, PaddingProps {
 declare const Notice: React$1.FC<PropsWithChildren<NoticeProps>>;
 
 interface ParagraphProps extends CommonTextProps<HTMLParagraphElement>, PaddingProps, MarginProps {
-    size?: Sizing | CSSValue;
     lineHeight?: Sizing | CSSValue;
 }
 declare const Paragraph: React$1.FC<ParagraphProps>;
@@ -718,7 +722,6 @@ interface TagProps extends GenericComponentProps, MarginProps {
 declare const Tag: React$1.FC<TagProps>;
 
 interface TextProps extends CommonTextProps<HTMLDivElement>, PaddingProps, MarginProps {
-    size?: Sizing | CSSValue;
     ellipsize?: boolean;
     element?: 'div' | 'span';
     title?: string;
@@ -738,6 +741,14 @@ declare const TimezonePicker: React$1.FC<TimezonePickerProps>;
 
 declare const getOptions: () => SelectOption[];
 
+interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, GenericComponentProps {
+    colorTheme?: ColorTheme;
+    label?: React$1.ReactNode;
+    warning?: FormControlWarningType;
+    error?: FormControlErrorType;
+}
+declare const Toggle: React$1.FC<ToggleProps>;
+
 declare type TooltipProps = Omit<TippyProps, 'theme'> & GenericComponentProps;
 declare const Tooltip: React$1.FC<TooltipProps>;
 
@@ -1516,6 +1527,63 @@ declare const prefixedTheme: {
             fontWeight: string;
             borderWidth: string;
         };
+        toggle: {
+            sizing: {
+                container: {
+                    md: {
+                        width: string;
+                        height: string;
+                    };
+                };
+                slider: {
+                    md: string;
+                };
+            };
+            color: {
+                background: {
+                    container: {
+                        off: string;
+                        offDisabled: string;
+                        offInteraction: string;
+                    };
+                    slider: {
+                        off: string;
+                        offDisabled: string;
+                    };
+                };
+                border: {
+                    container: {
+                        off: string;
+                        offDisabled: string;
+                        offInteraction: string;
+                    };
+                };
+            };
+        };
+        modal: {
+            color: {
+                background: {
+                    overlay: string;
+                };
+            };
+            sizing: {
+                maxWidth: {
+                    xs: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                };
+            };
+            boxShadow: {
+                x: string;
+                y: string;
+                blur: string;
+                spread: string;
+                color: string;
+                type: string;
+            };
+            borderRadius: string;
+        };
         color: {
             background: {
                 primary: string;
@@ -1748,30 +1816,6 @@ declare const prefixedTheme: {
                 };
             };
         };
-        modal: {
-            sizing: {
-                maxWidth: {
-                    xs: string;
-                    sm: string;
-                    md: string;
-                    lg: string;
-                };
-            };
-            boxShadow: {
-                x: string;
-                y: string;
-                blur: string;
-                spread: string;
-                color: string;
-                type: string;
-            };
-            borderRadius: string;
-            color: {
-                background: {
-                    overlay: string;
-                };
-            };
-        };
         tabs: {
             borderWidth: {
                 tab: {
@@ -1806,4 +1850,4 @@ interface BoxShadowObj {
 }
 declare const getBoxShadow: (shadow: BoxShadowObj | BoxShadowObj[]) => string;
 
-export { Box, BoxProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, Checkbox, CheckboxProps, ClosableButton, ClosableButtonProps, ClosableItem, ClosableItemProps, Collapsible, CollapsibleCard, CollapsibleCardProps, CollapsibleProps, Color, ColorAndTheme, ColorTheme, DateInput, DateInputProps, DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps, DateRangeValue, DateValue, Dropdown, DropdownProps, FileUpload, FileUploadProps, FileWithPreview, Flex, GlobalStyles, Grid, Heading, HeadingElement, HeadingProps, HorizontalDivider, HorizontalDividerProps, Icon, IconAlignment, IconProps, IconType, Image, Label, LabelProps, Link, LinkButton, LinkButtonProps, LinkProps, List, ListItem, ListItemProps, ListProps, Menu, MenuItem, MenuItemProps, MenuProps, Modal, ModalProps, MultiSelect, MultiSelectProps, MultiSlider, MultiSliderProps, MultiSliderValue, Notice, NoticeProps, NumberInput, NumberInputProps, Paragraph, ParagraphProps, PhoenixIcons, PhoenixIconsColored, PhoenixIconsColoredSrc, PhoenixIconsOutlined, PhoenixIconsOutlinedSrc, PhoenixIconsSrc, Radio, RadioProps, Select, SelectNative, SelectNativeProps, SelectOption, SelectPicker, SelectPickerOption, SelectPickerProps, SelectProps, Sizing, SizingMdLg, SizingSmMd, SizingSmMdLg, Slider, SliderProps, SliderValue, Spacing, Spinner, SpinnerProps, Tab, TabFunctionProps, TabList, TabListProps, TabProps, Tag, TagProps, Text, TextArea, TextAreaProps, TextColor, TextInput, TextInputProps, TextProps, prefixedTheme as Theme, TimezonePicker, TimezonePickerProps, Tooltip, TooltipProps, getBoxShadow, getLineHeightUnitless, getSpacingCssValue, getTextColor, getOptions as getTimezoneOptions, getUnitlessNumber, isColorTheme, isSizing, isSpacing, isTextColor };
+export { Box, BoxProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, Checkbox, CheckboxProps, ClosableButton, ClosableButtonProps, ClosableItem, ClosableItemProps, Collapsible, CollapsibleCard, CollapsibleCardProps, CollapsibleProps, Color, ColorAndTheme, ColorTheme, DateInput, DateInputProps, DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps, DateRangeValue, DateValue, Dropdown, DropdownProps, FileUpload, FileUploadProps, FileWithPreview, Flex, GlobalStyles, Grid, Heading, HeadingElement, HeadingProps, HorizontalDivider, HorizontalDividerProps, Icon, IconAlignment, IconProps, IconType, Image, Label, LabelProps, Link, LinkButton, LinkButtonProps, LinkProps, List, ListItem, ListItemProps, ListProps, Menu, MenuItem, MenuItemProps, MenuProps, Modal, ModalProps, MultiSelect, MultiSelectProps, MultiSlider, MultiSliderProps, MultiSliderValue, Notice, NoticeProps, NumberInput, NumberInputProps, Paragraph, ParagraphProps, PhoenixIcons, PhoenixIconsColored, PhoenixIconsColoredSrc, PhoenixIconsOutlined, PhoenixIconsOutlinedSrc, PhoenixIconsSrc, Radio, RadioProps, Select, SelectNative, SelectNativeProps, SelectOption, SelectPicker, SelectPickerOption, SelectPickerProps, SelectProps, Sizing, SizingMdLg, SizingSmMd, SizingSmMdLg, Slider, SliderProps, SliderValue, Spacing, Spinner, SpinnerProps, Tab, TabFunctionProps, TabList, TabListProps, TabProps, Tag, TagProps, Text, TextArea, TextAreaProps, TextColor, TextInput, TextInputProps, TextProps, prefixedTheme as Theme, TimezonePicker, TimezonePickerProps, Toggle, Tooltip, TooltipProps, getBoxShadow, getLineHeightUnitless, getSpacingCssValue, getTextColor, getOptions as getTimezoneOptions, getUnitlessNumber, isColorTheme, isSizing, isSpacing, isTextColor };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@purple/phoenix-components",
-	"version": "5.3.0",
+	"version": "5.4.0",
 	"description": "",
 	"main": "dist/bundle.umd.js",
 	"module": "dist/bundle.esm.js",
@@ -29,7 +29,8 @@
 	"scripts": {
 		"lint": "eslint 'src' '.storybook' --ext .ts,.tsx,.js,.jsx,.json,.d.ts",
 		"lint:fix": "eslint 'src' '.storybook' --ext .ts,.tsx,.js,.jsx,.json,.d.ts --fix",
-		"build:tokens": "(git -C my-axiory-tokens pull || git clone https://github.com/purple-technology/my-axiory-tokens.git) && ts-node --project ./ts-node.tsconfig.json --files src/tokens/build.ts && eslint 'src/tokens/' --ext .json --fix",
+		"build:tokens": "ts-node --project ./ts-node.tsconfig.json --files src/tokens/build.ts && eslint 'src/tokens/' --ext .json --fix",
+		"tokens": "(git -C my-axiory-tokens pull || git clone https://github.com/purple-technology/my-axiory-tokens.git) && npm run build:tokens",
 		"build": "rollup -c && rm -r ./dist/types",
 		"build-watch": "rollup -c -w",
 		"prepare": "husky install",
@@ -55,6 +56,7 @@
 		"@react-hook/previous": "~1.0.1",
 		"@tippyjs/react": "~4.2.6",
 		"countries-and-timezones": "^3.3.0",
+		"formik": "~2.2.9",
 		"is-mobile": "~3.1.1",
 		"lodash": "~4.17.21",
 		"nanoid": "~3.3.4",
@@ -114,7 +116,6 @@
 		"eslint-plugin-react": "^7.23.2",
 		"eslint-plugin-react-hooks": "^4.2.0",
 		"eslint-plugin-simple-import-sort": "^7.0.0",
-		"formik": "^2.1.4",
 		"husky": "^7.0.1",
 		"jest": "^27.2.4",
 		"lint-staged": "^12.0.0",