@salt-ds/core 1.29.0 → 1.30.0

package/dist-types/index.d.ts

@@ -11,6 +11,7 @@ export * from "./card";
 export * from "./checkbox";
 export * from "./combo-box";
 export * from "./dialog";
+export * from "./divider";
 export * from "./drawer";
 export * from "./dropdown";
 export * from "./file-drop-zone";
@@ -25,7 +26,8 @@ export * from "./input";
 export * from "./interactable-card";
 export * from "./link";
 export * from "./link-card";
-export { useListControlContext } from "./list-control";
+export * from "./list-box";
+export * from "./list-control";
 export * from "./menu";
 export * from "./multiline-input";
 export * from "./navigation-item";
@@ -49,6 +51,7 @@ export * from "./toast";
 export * from "./salt-provider";
 export * from "./split-layout";
 export * from "./switch";
+export * from "./tag";
 export * from "./toggle-button";
 export * from "./toggle-button-group";
 export * from "./tooltip";

package/dist-types/list-box/ListBox.d.ts

@@ -0,0 +1,40 @@
+import { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { ListControlProps } from "../list-control/ListControlState";
+export declare type ListBoxProps<Item = string> = {
+    /**
+     * If `true`, the list box will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If `false`, the list box will have not a border.
+     */
+    bordered?: boolean;
+    /**
+     * The options to display in the list box.
+     */
+    children?: ReactNode;
+    /**
+     * If `true`, the list box will be multiselect.
+     */
+    multiselect?: boolean;
+} & ComponentPropsWithoutRef<"div"> & Omit<ListControlProps<Item>, "onOpenChange">;
+export declare const ListBox: <Item = string>(props: {
+    /**
+     * If `true`, the list box will be disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If `false`, the list box will have not a border.
+     */
+    bordered?: boolean | undefined;
+    /**
+     * The options to display in the list box.
+     */
+    children?: ReactNode;
+    /**
+     * If `true`, the list box will be multiselect.
+     */
+    multiselect?: boolean | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Omit<ListControlProps<Item>, "onOpenChange"> & {
+    ref?: Ref<HTMLDivElement> | undefined;
+}) => JSX.Element;

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

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

package/dist-types/list-control/ListControlContext.d.ts

@@ -16,6 +16,7 @@ export interface ListControlContextValue<Item> {
     multiselect: boolean;
     focusVisibleState: boolean;
     valueToString: (item: Item) => string;
+    disabled?: boolean;
 }
 export declare const ListControlContext: import("react").Context<ListControlContextValue<any>>;
 export declare function useListControlContext<Item>(): ListControlContextValue<Item>;

package/dist-types/list-control/ListControlState.d.ts

@@ -62,9 +62,40 @@ export declare function useListControl<Item>(props: ListControlProps<Item>): {
     listRef: import("react").RefObject<HTMLDivElement>;
     options: HTMLElement[];
     register: (optionValue: OptionValue<Item>, element: HTMLElement) => () => void;
-    getOptionAtIndex: (index: number) => OptionValue<Item>;
+    getOptionAtIndex: (index: number) => {
+        data: OptionValue<Item>;
+        element: HTMLElement;
+    };
     getIndexOfOption: (option: OptionValue<Item>) => number;
-    getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => OptionValue<Item>[];
+    getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => {
+        data: OptionValue<Item>;
+        element: HTMLElement;
+    }[];
     getOptionFromSearch: (search: string, startFrom?: OptionValue<Item> | undefined) => OptionValue<Item> | undefined;
+    getOptionAfter: (option: OptionValue<Item>) => {
+        data: OptionValue<Item>;
+        element: HTMLElement;
+    };
+    getOptionBefore: (option: OptionValue<Item>) => {
+        data: OptionValue<Item>;
+        element: HTMLElement;
+    };
+    getOptionPageAbove: (start: OptionValue<Item>) => {
+        data: OptionValue<Item>;
+        element: HTMLElement;
+    } | null;
+    getOptionPageBelow: (start: OptionValue<Item>) => {
+        data: OptionValue<Item>;
+        element: HTMLElement;
+    } | null;
+    getFirstOption: () => {
+        data: OptionValue<Item>;
+        element: HTMLElement;
+    };
+    getLastOption: () => {
+        data: OptionValue<Item>;
+        element: HTMLElement;
+    };
     valueToString: (item: Item) => string;
+    disabled: boolean | undefined;
 };

package/dist-types/salt-provider/SaltProvider.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement, ReactNode } from "react";
 import { Breakpoints } from "../breakpoints";
-import { Density, Mode, ThemeName } from "../theme";
+import { Density, Mode, ThemeName, UNSTABLE_ActionFont } from "../theme";
 import { WindowContextType } from "@salt-ds/window";
 import { UNSTABLE_Corner } from "../theme/Corner";
 import { UNSTABLE_HeadingFont } from "../theme/HeadingFont";
@@ -15,6 +15,7 @@ export interface ThemeContextProps {
     UNSTABLE_corner: UNSTABLE_Corner;
     UNSTABLE_headingFont: UNSTABLE_HeadingFont;
     UNSTABLE_accent: UNSTABLE_Accent;
+    UNSTABLE_actionFont: UNSTABLE_ActionFont;
 }
 export declare const DensityContext: React.Context<"touch" | "high" | "low" | "medium">;
 export declare const ThemeContext: React.Context<ThemeContextProps>;
@@ -44,6 +45,7 @@ interface UNSTABLE_SaltProviderNextAdditionalProps {
     corner?: UNSTABLE_Corner;
     headingFont?: UNSTABLE_HeadingFont;
     accent?: UNSTABLE_Accent;
+    actionFont?: UNSTABLE_ActionFont;
 }
 export declare type UNSTABLE_SaltProviderNextProps = SaltProviderProps & UNSTABLE_SaltProviderNextAdditionalProps;
 export declare function UNSTABLE_SaltProviderNext({ enableStyleInjection, ...restProps }: UNSTABLE_SaltProviderNextProps): JSX.Element;

package/dist-types/tag/Tag.d.ts

@@ -0,0 +1,16 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface TagProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Styling variant with full border. Defaults to false
+     */
+    bordered?: boolean;
+    /**
+     * Emphasize the styling by applying a background color. Defaults to primary
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * The tag category, needs to be within range of 1-20. Defaults to 1
+     */
+    category?: number;
+}
+export declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist-types/theme/ActionFont.d.ts

@@ -0,0 +1,2 @@
+export declare const UNSTABLE_ActionFontValues: readonly ["Open Sans", "Amplitude"];
+export declare type UNSTABLE_ActionFont = (typeof UNSTABLE_ActionFontValues)[number];

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

@@ -1,4 +1,5 @@
 export * from "./Accent";
+export * from "./ActionFont";
 export * from "./Density";
 export * from "./HeadingFont";
 export * from "./Theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.29.0",
+  "version": "1.30.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -15,7 +15,7 @@
     "clsx": "^2.0.0",
     "@salt-ds/window": "^0.1.1",
     "@salt-ds/styles": "^0.2.1",
-    "@salt-ds/icons": "^1.12.0"
+    "@salt-ds/icons": "^1.12.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0",