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

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

@@ -1,4 +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";
+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-disabled));\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/toolbar/ToolbarButton.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* .saltToolbarButton {\n    outline: none !important;\n} */\n\n.saltToolbarButton:not([data-is-inside-panel]) {\n  --saltButton-fontSize: 0;\n  --saltButton-letterSpacing: 0;\n}\n";
+var css_248z = "/* .saltToolbarButton {\n    outline: none !important;\n} */\n\n.saltToolbarButton:not([data-is-inside-panel]) {\n  --saltButton-fontSize: 0;\n  --saltButton-letterSpacing: 0;\n  gap: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ToolbarButton.css.js.map

package/dist-types/accordion/Accordion.d.ts

@@ -1,9 +1,25 @@
-import { HTMLAttributes } from "react";
-export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
+export interface AccordionProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * AccordionGroup value.
+     */
+    value: string;
+    /**
+     * Whether the accordion is expanded.
+     */
+    expanded?: boolean;
+    /**
+     * Whether the accordion is expanded by default.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Callback fired when the accordion is toggled.
+     * @param event
+     */
+    onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * Whether the accordion is disabled.
+     */
     disabled?: boolean;
-    maxExpandedItems?: number;
-    expandedSectionIds?: string[];
-    defaultExpandedSectionIds?: string[];
-    onChange?: (expandedSectionIds: string[] | null) => void;
 }
 export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/accordion/AccordionContext.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-export interface AccordionContext {
-    isExpanded: (id: string) => boolean;
+import { SyntheticEvent } from "react";
+export interface AccordionContextValue {
+    value: string;
+    expanded: boolean;
+    toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;
     disabled: boolean;
-    registerSection: (id: string, isExpanded: boolean) => void;
-    unregisterSection: (id: string) => void;
-    onChange: (id: string, isExpanded: boolean) => void;
+    id: string;
 }
-export declare const AccordionContext: import("react").Context<AccordionContext | undefined>;
-export declare const useAccordionContext: () => AccordionContext;
+export declare const AccordionContext: import("react").Context<AccordionContextValue>;
+export declare function useAccordion(): AccordionContextValue;

package/dist-types/accordion/AccordionGroup.d.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface AccordionGroupProps extends ComponentPropsWithoutRef<"div"> {
+}
+export declare const AccordionGroup: import("react").ForwardRefExoticComponent<AccordionGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/accordion/AccordionHeader.d.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface AccordionHeaderProps extends ComponentPropsWithoutRef<"button"> {
+}
+export declare const AccordionHeader: import("react").ForwardRefExoticComponent<AccordionHeaderProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/accordion/AccordionPanel.d.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface AccordionPanelProps extends ComponentPropsWithoutRef<"div"> {
+}
+export declare const AccordionPanel: import("react").ForwardRefExoticComponent<AccordionPanelProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,4 @@
-export * from "./AccordionSection";
-export * from "./AccordionSectionContext";
+export * from "./AccordionGroup";
+export * from "./AccordionPanel";
 export * from "./Accordion";
-export * from "./AccordionSummary";
-export * from "./AccordionDetails";
+export * from "./AccordionHeader";

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,9 +28,11 @@ 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";
+export * from "./multiline-input";
 export * from "./nav-item";
 export * from "./overlay";
 export * from "./pagination";
@@ -48,7 +50,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/multiline-input/MultilineInput.d.ts

@@ -0,0 +1,40 @@
+import { ComponentPropsWithoutRef, ReactNode, Ref, TextareaHTMLAttributes } from "react";
+export interface MultilineInputProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue">, Pick<ComponentPropsWithoutRef<"input">, "disabled" | "value" | "defaultValue" | "placeholder"> {
+    /**
+     * End adornment component
+     */
+    endAdornment?: ReactNode;
+    /**
+     * Styling variant with full border. Defaults to false
+     */
+    fullBorder?: boolean;
+    /**
+     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.
+     */
+    textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
+    /**
+     * Optional ref for the textarea component
+     */
+    textAreaRef?: Ref<HTMLTextAreaElement>;
+    /**
+     * If `true`, the component is read only.
+     */
+    readOnly?: boolean;
+    /**
+     * Start adornment component
+     */
+    startAdornment?: ReactNode;
+    /**
+     * Validation status.
+     */
+    validationStatus?: "error" | "warning" | "success";
+    /**
+     * Styling variant. Defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * Number of rows. Defaults to 3
+     */
+    rows?: number;
+}
+export declare const MultilineInput: import("react").ForwardRefExoticComponent<MultilineInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/multiline-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./MultilineInput";

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.12",
   "license": "Apache-2.0",
   "main": "dist-cjs/index.js",
   "sideEffects": false,
@@ -15,19 +15,20 @@
     }
   },
   "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.3",
     "clsx": "^1.2.1",
     "react-window": "^1.8.6",
     "compute-scroll-into-view": "^3.0.0",
     "@floating-ui/react": "^0.23.0",
     "@salt-ds/window": "^0.1.0",
     "@salt-ds/styles": "^0.1.0",
-    "@salt-ds/icons": "^1.4.0",
+    "@salt-ds/icons": "^1.5.0",
     "@internationalized/date": "^3.0.0",
     "tinycolor2": "^1.4.2",
     "react-color": "^2.19.3",
@@ -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/accordion/AccordionDetails.js

@@ -1,87 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var clsx = require('clsx');
-var React = require('react');
-var AccordionSectionContext = require('./AccordionSectionContext.js');
-var Accordion = require('./Accordion.css.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
-
-const withBaseName = core.makePrefixer("saltAccordionDetails");
-const msCollapseAnimationDuration = 150;
-const AccordionDetails = React.forwardRef(function AccordionDetails2({ children, className, preventUnmountOnCollapse, ...restProps }, ref) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-accordion",
-    css: Accordion,
-    window: targetWindow
-  });
-  const { isDisabled, isExpanded } = AccordionSectionContext.useAccordionSectionContext();
-  const rootRef = React.useRef(null);
-  const contentRef = React.useRef(null);
-  const forkedRef = core.useForkRef(ref, rootRef);
-  const [state, setState] = React.useState(
-    isExpanded ? "expanded" : "collapsed"
-  );
-  core.useIsomorphicLayoutEffect(() => {
-    if (!rootRef.current) {
-      return;
-    }
-    if (isExpanded) {
-      if (state === "collapsed") {
-        setState("measuring");
-      } else if (state === "measuring") {
-        rootRef.current.style.height = `${contentRef.current.getBoundingClientRect().height}px`;
-        setState("expanding");
-      } else if (state === "expanding") {
-        setTimeout(() => {
-          setState("expanded");
-        }, msCollapseAnimationDuration);
-      } else if (state === "expanded") {
-        rootRef.current.style.height = "auto";
-      }
-    } else {
-      if (state === "expanded") {
-        rootRef.current.style.height = `${rootRef.current.getBoundingClientRect().height}px`;
-        setTimeout(() => {
-          setState("collapsing");
-        }, 0);
-      } else if (state === "collapsing") {
-        rootRef.current.style.height = "0";
-        setTimeout(() => {
-          setState("collapsed");
-        }, msCollapseAnimationDuration);
-      } else if (state === "collapsed") {
-        rootRef.current.style.height = "0";
-      }
-    }
-  }, [isExpanded, state]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ...restProps,
-    ref: forkedRef,
-    className: clsx.clsx(
-      withBaseName(),
-      {
-        [withBaseName("disabled")]: isDisabled
-      },
-      className
-    ),
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ref: contentRef,
-      className: clsx.clsx({
-        [withBaseName("dummy")]: state === "measuring"
-      }),
-      children: preventUnmountOnCollapse || state !== "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: withBaseName("content"),
-        children
-      }) : null
-    })
-  });
-});
-
-exports.AccordionDetails = AccordionDetails;
-//# sourceMappingURL=AccordionDetails.js.map

package/dist-cjs/accordion/AccordionDetails.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccordionDetails.js","sources":["../src/accordion/AccordionDetails.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useRef, useState } from \"react\";\nimport { useAccordionSectionContext } from \"./AccordionSectionContext\";\n\nimport accordionCss from \"./Accordion.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltAccordionDetails\");\n\nexport interface AccordionDetailsProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Render children even if the component is collapsed. Prevents unmounting of children components.\n   * */\n  preventUnmountOnCollapse?: boolean;\n}\n\nconst msCollapseAnimationDuration = 150;\n\n// Collapsed - the section is completely collapsed, don't render anything, height is 0\n// Measuring - the section is about to expand, rendering a dummy preview to measure\n//   the height of expanded section\n// Expanding - the section is expanding but hasn't yet expanded to full size. height is set to\n//   the value measured in the previous step\n// Expanded - the section is expanded, need to render the content, height is set to auto\n// Collapsing - the section is about to start collapsing, the height is set to current height\n//   (auto has to be replaced by a number, then the component has to be rendered, then the value can\n//    be set to 0)\ntype State =\n  | \"collapsed\"\n  | \"measuring\"\n  | \"expanding\"\n  | \"expanded\"\n  | \"collapsing\";\n\nexport const AccordionDetails = forwardRef<\n  HTMLDivElement,\n  AccordionDetailsProps\n>(function AccordionDetails(\n  { children, className, preventUnmountOnCollapse, ...restProps },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-accordion\",\n    css: accordionCss,\n    window: targetWindow,\n  });\n\n  const { isDisabled, isExpanded } = useAccordionSectionContext();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, rootRef);\n\n  const [state, setState] = useState<State>(\n    isExpanded ? \"expanded\" : \"collapsed\"\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n    if (isExpanded) {\n      if (state === \"collapsed\") {\n        setState(\"measuring\");\n      } else if (state === \"measuring\") {\n        rootRef.current.style.height = `${\n          contentRef.current!.getBoundingClientRect().height\n        }px`;\n        setState(\"expanding\");\n      } else if (state === \"expanding\") {\n        setTimeout(() => {\n          setState(\"expanded\");\n        }, msCollapseAnimationDuration);\n      } else if (state === \"expanded\") {\n        rootRef.current.style.height = \"auto\";\n      }\n    } else {\n      if (state === \"expanded\") {\n        rootRef.current.style.height = `${\n          rootRef.current.getBoundingClientRect().height\n        }px`;\n        setTimeout(() => {\n          setState(\"collapsing\");\n        }, 0);\n      } else if (state === \"collapsing\") {\n        rootRef.current.style.height = \"0\";\n        setTimeout(() => {\n          setState(\"collapsed\");\n        }, msCollapseAnimationDuration);\n      } else if (state === \"collapsed\") {\n        rootRef.current.style.height = \"0\";\n      }\n    }\n  }, [isExpanded, state]);\n\n  return (\n    <div\n      {...restProps}\n      ref={forkedRef}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: isDisabled,\n        },\n        className\n      )}\n    >\n      <div\n        ref={contentRef}\n        className={clsx({\n          [withBaseName(\"dummy\")]: state === \"measuring\",\n        })}\n      >\n        {preventUnmountOnCollapse || state !== \"collapsed\" ? (\n          <div className={withBaseName(\"content\")}>{children}</div>\n        ) : null}\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","AccordionDetails","useWindow","useComponentCssInjection","accordionCss","useAccordionSectionContext","useRef","useForkRef","useState","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":"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"}