@peculiar/react-components 0.0.2-alpha.301 → 0.0.2-alpha.303

package/dist/esnext/Typography/typography.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { forwardRef } from '../system';
 import { css, cx, } from '../styles';
 const stylesBase = () => css({
     label: 'Typography',
@@ -21,8 +22,8 @@ const stylesNoWrap = () => css({
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
 });
-export const Typography = React.forwardRef((props, ref) => {
-    const { variant, className, color, noWrap, component: componentProp, ...other } = props;
+export const Typography = forwardRef((props, ref) => {
+    const { variant, className, color, noWrap, as, ...other } = props;
     const getTagFromVariantProp = () => {
         if (/h/.test(variant)) {
             return variant;
@@ -35,7 +36,7 @@ export const Typography = React.forwardRef((props, ref) => {
         }
         return 'p';
     };
-    const Component = componentProp || getTagFromVariantProp();
+    const Component = as || getTagFromVariantProp();
     return (React.createElement(Component, { ...other, ref: ref, className: cx({
             [stylesBase()]: true,
             [stylesVariant(variant)]: !!variant,

package/dist/esnext/Typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/Typography/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,GAAG,EACH,EAAE,GAGH,MAAM,WAAW,CAAC;AAkCnB,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAC3B,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,CAAC;CACV,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,CAAC,OAAuC,EAAE,EAAE,CAAC,GAAG,CAAC;IACrE,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,iBAAiB,OAAO,UAAU;IAC9C,QAAQ,EAAE,iBAAiB,OAAO,QAAQ;IAC1C,UAAU,EAAE,iBAAiB,OAAO,UAAU;IAC9C,aAAa,EAAE,iBAAiB,OAAO,WAAW;CAC5C,CAAC,CAAC;AAEV,MAAM,WAAW,GAAG,CAAC,KAAmC,EAAE,EAAE,CAAC,GAAG,CAAC;IAC/D,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,KAAK,GAAG;CACpE,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAC7B,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;IACpB,YAAY,EAAE,UAAU;CACzB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACtF,MAAM,EACJ,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IAEV,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACrB,OAAO,OAAiB,CAAC;SAC1B;QAED,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACrB,OAAO,IAAI,CAAC;SACb;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACvB,OAAO,MAAM,CAAC;SACf;QAED,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,aAAa,IAAI,qBAAqB,EAAE,CAAC;IAE3D,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC;YACZ,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACpB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO;YACnC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK;YAC7B,CAAC,YAAY,EAAE,CAAC,EAAE,MAAM;YACxB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS;SACzB,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,UAAU,CAAC,YAAY,GAAG;IACxB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,OAAO;CACf,CAAC"}
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/Typography/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EACL,GAAG,EACH,EAAE,GAGH,MAAM,WAAW,CAAC;AA4BnB,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAC3B,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,CAAC;CACV,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,CAAC,OAAmC,EAAE,EAAE,CAAC,GAAG,CAAC;IACjE,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,iBAAiB,OAAO,UAAU;IAC9C,QAAQ,EAAE,iBAAiB,OAAO,QAAQ;IAC1C,UAAU,EAAE,iBAAiB,OAAO,UAAU;IAC9C,aAAa,EAAE,iBAAiB,OAAO,WAAW;CAC5C,CAAC,CAAC;AAEV,MAAM,WAAW,GAAG,CAAC,KAA+B,EAAE,EAAE,CAAC,GAAG,CAAC;IAC3D,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,KAAK,GAAG;CACpE,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAC7B,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;IACpB,YAAY,EAAE,UAAU;CACzB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAuB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxE,MAAM,EACJ,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,EAAE,EACF,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IAEV,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACrB,OAAO,OAAiB,CAAC;SAC1B;QAED,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACrB,OAAO,IAAI,CAAC;SACb;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACvB,OAAO,MAAM,CAAC;SACf;QAED,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,EAAE,IAAI,qBAAqB,EAAE,CAAC;IAEhD,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC;YACZ,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACpB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO;YACnC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK;YAC7B,CAAC,YAAY,EAAE,CAAC,EAAE,MAAM;YACxB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS;SACzB,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,UAAU,CAAC,YAAY,GAAG;IACxB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,OAAO;CACf,CAAC"}

package/dist/esnext/system/forward_ref.js

@@ -0,0 +1,9 @@
+import { forwardRef as forwardReactRef } from 'react';
+/**
+ * All credit goes to Chance (Reach UI), Haz (Reakit) and (fluentui)
+ * for creating the base type definitions upon which we improved on
+ */
+export function forwardRef(component) {
+    return forwardReactRef(component);
+}
+//# sourceMappingURL=forward_ref.js.map

package/dist/esnext/system/forward_ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forward_ref.js","sourceRoot":"","sources":["../../../src/system/forward_ref.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAQtD;;;GAGG;AACH,MAAM,UAAU,UAAU,CACxB,SAKC;IAED,OAAO,eAAe,CAAC,SAAS,CAG/B,CAAC;AACJ,CAAC"}

package/dist/esnext/system/index.js

@@ -0,0 +1,2 @@
+export { forwardRef } from './forward_ref';
+//# sourceMappingURL=index.js.map

package/dist/esnext/system/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/system/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/esnext/system/system_types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=system_types.js.map

package/dist/esnext/system/system_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"system_types.js","sourceRoot":"","sources":["../../../src/system/system_types.ts"],"names":[],"mappings":""}

package/dist/types/Box/box.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ColorType } from '../styles';
-declare type BaseProps = {
+export declare type BoxProps = {
     /**
      * The content of the component.
      */
@@ -9,10 +9,6 @@ declare type BaseProps = {
      * The className of the component.
      */
     className?: string;
-    /**
-     * The component used for the root node.
-     */
-    component?: React.ElementType;
     background?: ColorType;
     borderColor?: ColorType;
     borderWidth?: number;
@@ -21,5 +17,4 @@ declare type BaseProps = {
     borderRadius?: number;
     'data-testid'?: string;
 };
-export declare const Box: React.ForwardRefExoticComponent<BaseProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-export {};
+export declare const Box: import("../system/system_types").ComponentWithAs<"div", BoxProps>;

package/dist/types/Button/button.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonBaseProps } from '../ButtonBase';
-declare type BaseProps = {
+export declare type ButtonProps = ButtonBaseProps & {
     circled?: boolean;
     /**
      * Element placed before the children.
@@ -15,16 +15,4 @@ declare type BaseProps = {
      */
     withoutPadding?: boolean;
 };
-export declare type ButtonProps = BaseProps & ButtonBaseProps;
-export declare const Button: React.ForwardRefExoticComponent<BaseProps & {
-    children: React.ReactNode;
-    disabled?: boolean;
-    variant?: "text" | "contained" | "outlined";
-    textVariant?: import("../styles").TypographyType;
-    color?: "default" | "white" | "primary" | "secondary" | "wrong";
-    size?: "small" | "medium" | "large";
-    className?: string;
-    component?: React.ElementType<any>;
-    'data-testid'?: string;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
-export {};
+export declare const Button: import("../system/system_types").ComponentWithAs<"button", ButtonProps>;

package/dist/types/ButtonBase/button_base.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TypographyType } from '../styles';
-declare type BaseProps = {
+export declare type ButtonBaseProps = {
     /**
      * The content of the component.
      */
@@ -29,12 +29,6 @@ declare type BaseProps = {
      * The className of the component.
      */
     className?: string;
-    /**
-     * The component used for the root node.
-     */
-    component?: React.ElementType;
     'data-testid'?: string;
 };
-export declare type ButtonBaseProps = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
-export declare const ButtonBase: React.ForwardRefExoticComponent<BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
-export {};
+export declare const ButtonBase: import("../system/system_types").ComponentWithAs<"button", ButtonBaseProps>;

package/dist/types/Chip/chip.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 /**
  * Types.
  */
-declare type BaseProps = {
+export declare type ChipProps = {
     /**
      * The content of the component.
      */
@@ -31,10 +31,6 @@ declare type BaseProps = {
      * Element placed before the children.
      */
     startContent?: React.ReactElement;
-    /**
-     * The component used for the root node.
-     */
-    component?: React.ElementType;
     /**
      * Callback function fired when the delete icon is clicked. If set, the delete icon will be shown.
      */
@@ -48,5 +44,4 @@ declare type BaseProps = {
 /**
  *
  */
-export declare const Chip: React.ForwardRefExoticComponent<BaseProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const Chip: import("../system/system_types").ComponentWithAs<"div", ChipProps>;

package/dist/types/Fab/fab.d.ts

@@ -1,10 +1,8 @@
-import * as React from 'react';
 import { ButtonBaseProps } from '../ButtonBase';
-declare type BaseProps = {
+export declare type FabProps = Omit<ButtonBaseProps, 'size' | 'variant'> & {
     /**
      * The variant to use.
      */
     variant?: ('contained' | 'outlined');
 };
-export declare const Fab: React.ForwardRefExoticComponent<BaseProps & Omit<ButtonBaseProps, "size" | "variant"> & React.RefAttributes<HTMLButtonElement>>;
-export {};
+export declare const Fab: import("../system/system_types").ComponentWithAs<"button", FabProps>;

package/dist/types/IconButton/icon_button.d.ts

@@ -1,10 +1,9 @@
-import * as React from 'react';
 import { ButtonProps } from '../Button';
-declare type BaseProps = {
+declare type IconButtonProps = Omit<ButtonProps, 'variant' | 'withoutPadding' | 'startIcon' | 'endIcon'> & {
     /**
      * The text that applied to `aria-label` attribute and Tooltip content.
      */
     title?: string;
 };
-export declare const IconButton: React.ForwardRefExoticComponent<BaseProps & Omit<ButtonProps, "variant" | "startIcon" | "endIcon" | "withoutPadding"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: import("../system/system_types").ComponentWithAs<"button", IconButtonProps>;
 export {};

package/dist/types/Skeleton/skeleton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ColorType } from '../styles';
-declare type BaseProps = {
+export declare type SkeletonProps = {
     /**
      * Optional children to infer width and height from.
      */
@@ -26,5 +26,4 @@ declare type BaseProps = {
 /**
  *
  */
-export declare const Skeleton: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLSpanElement>, "height" | "width" | "children"> & React.RefAttributes<HTMLSpanElement>>;
-export {};
+export declare const Skeleton: import("../system/system_types").ComponentWithAs<"span", SkeletonProps>;

package/dist/types/Tabs/tab.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type BaseProps = {
+export declare type TabProps = {
     /**
      * The content of the component.
      */
@@ -20,16 +20,11 @@ declare type BaseProps = {
      * The color of the component.
      */
     color?: ('black' | 'white');
-    /**
-     * The component used for the root node.
-     */
-    component?: React.ElementType;
     /**
      * Callback fired when the value changes.
      */
     onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
+    onClick?: never;
     'data-testid'?: string;
 };
-export declare type TabBaseProps = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange'>;
-export declare const Tab: React.ForwardRefExoticComponent<BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
-export {};
+export declare const Tab: import("../system/system_types").ComponentWithAs<"button", TabProps>;

package/dist/types/Tabs/tabs.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Tab, TabBaseProps } from './tab';
+import { Tab, TabProps } from './tab';
 declare type BaseProps = {
     /**
      * The content of the component.
      */
-    children: React.ReactElement<TabBaseProps, typeof Tab>[];
+    children: React.ReactElement<TabProps, typeof Tab>[];
     /**
      * The value of the currently selected `Tab`.
      */

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

@@ -1 +1 @@
-export { Typography, TypographyBaseProps, TypographyProps } from './typography';
+export { Typography, TypographyProps } from './typography';

package/dist/types/Typography/typography.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ColorType, TypographyType } from '../styles';
-export declare type TypographyBaseProps = {
+export declare type TypographyProps = {
     /**
      * The content of the component.
      */
@@ -23,11 +23,6 @@ export declare type TypographyBaseProps = {
      * (the element needs to have a width in order to overflow).
      */
     noWrap?: boolean;
-    /**
-     * The component used for the root node.
-     */
-    component?: React.ElementType;
     'data-testid'?: string;
 };
-export declare type TypographyProps = TypographyBaseProps & React.HTMLAttributes<HTMLElement>;
-export declare const Typography: React.ForwardRefExoticComponent<TypographyBaseProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const Typography: import("../system/system_types").ComponentWithAs<"p", TypographyProps>;

package/dist/types/system/forward_ref.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { RightJoinProps, PropsOf, As, ComponentWithAs } from './system_types';
+/**
+ * All credit goes to Chance (Reach UI), Haz (Reakit) and (fluentui)
+ * for creating the base type definitions upon which we improved on
+ */
+export declare function forwardRef<Props extends object, Component extends As>(component: React.ForwardRefRenderFunction<any, RightJoinProps<PropsOf<Component>, Props> & {
+    as?: As;
+}>): ComponentWithAs<Component, Props>;

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

@@ -0,0 +1 @@
+export { forwardRef } from './forward_ref';

package/dist/types/system/system_types.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare type As<Props = any> = React.ElementType<Props>;
+export declare type MergeWithAs<ComponentProps extends object, AsProps extends object, AdditionalProps extends object = {}, AsComponent extends As = As> = RightJoinProps<ComponentProps, AdditionalProps> & RightJoinProps<AsProps, AdditionalProps> & {
+    /**
+     * The component used for the root node.
+     */
+    as?: AsComponent;
+};
+export declare type ComponentWithAs<Component extends As, Props extends object = {}> = {
+    <AsComponent extends As = Component>(props: MergeWithAs<React.ComponentProps<Component>, React.ComponentProps<AsComponent>, Props, AsComponent>): JSX.Element;
+    displayName?: string;
+    propTypes?: React.WeakValidationMap<any>;
+    contextTypes?: React.ValidationMap<any>;
+    defaultProps?: Partial<Props>;
+    id?: string;
+};
+export declare type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
+    /**
+     * The component used for the root node.
+     */
+    as?: As;
+};
+export declare type OmitCommonProps<Target, OmitAdditionalProps extends keyof any = never> = Omit<Target, 'transition' | 'as' | 'color' | OmitAdditionalProps>;
+export declare type RightJoinProps<SourceProps extends object = {}, OverrideProps extends object = {}> = OmitCommonProps<SourceProps, keyof OverrideProps> & OverrideProps;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/react-components",
   "private": false,
-  "version": "0.0.2-alpha.301+2e498b5",
+  "version": "0.0.2-alpha.303+ce18128",
   "author": "PeculiarVentures Team",
   "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
   "keywords": [
@@ -42,7 +42,7 @@
   "dependencies": {
     "@emotion/core": "^10.1.1",
     "@emotion/css": "^11.7.1",
-    "@peculiar/color": "^0.0.2-alpha.301+2e498b5",
+    "@peculiar/color": "^0.0.2-alpha.303+ce18128",
     "@popperjs/core": "^2.11.5",
     "@types/flat": "^5.0.2",
     "@types/react-transition-group": "^4.4.4",
@@ -85,5 +85,5 @@
     "node": ">=12.x"
   },
   "license": "MIT",
-  "gitHead": "2e498b5d832a68a93a47bbdc845db36194d03515"
+  "gitHead": "ce18128b8bb5d565fda836208df1503719e152f4"
 }