@salt-ds/lab 1.0.0-alpha.1 → 1.0.0-alpha.10

package/dist-es/stepper-input/StepperInput.js

@@ -0,0 +1,118 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
+import { makePrefixer, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { RefreshIcon, TriangleUpIcon, TriangleDownIcon } from '@salt-ds/icons';
+import { InputLegacy } from '../input-legacy/InputLegacy.js';
+import '../input-legacy/StaticInputAdornment.js';
+import { useActivationIndicatorPosition } from './internal/useActivationIndicatorPosition.js';
+import { useStepperInput } from './useStepperInput.js';
+import css_248z from './StepperInput.css.js';
+
+const withBaseName = makePrefixer("saltStepperInput");
+const StepperInput = forwardRef(
+  function StepperInput2(props, ref) {
+    const {
+      ButtonProps: ButtonPropsProp,
+      InputProps: InputPropsProp,
+      textAlign = "left",
+      className,
+      showRefreshButton = false
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-stepper-input",
+      css: css_248z,
+      window: targetWindow
+    });
+    const adornmentRef = useRef(null);
+    const inputRef = useRef(null);
+    const {
+      decrementButtonDown,
+      getButtonIcon,
+      getButtonProps,
+      getInputProps,
+      incrementButtonDown,
+      isAtMax,
+      isAtMin,
+      refreshCurrentValue,
+      stepperDirection,
+      valuesHaveDiverged
+    } = useStepperInput(props, inputRef);
+    useActivationIndicatorPosition(
+      adornmentRef,
+      valuesHaveDiverged() || showRefreshButton
+    );
+    const endAdornment = /* @__PURE__ */ jsxs("div", {
+      className: withBaseName("adornmentContainer"),
+      ref: adornmentRef,
+      children: [
+        /* @__PURE__ */ jsx(Button, {
+          "aria-label": "Refresh default value",
+          className: clsx(withBaseName("secondaryButton"), {
+            [withBaseName("hideSecondaryButton")]: !(showRefreshButton || valuesHaveDiverged())
+          }),
+          onClick: refreshCurrentValue,
+          variant: "secondary",
+          children: /* @__PURE__ */ jsx(RefreshIcon, {
+            "aria-label": "refresh"
+          })
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: withBaseName("buttonContainer"),
+          children: [
+            /* @__PURE__ */ jsx(Button, {
+              className: clsx(
+                withBaseName("stepperButton"),
+                withBaseName("increment"),
+                {
+                  active: incrementButtonDown
+                }
+              ),
+              disabled: isAtMax(),
+              ...getButtonProps(stepperDirection.INCREMENT, ButtonPropsProp),
+              children: /* @__PURE__ */ jsx(TriangleUpIcon, {
+                className: withBaseName("stepperButtonIcon"),
+                "aria-label": getButtonIcon(stepperDirection.INCREMENT)
+              })
+            }),
+            /* @__PURE__ */ jsx(Button, {
+              className: clsx(
+                withBaseName("stepperButton"),
+                withBaseName("decrement"),
+                {
+                  active: decrementButtonDown
+                }
+              ),
+              disabled: isAtMin(),
+              ...getButtonProps(stepperDirection.DECREMENT, ButtonPropsProp),
+              children: /* @__PURE__ */ jsx(TriangleDownIcon, {
+                className: withBaseName("stepperButtonIcon"),
+                "aria-label": getButtonIcon(stepperDirection.DECREMENT)
+              })
+            })
+          ]
+        })
+      ]
+    });
+    return /* @__PURE__ */ jsx("div", {
+      className: clsx(withBaseName(), className),
+      onBlur: props.onBlur,
+      onFocus: props.onFocus,
+      ref,
+      children: /* @__PURE__ */ jsx(InputLegacy, {
+        className: withBaseName("input"),
+        endAdornment,
+        highlightOnFocus: true,
+        ref: inputRef,
+        textAlign,
+        ...getInputProps(InputPropsProp)
+      })
+    });
+  }
+);
+
+export { StepperInput };
+//# sourceMappingURL=StepperInput.js.map

package/dist-es/stepper-input/StepperInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperInput.js","sources":["../src/stepper-input/StepperInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { forwardRef, ReactNode, useRef } from \"react\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { RefreshIcon, TriangleDownIcon, TriangleUpIcon } from \"@salt-ds/icons\";\nimport {\n  InputLegacy as Input,\n  InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport { useActivationIndicatorPosition } from \"./internal/useActivationIndicatorPosition\";\nimport { useStepperInput } from \"./useStepperInput\";\n\nimport stepperInputCss from \"./StepperInput.css\";\n\nconst withBaseName = makePrefixer(\"saltStepperInput\");\n\nexport interface StepperInputProps {\n  ButtonProps?: Partial<ButtonProps>;\n  InputProps?: Partial<InputProps>;\n  block?: number;\n  className?: string;\n  decimalPlaces?: number;\n  defaultValue?: number;\n  liveValue?: number;\n  max?: number;\n  min?: number;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  onChange?: (changedValue: number | string) => void;\n  showRefreshButton?: boolean;\n  step?: number;\n  textAlign?: \"center\" | \"left\" | \"right\";\n  value?: number | string;\n}\n\nexport const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(\n  function StepperInput(props, ref) {\n    const {\n      ButtonProps: ButtonPropsProp,\n      InputProps: InputPropsProp,\n      textAlign = \"left\",\n      className,\n      showRefreshButton = false,\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stepper-input\",\n      css: stepperInputCss,\n      window: targetWindow,\n    });\n\n    const adornmentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const {\n      decrementButtonDown,\n      getButtonIcon,\n      getButtonProps,\n      getInputProps,\n      incrementButtonDown,\n      isAtMax,\n      isAtMin,\n      refreshCurrentValue,\n      stepperDirection,\n      valuesHaveDiverged,\n    } = useStepperInput(props, inputRef);\n\n    useActivationIndicatorPosition(\n      adornmentRef,\n      valuesHaveDiverged() || showRefreshButton\n    );\n\n    const endAdornment: ReactNode = (\n      <div className={withBaseName(\"adornmentContainer\")} ref={adornmentRef}>\n        <Button\n          aria-label=\"Refresh default value\"\n          className={clsx(withBaseName(\"secondaryButton\"), {\n            // Refresh button is always rendered and has its visibility toggled to\n            // avoid component width changing.\n            [withBaseName(\"hideSecondaryButton\")]: !(\n              showRefreshButton || valuesHaveDiverged()\n            ),\n          })}\n          onClick={refreshCurrentValue}\n          variant=\"secondary\"\n        >\n          <RefreshIcon aria-label=\"refresh\" />\n        </Button>\n        <div className={withBaseName(\"buttonContainer\")}>\n          <Button\n            className={clsx(\n              withBaseName(\"stepperButton\"),\n              withBaseName(\"increment\"),\n              {\n                active: incrementButtonDown,\n              }\n            )}\n            disabled={isAtMax()}\n            {...getButtonProps(stepperDirection.INCREMENT, ButtonPropsProp)}\n          >\n            <TriangleUpIcon\n              className={withBaseName(\"stepperButtonIcon\")}\n              aria-label={getButtonIcon(stepperDirection.INCREMENT)}\n            />\n          </Button>\n          <Button\n            className={clsx(\n              withBaseName(\"stepperButton\"),\n              withBaseName(\"decrement\"),\n              {\n                active: decrementButtonDown,\n              }\n            )}\n            disabled={isAtMin()}\n            {...getButtonProps(stepperDirection.DECREMENT, ButtonPropsProp)}\n          >\n            <TriangleDownIcon\n              className={withBaseName(\"stepperButtonIcon\")}\n              aria-label={getButtonIcon(stepperDirection.DECREMENT)}\n            />\n          </Button>\n        </div>\n      </div>\n    );\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        onBlur={props.onBlur}\n        onFocus={props.onFocus}\n        ref={ref}\n      >\n        <Input\n          className={withBaseName(\"input\")}\n          endAdornment={endAdornment}\n          highlightOnFocus\n          ref={inputRef}\n          textAlign={textAlign}\n          {...getInputProps(InputPropsProp)}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["StepperInput","stepperInputCss","Input"],"mappings":"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"}

package/dist-es/stepper-input/internal/useActivationIndicatorPosition.js

@@ -0,0 +1,34 @@
+import { useDensity, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import '../../form-field-context-legacy/FormFieldLegacyContext.js';
+import { useFormFieldLegacyProps } from '../../form-field-context-legacy/useFormFieldLegacyProps.js';
+
+const refreshButtonWidth = {
+  touch: 36,
+  low: 28,
+  medium: 24,
+  high: 12
+};
+function useActivationIndicatorPosition(adornmentRef, refreshButtonVisible) {
+  const formFieldProps = useFormFieldLegacyProps();
+  const { ref: formFieldRef } = formFieldProps;
+  const density = useDensity();
+  useIsomorphicLayoutEffect(() => {
+    let offset;
+    if (adornmentRef && adornmentRef.current !== null) {
+      const marginAdjustment = density === "high" || density === "medium" ? 2 : 4;
+      const secondaryButtonAdjustment = refreshButtonVisible ? 0 : refreshButtonWidth[density];
+      offset = adornmentRef.current.getBoundingClientRect().width - marginAdjustment - secondaryButtonAdjustment;
+    }
+    if (formFieldRef && formFieldRef.current && offset) {
+      const activationIndicator = formFieldRef.current.getElementsByClassName(
+        "saltFormActivationIndicator-icon"
+      );
+      if (activationIndicator.length > 0) {
+        activationIndicator[0].style.transform = `translateX(-${offset}px)`;
+      }
+    }
+  });
+}
+
+export { useActivationIndicatorPosition };
+//# sourceMappingURL=useActivationIndicatorPosition.js.map

package/dist-es/stepper-input/internal/useActivationIndicatorPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActivationIndicatorPosition.js","sources":["../src/stepper-input/internal/useActivationIndicatorPosition.ts"],"sourcesContent":["import { useDensity, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useFormFieldLegacyProps } from \"../../form-field-context-legacy\";\nimport { MutableRefObject } from \"react\";\n\nconst refreshButtonWidth = {\n  touch: 36,\n  low: 28,\n  medium: 24,\n  high: 12,\n};\n\n// The activation indicator icon is absolutely positioned by FormField,\n// and must be offset to accommodate the end adornment added by Stepper Input.\n// Ideally, we should be able to provide an 'activationIndicator' class to FormField to\n// override its default positioning instead of directly repositioning it via its ref.\nexport function useActivationIndicatorPosition(\n  adornmentRef: MutableRefObject<HTMLDivElement | null>,\n  refreshButtonVisible: boolean\n) {\n  const formFieldProps = useFormFieldLegacyProps();\n  const { ref: formFieldRef } = formFieldProps;\n  const density = useDensity();\n\n  useIsomorphicLayoutEffect(() => {\n    let offset;\n    if (adornmentRef && adornmentRef.current !== null) {\n      const marginAdjustment =\n        density === \"high\" || density === \"medium\" ? 2 : 4;\n\n      const secondaryButtonAdjustment = refreshButtonVisible\n        ? 0\n        : refreshButtonWidth[density];\n\n      offset =\n        adornmentRef.current.getBoundingClientRect().width -\n        marginAdjustment -\n        secondaryButtonAdjustment;\n    }\n    if (formFieldRef && formFieldRef.current && offset) {\n      const activationIndicator = formFieldRef.current.getElementsByClassName(\n        \"saltFormActivationIndicator-icon\"\n      ) as HTMLCollectionOf<HTMLElement>;\n      if (activationIndicator.length > 0) {\n        activationIndicator[0].style.transform = `translateX(-${offset}px)`;\n      }\n    }\n  });\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,kBAAqB,GAAA;AAAA,EACzB,KAAO,EAAA,EAAA;AAAA,EACP,GAAK,EAAA,EAAA;AAAA,EACL,MAAQ,EAAA,EAAA;AAAA,EACR,IAAM,EAAA,EAAA;AACR,CAAA,CAAA;AAMgB,SAAA,8BAAA,CACd,cACA,oBACA,EAAA;AACA,EAAA,MAAM,iBAAiB,uBAAwB,EAAA,CAAA;AAC/C,EAAM,MAAA,EAAE,GAAK,EAAA,YAAA,EAAiB,GAAA,cAAA,CAAA;AAC9B,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAE3B,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,MAAA,CAAA;AACJ,IAAI,IAAA,YAAA,IAAgB,YAAa,CAAA,OAAA,KAAY,IAAM,EAAA;AACjD,MAAA,MAAM,gBACJ,GAAA,OAAA,KAAY,MAAU,IAAA,OAAA,KAAY,WAAW,CAAI,GAAA,CAAA,CAAA;AAEnD,MAAM,MAAA,yBAAA,GAA4B,oBAC9B,GAAA,CAAA,GACA,kBAAmB,CAAA,OAAA,CAAA,CAAA;AAEvB,MAAA,MAAA,GACE,YAAa,CAAA,OAAA,CAAQ,qBAAsB,EAAA,CAAE,QAC7C,gBACA,GAAA,yBAAA,CAAA;AAAA,KACJ;AACA,IAAI,IAAA,YAAA,IAAgB,YAAa,CAAA,OAAA,IAAW,MAAQ,EAAA;AAClD,MAAM,MAAA,mBAAA,GAAsB,aAAa,OAAQ,CAAA,sBAAA;AAAA,QAC/C,kCAAA;AAAA,OACF,CAAA;AACA,MAAI,IAAA,mBAAA,CAAoB,SAAS,CAAG,EAAA;AAClC,QAAoB,mBAAA,CAAA,CAAA,CAAA,CAAG,KAAM,CAAA,SAAA,GAAY,CAAe,YAAA,EAAA,MAAA,CAAA,GAAA,CAAA,CAAA;AAAA,OAC1D;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AACH;;;;"}

package/dist-es/stepper-input/useStepperInput.js

@@ -0,0 +1,231 @@
+import { useControlled, useId } from '@salt-ds/core';
+import { useDynamicAriaLabel } from './internal/useDynamicAriaLabel.js';
+import { useSpinner } from './internal/useSpinner.js';
+
+const stepperDirection = {
+  INCREMENT: "increment",
+  DECREMENT: "decrement"
+};
+const ACCEPT_INPUT = /^[-+]?[0-9]*\.?([0-9]+)?/g;
+const callAll = (...fns) => (...args) => fns.forEach((fn) => fn && fn(...args));
+const toFixedDecimalPlaces = (inputNumber, decimalPlaces) => inputNumber.toFixed(decimalPlaces);
+const isAllowedNonNumeric = (inputCharacter) => {
+  if (typeof inputCharacter === "number")
+    return;
+  return "-+".includes(inputCharacter) && inputCharacter.length === 1 || inputCharacter === "";
+};
+const toFloat = (inputValue) => {
+  if (isAllowedNonNumeric(inputValue))
+    return 0;
+  return parseFloat(inputValue.toString());
+};
+const santizedInput = (numberString) => (numberString.match(ACCEPT_INPUT) || []).join("");
+const getButtonIcon = (type) => type === stepperDirection.INCREMENT ? "triangle-up" : "triangle-down";
+const useStepperInput = (props, inputRef) => {
+  const {
+    block = 10,
+    decimalPlaces = 0,
+    defaultValue = 0,
+    liveValue,
+    max = Number.MAX_SAFE_INTEGER,
+    min = Number.MIN_SAFE_INTEGER,
+    onChange,
+    step = 1,
+    value,
+    InputProps: inputPropsProp = {}
+  } = props;
+  const [currentValue, setCurrentValue, isControlled] = useControlled({
+    controlled: value,
+    default: toFixedDecimalPlaces(defaultValue, decimalPlaces),
+    name: "stepper-input"
+  });
+  const inputId = useId(inputPropsProp.id);
+  const isOutOfRange = () => {
+    if (currentValue === void 0)
+      return true;
+    return toFloat(currentValue) > max || toFloat(currentValue) < min;
+  };
+  const isAtMax = () => {
+    if (currentValue === void 0)
+      return true;
+    return toFloat(currentValue) >= max || max === 0 && currentValue === "";
+  };
+  const isAtMin = () => {
+    if (currentValue === void 0)
+      return true;
+    return toFloat(currentValue) <= min || min === 0 && currentValue === "";
+  };
+  const valuesHaveDiverged = () => {
+    if (liveValue === void 0 || currentValue === void 0)
+      return false;
+    return toFloat(toFixedDecimalPlaces(liveValue, decimalPlaces)) !== toFloat(currentValue);
+  };
+  const { setHasAnnounced } = useDynamicAriaLabel(
+    ", value out of date",
+    liveValue !== void 0,
+    inputRef,
+    currentValue,
+    valuesHaveDiverged
+  );
+  const decrement = () => {
+    if (currentValue === void 0 || isAtMin())
+      return;
+    let nextValue = currentValue === "" ? -step : toFloat(currentValue) - step;
+    if (max !== void 0 && isOutOfRange())
+      nextValue = max;
+    setNextValue(nextValue);
+  };
+  const decrementBlock = () => {
+    if (currentValue === void 0 || isAtMin())
+      return;
+    let nextValue = currentValue === "" ? block * -step : toFloat(currentValue) - step * block;
+    if (max !== void 0 && isOutOfRange())
+      nextValue = max;
+    setNextValue(nextValue);
+  };
+  const increment = () => {
+    if (currentValue === void 0 || isAtMax())
+      return;
+    let nextValue = currentValue === "" ? step : toFloat(currentValue) + step;
+    if (min !== void 0 && isOutOfRange())
+      nextValue = min;
+    setNextValue(nextValue);
+  };
+  const incrementBlock = () => {
+    if (currentValue === void 0 || isAtMax())
+      return;
+    let nextValue = currentValue === "" ? block * step : toFloat(currentValue) + step * block;
+    if (min !== void 0 && isOutOfRange())
+      nextValue = min;
+    setNextValue(nextValue);
+  };
+  const setNextValue = (modifiedValue) => {
+    let nextValue = modifiedValue;
+    if (nextValue < min)
+      nextValue = min;
+    if (nextValue > max)
+      nextValue = max;
+    const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);
+    if (isNaN(toFloat(roundedValue)))
+      return;
+    if (!isControlled) {
+      setCurrentValue(roundedValue);
+    }
+    if (onChange) {
+      onChange(roundedValue);
+    }
+  };
+  const { activate: decrementSpinnerBlock, buttonDown: pgDnButtonDown } = useSpinner(decrementBlock, isAtMin());
+  const { activate: decrementSpinner, buttonDown: arrowDownButtonDown } = useSpinner(decrement, isAtMin());
+  const { activate: incrementSpinnerBlock, buttonDown: pgUpButtonDown } = useSpinner(incrementBlock, isAtMax());
+  const { activate: incrementSpinner, buttonDown: arrowUpButtonDown } = useSpinner(increment, isAtMax());
+  const handleInputBlur = () => {
+    if (currentValue === void 0)
+      return;
+    const roundedValue = toFixedDecimalPlaces(
+      toFloat(currentValue),
+      decimalPlaces
+    );
+    if (currentValue !== "" && !isAllowedNonNumeric(currentValue) && !isControlled) {
+      setCurrentValue(roundedValue);
+    }
+    if (onChange) {
+      onChange(roundedValue);
+    }
+  };
+  const handleInputFocus = () => {
+    setHasAnnounced(false);
+  };
+  const handleInputChange = (event) => {
+    const changedValue = event.currentTarget.value;
+    if (!isControlled) {
+      setCurrentValue(santizedInput(changedValue));
+    }
+    if (onChange) {
+      onChange(santizedInput(changedValue));
+    }
+  };
+  const handleInputKeyDown = (event) => {
+    if (["ArrowUp", "ArrowDown"].includes(event.key)) {
+      event.preventDefault();
+      event.key === "ArrowUp" ? incrementSpinner() : decrementSpinner();
+    }
+    if (["PageUp", "PageDown"].includes(event.key)) {
+      event.preventDefault();
+      event.key === "PageUp" ? incrementSpinnerBlock() : decrementSpinnerBlock();
+    }
+  };
+  const handleButtonMouseDown = (event, type = stepperDirection.INCREMENT) => {
+    if (event.nativeEvent.button !== 0)
+      return;
+    type === stepperDirection.INCREMENT ? incrementSpinner() : decrementSpinner();
+  };
+  const handleButtonMouseUp = () => {
+    var _a;
+    return (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const refreshCurrentValue = () => {
+    var _a;
+    const refreshedcurrentValue = liveValue !== void 0 ? liveValue : defaultValue;
+    if (refreshedcurrentValue === void 0)
+      return;
+    setCurrentValue(
+      toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)
+    );
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    if (onChange) {
+      onChange(
+        toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)
+      );
+    }
+  };
+  const getButtonProps = (type = stepperDirection.INCREMENT, buttonPropsProp = {}) => ({
+    "aria-hidden": true,
+    "data-testid": `${type}-button`,
+    tabIndex: -1,
+    ...buttonPropsProp,
+    onMouseDown: callAll(
+      (event) => handleButtonMouseDown(event, type),
+      buttonPropsProp.onMouseDown
+    ),
+    onMouseUp: callAll(() => handleButtonMouseUp(), buttonPropsProp.onMouseUp)
+  });
+  const getInputProps = (inputProps = {}) => {
+    if (currentValue === void 0)
+      return void 0;
+    return {
+      ...inputProps,
+      inputProps: {
+        role: "spinbutton",
+        "aria-invalid": isOutOfRange(),
+        "aria-valuemax": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),
+        "aria-valuemin": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),
+        "aria-valuenow": toFloat(
+          toFixedDecimalPlaces(toFloat(currentValue), decimalPlaces)
+        ),
+        id: inputId,
+        ...inputProps.inputProps
+      },
+      onBlur: callAll(inputProps.onBlur, handleInputBlur),
+      onChange: callAll(inputProps.onChange, handleInputChange),
+      onFocus: callAll(inputProps.onFocus, handleInputFocus),
+      onKeyDown: callAll(inputProps.onKeyPress, handleInputKeyDown),
+      value: String(currentValue)
+    };
+  };
+  return {
+    decrementButtonDown: arrowDownButtonDown || pgDnButtonDown,
+    getButtonIcon,
+    getButtonProps,
+    getInputProps,
+    incrementButtonDown: arrowUpButtonDown || pgUpButtonDown,
+    isAtMax,
+    isAtMin,
+    refreshCurrentValue,
+    stepperDirection,
+    valuesHaveDiverged
+  };
+};
+
+export { useStepperInput };
+//# sourceMappingURL=useStepperInput.js.map

package/dist-es/stepper-input/useStepperInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStepperInput.js","sources":["../src/stepper-input/useStepperInput.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, MutableRefObject } from \"react\";\nimport { ButtonProps, useControlled, useId } from \"@salt-ds/core\";\nimport { InputLegacyProps as InputProps } from \"../input-legacy\";\nimport { useDynamicAriaLabel } from \"./internal/useDynamicAriaLabel\";\nimport { useSpinner } from \"./internal/useSpinner\";\nimport { StepperInputProps } from \"./StepperInput\";\n\ntype Direction = \"decrement\" | \"increment\";\n\nconst stepperDirection = {\n  INCREMENT: \"increment\" as Direction,\n  DECREMENT: \"decrement\" as Direction,\n};\n\n// The input should only accept numbers, decimal points, and plus/minus symbols\nconst ACCEPT_INPUT = /^[-+]?[0-9]*\\.?([0-9]+)?/g;\n\nconst callAll =\n  (...fns: any[]) =>\n  (...args: any[]) =>\n    fns.forEach((fn) => fn && fn(...args));\n\nconst toFixedDecimalPlaces = (inputNumber: number, decimalPlaces: number) =>\n  inputNumber.toFixed(decimalPlaces);\n\nconst isAllowedNonNumeric = (inputCharacter: number | string) => {\n  if (typeof inputCharacter === \"number\") return;\n  return (\n    (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) ||\n    inputCharacter === \"\"\n  );\n};\n\nconst toFloat = (inputValue: number | string) => {\n  // Plus, minus, and empty characters are treated as 0\n  if (isAllowedNonNumeric(inputValue)) return 0;\n  return parseFloat(inputValue.toString());\n};\n\nconst santizedInput = (numberString: string) =>\n  (numberString.match(ACCEPT_INPUT) || []).join(\"\");\n\nconst getButtonIcon = (type: Direction) =>\n  type === stepperDirection.INCREMENT ? \"triangle-up\" : \"triangle-down\";\n\nexport const useStepperInput = (\n  props: StepperInputProps,\n  inputRef: MutableRefObject<HTMLInputElement | null>\n) => {\n  const {\n    block = 10,\n    decimalPlaces = 0,\n    defaultValue = 0,\n    liveValue,\n    max = Number.MAX_SAFE_INTEGER,\n    min = Number.MIN_SAFE_INTEGER,\n    onChange,\n    step = 1,\n    value,\n    InputProps: inputPropsProp = {},\n  } = props;\n\n  const [currentValue, setCurrentValue, isControlled] = useControlled({\n    controlled: value,\n    default: toFixedDecimalPlaces(defaultValue, decimalPlaces),\n    name: \"stepper-input\",\n  });\n  const inputId = useId(inputPropsProp.id);\n\n  const isOutOfRange = () => {\n    if (currentValue === undefined) return true;\n    return toFloat(currentValue) > max || toFloat(currentValue) < min;\n  };\n\n  const isAtMax = () => {\n    if (currentValue === undefined) return true;\n    return toFloat(currentValue) >= max || (max === 0 && currentValue === \"\");\n  };\n\n  const isAtMin = () => {\n    if (currentValue === undefined) return true;\n    return toFloat(currentValue) <= min || (min === 0 && currentValue === \"\");\n  };\n\n  const valuesHaveDiverged = () => {\n    if (liveValue === undefined || currentValue === undefined) return false;\n    return (\n      toFloat(toFixedDecimalPlaces(liveValue, decimalPlaces)) !==\n      toFloat(currentValue)\n    );\n  };\n\n  const { setHasAnnounced } = useDynamicAriaLabel(\n    \", value out of date\",\n    liveValue !== undefined,\n    inputRef,\n    currentValue,\n    valuesHaveDiverged\n  );\n\n  const decrement = () => {\n    if (currentValue === undefined || isAtMin()) return;\n    let nextValue = currentValue === \"\" ? -step : toFloat(currentValue) - step;\n\n    // Set value to `max` if it's currently out of range\n    if (max !== undefined && isOutOfRange()) nextValue = max;\n\n    setNextValue(nextValue);\n  };\n\n  const decrementBlock = () => {\n    if (currentValue === undefined || isAtMin()) return;\n    let nextValue =\n      currentValue === \"\"\n        ? block * -step\n        : toFloat(currentValue) - step * block;\n\n    // Set value to `max` if it's currently out of range\n    if (max !== undefined && isOutOfRange()) nextValue = max;\n\n    setNextValue(nextValue);\n  };\n\n  const increment = () => {\n    if (currentValue === undefined || isAtMax()) return;\n    let nextValue = currentValue === \"\" ? step : toFloat(currentValue) + step;\n\n    // Set value to `min` if it's currently out of range\n    if (min !== undefined && isOutOfRange()) nextValue = min;\n\n    setNextValue(nextValue);\n  };\n\n  const incrementBlock = () => {\n    if (currentValue === undefined || isAtMax()) return;\n    let nextValue =\n      currentValue === \"\" ? block * step : toFloat(currentValue) + step * block;\n\n    // Set value to `min` if it's currently out of range\n    if (min !== undefined && isOutOfRange()) nextValue = min;\n\n    setNextValue(nextValue);\n  };\n\n  const setNextValue = (modifiedValue: number) => {\n    let nextValue = modifiedValue;\n    if (nextValue < min) nextValue = min;\n    if (nextValue > max) nextValue = max;\n\n    const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n    if (isNaN(toFloat(roundedValue))) return;\n\n    if (!isControlled) {\n      setCurrentValue(roundedValue);\n    }\n\n    if (onChange) {\n      onChange(roundedValue);\n    }\n  };\n\n  const { activate: decrementSpinnerBlock, buttonDown: pgDnButtonDown } =\n    useSpinner(decrementBlock, isAtMin());\n\n  const { activate: decrementSpinner, buttonDown: arrowDownButtonDown } =\n    useSpinner(decrement, isAtMin());\n\n  const { activate: incrementSpinnerBlock, buttonDown: pgUpButtonDown } =\n    useSpinner(incrementBlock, isAtMax());\n\n  const { activate: incrementSpinner, buttonDown: arrowUpButtonDown } =\n    useSpinner(increment, isAtMax());\n\n  const handleInputBlur = () => {\n    if (currentValue === undefined) return;\n\n    const roundedValue = toFixedDecimalPlaces(\n      toFloat(currentValue),\n      decimalPlaces\n    );\n\n    if (\n      currentValue !== \"\" &&\n      !isAllowedNonNumeric(currentValue) &&\n      !isControlled\n    ) {\n      setCurrentValue(roundedValue);\n    }\n\n    if (onChange) {\n      onChange(roundedValue);\n    }\n  };\n\n  const handleInputFocus = () => {\n    setHasAnnounced(false);\n  };\n\n  const handleInputChange = (event: KeyboardEvent) => {\n    const changedValue = (event.currentTarget as HTMLInputElement).value;\n\n    if (!isControlled) {\n      setCurrentValue(santizedInput(changedValue));\n    }\n\n    if (onChange) {\n      onChange(santizedInput(changedValue));\n    }\n  };\n\n  const handleInputKeyDown = (event: KeyboardEvent) => {\n    if ([\"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n      event.preventDefault();\n      event.key === \"ArrowUp\" ? incrementSpinner() : decrementSpinner();\n    }\n    if ([\"PageUp\", \"PageDown\"].includes(event.key)) {\n      event.preventDefault();\n      event.key === \"PageUp\"\n        ? incrementSpinnerBlock()\n        : decrementSpinnerBlock();\n    }\n  };\n\n  const handleButtonMouseDown = (\n    event: MouseEvent<HTMLButtonElement>,\n    type: Direction = stepperDirection.INCREMENT\n  ) => {\n    if (event.nativeEvent.button !== 0) return;\n    type === stepperDirection.INCREMENT\n      ? incrementSpinner()\n      : decrementSpinner();\n  };\n\n  const handleButtonMouseUp = () => inputRef.current?.focus();\n\n  const refreshCurrentValue = () => {\n    const refreshedcurrentValue =\n      liveValue !== undefined ? liveValue : defaultValue;\n    if (refreshedcurrentValue === undefined) return;\n\n    setCurrentValue(\n      toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n    );\n\n    inputRef.current?.focus();\n\n    if (onChange) {\n      onChange(\n        toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n      );\n    }\n  };\n\n  const getButtonProps = (\n    type: Direction = stepperDirection.INCREMENT,\n    buttonPropsProp: ButtonProps = {}\n  ) => ({\n    \"aria-hidden\": true,\n    \"data-testid\": `${type}-button`,\n    tabIndex: -1,\n    ...buttonPropsProp,\n    onMouseDown: callAll(\n      (event: MouseEvent<HTMLButtonElement>) =>\n        handleButtonMouseDown(event, type),\n      buttonPropsProp.onMouseDown\n    ),\n    onMouseUp: callAll(() => handleButtonMouseUp(), buttonPropsProp.onMouseUp),\n  });\n\n  const getInputProps = (\n    inputProps: InputProps = {}\n  ): InputProps | undefined => {\n    if (currentValue === undefined) return undefined;\n    return {\n      ...inputProps,\n      inputProps: {\n        role: \"spinbutton\",\n        \"aria-invalid\": isOutOfRange(),\n        \"aria-valuemax\": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),\n        \"aria-valuemin\": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),\n        \"aria-valuenow\": toFloat(\n          toFixedDecimalPlaces(toFloat(currentValue), decimalPlaces)\n        ),\n        id: inputId,\n        ...inputProps.inputProps,\n      },\n      onBlur: callAll(inputProps.onBlur, handleInputBlur),\n      onChange: callAll(inputProps.onChange, handleInputChange),\n      onFocus: callAll(inputProps.onFocus, handleInputFocus),\n      onKeyDown: callAll(inputProps.onKeyPress, handleInputKeyDown),\n      value: String(currentValue),\n    };\n  };\n\n  return {\n    decrementButtonDown: arrowDownButtonDown || pgDnButtonDown,\n    getButtonIcon,\n    getButtonProps,\n    getInputProps,\n    incrementButtonDown: arrowUpButtonDown || pgUpButtonDown,\n    isAtMax,\n    isAtMin,\n    refreshCurrentValue,\n    stepperDirection,\n    valuesHaveDiverged,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/switch/Switch.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --switch-width: 44px;\n  --switch-thumb-margin: 3px 0 0 3px;\n  --switch-thumb-size: 18px;\n  --switch-thumb-translate: 20px;\n  --switch-height: 24px;\n}\n\n.salt-density-low {\n  --switch-width: 38px;\n  --switch-thumb-margin: 2px 0 0 2px;\n  --switch-thumb-size: 16px;\n  --switch-thumb-translate: 18px;\n  --switch-height: 20px;\n}\n\n.salt-density-medium {\n  --switch-width: 34px;\n  --switch-thumb-margin: 2px 0 0 2px;\n  --switch-thumb-size: 14px;\n  --switch-thumb-translate: 16px;\n  --switch-height: 18px;\n}\n\n.salt-density-high {\n  --switch-width: 30px;\n  --switch-thumb-margin: 2px 0 0 2px;\n  --switch-thumb-size: 12px;\n  --switch-thumb-translate: 14px;\n  --switch-height: 16px;\n}\n\n.saltSwitch {\n  --switch-label-color: var(--salt-text-secondary-foreground);\n  --switch-thumb-background: var(--salt-selectable-primary-foreground-selected);\n  --switch-track-color: var(--salt-selectable-borderColor);\n  --switch-track-color-hover: var(--salt-selectable-borderColor-hover);\n  --switch-track-color-disabled: var(--salt-selectable-borderColor-disabled);\n  --switch-track-color-checked: var(--salt-selectable-borderColor-selected);\n  --switch-track-color-checked-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n  --switch-tick-color: var(--salt-selectable-borderColor-selected);\n  --switch-tick-color-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n}\n\n.saltSwitch {\n  box-sizing: content-box;\n  display: inline-flex;\n  flex-shrink: 0;\n  height: var(--saltSwitch-height, var(--switch-height));\n  margin-left: 0;\n  overflow: visible;\n  padding: 0;\n  position: relative;\n  vertical-align: middle;\n  width: var(--saltSwitch-width, var(--switch-width));\n  z-index: 0;\n}\n\n/* Styles applied to outer ControlLabel component */\n.saltSwitch-label {\n  position: relative;\n  margin-left: 0;\n  margin-right: 0;\n  vertical-align: middle;\n}\n\n/* Styles applied to outer ControlLabel component's text */\n.saltSwitch-label .saltControlLabel-text {\n  color: var(--saltSwitch-label-color, var(--switch-label-color));\n  line-height: var(--saltSwitch-label-lineHeight, var(--salt-text-lineHeight));\n  text-align: right;\n}\n\n/* Styles applied to track on hover  */\n.saltSwitch-label:hover .saltSwitch-track {\n  background: var(--saltSwitch-track-color-hover, var(--switch-track-color-hover));\n}\n\n/* Styles applied to track on hover if `disabled={true}` */\n.saltSwitch-label.saltSwitch-disabled:hover .saltSwitch-track {\n  background: var(--saltSwitch-track-color-disabled, var(--switch-track-color-disabled));\n}\n\n/* Styles applied to track on hover when checked  */\n.saltSwitch-label:hover .saltSwitch-checked + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-checked-hover, var(--switch-track-color-checked));\n}\n\n/* Styles applied to base */\n.saltSwitch-base {\n  background: transparent;\n  display: inline-flex;\n  flex: 0 0 auto;\n  height: var(--saltSwitch-base-height, var(--switch-thumb-size));\n  justify-content: flex-start;\n  margin: var(--saltSwitch-base-margin, var(--switch-thumb-margin));\n  overflow: visible;\n  padding: 0;\n  position: absolute;\n  text-align: center;\n  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  width: var(--saltSwitch-base-width, var(--switch-thumb-size));\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to track */\n.saltSwitch-track {\n  background: var(--saltSwitch-track-color, var(--switch-track-color));\n  border-radius: var(--saltSwitch-track-borderRadius, 0);\n  height: var(--saltSwitch-track-height, var(--switch-height));\n  min-height: var(--saltSwitch-track-minHeight, 16px);\n  margin-top: 0;\n  margin-left: 0;\n  opacity: 1;\n  position: absolute;\n  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  transform: var(--saltSwitch-track-transform, none);\n  width: var(--saltSwitch-track-width, var(--switch-width));\n  z-index: -1;\n}\n\n/* Styles applied to input element and icon container */\n.saltSwitch-inputContainer {\n  align-items: inherit;\n  display: flex;\n  justify-content: inherit;\n  transform: translateX(var(--saltSwitch-inputContainer-translate-x, 0px));\n  transition: transform 0.15s;\n  width: 100%;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  height: 100%;\n  left: -100%;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to thumb, and icon if `checked={true}` */\n.saltSwitch-thumb,\n.saltSwitch-checked .saltSwitch-icon {\n  background: var(--saltSwitch-thumb-background, var(--switch-thumb-background));\n  border-radius: var(--saltSwitch-thumb-borderRadius, 0);\n  border: var(--saltSwitch-thumb-border, none);\n  box-shadow: none;\n  width: var(--saltSwitch-thumb-width, var(--switch-thumb-size));\n  height: var(--saltSwitch-thumb-height, var(--switch-thumb-size));\n  fill: var(--saltSwitch-thumb-background, var(--switch-thumb-background));\n  outline: 1px solid transparent;\n}\n\n/* Styles applied to base if `checked={true}` */\n.saltSwitch-base.saltSwitch-checked {\n  transform: none;\n}\n\n/* Styles applied to input container if `checked={true}` */\n.saltSwitch-base.saltSwitch-checked .saltSwitch-inputContainer {\n  transform: translateX(var(--saltSwitch-thumb-translate, var(--switch-thumb-translate)));\n}\n\n/* Styles applied to tracks where `checked={true}` */\n.saltSwitch-base.saltSwitch-checked + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-checked, var(--switch-track-color-checked));\n  border: var(--saltSwitch-track-border-checked, 1px solid var(--switch-track-color-checked));\n}\n\n/* Styles applied to icon tick shown when `checked={true}` */\n.saltSwitch-iconTick {\n  fill: var(--saltSwitch-icon-color-checked, var(--switch-tick-color));\n}\n\n/* Styles applied to icon tick shown when `checked={true}` and `disabled={true}` */\n.saltSwitch-disabled .saltSwitch-iconTick {\n  fill: var(--saltSwitch-icon-color-checked-disabled, var(--switch-tick-color-disabled));\n}\n\n/* Styles applied when `focusVisible={true}` */\n.saltSwitch-focusVisible:before {\n  background: transparent;\n  content: \"\";\n  display: block;\n  height: var(--saltSwitch-focused-height, var(--switch-height));\n  left: var(--saltSwitch-focused-left, -2px);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  position: absolute;\n  top: var(--saltSwitch-focused-top, -2px);\n  width: var(--saltSwitch-focused-width, var(--switch-width));\n}\n\n/* Styles applied to tracks when `focusVisible={true}` */\n.saltSwitch-focusVisible + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-hover, var(--switch-track-color-hover));\n}\n\n/* Styles applied to track if `disabled={true}` */\n.saltSwitch-disabled .saltSwitch-base + .saltSwitch-track {\n  background: var(--switch-track-color-disabled);\n  border: transparent;\n}\n\n/* Styles applied to track if `disabled={true}` and `checked={true}` */\n.saltSwitch-disabled .saltSwitch-base.saltSwitch-checked + .saltSwitch-track,\n.saltSwitch-label.saltSwitch-disabled:hover .saltSwitch-checked + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-checked-disabled, var(--switch-track-color-checked-disabled));\n  border: transparent;\n}\n\n/* Styles applied to thumb and icon if `disabled={true}`  */\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb,\n.saltSwitch-disabled .saltSwitch-checked .saltSwitch-icon,\n.saltSwitch-disabled:hover .saltSwitch-checked .saltSwitch-icon,\n.saltSwitch-disabled,\n.saltSwitch-disabled:hover {\n  --switch-thumb-background: var(--salt-selectable-primary-foreground-selectedDisabled);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Switch.css.js.map

package/dist-es/switch/Switch.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/switch/Switch.js

@@ -0,0 +1,118 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useState, useCallback } from 'react';
+import { makePrefixer, useControlled } from '@salt-ds/core';
+import { ControlLabel } from '../control-label/ControlLabel.js';
+import '../form-field-context-legacy/FormFieldLegacyContext.js';
+import { useFormFieldLegacyProps } from '../form-field-context-legacy/useFormFieldLegacyProps.js';
+import { CheckedIcon } from './assets/CheckedIcon.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './Switch.css.js';
+
+const withBaseName = makePrefixer("saltSwitch");
+const Switch = forwardRef(function Switch2(props, ref) {
+  const { a11yProps } = useFormFieldLegacyProps();
+  const {
+    checked: checkedProp,
+    className,
+    color,
+    defaultChecked,
+    disabled,
+    label,
+    LabelProps,
+    onBlur,
+    onChange,
+    onFocus,
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-switch",
+    css: css_248z,
+    window: targetWindow
+  });
+  const inputRef = useRef(null);
+  const [checked, setChecked] = useControlled({
+    controlled: checkedProp,
+    default: Boolean(defaultChecked),
+    name: "Switch",
+    state: "checked"
+  });
+  const [focusVisible, setFocusVisible] = useState(false);
+  const handleChange = (event) => {
+    const value = event.target.checked;
+    setChecked(value);
+    onChange == null ? void 0 : onChange(event, value);
+  };
+  const handleFocus = useCallback(
+    (event) => {
+      var _a;
+      if (!inputRef.current) {
+        inputRef.current = event.currentTarget;
+      }
+      if ((_a = inputRef.current) == null ? void 0 : _a.matches(":focus-visible")) {
+        setFocusVisible(true);
+      }
+      onFocus == null ? void 0 : onFocus(event);
+    },
+    [onFocus]
+  );
+  const handleBlur = useCallback(
+    (event) => {
+      setFocusVisible(false);
+      onBlur == null ? void 0 : onBlur(event);
+    },
+    [onBlur]
+  );
+  return /* @__PURE__ */ jsx(ControlLabel, {
+    ...LabelProps,
+    className: clsx(
+      withBaseName("label"),
+      { [withBaseName("disabled")]: disabled },
+      className
+    ),
+    disabled,
+    label,
+    ref,
+    children: /* @__PURE__ */ jsxs("span", {
+      className: clsx(withBaseName(), className),
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          className: clsx(withBaseName("base"), {
+            [withBaseName("checked")]: checked,
+            [withBaseName("focusVisible")]: focusVisible
+          }),
+          children: /* @__PURE__ */ jsxs("span", {
+            className: withBaseName("inputContainer"),
+            children: [
+              /* @__PURE__ */ jsx("input", {
+                className: withBaseName("input"),
+                checked,
+                disabled,
+                onBlur: handleBlur,
+                onChange: handleChange,
+                onFocus: handleFocus,
+                ref: inputRef,
+                type: "checkbox",
+                ...a11yProps,
+                ...rest
+              }),
+              checked ? /* @__PURE__ */ jsx(CheckedIcon, {
+                className: withBaseName("icon")
+              }) : /* @__PURE__ */ jsx("span", {
+                className: withBaseName("thumb")
+              })
+            ]
+          })
+        }),
+        /* @__PURE__ */ jsx("span", {
+          className: withBaseName("track")
+        })
+      ]
+    })
+  });
+});
+
+export { Switch };
+//# sourceMappingURL=Switch.js.map

package/dist-es/switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  forwardRef,\n  InputHTMLAttributes,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { ControlLabel, ControlLabelProps } from \"../control-label\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { CheckedIcon } from \"./assets/CheckedIcon\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n  label?: ControlLabelProps[\"label\"];\n  LabelProps?: Partial<ControlLabelProps>;\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(function Switch(\n  props,\n  ref\n) {\n  const { a11yProps } = useFormFieldLegacyProps();\n\n  const {\n    checked: checkedProp,\n    className,\n    color,\n    defaultChecked,\n    disabled,\n    label,\n    LabelProps,\n    onBlur,\n    onChange,\n    onFocus,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-switch\",\n    css: switchCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [checked, setChecked] = useControlled({\n    controlled: checkedProp,\n    default: Boolean(defaultChecked),\n    name: \"Switch\",\n    state: \"checked\",\n  });\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.checked;\n    setChecked(value);\n    onChange?.(event, value);\n  };\n\n  const handleFocus = useCallback(\n    (event: FocusEvent<HTMLInputElement>) => {\n      // Fix for https://github.com/facebook/react/issues/7769\n      if (!inputRef.current) {\n        inputRef.current = event.currentTarget;\n      }\n\n      // TODO :focus-visible not yet supported on Safari, so we'll need to use the\n      // useIsFocusVisible polyfill\n      if (inputRef.current?.matches(\":focus-visible\")) {\n        setFocusVisible(true);\n      }\n\n      onFocus?.(event);\n    },\n    [onFocus]\n  );\n\n  const handleBlur = useCallback(\n    (event: FocusEvent<HTMLInputElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  return (\n    <ControlLabel\n      {...LabelProps}\n      className={clsx(\n        withBaseName(\"label\"),\n        { [withBaseName(\"disabled\")]: disabled },\n        className\n      )}\n      disabled={disabled}\n      label={label}\n      ref={ref}\n    >\n      <span className={clsx(withBaseName(), className)}>\n        <span\n          className={clsx(withBaseName(\"base\"), {\n            [withBaseName(\"checked\")]: checked,\n            [withBaseName(\"focusVisible\")]: focusVisible,\n          })}\n        >\n          <span className={withBaseName(\"inputContainer\")}>\n            <input\n              className={withBaseName(\"input\")}\n              checked={checked}\n              disabled={disabled}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onFocus={handleFocus}\n              ref={inputRef}\n              type=\"checkbox\"\n              {...a11yProps}\n              {...rest}\n            />\n            {checked ? (\n              <CheckedIcon className={withBaseName(\"icon\")} />\n            ) : (\n              <span className={withBaseName(\"thumb\")} />\n            )}\n          </span>\n        </span>\n        <span className={withBaseName(\"track\")} />\n      </span>\n    </ControlLabel>\n  );\n});\n"],"names":["Switch","switchCss"],"mappings":"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"}

package/dist-es/tabs/Tab.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background);\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .saltTab-close-icon,\n.salt-density-low .saltTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .saltTab-close-icon-small,\n.salt-density-low .saltTab-close-icon-small {\n  display: none;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Tab.css.js.map

package/dist-es/tabs/Tab.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}