@salt-ds/lab 1.0.0-alpha.6 → 1.0.0-alpha.61

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepperInput.js","sources":["../src/stepper-input/StepperInput.tsx"],"sourcesContent":["import {\n  Button,\n  StatusAdornment,\n  type ValidationStatus,\n  capitalize,\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useFormFieldProps,\n  useIcon,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  isAllowedNonNumeric,\n  isOutOfRange,\n  sanitizedInput,\n  toFixedDecimalPlaces,\n  toFloat,\n} from \"./internal/utils\";\n\nimport stepperInputCss from \"./StepperInput.css\";\nimport { useStepperInput } from \"./useStepperInput\";\n\nconst withBaseName = makePrefixer(\"saltStepperInput\");\n\nexport interface StepperInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * A boolean. When `true`, the input will receive a full border.\n   */\n  bordered?: boolean;\n  /**\n   * The number of decimal places to display.\n   */\n  decimalPlaces?: number;\n  /**\n   * Sets the initial default value of the component.\n   */\n  defaultValue?: number | string;\n  /**\n   * If `true`, the stepper input will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   * @default '—'\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * Whether to hide the stepper buttons. Defaults to `false`.\n   * @default false\n   */\n  hideButtons?: boolean;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * The maximum value that can be selected. Defaults to Number.MAX_SAFE_INTEGER.\n   * @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number;\n  /**\n   * The minimum value that can be selected. Defaults to Number.MIN_SAFE_INTEGER.\n   * @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number;\n  /**\n   * Callback when stepper input value is changed.\n   * @param event - the event triggers value change, could be undefined during increment / decrement button long press\n   */\n  onChange?: (\n    event: SyntheticEvent | undefined,\n    value: number | string,\n  ) => void;\n  /**\n   * A string. Displayed in a dimmed color when the input value is empty.\n   */\n  placeholder?: string | undefined;\n  /**\n   * A boolean. If `true`, the component is not editable by the user.\n   */\n  readOnly?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * The amount to increment or decrement the value by when using the stepper buttons or Up Arrow and Down Arrow keys. Default to 1.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * The amount to change the value when the value is incremented or decremented by holding Shift and pressing Up arrow or Down arrow keys.\n   * Defaults to 10.\n   * @default 10\n   */\n  stepBlock?: number;\n  /**\n   * Alignment of text within container. Defaults to \"left\".\n   * @default \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: Extract<ValidationStatus, \"error\" | \"warning\" | \"success\">;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   * @default \"primary\"\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * The value of the stepper input. The component will be controlled if this prop is provided.\n   */\n  value?: number | string | undefined;\n}\n\nexport const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(\n  function StepperInput(\n    {\n      bordered,\n      className: classNameProp,\n      decimalPlaces = 0,\n      defaultValue: defaultValueProp,\n      disabled,\n      emptyReadOnlyMarker = \"—\",\n      endAdornment,\n      hideButtons,\n      inputProps: inputPropsProp = {},\n      inputRef: inputRefProp,\n      max = Number.MAX_SAFE_INTEGER,\n      min = Number.MIN_SAFE_INTEGER,\n      onChange: onChangeProp,\n      placeholder,\n      readOnly: readOnlyProp,\n      startAdornment,\n      step = 1,\n      stepBlock = 10,\n      textAlign = \"left\",\n      validationStatus: validationStatusProp,\n      value: valueProp,\n      variant = \"primary\",\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stepper-input\",\n      css: stepperInputCss,\n      window: targetWindow,\n    });\n\n    const { IncreaseIcon, DecreaseIcon } = useIcon();\n\n    const {\n      a11yProps: {\n        \"aria-describedby\": formFieldDescribedBy,\n        \"aria-labelledby\": formFieldLabelledBy,\n      } = {},\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      necessity: formFieldRequired,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const isDisabled = disabled || formFieldDisabled;\n    const isReadOnly = readOnlyProp || formFieldReadOnly;\n    const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onBlur: inputOnBlur,\n      onChange: inputOnChange,\n      onFocus: inputOnFocus,\n      required: inputRequired,\n      onKeyDown: inputOnKeyDown,\n      ...restInputProps\n    } = inputPropsProp;\n\n    const isRequired = formFieldRequired\n      ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n      : inputRequired;\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default:\n        typeof defaultValueProp === \"number\"\n          ? toFixedDecimalPlaces(defaultValueProp, decimalPlaces)\n          : defaultValueProp,\n      name: \"StepperInput\",\n      state: \"value\",\n    });\n\n    // Won't be needed when `:has` css can be used\n    const [focused, setFocused] = useState(false);\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const forkedInputRef = useForkRef(inputRef, inputRefProp);\n\n    const {\n      decrementButtonProps,\n      decrementValue,\n      incrementButtonProps,\n      incrementValue,\n    } = useStepperInput({\n      inputRef,\n      setValue,\n      decimalPlaces,\n      disabled,\n      max,\n      min,\n      onChange: onChangeProp,\n      readOnly: isReadOnly,\n      step,\n      stepBlock,\n      value,\n    });\n\n    const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n      setFocused(true);\n\n      inputOnFocus?.(event);\n    };\n\n    const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n      setFocused(false);\n\n      if (value === undefined) return;\n\n      const floatValue = toFloat(value);\n      if (Number.isNaN(floatValue)) {\n        // Keep original value if NaN\n        setValue(value);\n        onChangeProp?.(event, value);\n      } else {\n        const roundedValue = toFixedDecimalPlaces(floatValue, decimalPlaces);\n\n        if (value !== \"\" && !isAllowedNonNumeric(value)) {\n          setValue(roundedValue);\n        }\n\n        onChangeProp?.(event, roundedValue);\n      }\n\n      inputOnBlur?.(event);\n    };\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const changedValue = event.target.value;\n\n      setValue(sanitizedInput(changedValue));\n\n      onChangeProp?.(event, sanitizedInput(changedValue));\n      inputOnChange?.(event);\n    };\n\n    const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      switch (event.key) {\n        case \"ArrowUp\": {\n          event.preventDefault();\n          const block = event.shiftKey;\n          incrementValue(event, block);\n          break;\n        }\n        case \"ArrowDown\": {\n          event.preventDefault();\n          const block = event.shiftKey;\n          decrementValue(event, block);\n          break;\n        }\n        case \"Home\": {\n          event.preventDefault();\n          setValue(min);\n          onChangeProp?.(event, min);\n          break;\n        }\n        case \"End\": {\n          event.preventDefault();\n          setValue(max);\n          onChangeProp?.(event, max);\n          break;\n        }\n        case \"PageUp\": {\n          event.preventDefault();\n          incrementValue(event, true);\n          break;\n        }\n        case \"PageDown\": {\n          event.preventDefault();\n          decrementValue(event, true);\n          break;\n        }\n      }\n\n      inputOnKeyDown?.(event);\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), classNameProp)}\n        {...restProps}\n        ref={ref}\n      >\n        <div\n          className={clsx(\n            withBaseName(\"inputContainer\"),\n            withBaseName(variant),\n            {\n              [withBaseName(\"focused\")]: !isDisabled && focused,\n              [withBaseName(\"disabled\")]: isDisabled,\n              [withBaseName(\"readOnly\")]: isReadOnly,\n              [withBaseName(validationStatus || \"\")]: validationStatus,\n              [withBaseName(\"bordered\")]: bordered,\n            },\n          )}\n        >\n          {startAdornment && (\n            <div className={withBaseName(\"startAdornmentContainer\")}>\n              {startAdornment}\n            </div>\n          )}\n          <input\n            aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n            aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n            aria-invalid={\n              !isReadOnly ? isOutOfRange(value, min, max) : undefined\n            }\n            aria-valuemax={\n              !isReadOnly\n                ? toFloat(toFixedDecimalPlaces(max, decimalPlaces))\n                : undefined\n            }\n            aria-valuemin={\n              !isReadOnly\n                ? toFloat(toFixedDecimalPlaces(min, decimalPlaces))\n                : undefined\n            }\n            aria-valuenow={\n              value && !Number.isNaN(toFloat(value)) && !isReadOnly\n                ? toFloat(toFixedDecimalPlaces(toFloat(value), decimalPlaces))\n                : undefined\n            }\n            className={clsx(\n              withBaseName(\"input\"),\n              withBaseName(`inputTextAlign${capitalize(textAlign)}`),\n              inputClassName,\n            )}\n            disabled={isDisabled}\n            onBlur={handleInputBlur}\n            onChange={handleInputChange}\n            onFocus={!isDisabled ? handleInputFocus : undefined}\n            onKeyDown={handleInputKeyDown}\n            placeholder={placeholder}\n            readOnly={isReadOnly}\n            aria-readonly={isReadOnly ? \"true\" : undefined}\n            ref={forkedInputRef}\n            required={isRequired}\n            // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n            role={isReadOnly ? \"textbox\" : \"spinbutton\"}\n            tabIndex={isDisabled ? -1 : 0}\n            value={value}\n            {...restInputProps}\n          />\n          {!isDisabled && validationStatus && (\n            <StatusAdornment status={validationStatus} />\n          )}\n          {endAdornment && (\n            <div className={withBaseName(\"endAdornmentContainer\")}>\n              {endAdornment}\n            </div>\n          )}\n          <div className={withBaseName(\"activationIndicator\")} />\n        </div>\n\n        {!hideButtons && !isReadOnly && (\n          <div className={withBaseName(\"buttonContainer\")}>\n            <Button\n              className={clsx(\n                withBaseName(\"stepperButton\"),\n                withBaseName(\"stepperButtonIncrement\"),\n              )}\n              {...incrementButtonProps}\n            >\n              <IncreaseIcon aria-hidden />\n            </Button>\n            <Button\n              className={clsx(\n                withBaseName(\"stepperButton\"),\n                withBaseName(\"stepperButtonDecrement\"),\n              )}\n              {...decrementButtonProps}\n            >\n              <DecreaseIcon aria-hidden />\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","StepperInput","useWindow","useComponentCssInjection","stepperInputCss","useIcon","useFormFieldProps","useControlled","toFixedDecimalPlaces","useState","useRef","useForkRef","useStepperInput","toFloat","isAllowedNonNumeric","sanitizedInput","jsxs","clsx","jsx","isOutOfRange","capitalize","StatusAdornment","Button"],"mappings":"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"}

package/dist-cjs/stepper-input/internal/useActivateWhileMouseDown.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var window = require('@salt-ds/window');
+var react = require('react');
+var useInterval = require('./useInterval.js');
+
+const INITIAL_DELAY = 500;
+const INTERVAL_DELAY = 100;
+function useActivateWhileMouseDown(activationFn, isAtLimit) {
+  const [buttonDown, setButtonDown] = react.useState(false);
+  const [delay, setDelay] = react.useState(INITIAL_DELAY);
+  const cancelInterval = react.useCallback(() => {
+    setButtonDown(false);
+    setDelay(INITIAL_DELAY);
+  }, []);
+  react.useEffect(() => {
+    if (isAtLimit) cancelInterval();
+  }, [isAtLimit, cancelInterval]);
+  const targetWindow = window.useWindow();
+  react.useEffect(() => {
+    if (targetWindow) {
+      targetWindow.addEventListener("mouseup", cancelInterval);
+    }
+    return () => {
+      if (targetWindow) {
+        targetWindow.removeEventListener("mouseup", cancelInterval);
+      }
+    };
+  }, [cancelInterval, targetWindow]);
+  const activate = (event) => {
+    activationFn(event);
+    if (event.type === "mousedown") {
+      setButtonDown(true);
+    }
+  };
+  useInterval.useInterval(
+    () => {
+      if (!buttonDown) return;
+      activationFn();
+      if (delay === INITIAL_DELAY) {
+        setDelay(INTERVAL_DELAY);
+      }
+    },
+    buttonDown ? delay : null
+  );
+  return { activate, buttonDown };
+}
+
+exports.useActivateWhileMouseDown = useActivateWhileMouseDown;
+//# sourceMappingURL=useActivateWhileMouseDown.js.map

package/dist-cjs/stepper-input/internal/useActivateWhileMouseDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActivateWhileMouseDown.js","sources":["../src/stepper-input/internal/useActivateWhileMouseDown.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type SyntheticEvent, useCallback, useEffect, useState } from \"react\";\nimport { useInterval } from \"./useInterval\";\n\nconst INITIAL_DELAY = 500;\nconst INTERVAL_DELAY = 100;\n\nexport function useActivateWhileMouseDown(\n  activationFn: (event?: SyntheticEvent) => void,\n  isAtLimit: boolean,\n) {\n  const [buttonDown, setButtonDown] = useState(false);\n  const [delay, setDelay] = useState(INITIAL_DELAY);\n\n  const cancelInterval = useCallback(() => {\n    setButtonDown(false);\n    setDelay(INITIAL_DELAY);\n  }, []);\n\n  useEffect(() => {\n    if (isAtLimit) cancelInterval();\n  }, [isAtLimit, cancelInterval]);\n\n  const targetWindow = useWindow();\n\n  useEffect(() => {\n    if (targetWindow) {\n      targetWindow.addEventListener(\"mouseup\", cancelInterval);\n    }\n    return () => {\n      if (targetWindow) {\n        targetWindow.removeEventListener(\"mouseup\", cancelInterval);\n      }\n    };\n  }, [cancelInterval, targetWindow]);\n\n  const activate = (event: SyntheticEvent) => {\n    activationFn(event);\n    if (event.type === \"mousedown\") {\n      setButtonDown(true);\n    }\n  };\n\n  useInterval(\n    () => {\n      if (!buttonDown) return;\n      activationFn();\n      if (delay === INITIAL_DELAY) {\n        setDelay(INTERVAL_DELAY);\n      }\n    },\n    buttonDown ? delay : null,\n  );\n\n  return { activate, buttonDown };\n}\n"],"names":["useState","useCallback","useEffect","useWindow","useInterval"],"mappings":";;;;;;AAIA,MAAM,aAAgB,GAAA,GAAA;AACtB,MAAM,cAAiB,GAAA,GAAA;AAEP,SAAA,yBAAA,CACd,cACA,SACA,EAAA;AACA,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,aAAa,CAAA;AAEhD,EAAM,MAAA,cAAA,GAAiBC,kBAAY,MAAM;AACvC,IAAA,aAAA,CAAc,KAAK,CAAA;AACnB,IAAA,QAAA,CAAS,aAAa,CAAA;AAAA,GACxB,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAA0B,cAAA,EAAA;AAAA,GAC7B,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA;AAE9B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAa,YAAA,CAAA,gBAAA,CAAiB,WAAW,cAAc,CAAA;AAAA;AAEzD,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,YAAc,EAAA;AAChB,QAAa,YAAA,CAAA,mBAAA,CAAoB,WAAW,cAAc,CAAA;AAAA;AAC5D,KACF;AAAA,GACC,EAAA,CAAC,cAAgB,EAAA,YAAY,CAAC,CAAA;AAEjC,EAAM,MAAA,QAAA,GAAW,CAAC,KAA0B,KAAA;AAC1C,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAI,IAAA,KAAA,CAAM,SAAS,WAAa,EAAA;AAC9B,MAAA,aAAA,CAAc,IAAI,CAAA;AAAA;AACpB,GACF;AAEA,EAAAE,uBAAA;AAAA,IACE,MAAM;AACJ,MAAA,IAAI,CAAC,UAAY,EAAA;AACjB,MAAa,YAAA,EAAA;AACb,MAAA,IAAI,UAAU,aAAe,EAAA;AAC3B,QAAA,QAAA,CAAS,cAAc,CAAA;AAAA;AACzB,KACF;AAAA,IACA,aAAa,KAAQ,GAAA;AAAA,GACvB;AAEA,EAAO,OAAA,EAAE,UAAU,UAAW,EAAA;AAChC;;;;"}

package/dist-cjs/stepper-input/internal/useInterval.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var react = require('react');
+
+function useInterval(callback, delay) {
+  const savedCallback = react.useRef(null);
+  react.useEffect(() => {
+    savedCallback.current = callback;
+  });
+  react.useEffect(() => {
+    function tick() {
+      if (savedCallback.current !== null) {
+        savedCallback.current();
+      }
+    }
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+    return;
+  }, [delay]);
+}
+
+exports.useInterval = useInterval;
+//# sourceMappingURL=useInterval.js.map

package/dist-cjs/stepper-input/internal/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sources":["../src/stepper-input/internal/useInterval.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\ntype IntervalFunction = () => void;\n\n// https://gist.github.com/iamBevan/171cce94431b8c95206086252ce0c6c7\nfunction useInterval(callback: IntervalFunction, delay: number | null) {\n  const savedCallback = useRef<IntervalFunction | null>(null);\n\n  useEffect(() => {\n    savedCallback.current = callback;\n  });\n\n  useEffect(() => {\n    function tick() {\n      if (savedCallback.current !== null) {\n        savedCallback.current();\n      }\n    }\n\n    if (delay !== null) {\n      const id = setInterval(tick, delay);\n      return () => clearInterval(id);\n    }\n    return;\n  }, [delay]);\n}\n\nexport { useInterval };\n"],"names":["useRef","useEffect"],"mappings":";;;;AAKA,SAAS,WAAA,CAAY,UAA4B,KAAsB,EAAA;AACrE,EAAM,MAAA,aAAA,GAAgBA,aAAgC,IAAI,CAAA;AAE1D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,OAAU,GAAA,QAAA;AAAA,GACzB,CAAA;AAED,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,SAAS,IAAO,GAAA;AACd,MAAI,IAAA,aAAA,CAAc,YAAY,IAAM,EAAA;AAClC,QAAA,aAAA,CAAc,OAAQ,EAAA;AAAA;AACxB;AAGF,IAAA,IAAI,UAAU,IAAM,EAAA;AAClB,MAAM,MAAA,EAAA,GAAK,WAAY,CAAA,IAAA,EAAM,KAAK,CAAA;AAClC,MAAO,OAAA,MAAM,cAAc,EAAE,CAAA;AAAA;AAE/B,IAAA;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AACZ;;;;"}

package/dist-cjs/stepper-input/internal/utils.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const ACCEPT_INPUT = /^[-+]?[0-9]*\.?([0-9]+)?/g;
+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 Number.parseFloat(inputValue.toString());
+};
+const sanitizedInput = (numberString) => (numberString.match(ACCEPT_INPUT) || []).join("");
+const isAtMax = (value, max) => {
+  if (value === void 0) return true;
+  return toFloat(value) >= max;
+};
+const isAtMin = (value, min) => {
+  if (value === void 0) return true;
+  return toFloat(value) <= min;
+};
+const isOutOfRange = (value, min, max) => {
+  if (value === void 0) return true;
+  const floatValue = toFloat(value);
+  return floatValue > max || floatValue < min;
+};
+
+exports.ACCEPT_INPUT = ACCEPT_INPUT;
+exports.isAllowedNonNumeric = isAllowedNonNumeric;
+exports.isAtMax = isAtMax;
+exports.isAtMin = isAtMin;
+exports.isOutOfRange = isOutOfRange;
+exports.sanitizedInput = sanitizedInput;
+exports.toFixedDecimalPlaces = toFixedDecimalPlaces;
+exports.toFloat = toFloat;
+//# sourceMappingURL=utils.js.map

package/dist-cjs/stepper-input/internal/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/stepper-input/internal/utils.ts"],"sourcesContent":["// The input should only accept numbers, decimal points, and plus/minus symbols\nexport const ACCEPT_INPUT = /^[-+]?[0-9]*\\.?([0-9]+)?/g;\n\nexport const toFixedDecimalPlaces = (\n  inputNumber: number,\n  decimalPlaces: number,\n) => inputNumber.toFixed(decimalPlaces);\n\nexport const isAllowedNonNumeric = (inputCharacter: number | string) => {\n  if (typeof inputCharacter === \"number\") return;\n  return (\n    (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) ||\n    inputCharacter === \"\"\n  );\n};\n\nexport const toFloat = (inputValue: number | string) => {\n  // Plus, minus, and empty characters are treated as 0\n  if (isAllowedNonNumeric(inputValue)) return 0;\n  return Number.parseFloat(inputValue.toString());\n};\n\nexport const sanitizedInput = (numberString: string) =>\n  (numberString.match(ACCEPT_INPUT) || []).join(\"\");\n\nexport const isAtMax = (value: number | string | undefined, max: number) => {\n  if (value === undefined) return true;\n  return toFloat(value) >= max;\n};\n\nexport const isAtMin = (value: number | string | undefined, min: number) => {\n  if (value === undefined) return true;\n  return toFloat(value) <= min;\n};\n\nexport const isOutOfRange = (\n  value: number | string | undefined,\n  min: number,\n  max: number,\n) => {\n  if (value === undefined) return true;\n  const floatValue = toFloat(value);\n  return floatValue > max || floatValue < min;\n};\n"],"names":[],"mappings":";;AACO,MAAM,YAAe,GAAA;AAErB,MAAM,uBAAuB,CAClC,WAAA,EACA,aACG,KAAA,WAAA,CAAY,QAAQ,aAAa;AAEzB,MAAA,mBAAA,GAAsB,CAAC,cAAoC,KAAA;AACtE,EAAI,IAAA,OAAO,mBAAmB,QAAU,EAAA;AACxC,EAAA,OACG,KAAK,QAAS,CAAA,cAAc,KAAK,cAAe,CAAA,MAAA,KAAW,KAC5D,cAAmB,KAAA,EAAA;AAEvB;AAEa,MAAA,OAAA,GAAU,CAAC,UAAgC,KAAA;AAEtD,EAAI,IAAA,mBAAA,CAAoB,UAAU,CAAA,EAAU,OAAA,CAAA;AAC5C,EAAA,OAAO,MAAO,CAAA,UAAA,CAAW,UAAW,CAAA,QAAA,EAAU,CAAA;AAChD;AAEa,MAAA,cAAA,GAAiB,CAAC,YAAA,KAAA,CAC5B,YAAa,CAAA,KAAA,CAAM,YAAY,CAAK,IAAA,EAAI,EAAA,IAAA,CAAK,EAAE;AAErC,MAAA,OAAA,GAAU,CAAC,KAAA,EAAoC,GAAgB,KAAA;AAC1E,EAAI,IAAA,KAAA,KAAU,QAAkB,OAAA,IAAA;AAChC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAK,IAAA,GAAA;AAC3B;AAEa,MAAA,OAAA,GAAU,CAAC,KAAA,EAAoC,GAAgB,KAAA;AAC1E,EAAI,IAAA,KAAA,KAAU,QAAkB,OAAA,IAAA;AAChC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAK,IAAA,GAAA;AAC3B;AAEO,MAAM,YAAe,GAAA,CAC1B,KACA,EAAA,GAAA,EACA,GACG,KAAA;AACH,EAAI,IAAA,KAAA,KAAU,QAAkB,OAAA,IAAA;AAChC,EAAM,MAAA,UAAA,GAAa,QAAQ,KAAK,CAAA;AAChC,EAAO,OAAA,UAAA,GAAa,OAAO,UAAa,GAAA,GAAA;AAC1C;;;;;;;;;;;"}

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

@@ -0,0 +1,99 @@
+'use strict';
+
+var react = require('react');
+var useActivateWhileMouseDown = require('./internal/useActivateWhileMouseDown.js');
+var utils = require('./internal/utils.js');
+
+const useStepperInput = ({
+  decimalPlaces = 0,
+  disabled,
+  inputRef,
+  max = Number.MAX_SAFE_INTEGER,
+  min = Number.MIN_SAFE_INTEGER,
+  onChange,
+  readOnly,
+  setValue,
+  step = 1,
+  stepBlock = 10,
+  value
+}) => {
+  const setValueInRange = react.useCallback(
+    (event, modifiedValue) => {
+      if (readOnly) return;
+      let nextValue = modifiedValue;
+      if (nextValue < min) nextValue = min;
+      if (nextValue > max) nextValue = max;
+      const roundedValue = utils.toFixedDecimalPlaces(nextValue, decimalPlaces);
+      if (Number.isNaN(utils.toFloat(roundedValue))) return;
+      setValue(roundedValue);
+      onChange == null ? void 0 : onChange(event, roundedValue);
+    },
+    [decimalPlaces, min, max, onChange, readOnly, setValue]
+  );
+  const decrementValue = react.useCallback(
+    (event, block) => {
+      if (value === void 0 || utils.isAtMin(value, min)) return;
+      const decrementStep = block ? stepBlock : step;
+      const nextValue = value === "" ? -decrementStep : utils.toFloat(value) - decrementStep;
+      setValueInRange(event, nextValue);
+    },
+    [value, min, step, stepBlock, setValueInRange]
+  );
+  const incrementValue = react.useCallback(
+    (event, block) => {
+      if (value === void 0 || utils.isAtMax(value, max)) return;
+      const incrementStep = block ? stepBlock : step;
+      const nextValue = value === "" ? incrementStep : utils.toFloat(value) + incrementStep;
+      setValueInRange(event, nextValue);
+    },
+    [value, max, step, stepBlock, setValueInRange]
+  );
+  const { activate: decrementSpinner } = useActivateWhileMouseDown.useActivateWhileMouseDown(
+    (event) => decrementValue(event),
+    utils.isAtMin(value, min)
+  );
+  const { activate: incrementSpinner } = useActivateWhileMouseDown.useActivateWhileMouseDown(
+    (event) => incrementValue(event),
+    utils.isAtMax(value, max)
+  );
+  const handleButtonMouseUp = () => {
+    var _a;
+    return (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const commonButtonProps = {
+    "aria-hidden": true,
+    tabIndex: -1,
+    onMouseUp: handleButtonMouseUp
+  };
+  const incrementButtonProps = {
+    ...commonButtonProps,
+    "aria-label": "increment value",
+    disabled: disabled || utils.isAtMax(value, max),
+    onMouseDown: (event) => {
+      if (event.nativeEvent.button !== 0) {
+        return;
+      }
+      incrementSpinner(event);
+    }
+  };
+  const decrementButtonProps = {
+    ...commonButtonProps,
+    "aria-label": "decrement value",
+    disabled: disabled || utils.isAtMin(value, min),
+    onMouseDown: (event) => {
+      if (event.nativeEvent.button !== 0) {
+        return;
+      }
+      decrementSpinner(event);
+    }
+  };
+  return {
+    incrementButtonProps,
+    decrementButtonProps,
+    incrementValue,
+    decrementValue
+  };
+};
+
+exports.useStepperInput = useStepperInput;
+//# sourceMappingURL=useStepperInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStepperInput.js","sources":["../src/stepper-input/useStepperInput.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type MouseEvent,\n  type MutableRefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useCallback,\n} from \"react\";\nimport type { StepperInputProps } from \"./StepperInput\";\nimport { useActivateWhileMouseDown } from \"./internal/useActivateWhileMouseDown\";\nimport {\n  isAtMax,\n  isAtMin,\n  toFixedDecimalPlaces,\n  toFloat,\n} from \"./internal/utils\";\n\n/**\n * Manages increment / decrement logic\n */\nexport const useStepperInput = ({\n  decimalPlaces = 0,\n  disabled,\n  inputRef,\n  max = Number.MAX_SAFE_INTEGER,\n  min = Number.MIN_SAFE_INTEGER,\n  onChange,\n  readOnly,\n  setValue,\n  step = 1,\n  stepBlock = 10,\n  value,\n}: Pick<\n  StepperInputProps,\n  | \"decimalPlaces\"\n  | \"disabled\"\n  | \"inputRef\"\n  | \"max\"\n  | \"min\"\n  | \"onChange\"\n  | \"readOnly\"\n  | \"step\"\n  | \"stepBlock\"\n  | \"value\"\n> & {\n  setValue: Dispatch<SetStateAction<string | number | undefined>>;\n  inputRef: MutableRefObject<HTMLInputElement | null>;\n}) => {\n  const setValueInRange = useCallback(\n    (event: SyntheticEvent | undefined, modifiedValue: number) => {\n      if (readOnly) return;\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 (Number.isNaN(toFloat(roundedValue))) return;\n\n      setValue(roundedValue);\n\n      onChange?.(event, roundedValue);\n    },\n    [decimalPlaces, min, max, onChange, readOnly, setValue],\n  );\n\n  const decrementValue = useCallback(\n    (event?: SyntheticEvent, block?: boolean) => {\n      if (value === undefined || isAtMin(value, min)) return;\n      const decrementStep = block ? stepBlock : step;\n      const nextValue =\n        value === \"\" ? -decrementStep : toFloat(value) - decrementStep;\n      setValueInRange(event, nextValue);\n    },\n    [value, min, step, stepBlock, setValueInRange],\n  );\n\n  const incrementValue = useCallback(\n    (event?: SyntheticEvent, block?: boolean) => {\n      if (value === undefined || isAtMax(value, max)) return;\n      const incrementStep = block ? stepBlock : step;\n      const nextValue =\n        value === \"\" ? incrementStep : toFloat(value) + incrementStep;\n      setValueInRange(event, nextValue);\n    },\n    [value, max, step, stepBlock, setValueInRange],\n  );\n\n  const { activate: decrementSpinner } = useActivateWhileMouseDown(\n    (event?: SyntheticEvent) => decrementValue(event),\n    isAtMin(value, min),\n  );\n\n  const { activate: incrementSpinner } = useActivateWhileMouseDown(\n    (event?: SyntheticEvent) => incrementValue(event),\n    isAtMax(value, max),\n  );\n\n  const handleButtonMouseUp = () => inputRef.current?.focus();\n\n  const commonButtonProps = {\n    \"aria-hidden\": true,\n    tabIndex: -1,\n    onMouseUp: handleButtonMouseUp,\n  };\n\n  const incrementButtonProps = {\n    ...commonButtonProps,\n    \"aria-label\": \"increment value\",\n    disabled: disabled || isAtMax(value, max),\n    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n      if (event.nativeEvent.button !== 0) {\n        // To match closely with <input type='input'>\n        return;\n      }\n      incrementSpinner(event);\n    },\n  };\n\n  const decrementButtonProps = {\n    ...commonButtonProps,\n    \"aria-label\": \"decrement value\",\n    disabled: disabled || isAtMin(value, min),\n    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n      if (event.nativeEvent.button !== 0) {\n        // To match closely with <input type='input'>\n        return;\n      }\n      decrementSpinner(event);\n    },\n  };\n\n  return {\n    incrementButtonProps,\n    decrementButtonProps,\n    incrementValue,\n    decrementValue,\n  };\n};\n"],"names":["useCallback","toFixedDecimalPlaces","toFloat","isAtMin","isAtMax","useActivateWhileMouseDown"],"mappings":"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"}

package/dist-cjs/system-status/SystemStatus.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to root component */\n.saltSystemStatus {\n  background: var(--saltSystemStatus-background, var(--systemStatus-background));\n  border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor));\n  border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-border));\n  border-style: var(--saltSystemStatus-borderStyle, var(--salt-container-borderStyle));\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltSystemStatus-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to icon */\n.saltSystemStatus-icon.saltIcon {\n  min-height: var(--salt-size-base);\n  --saltIcon-color: var(--salt-content-bold-foreground);\n}\n\n/* Styles applied when state = \"info\" */\n.saltSystemStatus-info {\n  --systemStatus-borderColor: var(--salt-status-info-bold-background);\n  --systemStatus-background: var(--salt-status-info-bold-background);\n}\n\n/* Styles applied when state = \"error\" */\n.saltSystemStatus-error {\n  --systemStatus-borderColor: var(--salt-status-error-bold-background);\n  --systemStatus-background: var(--salt-status-error-bold-background);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltSystemStatus-warning {\n  --systemStatus-borderColor: var(--salt-status-warning-bold-background);\n  --systemStatus-background: var(--salt-status-warning-bold-background);\n}\n\n/* Styles applied when state = \"success\" */\n.saltSystemStatus-success {\n  --systemStatus-borderColor: var(--salt-status-success-bold-background);\n  --systemStatus-background: var(--salt-status-success-bold-background);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=SystemStatus.css.js.map

package/dist-cjs/system-status/SystemStatus.css.js.map

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

package/dist-cjs/system-status/SystemStatus.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var SystemStatus$1 = require('./SystemStatus.css.js');
+
+const withBaseName = core.makePrefixer("saltSystemStatus");
+const SystemStatus = react.forwardRef(
+  function SystemStatus2({ children, className, status = "info", ...rest }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-system-status",
+      css: SystemStatus$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(withBaseName(), withBaseName(status), className),
+        ref,
+        role: "status",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, { status, className: withBaseName("icon") }),
+          children
+        ]
+      }
+    );
+  }
+);
+
+exports.SystemStatus = SystemStatus;
+//# sourceMappingURL=SystemStatus.js.map

package/dist-cjs/system-status/SystemStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemStatus.js","sources":["../src/system-status/SystemStatus.tsx"],"sourcesContent":["import {\n  StatusIndicator,\n  type ValidationStatus,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport systemStatusCss from \"./SystemStatus.css\";\n\nexport interface SystemStatusProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   *  A string to determine the current state of the SystemStatus. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltSystemStatus\");\n\nexport const SystemStatus = forwardRef<HTMLDivElement, SystemStatusProps>(\n  function SystemStatus(\n    { children, className, status = \"info\", ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-system-status\",\n      css: systemStatusCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(withBaseName(), withBaseName(status), className)}\n        ref={ref}\n        role=\"status\"\n        {...rest}\n      >\n        <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","SystemStatus","useWindow","useComponentCssInjection","systemStatusCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,SAAS,MAAQ,EAAA,GAAG,IAAK,EAAA,EAChD,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,QAC/D,GAAA;AAAA,QACA,IAAK,EAAA,QAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACC,oBAAgB,EAAA,EAAA,MAAA,EAAgB,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAAA,UACjE;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/system-status/SystemStatusActions.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltSystemStatusActions {\n  margin-bottom: auto;\n  display: flex;\n  gap: var(--salt-spacing-100);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=SystemStatusActions.css.js.map

package/dist-cjs/system-status/SystemStatusActions.css.js.map

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

package/dist-cjs/system-status/SystemStatusActions.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var SystemStatusActions$1 = require('./SystemStatusActions.css.js');
+
+const withBaseName = core.makePrefixer("saltSystemStatusActions");
+const SystemStatusActions = react.forwardRef(function SystemStatusActions2(props, ref) {
+  const { className, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-system-status-actions",
+    css: SystemStatusActions$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ...rest, ref });
+});
+
+exports.SystemStatusActions = SystemStatusActions;
+//# sourceMappingURL=SystemStatusActions.js.map

package/dist-cjs/system-status/SystemStatusActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemStatusActions.js","sources":["../src/system-status/SystemStatusActions.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport systemStatusActionsCss from \"./SystemStatusActions.css\";\n\nconst withBaseName = makePrefixer(\"saltSystemStatusActions\");\n\ninterface SystemStatusActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of SystemStatusActions\n   */\n  children: ReactNode;\n}\n\nexport const SystemStatusActions = forwardRef<\n  HTMLDivElement,\n  SystemStatusActionsProps\n>(function SystemStatusActions(props, ref) {\n  const { className, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-system-status-actions\",\n    css: systemStatusActionsCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n  );\n});\n"],"names":["makePrefixer","forwardRef","SystemStatusActions","useWindow","useComponentCssInjection","systemStatusActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,yBAAyB,CAAA;AASpD,MAAM,mBAAsB,GAAAC,gBAAA,CAGjC,SAASC,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,qBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAU,EAAA,CAAA;AAEzE,CAAC;;;;"}

package/dist-cjs/system-status/SystemStatusContent.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to SystemStatusContent */\n.saltSystemStatusContent {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n  color: var(--salt-content-bold-foreground);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=SystemStatusContent.css.js.map

package/dist-cjs/system-status/SystemStatusContent.css.js.map

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

package/dist-cjs/system-status/SystemStatusContent.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var SystemStatusContent$1 = require('./SystemStatusContent.css.js');
+
+const withBaseName = core.makePrefixer("saltSystemStatusContent");
+const SystemStatusContent = react.forwardRef(function SystemStatusContent2(props, ref) {
+  const { className, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-system-status-content",
+    css: SystemStatusContent$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ...rest, ref });
+});
+
+exports.SystemStatusContent = SystemStatusContent;
+//# sourceMappingURL=SystemStatusContent.js.map

package/dist-cjs/system-status/SystemStatusContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemStatusContent.js","sources":["../src/system-status/SystemStatusContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport systemStatusContentCss from \"./SystemStatusContent.css\";\n\nconst withBaseName = makePrefixer(\"saltSystemStatusContent\");\n\ninterface SystemStatusContentProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of SystemStatusContent\n   */\n  children: ReactNode;\n}\n\nexport const SystemStatusContent = forwardRef<\n  HTMLDivElement,\n  SystemStatusContentProps\n>(function SystemStatusContent(props, ref) {\n  const { className, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-system-status-content\",\n    css: systemStatusContentCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n  );\n});\n"],"names":["makePrefixer","forwardRef","SystemStatusContent","useWindow","useComponentCssInjection","systemStatusContentCss","jsx","clsx"],"mappings":";;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,yBAAyB,CAAA;AASpD,MAAM,mBAAsB,GAAAC,gBAAA,CAGjC,SAASC,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,qBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAU,EAAA,CAAA;AAEzE,CAAC;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+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: transparent;\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-content-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  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  /* Not specify line-height, otherwise tabs are misaligned */\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-content-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: block;\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-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-background-hover));\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Tab.css.js.map

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

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