@xqmsg/ui-core 0.10.0 → 0.12.0

package/dist/components/button/index.d.ts

@@ -1,20 +1,16 @@
 import React from 'react';
-import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 import buttonTheme from '../../theme/components/button';
 export interface ButtonProps {
     text: string;
     onClick?: () => void;
+    width: 'variable' | 'fixed';
     variant?: keyof typeof buttonTheme.variants;
-    colorScheme?: string;
-    type: 'button' | 'submit' | 'reset' | undefined;
+    type?: 'button' | 'submit' | 'reset';
     ariaLabel: string;
-    size?: 'sm' | 'md' | 'lg' | 'xs';
     disabled?: boolean;
     className?: string;
-    style?: React.CSSProperties;
-    width?: string | number;
 }
 /**
  * A functional React component utilized to render the `Button` component
  */
-export declare const Button: React.FC<ButtonProps & ChakraButtonProps>;
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/input/Input.stories.d.ts

@@ -3,6 +3,10 @@ import { InputProps } from '.';
 declare const meta: Meta<InputProps<StoryFormSchema>>;
 interface StoryFormSchema {
     prop?: string;
+    prop2?: string;
+    prop3?: string;
+    prop4?: string;
+    prop5?: string;
 }
 export default meta;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputProps<StoryFormSchema>>;

package/dist/components/table/TableTypes.d.ts

@@ -8,4 +8,3 @@ export declare type TableRow<K extends ReadonlyTableColumns> = {
     [k in K[number]]: ReactNode;
 };
 export declare type TableBody<R extends ReadonlyTableColumns> = TableRow<R>[];
-export declare type TableColorScheme = 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow' | 'whiteAlpha' | 'blackAlpha' | 'linkedin' | 'facebook' | 'messenger' | 'whatsapp' | 'twitter' | 'telegram';

package/dist/components/table/components/text/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TableTextProps {
+    primaryText: string;
+    secondaryText?: string;
+}
+/**
+ * A functional React component utilized to render the `TableText` component
+ */
+export declare const TableText: React.FC<TableTextProps>;

package/dist/components/table/index.d.ts

@@ -1,12 +1,10 @@
 /// <reference types="react" />
-import { ReadonlyTableColumns, TableBody, TableColorScheme, TableColumns, TableHeaders } from './TableTypes';
+import { ReadonlyTableColumns, TableBody, TableColumns, TableHeaders } from './TableTypes';
 export interface TableProps<T extends ReadonlyTableColumns> {
     columns: TableColumns;
     headers: TableHeaders<T>;
     body: TableBody<T>;
     loading?: boolean;
-    variant: 'simple' | 'striped' | 'unstyled';
-    colorScheme?: TableColorScheme;
     borderTopRadius?: boolean;
     loadMore?: () => void;
     placeholder?: string;
@@ -14,4 +12,4 @@ export interface TableProps<T extends ReadonlyTableColumns> {
 /**
  * A React component utilized to render the `Table` component
  */
-export declare function Table<T extends ReadonlyTableColumns>({ columns, headers, body, placeholder, loading, variant, colorScheme, borderTopRadius, loadMore, }: TableProps<T>): JSX.Element;
+export declare function Table<T extends ReadonlyTableColumns>({ columns, headers, body, placeholder, loading, borderTopRadius, loadMore, }: TableProps<T>): JSX.Element;

package/dist/theme/components/button.d.ts

@@ -1,231 +1,92 @@
-declare type Dict = Record<string, any>;
-declare function variantGhost(props: Dict): {
-    color: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-    bg?: undefined;
-} | {
-    color: string;
-    bg: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-};
-declare function variantOutline(props: Dict): {
-    color: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-    bg?: undefined;
-    border: string;
-    borderColor: string;
-} | {
-    color: string;
-    bg: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-    border: string;
-    borderColor: string;
-};
-declare function variantSolid(props: Dict): {
-    color: string;
-    bg: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus?: undefined;
-} | {
-    bg: string;
-    color: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
+declare const _default: {
+    baseStyle: {
+        borderRadius: string;
+        fontSize: string;
         bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-};
-/**
- * A variant that displays a solid variant when an active CSS class is
- * detected, otherwise display a ghost variant.  This is useful for pill nav filters.
- */
-declare function variantActiveSolid(props: Dict): {
-    '&.active': {
         color: string;
-        bg: string;
-        _hover: {
-            bg: string;
-        };
-        _active: {
-            bg: string;
+        px: string;
+        py: string;
+        bgGradient: string;
+        shadow: string;
+        _disabled: {
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+            pointerEvents: string;
         };
-        _focus?: undefined;
-    } | {
-        bg: string;
-        color: string;
         _hover: {
             bg: string;
         };
         _active: {
+            color: string;
             bg: string;
+            bgGradient: string;
         };
         _focus: {
-            boxShadow: string;
-        };
-    };
-    color: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-    bg?: undefined;
-} | {
-    '&.active': {
-        color: string;
-        bg: string;
-        _hover: {
-            bg: string;
-        };
-        _active: {
             bg: string;
-        };
-        _focus?: undefined;
-    } | {
-        bg: string;
-        color: string;
-        _hover: {
-            bg: string;
-        };
-        _active: {
-            bg: string;
-        };
-        _focus: {
-            boxShadow: string;
-        };
-    };
-    color: string;
-    bg: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-};
-declare function variantLink(props: Dict): {
-    padding: number;
-    height: string;
-    lineHeight: string;
-    color: string;
-    _hover: {
-        textDecoration: string;
-    };
-    _active: {
-        color: string;
-    };
-};
-declare const _default: {
-    baseStyle: {
-        lineHeight: number;
-        borderRadius: string;
-        fontWeight: string;
-        _focus: {
-            boxShadow: string;
-        };
-        _disabled: {
-            opacity: number;
-            cursor: string;
-            boxShadow: string;
+            border: string;
         };
     };
     variants: {
-        ghost: typeof variantGhost;
-        outline: typeof variantOutline;
-        solid: typeof variantSolid;
-        activeSolid: typeof variantActiveSolid;
-        link: typeof variantLink;
-        unstyled: {
-            bg: string;
-            color: string;
-            display: string;
-            lineHeight: string;
-            m: number;
-            p: number;
-        };
-    };
-    sizes: {
-        lg: {
-            borderRadius: string;
-            h: number;
-            minW: number;
-            fontSize: string;
-            px: number;
-        };
-        md: {
-            borderRadius: string;
-            h: number;
-            minW: number;
-            fontSize: string;
-            px: number;
-        };
-        sm: {
+        solid: {
             borderRadius: string;
-            h: number;
-            minW: number;
             fontSize: string;
-            px: number;
-        };
-        xs: {
+            bg: string;
+            color: string;
+            px: string;
+            py: string;
+            bgGradient: string;
+            shadow: string;
+            _disabled: {
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+                pointerEvents: string;
+            };
+            _hover: {
+                bg: string;
+            };
+            _active: {
+                color: string;
+                bg: string;
+                bgGradient: string;
+            };
+            _focus: {
+                bg: string;
+                border: string;
+            };
+        };
+        outline: {
+            color: string;
+            bg: string;
+            border: string;
+            _hover: {
+                bg: string;
+            };
+            _active: {
+                color: string;
+                bg: string;
+                bgGradient: string;
+            };
+            _focus: {
+                bg: string;
+            };
             borderRadius: string;
-            h: number;
-            minW: number;
             fontSize: string;
-            px: number;
+            px: string;
+            py: string;
+            bgGradient: string;
+            shadow: string;
+            _disabled: {
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+                pointerEvents: string;
+            };
         };
     };
     defaultProps: {
-        variant: string;
-        size: string;
-        colorScheme: string;
+        solid: string;
     };
 };
 export default _default;

package/dist/theme/components/table.d.ts

@@ -0,0 +1,28 @@
+declare const _default: {
+    parts: string[];
+    baseStyle: {
+        th: {
+            height: string;
+            width: string;
+            bg: string;
+            padding: string;
+        };
+        tr: {
+            fontSize: string;
+            display: string;
+            alignItems: string;
+            width: string;
+            height: string;
+            borderRadius: string;
+            _odd: {
+                background: string;
+            };
+        };
+        td: {
+            padding: string;
+            borderRadius: string;
+            width: string;
+        };
+    };
+};
+export default _default;

package/dist/theme/foundations/colors.d.ts

@@ -26,12 +26,31 @@ declare const colors: {
         default: string;
     };
     fill: {
-        light: string;
-        positive: string;
+        light: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            quaternary: string;
+        };
+        success: string;
         error: string;
         warning: string;
-        blue: string;
+        action: string;
     };
+    semantic: {
+        action: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    transparent: string;
+    current: string;
+    black: string;
+    white: string;
+    lightBlue: string;
+    coolGray: string;
+    darkBlue: string;
+    backdrop: string;
     whiteAlpha: {
         50: string;
         100: string;
@@ -72,14 +91,6 @@ declare const colors: {
     orange: ColorHues;
     green: ColorHues;
     blue: ColorHues;
-    transparent: string;
-    current: string;
-    black: string;
-    white: string;
-    lightBlue: string;
-    coolGray: string;
-    darkBlue: string;
-    backdrop: string;
 };
 export declare type Colors = typeof colors;
 declare const _default: {
@@ -98,12 +109,31 @@ declare const _default: {
         default: string;
     };
     fill: {
-        light: string;
-        positive: string;
+        light: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            quaternary: string;
+        };
+        success: string;
         error: string;
         warning: string;
-        blue: string;
+        action: string;
     };
+    semantic: {
+        action: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    transparent: string;
+    current: string;
+    black: string;
+    white: string;
+    lightBlue: string;
+    coolGray: string;
+    darkBlue: string;
+    backdrop: string;
     whiteAlpha: {
         50: string;
         100: string;
@@ -144,13 +174,5 @@ declare const _default: {
     orange: ColorHues;
     green: ColorHues;
     blue: ColorHues;
-    transparent: string;
-    current: string;
-    black: string;
-    white: string;
-    lightBlue: string;
-    coolGray: string;
-    darkBlue: string;
-    backdrop: string;
 };
 export default _default;