@peculiar/react-components 0.0.2-alpha.29 → 0.0.2-alpha.290

package/dist/esnext/Slide/slide.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Transition } from 'react-transition-group';
+import { useMergedRef } from '../hooks';
+export const Slide = React.forwardRef((props, ref) => {
+    const { timeout, in: inProp, children, appear, onEnter, onEntered, onEntering, onExit, onExited, onExiting, direction, } = props;
+    const nodeRef = React.useRef(null);
+    const multiRef = useMergedRef(children.ref, ref, nodeRef);
+    const handleEnter = (isAppearing) => {
+        // reading a dimension prop will cause the browser to recalculate,
+        // which will let our animations work
+        nodeRef.current.offsetHeight; // eslint-disable-line @typescript-eslint/no-unused-expressions
+        if (onEnter) {
+            onEnter(isAppearing);
+        }
+    };
+    const getTranslateExitValue = () => {
+        if (direction === 'right' || direction === 'left') {
+            return 'translateX(0px)';
+        }
+        if (direction === 'up' || direction === 'down') {
+            return 'translateY(0px)';
+        }
+        return undefined;
+    };
+    const getTranslateEnterValue = () => {
+        if (direction === 'right') {
+            return 'translateX(100%)';
+        }
+        if (direction === 'left') {
+            return 'translateX(-100%)';
+        }
+        if (direction === 'up') {
+            return 'translateY(-100%)';
+        }
+        if (direction === 'down') {
+            return 'translateY(100%)';
+        }
+        return undefined;
+    };
+    return (React.createElement(Transition, { in: inProp, timeout: timeout, appear: appear, onEnter: handleEnter, onEntered: onEntered, onEntering: onEntering, onExit: onExit, onExited: onExited, onExiting: onExiting, nodeRef: nodeRef }, (state) => (React.cloneElement(children, {
+        style: {
+            transform: (state === 'entering' || state === 'entered') ? getTranslateExitValue() : getTranslateEnterValue(),
+            transition: `transform ${timeout}ms cubic-bezier(0, 0, 0.2, 1) 0ms`,
+            visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+            ...children.props.style,
+        },
+        ref: multiRef,
+    }))));
+});
+Slide.displayName = 'Slide';
+Slide.defaultProps = {
+    timeout: 225,
+    direction: 'right',
+    appear: true,
+};
+//# sourceMappingURL=slide.js.map

package/dist/esnext/Slide/slide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide.js","sourceRoot":"","sources":["../../../src/Slide/slide.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoCxC,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAkB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACpE,MAAM,EACJ,OAAO,EACP,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,MAAM,EACN,OAAO,EACP,SAAS,EACT,UAAU,EACV,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,YAAY,CAAE,QAAgB,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAEnE,MAAM,WAAW,GAAG,CAAC,WAAoB,EAAE,EAAE;QAC3C,kEAAkE;QAClE,qCAAqC;QACrC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,+DAA+D;QAE7F,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,WAAW,CAAC,CAAC;SACtB;IACH,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,IAAI,SAAS,KAAK,OAAO,IAAI,SAAS,KAAK,MAAM,EAAE;YACjD,OAAO,iBAAiB,CAAC;SAC1B;QAED,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,MAAM,EAAE;YAC9C,OAAO,iBAAiB,CAAC;SAC1B;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAClC,IAAI,SAAS,KAAK,OAAO,EAAE;YACzB,OAAO,kBAAkB,CAAC;SAC3B;QAED,IAAI,SAAS,KAAK,MAAM,EAAE;YACxB,OAAO,mBAAmB,CAAC;SAC5B;QAED,IAAI,SAAS,KAAK,IAAI,EAAE;YACtB,OAAO,mBAAmB,CAAC;SAC5B;QAED,IAAI,SAAS,KAAK,MAAM,EAAE;YACxB,OAAO,kBAAkB,CAAC;SAC3B;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,IAEf,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;QAC3B,KAAK,EAAE;YACL,SAAS,EAAE,CAAC,KAAK,KAAK,UAAU,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,sBAAsB,EAAE;YAC7G,UAAU,EAAE,aAAa,OAAO,mCAAmC;YACnE,UAAU,EAAE,KAAK,KAAK,QAAQ,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;YAChE,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK;SACxB;QACD,GAAG,EAAE,QAAQ;KACd,CAAC,CACH,CACU,CACd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,KAAK,CAAC,YAAY,GAAG;IACnB,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,OAAO;IAClB,MAAM,EAAE,IAAI;CACb,CAAC"}

package/dist/esnext/Slider/index.js

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

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

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

package/dist/esnext/Slider/slider.js

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { css, cx } from '../styles';
+const stylesBase = () => css({
+    label: 'Slider',
+    height: '16px',
+    width: '100%',
+});
+const stylesInput = () => css({
+    label: 'Slider-input',
+    appearance: 'none',
+    width: '100%',
+    height: '100%',
+    outline: 'none',
+    backgroundColor: 'var(--pv-color-primary-shade-1)',
+    borderRadius: '16px',
+    margin: 0,
+    padding: 0,
+    cursor: 'pointer',
+    transition: 'background-color 200ms',
+    '&::-webkit-slider-thumb': {
+        appearance: 'none',
+        height: '16px',
+        width: '16px',
+        backgroundColor: 'var(--pv-color-primary-tint-5)',
+        border: '1px solid var(--pv-color-primary-shade-3)',
+        borderRadius: '50%',
+        cursor: 'inherit',
+        transition: 'background-color 200ms, border-color 200ms',
+    },
+    '&::-moz-range-thumb': {
+        appearance: 'none',
+        height: '16px',
+        width: '16px',
+        backgroundColor: 'var(--pv-color-primary-tint-5)',
+        border: '1px solid var(--pv-color-primary-shade-3)',
+        borderRadius: '50%',
+        cursor: 'inherit',
+        transition: 'background-color 200ms, border-color 200ms',
+    },
+    '&:not(:disabled)': {
+        '&:hover': {
+            backgroundColor: 'var(--pv-color-primary-tint-1)',
+        },
+        '&:focus': {
+            backgroundColor: 'var(--pv-color-primary-tint-2)',
+        },
+    },
+    '&:disabled': {
+        cursor: 'not-allowed',
+        backgroundColor: 'var(--pv-color-gray-4)',
+        '&::-webkit-slider-thumb': {
+            backgroundColor: 'var(--pv-color-gray-8)',
+            borderColor: 'var(--pv-color-gray-8)',
+        },
+        '&::-moz-range-thumb': {
+            backgroundColor: 'var(--pv-color-gray-8)',
+            borderColor: 'var(--pv-color-gray-8)',
+        },
+    },
+});
+export const Slider = React.forwardRef((props, ref) => {
+    const { className, defaultValue, value, disabled, max, min, name, step, onChange, ...other } = props;
+    return (React.createElement("div", { ...other, ref: ref, className: cx({
+            [stylesBase()]: true,
+            [className]: !!className,
+        }) },
+        React.createElement("input", { type: "range", name: name, min: min, max: max, step: step, className: cx(stylesInput()), value: value, defaultValue: defaultValue, onChange: onChange, disabled: disabled })));
+});
+Slider.displayName = 'Slider';
+Slider.defaultProps = {
+    disabled: false,
+    max: 100,
+    min: 0,
+    step: 1,
+    defaultValue: 0,
+};
+//# sourceMappingURL=slider.js.map

package/dist/esnext/Slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/Slider/slider.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Switch/index.js

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

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

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

package/dist/esnext/Switch/switch.js

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { Box } from '../Box';
+import { useId } from '../hooks';
+import { css, cx } from '../styles';
+const stylesBase = () => css({
+    label: 'Switch',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    width: 'var(--pv-size-base-7)',
+    height: 'var(--pv-size-base-4)',
+    borderRadius: 'var(--pv-size-base-4)',
+    justifyContent: 'center',
+    alignItems: 'center',
+});
+const stylesBaseDisabled = () => css({
+    label: 'disabled',
+    cursor: 'not-allowed',
+});
+const stylesInput = () => css({
+    label: 'Switch-input',
+    overflow: 'hidden',
+    width: '100%',
+    height: '100%',
+    margin: 0,
+    padding: 0,
+    cursor: 'inherit',
+    borderRadius: 'var(--pv-size-base-4)',
+    appearance: 'none',
+    backgroundColor: 'var(--pv-color-gray-6)',
+    '&:checked': {
+        backgroundColor: 'var(--pv-color-primary)',
+        '+ [aria-hidden]': {
+            transform: 'translate(calc(100% - 1px),-50%)',
+        },
+    },
+    '&:disabled': {
+        opacity: 0.4,
+        '&:checked': {
+            backgroundColor: 'var(--pv-color-primary-tint-3)',
+            opacity: 0.6,
+        },
+        '+ [aria-hidden]': {
+            opacity: 0.8,
+        },
+    },
+});
+const stylesControl = () => css({
+    label: 'Switch-control',
+    width: 'var(--pv-size-base-7)',
+    height: 'var(--pv-size-base-4)',
+    position: 'relative',
+    color: 'var(--pv-color-primary)',
+    '&:after': {
+        top: '-10px',
+        left: '-10px',
+        right: '-10px',
+        bottom: '-10px',
+        content: '""',
+        position: 'absolute',
+        borderRadius: '50%',
+    },
+});
+const stylesDot = () => css({
+    label: 'Switch-dot',
+    display: 'block',
+    position: 'absolute',
+    top: '50%',
+    width: 'var(--pv-size-base-3)',
+    height: 'var(--pv-size-base-3)',
+    transform: 'translate(calc(2px), -50%)',
+    transition: 'transform 200ms',
+    boxShadow: 'var(--pv-shadow-light-low)',
+    boxSizing: 'content-box',
+});
+export const Switch = React.forwardRef((props, ref) => {
+    const { checked, defaultChecked, required, inputProps, className, disabled, id: idProp, name, onChange, ...other } = props;
+    const id = useId(idProp);
+    return (React.createElement("label", { ...other, ref: ref, htmlFor: id, className: cx({
+            [stylesBase()]: true,
+            [stylesBaseDisabled()]: disabled,
+            [className]: !!className,
+        }) },
+        React.createElement(Box, { component: "span", className: cx(stylesControl()) },
+            React.createElement("input", { ...inputProps, type: "checkbox", name: name, id: id, checked: checked, defaultChecked: defaultChecked, required: required, disabled: disabled, className: cx(stylesInput()), onChange: onChange }),
+            React.createElement(Box, { "aria-hidden": true, className: cx(stylesDot()), background: "primary-contrast", borderColor: "gray-3", borderWidth: 1, borderStyle: "solid", borderRadius: 100 }))));
+});
+Switch.displayName = 'Switch';
+Switch.defaultProps = {};
+//# sourceMappingURL=switch.js.map

package/dist/esnext/Switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/Switch/switch.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Tabs/index.js

@@ -0,0 +1,3 @@
+export { Tabs } from './tabs';
+export { Tab } from './tab';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC"}

package/dist/esnext/Tabs/tab.js

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { css, cx } from '../styles';
+import { Typography } from '../Typography';
+const stylesBase = () => css({
+    label: 'Tab',
+    fontFamily: 'inherit',
+    outline: 'none',
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+    border: 0,
+    borderBottom: '3px solid transparent',
+    minHeight: 'var(--pv-size-base-12)',
+    height: '100%',
+    padding: '0 var(--pv-size-base-3)',
+    backgroundColor: 'transparent',
+    transition: 'background-color 200ms, color 200ms, border-color 200ms',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textDecoration: 'none',
+    '&:disabled': {
+        cursor: 'not-allowed',
+    },
+    '&[aria-selected]': {
+        borderColor: 'var(--pv-color-secondary)',
+    },
+    '&:not(:disabled)': {
+        '&:hover': {
+            backgroundColor: 'var(--pv-color-secondary-tint-5)',
+        },
+        '&:focus': {
+            backgroundColor: 'var(--pv-color-secondary-tint-4)',
+        },
+        '&:active': {
+            backgroundColor: 'var(--pv-color-secondary-tint-3)',
+        },
+    },
+});
+export const Tab = React.forwardRef((props, ref) => {
+    const { children, className, disabled, id, 
+    // @ts-ignore
+    selected, color = 'black', component: componentProp, onChange, ...other } = props;
+    const Component = componentProp || 'button';
+    const textColor = React.useMemo(() => {
+        if (disabled) {
+            return 'gray-7';
+        }
+        if (color === 'white') {
+            if (selected) {
+                return 'white';
+            }
+            return 'gray-9';
+        }
+        if (selected) {
+            return 'black';
+        }
+        return 'gray-10';
+    }, [disabled, selected, color]);
+    const handleClick = (event) => {
+        if (!selected && onChange) {
+            onChange(event, id);
+        }
+    };
+    return (React.createElement(Component, { ...other, type: "button", ref: ref, role: "tab", disabled: disabled, id: id, "aria-selected": selected || undefined, className: cx({
+            [stylesBase()]: true,
+            [className]: !!className,
+        }), onClick: handleClick },
+        React.createElement(Typography, { variant: "s2", component: "span", color: textColor }, children)));
+});
+Tab.displayName = 'Tab';
+Tab.defaultProps = {
+    disabled: false,
+    component: 'button',
+    color: 'black',
+};
+//# sourceMappingURL=tab.js.map

package/dist/esnext/Tabs/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/Tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,EAAE,EAAa,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAoC3C,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAC3B,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,YAAY;IACvB,MAAM,EAAE,CAAC;IACT,YAAY,EAAE,uBAAuB;IACrC,SAAS,EAAE,wBAAwB;IACnC,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,yBAAyB;IAClC,eAAe,EAAE,aAAa;IAC9B,UAAU,EAAE,yDAAyD;IACrE,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,cAAc,EAAE,MAAM;IACtB,YAAY,EAAE;QACZ,MAAM,EAAE,aAAa;KACtB;IACD,kBAAkB,EAAE;QAClB,WAAW,EAAE,2BAA2B;KACzC;IACD,kBAAkB,EAAE;QAClB,SAAS,EAAE;YACT,eAAe,EAAE,kCAAkC;SACpD;QACD,SAAS,EAAE;YACT,eAAe,EAAE,kCAAkC;SACpD;QACD,UAAU,EAAE;YACV,eAAe,EAAE,kCAAkC;SACpD;KACF;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAkC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAClF,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,EAAE;IACF,aAAa;IACb,QAAQ,EACR,KAAK,GAAG,OAAO,EACf,SAAS,EAAE,aAAa,EACxB,QAAQ,EACR,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,aAAa,IAAI,QAAQ,CAAC;IAE5C,MAAM,SAAS,GAAc,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9C,IAAI,QAAQ,EAAE;YACZ,OAAO,QAAQ,CAAC;SACjB;QAED,IAAI,KAAK,KAAK,OAAO,EAAE;YACrB,IAAI,QAAQ,EAAE;gBACZ,OAAO,OAAO,CAAC;aAChB;YAED,OAAO,QAAQ,CAAC;SACjB;QAED,IAAI,QAAQ,EAAE;YACZ,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhC,MAAM,WAAW,GAAG,CAAC,KAAsD,EAAE,EAAE;QAC7E,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE;YACzB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,mBACS,QAAQ,IAAI,SAAS,EACpC,SAAS,EAAE,EAAE,CAAC;YACZ,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACpB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS;SACzB,CAAC,EACF,OAAO,EAAE,WAAW;QAEpB,oBAAC,UAAU,IACT,OAAO,EAAC,IAAI,EACZ,SAAS,EAAC,MAAM,EAChB,KAAK,EAAE,SAAS,IAEf,QAAQ,CACE,CACH,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;AAExB,GAAG,CAAC,YAAY,GAAG;IACjB,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,QAAQ;IACnB,KAAK,EAAE,OAAO;CACf,CAAC"}

package/dist/esnext/Tabs/tabs.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { css, cx } from '../styles';
+const stylesBase = () => css({
+    label: 'Tabs',
+    whiteSpace: 'nowrap',
+    overflowX: 'auto',
+});
+export const Tabs = React.forwardRef((props, ref) => {
+    const { children: childrenProp, className, onChange, value, ...other } = props;
+    const children = React.Children.map(childrenProp, (child) => {
+        if (!React.isValidElement(child)) {
+            return null;
+        }
+        if (child.type.displayName !== 'Tab') {
+            console.error('Peculiar-UI: The Tabs component doesn\'t accept a Element as not a Tab.');
+            return null;
+        }
+        const childValue = child.props.id;
+        const selected = childValue === value;
+        return React.cloneElement(child, {
+            // @ts-ignore
+            selected,
+            onChange,
+        });
+    });
+    return (React.createElement("div", { ...other, ref: ref, role: "tablist", className: cx({
+            [stylesBase()]: true,
+            [className]: !!className,
+        }) }, children));
+});
+//# sourceMappingURL=tabs.js.map

package/dist/esnext/Tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/Tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAwBpC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAC3B,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACjF,MAAM,EACJ,QAAQ,EAAE,YAAY,EACtB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CACjC,YAAY,EACZ,CAAC,KAAmD,EAAE,EAAE;QACtD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAa,KAAK,CAAC,EAAE;YAC5C,OAAO,IAAI,CAAC;SACb;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YACpC,OAAO,CAAC,KAAK,CAAC,yEAAyE,CAAC,CAAC;YAEzF,OAAO,IAAI,CAAC;SACb;QAED,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QAClC,MAAM,QAAQ,GAAG,UAAU,KAAK,KAAK,CAAC;QAEtC,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;YAC/B,aAAa;YACb,QAAQ;YACR,QAAQ;SACT,CAAC,CAAC;IACL,CAAC,CACF,CAAC;IAEF,OAAO,CACL,gCACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,EAAE,CAAC;YACZ,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACpB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS;SACzB,CAAC,IAED,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/esnext/TextField/index.js

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

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

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

package/dist/esnext/TextField/text_field.js

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { css, cx } from '../styles';
+import { Typography } from '../Typography';
+const stylesInputBase = () => css({
+    label: 'TextField',
+    fontFamily: 'inherit',
+    outline: 'none',
+    boxSizing: 'border-box',
+    width: '100%',
+    borderRadius: '4px',
+    padding: '0 var(--pv-size-base-2)',
+    color: 'var(--pv-color-black)',
+    backgroundColor: 'var(--pv-color-gray-1)',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    borderColor: 'var(--pv-color-gray-8)',
+    transition: 'background-color 200ms, color 200ms, border-color 200ms',
+    display: 'inline-flex',
+    appearance: 'none',
+    '&::placeholder': {
+        color: 'var(--pv-color-gray-9)',
+    },
+    '&:hover': {
+        backgroundColor: 'var(--pv-color-gray-3)',
+        borderColor: 'var(--pv-color-gray-7)',
+    },
+    '&:disabled': {
+        cursor: 'not-allowed',
+        backgroundColor: 'var(--pv-color-gray-1)',
+        borderColor: 'var(--pv-color-gray-5)',
+        color: 'var(--pv-color-gray-7)',
+    },
+    '&:not(:disabled)': {
+        '&[aria-invalid]': {
+            backgroundColor: 'var(--pv-color-wrong-tint-5)',
+            borderColor: 'var(--pv-color-wrong-tint-3)',
+        },
+        '&:focus': {
+            backgroundColor: 'var(--pv-color-secondary-tint-5)',
+            borderColor: 'var(--pv-color-secondary-tint-3)',
+        },
+    },
+}, {
+    fontWeight: 'var(--pv-text-c1-weight)',
+    fontSize: 'var(--pv-text-c1-size)',
+    letterSpacing: 'var(--pv-text-c1-spacing)',
+});
+const stylesInputSizeSmall = () => css({
+    label: 'small',
+    height: 'var(--pv-size-base-6)',
+});
+const stylesInputSizeMedium = () => css({
+    label: 'medium',
+    height: 'var(--pv-size-base-7)',
+});
+const stylesInputSizeLarge = () => css({
+    label: 'large',
+    height: 'var(--pv-size-base-8)',
+});
+const stylesLabel = () => css({
+    label: 'TextField-label',
+    marginBottom: '2px',
+    display: 'inline-block',
+});
+const stylesError = () => css({
+    label: 'TextField-error',
+    marginTop: '2px',
+});
+export const TextField = React.forwardRef((props, ref) => {
+    const { size, className, label, inputProps, disabled, defaultValue, id, value, placeholder, required, name, inputRef, error, errorText, autoFocus, readOnly, type = 'text', onChange, ...other } = props;
+    return (React.createElement("div", { ...other, ref: ref, className: className },
+        label && (React.createElement("label", { htmlFor: id, className: cx({
+                [stylesLabel()]: true,
+            }) },
+            React.createElement(Typography, { component: "span", variant: "c2", color: "gray-10" }, label))),
+        React.createElement("input", { ...inputProps, type: type, disabled: disabled, defaultValue: defaultValue, id: id, value: value, required: required, name: name, ref: inputRef, 
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: autoFocus, className: cx({
+                [stylesInputBase()]: true,
+                [stylesInputSizeSmall()]: size === 'small',
+                [stylesInputSizeMedium()]: size === 'medium',
+                [stylesInputSizeLarge()]: size === 'large',
+            }), "aria-invalid": error || undefined, onChange: onChange, placeholder: placeholder, readOnly: readOnly }),
+        error && errorText && (React.createElement(Typography, { variant: "c2", color: "wrong", className: cx({
+                [stylesError()]: true,
+            }) }, errorText))));
+});
+TextField.displayName = 'TextField';
+TextField.defaultProps = {
+    disabled: false,
+    size: 'medium',
+};
+//# sourceMappingURL=text_field.js.map

package/dist/esnext/TextField/text_field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text_field.js","sourceRoot":"","sources":["../../../src/TextField/text_field.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/TextareaField/index.js

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

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

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

package/dist/esnext/TextareaField/textarea_field.js

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { css, cx } from '../styles';
+import { Typography } from '../Typography';
+const stylesInputBase = () => css({
+    label: 'TextareaField',
+    fontFamily: 'inherit',
+    outline: 'none',
+    boxSizing: 'border-box',
+    width: '100%',
+    borderRadius: '4px',
+    padding: 'var(--pv-size-base) var(--pv-size-base-2)',
+    color: 'var(--pv-color-black)',
+    backgroundColor: 'var(--pv-color-gray-1)',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    borderColor: 'var(--pv-color-gray-8)',
+    transition: 'background-color 200ms, color 200ms, border-color 200ms',
+    display: 'block',
+    appearance: 'none',
+    resize: 'none',
+    '&::placeholder': {
+        color: 'var(--pv-color-gray-9)',
+    },
+    '&:hover': {
+        backgroundColor: 'var(--pv-color-gray-3)',
+        borderColor: 'var(--pv-color-gray-7)',
+    },
+    '&:disabled': {
+        cursor: 'not-allowed',
+        backgroundColor: 'var(--pv-color-gray-1)',
+        borderColor: 'var(--pv-color-gray-5)',
+        color: 'var(--pv-color-gray-7)',
+    },
+    '&:not(:disabled)': {
+        '&[aria-invalid]': {
+            backgroundColor: 'var(--pv-color-wrong-tint-5)',
+            borderColor: 'var(--pv-color-wrong-tint-3)',
+        },
+        '&:focus': {
+            backgroundColor: 'var(--pv-color-secondary-tint-5)',
+            borderColor: 'var(--pv-color-secondary-tint-3)',
+        },
+    },
+}, {
+    fontWeight: 'var(--pv-text-c1-weight)',
+    fontSize: 'var(--pv-text-c1-size)',
+    lineHeight: 'var(--pv-text-c1-height)',
+    letterSpacing: 'var(--pv-text-c1-spacing)',
+});
+const stylesInputSizeSmall = () => css({
+    label: 'small',
+    minHeight: 'var(--pv-size-base-12)',
+});
+const stylesInputSizeMedium = () => css({
+    label: 'medium',
+    minHeight: 'var(--pv-size-base-14)',
+});
+const stylesInputSizeLarge = () => css({
+    label: 'large',
+    minHeight: 'var(--pv-size-base-16)',
+});
+const stylesLabel = () => css({
+    label: 'TextareaField-label',
+    marginBottom: '2px',
+    display: 'inline-block',
+});
+const stylesError = () => css({
+    label: 'TextareaField-error',
+    marginTop: '2px',
+});
+export const TextareaField = React.forwardRef((props, ref) => {
+    const { size, className, label, onChange, inputProps, disabled, defaultValue, id, value, placeholder, required, name, inputRef, error, errorText, autoFocus, readOnly, ...other } = props;
+    return (React.createElement("div", { ...other, ref: ref, className: className },
+        label && (React.createElement("label", { htmlFor: id, className: cx({
+                [stylesLabel()]: true,
+            }) },
+            React.createElement(Typography, { component: "span", variant: "c2", color: "gray-10" }, label))),
+        React.createElement("textarea", { ...inputProps, disabled: disabled, defaultValue: defaultValue, id: id, value: value, required: required, name: name, ref: inputRef, 
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: autoFocus, className: cx({
+                [stylesInputBase()]: true,
+                [stylesInputSizeSmall()]: size === 'small',
+                [stylesInputSizeMedium()]: size === 'medium',
+                [stylesInputSizeLarge()]: size === 'large',
+            }), "aria-invalid": error || undefined, onChange: onChange, placeholder: placeholder, readOnly: readOnly }),
+        error && errorText && (React.createElement(Typography, { variant: "c2", color: "wrong", className: cx({
+                [stylesError()]: true,
+            }) }, errorText))));
+});
+TextareaField.displayName = 'TextareaField';
+TextareaField.defaultProps = {
+    disabled: false,
+    size: 'medium',
+};
+//# sourceMappingURL=textarea_field.js.map

package/dist/esnext/TextareaField/textarea_field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea_field.js","sourceRoot":"","sources":["../../../src/TextareaField/textarea_field.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Toast/index.js

@@ -0,0 +1,3 @@
+export { ToastProvider } from './toast_provider';
+export { useToast } from './use_toast';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/esnext/Toast/toast.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Alert } from '../Alert';
+import { Fade } from '../Fade';
+export const Toast = (props) => {
+    const { id, duration, isClosable, alertProps, children, onClose, } = props;
+    const handleClose = () => {
+        onClose(id);
+    };
+    React.useEffect(() => {
+        if (duration > 0) {
+            const timeout = window.setTimeout(handleClose, duration);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+        return null;
+    });
+    return (React.createElement(Fade, { in: true },
+        React.createElement(Alert, { ...alertProps, onClose: isClosable ? handleClose : undefined }, children)));
+};
+Toast.displayName = 'Toast';
+Toast.defaultProps = {
+    duration: 4000,
+};
+//# sourceMappingURL=toast.js.map