@salt-ds/lab 1.0.0-alpha.14 → 1.0.0-alpha.15

package/dist-es/switch/Switch.js

@@ -1,29 +1,35 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } 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 { forwardRef } from 'react';
+import { makePrefixer, useControlled, useFormFieldProps, useDensity } from '@salt-ds/core';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './Switch.css.js';
+import { SuccessSmallSolidIcon, SuccessSolidIcon } from '@salt-ds/icons';
 
 const withBaseName = makePrefixer("saltSwitch");
+function CheckedIcon(props) {
+  const density = useDensity();
+  return density === "high" ? /* @__PURE__ */ jsx(SuccessSmallSolidIcon, {
+    ...props
+  }) : /* @__PURE__ */ jsx(SuccessSolidIcon, {
+    ...props
+  });
+}
 const Switch = forwardRef(function Switch2(props, ref) {
-  const { a11yProps } = useFormFieldLegacyProps();
   const {
     checked: checkedProp,
     className,
     color,
     defaultChecked,
-    disabled,
+    disabled: disabledProp,
+    inputProps = {},
     label,
-    LabelProps,
+    name,
     onBlur,
     onChange,
     onFocus,
+    value,
     ...rest
   } = props;
   const targetWindow = useWindow();
@@ -32,85 +38,74 @@ const Switch = forwardRef(function Switch2(props, ref) {
     css: css_248z,
     window: targetWindow
   });
-  const inputRef = useRef(null);
+  const {
+    "aria-describedby": inputDescribedBy,
+    "aria-labelledby": inputLabelledBy,
+    className: inputClassName,
+    onChange: inputOnChange,
+    ...restInputProps
+  } = inputProps;
   const [checked, setChecked] = useControlled({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
     name: "Switch",
     state: "checked"
   });
-  const [focusVisible, setFocusVisible] = useState(false);
+  const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } = useFormFieldProps();
+  const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
   const handleChange = (event) => {
-    const value = event.target.checked;
-    setChecked(value);
-    onChange == null ? void 0 : onChange(event, value);
+    if (event.nativeEvent.defaultPrevented) {
+      return;
+    }
+    const value2 = event.target.checked;
+    setChecked(value2);
+    onChange == null ? void 0 : onChange(event);
+    inputOnChange == null ? void 0 : inputOnChange(event);
   };
-  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,
+  return /* @__PURE__ */ jsxs("label", {
     className: clsx(
-      withBaseName("label"),
-      { [withBaseName("disabled")]: disabled },
+      withBaseName(),
+      {
+        [withBaseName("disabled")]: disabled,
+        [withBaseName("checked")]: checked
+      },
       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")
-              })
-            ]
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        "aria-describedby": clsx(
+          formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"],
+          inputDescribedBy
+        ),
+        "aria-labelledby": clsx(
+          formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"],
+          inputLabelledBy
+        ),
+        name,
+        value,
+        checked,
+        className: clsx(withBaseName("input"), inputClassName),
+        defaultChecked,
+        disabled,
+        onBlur,
+        onChange: handleChange,
+        onFocus,
+        type: "checkbox",
+        ...restInputProps
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: withBaseName("track"),
+        children: /* @__PURE__ */ jsx("span", {
+          className: withBaseName("thumb"),
+          children: checked && /* @__PURE__ */ jsx(CheckedIcon, {
+            className: withBaseName("icon")
           })
-        }),
-        /* @__PURE__ */ jsx("span", {
-          className: withBaseName("track")
         })
-      ]
-    })
+      }),
+      label
+    ]
   });
 });
 

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

@@ -1 +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":";;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAA,UAAA,CAA0C,SAASA,OAAAA,CACvE,OACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,uBAAwB,EAAA,CAAA;AAE9C,EAAM,MAAA;AAAA,IACJ,OAAS,EAAA,WAAA;AAAA,IACT,SAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,OAAgC,IAAI,CAAA,CAAA;AAErD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,aAAc,CAAA;AAAA,IAC1C,UAAY,EAAA,WAAA;AAAA,IACZ,OAAA,EAAS,QAAQ,cAAc,CAAA;AAAA,IAC/B,IAAM,EAAA,QAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEtD,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAM,MAAA,KAAA,GAAQ,MAAM,MAAO,CAAA,OAAA,CAAA;AAC3B,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,IAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,KAAwC,KAAA;AA1E7C,MAAA,IAAA,EAAA,CAAA;AA4EM,MAAI,IAAA,CAAC,SAAS,OAAS,EAAA;AACrB,QAAA,QAAA,CAAS,UAAU,KAAM,CAAA,aAAA,CAAA;AAAA,OAC3B;AAIA,MAAA,IAAA,CAAI,EAAS,GAAA,QAAA,CAAA,OAAA,KAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAA,CAAQ,gBAAmB,CAAA,EAAA;AAC/C,QAAA,eAAA,CAAgB,IAAI,CAAA,CAAA;AAAA,OACtB;AAEA,MAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACZ;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,KAAwC,KAAA;AACvC,MAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AACrB,MAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACX;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,YAAA,EAAA;AAAA,IACE,GAAG,UAAA;AAAA,IACJ,SAAW,EAAA,IAAA;AAAA,MACT,aAAa,OAAO,CAAA;AAAA,MACpB,EAAE,CAAC,YAAa,CAAA,UAAU,IAAI,QAAS,EAAA;AAAA,MACvC,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAA;AAAA,IAEA,QAAC,kBAAA,IAAA,CAAA,MAAA,EAAA;AAAA,MAAK,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAC7C,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,MAAM,CAAG,EAAA;AAAA,YACpC,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,YAC3B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,WACjC,CAAA;AAAA,UAED,QAAC,kBAAA,IAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,YAC5C,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,OAAA,EAAA;AAAA,gBACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,gBAC/B,OAAA;AAAA,gBACA,QAAA;AAAA,gBACA,MAAQ,EAAA,UAAA;AAAA,gBACR,QAAU,EAAA,YAAA;AAAA,gBACV,OAAS,EAAA,WAAA;AAAA,gBACT,GAAK,EAAA,QAAA;AAAA,gBACL,IAAK,EAAA,UAAA;AAAA,gBACJ,GAAG,SAAA;AAAA,gBACH,GAAG,IAAA;AAAA,eACN,CAAA;AAAA,cACC,0BACE,GAAA,CAAA,WAAA,EAAA;AAAA,gBAAY,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,eAAG,oBAE7C,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,eAAG,CAAA;AAAA,aAAA;AAAA,WAE5C,CAAA;AAAA,SACF,CAAA;AAAA,wBACC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,SAAG,CAAA;AAAA,OAAA;AAAA,KAC1C,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  FocusEventHandler,\n  forwardRef,\n  ReactNode,\n} from \"react\";\nimport {\n  makePrefixer,\n  useControlled,\n  useDensity,\n  useFormFieldProps,\n} from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport switchCss from \"./Switch.css\";\nimport {\n  IconProps,\n  SuccessSmallSolidIcon,\n  SuccessSolidIcon,\n} from \"@salt-ds/icons\";\n\nexport interface SwitchProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"label\">,\n    \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n  > {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean;\n  /**\n   * Whether the checkbox component is checked by default\n   * This will be disregarded if checked is already set.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true`, the checkbox will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Properties applied to the input element.\n   */\n  inputProps?: Partial<ComponentPropsWithoutRef<\"input\">>;\n  /**\n   * The label to be shown next to the checkbox.\n   */\n  label?: ReactNode;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback when checkbox loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checkbox gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The value of the checkbox.\n   */\n  value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nfunction CheckedIcon(props: IconProps) {\n  const density = useDensity();\n  return density === \"high\" ? (\n    <SuccessSmallSolidIcon {...props} />\n  ) : (\n    <SuccessSolidIcon {...props} />\n  );\n}\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(function Switch(\n  props,\n  ref\n) {\n  const {\n    checked: checkedProp,\n    className,\n    color,\n    defaultChecked,\n    disabled: disabledProp,\n    inputProps = {},\n    label,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    value,\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 {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    className: inputClassName,\n    onChange: inputOnChange,\n    ...restInputProps\n  } = inputProps;\n\n  const [checked, setChecked] = useControlled({\n    controlled: checkedProp,\n    default: Boolean(defaultChecked),\n    name: \"Switch\",\n    state: \"checked\",\n  });\n\n  const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n    useFormFieldProps();\n\n  const disabled = formFieldDisabled ?? disabledProp;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    // Workaround for https://github.com/facebook/react/issues/9023\n    if (event.nativeEvent.defaultPrevented) {\n      return;\n    }\n\n    const value = event.target.checked;\n    setChecked(value);\n    onChange?.(event);\n    inputOnChange?.(event);\n  };\n\n  return (\n    <label\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"checked\")]: checked,\n        },\n        className\n      )}\n      ref={ref}\n      {...rest}\n    >\n      <input\n        aria-describedby={clsx(\n          formFieldA11yProps?.[\"aria-describedby\"],\n          inputDescribedBy\n        )}\n        aria-labelledby={clsx(\n          formFieldA11yProps?.[\"aria-labelledby\"],\n          inputLabelledBy\n        )}\n        name={name}\n        value={value}\n        checked={checked}\n        className={clsx(withBaseName(\"input\"), inputClassName)}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        onBlur={onBlur}\n        onChange={handleChange}\n        onFocus={onFocus}\n        type=\"checkbox\"\n        {...restInputProps}\n      />\n      <span className={withBaseName(\"track\")}>\n        <span className={withBaseName(\"thumb\")}>\n          {checked && <CheckedIcon className={withBaseName(\"icon\")} />}\n        </span>\n      </span>\n      {label}\n    </label>\n  );\n});\n"],"names":["Switch","switchCss","value"],"mappings":"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"}

package/dist-es/toast-group/ToastGroup.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltToastGroup {\n  width: var(--toastGroup-width);\n  max-height: calc(100% - var(--salt-spacing-300) * 2);\n  margin: var(--salt-spacing-300) var(--salt-spacing-200) var(--salt-spacing-100) var(--salt-spacing-200);\n  overflow: auto;\n  display: flex-inline;\n  flex-direction: column;\n  position: fixed;\n  z-index: var(--salt-zIndex-flyover);\n}\n\n.saltToastGroup-bottom-right {\n  bottom: 0;\n  right: 0;\n  justify-content: flex-end;\n}\n\n.saltToastGroup-top-right {\n  top: 0;\n  right: 0;\n  justify-content: flex-start;\n}\n\n.salt-density-high {\n  --toastGroup-width: 210px;\n}\n\n.salt-density-medium {\n  --toastGroup-width: 260px;\n}\n\n.salt-density-low {\n  --toastGroup-width: 310px;\n}\n\n.salt-density-touch {\n  --toastGroup-width: 360px;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ToastGroup.css.js.map

package/dist-es/toast-group/ToastGroup.css.js.map

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

package/dist-es/toast-group/ToastGroup.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './ToastGroup.css.js';
+
+const withBaseName = makePrefixer("saltToastGroup");
+const ToastGroup = forwardRef(
+  function ToastGroup2(props, ref) {
+    const { children, className, placement = "bottom-right", ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-toast",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", {
+      className: clsx(withBaseName(), withBaseName(placement), className),
+      ...rest,
+      children
+    });
+  }
+);
+
+export { ToastGroup };
+//# sourceMappingURL=ToastGroup.js.map

package/dist-es/toast-group/ToastGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport toastGroupCss from \"./ToastGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltToastGroup\");\n\nexport interface ToastGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  placement?: \"top-right\" | \"bottom-right\";\n}\n\nexport const ToastGroup = forwardRef<HTMLDivElement, ToastGroupProps>(\n  function ToastGroup(props, ref) {\n    const { children, className, placement = \"bottom-right\", ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toast\",\n      css: toastGroupCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(withBaseName(), withBaseName(placement), className)}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["ToastGroup","toastGroupCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,KAAA,EAAO,GAAK,EAAA;AAC9B,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,SAAY,GAAA,cAAA,EAAA,GAAmB,MAAS,GAAA,KAAA,CAAA;AAErE,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,YAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,SAAS,GAAG,SAAS,CAAA;AAAA,MACjE,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-types/badge/Badge.d.ts

@@ -1,24 +1,13 @@
-import { HTMLAttributes, ReactElement, ReactText } from "react";
-/**
- * @example overriding density prop to fit a smaller denser space otherwise handled through context provider
- * <Badge density={'high'} />
- *
- * NOTE: Badge component no longer has AccessibleText prop
- *
- */
+import { HTMLAttributes, ReactNode } from "react";
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /**
-     * The number to display on the badge.
+     * The number to display on the badge
      */
-    badgeContent?: string | number;
+    value: number | string;
     /**
-     * The badge will be added relative to this node. Renders the "message" icon by default.
+     * If a child is provided the Badge will render top right. By defualt renders inline.
      */
-    children?: ReactElement<HTMLAttributes<HTMLElement>> | ReactText;
-    /**
-     * The className(s) of the component.
-     */
-    className?: string;
+    children?: ReactNode;
     /**
      * The max number to display on the badge.
      */

package/dist-types/content-status/internal/StatusIndicator.d.ts

@@ -1,7 +1,7 @@
 import { StatusIndicatorProps as BaseStatusIndicatorProps, SpinnerProps } from "@salt-ds/core";
 import { ReactElement } from "react";
 import { CircularProgressProps } from "../../progress";
-export interface StatusIndicatorProps extends Pick<SpinnerProps, "disableAnnouncer">, Pick<CircularProgressProps, "unit" | "value"> {
+export interface StatusIndicatorProps extends Pick<SpinnerProps, "disableAnnouncer">, Pick<CircularProgressProps, "value"> {
     title?: string;
     message?: string;
     CircularProgressProps?: Partial<CircularProgressProps>;
@@ -9,4 +9,4 @@ export interface StatusIndicatorProps extends Pick<SpinnerProps, "disableAnnounc
     id?: string;
     status?: BaseStatusIndicatorProps["status"] | "loading";
 }
-export declare function StatusIndicator({ status, disableAnnouncer, unit, value, title, message, CircularProgressProps: { className: circularProgressClassName, ...restCircularProgressProps }, SpinnerProps: { className: spinnerClassName, ...restSpinnerProps }, id, }: StatusIndicatorProps): ReactElement;
+export declare function StatusIndicator({ status, disableAnnouncer, value, title, message, CircularProgressProps: { className: circularProgressClassName, ...restCircularProgressProps }, SpinnerProps: { className: spinnerClassName, ...restSpinnerProps }, id, }: StatusIndicatorProps): ReactElement;

package/dist-types/dialog/internal/DialogContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const DialogContext: import("react").Context<{
-    status?: "error" | "info" | "success" | "warning" | undefined;
+    status?: "error" | "warning" | "success" | "info" | undefined;
     dialogId?: string | undefined;
     setContentElement?: ((node: HTMLDivElement) => void) | undefined;
 }>;

package/dist-types/drawer/Drawer.d.ts

@@ -1,28 +1,19 @@
 import { HTMLAttributes } from "react";
-import { ScrimProps } from "../scrim";
 export declare const DRAWER_POSITIONS: readonly ["left", "top", "right", "bottom"];
 export declare type DrawerPositions = typeof DRAWER_POSITIONS[number];
 export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Disable the scrim.
-     */
-    disableScrim?: boolean;
     /**
      * Defines the drawer position within the screen.
      */
     position?: DrawerPositions;
-    /**
-     * Disable all animations.
-     */
-    disableAnimations?: boolean;
     /**
      * Display or hide the component.
      */
-    isOpen?: boolean;
+    open?: boolean;
     /**
-     * Props to be passed to the Scrim component.
+     * Callback function triggered when open state changes.
      */
-    scrimProps?: Partial<ScrimProps>;
+    onOpenChange?: (open: boolean) => void;
     /**
      * Change background color palette
      */

package/dist-types/drawer/index.d.ts

@@ -1 +1,2 @@
 export * from "./Drawer";
+export * from "./useDrawer";

package/dist-types/drawer/useDrawer.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { UseFloatingUIProps } from "@salt-ds/core";
+export declare type UseDrawerProps = Partial<Pick<UseFloatingUIProps, "onOpenChange" | "open">>;
+export declare function useDrawer(props: UseDrawerProps): {
+    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
+    floating: (node: HTMLElement | null) => void;
+    context: {
+        x: number | null;
+        y: number | null;
+        placement: import("@floating-ui/react").Placement;
+        strategy: import("@floating-ui/react").Strategy;
+        middlewareData: import("@floating-ui/react").MiddlewareData;
+        update: () => void;
+        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        floating: (node: HTMLElement | null) => void;
+        isPositioned: boolean;
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+};

package/dist-types/index.d.ts

@@ -13,7 +13,6 @@ export * from "./combo-box";
 export * from "./combo-box-deprecated";
 export * from "./contact-details";
 export * from "./content-status";
-export * from "./control-label";
 export * from "./deck-item";
 export * from "./deck-layout";
 export * from "./dialog";
@@ -32,7 +31,6 @@ export * from "./list-next";
 export * from "./logo";
 export * from "./menu-button";
 export * from "./metric";
-export * from "./multiline-input";
 export * from "./nav-item";
 export * from "./overlay";
 export * from "./pagination";
@@ -53,6 +51,7 @@ export * from "./stepper-input";
 export * from "./switch";
 export * from "./tabs";
 export * from "./tabs-next";
+export * from "./toast-group";
 export * from "./tokenized-input";
 export * from "./toolbar";
 export * from "./tree";

package/dist-types/list-next/ListItemNext.d.ts

@@ -4,8 +4,13 @@ export interface ListItemNextProps extends HTMLAttributes<HTMLLIElement> {
      * If true, the particular list item in list will be disabled.
      */
     disabled?: boolean;
-    selected?: boolean;
+    /**
+     * List item id.
+     */
     id?: string;
+    /**
+     * List item value.
+     */
     value: string;
 }
 export declare const ListItemNext: import("react").ForwardRefExoticComponent<ListItemNextProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist-types/list-next/ListNext.d.ts

@@ -1,10 +1,15 @@
-import { HTMLAttributes } from "react";
-export interface ListNextProps extends HTMLAttributes<HTMLUListElement> {
+import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
+export interface ListNextProps extends Omit<ComponentPropsWithoutRef<"ul">, "onChange"> {
     /**
      * If true, all items in list will be disabled.
      */
     disabled?: boolean;
+    disableFocus?: boolean;
+    highlightedItem?: string;
     selected?: string;
+    onChange?: (event: SyntheticEvent, data: {
+        value: string;
+    }) => void;
     defaultSelected?: string;
 }
 export declare const ListNext: import("react").ForwardRefExoticComponent<ListNextProps & import("react").RefAttributes<HTMLUListElement>>;

package/dist-types/list-next/ListNextContext.d.ts

@@ -3,8 +3,10 @@ export interface ListNextContextValue {
     disabled?: boolean;
     id?: string;
     select: (event: SyntheticEvent<HTMLLIElement>) => void;
-    isSelected: (id: string) => boolean;
-    isFocused: (id: string) => boolean;
+    isSelected: (value: string) => boolean;
+    isFocused: (value: string) => boolean;
+    highlight: (event: SyntheticEvent<HTMLLIElement>) => void;
+    isHighlighted: (value: string) => boolean;
 }
 export declare const ListNextContext: import("react").Context<ListNextContextValue | undefined>;
 export declare function useListItem(): ListNextContextValue | undefined;

package/dist-types/list-next/useList.d.ts

@@ -1,9 +1,10 @@
-import { KeyboardEvent, RefObject, SyntheticEvent } from "react";
+import { FocusEvent, KeyboardEvent, RefObject, SyntheticEvent } from "react";
 interface UseListProps {
     /**
      * If true, all items in list will be disabled.
      */
     disabled?: boolean;
+    highlightedItem?: string;
     selected?: string;
     defaultSelected?: string;
     onChange?: (e: SyntheticEvent, data: {
@@ -12,18 +13,25 @@ interface UseListProps {
     id?: string;
     ref: RefObject<HTMLUListElement>;
 }
-export declare const useList: ({ disabled, selected: selectedProp, defaultSelected, onChange, id, ref, }: UseListProps) => {
-    focusHandler: () => void;
-    keyDownHandler: (event: KeyboardEvent<HTMLUListElement>) => void;
+export declare const useList: ({ disabled, highlightedItem: highLightedItemProp, selected: selectedProp, defaultSelected, onChange, id, ref, }: UseListProps) => {
+    focusHandler: (event: FocusEvent<HTMLUListElement>) => void;
+    keyDownHandler: (event: KeyboardEvent<HTMLElement>) => void;
     blurHandler: () => void;
-    mouseDownHandler: () => void;
+    mouseOverHandler: () => void;
     activeDescendant: string | undefined;
+    selectedItem: string | undefined;
+    highlightedItem: string | undefined;
+    setSelectedItem: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    setHighlightedItem: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     contextValue: {
         disabled: boolean;
         id: string | undefined;
         select: (event: SyntheticEvent<HTMLLIElement>) => void;
-        isSelected: (id: string) => boolean;
-        isFocused: (id: string | undefined) => boolean;
+        isSelected: (value: string) => boolean;
+        isFocused: (value: string) => boolean;
+        highlight: (event: SyntheticEvent<HTMLLIElement>) => void;
+        isHighlighted: (value: string) => boolean;
     };
+    focusVisibleRef: import("react").Ref<HTMLElement>;
 };
 export {};

package/dist-types/nav-item/NavItem.d.ts

@@ -1,17 +1,45 @@
-import { ComponentPropsWithoutRef, MouseEventHandler } from "react";
+import { ComponentPropsWithoutRef, MouseEventHandler, ComponentType, ReactNode } from "react";
+import { IconProps } from "@salt-ds/icons";
 export interface NavItemProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * Whether the nav item is active.
      */
     active?: boolean;
+    /**
+     * Whether the nav item has active children.
+     */
+    blurSelected?: boolean;
+    /**
+     * Whether the nav item is expanded.
+     */
     expanded?: boolean;
+    /**
+     * Level of nesting.
+     */
     level?: number;
     /**
      * The orientation of the nav item.
      */
     orientation?: "horizontal" | "vertical";
+    /**
+     * Whether the nav item is a parent with nested children.
+     */
     parent?: boolean;
+    /**
+     * Action to be triggered when the nav item is expanded.
+     */
     onExpand?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Href to be passed to the Link element.
+     */
     href?: string;
+    /**
+     * Icon component to be displayed next to the nav item label.
+     */
+    IconComponent?: ComponentType<IconProps> | null;
+    /**
+     * Badge component to be displayed next to the nav item label.
+     */
+    BadgeComponent?: ReactNode;
 }
 export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/progress/CircularProgress/CircularProgress.d.ts

@@ -1,5 +1,4 @@
-import { HTMLAttributes, ReactElement } from "react";
-import { InfoRendererProps } from "../LinearProgress/LinearProgress";
+import { HTMLAttributes } from "react";
 export interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * A label for accessibility
@@ -9,28 +8,15 @@ export interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {
      * The className(s) of the component
      */
     className?: string;
-    /**
-     * Disabled flag, true when the component is disabled.
-     */
-    disabled?: boolean;
     /**
      * The value of the max progress indicator.
      * Default value is 100.
      */
     max?: number;
-    /**
-     * Render props callback to render info panel.
-     * @param function({ value, unit, getValueProps })
-     */
-    renderInfo?: (props: Pick<InfoRendererProps<any, any>, "value" | "unit" | "getValueProps">) => ReactElement<InfoRendererProps<any, any>>;
     /**
      * If `true`, the info panel will be displayed.
      */
     showInfo?: boolean;
-    /**
-     * Default unit is`%`
-     */
-    unit?: string;
     /**
      * The value of the progress indicator.
      * Value between 0 and max.
@@ -39,11 +25,5 @@ export interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
  * Circular progress bar with an optional Info element, showing the current value
- * The default Info element can be rendered by setting `unit` and `value` props.
- * A custom Info element can be rendered using the `renderInfo` callback.
- * The render props callback is of the form
- * @param {string} unit the unit of the progress info
- * @param {number} value the value of the progress info
- * @param {function} getValueProps function callback that returns the value props
  */
 export declare const CircularProgress: import("react").ForwardRefExoticComponent<CircularProgressProps & import("react").RefAttributes<HTMLDivElement>>;