@autoguru/overdrive 4.3.4 → 4.4.0

package/dist/components/StarRating/StarRating.js

@@ -1,101 +1,58 @@
-"use strict";
-
 import { StarHalfIcon, StarIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { memo } from 'react';
-import { Box, useBoxStyles } from "../Box/index.js";
-import { Icon } from "../Icon/index.js";
-import { Inline } from "../Inline/index.js";
-import { Text } from "../Text/index.js";
-import * as styles from "./StarRating.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, useBoxStyles } from '../Box';
+import { Icon } from '../Icon';
+import { Inline } from '../Inline';
+import { Text } from '../Text';
+import * as styles from './StarRating.css';
 const totalStars = 5;
-export let EStarRatingSize;
-
+export var EStarRatingSize;
 (function (EStarRatingSize) {
-  EStarRatingSize["Medium"] = "medium";
-  EStarRatingSize["Small"] = "small";
+    EStarRatingSize["Medium"] = "medium";
+    EStarRatingSize["Small"] = "small";
 })(EStarRatingSize || (EStarRatingSize = {}));
-
 var EStarType;
-
 (function (EStarType) {
-  EStarType[EStarType["Full"] = 0] = "Full";
-  EStarType[EStarType["Half"] = 1] = "Half";
-  EStarType[EStarType["Empty"] = 2] = "Empty";
+    EStarType[EStarType["Full"] = 0] = "Full";
+    EStarType[EStarType["Half"] = 1] = "Half";
+    EStarType[EStarType["Empty"] = 2] = "Empty";
 })(EStarType || (EStarType = {}));
-
-const starSizeMap = new Map([[EStarRatingSize.Medium, 'medium'], [EStarRatingSize.Small, 'small']]);
-const labelSizeMap = new Map([[EStarRatingSize.Small, '3'], [EStarRatingSize.Medium, '4']]);
-export const StarRating = memo(_ref => {
-  let {
-    className = '',
-    rating,
-    label = rating,
-    size = EStarRatingSize.Medium
-  } = _ref;
-  return _jsx(Box, {
-    className: className,
-    children: _jsxs(Inline, {
-      space: "4",
-      alignY: "center",
-      children: [_jsx(Inline, {
-        space: "none",
-        alignY: "center",
-        children: Array.from({
-          length: totalStars
-        }).fill(0).map((_, index) => _jsx(Star, {
-          index: index,
-          rating: rating,
-          size: size
-        }, index))
-      }), label === null ? null : _jsx(Text, {
-        size: labelSizeMap.get(size),
-        children: label
-      })]
-    })
-  });
-});
-
+const starSizeMap = new Map([
+    [EStarRatingSize.Medium, 'medium'],
+    [EStarRatingSize.Small, 'small'],
+]);
+const labelSizeMap = new Map([
+    [EStarRatingSize.Small, '3'],
+    [EStarRatingSize.Medium, '4'],
+]);
+export const StarRating = memo(({ className = '', rating, label = rating, size = EStarRatingSize.Medium, }) => (React.createElement(Box, { className: className },
+    React.createElement(Inline, { space: "4", alignY: "center" },
+        React.createElement(Inline, { space: "none", alignY: "center" }, Array.from({ length: totalStars })
+            .fill(0)
+            .map((_, index) => (React.createElement(Star, { key: index, index: index, rating: rating, size: size })))),
+        label === null ? null : (React.createElement(Text, { size: labelSizeMap.get(size) }, label))))));
 const getStarIconType = (index, rating) => {
-  if (index + 1 <= Math.floor(rating)) {
-    return EStarType.Full;
-  }
-
-  if (index + 1 > Math.ceil(rating)) {
-    return EStarType.Empty;
-  }
-
-  const decimalPart = Math.round((rating - index) * 1e1);
-
-  if (decimalPart <= 2) {
-    return EStarType.Empty;
-  }
-
-  if (decimalPart >= 8) {
-    return EStarType.Full;
-  }
-
-  return EStarType.Half;
+    if (index + 1 <= Math.floor(rating)) {
+        return EStarType.Full;
+    }
+    if (index + 1 > Math.ceil(rating)) {
+        return EStarType.Empty;
+    }
+    const decimalPart = Math.round((rating - index) * 1e1);
+    if (decimalPart <= 2) {
+        return EStarType.Empty;
+    }
+    if (decimalPart >= 8) {
+        return EStarType.Full;
+    }
+    return EStarType.Half;
+};
+const Star = ({ index, rating = 0, size = EStarRatingSize.Medium, }) => {
+    const starType = getStarIconType(index, rating);
+    const star = starType === EStarType.Half ? StarHalfIcon : StarIcon;
+    return (React.createElement(Icon, { key: index, icon: star, size: starSizeMap.get(size), className: clsx(useBoxStyles({ position: 'relative' }), styles.star.default, {
+            [styles.star.empty]: starType === EStarType.Empty,
+        }) }));
 };
-
-const Star = _ref2 => {
-  let {
-    index,
-    rating = 0,
-    size = EStarRatingSize.Medium
-  } = _ref2;
-  const starType = getStarIconType(index, rating);
-  const star = starType === EStarType.Half ? StarHalfIcon : StarIcon;
-  return _jsx(Icon, {
-    icon: star,
-    size: starSizeMap.get(size),
-    className: clsx(useBoxStyles({
-      position: 'relative'
-    }), styles.star.default, {
-      [styles.star.empty]: starType === EStarType.Empty
-    })
-  }, index);
-};

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

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

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

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

package/dist/components/StarRating/index.js

@@ -1,3 +1 @@
-"use strict";
-
-export { StarRating, EStarRatingSize } from "./StarRating.js";
+export { StarRating, EStarRatingSize } from './StarRating';

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

@@ -0,0 +1,5 @@
+export declare const disabled: string;
+export declare const root: string;
+export declare const handle: Record<"default" | "disabled", string>;
+export declare const label: string;
+//# sourceMappingURL=Stepper.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Stepper/Stepper.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,QAAmC,CAAC;AAEzD,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,MAAM,wCAkBjB,CAAC;AAEH,eAAO,MAAM,KAAK,QAEhB,CAAC"}

package/dist/components/Stepper/Stepper.css.js

@@ -1,43 +1,33 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Stepper/Stepper.css.ts", "@autoguru/overdrive");
-
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
-export const disabled = style({
-  cursor: 'not-allowed'
-}, "disabled");
+import { vars } from '../../themes/base/vars.css';
+export const disabled = style({ cursor: 'not-allowed' });
 export const root = style({
-  width: 'max-content',
-  selectors: {
-    ["&:not(".concat(disabled, "):focus")]: {
-      borderColor: vars.colours.intent.information.background.mild
-    }
-  }
-}, "root");
-export const handle = styleVariants({
-  default: {
-    width: vars.space[6],
-    height: vars.space[6],
-    backgroundColor: vars.colours.intent.primary.background.standard,
-    transition: "background-color 0.1s ".concat(vars.animation.easing.standard),
+    width: 'max-content',
     selectors: {
-      ["".concat(root, ":not(").concat(disabled, ") &:hover")]: {
-        backgroundColor: vars.colours.intent.primary.background.strong
-      },
-      ["".concat(root, ":not(").concat(disabled, ") &:active")]: {
-        backgroundColor: vars.colours.intent.primary.background.strong
-      }
-    }
-  },
-  disabled: {
-    borderColor: vars.colours.background.neutral
-  }
-}, "handle");
+        [`&:not(${disabled}):focus`]: {
+            borderColor: vars.colours.intent.information.background.mild,
+        },
+    },
+});
+export const handle = styleVariants({
+    default: {
+        width: vars.space[6],
+        height: vars.space[6],
+        backgroundColor: vars.colours.intent.primary.background.standard,
+        transition: `background-color 0.1s ${vars.animation.easing.standard}`,
+        selectors: {
+            [`${root}:not(${disabled}) &:hover`]: {
+                backgroundColor: vars.colours.intent.primary.background.strong,
+            },
+            [`${root}:not(${disabled}) &:active`]: {
+                backgroundColor: vars.colours.intent.primary.background.strong,
+            },
+        },
+    },
+    disabled: {
+        borderColor: vars.colours.background.neutral,
+    },
+});
 export const label = style({
-  minWidth: vars.space['8']
-}, "label");
-
-__vanilla_filescope__.endFileScope();
+    minWidth: vars.space['8'],
+});

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent } from 'react';
+export interface Props {
+    className?: string;
+    disabled?: boolean;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    format?(value: number): string;
+    onChange?(value: number): void;
+}
+export declare const Stepper: FunctionComponent<Props>;
+//# sourceMappingURL=Stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../lib/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA,OAAO,EACN,iBAAiB,EAOjB,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AA+ED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CA0I5C,CAAC"}

package/dist/components/Stepper/Stepper.js

@@ -1,188 +1,107 @@
-"use strict";
-
 import { MinusIcon, PlusIcon } from '@autoguru/icons';
 import { clamp } from '@autoguru/utilities';
 import clsx from 'clsx';
 import * as React from 'react';
-import { useCallback, useReducer, useRef } from 'react';
-import { Box, useBoxStyles } from "../Box/index.js";
-import { Column, Columns } from "../Columns/index.js";
-import { Icon } from "../Icon/index.js";
-import { Text, useTextStyles } from "../Text/index.js";
-import * as styles from "./Stepper.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useReducer, useRef, } from 'react';
+import { Box, useBoxStyles } from '../Box';
+import { Column, Columns } from '../Columns';
+import { Icon } from '../Icon';
+import { Text, useTextStyles } from '../Text';
+import * as styles from './Stepper.css';
 var EActionType;
-
 (function (EActionType) {
-  EActionType[EActionType["INCREMENT"] = 0] = "INCREMENT";
-  EActionType[EActionType["DECREMENT"] = 1] = "DECREMENT";
-  EActionType[EActionType["VALUE"] = 2] = "VALUE";
+    EActionType[EActionType["INCREMENT"] = 0] = "INCREMENT";
+    EActionType[EActionType["DECREMENT"] = 1] = "DECREMENT";
+    EActionType[EActionType["VALUE"] = 2] = "VALUE";
 })(EActionType || (EActionType = {}));
-
-const getValueOrSafeInteger = value => value < 0 ? Number.MIN_SAFE_INTEGER : Number.MAX_SAFE_INTEGER;
-
+const getValueOrSafeInteger = (value) => value < 0 ? Number.MIN_SAFE_INTEGER : Number.MAX_SAFE_INTEGER;
 const reducer = (state, action) => {
-  if (action.type === EActionType.VALUE) {
+    if (action.type === EActionType.VALUE) {
+        return {
+            value: Number.isFinite(action.value)
+                ? action.value
+                : getValueOrSafeInteger(action.value),
+        };
+    }
+    const direction = EActionType.DECREMENT === action.type ? -1 : 1;
     return {
-      value: Number.isFinite(action.value) ? action.value : getValueOrSafeInteger(action.value)
+        value: clamp(state.value + direction * action.step, action.min, action.max),
     };
-  }
-
-  const direction = EActionType.DECREMENT === action.type ? -1 : 1;
-  return {
-    value: clamp(state.value + direction * action.step, action.min, action.max)
-  };
-};
-
-const Handle = _ref => {
-  let {
-    disabled,
-    icon,
-    label,
-    onClick
-  } = _ref;
-  return _jsx(Box, {
-    is: "button",
-    className: [styles.handle.default, disabled && styles.handle.disabled, useTextStyles({
-      colour: 'white'
-    })],
-    "aria-label": label,
-    padding: "none",
-    borderRadius: "full",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    disabled: disabled,
-    tabIndex: -1,
-    onClick: onClick,
-    children: _jsx(Icon, {
-      icon: icon,
-      size: "small"
-    })
-  });
 };
-
-export const Stepper = _ref2 => {
-  let {
-    className = '',
-    disabled: incomingDisabled = false,
-    step = 1,
-    min = Number.NEGATIVE_INFINITY,
-    max = Number.POSITIVE_INFINITY,
-    value,
-    format = value => value.toString(),
-    onChange
-  } = _ref2;
-  const disabled = incomingDisabled || value === undefined || value === null;
-  const [state, dispatch] = useReducer(reducer, {
-    value: value !== null && value !== void 0 ? value : 0
-  });
-  const prevValue = useRef(value);
-
-  if (state.value !== value && typeof onChange === 'function') {
-    onChange(state.value);
-  }
-
-  const onDecrement = useCallback(() => dispatch({
-    type: EActionType.DECREMENT,
-    step,
-    min,
-    max
-  }), [step, min, max]);
-  const onIncrement = useCallback(() => dispatch({
-    type: EActionType.INCREMENT,
-    step,
-    min,
-    max
-  }), [step, min, max]);
-  const keyDownHandler = useCallback(event => {
-    switch (event.key) {
-      case 'ArrowLeft':
-        return onDecrement();
-
-      case 'ArrowRight':
-        return onIncrement();
-
-      case 'Home':
-      case 'End':
-        event.preventDefault();
-        return dispatch({
-          type: EActionType.VALUE,
-          max,
-          min,
-          step,
-          value: event.key === 'Home' ? min : max
-        });
-
-      case 'Escape':
-        event.currentTarget.blur();
-        break;
+const Handle = ({ disabled, icon, label, onClick, }) => (React.createElement(Box, { is: "button", className: [
+        styles.handle.default,
+        disabled && styles.handle.disabled,
+        useTextStyles({ colour: 'white' }),
+    ], "aria-label": label, padding: "none", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", disabled: disabled, tabIndex: -1, onClick: onClick },
+    React.createElement(Icon, { icon: icon, size: "small" })));
+export const Stepper = ({ className = '', disabled: incomingDisabled = false, step = 1, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, value, format = (value) => value.toString(), onChange, }) => {
+    const disabled = incomingDisabled || value === undefined || value === null;
+    const [state, dispatch] = useReducer(reducer, { value: value ?? 0 });
+    const prevValue = useRef(value);
+    if (state.value !== value && typeof onChange === 'function') {
+        onChange(state.value);
     }
-  }, [onDecrement, onIncrement]);
-
-  if (prevValue.current !== value && value !== undefined) {
-    if (value !== state.value) dispatch({
-      type: EActionType.VALUE,
-      value,
-      step,
-      min,
-      max
-    });
-    prevValue.current = value;
-  }
-
-  return _jsx(Box, {
-    className: [styles.root, useBoxStyles({
-      is: 'button'
-    }), disabled && styles.disabled, className],
-    userSelect: "none",
-    "aria-disabled": disabled,
-    tabIndex: 0,
-    borderWidth: "1",
-    borderColour: "gray",
-    padding: "3",
-    borderRadius: "1",
-    boxShadow: "2",
-    onKeyDown: keyDownHandler,
-    children: _jsxs(Columns, {
-      noWrap: true,
-      children: [_jsx(Column, {
-        noShrink: true,
-        alignSelf: "centre",
-        children: _jsx(Handle, {
-          icon: MinusIcon,
-          label: "step down",
-          disabled: disabled,
-          onClick: onDecrement
-        })
-      }), _jsx(Column, {
-        noShrink: true,
-        width: "auto",
-        alignSelf: "centre",
-        children: _jsx(Text, {
-          is: "span",
-          align: "center",
-          colour: "dark",
-          display: "block",
-          className: clsx(useBoxStyles({
-            paddingX: '2',
-            width: 'full',
-            is: 'span'
-          }), styles.label),
-          size: "4",
-          children: Number.isFinite(state.value) ? format(state.value) : ''
-        })
-      }), _jsx(Column, {
-        noShrink: true,
-        alignSelf: "centre",
-        children: _jsx(Handle, {
-          icon: PlusIcon,
-          label: "step up",
-          disabled: disabled,
-          onClick: onIncrement
-        })
-      })]
-    })
-  });
-};
+    const onDecrement = useCallback(() => dispatch({
+        type: EActionType.DECREMENT,
+        step,
+        min,
+        max,
+    }), [step, min, max]);
+    const onIncrement = useCallback(() => dispatch({
+        type: EActionType.INCREMENT,
+        step,
+        min,
+        max,
+    }), [step, min, max]);
+    const keyDownHandler = useCallback((event) => {
+        switch (event.key) {
+            case 'ArrowLeft':
+                return onDecrement();
+            case 'ArrowRight':
+                return onIncrement();
+            case 'Home':
+            case 'End':
+                event.preventDefault();
+                return dispatch({
+                    type: EActionType.VALUE,
+                    max,
+                    min,
+                    step,
+                    value: event.key === 'Home' ? min : max,
+                });
+            case 'Escape':
+                event.currentTarget.blur();
+                break;
+        }
+    }, [onDecrement, onIncrement]);
+    if (prevValue.current !== value && value !== undefined) {
+        if (value !== state.value)
+            dispatch({
+                type: EActionType.VALUE,
+                value,
+                step,
+                min,
+                max,
+            });
+        prevValue.current = value;
+    }
+    return (React.createElement(Box, { className: [
+            styles.root,
+            useBoxStyles({ is: 'button' }),
+            disabled && styles.disabled,
+            className,
+        ], userSelect: "none", "aria-disabled": disabled, tabIndex: 0, borderWidth: "1", borderColour: "gray", padding: "3", borderRadius: "1", boxShadow: "2", onKeyDown: keyDownHandler },
+        React.createElement(Columns, { noWrap: true },
+            React.createElement(Column, { noShrink: true, alignSelf: "centre" },
+                React.createElement(Handle, { icon: MinusIcon, label: "step down", disabled: disabled, onClick: onDecrement })),
+            React.createElement(Column, { noShrink: true, width: "auto", alignSelf: "centre" },
+                React.createElement(Text, { is: "span", align: "center", colour: "dark", display: "block", className: clsx(useBoxStyles({
+                        paddingX: '2',
+                        width: 'full',
+                        is: 'span',
+                    }), styles.label), size: "4" }, Number.isFinite(state.value)
+                    ? format(state.value)
+                    : '')),
+            React.createElement(Column, { noShrink: true, alignSelf: "centre" },
+                React.createElement(Handle, { icon: PlusIcon, label: "step up", disabled: disabled, onClick: onIncrement })))));
+};

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

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

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

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

package/dist/components/Stepper/index.js

@@ -1,3 +1 @@
-"use strict";
-
-export { Stepper } from "./Stepper.js";
+export { Stepper } from './Stepper';

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

@@ -0,0 +1,5 @@
+export declare const root: string;
+export declare const handle: Record<"transition" | "default", string>;
+export declare const toggled: string;
+export declare const disabled: Record<"default" | "toggled", string>;
+//# sourceMappingURL=Switch.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,IAAI,QAKf,CAAC;AAEH,eAAO,MAAM,MAAM,0CAcjB,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC;AAEH,eAAO,MAAM,QAAQ,uCAkBnB,CAAC"}