@xqmsg/ui-core 0.8.0

package/dist/components/loading/LoadingIndicator.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { LoadingIndicatorProps } from '.';
+declare const meta: Meta<LoadingIndicatorProps>;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, LoadingIndicatorProps>;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface LoadingIndicatorProps {
+    size?: 'sm' | 'md' | 'lg' | 'xs' | 'xl';
+    text?: string;
+    thickness?: string;
+    speed?: string;
+    className?: string;
+}
+/**
+ * A functional React component utilized to render the `LoadingIndicator` component
+ */
+export declare const LoadingIndicator: React.FC<LoadingIndicatorProps>;

package/dist/components/table/Table.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+import { TableProps } from '.';
+declare const tableColumns: string[];
+declare const meta: Meta<TableProps<typeof tableColumns>>;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableProps<string[]>>;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export declare type TableColumns = string[];
+export declare type ReadonlyTableColumns = Readonly<TableColumns>;
+export declare type TableHeaders<K extends ReadonlyTableColumns> = {
+    [k in K[number]]: ReactNode;
+};
+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/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ReadonlyTableColumns, TableBody, TableColorScheme, 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;
+}
+/**
+ * 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;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface TableLoadingRowsProps {
+    isLoading: boolean;
+    onLoadMore: () => void;
+}
+/**
+ * A loading spinner rendered after the table to indicate more rows are being loaded.
+ */
+export declare const TableLoadingRows: React.FC<TableLoadingRowsProps>;
+export {};

package/dist/components/table/utils/generateTableColumns.d.ts

@@ -0,0 +1,6 @@
+import { TableColumns } from '../TableTypes';
+/**
+ * This function is responsible for returning an array as a const, so the generic type `TableBody`
+ * may accept it as an argument and use the elements of the array as keys.
+ */
+export declare function generateTableColumnsAsConst<T extends TableColumns>(arr: T): readonly string[];

package/dist/components/tabs/TabsWrapper.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+import { TableProps } from '../table';
+import { TabsWrapperProps } from '.';
+declare const meta: Meta<TabsWrapperProps>;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableProps<string[]>>;

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

@@ -0,0 +1,10 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+export interface TabsWrapperProps extends PropsWithChildren {
+    navIndex: number;
+    setNavIndex: (index: number) => void;
+    navItems: ReactNode[];
+}
+/**
+ * A functional React component utilized to render the `TableNavWrapper` component
+ */
+export declare const TabsWrapper: React.FC<TabsWrapperProps>;

package/dist/components/text/Text.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { TextProps } from '.';
+declare const meta: Meta<TextProps>;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TextProps>;

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

@@ -0,0 +1,19 @@
+import React, { PropsWithChildren } from 'react';
+import { TypographyProps } from '@chakra-ui/react';
+import textTheme from '../../theme/components/text';
+import typography from '../../theme/foundations/typography';
+export interface TextProps extends PropsWithChildren, TypographyProps {
+    variant: keyof typeof textTheme.variants;
+    color?: string;
+    fontSize?: keyof typeof typography.fontSizes;
+    lineHeight?: keyof typeof typography.lineHeights;
+    letterSpacing?: keyof typeof typography.letterSpacings;
+    fontWeight?: keyof typeof typography.fontWeights;
+    className?: string;
+}
+/**
+ * A functional React component utilized to render the `Text` component. The component is mainly
+ * controlled by by the `variant` prop which determines `fontSize`, `fontWeight`, etc.
+ * Also extends `TypographyProps`.
+ */
+export declare const Text: React.FC<TextProps>;

package/dist/hooks/useDeepEffect.d.ts

@@ -0,0 +1,5 @@
+import { DependencyList, EffectCallback } from 'react';
+/**
+ * Same as useEffect but does a deep comparison
+ */
+export default function useDeepEffect(func: EffectCallback, dependencies: DependencyList): void;

package/dist/hooks/useDidMountEffect.d.ts

@@ -0,0 +1,2 @@
+declare const useDidMountEffect: (func: () => void, deps: unknown[]) => void;
+export default useDidMountEffect;

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export * from './components/banner';
+export * from './components/breadcrumbs';
+export * from './components/button';
+export * from './components/button/google';
+export * from './components/button/spinner';
+export * from './components/form';
+export * from './components/form/section';
+export * from './components/input';
+export * from './components/layout';
+export * from './components/loading';
+export * from './components/table';
+export * from './components/tabs';
+export * from './components/text';
+export * from './theme/provider';
+export * from './components/form/utils/formErrors';

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./ui-core.cjs.production.min.js')
+} else {
+  module.exports = require('./ui-core.cjs.development.js')
+}

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

@@ -0,0 +1,46 @@
+declare function variantPositive(): {
+    container: {
+        bg: string;
+    };
+};
+declare function variantWarning(): {
+    container: {
+        bg: string;
+    };
+};
+declare function variantError(): {
+    container: {
+        bg: string;
+    };
+};
+declare function variantNeutral(): {
+    container: {
+        bg: string;
+    };
+};
+declare const _default: {
+    parts: string[];
+    baseStyle: {
+        container: {
+            px: string;
+            py: string;
+        };
+        description: {
+            width: string;
+            fontSize: string;
+            textAlign: string;
+            color: string;
+            lineHeight: string;
+        };
+    };
+    variants: {
+        positive: typeof variantPositive;
+        warning: typeof variantWarning;
+        error: typeof variantError;
+        neutral: typeof variantNeutral;
+    };
+    defaultProps: {
+        variant: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,32 @@
+declare type Dict = Record<string, any>;
+declare function variantSolid(props: Dict): {
+    bg: string;
+    color: string;
+};
+declare function variantSubtle(props: Dict): {
+    bg: string;
+    color: string;
+};
+declare function variantOutline(props: Dict): {
+    color: any;
+    boxShadow: string;
+};
+declare const _default: {
+    baseStyle: {
+        px: number;
+        textTransform: string;
+        fontSize: string;
+        borderRadius: string;
+        fontWeight: string;
+    };
+    variants: {
+        solid: typeof variantSolid;
+        subtle: typeof variantSubtle;
+        outline: typeof variantOutline;
+    };
+    defaultProps: {
+        variant: string;
+        colorScheme: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,231 @@
+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: {
+        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;
+        };
+        _focus?: undefined;
+    } | {
+        bg: string;
+        color: string;
+        _hover: {
+            bg: string;
+        };
+        _active: {
+            bg: 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;
+        };
+    };
+    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: {
+            borderRadius: string;
+            h: number;
+            minW: number;
+            fontSize: string;
+            px: number;
+        };
+        xs: {
+            borderRadius: string;
+            h: number;
+            minW: number;
+            fontSize: string;
+            px: number;
+        };
+    };
+    defaultProps: {
+        variant: string;
+        size: string;
+        colorScheme: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,27 @@
+declare const _default: {
+    baseStyle: {
+        fontFamily: string;
+        fontSize: string;
+        px: string;
+        borderRadius: string;
+    };
+    variants: {
+        solid: (props: Record<string, any>) => {
+            bg: string;
+            color: string;
+        };
+        subtle: (props: Record<string, any>) => {
+            bg: string;
+            color: string;
+        };
+        outline: (props: Record<string, any>) => {
+            color: any;
+            boxShadow: string;
+        };
+    };
+    defaultProps: {
+        variant: string;
+        colorScheme: string;
+    };
+};
+export default _default;

package/dist/theme/components/form-error.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    parts: string[];
+    baseStyle: (props: Record<string, any>) => {
+        text: {
+            color: string;
+            mt: number;
+            lineHeight: string;
+            fontSize: string;
+        };
+        icon: {
+            mr: string;
+            color: string;
+        };
+    };
+};
+export default _default;

package/dist/theme/components/form-label.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    baseStyle: {
+        fontSize: string;
+        mr: number;
+        mb: number;
+        fontWeight: string;
+        color: string;
+        transition: string;
+        opacity: number;
+        _disabled: {
+            opacity: number;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,16 @@
+declare const _default: {
+    parts: string[];
+    baseStyle: (props: Record<string, any>) => {
+        requiredIndicator: {
+            ml: number;
+            color: string;
+        };
+        helperText: {
+            mt: number;
+            color: string;
+            lineHeight: string;
+            fontSize: string;
+        };
+    };
+};
+export default _default;