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

package/dist-es/tabs-next/TabNext.js

@@ -0,0 +1,79 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { forwardRef, useEffect } from 'react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './TabNext.css.js';
+import clsx from 'clsx';
+import { OverflowItem } from '@fluentui/react-overflow';
+import { useTabs } from './TabNextContext.js';
+
+const withBaseName = makePrefixer("saltTabNext");
+const TabNext = forwardRef(function Tab(props, ref) {
+  const {
+    children,
+    className,
+    disabled: disabledProp,
+    onClick,
+    onFocus,
+    value,
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-tab-next",
+    css: css_248z,
+    window: targetWindow
+  });
+  const {
+    isSelected,
+    select,
+    isFocusable,
+    setFocusable,
+    disabled: tabstripDisabled,
+    unregisterTab,
+    registerTab
+  } = useTabs();
+  const selected = isSelected(value);
+  const focusable = isFocusable(value);
+  const disabled = tabstripDisabled || disabledProp;
+  const handleClick = (event) => {
+    select(event);
+    onClick == null ? void 0 : onClick(event);
+  };
+  const handleFocus = (event) => {
+    setFocusable(value);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  useEffect(() => {
+    registerTab({ value, label: children });
+    return () => unregisterTab(value);
+  }, [children, registerTab, unregisterTab, value]);
+  return /* @__PURE__ */ jsx(OverflowItem, {
+    id: value,
+    priority: selected ? 2 : 1,
+    children: /* @__PURE__ */ jsx("div", {
+      className: withBaseName("wrapper"),
+      children: /* @__PURE__ */ jsx("button", {
+        className: clsx(withBaseName(), className),
+        "data-value": value,
+        "aria-selected": selected,
+        disabled,
+        value,
+        ref,
+        role: "tab",
+        onClick: handleClick,
+        onFocus: handleFocus,
+        tabIndex: focusable && !disabled ? 0 : -1,
+        ...rest,
+        children: /* @__PURE__ */ jsx("span", {
+          className: withBaseName("label"),
+          children
+        })
+      })
+    })
+  });
+});
+
+export { TabNext };
+//# sourceMappingURL=TabNext.js.map

package/dist-es/tabs-next/TabNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  forwardRef,\n  ReactElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  FocusEvent,\n  useEffect,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabCss from \"./TabNext.css\";\nimport clsx from \"clsx\";\nimport { OverflowItem } from \"@fluentui/react-overflow\";\nimport { useTabs } from \"./TabNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"button\"> {\n  /* Value prop is mandatory and must be unique in order for overflow to work. */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLButtonElement, TabNextProps>(function Tab(\n  props,\n  ref\n): ReactElement<TabNextProps> {\n  const {\n    children,\n    className,\n    disabled: disabledProp,\n    onClick,\n    onFocus,\n    value,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-next\",\n    css: tabCss,\n    window: targetWindow,\n  });\n  const {\n    isSelected,\n    select,\n    isFocusable,\n    setFocusable,\n    disabled: tabstripDisabled,\n    unregisterTab,\n    registerTab,\n  } = useTabs();\n  const selected = isSelected(value);\n  const focusable = isFocusable(value);\n  const disabled = tabstripDisabled || disabledProp;\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    select(event);\n    onClick?.(event);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusable(value);\n    onFocus?.(event);\n  };\n\n  useEffect(() => {\n    registerTab({ value, label: children });\n    return () => unregisterTab(value);\n  }, [children, registerTab, unregisterTab, value]);\n\n  return (\n    <OverflowItem id={value} priority={selected ? 2 : 1}>\n      <div className={withBaseName(\"wrapper\")}>\n        <button\n          className={clsx(withBaseName(), className)}\n          data-value={value}\n          aria-selected={selected}\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          role=\"tab\"\n          onClick={handleClick}\n          onFocus={handleFocus}\n          tabIndex={focusable && !disabled ? 0 : -1}\n          {...rest}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n        </button>\n      </div>\n    </OverflowItem>\n  );\n});\n"],"names":["tabCss"],"mappings":";;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAOxC,MAAM,OAAU,GAAA,UAAA,CAA4C,SAAS,GAAA,CAC1E,OACA,GAC4B,EAAA;AAC5B,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,OAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAU,EAAA,gBAAA;AAAA,IACV,aAAA;AAAA,IACA,WAAA;AAAA,MACE,OAAQ,EAAA,CAAA;AACZ,EAAM,MAAA,QAAA,GAAW,WAAW,KAAK,CAAA,CAAA;AACjC,EAAM,MAAA,SAAA,GAAY,YAAY,KAAK,CAAA,CAAA;AACnC,EAAA,MAAM,WAAW,gBAAoB,IAAA,YAAA,CAAA;AAErC,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AACZ,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,EAAE,KAAA,EAAO,KAAO,EAAA,QAAA,EAAU,CAAA,CAAA;AACtC,IAAO,OAAA,MAAM,cAAc,KAAK,CAAA,CAAA;AAAA,KAC/B,CAAC,QAAA,EAAU,WAAa,EAAA,aAAA,EAAe,KAAK,CAAC,CAAA,CAAA;AAEhD,EAAA,uBACG,GAAA,CAAA,YAAA,EAAA;AAAA,IAAa,EAAI,EAAA,KAAA;AAAA,IAAO,QAAA,EAAU,WAAW,CAAI,GAAA,CAAA;AAAA,IAChD,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,YAAY,EAAA,KAAA;AAAA,QACZ,eAAe,EAAA,QAAA;AAAA,QACf,QAAA;AAAA,QACA,KAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAK,EAAA,KAAA;AAAA,QACL,OAAS,EAAA,WAAA;AAAA,QACT,OAAS,EAAA,WAAA;AAAA,QACT,QAAU,EAAA,SAAA,IAAa,CAAC,QAAA,GAAW,CAAI,GAAA,CAAA,CAAA;AAAA,QACtC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAI,QAAA;AAAA,SAAS,CAAA;AAAA,OACpD,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/tabs-next/TabNextContext.js

@@ -0,0 +1,18 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const TabsContext = createContext("TabsContext", {
+  disabled: false,
+  select: () => void 0,
+  isSelected: () => false,
+  setFocusable: () => void 0,
+  isFocusable: () => false,
+  registerTab: () => void 0,
+  unregisterTab: () => void 0
+});
+function useTabs() {
+  return useContext(TabsContext);
+}
+
+export { TabsContext, useTabs };
+//# sourceMappingURL=TabNextContext.js.map

package/dist-es/tabs-next/TabNextContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNextContext.js","sources":["../src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { ReactNode, SyntheticEvent, useContext } from \"react\";\n\ntype TabValue = {\n  value: string;\n  label: ReactNode;\n};\n\nexport interface TabsContextValue {\n  disabled?: boolean;\n  select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isSelected: (id: string) => boolean;\n  setFocusable: (id: string) => void;\n  isFocusable: (id: string) => boolean;\n  registerTab: (tab: TabValue) => void;\n  unregisterTab: (id: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextValue>(\"TabsContext\", {\n  disabled: false,\n  select: () => undefined,\n  isSelected: () => false,\n  setFocusable: () => undefined,\n  isFocusable: () => false,\n  registerTab: () => undefined,\n  unregisterTab: () => undefined,\n});\n\nexport function useTabs() {\n  return useContext(TabsContext);\n}\n"],"names":[],"mappings":";;;AAkBa,MAAA,WAAA,GAAc,cAAgC,aAAe,EAAA;AAAA,EACxE,QAAU,EAAA,KAAA;AAAA,EACV,QAAQ,MAAM,KAAA,CAAA;AAAA,EACd,YAAY,MAAM,KAAA;AAAA,EAClB,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,aAAa,MAAM,KAAA;AAAA,EACnB,aAAa,MAAM,KAAA,CAAA;AAAA,EACnB,eAAe,MAAM,KAAA,CAAA;AACvB,CAAC,EAAA;AAEM,SAAS,OAAU,GAAA;AACxB,EAAA,OAAO,WAAW,WAAW,CAAA,CAAA;AAC/B;;;;"}

package/dist-es/tabs-next/TabstripNext.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n}\n\n.saltTabstripNext::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  background: var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper {\n  padding-right: var(--salt-spacing-50);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TabstripNext.css.js.map

package/dist-es/tabs-next/TabstripNext.css.js.map

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

package/dist-es/tabs-next/TabstripNext.js

@@ -0,0 +1,172 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
+import clsx from 'clsx';
+import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { Overflow } from '@fluentui/react-overflow';
+import { OverflowMenu } from './OverflowMenu.js';
+import css_248z from './TabstripNext.css.js';
+import { TabsContext } from './TabNextContext.js';
+
+const withBaseName = makePrefixer("saltTabstripNext");
+const TabstripNext = forwardRef(
+  function TabstripNext2(props, ref) {
+    const {
+      children,
+      className,
+      disabled,
+      selected: selectedProp,
+      defaultSelected,
+      onChange,
+      onKeyDown,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tabstrip-next",
+      css: css_248z,
+      window: targetWindow
+    });
+    const tabstripRef = useRef(null);
+    const handleRef = useForkRef(tabstripRef, ref);
+    const [selected, setSelected] = useControlled({
+      controlled: selectedProp,
+      default: defaultSelected,
+      name: "TabstripNext",
+      state: "selected"
+    });
+    const [focusable, setFocusableState] = useState(
+      selected
+    );
+    const [overflowOpen, setOverflowOpen] = useState(false);
+    const select = useCallback(
+      (event) => {
+        const newValue = event.currentTarget.value;
+        setSelected(newValue);
+        if (selected !== newValue) {
+          onChange == null ? void 0 : onChange(event, { value: newValue });
+        }
+      },
+      [onChange, selected, setSelected]
+    );
+    const isSelected = useCallback(
+      (id) => {
+        return selected === id;
+      },
+      [selected]
+    );
+    const setFocusable = useCallback((id) => {
+      setFocusableState(id);
+    }, []);
+    const isFocusable = useCallback(
+      (id) => {
+        return focusable === id || !focusable;
+      },
+      [focusable]
+    );
+    const [tabList, setTabList] = useState([]);
+    const registerTab = useCallback((tab) => {
+      setTabList((list) => list.concat([tab]));
+    }, []);
+    const unregisterTab = useCallback((id) => {
+      setTabList((list) => list.filter((item) => item.value !== id));
+    }, []);
+    const handleKeyDown = (event) => {
+      var _a, _b, _c, _d, _e, _f;
+      if (overflowOpen)
+        return;
+      const elements = Array.from(
+        (_b = (_a = tabstripRef.current) == null ? void 0 : _a.querySelectorAll(
+          `div:not([data-overflowing]) > [role="tab"]:not([disabled])`
+        )) != null ? _b : []
+      );
+      const currentIndex = elements.findIndex(
+        (element) => element === (targetWindow == null ? void 0 : targetWindow.document.activeElement)
+      );
+      if (currentIndex < 0)
+        return;
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          (_c = elements[Math.min(currentIndex + 1, elements.length)]) == null ? void 0 : _c.focus();
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          (_d = elements[Math.max(0, currentIndex - 1)]) == null ? void 0 : _d.focus();
+          break;
+        case "Home":
+          (_e = elements[0]) == null ? void 0 : _e.focus();
+          break;
+        case "End":
+          (_f = elements[elements.length - 1]) == null ? void 0 : _f.focus();
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleOverflowItemClick = (event, item) => {
+      if (item) {
+        setSelected(item.value);
+        requestAnimationFrame(() => {
+          var _a;
+          const element = (_a = tabstripRef.current) == null ? void 0 : _a.querySelector(
+            `[value="${item.value}"]`
+          );
+          if (element instanceof HTMLElement) {
+            element == null ? void 0 : element.focus();
+          }
+        });
+        if (selected !== item.value) {
+          onChange == null ? void 0 : onChange(event, { value: item.value });
+        }
+      }
+    };
+    const handleOverflowOpenChange = (isOpen) => {
+      setOverflowOpen(isOpen);
+    };
+    const value = useMemo(
+      () => ({
+        select,
+        isSelected,
+        setFocusable,
+        isFocusable,
+        registerTab,
+        unregisterTab
+      }),
+      [
+        select,
+        isSelected,
+        setFocusable,
+        isFocusable,
+        registerTab,
+        unregisterTab
+      ]
+    );
+    return /* @__PURE__ */ jsx(TabsContext.Provider, {
+      value,
+      children: /* @__PURE__ */ jsx(Overflow, {
+        ref: handleRef,
+        children: /* @__PURE__ */ jsxs("div", {
+          role: "tablist",
+          className: clsx(
+            withBaseName(),
+            withBaseName("horizontal"),
+            className
+          ),
+          onKeyDown: handleKeyDown,
+          ...rest,
+          children: [
+            children,
+            /* @__PURE__ */ jsx(OverflowMenu, {
+              tabs: tabList,
+              onOpenChange: handleOverflowOpenChange,
+              onSelectionChange: handleOverflowItemClick
+            })
+          ]
+        })
+      })
+    });
+  }
+);
+
+export { TabstripNext };
+//# sourceMappingURL=TabstripNext.js.map

package/dist-es/tabs-next/TabstripNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabstripNext.js","sources":["../src/tabs-next/TabstripNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport clsx from \"clsx\";\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  SyntheticEvent,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Overflow } from \"@fluentui/react-overflow\";\nimport { OverflowMenu } from \"./OverflowMenu\";\nimport tabstripCss from \"./TabstripNext.css\";\nimport { TabsContext } from \"./TabNextContext\";\nimport { SelectionChangeHandler } from \"../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltTabstripNext\");\n\nexport interface TabstripNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  disabled?: boolean;\n  /* Value for the uncontrolled version. */\n  selected?: string;\n  /* Callback for the controlled version. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  /* Initial value for the uncontrolled version. */\n  defaultSelected?: string;\n}\n\ntype TabValue = {\n  value: string;\n  label: ReactNode;\n};\n\nexport const TabstripNext = forwardRef<HTMLDivElement, TabstripNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      selected: selectedProp,\n      defaultSelected,\n      onChange,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabstrip-next\",\n      css: tabstripCss,\n      window: targetWindow,\n    });\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n\n    const [selected, setSelected] = useControlled({\n      controlled: selectedProp,\n      default: defaultSelected,\n      name: \"TabstripNext\",\n      state: \"selected\",\n    });\n    const [focusable, setFocusableState] = useState<string | undefined>(\n      selected\n    );\n    const [overflowOpen, setOverflowOpen] = useState(false);\n\n    const select = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        const newValue = event.currentTarget.value;\n        setSelected(newValue);\n        if (selected !== newValue) {\n          onChange?.(event, { value: newValue });\n        }\n      },\n      [onChange, selected, setSelected]\n    );\n\n    const isSelected = useCallback(\n      (id: string | undefined) => {\n        return selected === id;\n      },\n      [selected]\n    );\n\n    const setFocusable = useCallback((id: string | undefined) => {\n      setFocusableState(id);\n    }, []);\n\n    const isFocusable = useCallback(\n      (id: string | undefined) => {\n        return focusable === id || !focusable;\n      },\n      [focusable]\n    );\n\n    const [tabList, setTabList] = useState<TabValue[]>([]);\n    const registerTab = useCallback((tab: TabValue) => {\n      setTabList((list) => list.concat([tab]));\n    }, []);\n\n    const unregisterTab = useCallback((id: string) => {\n      setTabList((list) => list.filter((item) => item.value !== id));\n    }, []);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (overflowOpen) return;\n\n      const elements: HTMLElement[] = Array.from(\n        tabstripRef.current?.querySelectorAll(\n          `div:not([data-overflowing]) > [role=\"tab\"]:not([disabled])`\n        ) ?? []\n      );\n\n      const currentIndex = elements.findIndex(\n        (element) => element === targetWindow?.document.activeElement\n      );\n\n      if (currentIndex < 0) return;\n\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          elements[Math.min(currentIndex + 1, elements.length)]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          elements[Math.max(0, currentIndex - 1)]?.focus();\n          break;\n        case \"Home\":\n          elements[0]?.focus();\n          break;\n        case \"End\":\n          elements[elements.length - 1]?.focus();\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleOverflowItemClick: SelectionChangeHandler<TabValue> = (\n      event,\n      item\n    ) => {\n      if (item) {\n        setSelected(item.value);\n        requestAnimationFrame(() => {\n          const element = tabstripRef.current?.querySelector(\n            `[value=\"${item.value}\"]`\n          );\n          if (element instanceof HTMLElement) {\n            element?.focus();\n          }\n        });\n        if (selected !== item.value) {\n          onChange?.(event, { value: item.value });\n        }\n      }\n    };\n\n    const handleOverflowOpenChange = (isOpen: boolean) => {\n      setOverflowOpen(isOpen);\n    };\n\n    const value = useMemo(\n      () => ({\n        select,\n        isSelected,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n      }),\n      [\n        select,\n        isSelected,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n      ]\n    );\n\n    return (\n      <TabsContext.Provider value={value}>\n        <Overflow ref={handleRef}>\n          <div\n            role=\"tablist\"\n            className={clsx(\n              withBaseName(),\n              withBaseName(\"horizontal\"),\n              className\n            )}\n            onKeyDown={handleKeyDown}\n            {...rest}\n          >\n            {children}\n            <OverflowMenu\n              tabs={tabList}\n              onOpenChange={handleOverflowOpenChange}\n              onSelectionChange={handleOverflowItemClick}\n            />\n          </div>\n        </Overflow>\n      </TabsContext.Provider>\n    );\n  }\n);\n"],"names":["TabstripNext","tabstripCss"],"mappings":"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"}

package/dist-es/toggle-button/ToggleButton.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltToggleButton {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  display: inline-flex;\n  background: var(--salt-actionable-secondary-background);\n  border: 0 solid transparent;\n  border-radius: 0;\n  white-space: pre;\n  height: var(--salt-size-base);\n  color: var(--salt-actionable-secondary-foreground);\n  text-transform: var(--salt-actionable-textTransform);\n  font-weight: var(--salt-actionable-secondary-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-actionable-textAlign);\n  letter-spacing: var(--salt-actionable-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  padding-inline: var(--salt-spacing-100);\n  gap: var(--salt-spacing-50);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltToggleButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton:focus-visible {\n  outline: var(--salt-focused-outline);\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton:disabled {\n  background: var(--salt-actionable-secondary-background-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  color: var(--salt-actionable-secondary-foreground-disabled);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ToggleButton.css.js.map

package/dist-es/toggle-button/ToggleButton.css.js.map

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

package/dist-es/toggle-button/ToggleButton.js

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import '../toggle-button-group/ToggleButtonGroup.js';
+import { useToggleButtonGroup } from '../toggle-button-group/ToggleButtonGroupContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './ToggleButton.css.js';
+
+const withBaseName = makePrefixer("saltToggleButton");
+const ToggleButton = forwardRef(
+  function ToggleButton2(props, ref) {
+    const {
+      children,
+      className,
+      disabled: disabledProp,
+      value,
+      onClick,
+      onFocus,
+      onChange,
+      selected: selectedProp,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-toggle-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    const buttonRef = useRef(null);
+    const handleRef = useForkRef(ref, buttonRef);
+    const toggleButtonGroup = useToggleButtonGroup();
+    const toggleButtonGroupSelected = toggleButtonGroup ? toggleButtonGroup.isSelected(value) : selectedProp;
+    const focusable = toggleButtonGroup ? toggleButtonGroup == null ? void 0 : toggleButtonGroup.isFocused(value) : true;
+    const disabled = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.disabled) || disabledProp;
+    const [selected, setSelected] = useControlled({
+      controlled: toggleButtonGroupSelected,
+      default: Boolean(selectedProp),
+      name: "ToggleButton",
+      state: "selected"
+    });
+    const handleClick = (event) => {
+      toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event);
+      setSelected(!selected);
+      onChange == null ? void 0 : onChange(event);
+      onClick == null ? void 0 : onClick(event);
+    };
+    const handleFocus = (event) => {
+      toggleButtonGroup == null ? void 0 : toggleButtonGroup.focus(value);
+      onFocus == null ? void 0 : onFocus(event);
+    };
+    const ariaChecked = selected && !disabled;
+    return /* @__PURE__ */ jsx("button", {
+      "aria-checked": ariaChecked,
+      className: clsx(withBaseName(), className),
+      disabled,
+      role: toggleButtonGroup ? "radio" : "checkbox",
+      ref: handleRef,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      tabIndex: focusable && !disabled ? 0 : -1,
+      value,
+      ...rest,
+      children
+    });
+  }
+);
+
+export { ToggleButton };
+//# sourceMappingURL=ToggleButton.js.map

package/dist-es/toggle-button/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  forwardRef,\n  useRef,\n  MouseEvent,\n  FocusEvent,\n} from \"react\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentProps<\"button\"> {\n  selected?: boolean;\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      selected: selectedProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(selectedProp),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.select(event);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const ariaChecked = selected && !disabled;\n\n    return (\n      <button\n        aria-checked={ariaChecked}\n        className={clsx(withBaseName(), className)}\n        disabled={disabled}\n        role={toggleButtonGroup ? \"radio\" : \"checkbox\"}\n        ref={handleRef}\n        onClick={handleClick}\n        onFocus={handleFocus}\n        tabIndex={focusable && !disabled ? 0 : -1}\n        value={value}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"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"}

package/dist-es/toggle-button-group/ToggleButtonGroup.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltToggleButtonGroup {\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ToggleButtonGroup.css.js.map

package/dist-es/toggle-button-group/ToggleButtonGroup.css.js.map

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

package/dist-es/toggle-button-group/ToggleButtonGroup.js

@@ -0,0 +1,107 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
+import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { ToggleButtonGroupContext } from './ToggleButtonGroupContext.js';
+import css_248z from './ToggleButtonGroup.css.js';
+
+const withBaseName = makePrefixer("saltToggleButtonGroup");
+const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
+  const {
+    children,
+    className,
+    value: valueProp,
+    defaultValue,
+    disabled,
+    onChange,
+    onKeyDown,
+    orientation = "horizontal",
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-toggle-button-group",
+    css: css_248z,
+    window: targetWindow
+  });
+  const groupRef = useRef(null);
+  const handleRef = useForkRef(ref, groupRef);
+  const [value, setValue] = useControlled({
+    default: defaultValue,
+    controlled: valueProp,
+    name: "ToggleButtonGroup",
+    state: "value"
+  });
+  const [focused, setFocused] = useState(value);
+  const select = useCallback(
+    (event) => {
+      const newValue = event.currentTarget.value;
+      setValue(newValue);
+      if (value !== newValue) {
+        onChange == null ? void 0 : onChange(event);
+      }
+    },
+    [onChange, value, setValue]
+  );
+  const isSelected = useCallback(
+    (id) => {
+      return value === id;
+    },
+    [value]
+  );
+  const focus = (id) => {
+    setFocused(id);
+  };
+  const isFocused = useCallback(
+    (id) => {
+      return focused === id || !focused;
+    },
+    [focused]
+  );
+  const contextValue = useMemo(
+    () => ({
+      select,
+      isSelected,
+      focus,
+      isFocused,
+      disabled
+    }),
+    [select, isSelected, isFocused, disabled]
+  );
+  const handleKeyDown = (event) => {
+    var _a, _b, _c, _d;
+    const elements = Array.from(
+      (_b = (_a = groupRef.current) == null ? void 0 : _a.querySelectorAll("button:not([disabled])")) != null ? _b : []
+    );
+    const currentIndex = elements.findIndex(
+      (element) => element === document.activeElement
+    );
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        (_c = elements[(currentIndex + 1) % elements.length]) == null ? void 0 : _c.focus();
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        (_d = elements[(currentIndex - 1 + elements.length) % elements.length]) == null ? void 0 : _d.focus();
+        break;
+    }
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  };
+  return /* @__PURE__ */ jsx(ToggleButtonGroupContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsx("div", {
+      className: clsx(withBaseName(), withBaseName(orientation), className),
+      role: "radiogroup",
+      ref: handleRef,
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children
+    })
+  });
+});
+
+export { ToggleButtonGroup };
+//# sourceMappingURL=ToggleButtonGroup.js.map

package/dist-es/toggle-button-group/ToggleButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { ToggleButtonGroupContext } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: string | ReadonlyArray<string> | number | undefined;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: string | ReadonlyArray<string> | number | undefined;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<\n    string | ReadonlyArray<string> | number | undefined\n  >(value);\n\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newValue = event.currentTarget.value;\n      setValue(newValue);\n      if (value !== newValue) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value, setValue]\n  );\n\n  const isSelected = useCallback(\n    (id: string | ReadonlyArray<string> | number | undefined) => {\n      return value === id;\n    },\n    [value]\n  );\n\n  const focus = (id: string | ReadonlyArray<string> | number | undefined) => {\n    setFocused(id);\n  };\n\n  const isFocused = useCallback(\n    (id: string | ReadonlyArray<string> | number | undefined) => {\n      return focused === id || !focused;\n    },\n    [focused]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      focus,\n      isFocused,\n      disabled,\n    }),\n    [select, isSelected, isFocused, disabled]\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n    );\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        elements[(currentIndex + 1) % elements.length]?.focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        elements[\n          (currentIndex - 1 + elements.length) % elements.length\n        ]?.focus();\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), withBaseName(orientation), className)}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}

package/dist-es/toggle-button-group/ToggleButtonGroupContext.js

@@ -0,0 +1,10 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const ToggleButtonGroupContext = createContext("ToggleButtonGroupContext", void 0);
+function useToggleButtonGroup() {
+  return useContext(ToggleButtonGroupContext);
+}
+
+export { ToggleButtonGroupContext, useToggleButtonGroup };
+//# sourceMappingURL=ToggleButtonGroupContext.js.map

package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\nexport interface ToggleButtonGroupContextValue {\n  disabled?: boolean;\n  select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isSelected: (\n    id: string | ReadonlyArray<string> | number | undefined\n  ) => boolean;\n  focus: (id: string | ReadonlyArray<string> | number | undefined) => void;\n  isFocused: (\n    id: string | ReadonlyArray<string> | number | undefined\n  ) => boolean;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n  return useContext(ToggleButtonGroupContext);\n}\n"],"names":[],"mappings":";;;AAea,MAAA,wBAAA,GAA2B,aAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA,EAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA,CAAA;AAC5C;;;;"}

package/dist-es/tokenized-input/TokenizedInput.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to root component (TokenizedInput) */\n.salt-density-medium {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n.salt-density-touch {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-low {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-high {\n  --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n\n.saltTokenizedInput {\n  --tokenizedInput-spacing: var(--salt-size-unit);\n  --tokenizedInput-height: var(--salt-size-base);\n}\n\n.saltTokenizedInput {\n  display: inline-flex;\n  justify-content: space-between;\n  min-width: 8em; /* same min-width as Input component */\n  width: 100%;\n}\n\n/* Styles applied to root component on hover state  */\n.saltTokenizedInput:hover {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component on hover state if `disabled={true}` */\n.saltTokenizedInput.saltTokenizedInput-disabled:hover {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to container of pills */\n.saltTokenizedInput-pillGroup {\n  align-content: flex-start;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  min-height: var(--tokenizedInput-height);\n  padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltTokenizedInput-disabled {\n  cursor: var(--salt-editable-cursor-disabled);\n  opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-foreground));\n}\n\n/* Styles applied to root component if `focused={true}` */\n.saltTokenizedInput-focused {\n  outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));\n}\n\n/* Styles applied to root component if `expanded={true}` */\n.saltTokenizedInput-expanded {\n  height: auto;\n\n  /* Pill CSS API */\n  --saltPill-maxWidth: calc(100px - var(--salt-size-unit));\n}\n\n/* Styles applied to Input and Clear Button if `expanded={false}` */\n.saltTokenizedInput-hidden,\n.saltTokenizedInput-input.saltTokenizedInput-hidden,\n.saltButton.saltTokenizedInput-hidden {\n  display: none;\n}\n\n/**\n  Styles applied to inner Input component\n  Used to be .inputRoot\n**/\n.saltInputLegacy.saltTokenizedInput-input {\n  align-items: flex-start;\n  cursor: text;\n  flex-grow: 1;\n  padding: 0;\n  outline: none;\n  width: auto;\n  height: auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* Styles applied to Clear Button  */\n.saltTokenizedInput-clearButton {\n  flex: none;\n  align-self: flex-end;\n}\n\n/* Styles applied to Expand Button  */\n.saltTokenizedInput-expandButton {\n  padding: 0 calc(var(--tokenizedInput-spacing) / 4);\n}\n\n/* Styles applied to root component and pill container if `expanded={true}` */\n.saltTokenizedInput-expanded,\n.saltTokenizedInput-expanded .saltTokenizedInput-pillGroup {\n  height: auto;\n}\n\n/* TODO: Adjust specificity of .InputPill depending on styling solution.\n  This is an example of internal sub-component naming convension. */\n.saltTokenizedInput .saltInputPill,\n.saltTokenizedInput-expandButton,\n.saltInputLegacy.saltTokenizedInput-input,\n.saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input {\n  margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n  height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n}\n\n/* Styles applied to inner Pills */\n.saltTokenizedInput .saltInputPill {\n  min-width: 0;\n  margin-right: var(--tokenizedInput-gutter-size);\n  --saltPill-maxWidth: 100px;\n}\n\n.saltTokenizedInput .saltInputPill > * {\n  min-width: 0;\n}\n\n/* Styles applied to a Pill if `expanded={false} && index >= firstHiddenIndex` */\n.saltTokenizedInput .saltInputPill.saltInputPill-hidden {\n  display: none;\n}\n\n/* Styles applied to the last visible Pill when all visible */\n.saltTokenizedInput .saltInputPill-pillLastVisible {\n  margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin));\n}\n\n/* Styles applied to a Pill when active */\n.saltTokenizedInput .saltInputPill-pillActive {\n  background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));\n}\n\n/* Styles applied to a Pills delete icon */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {\n  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));\n}\n\n/* Styles applied to a Pills delete button */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {\n  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));\n  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TokenizedInput.css.js.map

package/dist-es/tokenized-input/TokenizedInput.css.js.map

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

package/dist-es/tokenized-input/TokenizedInput.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useForkRef } from '@salt-ds/core';
+import { forwardRef } from 'react';
+import { TokenizedInputBase } from './TokenizedInputBase.js';
+import { useTokenizedInput } from './useTokenizedInput.js';
+
+const TokenizedInput = forwardRef(function TokenizedInput2(props, ref) {
+  const { inputRef: inputRefProp, ...restProps } = props;
+  const { inputRef, helpers, inputProps } = useTokenizedInput(restProps);
+  return /* @__PURE__ */ jsx(TokenizedInputBase, {
+    helpers,
+    inputRef: useForkRef(inputRef, inputRefProp),
+    ref,
+    ...inputProps
+  });
+});
+
+export { TokenizedInput };
+//# sourceMappingURL=TokenizedInput.js.map

package/dist-es/tokenized-input/TokenizedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenizedInput.js","sources":["../src/tokenized-input/TokenizedInput.tsx"],"sourcesContent":["import { useForkRef, UseTooltipProps } from \"@salt-ds/core\";\nimport { ComponentType, ForwardedRef, forwardRef } from \"react\";\nimport {\n  TokenizedInputBase,\n  TokenizedInputBaseProps,\n} from \"./TokenizedInputBase\";\nimport { useTokenizedInput } from \"./useTokenizedInput\";\n\nexport type StringToItem<Item> = (\n  selectedItems: Array<Item>,\n  value: string\n) => Item | null | undefined;\n\nexport type ChangeHandler<Item> = (selectedItems: Item[] | undefined) => void;\n\nexport interface TokenizedInputProps<Item>\n  extends Omit<\n    TokenizedInputBaseProps<Item>,\n    | \"activeIndices\"\n    | \"focused\"\n    | \"highlightedIndex\"\n    | \"helpers\"\n    | \"onRemoveItem\"\n  > {\n  Tooltip?: ComponentType;\n  delimiter?: string | Array<string>;\n  disableAddOnBlur?: boolean;\n  initialSelectedItems?: Array<Item>;\n  onChange?: ChangeHandler<Item>;\n  onCollapse?: () => void;\n  onExpand?: () => void;\n  stringToItem?: StringToItem<Item>;\n  tooltipEnterDelay?: UseTooltipProps[\"enterDelay\"];\n  tooltipLeaveDelay?: UseTooltipProps[\"leaveDelay\"];\n  tooltipPlacement?: UseTooltipProps[\"placement\"];\n}\n\nexport const TokenizedInput = forwardRef(function TokenizedInput<Item>(\n  props: TokenizedInputProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const { inputRef: inputRefProp, ...restProps } = props;\n\n  const { inputRef, helpers, inputProps } = useTokenizedInput(restProps);\n\n  return (\n    <TokenizedInputBase\n      helpers={helpers}\n      inputRef={useForkRef(inputRef, inputRefProp)}\n      ref={ref}\n      {...inputProps}\n    />\n  );\n});\n"],"names":["TokenizedInput"],"mappings":";;;;;;AAqCO,MAAM,cAAiB,GAAA,UAAA,CAAW,SAASA,eAAAA,CAChD,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,YAAiB,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEjD,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,UAAW,EAAA,GAAI,kBAAkB,SAAS,CAAA,CAAA;AAErE,EAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,IACC,OAAA;AAAA,IACA,QAAA,EAAU,UAAW,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,IAC3C,GAAA;AAAA,IACC,GAAG,UAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}