@autoguru/overdrive 4.4.5 → 4.5.2

package/dist/components/DatePicker/DatePicker.css.d.ts

@@ -0,0 +1,4 @@
+export declare const input: string;
+export declare const disabled: Record<"default" | "root", string>;
+export declare const spinner: string;
+//# sourceMappingURL=DatePicker.css.d.ts.map

package/dist/components/DatePicker/DatePicker.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,QAqBhB,CAAC;AACH,eAAO,MAAM,QAAQ,oCAOnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC"}

package/dist/components/DatePicker/DatePicker.css.js

@@ -0,0 +1,36 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+export const input = style({
+    top: 0,
+    right: 0,
+    opacity: 0,
+    cursor: 'pointer',
+    display: 'grid',
+    gridTemplateColumns: 'auto 50px',
+    selectors: {
+        '&::-webkit-calendar-picker-indicator': {
+            background: 'transparent',
+            bottom: 0,
+            color: 'transparent',
+            cursor: 'pointer',
+            height: 'auto',
+            left: 0,
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            width: 'auto',
+        },
+    },
+});
+export const disabled = styleVariants({
+    default: {
+        cursor: 'not-allowed',
+    },
+    root: {
+        opacity: '0.3',
+    },
+});
+export const spinner = style({
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+});

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,12 @@
+import { IconType } from '@autoguru/icons';
+import { ComponentProps, FunctionComponent } from 'react';
+import { Icon } from '../Icon';
+export interface Props extends Partial<Pick<HTMLInputElement, 'min' | 'max' | 'value'>>, Pick<ComponentProps<typeof Icon>, 'size'> {
+    className?: string;
+    disabled?: boolean;
+    icon?: IconType;
+    isLoading?: boolean;
+    onChange(date: string): any;
+}
+export declare const DatePicker: FunctionComponent<Props>;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/DatePicker/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,EAAe,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAM/B,MAAM,WAAW,KAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,GAAG,KAAK,GAAG,OAAO,CAAC,CAAC,EAC/D,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,IAAI,EAAE,MAAM,OAAE;CACvB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CA2D/C,CAAC"}

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,26 @@
+import { CalendarIcon } from '@autoguru/icons';
+import clsx from 'clsx';
+import * as React from 'react';
+import { resolveResponsiveStyle } from '../../utils/resolveResponsiveProps';
+import { Box, useBoxStyles } from '../Box';
+import { Icon } from '../Icon';
+import * as iconStyles from '../Icon/Icon.css';
+import { ProgressSpinner } from '../ProgressSpinner';
+import * as styles from './DatePicker.css';
+export const DatePicker = ({ className = '', icon = CalendarIcon, size = 'medium', disabled = false, isLoading = false, onChange, ...inputProps }) => {
+    const onChangeEvent = (event) => {
+        if (typeof onChange === 'function') {
+            onChange(event.currentTarget.value);
+        }
+    };
+    return (React.createElement(Box, { position: "relative", overflow: "hidden", className: clsx(resolveResponsiveStyle(size, iconStyles.size), className, {
+            [styles.disabled.default]: disabled,
+            [styles.disabled.root]: disabled,
+        }) },
+        React.createElement(Box, { position: "absolute", height: "full", width: "full", is: "input", disabled: disabled, onChange: onChangeEvent, className: clsx({
+                [styles.disabled.default]: disabled,
+            }, styles.input), type: "date", ...inputProps }),
+        isLoading ? (React.createElement(ProgressSpinner, { className: clsx(styles.spinner, useBoxStyles({
+                position: 'absolute',
+            })), size: size })) : (React.createElement(Icon, { icon: icon, size: size }))));
+};

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

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DatePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/DatePicker/index.js

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

package/dist/components/DatePicker/stories.js

@@ -0,0 +1,75 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { AccountEditIcon, AlertCircleIcon, CalendarIcon, CarIcon, CarMultipleIcon, CheckIcon, CurrencyUsdIcon, MagnifyIcon, PlusIcon, StarIcon } from '@autoguru/icons';
+import * as React from 'react';
+import { DatePicker } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const iconOptions = {
+  MagnifyIcon,
+  CarIcon,
+  CarMultipleIcon,
+  CalendarIcon,
+  AccountEditIcon,
+  AlertCircleIcon,
+  CurrencyUsdIcon,
+  PlusIcon,
+  StarIcon,
+  CheckIcon
+};
+export default {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  decorators: [],
+  argTypes: {
+    icon: {
+      defaultValue: void 0,
+      description: 'Input field Icon',
+      options: iconOptions,
+      control: {
+        type: 'select'
+      }
+    },
+    size: {
+      options: ['small', 'medium', 'large'],
+      control: {
+        type: 'select'
+      }
+    }
+  }
+};
+
+const Template = args => _jsx(DatePicker, _objectSpread({}, args));
+
+const standardProps = {
+  isLoading: false,
+  disabled: false
+};
+export const standard = Template.bind(standardProps);
+standard.args = standardProps;
+const smallProps = {
+  size: 'small',
+  isLoading: false,
+  disabled: false
+};
+export const small = Template.bind(smallProps);
+small.args = smallProps;
+const mediumProps = {
+  size: 'medium',
+  isLoading: false,
+  disabled: false
+};
+export const medium = Template.bind(mediumProps);
+medium.args = mediumProps;
+const largeProps = {
+  size: 'large',
+  isLoading: false,
+  disabled: false
+};
+export const large = Template.bind(largeProps);
+large.args = largeProps;

package/dist/components/Toaster/Toast.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Toaster/Toast.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,KAAK,QAEhB,CAAC"}
+{"version":3,"file":"Toast.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Toaster/Toast.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,KAAK,QAEhB,CAAC"}

package/dist/components/Toaster/Toast.css.js

@@ -4,8 +4,9 @@ export const root = style({
     zIndex: 3000,
     justifyItems: 'center',
     top: vars.space['3'],
-    right: 0,
-    left: 0,
+    left: '50vw',
+    transition: `translateX .400s ${vars.animation.easing.standard}`,
+    transform: 'translateX(-50%)',
 });
 export const alert = style({
     pointerEvents: 'initial',

package/dist/components/Toaster/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../lib/components/Toaster/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,cAAc,EAGd,SAAS,EAOT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAOjC,aAAK,WAAW,GAAG,SAAS,CAAC;AAC7B,aAAK,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;AAWpE,UAAU,OACT,SAAQ,QAAQ,CACf,MAAM,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,CACtE;IACD,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChD;AA0ED,eAAO,MAAM,aAAa;;iBAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,OAwE3B,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../lib/components/Toaster/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,cAAc,EAGd,SAAS,EAOT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAOjC,aAAK,WAAW,GAAG,SAAS,CAAC;AAC7B,aAAK,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;AAWpE,UAAU,OACT,SAAQ,QAAQ,CACf,MAAM,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,CACtE;IACD,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChD;AAyED,eAAO,MAAM,aAAa;;iBAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,OAwE3B,CAAC"}

package/dist/components/Toaster/Toast.js

@@ -42,7 +42,7 @@ const InternalToastProvider = ({ children }) => {
     return (React.createElement(ToastControllerContext.Provider, { value: addToast },
         children,
         React.createElement(Portal, null,
-            React.createElement(Box, { width: "full", display: "flex", position: "fixed", alignItems: "center", justifyContent: "center", className: styles.root },
+            React.createElement(Box, { display: "flex", position: "fixed", alignItems: "center", justifyContent: "center", className: styles.root },
                 React.createElement(Stack, { space: "2" }, toasts.map((item) => (React.createElement(Toast, { key: item.id, ...item, remove: removeToast }))))))));
 };
 export const ToastProvider = ({ children }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.4.5",
+	"version": "4.5.2",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",