Merge pull request #33 from sippy-platform/0.15

Mellow UI 0.15

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sippy-platform/mellow-ui",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "React components for the Mellow Design System.",
   "main": "./dist/mellow-ui.umd.js",
   "module": "./dist/mellow-ui.es.js",
@@ -34,10 +34,10 @@
     "@headlessui/react": "1.6.6",
     "clsx": "1.2.1",
     "react-element-to-jsx-string": "15.0.0",
-    "sass": "1.54.4"
+    "sass": "1.54.5"
   },
   "devDependencies": {
-    "@types/node": "18.7.6",
+    "@types/node": "18.7.9",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
     "@vitejs/plugin-react": "2.0.1",

src/components/Alert/Alert.tsx

@@ -2,6 +2,8 @@ import React, { ReactNode } from 'react';
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 export interface AlertProps {
   /**
    * The variant of the button.
@@ -10,7 +12,7 @@ export interface AlertProps {
   /**
    * The color of the button, only works when the variant is `color` or `hover`
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * Custom classes for the dialog
    */

src/components/Avatar/Avatar.tsx

@@ -3,6 +3,8 @@ import useColor from '@hooks/useColor';
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 export interface AvatarProps {
   /**
    * The text for the avatar
@@ -19,7 +21,7 @@ export interface AvatarProps {
   /**
    * The color of the avatar, only works when the variant is `color` or `hover`
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent' | true;
+  color?: MellowColor | true;
   /**
    * The avatar size.
    */

src/components/BottomBar/BottomBar.tsx

@@ -2,11 +2,13 @@ import { ReactNode } from 'react';
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 export interface BottomBarProps {
   /**
    * The color of the bottom bar
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * Custom classes for the bottom nav
    */

src/components/Breadcrumb/Breadcrumb.tsx

@@ -2,11 +2,13 @@ import { ReactNode } from 'react';
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 export interface BreadcrumbProps {
   /**
    * The color of the breadcrumb
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * Custom classes for the bottom nav
    */

src/components/Button/Button.tsx

@@ -2,6 +2,8 @@ import { ElementType, ButtonHTMLAttributes, ReactNode, useMemo, ComponentPropsWi
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 interface IButtonProps<T> extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * The variant of the button.
@@ -10,7 +12,7 @@ interface IButtonProps<T> extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * The color of the button, only works when the variant is `color` or `hover`
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * The button size.
    */

src/components/Dropdown/Dropdown.tsx

@@ -2,11 +2,13 @@ import { Menu } from '@headlessui/react';
 import clsx from 'clsx';
 import React, { ReactNode } from 'react';
 
+import { MellowColor } from '@types';
+
 export interface DropdownProps {
   /**
    * The color of the button, only works when the variant is `color` or `hover`
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * Value of the textarea
    */