@autoguru/overdrive 4.10.1 → 4.11.0

package/dist/components/Stepper/Stepper.js

@@ -1,72 +1,165 @@
+"use strict";
+
 import { MinusIcon, PlusIcon } from '@autoguru/icons';
 import { clamp } from '@autoguru/utilities';
 import clsx from 'clsx';
 import * as React from 'react';
-import { useCallback, } from 'react';
-import { addWithSafeDecimal } from '../../utils/number';
-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';
-const takeStep = ({ min, max, value, step, direction }) => {
-    const directionChange = (direction === 'DOWN' ? -1 : 1) * step;
-    return clamp(addWithSafeDecimal(value, directionChange), min, max);
+import { useCallback } from 'react';
+import { addWithSafeDecimal } from "../../utils/number.js";
+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";
+
+const takeStep = _ref => {
+  let {
+    min,
+    max,
+    value,
+    step,
+    direction
+  } = _ref;
+  const directionChange = (direction === 'DOWN' ? -1 : 1) * step;
+  return clamp(addWithSafeDecimal(value, directionChange), min, 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, isFullWidth = false, step = 1, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, value: incomingValue = 0, format = (value) => value.toString(), onChange = () => void 0, }) => {
-    const value = clamp(incomingValue, min, max);
-    const disabled = incomingDisabled || value === undefined || value === null;
-    const onDecrement = useCallback(() => onChange(takeStep({
-        direction: 'DOWN',
-        step,
-        min,
-        max,
-        value,
-    })), [step, min, max, value, onChange]);
-    const onIncrement = useCallback(() => onChange(takeStep({
-        direction: 'UP',
-        step,
-        min,
-        max,
-        value,
-    })), [step, min, max, value, onChange]);
-    const keyDownHandler = useCallback((event) => {
-        switch (event.key) {
-            case 'ArrowLeft':
-                return onDecrement();
-            case 'ArrowRight':
-                return onIncrement();
-            case 'Home':
-                event.preventDefault();
-                return onChange(min);
-            case 'End':
-                event.preventDefault();
-                return onChange(max);
-            case 'Escape':
-                event.currentTarget.blur();
-                break;
-        }
-    }, [min, max, onDecrement, onIncrement, onChange]);
-    return (React.createElement(Box, { className: clsx(className, styles.root, useBoxStyles({ is: 'button' }), disabled && styles.disabled, {
-            [styles.width.default]: !isFullWidth,
-            [styles.width.full]: isFullWidth,
-        }), userSelect: "none", "aria-disabled": disabled, tabIndex: 0, borderWidth: "1", borderColour: "gray", padding: "3", borderRadius: "1", boxShadow: "2", onKeyDown: keyDownHandler },
-        React.createElement(Columns, { noWrap: true, width: "full" },
-            React.createElement(Column, { noShrink: true, alignSelf: "centre" },
-                React.createElement(Handle, { icon: MinusIcon, label: "step down", disabled: disabled, onClick: onDecrement })),
-            React.createElement(Column, { noShrink: true, grow: 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(value) ? format(value) : '')),
-            React.createElement(Column, { noShrink: true, alignSelf: "centre" },
-                React.createElement(Handle, { icon: PlusIcon, label: "step up", disabled: disabled, onClick: onIncrement })))));
+
+const Handle = _ref2 => {
+  let {
+    disabled,
+    icon,
+    label,
+    onClick
+  } = _ref2;
+  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 default Stepper;
+
+export const Stepper = _ref3 => {
+  let {
+    className = '',
+    disabled: incomingDisabled = false,
+    isFullWidth = false,
+    step = 1,
+    min = Number.MIN_SAFE_INTEGER,
+    max = Number.MAX_SAFE_INTEGER,
+    value: incomingValue = 0,
+    format = value => value.toString(),
+    onChange = () => void 0
+  } = _ref3;
+  const value = clamp(incomingValue, min, max);
+  const disabled = incomingDisabled || value === undefined || value === null;
+  const onDecrement = useCallback(() => onChange(takeStep({
+    direction: 'DOWN',
+    step,
+    min,
+    max,
+    value
+  })), [step, min, max, value, onChange]);
+  const onIncrement = useCallback(() => onChange(takeStep({
+    direction: 'UP',
+    step,
+    min,
+    max,
+    value
+  })), [step, min, max, value, onChange]);
+  const keyDownHandler = useCallback(event => {
+    switch (event.key) {
+      case 'ArrowLeft':
+        return onDecrement();
+
+      case 'ArrowRight':
+        return onIncrement();
+
+      case 'Home':
+        event.preventDefault();
+        return onChange(min);
+
+      case 'End':
+        event.preventDefault();
+        return onChange(max);
+
+      case 'Escape':
+        event.currentTarget.blur();
+        break;
+    }
+  }, [min, max, onDecrement, onIncrement, onChange]);
+  return _jsx(Box, {
+    className: clsx(className, styles.root, useBoxStyles({
+      is: 'button'
+    }), disabled && styles.disabled, {
+      [styles.width.default]: !isFullWidth,
+      [styles.width.full]: isFullWidth
+    }),
+    userSelect: "none",
+    "aria-disabled": disabled,
+    tabIndex: 0,
+    borderWidth: "1",
+    borderColour: "gray",
+    padding: "3",
+    borderRadius: "1",
+    boxShadow: "2",
+    onKeyDown: keyDownHandler,
+    children: _jsxs(Columns, {
+      noWrap: true,
+      width: "full",
+      children: [_jsx(Column, {
+        noShrink: true,
+        alignSelf: "centre",
+        children: _jsx(Handle, {
+          icon: MinusIcon,
+          label: "step down",
+          disabled: disabled,
+          onClick: onDecrement
+        })
+      }), _jsx(Column, {
+        noShrink: true,
+        grow: 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(value) ? format(value) : ''
+        })
+      }), _jsx(Column, {
+        noShrink: true,
+        alignSelf: "centre",
+        children: _jsx(Handle, {
+          icon: PlusIcon,
+          label: "step up",
+          disabled: disabled,
+          onClick: onIncrement
+        })
+      })]
+    })
+  });
+};
+export default Stepper;

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,54 +1,62 @@
+"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 { themeContractVars as vars } from '../../themes/theme.css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
 const handleSize = '24px';
 const handleOffset = '2px';
 const borderSize = '1px';
 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,
-            },
-        },
-    },
-});
-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}`,
+  default: {
+    selectors: {
+      '&[aria-disabled=true]': {
+        cursor: 'not-allowed',
+        borderColor: vars.border.colours.light,
+        backgroundColor: vars.border.colours.light
+      }
+    }
+  },
+  toggled: {
     selectors: {
-        [`&:not(${disabled.default}):not(${disabled.toggled}):focus`]: {
-            borderColor: vars.colours.intent.information.background.standard,
-        },
-    },
-});
+      '&[aria-disabled=true]': {
+        borderColor: vars.border.colours.light,
+        backgroundColor: vars.colours.intent.primary.background.mild
+      }
+    }
+  }
+}, "disabled");
+export const root = style({
+  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),
+  selectors: {
+    ["&:not(".concat(disabled.default, "):not(").concat(disabled.toggled, "):focus")]: {
+      borderColor: vars.colours.intent.information.background.standard
+    }
+  }
+}, "root");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Switch/Switch.js

@@ -1,25 +1,58 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
 import { useCallback } from 'react';
-import { Box, useBoxStyles } from '../Box';
-import { useTextStyles } from '../Text';
-import * as styles from './Switch.css';
-export const Switch = ({ className = '', disabled = false, toggled = false, onChange, }) => {
-    const onToggle = useCallback(() => {
-        if (disabled) {
-            return;
-        }
-        if (typeof onChange === 'function') {
-            onChange(!toggled);
-        }
-    }, [disabled, toggled]);
-    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), tabIndex: disabled ? -1 : void 0, 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,
-            }) })));
+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 = false,
+    onChange
+  } = _ref;
+  const onToggle = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    if (typeof onChange === 'function') {
+      onChange(!toggled);
+    }
+  }, [disabled, toggled]);
+  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),
+    tabIndex: disabled ? -1 : void 0,
+    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
+      })
+    })
+  });
 };
-export default Switch;
+export default Switch;

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,8 +1,31 @@
+"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))));
-export default Table;
+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
+    })
+  });
+});
+export default Table;

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 { themeContractVars as vars } from '../../themes/theme.css';
+import { themeContractVars as vars } from "../../themes/theme.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,14 +1,44 @@
+"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
+  });
 });
-export default TableCell;
+export default TableCell;