@salt-ds/core 1.0.0 → 1.2.0

package/dist-es/packages/core/src/tooltip/Tooltip.js

@@ -0,0 +1,87 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, isValidElement, cloneElement } from 'react';
+import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useTooltip } from './useTooltip.js';
+import './Tooltip.css.js';
+
+const withBaseName = makePrefixer("saltTooltip");
+const Tooltip = forwardRef(
+  function Tooltip2(props, ref) {
+    const {
+      children,
+      className,
+      disabled,
+      hideArrow = false,
+      hideIcon = false,
+      open: openProp,
+      content,
+      status = "info",
+      placement = "right",
+      enterDelay = 300,
+      leaveDelay = 0,
+      ...rest
+    } = props;
+    const hookProps = {
+      open: openProp,
+      placement,
+      enterDelay,
+      leaveDelay,
+      ...rest
+    };
+    const {
+      arrowProps,
+      open,
+      floating,
+      reference,
+      getTriggerProps,
+      getTooltipProps
+    } = useTooltip(hookProps);
+    const triggerRef = useForkRef(
+      isValidElement(children) ? children.ref : null,
+      reference
+    );
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        open && !disabled && /* @__PURE__ */ jsxs("div", {
+          className: clsx(withBaseName(), withBaseName(status), className),
+          ref: floating,
+          ...getTooltipProps(),
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              className: withBaseName("container"),
+              children: [
+                !hideIcon && /* @__PURE__ */ jsx(StatusIndicator, {
+                  status,
+                  size: 1,
+                  className: withBaseName("icon")
+                }),
+                /* @__PURE__ */ jsx("span", {
+                  className: withBaseName("content"),
+                  children: content
+                })
+              ]
+            }),
+            !hideArrow && /* @__PURE__ */ jsx("div", {
+              className: withBaseName("arrow"),
+              ...arrowProps
+            })
+          ]
+        }),
+        isValidElement(children) && cloneElement(children, {
+          ...getTriggerProps(),
+          ref: triggerRef
+        })
+      ]
+    });
+  }
+);
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/dist-es/packages/core/src/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  isValidElement,\n} from \"react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { UseFloatingUIProps, makePrefixer, useForkRef } from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\"> {\n  /**\n   * The children will be the tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the state icon within the tooltip. Defaults to `false`.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * A string to determine the current status of the tooltip. Defaults to 'info'.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the tooltip is shown\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the tooltip is hidden\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the tooltip. Can be used in conditional situations like text truncation.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-ignore\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    return (\n      <>\n        {open && !disabled && (\n          <div\n            className={clsx(withBaseName(), withBaseName(status), className)}\n            ref={floating}\n            {...getTooltipProps()}\n          >\n            <div className={withBaseName(\"container\")}>\n              {!hideIcon && (\n                <StatusIndicator\n                  status={status}\n                  size={1}\n                  className={withBaseName(\"icon\")}\n                />\n              )}\n              <span className={withBaseName(\"content\")}>{content}</span>\n            </div>\n            {!hideArrow && (\n              <div className={withBaseName(\"arrow\")} {...arrowProps} />\n            )}\n          </div>\n        )}\n\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...getTriggerProps(),\n            ref: triggerRef,\n          })}\n      </>\n    );\n  }\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAS,GAAA,MAAA;AAAA,MACT,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAQ,IAAA,IAAA,CAAC,4BACP,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,GAAK,EAAA,QAAA;AAAA,UACJ,GAAG,eAAgB,EAAA;AAAA,UAEpB,QAAA,EAAA;AAAA,4BAAC,IAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,cACrC,QAAA,EAAA;AAAA,gBAAA,CAAC,4BACC,GAAA,CAAA,eAAA,EAAA;AAAA,kBACC,MAAA;AAAA,kBACA,IAAM,EAAA,CAAA;AAAA,kBACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,iBAChC,CAAA;AAAA,gCAED,GAAA,CAAA,MAAA,EAAA;AAAA,kBAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,kBAAI,QAAA,EAAA,OAAA;AAAA,iBAAQ,CAAA;AAAA,eAAA;AAAA,aACrD,CAAA;AAAA,YACC,CAAC,6BACC,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAI,GAAG,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SAE3D,CAAA;AAAA,QAGD,cAAe,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,eAAgB,EAAA;AAAA,UACnB,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,OAAA;AAAA,KACL,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/core/src/tooltip/useAriaAnnounce.js

@@ -0,0 +1,90 @@
+import { useRef, useEffect } from 'react';
+import '../aria-announcer/AriaAnnouncerContext.js';
+import 'react/jsx-runtime';
+import { useAriaAnnouncer } from '../aria-announcer/useAriaAnnouncer.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+
+function getDocument(floating) {
+  var _a;
+  return (_a = floating == null ? void 0 : floating.ownerDocument) != null ? _a : document;
+}
+function getWindow(value) {
+  var _a;
+  return (_a = getDocument(value).defaultView) != null ? _a : window;
+}
+function isElement(value) {
+  return value ? value instanceof getWindow(value).Element : false;
+}
+function getDelay(value, prop, pointerType) {
+  if (pointerType && pointerType !== "mouse") {
+    return 0;
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  return value == null ? void 0 : value[prop];
+}
+const useAriaAnnounce = (context, { delay = 0 }) => {
+  const { open, dataRef, refs } = context;
+  const pointerTypeRef = useRef();
+  const timeoutRef = useRef();
+  const blockMouseMoveRef = useRef(true);
+  const { announce } = useAriaAnnouncer();
+  useIsomorphicLayoutEffect(() => {
+    if (!open) {
+      pointerTypeRef.current = void 0;
+    }
+  });
+  useEffect(() => {
+    const reference = refs.reference.current;
+    function announceFloating() {
+      var _a;
+      const tooltipContent = (_a = refs.floating.current) == null ? void 0 : _a.innerText;
+      if (tooltipContent) {
+        announce(tooltipContent);
+      }
+    }
+    function onMouseEnter(event) {
+      clearTimeout(timeoutRef.current);
+      if (open) {
+        return;
+      }
+      blockMouseMoveRef.current = false;
+      dataRef.current.openEvent = event;
+      if (delay) {
+        timeoutRef.current = window.setTimeout(() => {
+          announceFloating();
+        }, getDelay(delay, "open", pointerTypeRef.current));
+      } else {
+        announceFloating();
+      }
+    }
+    if (isElement(reference)) {
+      reference.addEventListener("mouseenter", onMouseEnter);
+      return () => {
+        reference.removeEventListener("mouseenter", onMouseEnter);
+      };
+    }
+  }, [dataRef, delay, open, refs.reference, refs.floating, announce]);
+  function setPointerRef(event) {
+    pointerTypeRef.current = event.pointerType;
+  }
+  return {
+    reference: {
+      onPointerDown: setPointerRef,
+      onPointerEnter: setPointerRef
+    },
+    floating: {
+      onMouseEnter() {
+        clearTimeout(timeoutRef.current);
+      }
+    }
+  };
+};
+
+export { useAriaAnnounce };
+//# sourceMappingURL=useAriaAnnounce.js.map

package/dist-es/packages/core/src/tooltip/useAriaAnnounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAriaAnnounce.js","sources":["../src/tooltip/useAriaAnnounce.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { PointerEvent, useEffect, useRef } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nfunction getDocument(floating: HTMLElement | null) {\n  return floating?.ownerDocument ?? document;\n}\n\n// TODO: Check whether can be anything more restrictive than `any`\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction getWindow(value: any) {\n  return getDocument(value).defaultView ?? window;\n}\n\nfunction isElement(value: unknown): value is HTMLElement {\n  return value ? value instanceof getWindow(value).Element : false;\n}\n\nfunction getDelay(\n  value: Props[\"delay\"],\n  prop: \"open\" | \"close\",\n  pointerType?: PointerEvent[\"pointerType\"]\n) {\n  if (pointerType && pointerType !== \"mouse\") {\n    return 0;\n  }\n\n  if (typeof value === \"number\") {\n    return value;\n  }\n\n  return value?.[prop];\n}\n\ntype Props = {\n  delay?: number | Partial<{ open: number; close: number }>;\n};\n\nexport const useAriaAnnounce = (\n  context: FloatingContext,\n  { delay = 0 }: Props\n): ElementProps => {\n  const { open, dataRef, refs } = context;\n\n  const pointerTypeRef = useRef<PointerEvent[\"pointerType\"]>();\n  const timeoutRef = useRef<number>();\n  const blockMouseMoveRef = useRef(true);\n  const { announce } = useAriaAnnouncer();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!open) {\n      pointerTypeRef.current = undefined;\n    }\n  });\n\n  useEffect(() => {\n    const reference = refs.reference.current;\n    function announceFloating() {\n      const tooltipContent = refs.floating.current?.innerText;\n\n      if (tooltipContent) {\n        announce(tooltipContent);\n      }\n    }\n\n    function onMouseEnter(event: MouseEvent) {\n      clearTimeout(timeoutRef.current);\n\n      if (open) {\n        return;\n      }\n\n      blockMouseMoveRef.current = false;\n      dataRef.current.openEvent = event;\n\n      if (delay) {\n        timeoutRef.current = window.setTimeout(() => {\n          announceFloating();\n        }, getDelay(delay, \"open\", pointerTypeRef.current));\n      } else {\n        announceFloating();\n      }\n    }\n\n    if (isElement(reference)) {\n      reference.addEventListener(\"mouseenter\", onMouseEnter);\n      return () => {\n        reference.removeEventListener(\"mouseenter\", onMouseEnter);\n      };\n    }\n  }, [dataRef, delay, open, refs.reference, refs.floating, announce]);\n\n  function setPointerRef(event: PointerEvent) {\n    pointerTypeRef.current = event.pointerType;\n  }\n\n  return {\n    reference: {\n      onPointerDown: setPointerRef,\n      onPointerEnter: setPointerRef,\n    },\n    floating: {\n      onMouseEnter() {\n        clearTimeout(timeoutRef.current);\n      },\n    },\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/packages/core/src/tooltip/useTooltip.js

@@ -0,0 +1,102 @@
+import { offset, flip, shift, limitShift, arrow, useInteractions, useHover, safePolygon, useFocus, useRole, useDismiss } from '@floating-ui/react';
+import { useRef } from 'react';
+import { useControlled } from '../utils/useControlled.js';
+import { useFloatingUI } from '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useAriaAnnounce } from './useAriaAnnounce.js';
+
+function useTooltip(props) {
+  const {
+    enterDelay,
+    leaveDelay,
+    open: openProp,
+    onOpenChange,
+    placement: placementProp,
+    disableHoverListener,
+    disableFocusListener
+  } = props || {};
+  const arrowRef = useRef(null);
+  const [open, setOpen] = useControlled({
+    controlled: openProp,
+    default: false,
+    name: "Tooltip",
+    state: "open"
+  });
+  const handleOpenChange = (open2) => {
+    setOpen(open2);
+    onOpenChange == null ? void 0 : onOpenChange(open2);
+  };
+  const {
+    floating,
+    reference,
+    x,
+    y,
+    strategy,
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+    placement,
+    context
+  } = useFloatingUI({
+    open,
+    onOpenChange: handleOpenChange,
+    placement: placementProp,
+    middleware: [
+      offset(8),
+      flip(),
+      shift({ limiter: limitShift() }),
+      arrow({ element: arrowRef })
+    ]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useHover(context, {
+      delay: {
+        open: enterDelay,
+        close: leaveDelay
+      },
+      enabled: !disableHoverListener,
+      handleClose: safePolygon()
+    }),
+    useFocus(context, { enabled: !disableFocusListener }),
+    useRole(context, { role: "tooltip" }),
+    useDismiss(context),
+    useAriaAnnounce(context, {
+      delay: {
+        open: enterDelay,
+        close: leaveDelay
+      }
+    })
+  ]);
+  const arrowProps = {
+    ref: arrowRef,
+    style: {
+      left: arrowX ? `${arrowX}px` : "",
+      top: arrowY ? `${arrowY}px` : ""
+    }
+  };
+  const getTooltipProps = () => {
+    return getFloatingProps({
+      "data-placement": placement,
+      ref: floating,
+      style: {
+        top: y != null ? y : "",
+        left: x != null ? x : "",
+        position: strategy
+      }
+    });
+  };
+  const getTriggerProps = () => getReferenceProps({
+    ref: reference
+  });
+  return {
+    arrowProps,
+    open,
+    floating,
+    reference,
+    getTooltipProps,
+    getTriggerProps
+  };
+}
+
+export { useTooltip };
+//# sourceMappingURL=useTooltip.js.map

package/dist-es/packages/core/src/tooltip/useTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n  arrow,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  /**\n   * Do not respond to focus events.\n   */\n  disableFocusListener?: boolean;\n  /**\n   * Do not respond to hover events.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This prop won't impact the enter touch delay (`enterTouchDelay`).\n   */\n  enterDelay?: number;\n  /**\n   * The number of milliseconds to wait before hiding the tooltip.\n   * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n   */\n  leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n  const {\n    enterDelay,\n    leaveDelay,\n    open: openProp,\n    onOpenChange,\n    placement: placementProp,\n    disableHoverListener,\n    disableFocusListener,\n  } = props || {};\n\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: false,\n    name: \"Tooltip\",\n    state: \"open\",\n  });\n  const handleOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const {\n    floating,\n    reference,\n    x,\n    y,\n    strategy,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n    placement,\n    context,\n  } = useFloatingUI({\n    open,\n    onOpenChange: handleOpenChange,\n    placement: placementProp,\n    middleware: [\n      offset(8),\n      flip(),\n      shift({ limiter: limitShift() }),\n      arrow({ element: arrowRef }),\n    ],\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n      enabled: !disableHoverListener,\n      handleClose: safePolygon(),\n    }),\n    useFocus(context, { enabled: !disableFocusListener }),\n    useRole(context, { role: \"tooltip\" }),\n    useDismiss(context),\n    useAriaAnnounce(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n    }),\n  ]);\n\n  const arrowProps = {\n    ref: arrowRef,\n    style: {\n      left: arrowX ? `${arrowX}px` : \"\",\n      top: arrowY ? `${arrowY}px` : \"\",\n    },\n  };\n\n  const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n    return getFloatingProps({\n      // @ts-ignore\n      \"data-placement\": placement,\n      ref: floating,\n      style: {\n        top: y ?? \"\",\n        left: x ?? \"\",\n        position: strategy,\n      },\n    });\n  };\n\n  const getTriggerProps = () =>\n    getReferenceProps({\n      ref: reference,\n    });\n\n  return {\n    arrowProps,\n    open,\n    floating,\n    reference,\n    getTooltipProps,\n    getTriggerProps,\n  };\n}\n"],"names":["open"],"mappings":"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"}

package/dist-es/packages/core/src/utils/marginMiddleware.js.map

@@ -1 +1 @@
-{"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\nimport { MiddlewareArguments } from \"@floating-ui/react-dom-interactions\";\n\nexport const margin = (value = 0): Middleware => ({\n  name: \"margin\",\n  options: value,\n  fn(middlewareArguments: MiddlewareArguments) {\n    const { x, y, elements } = middlewareArguments;\n\n    if (elements.floating.children.length > 0) {\n      const rootChildElement = elements.floating.children[0] as HTMLElement;\n      rootChildElement.style.setProperty(\"margin\", value.toString());\n    }\n    return {\n      x: x,\n      y: y,\n    };\n  },\n});\n"],"names":[],"mappings":"AAGa,MAAA,MAAA,GAAS,CAAC,KAAA,GAAQ,CAAmB,MAAA;AAAA,EAChD,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,KAAA;AAAA,EACT,GAAG,mBAA0C,EAAA;AAC3C,IAAA,MAAM,EAAE,CAAA,EAAG,CAAG,EAAA,QAAA,EAAa,GAAA,mBAAA,CAAA;AAE3B,IAAA,IAAI,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA;AACzC,MAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,CAAA,CAAA,CAAA;AACpD,MAAA,gBAAA,CAAiB,KAAM,CAAA,WAAA,CAAY,QAAU,EAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,KAC/D;AACA,IAAO,OAAA;AAAA,MACL,CAAA;AAAA,MACA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAA;;;;"}
+{"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\nimport { MiddlewareArguments } from \"@floating-ui/react\";\n\nexport const margin = (value = 0): Middleware => ({\n  name: \"margin\",\n  options: value,\n  fn(middlewareArguments: MiddlewareArguments) {\n    const { x, y, elements } = middlewareArguments;\n\n    if (elements.floating.children.length > 0) {\n      const rootChildElement = elements.floating.children[0] as HTMLElement;\n      rootChildElement.style.setProperty(\"margin\", value.toString());\n    }\n    return {\n      x: x,\n      y: y,\n    };\n  },\n});\n"],"names":[],"mappings":"AAGa,MAAA,MAAA,GAAS,CAAC,KAAA,GAAQ,CAAmB,MAAA;AAAA,EAChD,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,KAAA;AAAA,EACT,GAAG,mBAA0C,EAAA;AAC3C,IAAA,MAAM,EAAE,CAAA,EAAG,CAAG,EAAA,QAAA,EAAa,GAAA,mBAAA,CAAA;AAE3B,IAAA,IAAI,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA;AACzC,MAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,CAAA,CAAA,CAAA;AACpD,MAAA,gBAAA,CAAiB,KAAM,CAAA,WAAA,CAAY,QAAU,EAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,KAC/D;AACA,IAAO,OAAA;AAAA,MACL,CAAA;AAAA,MACA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAA;;;;"}

package/dist-es/packages/core/src/utils/useFloatingUI.js

@@ -0,0 +1,33 @@
+import { flip, shift, limitShift, useFloating, autoUpdate } from '@floating-ui/react';
+
+const DEFAULT_FLOATING_UI_MIDDLEWARE = [
+  flip(),
+  shift({ limiter: limitShift() })
+];
+function useFloatingUI(props) {
+  const {
+    placement,
+    strategy,
+    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,
+    open = false,
+    onOpenChange
+  } = props;
+  const { reference, floating, refs, update, ...rest } = useFloating({
+    placement,
+    strategy,
+    middleware,
+    open,
+    onOpenChange,
+    whileElementsMounted: autoUpdate
+  });
+  return {
+    reference,
+    floating,
+    refs,
+    update,
+    ...rest
+  };
+}
+
+export { DEFAULT_FLOATING_UI_MIDDLEWARE, useFloatingUI };
+//# sourceMappingURL=useFloatingUI.js.map

package/dist-es/packages/core/src/utils/useFloatingUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type { Middleware, Placement, Strategy } from \"@floating-ui/react\";\nimport {\n  autoUpdate,\n  flip,\n  limitShift,\n  shift,\n  useFloating,\n} from \"@floating-ui/react\";\n\nexport type UseFloatingUIProps = {\n  /**\n   * Set position relative to trigger\n   */\n  placement?: Placement;\n  strategy?: Strategy;\n  middleware?: Middleware[];\n  /**\n   * Set visible state. Defaults to false\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n};\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n  props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n  const {\n    placement,\n    strategy,\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n  } = props;\n\n  const { reference, floating, refs, update, ...rest } = useFloating({\n    placement,\n    strategy,\n    middleware,\n    open,\n    onOpenChange,\n    whileElementsMounted: autoUpdate,\n  });\n\n  return {\n    reference,\n    floating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":[],"mappings":";;AA0BO,MAAM,8BAAiC,GAAA;AAAA,EAC5C,IAAK,EAAA;AAAA,EACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AACjC,EAAA;AAEO,SAAS,cACd,KACgC,EAAA;AAChC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAa,GAAA,8BAAA;AAAA,IACb,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,MAAM,MAAW,EAAA,GAAA,IAAA,KAAS,WAAY,CAAA;AAAA,IACjE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAA,UAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACF;;;;"}

package/dist-es/packages/core/src/viewport/ViewportProvider.js

@@ -1,5 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useLayoutEffect } from 'react';
+import { createContext, useContext, useState } from 'react';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
+import '../salt-provider/SaltProvider.js';
 
 const ViewportContext = createContext(null);
 const ViewportProvider = ({ children }) => {
@@ -7,7 +11,7 @@ const ViewportProvider = ({ children }) => {
   const [viewport, setViewport] = useState(existingViewport);
   const noExistingViewport = existingViewport === null;
   const viewportValue = existingViewport || viewport || 0;
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     let observer = null;
     if (noExistingViewport) {
       observer = new ResizeObserver(

package/dist-es/packages/core/src/viewport/ViewportProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useLayoutEffect,\n  useState,\n  useContext,\n  ReactNode,\n} from \"react\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n  children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n  // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n  const existingViewport = useContext(ViewportContext);\n  const [viewport, setViewport] = useState(existingViewport);\n\n  const noExistingViewport = existingViewport === null;\n  const viewportValue = existingViewport || viewport || 0;\n\n  useLayoutEffect(() => {\n    let observer: ResizeObserver | null = null;\n\n    if (noExistingViewport) {\n      observer = new ResizeObserver(\n        (observerEntries: ResizeObserverEntry[]) => {\n          setViewport(observerEntries[0].contentRect.width);\n        }\n      );\n\n      observer.observe(document.body);\n    }\n\n    return () => {\n      if (observer) {\n        observer.disconnect();\n      }\n    };\n  }, [noExistingViewport]);\n\n  return (\n    <ViewportContext.Provider value={viewportValue}>\n      {children}\n    </ViewportContext.Provider>\n  );\n};\n\nconst useViewport = (): number => {\n  const value = useContext(ViewportContext);\n  return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":[],"mappings":";;;AAQM,MAAA,eAAA,GAAkB,cAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmB,WAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;"}
+{"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n  children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n  // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n  const existingViewport = useContext(ViewportContext);\n  const [viewport, setViewport] = useState(existingViewport);\n\n  const noExistingViewport = existingViewport === null;\n  const viewportValue = existingViewport || viewport || 0;\n\n  useIsomorphicLayoutEffect(() => {\n    let observer: ResizeObserver | null = null;\n\n    if (noExistingViewport) {\n      observer = new ResizeObserver(\n        (observerEntries: ResizeObserverEntry[]) => {\n          setViewport(observerEntries[0].contentRect.width);\n        }\n      );\n\n      observer.observe(document.body);\n    }\n\n    return () => {\n      if (observer) {\n        observer.disconnect();\n      }\n    };\n  }, [noExistingViewport]);\n\n  return (\n    <ViewportContext.Provider value={viewportValue}>\n      {children}\n    </ViewportContext.Provider>\n  );\n};\n\nconst useViewport = (): number => {\n  const value = useContext(ViewportContext);\n  return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":[],"mappings":";;;;;;;AAGM,MAAA,eAAA,GAAkB,cAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmB,WAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;"}

package/dist-types/border-item/BorderItem.d.ts

@@ -14,7 +14,7 @@ export declare type BorderItemProps<T extends ElementType> = PolymorphicComponen
      */
     verticalAlignment?: GridItemProps<T>["verticalAlignment"];
     /**
-     * Position in the border layout
+     * Position in the Border Layout
      */
     position: BorderPosition;
     /**

package/dist-types/card/Card.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithoutRef } from "react";
+import "./Card.css";
+export interface CardProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * If `true`, the card will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content
+     * on the page.
+     */
+    interactable?: boolean;
+}
+/**
+ * Card component is a sheet if material that serves as an entry point to more detailed information.
+ * Cards display content composed of different elements whose size or supported actions vary.
+ */
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist-types/flex-layout/FlexLayout.d.ts

@@ -25,6 +25,8 @@ export declare type FlexLayoutProps<T extends ElementType> = PolymorphicComponen
      */
     justify?: FlexContentAlignment;
     /**
+     * **Deprecated:** For separators see `StackLayout` component instead.
+     *
      * Adds a separator between elements if wrap is not active, default is false.
      */
     separators?: LayoutSeparator | true;

package/dist-types/flow-layout/FlowLayout.d.ts

@@ -1,6 +1,7 @@
-import { ElementType, HTMLAttributes } from "react";
+import { ElementType, ReactElement } from "react";
 import { FlexLayoutProps } from "../flex-layout";
-export interface FlowLayoutProps extends HTMLAttributes<HTMLDivElement> {
+import { PolymorphicComponentPropWithRef } from "../utils";
+export declare type FlowLayoutProps<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".
      */
@@ -13,5 +14,7 @@ export interface FlowLayoutProps extends HTMLAttributes<HTMLDivElement> {
      * Defines the alignment along the main axis, default is "start"
      */
     justify?: FlexLayoutProps<ElementType>["justify"];
-}
-export declare const FlowLayout: import("react").ForwardRefExoticComponent<FlowLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+}>;
+declare type FlowLayoutComponent = <T extends ElementType = "div">(props: FlowLayoutProps<T>) => ReactElement | null;
+export declare const FlowLayout: FlowLayoutComponent;
+export {};

package/dist-types/index.d.ts

@@ -3,16 +3,21 @@ export * from "./border-item";
 export * from "./border-layout";
 export * from "./breakpoints";
 export * from "./button";
+export * from "./card";
 export * from "./flex-item";
 export * from "./flex-layout";
 export * from "./flow-layout";
 export * from "./grid-item";
 export * from "./grid-layout";
 export * from "./link";
+export * from "./panel";
+export * from "./spinner";
 export * from "./stack-layout";
 export * from "./status-indicator";
 export * from "./text";
 export * from "./theme";
 export * from "./salt-provider";
+export * from "./split-layout";
+export * from "./tooltip";
 export * from "./utils";
 export * from "./viewport";

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

@@ -8,7 +8,7 @@ import "./Link.css";
  * @example
  * <LinkExample to="#link">Action</LinkExample>
  */
-export interface LinkProps extends Omit<TextProps<"a">, "as"> {
+export interface LinkProps extends Omit<TextProps<"a">, "as" | "disabled"> {
     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>>;
+export declare const Link: import("react").ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist-types/panel/Panel.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from "react";
+import "./Panel.css";
+/**
+ * Panel component that acts as wrapper around a node
+ *
+ * @example
+ * const PanelExample = () => (
+ *   <Panel>
+ *     <p>This is a panel around some text.</p>
+ *   </Panel>
+ * );
+ *
+ */
+export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Styling variant; defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
+}
+export declare const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist-types/spinner/Spinner.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from "react";
+import "./Spinner.css";
+/**
+ * Spinner component, provides an indeterminate loading indicator
+ *
+ * @example
+ * <Spinner size="default | large" />
+ */
+export declare const SpinnerSizeValues: readonly ["default", "large"];
+export declare type SpinnerSize = typeof SpinnerSizeValues[number];
+export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)
+     */
+    announcerInterval?: number;
+    /**
+     *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)
+     */
+    announcerTimeout?: number;
+    /**
+     * The className(s) of the component
+     */
+    className?: string;
+    /**
+     * Determines the message to be announced by the component when it unmounts. Set to null if not needed.
+     */
+    completionAnnouncement?: string | null;
+    /**
+     * If true, built in aria announcer will be inactive
+     */
+    disableAnnouncer?: boolean;
+    /**
+     * The prop for the role attribute of the component
+     */
+    role?: string;
+    /**
+     * Determines the size of the spinner. Must be one of: 'default', 'large'.
+     */
+    size?: SpinnerSize;
+    /**
+     * The ids of the SvgSpinner components
+     */
+    id?: string;
+}
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist-types/spinner/svgSpinners/SpinnerSVG.d.ts

@@ -0,0 +1,5 @@
+import { SVGAttributes } from "react";
+export declare const SpinnerSVG: (props: {
+    id: string;
+    rest?: Omit<SVGAttributes<SVGSVGElement>, "id">;
+}) => JSX.Element;

package/dist-types/split-layout/SplitLayout.d.ts

@@ -0,0 +1,28 @@
+import { ElementType, ReactElement, ReactNode } from "react";
+import { FlexLayoutProps } from "../flex-layout";
+import { PolymorphicComponentPropWithRef } from "../utils";
+export declare type SplitLayoutProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
+    /**
+     * Defines the default behavior for how flex items are laid out along the cross axis on the current line.
+     */
+    align?: FlexLayoutProps<ElementType>["align"];
+    /**
+     * Establishes the main-axis, defining the direction children are placed. Default is "row".
+     */
+    direction?: FlexLayoutProps<ElementType>["direction"];
+    /**
+     * End component to be rendered.
+     */
+    endItem?: ReactNode;
+    /**
+     * Controls the space between left and right items.
+     */
+    gap?: FlexLayoutProps<ElementType>["gap"];
+    /**
+     * Start component to be rendered.
+     */
+    startItem?: ReactNode;
+}>;
+declare type SplitLayoutComponent = <T extends ElementType = "div">(props: SplitLayoutProps<T>) => ReactElement | null;
+export declare const SplitLayout: SplitLayoutComponent;
+export {};

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

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