@peculiar/react-components 0.0.2-alpha.89 → 0.1.0-alpha.309

package/dist/types/hooks/use_image.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare type UseImageOptionsType = {
+    /**
+     * A callback for when the image `src` has been loaded.
+     */
+    onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    /**
+     * A callback for when there was an error loading the image `src`.
+     */
+    onError?: (error: string | React.SyntheticEvent<HTMLImageElement, Event>) => void;
+};
+declare type Status = ('loading' | 'failed' | 'pending' | 'loaded');
+/**
+ * React hook that loads an image in the browser,
+ * and let's us know the `status` so we can show image
+ * fallback if it is still `pending`
+ *
+ * @returns the status of the image loading progress
+ *
+ * @example
+ *
+ * ```jsx
+ * function App(){
+ *   const [status, image] = useImage("image.png")
+ *   return status === "loaded" ? <img src={image.src} /> : <Placeholder />
+ * }
+ * ```
+ */
+declare type UseImageReturnType = {
+    status: Status;
+    image?: HTMLImageElement;
+};
+export declare function useImage(src: string, options?: UseImageOptionsType): UseImageReturnType;
+export {};

package/dist/types/hooks/use_merged_ref.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * A React hook for merging multiple refs into one ref.
+ * @param refs React callback refs or refs created with `useRef()`, `createRef()`.
+ */
+export declare const useMergedRef: <T extends unknown>(...refs: React.Ref<T>[]) => (instance: T) => void;

package/dist/types/hooks/use_window_event_listener.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useWindowEventListener: <T extends keyof WindowEventMap>(event: T, listener: (this: Window, ev: WindowEventMap[T]) => any, deps?: React.DependencyList, removeOnUnmount?: boolean) => void;

package/dist/types/icons/arrow_drop_down_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const ArrowDropDownIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/check_circle_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CheckCircleIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/check_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CheckIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/close_circle_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CloseCircleIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/close_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CloseIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/close_small_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CloseSmallIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/dot_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const DotIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/index.d.ts

@@ -0,0 +1,9 @@
+export { CheckIcon } from './check_icon';
+export { CloseIcon } from './close_icon';
+export { CloseSmallIcon } from './close_small_icon';
+export { ArrowDropDownIcon } from './arrow_drop_down_icon';
+export { CheckCircleIcon } from './check_circle_icon';
+export { CloseCircleIcon } from './close_circle_icon';
+export { WarningIcon } from './warning_icon';
+export { DotIcon } from './dot_icon';
+export { PlusIcon } from './plus_icon';

package/dist/types/icons/plus_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const PlusIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/warning_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const WarningIcon: React.FC<IconProps>;
+export {};

package/dist/types/index.d.ts

@@ -1,15 +1,35 @@
+export * from './Alert';
 export * from './Avatar';
 export * from './Box';
 export * from './Button';
+export * from './Checkbox';
+export * from './Chip';
+export * from './CircularProgress';
 export * from './Collapse';
+export * from './Dialog';
 export * from './Drawer';
 export * from './Fab';
 export * from './Fade';
+export * from './IconButton';
+export * from './icons';
+export * from './Image';
+export * from './LinearProgress';
+export * from './Menu';
+export * from './Popover';
 export * from './Portal';
+export * from './Radio';
 export * from './Select';
+export * from './Skeleton';
+export * from './Autocomplete';
 export * from './Slide';
+export * from './Slider';
+export * from './Switch';
 export * from './Tabs';
+export * from './TextareaField';
 export * from './TextField';
+export * from './Toast';
+export * from './Tooltip';
 export * from './Typography';
 export * from './styles';
 export * from './hooks';
+export * from './OverridableComponent';

package/dist/types/styles/colors/additional.d.ts

@@ -1,6 +1,4 @@
 export declare const additional: {
-    success: string;
-    attention: string;
     'extra-1': string;
     'extra-2': string;
 };

package/dist/types/styles/colors/attention.d.ts

@@ -0,0 +1,26 @@
+export declare const generateAttentionColors: (hex?: string) => {
+    'attention-tint-5': string;
+    'attention-tint-4': string;
+    'attention-tint-3': string;
+    'attention-tint-2': string;
+    'attention-tint-1': string;
+    attention: string;
+    'attention-shade-1': string;
+    'attention-shade-2': string;
+    'attention-shade-3': string;
+    'attention-shade-4': string;
+    'attention-shade-5': string;
+};
+export declare const attention: {
+    'attention-tint-5': string;
+    'attention-tint-4': string;
+    'attention-tint-3': string;
+    'attention-tint-2': string;
+    'attention-tint-1': string;
+    attention: string;
+    'attention-shade-1': string;
+    'attention-shade-2': string;
+    'attention-shade-3': string;
+    'attention-shade-4': string;
+    'attention-shade-5': string;
+};

package/dist/types/styles/colors/grayscale.d.ts

@@ -1,14 +1,14 @@
 export declare const grayscale: {
-    black: string;
-    'gray-10': string;
-    'gray-9': string;
-    'gray-8': string;
-    'gray-7': string;
-    'gray-6': string;
-    'gray-5': string;
-    'gray-4': string;
-    'gray-3': string;
-    'gray-2': string;
-    'gray-1': string;
     white: string;
+    'gray-1': string;
+    'gray-2': string;
+    'gray-3': string;
+    'gray-4': string;
+    'gray-5': string;
+    'gray-6': string;
+    'gray-7': string;
+    'gray-8': string;
+    'gray-9': string;
+    'gray-10': string;
+    black: string;
 };

package/dist/types/styles/colors/index.d.ts

@@ -2,4 +2,6 @@ export { grayscale } from './grayscale';
 export { primary, generatePrimaryColors } from './primary';
 export { secondary, generateSecondaryColors } from './secondary';
 export { wrong, generateWrongColors } from './wrong';
+export { attention, generateAttentionColors } from './attention';
+export { success, generateSuccessColors } from './success';
 export { additional } from './additional';

package/dist/types/styles/colors/success.d.ts

@@ -0,0 +1,26 @@
+export declare const generateSuccessColors: (hex?: string) => {
+    'success-tint-5': string;
+    'success-tint-4': string;
+    'success-tint-3': string;
+    'success-tint-2': string;
+    'success-tint-1': string;
+    success: string;
+    'success-shade-1': string;
+    'success-shade-2': string;
+    'success-shade-3': string;
+    'success-shade-4': string;
+    'success-shade-5': string;
+};
+export declare const success: {
+    'success-tint-5': string;
+    'success-tint-4': string;
+    'success-tint-3': string;
+    'success-tint-2': string;
+    'success-tint-1': string;
+    success: string;
+    'success-shade-1': string;
+    'success-shade-2': string;
+    'success-shade-3': string;
+    'success-shade-4': string;
+    'success-shade-5': string;
+};

package/dist/types/styles/index.d.ts

@@ -1,5 +1,4 @@
 export { ThemeProvider } from './theme_provider';
-export { css, cx } from './css';
+export { css, cx, keyframes, cache, } from './css';
 export * from './types';
 export { defaultTheme } from './default_theme';
-export { setThemeFromBaseColors, setTheme } from './utils';

package/dist/types/styles/sizes/base.d.ts

@@ -0,0 +1,34 @@
+export declare const generateBaseSize: (grid?: number) => {
+    'base-half': string;
+    base: string;
+    'base-2': string;
+    'base-3': string;
+    'base-4': string;
+    'base-5': string;
+    'base-6': string;
+    'base-7': string;
+    'base-8': string;
+    'base-9': string;
+    'base-10': string;
+    'base-11': string;
+    'base-12': string;
+    'base-14': string;
+    'base-16': string;
+};
+export declare const base: {
+    'base-half': string;
+    base: string;
+    'base-2': string;
+    'base-3': string;
+    'base-4': string;
+    'base-5': string;
+    'base-6': string;
+    'base-7': string;
+    'base-8': string;
+    'base-9': string;
+    'base-10': string;
+    'base-11': string;
+    'base-12': string;
+    'base-14': string;
+    'base-16': string;
+};

package/dist/types/styles/sizes/index.d.ts

@@ -0,0 +1 @@
+export { base, generateBaseSize } from './base';

package/dist/types/styles/theme_provider.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import type { ThemeOptionsType } from './types';
 declare type ThemeProviderProps = {
     children: React.ReactElement;
+    theme?: ThemeOptionsType;
 };
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export {};

package/dist/types/styles/types.d.ts

@@ -1,4 +1,4 @@
-export declare type ColorType = ('primary-tint-5' | 'primary-tint-4' | 'primary-tint-3' | 'primary-tint-2' | 'primary-tint-1' | 'primary' | 'primary-shade-1' | 'primary-shade-2' | 'primary-shade-3' | 'primary-shade-4' | 'primary-shade-5' | 'secondary-tint-5' | 'secondary-tint-4' | 'secondary-tint-3' | 'secondary-tint-2' | 'secondary-tint-1' | 'secondary' | 'secondary-shade-1' | 'secondary-shade-2' | 'secondary-shade-3' | 'secondary-shade-4' | 'secondary-shade-5' | 'wrong-tint-5' | 'wrong-tint-4' | 'wrong-tint-3' | 'wrong-tint-2' | 'wrong-tint-1' | 'wrong' | 'wrong-shade-1' | 'wrong-shade-2' | 'wrong-shade-3' | 'wrong-shade-4' | 'wrong-shade-5' | 'success' | 'attention' | 'extra-1' | 'extra-2' | 'black' | 'gray-10' | 'gray-9' | 'gray-8' | 'gray-7' | 'gray-6' | 'gray-5' | 'gray-4' | 'gray-3' | 'gray-2' | 'gray-1' | 'white');
+export declare type ColorType = ('primary-tint-5' | 'primary-tint-4' | 'primary-tint-3' | 'primary-tint-2' | 'primary-tint-1' | 'primary' | 'primary-shade-1' | 'primary-shade-2' | 'primary-shade-3' | 'primary-shade-4' | 'primary-shade-5' | 'primary-contrast' | 'secondary-tint-5' | 'secondary-tint-4' | 'secondary-tint-3' | 'secondary-tint-2' | 'secondary-tint-1' | 'secondary' | 'secondary-shade-1' | 'secondary-shade-2' | 'secondary-shade-3' | 'secondary-shade-4' | 'secondary-shade-5' | 'secondary-contrast' | 'wrong-tint-5' | 'wrong-tint-4' | 'wrong-tint-3' | 'wrong-tint-2' | 'wrong-tint-1' | 'wrong' | 'wrong-shade-1' | 'wrong-shade-2' | 'wrong-shade-3' | 'wrong-shade-4' | 'wrong-shade-5' | 'wrong-contrast' | 'attention-tint-5' | 'attention-tint-4' | 'attention-tint-3' | 'attention-tint-2' | 'attention-tint-1' | 'attention' | 'attention-shade-1' | 'attention-shade-2' | 'attention-shade-3' | 'attention-shade-4' | 'attention-shade-5' | 'success-tint-5' | 'success-tint-4' | 'success-tint-3' | 'success-tint-2' | 'success-tint-1' | 'success' | 'success-shade-1' | 'success-shade-2' | 'success-shade-3' | 'success-shade-4' | 'success-shade-5' | 'black' | 'gray-10' | 'gray-9' | 'gray-8' | 'gray-7' | 'gray-6' | 'gray-5' | 'gray-4' | 'gray-3' | 'gray-2' | 'gray-1' | 'white' | 'extra-1' | 'extra-2');
 export declare type ShadowType = ('light-low' | 'light-medium' | 'light-hight' | 'dark-medium' | 'dark-hight');
 export declare type TypographyPropertiesType = {
     weight: string;
@@ -7,8 +7,16 @@ export declare type TypographyPropertiesType = {
     spacing: string;
 };
 export declare type TypographyType = ('h1' | 'h2' | 'h3' | 'h4' | 'h5' | 's1' | 's2' | 'b1' | 'b2' | 'b3' | 'btn1' | 'btn2' | 'c1' | 'c2');
+export declare type SizeType = ('base-half' | 'base' | 'base-2' | 'base-3' | 'base-4' | 'base-5' | 'base-6' | 'base-7' | 'base-8' | 'base-9' | 'base-10' | 'base-11' | 'base-12' | 'base-14' | 'base-16');
 export declare type ThemeType = {
-    palette: Record<ColorType, string>;
-    shadows: Record<ShadowType, string>;
-    typography: Record<TypographyType, TypographyPropertiesType>;
+    color: Record<ColorType, string>;
+    shadow: Record<ShadowType, string>;
+    text: Record<TypographyType, TypographyPropertiesType>;
+    size: Record<SizeType, string>;
+};
+export declare type ThemeOptionsType = {
+    color?: Partial<Record<ColorType, string>>;
+    shadow?: Partial<ThemeType['shadow']>;
+    text?: Partial<ThemeType['text']>;
+    size?: number;
 };

package/dist/types/styles/utils.d.ts

@@ -1,10 +1,31 @@
-import { ThemeType } from './types';
-export declare const createCSSVariablesFromTheme: (theme: ThemeType) => Record<string, string>;
-export declare const setTheme: (theme: ThemeType) => void;
-declare type BaseColorsType = {
-    primary?: string;
-    secondary?: string;
-    wrong?: string;
+import type { ThemeOptionsType, ColorType } from './types';
+export declare const themeCSSVariablePrefix = "pv";
+export declare const contrastThreshold = 2;
+export declare const createTheme: (options?: ThemeOptionsType) => {
+    color: Record<ColorType, string>;
+    shadow: Record<import("./types").ShadowType, string>;
+    text: Record<import("./types").TypographyType, import("./types").TypographyPropertiesType>;
+    size: Record<import("./types").SizeType, string>;
+} & {
+    color: Partial<Record<ColorType, string>>;
+    shadow: Partial<Record<import("./types").ShadowType, string>>;
+    text: Partial<Record<import("./types").TypographyType, import("./types").TypographyPropertiesType>>;
+    size: number & {
+        'base-half': string;
+        base: string;
+        'base-2': string;
+        'base-3': string;
+        'base-4': string;
+        'base-5': string;
+        'base-6': string;
+        'base-7': string;
+        'base-8': string;
+        'base-9': string;
+        'base-10': string;
+        'base-11': string;
+        'base-12': string;
+        'base-14': string;
+        'base-16': string;
+    };
 };
-export declare const setThemeFromBaseColors: (colors: BaseColorsType) => void;
-export {};
+export declare const createThemeCSSVariablesFromObject: (object: Record<string, any>) => Record<string, string>;

package/dist/types/utils/owner_document.d.ts

@@ -0,0 +1 @@
+export declare function ownerDocument(node: Node | null | undefined): Document;

package/dist/types/utils/use_enhanced_effect.d.ts

@@ -1,2 +1,2 @@
-import { useEffect } from 'react';
-export declare const useEnhancedEffect: typeof useEffect;
+import { useLayoutEffect } from 'react';
+export declare const useEnhancedEffect: typeof useLayoutEffect;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@peculiar/react-components",
   "private": false,
-  "version": "0.0.2-alpha.89+2d71db0",
+  "version": "0.1.0-alpha.309+8bfcf85",
   "author": "PeculiarVentures Team",
   "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
   "keywords": [
     "react",
     "react-component"
   ],
+  "sideEffects": false,
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "esnext": "dist/esnext/index.js",
@@ -21,42 +22,61 @@
     "directory": "packages/react-components"
   },
   "scripts": {
-    "dev": "start-storybook -p 3000 -s ./.storybook/static",
+    "start": "start-storybook -p 3000 -s ./.storybook/static",
     "prebuild": "yarn clean",
     "build": "yarn build:esm && yarn build:cjs && yarn build:esnext",
     "build:esm": "tsc -p tsconfig.build.json",
     "build:cjs": "tsc -p tsconfig.build.json -m commonjs --outDir dist/cjs",
     "build:esnext": "tsc -p tsconfig.build.json -t esnext --outDir dist/esnext",
     "build:storybook": "build-storybook -o public -s ./.storybook/static",
-    "clean": "rimraf public dist themes"
+    "clean": "rimraf public dist themes",
+    "test:unit": "jest --passWithNoTests --watchAll",
+    "test:unit:coverage": "yarn test:unit --coverage --watchAll=false",
+    "check:types": "tsc --noEmit"
   },
   "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "@types/react": "^17.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "dependencies": {
-    "@emotion/css": "^11.1.3",
-    "@peculiar/color": "^0.0.2-alpha.89+2d71db0",
-    "@types/react-transition-group": "^4.4.1",
-    "react-transition-group": "^4.4.1"
+    "@emotion/core": "^10.1.1",
+    "@emotion/css": "^11.7.1",
+    "@peculiar/color": "^0.1.0-alpha.309+8bfcf85",
+    "@popperjs/core": "^2.11.5",
+    "@types/flat": "^5.0.2",
+    "@types/react-transition-group": "^4.4.4",
+    "copy-to-clipboard": "^3.3.1",
+    "deepmerge": "^4.2.2",
+    "flat": "^5.0.2",
+    "focus-trap": "^6.7.3",
+    "nanoid": "^3.3.3",
+    "react-popper": "^2.2.5",
+    "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.2.1",
-    "@storybook/addon-actions": "^6.2.1",
-    "@storybook/addon-controls": "^6.2.1",
-    "@storybook/addon-docs": "^6.2.1",
-    "@storybook/addon-viewport": "^6.2.1",
-    "@storybook/react": "^6.2.1",
-    "@storybook/theming": "^6.2.1",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@storybook/addon-a11y": "^6.5.14",
+    "@storybook/addon-actions": "^6.5.14",
+    "@storybook/addon-controls": "^6.5.14",
+    "@storybook/addon-docs": "^6.5.14",
+    "@storybook/addon-viewport": "^6.5.14",
+    "@storybook/react": "^6.5.14",
+    "@storybook/theming": "^6.5.14",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^17.0.15",
     "awesome-typescript-loader": "^5.2.1",
-    "react": "^17.0.1",
-    "react-docgen-typescript": "^1.21.0",
-    "react-dom": "^17.0.1",
+    "jest": "^27.5.1",
+    "jest-watch-typeahead": "^1.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "storybook-addon-performance": "^0.15.1",
-    "typescript": "^4.1.3"
+    "storybook-addon-performance": "^0.16.1",
+    "ts-jest": "^27.1.4",
+    "typescript": "^4.6.3"
   },
   "publishConfig": {
     "access": "public"
@@ -65,5 +85,5 @@
     "node": ">=12.x"
   },
   "license": "MIT",
-  "gitHead": "2d71db0d7697a6c79c5a054e50c014c4171025e1"
+  "gitHead": "8bfcf854b58fb89d63f6e2adf31630105d9e0fce"
 }