braid-design-system 32.16.0 → 32.16.2

package/dist/styles/lib/components/Stepper/Step.mjs

@@ -1,371 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import assert from "assert";
-import clsx from "clsx";
-import { createContext, useReducer, useRef, useContext, useEffect } from "react";
-import { Box } from "../Box/Box.mjs";
-import { Stack } from "../Stack/Stack.mjs";
-import { Text } from "../Accordion/AccordionItem.mjs";
-import { Hidden } from "../Hidden/Hidden.mjs";
-import { FieldOverlay } from "../Button/Button.mjs";
-import { normalizeKey } from "../Autosuggest/Autosuggest.mjs";
-import { step, tone, progressTrack, progressTrackCentered, progressLine, progressUnfilled, indicatorContainer, focusOverlay, indicator, highlight, complete, active, inner, tick } from "./Stepper.css.mjs";
-const StepContext = createContext({
-  stepNumber: 0,
-  isLast: false
-});
-const NAV_RIGHT = 0;
-const NAV_DOWN = 1;
-const NAV_LEFT = 2;
-const NAV_UP = 3;
-const NAV_HOME = 4;
-const NAV_END = 5;
-const NAV_TAB = 6;
-const NAV_CLICKED = 7;
-const NAV_FOCUSED = 8;
-const NAV_BLURRED = 9;
-const StepperContext = createContext(null);
-const getNextStep = (moveAmount, current, maxStep) => {
-  if (current === null) {
-    return moveAmount > 0 ? 1 : maxStep;
-  }
-  const nextStep = moveAmount + current;
-  if (nextStep > maxStep) {
-    return 1;
-  }
-  if (nextStep < 1) {
-    return maxStep;
-  }
-  return nextStep;
-};
-const StepperContextProvider = ({
-  children,
-  activeStep,
-  stepCount: stepCountProp,
-  progress,
-  isLinear,
-  align,
-  tone: tone2 = "formAccent",
-  onStepClick
-}) => {
-  const stepCount = isLinear ? progress : stepCountProp;
-  const [stepperState, dispatch] = useReducer(
-    (state, action) => {
-      switch (action.type) {
-        case NAV_UP:
-        case NAV_LEFT: {
-          return {
-            ...state,
-            focusedStep: getNextStep(-1, state.focusedStep, stepCount)
-          };
-        }
-        case NAV_DOWN:
-        case NAV_RIGHT: {
-          return {
-            ...state,
-            focusedStep: getNextStep(1, state.focusedStep, stepCount)
-          };
-        }
-        case NAV_HOME: {
-          return {
-            ...state,
-            focusedStep: 1
-          };
-        }
-        case NAV_END: {
-          return {
-            ...state,
-            focusedStep: stepCount
-          };
-        }
-        case NAV_BLURRED:
-        case NAV_TAB: {
-          return {
-            ...state,
-            focusedStep: null
-          };
-        }
-        case NAV_CLICKED: {
-          return {
-            ...state,
-            focusedStep: action.value
-          };
-        }
-        case NAV_FOCUSED: {
-          return {
-            ...state,
-            focusedStep: state.focusedStep === null ? activeStep : state.focusedStep
-          };
-        }
-        default:
-          return state;
-      }
-    },
-    {
-      focusedStep: null,
-      activeStep,
-      isLinear,
-      tone: tone2,
-      align,
-      progress,
-      onStepClick
-    }
-  );
-  const onKeyUp = (event) => {
-    const targetKey = normalizeKey(event);
-    if (targetKey === "Tab") {
-      return;
-    }
-    const action = {
-      ArrowRight: { type: NAV_RIGHT },
-      ArrowLeft: { type: NAV_LEFT },
-      ArrowUp: { type: NAV_UP },
-      ArrowDown: { type: NAV_DOWN },
-      Home: { type: NAV_HOME },
-      End: { type: NAV_END }
-    };
-    if (action[targetKey]) {
-      dispatch(action[targetKey]);
-    }
-  };
-  const onKeyDown = (event) => {
-    const targetKey = normalizeKey(event);
-    if (targetKey === "Tab") {
-      dispatch({ type: NAV_TAB });
-      return;
-    }
-    const isNavigationKeyPress = targetKey.indexOf("Arrow") === 0 || ["Home", "End"].includes(targetKey);
-    if (isNavigationKeyPress) {
-      event.preventDefault();
-    }
-  };
-  const onFocus = () => dispatch({
-    type: NAV_FOCUSED
-  });
-  const onBlur = () => dispatch({
-    type: NAV_BLURRED
-  });
-  const onClick = (index) => dispatch({
-    type: NAV_CLICKED,
-    value: index
-  });
-  return /* @__PURE__ */ jsx(
-    StepperContext.Provider,
-    {
-      value: {
-        ...stepperState,
-        activeStep,
-        isLinear,
-        align,
-        tone: tone2,
-        progress,
-        onStepClick,
-        ...typeof onStepClick === "function" ? {
-          onKeyUp,
-          onKeyDown,
-          onClick,
-          onFocus,
-          onBlur
-        } : {}
-      },
-      children
-    }
-  );
-};
-const StepIndicator = ({ complete: complete$1, started, active: active$1 }) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlSpace: "preserve",
-    focusable: "false",
-    viewBox: "0 0 24 24",
-    className: clsx(
-      indicator,
-      complete$1 || active$1 || started ? highlight : void 0,
-      complete$1 && !active$1 ? complete : void 0,
-      active$1 ? active : void 0
-    ),
-    children: [
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: 4,
-          cx: 12,
-          cy: 12,
-          r: 10
-        }
-      ),
-      /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 5, className: inner }),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M 18.26 7.64 C 17.94 7.32 17.46 7.32 17.14 7.64 L 9.7 15.08 L 7.06 12.44 C 6.74 12.12 6.26 12.12 5.94 12.44 S 5.62 13.24 5.94 13.56 L 9.14 16.76 C 9.3 16.92 9.46 17 9.7 17 S 10.1 16.92 10.26 16.76 L 18.26 8.76 C 18.58 8.44 18.58 7.96 18.26 7.64 Z",
-          className: tick
-        }
-      )
-    ]
-  }
-);
-const Step = ({ complete: complete2 = false, id, children }) => {
-  const stepRef = useRef(null);
-  const { stepNumber, isLast } = useContext(StepContext);
-  const stepperContext = useContext(StepperContext);
-  assert(
-    stepperContext !== null,
-    "A Step must be rendered as a child of a Stepper. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Stepper"
-  );
-  const {
-    focusedStep,
-    activeStep,
-    tone: tone$1,
-    align,
-    progress,
-    isLinear,
-    onKeyUp,
-    onKeyDown,
-    onClick,
-    onFocus,
-    onBlur,
-    onStepClick
-  } = stepperContext;
-  const active2 = activeStep === stepNumber;
-  const focused = focusedStep === stepNumber;
-  const linearStepBeforeProgress = isLinear && stepNumber < progress;
-  const completed = complete2 || linearStepBeforeProgress;
-  const started = active2 || complete2 || isLinear && stepNumber <= progress;
-  const keyboardAccessible = focused || active2 && focusedStep === null;
-  const interactable = typeof onStepClick === "function" && !active2 && (!isLinear || stepNumber <= progress);
-  useEffect(() => {
-    if (stepRef.current && focused) {
-      stepRef.current.focus();
-    }
-  }, [focused]);
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      component: "button",
-      ref: stepRef,
-      position: "relative",
-      outline: "none",
-      display: "flex",
-      justifyContent: { tablet: align === "center" ? "center" : void 0 },
-      width: "full",
-      cursor: interactable ? "pointer" : void 0,
-      pointerEvents: !interactable && !active2 ? "none" : void 0,
-      "aria-current": active2 ? "step" : void 0,
-      className: [step, tone[tone$1]],
-      onClick: interactable ? () => {
-        if (onClick) {
-          onClick(stepNumber);
-        }
-        if (onStepClick) {
-          onStepClick({ id, stepNumber });
-        }
-      } : void 0,
-      onKeyUp,
-      onKeyDown,
-      onFocus,
-      onBlur: keyboardAccessible ? onBlur : void 0,
-      tabIndex: keyboardAccessible ? 0 : -1,
-      children: [
-        !isLast ? /* @__PURE__ */ jsx(
-          Box,
-          {
-            component: "span",
-            position: "absolute",
-            overflow: "hidden",
-            borderRadius: "full",
-            className: [
-              progressTrack,
-              align === "center" ? progressTrackCentered : void 0
-            ],
-            children: /* @__PURE__ */ jsx(
-              Box,
-              {
-                component: "span",
-                position: "absolute",
-                top: 0,
-                bottom: 0,
-                left: 0,
-                width: "full",
-                className: [
-                  progressLine,
-                  !linearStepBeforeProgress ? progressUnfilled : void 0
-                ]
-              }
-            )
-          }
-        ) : null,
-        /* @__PURE__ */ jsxs(
-          Stack,
-          {
-            component: "span",
-            space: "medium",
-            align: {
-              mobile: "left",
-              tablet: align === "center" ? "center" : void 0
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  component: "span",
-                  display: "block",
-                  position: "relative",
-                  transition: "fast",
-                  className: indicatorContainer,
-                  "aria-hidden": true,
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      FieldOverlay,
-                      {
-                        variant: "focus",
-                        borderRadius: "full",
-                        onlyVisibleForKeyboardNavigation: true,
-                        className: focusOverlay
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      StepIndicator,
-                      {
-                        complete: completed,
-                        active: active2,
-                        started
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(Hidden, { component: "span", below: "tablet", children: /* @__PURE__ */ jsx(
-                Box,
-                {
-                  component: "span",
-                  display: "block",
-                  paddingX: align === "center" ? "xsmall" : void 0,
-                  paddingRight: align === "left" && !isLast ? "xsmall" : void 0,
-                  userSelect: "none",
-                  children: /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      align: align === "center" ? "center" : void 0,
-                      weight: started ? "strong" : void 0,
-                      tone: !started ? "secondary" : void 0,
-                      children
-                    }
-                  )
-                }
-              ) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-Step.__isStep__ = true;
-export {
-  Step,
-  StepContext,
-  StepperContextProvider
-};

package/dist/styles/lib/components/Stepper/Stepper.cjs

@@ -1,125 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const assert = require("assert");
-const React = require("react");
-const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
-const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_Hidden_Hidden_cjs = require("../Hidden/Hidden.cjs");
-const styles_lib_components_Stepper_Step_cjs = require("./Step.cjs");
-const styles_lib_components_Stepper_Stepper_css_cjs = require("./Stepper.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const resolveActiveStep = (mode, progress, activeStep) => {
-  if (mode === "linear" && (typeof activeStep === "undefined" || activeStep > progress)) {
-    return progress;
-  }
-  return activeStep || 0;
-};
-const Stepper = ({
-  activeStep,
-  label,
-  mode = "linear",
-  tone,
-  children,
-  data,
-  align = "center",
-  id,
-  onStepClick,
-  ...restProps
-}) => {
-  const steps = styles_lib_components_Accordion_AccordionItem_cjs.flattenChildren(children);
-  const stepCount = steps.length;
-  const isLinear = mode === "linear";
-  const progress = "progress" in restProps ? restProps.progress : 0;
-  const activeStepNumber = resolveActiveStep(mode, progress, activeStep);
-  let stepName = "";
-  const stepItems = React.Children.map(steps, (child, index) => {
-    const stepNumber = index + 1;
-    const isLast = stepNumber === stepCount;
-    assert__default.default(
-      !child || child.type.__isStep__,
-      "Only Step elements can be direct children of a Stepper. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Stepper"
-    );
-    if (stepNumber === activeStepNumber && typeof child === "object") {
-      stepName = child.props.children;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      styles_lib_components_Stepper_Step_cjs.StepContext.Provider,
-      {
-        value: {
-          stepNumber,
-          isLast
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          styles_lib_components_Box_Box_cjs.Box,
-          {
-            component: "li",
-            className: [
-              !isLast ? styles_lib_components_Stepper_Stepper_css_cjs.stretch : void 0,
-              isLast && align === "center" ? styles_lib_components_Stepper_Stepper_css_cjs.stretchLastAboveTablet : void 0
-            ],
-            children: child
-          }
-        )
-      }
-    );
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    styles_lib_components_Stepper_Step_cjs.StepperContextProvider,
-    {
-      activeStep: activeStepNumber,
-      tone,
-      align,
-      progress,
-      stepCount: stepItems.length,
-      isLinear,
-      onStepClick,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        styles_lib_components_Box_Box_cjs.Box,
-        {
-          component: "nav",
-          position: "relative",
-          "aria-label": label,
-          id,
-          ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              styles_lib_components_Box_Box_cjs.Box,
-              {
-                component: "ol",
-                display: "flex",
-                paddingBottom: { mobile: "medium", tablet: "none" },
-                justifyContent: {
-                  mobile: "spaceBetween",
-                  tablet: align === "center" ? "center" : void 0
-                },
-                children: stepItems
-              }
-            ),
-            isLinear ? /* @__PURE__ */ jsxRuntime.jsx(
-              styles_lib_components_Box_Box_cjs.Box,
-              {
-                component: "span",
-                position: "absolute",
-                pointerEvents: "none",
-                className: styles_lib_components_Stepper_Stepper_css_cjs.progressTrack,
-                role: "progressbar",
-                "aria-valuemin": 0,
-                "aria-valuemax": stepCount - 1,
-                "aria-valuenow": progress > 0 ? progress - 1 : void 0,
-                "aria-valuetext": progress > 0 ? label : void 0,
-                style: {
-                  left: `${(100 - (stepCount - 1) / stepCount * 100) / 2}%`,
-                  width: `${(progress - 1) / stepCount * 100}%`
-                }
-              }
-            ) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Hidden_Hidden_cjs.Hidden, { above: "mobile", children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { weight: "strong", children: stepName }) })
-          ]
-        }
-      )
-    }
-  );
-};
-exports.Stepper = Stepper;

package/dist/styles/lib/components/Stepper/Stepper.css.cjs

@@ -1,168 +0,0 @@
-"use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const cssUtils = require("@vanilla-extract/css-utils");
-const styles_lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
-const styles_lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
-const styles_lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
-const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
-const styles_lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs = require("../private/hideFocusRings/hideFocusRingsDataAttribute.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/Stepper/Stepper.css.ts", "braid-design-system");
-const baseColourVar = css.createVar("baseColourVar");
-const highlightVar = css.createVar("highlightVar");
-const stepIndicatorSize = styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.small;
-const tone = {
-  formAccent: css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
-    lightMode: {
-      vars: {
-        [highlightVar]: styles_lib_themes_vars_css_cjs.vars.borderColor.formAccent
-      }
-    },
-    darkMode: {
-      vars: {
-        [highlightVar]: styles_lib_themes_vars_css_cjs.vars.borderColor.formAccentLight
-      }
-    }
-  }), "tone_formAccent"),
-  neutral: css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
-    lightMode: {
-      vars: {
-        [highlightVar]: styles_lib_themes_vars_css_cjs.vars.borderColor.neutral
-      }
-    },
-    darkMode: {
-      vars: {
-        [highlightVar]: styles_lib_themes_vars_css_cjs.vars.borderColor.neutralLight
-      }
-    }
-  }), "tone_neutral")
-};
-const step = css.style({
-  textAlign: "left",
-  ...styles_lib_css_colorModeStyle_cjs.colorModeStyle({
-    lightMode: {
-      vars: {
-        [baseColourVar]: styles_lib_themes_vars_css_cjs.vars.borderColor.neutralLight
-      }
-    },
-    darkMode: {
-      vars: {
-        [baseColourVar]: styles_lib_themes_vars_css_cjs.vars.borderColor.neutral
-      }
-    }
-  })
-}, "step");
-const indicator = css.style([styles_lib_css_atoms_atoms_cjs.atoms({
-  display: "block"
-}), {
-  height: stepIndicatorSize,
-  width: stepIndicatorSize,
-  color: baseColourVar
-}], "indicator");
-const stretch = css.style({
-  flex: 1
-}, "stretch");
-const stretchLastAboveTablet = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
-  tablet: {
-    flex: 1
-  }
-}), "stretchLastAboveTablet");
-const highlight = css.style({
-  color: highlightVar
-}, "highlight");
-const complete = css.style({}, "complete");
-const active = css.style({}, "active");
-const inner = css.style([styles_lib_css_atoms_atoms_cjs.atoms({
-  opacity: 0,
-  transition: "fast"
-}), {
-  fill: "currentcolor",
-  transformOrigin: "50% 50%",
-  transform: "scale(0)",
-  selectors: {
-    [`${active} > &`]: {
-      transform: "scale(1)",
-      opacity: 1
-    },
-    [`${complete} > &`]: {
-      transform: "scale(2.1)",
-      opacity: 1
-    }
-  }
-}], "inner");
-const tick = css.style([styles_lib_css_atoms_atoms_cjs.atoms({
-  transition: "fast"
-}), {
-  transitionDelay: ".1s",
-  transformOrigin: "50% 50%",
-  selectors: {
-    [`:not(${complete}) > &`]: {
-      opacity: 0,
-      transitionDelay: "0s",
-      transform: "scale(.5) rotate(50deg)"
-    }
-  }
-}, styles_lib_css_colorModeStyle_cjs.colorModeStyle({
-  lightMode: {
-    fill: styles_lib_themes_vars_css_cjs.vars.foregroundColor.neutralInverted
-  },
-  darkMode: {
-    fill: styles_lib_themes_vars_css_cjs.vars.foregroundColor.neutral
-  }
-})], "tick");
-const progressBarGap = "xxsmall";
-const dotSize = 2;
-const progressTrack = css.style({
-  background: `repeating-linear-gradient(90deg, ${baseColourVar}, ${baseColourVar} ${dotSize}px, transparent ${dotSize}px, transparent ${dotSize * 2}px)`,
-  height: styles_lib_themes_vars_css_cjs.vars.borderWidth.large,
-  width: `${cssUtils.calc("100%").subtract(stepIndicatorSize).subtract(cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap]).multiply(2))}`,
-  top: `${cssUtils.calc(stepIndicatorSize).subtract(styles_lib_themes_vars_css_cjs.vars.borderWidth.large).divide(2)}`,
-  left: `${cssUtils.calc(stepIndicatorSize).add(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap])}`
-}, "progressTrack");
-const progressTrackCentered = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
-  tablet: {
-    left: `${cssUtils.calc("50%").add(cssUtils.calc(stepIndicatorSize).divide(2)).add(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap])}`
-  }
-}), "progressTrackCentered");
-const progressLine = css.style({
-  background: highlightVar,
-  transition: "transform .2s ease"
-}, "progressLine");
-const progressUnfilled = css.style({
-  transform: "translateX(-101%)"
-}, "progressUnfilled");
-const indicatorContainer = css.style({
-  width: stepIndicatorSize,
-  selectors: {
-    [`${step}:active &`]: {
-      transform: styles_lib_themes_vars_css_cjs.vars.transform.touchable
-    },
-    [`body:not([${styles_lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_cjs.hideFocusRingsDataAttribute}]) ${step}:focus &`]: {
-      transform: "scale(1.2)"
-    }
-  }
-}, "indicatorContainer");
-const focusOverlay = css.style({
-  selectors: {
-    [`${step}:focus &`]: {
-      opacity: 1
-    }
-  }
-}, "focusOverlay");
-__vanilla_filescope__.endFileScope();
-exports.active = active;
-exports.complete = complete;
-exports.focusOverlay = focusOverlay;
-exports.highlight = highlight;
-exports.indicator = indicator;
-exports.indicatorContainer = indicatorContainer;
-exports.inner = inner;
-exports.progressLine = progressLine;
-exports.progressTrack = progressTrack;
-exports.progressTrackCentered = progressTrackCentered;
-exports.progressUnfilled = progressUnfilled;
-exports.step = step;
-exports.stretch = stretch;
-exports.stretchLastAboveTablet = stretchLastAboveTablet;
-exports.tick = tick;
-exports.tone = tone;