@salt-ds/core 1.0.0

package/dist-types/link/Link.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType } from "react";
+import { IconProps } from "@salt-ds/icons";
+import { TextProps } from "../text";
+import "./Link.css";
+/**
+ * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.
+ *
+ * @example
+ * <LinkExample to="#link">Action</LinkExample>
+ */
+export interface LinkProps extends Omit<TextProps<"a">, "as"> {
+    IconComponent?: ComponentType<IconProps>;
+}
+export declare const Link: import("react").ForwardRefExoticComponent<Pick<LinkProps, "slot" | "style" | "title" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "variant" | "maxRows" | "styleAs" | "IconComponent"> & import("react").RefAttributes<HTMLAnchorElement>>;

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

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

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

@@ -0,0 +1,39 @@
+import React, { ReactElement, ReactNode } from "react";
+import { Breakpoints } from "../breakpoints";
+import { Density, Mode, ThemeName } from "../theme";
+import "./SaltProvider.css";
+export declare const DEFAULT_DENSITY = "medium";
+export interface ThemeContextProps {
+    theme: ThemeName;
+    mode: Mode;
+}
+export declare const DensityContext: React.Context<"touch" | "high" | "low" | "medium">;
+export declare const ThemeContext: React.Context<ThemeContextProps>;
+export declare const BreakpointContext: React.Context<Breakpoints>;
+declare type TargetElement = "root" | "scope" | "child";
+declare type SaltProviderBaseProps = {
+    applyClassesTo?: TargetElement;
+    density?: Density;
+    theme?: ThemeName;
+    mode?: Mode;
+    breakpoints?: Breakpoints;
+};
+interface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {
+    children: ReactElement;
+    applyClassesTo: "child";
+}
+interface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {
+    children: ReactNode;
+}
+interface SaltProviderThatClassesToRoot extends SaltProviderThatInjectsThemeElement {
+    applyClassesTo: "root";
+}
+declare type SaltProviderProps = SaltProviderThatAppliesClassesToChild | SaltProviderThatInjectsThemeElement | SaltProviderThatClassesToRoot;
+export declare function SaltProvider({ applyClassesTo: applyClassesToProp, children, density: densityProp, theme: themeProp, mode: modeProp, breakpoints: breakpointsProp, }: SaltProviderProps): JSX.Element;
+export declare const useTheme: () => ThemeContextProps;
+/**
+ * `useDensity` merges density value from `DensityContext` with the one from component's props.
+ */
+export declare function useDensity(density?: Density): Density;
+export declare const useBreakpoints: () => Breakpoints;
+export {};

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

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

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

@@ -0,0 +1,17 @@
+import { ElementType, HTMLAttributes } from "react";
+import { FlexLayoutProps } from "../flex-layout";
+export interface StackLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * 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"];
+    /**
+     * Controls the space between items, default is 3.
+     */
+    gap?: FlexLayoutProps<ElementType>["gap"];
+    /**
+     * Adds a separator between elements, default is false.
+     */
+    separators?: FlexLayoutProps<ElementType>["separators"];
+}
+export declare const StackLayout: import("react").ForwardRefExoticComponent<StackLayoutProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist-types/status-indicator/StatusIndicator.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IconProps } from "@salt-ds/icons";
+import { ValidationStatus } from "./ValidationStatus";
+import "./StatusIndicator.css";
+export interface StatusIndicatorProps extends IconProps {
+    /**
+     * Status indicator to be displayed.
+     */
+    status: ValidationStatus;
+}
+export declare const StatusIndicator: import("react").ForwardRefExoticComponent<StatusIndicatorProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist-types/status-indicator/ValidationStatus.d.ts

@@ -0,0 +1,2 @@
+export declare const VALIDATION_NAMED_STATUS: readonly ["error", "warning", "success", "info"];
+export declare type ValidationStatus = typeof VALIDATION_NAMED_STATUS[number];

package/dist-types/status-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./StatusIndicator";
+export * from "./ValidationStatus";

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

@@ -0,0 +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>>;

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

@@ -0,0 +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>>;

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

@@ -0,0 +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>>;

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

@@ -0,0 +1,20 @@
+import { PolymorphicComponentPropWithRef } from "../utils";
+import { ElementType, ReactElement } from "react";
+import "./Text.css";
+export declare type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
+    /**
+     * Apply text truncation by mentioning number of rows to be displayed
+     */
+    maxRows?: number;
+    /**
+     * Match styling to another text component's style
+     */
+    styleAs?: "h1" | "h2" | "h3" | "h4" | "label" | "display1" | "display2" | "display3";
+    /**
+     * Change text color palette
+     */
+    variant?: "primary" | "secondary";
+}>;
+declare type TextComponent = <T extends ElementType = "div">(props: TextProps<T>) => ReactElement | null;
+export declare const Text: TextComponent;
+export {};

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

@@ -0,0 +1,4 @@
+export * from "./Text";
+export * from "./Display";
+export * from "./Headings";
+export * from "./Label";

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

@@ -0,0 +1,2 @@
+export declare const DensityValues: readonly ["high", "medium", "low", "touch"];
+export declare type Density = typeof DensityValues[number];

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

@@ -0,0 +1,2 @@
+export declare const ModeValues: readonly ["light", "dark"];
+export declare type Mode = typeof ModeValues[number];

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

@@ -0,0 +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 ThemeName = string;
+export declare const getCharacteristicValue: (themeName: ThemeName, characteristicName: characteristic, variant: string, scopeElement?: HTMLElement | undefined) => string | null;

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

@@ -0,0 +1,3 @@
+export * from "./Density";
+export * from "./Theme";
+export * from "./Mode";

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

@@ -0,0 +1,3 @@
+declare type ChainedFunction<Args extends any[], This> = ((this: This, ...args: Args) => any) | undefined | null;
+export declare function createChainedFunction<Args extends any[], This>(...funcs: ChainedFunction<Args, This>[]): (this: This, ...args: Args) => any;
+export {};

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

@@ -0,0 +1,2 @@
+import { Context } from "react";
+export declare function createContext<ContextValueType>(name: string, defaultValue: ContextValueType): Context<ContextValueType>;

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

@@ -0,0 +1,4 @@
+export interface Cancelable {
+    clear(): void;
+}
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait?: number, leading?: boolean): T & Cancelable;

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

@@ -0,0 +1,17 @@
+export * from "./createChainedFunction";
+export * from "./createContext";
+export * from "./debounce";
+export * from "./inferElementType";
+export * from "./makePrefixer";
+export * from "./marginMiddleware";
+export * from "./ownerDocument";
+export * from "./ownerWindow";
+export * from "./polymorphicTypes";
+export * from "./setRef";
+export * from "./useControlled";
+export * from "./useForkRef";
+export * from "./useId";
+export * from "./useIsFocusVisible";
+export * from "./useIsomorphicLayoutEffect";
+export * from "./usePrevious";
+export * from "./useResponsiveProp";

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

@@ -0,0 +1,2 @@
+import type { DetailedHTMLProps, AnchorHTMLAttributes } from "react";
+export declare type inferElementType<T> = T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] extends DetailedHTMLProps<AnchorHTMLAttributes<any>, infer Elem> ? Elem : never : HTMLElement;

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

@@ -0,0 +1,2 @@
+export declare type ClassNamePrefixer = (...names: string[]) => string;
+export declare const makePrefixer: (prefix: string) => ClassNamePrefixer;

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

@@ -0,0 +1,2 @@
+import { Middleware } from "@floating-ui/core";
+export declare const margin: (value?: number) => Middleware;

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

@@ -0,0 +1 @@
+export declare function ownerDocument(node: Node | null | undefined): Document;

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

@@ -0,0 +1 @@
+export declare function ownerWindow(node: Node | null | undefined): Window;

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

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, PropsWithChildren } from "react";
+declare type AsProp<T extends ElementType> = {
+    /**
+     * The HTML element used for the root node.
+     */
+    as?: T;
+};
+declare type PropsToOmit<T extends ElementType, P> = keyof (AsProp<T> & P);
+declare type PolymorphicComponentProp<T extends ElementType, Props> = PropsWithChildren<Props & AsProp<T>> & Omit<ComponentPropsWithoutRef<T>, PropsToOmit<T, Props>>;
+export declare type PolymorphicRef<T extends ElementType> = ComponentPropsWithRef<T>["ref"];
+export declare type PolymorphicComponentPropWithRef<T extends ElementType, Props> = PolymorphicComponentProp<T, Props> & {
+    ref?: PolymorphicRef<T>;
+};
+export {};

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

@@ -0,0 +1,2 @@
+import { MutableRefObject } from "react";
+export declare function setRef<T>(ref: MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null): void;

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

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction } from "react";
+export interface UseControlledProps<T> {
+    /**
+     * Holds the component value when it's controlled.
+     */
+    controlled?: T;
+    /**
+     * The default value when uncontrolled.
+     */
+    default: T;
+    /**
+     * The component name displayed in warnings.
+     */
+    name: string;
+    /**
+     * The name of the state variable displayed in warnings.
+     */
+    state?: string;
+}
+/**
+ * Copied from MUI (v5) useControlled hook with one additional returned value
+ * @see https://github.com/mui-org/material-ui/blob/0979e6a54ba47c278d1f535953c0520a86349811/packages/material-ui-utils/src/useControlled.js
+ */
+export declare function useControlled<S>({ controlled, default: defaultProp, name, state, }: UseControlledProps<S>): [S, Dispatch<SetStateAction<S>>, boolean];

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

@@ -0,0 +1,2 @@
+import { Ref } from "react";
+export declare function useForkRef<Instance>(refA: Ref<Instance> | null | undefined, refB: Ref<Instance> | null | undefined): Ref<Instance> | null;

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

@@ -0,0 +1,2 @@
+export declare function useId(idOverride?: string): string | undefined;
+export declare function useIdMemo(idOverride?: string): string;

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

@@ -0,0 +1,8 @@
+import { FocusEvent, MutableRefObject, Ref } from "react";
+export declare function teardown(doc: Document): void;
+export declare function useIsFocusVisible<T extends HTMLElement = HTMLElement>(): {
+    isFocusVisibleRef: MutableRefObject<boolean>;
+    onBlur: () => void;
+    onFocus: (event: FocusEvent<T>) => void;
+    ref: Ref<T>;
+};

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

@@ -0,0 +1,2 @@
+import { useEffect } from "react";
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

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

@@ -0,0 +1,2 @@
+import { DependencyList } from "react";
+export declare function usePrevious<T>(value: T, deps?: DependencyList, initialValue?: T): T | undefined;

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

@@ -0,0 +1,10 @@
+import { Breakpoints } from "../breakpoints";
+declare type BreakpointProp<T> = {
+    [K in keyof Breakpoints]?: T;
+};
+export declare type ResponsiveProp<T> = T | BreakpointProp<T>;
+export declare const getCurrentBreakpoint: (breakpoints: Breakpoints, width: number) => keyof Breakpoints;
+export declare const useCurrentBreakpoint: () => keyof Breakpoints;
+export declare const useOrderedBreakpoints: () => string[];
+export declare const useResponsiveProp: <T>(value: ResponsiveProp<T>, defaultValue: T) => T;
+export {};

package/dist-types/viewport/ViewportProvider.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+declare const ViewportContext: import("react").Context<number | null>;
+declare type ViewportProviderProps = {
+    children?: ReactNode;
+};
+declare const ViewportProvider: ({ children }: ViewportProviderProps) => JSX.Element;
+declare const useViewport: () => number;
+export { ViewportProvider, ViewportContext, useViewport };

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

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

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@salt-ds/core",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "main": "dist-cjs/packages/core/src/index.js",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.css.js"
+  ],
+  "peerDependencies": {
+    "@types/react": ">=16.8.6",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "directory": "../../dist/salt-ds-core"
+  },
+  "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"
+  },
+  "files": [
+    "dist-cjs",
+    "dist-es",
+    "dist-types",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jpmorganchase/salt-ds",
+    "directory": "packages/core"
+  }
+}