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

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer, Tooltip } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  SyntheticEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ToggleButtonGroupContext } from \"./internal/ToggleButtonGroupContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport type ToggleButtonToggleEventHandler = (\n  event: SyntheticEvent<HTMLButtonElement>,\n  toggled: boolean\n) => void;\n\nexport interface ToggleButtonProps extends ButtonProps {\n  \"aria-label\"?: string;\n  \"data-button-index\"?: number;\n  toggled?: boolean;\n  tooltipText?: string;\n  disableTooltip?: boolean;\n  onToggle?: ToggleButtonToggleEventHandler;\n}\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  (props, ref) => {\n    const {\n      \"aria-label\": ariaLabel,\n      className,\n      onToggle,\n      toggled = false,\n      tooltipText = ariaLabel,\n      variant: variantProp = \"primary\",\n      disabled: disabledProp,\n      disableTooltip: disableTooltipProp,\n      focusableWhenDisabled: focusableWhenDisabledProp,\n      \"data-button-index\": index,\n      ...restProps\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const [iconOnly, setIconOnly] = useState(false);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const groupContext = useContext(ToggleButtonGroupContext);\n\n    const handleIconOnlyButton = useCallback(\n      (button: HTMLButtonElement | null) => {\n        setIconOnly(\n          button?.querySelector(\".saltIcon\") != null &&\n            button?.childElementCount === 1\n        );\n      },\n      [setIconOnly]\n    );\n\n    const {\n      register,\n      unregister,\n      disabled = disabledProp,\n      disableTooltip = disableTooltipProp,\n      focusableWhenDisabled = focusableWhenDisabledProp,\n      orientation = \"horizontal\",\n      variant = variantProp,\n    } = groupContext || {};\n\n    useEffect(() => {\n      if (\n        index !== undefined &&\n        register &&\n        unregister &&\n        (!disabled || focusableWhenDisabled)\n      ) {\n        register(buttonRef.current, index);\n\n        return function cleanup() {\n          unregister(index);\n        };\n      }\n    }, [index, disabled, focusableWhenDisabled, register, unregister]);\n\n    const handleToggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      if (!disabled) {\n        onToggle?.(event, !toggled);\n      }\n    };\n\n    const tabIndex = toggled && !disabled ? 0 : -1;\n\n    return (\n      <Tooltip\n        content={tooltipText}\n        disabled={disableTooltip}\n        placement={orientation === \"horizontal\" ? \"bottom\" : \"right\"}\n      >\n        <Button\n          ref={handleIconOnlyButton}\n          aria-checked={toggled}\n          aria-label={ariaLabel}\n          aria-posinset={index !== undefined ? index + 1 : undefined}\n          className={clsx(\n            withBaseName(),\n            withBaseName(orientation),\n            {\n              [withBaseName(\"primary\")]: variant === \"primary\",\n              [withBaseName(\"cta\")]: variant === \"cta\",\n              [withBaseName(\"secondary\")]: variant === \"secondary\",\n              [withBaseName(\"toggled\")]: toggled,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"iconOnly\")]: iconOnly,\n            },\n            className\n          )}\n          onClick={handleToggle}\n          disabled={disabled}\n          focusableWhenDisabled={focusableWhenDisabled}\n          role={groupContext ? \"radio\" : \"checkbox\"}\n          tabIndex={groupContext ? tabIndex : undefined}\n          variant={variant}\n          {...restProps}\n        />\n      </Tooltip>\n    );\n  }\n);\n"],"names":["toggleButtonCss"],"mappings":"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"}
+{"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.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-types/dropdown/useDropdown.d.ts

@@ -8,4 +8,4 @@ export interface DropdownListHookResult<Item, Selection extends SelectionStrateg
     onOpenChange: any;
     triggerLabel?: string;
 }
-export declare const useDropdown: <Item, Selection_1 extends SelectionStrategy = "default">({ collectionHook, defaultHighlightedIndex: defaultHighlightedIndexProp, defaultIsOpen, defaultSelected, highlightedIndex: highlightedIndexProp, isOpen: isOpenProp, itemToString, onHighlight, onOpenChange, onSelectionChange, selected, selectionStrategy, }: DropdownListHookProps<Item, Selection_1>) => DropdownListHookResult<Item, Selection_1>;
+export declare const useDropdown: <Item, Selection_1 extends SelectionStrategy = "default">({ collectionHook, defaultHighlightedIndex: defaultHighlightedIndexProp, defaultIsOpen, defaultSelected, highlightedIndex: highlightedIndexProp, isOpen: isOpenProp, itemToString, onHighlight, onOpenChange, onSelectionChange, onSelect, selected, selectionStrategy, }: DropdownListHookProps<Item, Selection_1>) => DropdownListHookResult<Item, Selection_1>;

package/dist-types/index.d.ts

@@ -28,6 +28,7 @@ export * from "./formatted-input";
 export { InputLegacy as Input, type InputLegacyProps as InputProps, StaticInputAdornment, } from "./input-legacy";
 export * from "./layer-layout";
 export * from "./list";
+export * from "./list-next";
 export * from "./logo";
 export * from "./menu-button";
 export * from "./metric";
@@ -48,7 +49,9 @@ export * from "./slider";
 export * from "./stepper-input";
 export * from "./switch";
 export * from "./tabs";
+export * from "./tabs-next";
 export * from "./toggle-button";
+export * from "./toggle-button-group";
 export * from "./tokenized-input";
 export * from "./toolbar";
 export * from "./tree";

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

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

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

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from "react";
+export interface ListNextProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * If true, all items in list will be disabled.
+     */
+    disabled?: boolean;
+    selected?: string;
+    defaultSelected?: string;
+}
+export declare const ListNext: import("react").ForwardRefExoticComponent<ListNextProps & import("react").RefAttributes<HTMLUListElement>>;

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

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

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

@@ -0,0 +1,2 @@
+export * from "./ListNext";
+export * from "./ListItemNext";

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

@@ -0,0 +1,29 @@
+import { KeyboardEvent, RefObject, SyntheticEvent } from "react";
+interface UseListProps {
+    /**
+     * If true, all items in list will be disabled.
+     */
+    disabled?: boolean;
+    selected?: string;
+    defaultSelected?: string;
+    onChange?: (e: SyntheticEvent, data: {
+        value: string;
+    }) => void;
+    id?: string;
+    ref: RefObject<HTMLUListElement>;
+}
+export declare const useList: ({ disabled, selected: selectedProp, defaultSelected, onChange, id, ref, }: UseListProps) => {
+    focusHandler: () => void;
+    keyDownHandler: (event: KeyboardEvent<HTMLUListElement>) => void;
+    blurHandler: () => void;
+    mouseDownHandler: () => void;
+    activeDescendant: string | undefined;
+    contextValue: {
+        disabled: boolean;
+        id: string | undefined;
+        select: (event: SyntheticEvent<HTMLLIElement>) => void;
+        isSelected: (id: string) => boolean;
+        isFocused: (id: string | undefined) => boolean;
+    };
+};
+export {};

package/dist-types/logo/Logo.d.ts

@@ -1,31 +1,3 @@
-import { ComponentPropsWithoutRef, ComponentType } from "react";
-import { LogoTitleProps } from "./internal/LogoTitle";
-export interface LogoProps extends ComponentPropsWithoutRef<"span"> {
-    /**
-     * Used to provide application title
-     */
-    appTitle?: string;
-    /**
-     * If `true`, the logo will be compact;
-     */
-    compact?: boolean;
-    /**
-     * Props passed to the Logo.
-     */
-    ImageProps?: Partial<ComponentPropsWithoutRef<"img">>;
-    /**
-     * Custom Component to render the logo image.
-     * e.g. if a custom renderer instead of static image using `src` prop.
-     */
-    LogoImageComponent?: ComponentType<Partial<ComponentPropsWithoutRef<"img">>>;
-    /**
-     * Image src for logo.
-     */
-    src?: string;
-    /**
-     * Props passed to the Application Title if used.
-     * If using a custom image then ImageProps.alt should be set to include a screen reader alternative text.
-     */
-    TitleProps?: Omit<Partial<LogoTitleProps>, "label">;
-}
-export declare const Logo: import("react").ForwardRefExoticComponent<LogoProps & import("react").RefAttributes<HTMLSpanElement>>;
+import { ComponentPropsWithoutRef } from "react";
+export declare type LogoProps = ComponentPropsWithoutRef<"span">;
+export declare const Logo: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/logo/LogoImage.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface LogoImageProps extends Omit<ComponentPropsWithoutRef<"img">, "alt"> {
+    alt: string;
+}
+export declare const LogoImage: import("react").ForwardRefExoticComponent<LogoImageProps & import("react").RefAttributes<HTMLImageElement>>;

package/dist-types/logo/LogoSeparator.d.ts

@@ -0,0 +1,3 @@
+import { ComponentPropsWithoutRef } from "react";
+export declare type LogoSeparatorProps = ComponentPropsWithoutRef<"span">;
+export declare const LogoSeparator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;

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

@@ -1 +1,3 @@
 export * from "./Logo";
+export * from "./LogoImage";
+export * from "./LogoSeparator";

package/dist-types/tabs-next/OverflowMenu.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { DropdownProps } from "../dropdown";
+declare type TabValue = {
+    value: string;
+    label: ReactNode;
+};
+export interface OverflowMenuProps extends DropdownProps<TabValue> {
+    tabs: TabValue[];
+}
+export declare const OverflowMenu: import("react").ForwardRefExoticComponent<OverflowMenuProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist-types/tabs-next/TabNext.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface TabNextProps extends ComponentPropsWithoutRef<"button"> {
+    value: string;
+}
+export declare const TabNext: import("react").ForwardRefExoticComponent<TabNextProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/tabs-next/TabNextContext.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode, SyntheticEvent } from "react";
+declare type TabValue = {
+    value: string;
+    label: ReactNode;
+};
+export interface TabsContextValue {
+    disabled?: boolean;
+    select: (event: SyntheticEvent<HTMLButtonElement>) => void;
+    isSelected: (id: string) => boolean;
+    setFocusable: (id: string) => void;
+    isFocusable: (id: string) => boolean;
+    registerTab: (tab: TabValue) => void;
+    unregisterTab: (id: string) => void;
+}
+export declare const TabsContext: import("react").Context<TabsContextValue>;
+export declare function useTabs(): TabsContextValue;
+export {};

package/dist-types/tabs-next/TabstripNext.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
+export interface TabstripNextProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    disabled?: boolean;
+    selected?: string;
+    onChange?: (e: SyntheticEvent, data: {
+        value: string;
+    }) => void;
+    defaultSelected?: string;
+}
+export declare const TabstripNext: import("react").ForwardRefExoticComponent<TabstripNextProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/tabs-next/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TabNext";
+export * from "./TabstripNext";

package/dist-types/toggle-button/ToggleButton.d.ts

@@ -1,12 +1,7 @@
-import { ButtonProps } from "@salt-ds/core";
-import { SyntheticEvent } from "react";
-export declare type ToggleButtonToggleEventHandler = (event: SyntheticEvent<HTMLButtonElement>, toggled: boolean) => void;
-export interface ToggleButtonProps extends ButtonProps {
-    "aria-label"?: string;
-    "data-button-index"?: number;
-    toggled?: boolean;
-    tooltipText?: string;
-    disableTooltip?: boolean;
-    onToggle?: ToggleButtonToggleEventHandler;
+import { ComponentProps, MouseEvent } from "react";
+export interface ToggleButtonProps extends ComponentProps<"button"> {
+    selected?: boolean;
+    onChange?: (event: MouseEvent<HTMLButtonElement>) => void;
+    value: string | ReadonlyArray<string> | number | undefined;
 }
-export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/toggle-button/index.d.ts

@@ -1,2 +1 @@
 export * from "./ToggleButton";
-export * from "./ToggleButtonGroup";

package/dist-types/toggle-button-group/ToggleButtonGroup.d.ts

@@ -0,0 +1,25 @@
+import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
+export interface ToggleButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: string | ReadonlyArray<string> | number | undefined;
+    /**
+     * If `true`, the Toggle Button Group will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The value. Use when the component is controlled.
+     */
+    value?: string | ReadonlyArray<string> | number | undefined;
+    /**
+     * Callback fired when the selection changes.
+     * @param event
+     */
+    onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * The orientation of the toggle buttons.
+     */
+    orientation?: "horizontal" | "vertical";
+}
+export declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts

@@ -0,0 +1,10 @@
+import { SyntheticEvent } from "react";
+export interface ToggleButtonGroupContextValue {
+    disabled?: boolean;
+    select: (event: SyntheticEvent<HTMLButtonElement>) => void;
+    isSelected: (id: string | ReadonlyArray<string> | number | undefined) => boolean;
+    focus: (id: string | ReadonlyArray<string> | number | undefined) => void;
+    isFocused: (id: string | ReadonlyArray<string> | number | undefined) => boolean;
+}
+export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue | undefined>;
+export declare function useToggleButtonGroup(): ToggleButtonGroupContextValue | undefined;

package/dist-types/toggle-button-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ToggleButtonGroup";
+export { useToggleButtonGroup } from "./ToggleButtonGroupContext";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.11",
   "license": "Apache-2.0",
   "main": "dist-cjs/index.js",
   "sideEffects": false,
@@ -15,12 +15,13 @@
     }
   },
   "publishConfig": {
-    "directory": "../../dist/salt-ds-lab"
+    "directory": "../../dist/salt-ds-lab",
+    "provenance": true
   },
   "module": "dist-es/index.js",
   "typings": "dist-types/index.d.ts",
   "dependencies": {
-    "@salt-ds/core": "^1.8.0-rc.0",
+    "@salt-ds/core": "^1.8.0-rc.2",
     "clsx": "^1.2.1",
     "react-window": "^1.8.6",
     "compute-scroll-into-view": "^3.0.0",
@@ -36,7 +37,8 @@
     "aria-hidden": "^1.1.1",
     "no-scroll": "^2.1.1",
     "attr-accept": "^2.0.0",
-    "rifm": "^0.12.0"
+    "rifm": "^0.12.0",
+    "@fluentui/react-overflow": "^9.0.19"
   },
   "files": [
     "dist-cjs",

package/dist-cjs/logo/internal/LogoTitle.js

@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-
-const LogoTitle = React.forwardRef(
-  function LogoTitle2({ label, separatorClassname, ...rest }, ref) {
-    return label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: separatorClassname
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          ref,
-          ...rest,
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", {
-            children: label
-          })
-        })
-      ]
-    }) : null;
-  }
-);
-
-exports.LogoTitle = LogoTitle;
-//# sourceMappingURL=LogoTitle.js.map

package/dist-cjs/logo/internal/LogoTitle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LogoTitle.js","sources":["../src/logo/internal/LogoTitle.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nexport interface LogoTitleProps extends ComponentPropsWithoutRef<\"span\"> {\n  label?: string;\n  separatorClassname?: string;\n}\n\nexport const LogoTitle = forwardRef<HTMLSpanElement, LogoTitleProps>(\n  function LogoTitle({ label, separatorClassname, ...rest }, ref) {\n    return label ? (\n      <>\n        <span className={separatorClassname} />\n        <span ref={ref} {...rest}>\n          <span>{label}</span>\n        </span>\n      </>\n    ) : null;\n  }\n);\n"],"names":["forwardRef","LogoTitle","jsxs","Fragment","jsx"],"mappings":";;;;;;;AAOO,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,EAAE,OAAO,kBAAuB,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AAC9D,IAAA,OAAO,KACL,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAW,EAAA,kBAAA;AAAA,SAAoB,CAAA;AAAA,wBACpCA,cAAA,CAAA,MAAA,EAAA;AAAA,UAAK,GAAA;AAAA,UAAW,GAAG,IAAA;AAAA,UAClB,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,YAAM,QAAA,EAAA,KAAA;AAAA,WAAM,CAAA;AAAA,SACf,CAAA;AAAA,OAAA;AAAA,KACF,CACE,GAAA,IAAA,CAAA;AAAA,GACN;AACF;;;;"}

package/dist-cjs/toggle-button/ToggleButtonGroup.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".salt-density-high {\n  --toggleButton-group-height: calc(var(--salt-size-base) - var(--salt-size-unit) + 2px);\n}\n.salt-density-medium {\n  --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 0.5) + 2px);\n}\n.salt-density-low {\n  --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 2 / 3) + 2px);\n}\n.salt-density-touch {\n  --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 0.5) + 2px);\n}\n\n.saltToggleButtonGroup.saltToggleButtonGroup-cta {\n  --toggleButton-group-borderColor: var(--saltToggleButton-group-cta-borderColor, var(--salt-container-secondary-borderColor));\n}\n.saltToggleButtonGroup.saltToggleButtonGroup-primary {\n  --toggleButton-group-borderColor: var(--saltToggleButton-group-primary-borderColor, var(--salt-container-primary-borderColor));\n}\n\n.saltToggleButtonGroup {\n  --toggleButton-group-borderWidth: var(--saltToggleButton-group-borderWidth, var(--salt-size-border));\n  --toggleButton-group-borderStyle: var(--saltToggleButton-group-borderWidth, var(--salt-container-borderStyle));\n\n  display: inline-flex;\n  overflow: hidden;\n  padding: 2px;\n  border: var(--toggleButton-group-borderWidth) var(--toggleButton-group-borderStyle) var(--toggleButton-group-borderColor);\n}\n\n.saltToggleButtonGroup.saltToggleButtonGroup-secondary {\n  --toggleButton-group-borderColor: var(--saltToggleButton-group-secondary-borderColor, var(--salt-container-tertiary-borderColor));\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: var(--toggleButton-group-height);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton:not(:first-child) {\n  margin-left: 2px;\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton:not(:first-child) {\n  margin-top: 2px;\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=ToggleButtonGroup.css.js.map