@autoguru/overdrive 4.0.2 → 4.0.3

package/dist/components/Stepper/Stepper.js

@@ -1,107 +1,188 @@
+"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';
-import { Column, Columns } from '../Columns';
-import { Icon } from '../Icon';
-import { Text, useTextStyles } from '../Text';
-import * as styles from './Stepper.css';
+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";
 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) {
-        return {
-            value: Number.isFinite(action.value)
-                ? action.value
-                : getValueOrSafeInteger(action.value),
-        };
-    }
-    const direction = EActionType.DECREMENT === action.type ? -1 : 1;
+  if (action.type === EActionType.VALUE) {
     return {
-        value: clamp(state.value + direction * action.step, action.min, action.max),
+      value: Number.isFinite(action.value) ? action.value : getValueOrSafeInteger(action.value)
     };
+  }
+
+  const direction = EActionType.DECREMENT === action.type ? -1 : 1;
+  return {
+    value: clamp(state.value + direction * action.step, action.min, action.max)
+  };
 };
-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);
-    }
-    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 })))));
+
+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;
+    }
+  }, [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
+        })
+      })]
+    })
+  });
+};

package/dist/components/Stepper/index.js

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

package/dist/components/Switch/Switch.css.js

@@ -1,49 +1,57 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Switch/Switch.css.ts", "@autoguru/overdrive");
+
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
+import { vars } from "../../themes/base/vars.css.js";
 const handleSize = '24px';
 const handleOffset = '2px';
 const borderSize = '1px';
 export const root = style({
-    width: `calc((2 * ${handleSize}) + ${handleOffset} - 2 * ${borderSize})`,
-    height: `calc(${handleSize} + (${handleOffset} * 2))`,
-    transition: 'background-color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
-    border: `${borderSize} solid ${vars.border.colours.light}`,
-});
+  width: "calc((2 * ".concat(handleSize, ") + ").concat(handleOffset, " - 2 * ").concat(borderSize, ")"),
+  height: "calc(".concat(handleSize, " + (").concat(handleOffset, " * 2))"),
+  transition: 'background-color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
+  border: "".concat(borderSize, " solid ").concat(vars.border.colours.light)
+}, "root");
 export const handle = styleVariants({
-    default: {
-        borderColor: vars.border.colours.gray,
-        top: `calc(${handleOffset} - ${borderSize})`,
-        left: `calc(${handleOffset} - ${borderSize})`,
-        width: `${handleSize}`,
-        height: `${handleSize}`,
-        transition: 'transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
-        willChange: 'transform',
-    },
-    transition: {
-        transform: `translateX(calc(${handleSize} - (2 * ${handleOffset})))`,
-        borderColor: vars.colours.intent.primary.background.strong,
-    },
-});
+  default: {
+    borderColor: vars.border.colours.gray,
+    top: "calc(".concat(handleOffset, " - ").concat(borderSize, ")"),
+    left: "calc(".concat(handleOffset, " - ").concat(borderSize, ")"),
+    width: "".concat(handleSize),
+    height: "".concat(handleSize),
+    transition: 'transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
+    willChange: 'transform'
+  },
+  transition: {
+    transform: "translateX(calc(".concat(handleSize, " - (2 * ").concat(handleOffset, ")))"),
+    borderColor: vars.colours.intent.primary.background.strong
+  }
+}, "handle");
 export const toggled = style({
-    borderColor: vars.colours.intent.primary.background.strong,
-    backgroundColor: vars.colours.intent.primary.background.standard,
-});
+  borderColor: vars.colours.intent.primary.background.strong,
+  backgroundColor: vars.colours.intent.primary.background.standard
+}, "toggled");
 export const disabled = styleVariants({
-    default: {
-        selectors: {
-            '&[aria-disabled=true]': {
-                cursor: 'not-allowed',
-                borderColor: vars.border.colours.light,
-                backgroundColor: vars.border.colours.light,
-            },
-        },
-    },
-    toggled: {
-        selectors: {
-            '&[aria-disabled=true]': {
-                borderColor: vars.border.colours.light,
-                backgroundColor: vars.colours.intent.primary.background.mild,
-            },
-        },
-    },
-});
+  default: {
+    selectors: {
+      '&[aria-disabled=true]': {
+        cursor: 'not-allowed',
+        borderColor: vars.border.colours.light,
+        backgroundColor: vars.border.colours.light
+      }
+    }
+  },
+  toggled: {
+    selectors: {
+      '&[aria-disabled=true]': {
+        borderColor: vars.border.colours.light,
+        backgroundColor: vars.colours.intent.primary.background.mild
+      }
+    }
+  }
+}, "disabled");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Switch/Switch.js

@@ -1,31 +1,66 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
 import { useCallback, useState } from 'react';
-import { Box, useBoxStyles } from '../Box';
-import { useTextStyles } from '../Text';
-import * as styles from './Switch.css';
-export const Switch = ({ className = '', disabled = false, toggled: incomingToggled = false, onChange, }) => {
-    const [toggled, setToggled] = useState(incomingToggled);
-    const [prevValue, setPrevValue] = useState(incomingToggled);
-    const onToggle = useCallback(() => {
-        if (disabled) {
-            return;
-        }
-        if (typeof onChange === 'function') {
-            onChange(!toggled);
-        }
-        setToggled(!toggled);
-    }, [incomingToggled, disabled, toggled]);
-    if (prevValue !== incomingToggled) {
-        setToggled(incomingToggled);
-        setPrevValue(incomingToggled);
+import { Box, useBoxStyles } from "../Box/index.js";
+import { useTextStyles } from "../Text/index.js";
+import * as styles from "./Switch.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Switch = _ref => {
+  let {
+    className = '',
+    disabled = false,
+    toggled: incomingToggled = false,
+    onChange
+  } = _ref;
+  const [toggled, setToggled] = useState(incomingToggled);
+  const [prevValue, setPrevValue] = useState(incomingToggled);
+  const onToggle = useCallback(() => {
+    if (disabled) {
+      return;
     }
-    return (React.createElement(Box, { is: "button", className: clsx(styles.root, useTextStyles({ size: '5' }), {
-            [styles.toggled]: toggled,
-            [styles.disabled.default]: disabled,
-            [styles.disabled.toggled]: toggled && disabled,
-        }, className), borderRadius: "pill", position: "relative", "aria-disabled": disabled, "aria-label": `toggle ${toggled ? 'on' : 'off'}`, onClick: onToggle },
-        React.createElement(Box, { borderWidth: "1", position: "absolute", borderRadius: "pill", backgroundColour: "white", padding: "none", boxShadow: "2", className: clsx(styles.handle.default, useBoxStyles({ is: 'button' }), useTextStyles({ colour: 'white' }), {
-                [styles.handle.transition]: toggled,
-            }) })));
-};
+
+    if (typeof onChange === 'function') {
+      onChange(!toggled);
+    }
+
+    setToggled(!toggled);
+  }, [incomingToggled, disabled, toggled]);
+
+  if (prevValue !== incomingToggled) {
+    setToggled(incomingToggled);
+    setPrevValue(incomingToggled);
+  }
+
+  return _jsx(Box, {
+    is: "button",
+    className: clsx(styles.root, useTextStyles({
+      size: '5'
+    }), {
+      [styles.toggled]: toggled,
+      [styles.disabled.default]: disabled,
+      [styles.disabled.toggled]: toggled && disabled
+    }, className),
+    borderRadius: "pill",
+    position: "relative",
+    "aria-disabled": disabled,
+    "aria-label": "toggle ".concat(toggled ? 'on' : 'off'),
+    onClick: onToggle,
+    children: _jsx(Box, {
+      borderWidth: "1",
+      position: "absolute",
+      borderRadius: "pill",
+      backgroundColour: "white",
+      padding: "none",
+      boxShadow: "2",
+      className: clsx(styles.handle.default, useBoxStyles({
+        is: 'button'
+      }), useTextStyles({
+        colour: 'white'
+      }), {
+        [styles.handle.transition]: toggled
+      })
+    })
+  });
+};

package/dist/components/Switch/index.js

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

package/dist/components/Table/Table.css.js

@@ -1,8 +1,16 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Table/Table.css.ts", "@autoguru/overdrive");
+
 import { style } from '@vanilla-extract/css';
 export const root = style({
-    display: 'grid',
-    gridGap: '0',
-    alignItems: 'stretch',
-    clipPath: 'inset(0)',
-    clip: 'rect(0px, auto, auto, 0px)',
-});
+  display: 'grid',
+  gridGap: '0',
+  alignItems: 'stretch',
+  clipPath: 'inset(0)',
+  clip: 'rect(0px, auto, auto, 0px)'
+}, "root");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Table/Table.js

@@ -1,7 +1,30 @@
+"use strict";
+
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { Box } from '../Box';
-import * as styles from './Table.css';
-import { TableContextProvider } from './context';
-export const Table = forwardRef(({ children, padding = '4', stickyHead = false, columnTemplate }, ref) => (React.createElement(TableContextProvider, { padding: padding, stickyHead: stickyHead },
-    React.createElement(Box, { ref: ref, role: "grid", width: "full", style: { gridTemplateColumns: columnTemplate }, className: styles.root }, children))));
+import { Box } from "../Box/index.js";
+import * as styles from "./Table.css.js";
+import { TableContextProvider } from "./context.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Table = forwardRef((_ref, ref) => {
+  let {
+    children,
+    padding = '4',
+    stickyHead = false,
+    columnTemplate
+  } = _ref;
+  return _jsx(TableContextProvider, {
+    padding: padding,
+    stickyHead: stickyHead,
+    children: _jsx(Box, {
+      ref: ref,
+      role: "grid",
+      width: "full",
+      style: {
+        gridTemplateColumns: columnTemplate
+      },
+      className: styles.root,
+      children: children
+    })
+  });
+});

package/dist/components/Table/TableCell.css.js

@@ -1,22 +1,30 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Table/TableCell.css.ts", "@autoguru/overdrive");
+
 import { style } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
+import { vars } from "../../themes/base/vars.css.js";
 export const root = style({
-    position: 'relative',
-    ':before': {
-        display: 'block',
-        content: '""',
-        position: 'absolute',
-        zIndex: -1,
-        top: 0,
-        bottom: 0,
-        left: '-1000%',
-        right: '-1000%',
-        transition: `background-color 0.2s ${vars.animation.easing.accelerate}`,
-    },
-    selectors: {
-        '&:hover:before': {
-            transitionTimingFunction: vars.animation.easing.decelerate,
-            backgroundColor: vars.border.colours.light,
-        },
-    },
-});
+  position: 'relative',
+  ':before': {
+    display: 'block',
+    content: '""',
+    position: 'absolute',
+    zIndex: -1,
+    top: 0,
+    bottom: 0,
+    left: '-1000%',
+    right: '-1000%',
+    transition: "background-color 0.2s ".concat(vars.animation.easing.accelerate)
+  },
+  selectors: {
+    '&:hover:before': {
+      transitionTimingFunction: vars.animation.easing.decelerate,
+      backgroundColor: vars.border.colours.light
+    }
+  }
+}, "root");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Table/TableCell.js

@@ -1,13 +1,43 @@
+"use strict";
+
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { alignmentToFlexAlignment } from '../../utils';
-import { Box } from '../Box';
-import { Text } from '../Text';
-import * as styles from './TableCell.css';
-import { useTableContext } from './context';
-export const TableCell = forwardRef(({ padding: incomingPadding, align = 'left', 'aria-label': ariaLabel, children, }, ref) => {
-    const tableContext = useTableContext();
-    const padding = incomingPadding ?? tableContext?.padding ?? 'none';
-    return (React.createElement(Box, { ref: ref, role: "gridcell", scope: "row", display: "flex", alignItems: "center", justifyContent: alignmentToFlexAlignment(align), padding: padding, borderColourBottom: "light", borderWidthBottom: "1", "aria-label": ariaLabel, className: styles.root }, typeof children === 'string' ||
-        typeof children === 'number' ? (React.createElement(Text, { is: "span", align: align, colour: "dark", display: "block", size: "3" }, children)) : (children)));
-});
+import { alignmentToFlexAlignment } from "../../utils/index.js";
+import { Box } from "../Box/index.js";
+import { Text } from "../Text/index.js";
+import * as styles from "./TableCell.css.js";
+import { useTableContext } from "./context.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TableCell = forwardRef((_ref, ref) => {
+  var _ref2;
+
+  let {
+    padding: incomingPadding,
+    align = 'left',
+    'aria-label': ariaLabel,
+    children
+  } = _ref;
+  const tableContext = useTableContext();
+  const padding = (_ref2 = incomingPadding !== null && incomingPadding !== void 0 ? incomingPadding : tableContext === null || tableContext === void 0 ? void 0 : tableContext.padding) !== null && _ref2 !== void 0 ? _ref2 : 'none';
+  return _jsx(Box, {
+    ref: ref,
+    role: "gridcell",
+    scope: "row",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: alignmentToFlexAlignment(align),
+    padding: padding,
+    borderColourBottom: "light",
+    borderWidthBottom: "1",
+    "aria-label": ariaLabel,
+    className: styles.root,
+    children: typeof children === 'string' || typeof children === 'number' ? _jsx(Text, {
+      is: "span",
+      align: align,
+      colour: "dark",
+      display: "block",
+      size: "3",
+      children: children
+    }) : children
+  });
+});