@salt-ds/core 1.0.0 → 1.2.0

package/dist-types/stack-layout/StackLayout.d.ts

@@ -1,10 +1,16 @@
-import { ElementType, HTMLAttributes } from "react";
-import { FlexLayoutProps } from "../flex-layout";
-export interface StackLayoutProps extends HTMLAttributes<HTMLDivElement> {
+import { ElementType, ReactElement } from "react";
+import { FlexLayoutProps, LayoutDirection, LayoutSeparator } from "../flex-layout";
+import { PolymorphicComponentPropWithRef, ResponsiveProp } from "../utils";
+import "./StackLayout.css";
+export declare type StackLayoutProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
     /**
      * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is "stretch".
      */
     align?: FlexLayoutProps<ElementType>["align"];
+    /**
+     * Establishes the main-axis, defining the direction children are placed. Default is "column".
+     */
+    direction?: ResponsiveProp<LayoutDirection>;
     /**
      * Controls the space between items, default is 3.
      */
@@ -12,6 +18,8 @@ export interface StackLayoutProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Adds a separator between elements, default is false.
      */
-    separators?: FlexLayoutProps<ElementType>["separators"];
-}
-export declare const StackLayout: import("react").ForwardRefExoticComponent<StackLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+    separators?: LayoutSeparator | boolean;
+}>;
+declare type StackLayoutComponent = <T extends ElementType = "div">(props: StackLayoutProps<T>) => ReactElement | null;
+export declare const StackLayout: StackLayoutComponent;
+export {};

package/dist-types/text/Display.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TextProps } from "./Text";
-export declare const Display1: import("react").ForwardRefExoticComponent<Pick<Omit<TextProps<"span">, "as">, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement> | "variant" | "maxRows" | "styleAs"> & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const Display2: import("react").ForwardRefExoticComponent<Pick<Omit<TextProps<"span">, "as">, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement> | "variant" | "maxRows" | "styleAs"> & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const Display3: import("react").ForwardRefExoticComponent<Pick<Omit<TextProps<"span">, "as">, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement> | "variant" | "maxRows" | "styleAs"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Display1: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"span">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Display2: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"span">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Display3: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"span">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/text/Headings.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TextProps } from "./Text";
-export declare const H1: import("react").ForwardRefExoticComponent<Pick<Omit<TextProps<"h1">, "as">, "key" | keyof import("react").HTMLAttributes<HTMLHeadingElement> | "variant" | "maxRows" | "styleAs"> & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const H2: import("react").ForwardRefExoticComponent<Pick<Omit<TextProps<"h2">, "as">, "key" | keyof import("react").HTMLAttributes<HTMLHeadingElement> | "variant" | "maxRows" | "styleAs"> & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const H3: import("react").ForwardRefExoticComponent<Pick<Omit<TextProps<"h3">, "as">, "key" | keyof import("react").HTMLAttributes<HTMLHeadingElement> | "variant" | "maxRows" | "styleAs"> & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const H4: import("react").ForwardRefExoticComponent<Pick<Omit<TextProps<"h4">, "as">, "key" | keyof import("react").HTMLAttributes<HTMLHeadingElement> | "variant" | "maxRows" | "styleAs"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const H1: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"h1">, "as">, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const H2: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"h2">, "as">, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const H3: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"h3">, "as">, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const H4: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"h4">, "as">, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist-types/text/Label.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TextProps } from "./Text";
-export declare const Label: import("react").ForwardRefExoticComponent<Pick<Omit<TextProps<"label">, "as">, "key" | keyof import("react").LabelHTMLAttributes<HTMLLabelElement> | "variant" | "maxRows" | "styleAs"> & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"label">, "as">, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

package/dist-types/text/Text.d.ts

@@ -2,6 +2,10 @@ import { PolymorphicComponentPropWithRef } from "../utils";
 import { ElementType, ReactElement } from "react";
 import "./Text.css";
 export declare type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
+    /**
+     * Applies disabled styling when true
+     */
+    disabled?: boolean;
     /**
      * Apply text truncation by mentioning number of rows to be displayed
      */

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

@@ -1,3 +1,3 @@
-export declare type characteristic = "accent" | "actionable" | "container" | "delay" | "disabled" | "draggable" | "target" | "editable" | "focused" | "measured" | "navigable" | "overlayable" | "selectable" | "separable" | "taggable" | "text" | "status" | "icon" | "shadow" | "size" | "spacing";
+export declare type characteristic = "accent" | "actionable" | "container" | "differential" | "draggable" | "editable" | "focused" | "measured" | "navigable" | "overlayable" | "selectable" | "separable" | "status" | "taggable" | "target" | "text";
 export declare type ThemeName = string;
 export declare const getCharacteristicValue: (themeName: ThemeName, characteristicName: characteristic, variant: string, scopeElement?: HTMLElement | undefined) => string | null;

package/dist-types/tooltip/Tooltip.d.ts

@@ -0,0 +1,47 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { ValidationStatus } from "../status-indicator";
+import { UseFloatingUIProps } from "../utils";
+import "./Tooltip.css";
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement>, Pick<UseFloatingUIProps, "open" | "onOpenChange" | "placement"> {
+    /**
+     * The children will be the tooltip's trigger.
+     */
+    children: ReactNode;
+    /**
+     * Whether to hide the tooltip arrow. Defaults to `false`.
+     */
+    hideArrow?: boolean;
+    /**
+     * Whether to hide the state icon within the tooltip. Defaults to `false`.
+     */
+    hideIcon?: boolean;
+    /**
+     * Content displayed inside the tooltip. Can be a string or a React component.
+     */
+    content: ReactNode;
+    /**
+     * A string to determine the current status of the tooltip. Defaults to 'info'.
+     */
+    status?: ValidationStatus;
+    /**
+     * Delay in milliseconds before the tooltip is shown
+     */
+    enterDelay?: number;
+    /**
+     * Delay in milliseconds before the tooltip is hidden
+     */
+    leaveDelay?: number;
+    /**
+     * Option to not display the tooltip. Can be used in conditional situations like text truncation.
+     */
+    disabled?: boolean;
+    /**
+     * Option to remove the hover listener
+     */
+    disableHoverListener?: boolean;
+    /**
+     * Option to remove the focus listener
+     */
+    disableFocusListener?: boolean;
+}
+export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export * from "./Tooltip";
+export * from "./useTooltip";

package/dist-types/tooltip/useAriaAnnounce.d.ts

@@ -0,0 +1,9 @@
+import type { ElementProps, FloatingContext } from "@floating-ui/react";
+declare type Props = {
+    delay?: number | Partial<{
+        open: number;
+        close: number;
+    }>;
+};
+export declare const useAriaAnnounce: (context: FloatingContext, { delay }: Props) => ElementProps;
+export {};

package/dist-types/tooltip/useTooltip.d.ts

@@ -0,0 +1,36 @@
+import { HTMLProps } from "react";
+import { UseFloatingUIProps } from "../utils";
+export interface UseTooltipProps extends Partial<Pick<UseFloatingUIProps, "onOpenChange" | "open" | "placement">> {
+    /**
+     * Do not respond to focus events.
+     */
+    disableFocusListener?: boolean;
+    /**
+     * Do not respond to hover events.
+     */
+    disableHoverListener?: boolean;
+    /**
+     * The number of milliseconds to wait before showing the tooltip.
+     * This prop won't impact the enter touch delay (`enterTouchDelay`).
+     */
+    enterDelay?: number;
+    /**
+     * The number of milliseconds to wait before hiding the tooltip.
+     * This prop won't impact the leave touch delay (`leaveTouchDelay`).
+     */
+    leaveDelay?: number;
+}
+export declare function useTooltip(props?: UseTooltipProps): {
+    arrowProps: {
+        ref: import("react").MutableRefObject<HTMLDivElement | null>;
+        style: {
+            left: string;
+            top: string;
+        };
+    };
+    open: boolean;
+    floating: (node: HTMLElement | null) => void;
+    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    getTooltipProps: () => HTMLProps<HTMLDivElement>;
+    getTriggerProps: () => Record<string, unknown>;
+};

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

@@ -9,6 +9,7 @@ export * from "./ownerWindow";
 export * from "./polymorphicTypes";
 export * from "./setRef";
 export * from "./useControlled";
+export * from "./useFloatingUI";
 export * from "./useForkRef";
 export * from "./useId";
 export * from "./useIsFocusVisible";

package/dist-types/utils/useFloatingUI.d.ts

@@ -0,0 +1,34 @@
+import type { Middleware, Placement, Strategy } from "@floating-ui/react";
+import { useFloating } from "@floating-ui/react";
+export declare type UseFloatingUIProps = {
+    /**
+     * Set position relative to trigger
+     */
+    placement?: Placement;
+    strategy?: Strategy;
+    middleware?: Middleware[];
+    /**
+     * Set visible state. Defaults to false
+     */
+    open?: boolean;
+    /**
+     * Callback function triggered when open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+};
+export declare const DEFAULT_FLOATING_UI_MIDDLEWARE: {
+    name: string;
+    options?: any;
+    fn: (state: {
+        x: number;
+        y: number;
+        initialPlacement: Placement;
+        placement: Placement;
+        strategy: Strategy;
+        middlewareData: import("@floating-ui/react").MiddlewareData;
+        rects: import("@floating-ui/react").ElementRects;
+        platform: import("@floating-ui/core").Platform;
+        elements: import("@floating-ui/react").Elements;
+    }) => import("@floating-ui/react").MiddlewareReturn | Promise<import("@floating-ui/react").MiddlewareReturn>;
+}[];
+export declare function useFloatingUI(props: UseFloatingUIProps): ReturnType<typeof useFloating>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "license": "Apache-2.0",
   "main": "dist-cjs/packages/core/src/index.js",
   "sideEffects": [
@@ -23,8 +23,9 @@
   "module": "dist-es/packages/core/src/index.js",
   "typings": "dist-types/index.d.ts",
   "dependencies": {
-    "classnames": "^2.2.6",
-    "@salt-ds/icons": "1.0.0"
+    "@floating-ui/react": "^0.19.0",
+    "clsx": "^1.2.1",
+    "@salt-ds/icons": "1.1.0"
   },
   "files": [
     "dist-cjs",