@salt-ds/core 1.0.0

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

@@ -0,0 +1,103 @@
+import { useCallback, useRef } from 'react';
+
+let hadKeyboardEvent = true;
+let hadFocusVisibleRecently = false;
+let hadFocusVisibleRecentlyTimeout;
+const inputTypesWhitelist = {
+  text: true,
+  search: true,
+  url: true,
+  tel: true,
+  email: true,
+  password: true,
+  number: true,
+  date: true,
+  month: true,
+  week: true,
+  time: true,
+  datetime: true,
+  "datetime-local": true
+};
+function focusTriggersKeyboardModality(node) {
+  if (node.tagName === "INPUT" && inputTypesWhitelist[node.type] && !node.readOnly) {
+    return true;
+  }
+  if (node.tagName === "TEXTAREA" && !node.readOnly) {
+    return true;
+  }
+  return node.isContentEditable;
+}
+function handleKeyDown(event) {
+  if (event.metaKey || event.altKey || event.ctrlKey) {
+    return;
+  }
+  hadKeyboardEvent = true;
+}
+function handlePointerDown() {
+  hadKeyboardEvent = false;
+}
+function handleVisibilityChange() {
+  if (this.visibilityState === "hidden") {
+    if (hadFocusVisibleRecently) {
+      hadKeyboardEvent = true;
+    }
+  }
+}
+function prepare(doc) {
+  doc.addEventListener("keydown", handleKeyDown, true);
+  doc.addEventListener("mousedown", handlePointerDown, true);
+  doc.addEventListener("pointerdown", handlePointerDown, true);
+  doc.addEventListener("touchstart", handlePointerDown, true);
+  doc.addEventListener("visibilitychange", handleVisibilityChange, true);
+}
+function teardown(doc) {
+  doc.removeEventListener("keydown", handleKeyDown, true);
+  doc.removeEventListener("mousedown", handlePointerDown, true);
+  doc.removeEventListener("pointerdown", handlePointerDown, true);
+  doc.removeEventListener("touchstart", handlePointerDown, true);
+  doc.removeEventListener("visibilitychange", handleVisibilityChange, true);
+}
+function isFocusVisible(event) {
+  const { target } = event;
+  try {
+    return target.matches(":focus-visible");
+  } catch (error) {
+  }
+  return hadKeyboardEvent || focusTriggersKeyboardModality(target);
+}
+function useIsFocusVisible() {
+  const ref = useCallback((node) => {
+    if (node != null) {
+      prepare(node.ownerDocument);
+    }
+  }, []);
+  const isFocusVisibleRef = useRef(false);
+  function handleBlurVisible() {
+    if (isFocusVisibleRef.current) {
+      hadFocusVisibleRecently = true;
+      window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+      hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {
+        hadFocusVisibleRecently = false;
+      }, 100);
+      isFocusVisibleRef.current = false;
+      return true;
+    }
+    return false;
+  }
+  function handleFocusVisible(event) {
+    if (isFocusVisible(event)) {
+      isFocusVisibleRef.current = true;
+      return true;
+    }
+    return false;
+  }
+  return {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref
+  };
+}
+
+export { teardown, useIsFocusVisible };
+//# sourceMappingURL=useIsFocusVisible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIsFocusVisible.js","sources":["../src/utils/useIsFocusVisible.ts"],"sourcesContent":["// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js\nimport { useCallback, useRef, FocusEvent, MutableRefObject, Ref } from \"react\";\n\nlet hadKeyboardEvent = true;\nlet hadFocusVisibleRecently = false;\nlet hadFocusVisibleRecentlyTimeout: number;\n\nconst inputTypesWhitelist: Record<string, boolean> = {\n  text: true,\n  search: true,\n  url: true,\n  tel: true,\n  email: true,\n  password: true,\n  number: true,\n  date: true,\n  month: true,\n  week: true,\n  time: true,\n  datetime: true,\n  \"datetime-local\": true,\n};\n\n/**\n * Computes whether the given element should automatically trigger the\n * `focus-visible` class being added, i.e. whether it should always match\n * `:focus-visible` when focused.\n * @param {Element} node\n * @returns {boolean}\n */\nfunction focusTriggersKeyboardModality(node: HTMLElement) {\n  if (\n    node.tagName === \"INPUT\" &&\n    inputTypesWhitelist[(node as HTMLInputElement).type] &&\n    !(node as HTMLInputElement).readOnly\n  ) {\n    return true;\n  }\n\n  if (node.tagName === \"TEXTAREA\" && !(node as HTMLInputElement).readOnly) {\n    return true;\n  }\n\n  return node.isContentEditable;\n}\n\n/**\n * Keep track of our keyboard modality state with `hadKeyboardEvent`.\n * If the most recent user interaction was via the keyboard;\n * and the key press did not include a meta, alt/option, or control key;\n * then the modality is keyboard. Otherwise, the modality is not keyboard.\n * @param {KeyboardEvent} event\n */\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (event.metaKey || event.altKey || event.ctrlKey) {\n    return;\n  }\n  hadKeyboardEvent = true;\n}\n\n/**\n * If at any point a user clicks with a pointing device, ensure that we change\n * the modality away from keyboard.\n * This avoids the situation where a user presses a key on an already focused\n * element, and then clicks on a different element, focusing it with a\n * pointing device, while we still think we're in keyboard modality.\n */\nfunction handlePointerDown() {\n  hadKeyboardEvent = false;\n}\n\nfunction handleVisibilityChange(this: Document) {\n  if (this.visibilityState === \"hidden\") {\n    // If the tab becomes active again, the browser will handle calling focus\n    // on the element (Safari actually calls it twice).\n    // If this tab change caused a blur on an element with focus-visible,\n    // re-apply the class when the user switches back to the tab.\n    if (hadFocusVisibleRecently) {\n      hadKeyboardEvent = true;\n    }\n  }\n}\n\nfunction prepare(doc: Document) {\n  doc.addEventListener(\"keydown\", handleKeyDown, true);\n  doc.addEventListener(\"mousedown\", handlePointerDown, true);\n  doc.addEventListener(\"pointerdown\", handlePointerDown, true);\n  doc.addEventListener(\"touchstart\", handlePointerDown, true);\n  doc.addEventListener(\"visibilitychange\", handleVisibilityChange, true);\n}\n\nexport function teardown(doc: Document): void {\n  doc.removeEventListener(\"keydown\", handleKeyDown, true);\n  doc.removeEventListener(\"mousedown\", handlePointerDown, true);\n  doc.removeEventListener(\"pointerdown\", handlePointerDown, true);\n  doc.removeEventListener(\"touchstart\", handlePointerDown, true);\n  doc.removeEventListener(\"visibilitychange\", handleVisibilityChange, true);\n}\n\nfunction isFocusVisible(event: FocusEvent<HTMLElement>) {\n  const { target } = event;\n  try {\n    return target.matches(\":focus-visible\");\n  } catch (error) {\n    // Browsers not implementing :focus-visible will throw a SyntaxError.\n    // We use our own heuristic for those browsers.\n    // Rethrow might be better if it's not the expected error but do we really\n    // want to crash if focus-visible malfunctioned?\n  }\n\n  // No need for validFocusTarget check. The user does that by attaching it to\n  // focused events only.\n  return hadKeyboardEvent || focusTriggersKeyboardModality(target);\n}\n\nexport function useIsFocusVisible<T extends HTMLElement = HTMLElement>(): {\n  isFocusVisibleRef: MutableRefObject<boolean>;\n  onBlur: () => void;\n  onFocus: (event: FocusEvent<T>) => void;\n  ref: Ref<T>;\n} {\n  const ref = useCallback((node: T | null) => {\n    if (node != null) {\n      prepare(node.ownerDocument);\n    }\n  }, []);\n\n  const isFocusVisibleRef = useRef(false);\n\n  /**\n   * Should be called if a blur event is fired\n   */\n  function handleBlurVisible() {\n    // checking against potential state variable does not suffice if we focus and blur synchronously.\n    // React wouldn't have time to trigger a re-render so `focusVisible` would be stale.\n    // Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.\n    // This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751\n    // TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).\n    if (isFocusVisibleRef.current) {\n      // To detect a tab/window switch, we look for a blur event followed\n      // rapidly by a visibility change.\n      // If we don't see a visibility change within 100ms, it's probably a\n      // regular focus change.\n      hadFocusVisibleRecently = true;\n      window.clearTimeout(hadFocusVisibleRecentlyTimeout);\n      hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {\n        hadFocusVisibleRecently = false;\n      }, 100);\n\n      isFocusVisibleRef.current = false;\n\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Should be called if a blur event is fired\n   */\n  function handleFocusVisible(event: FocusEvent<HTMLElement>) {\n    if (isFocusVisible(event)) {\n      isFocusVisibleRef.current = true;\n      return true;\n    }\n    return false;\n  }\n\n  return {\n    isFocusVisibleRef,\n    onFocus: handleFocusVisible,\n    onBlur: handleBlurVisible,\n    ref,\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined" ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect };
+//# sourceMappingURL=useIsomorphicLayoutEffect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.js","sources":["../src/utils/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useLayoutEffect, useEffect } from \"react\";\n\n// React currently throws a warning when using useLayoutEffect on the server.\n// To get around it, we can conditionally useEffect on the server (no-op) and\n// useLayoutEffect in the browser. We need useLayoutEffect because we want\n// `connect` to perform sync updates to a ref to save the latest props after\n// a render is actually committed to the DOM.\nexport const useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" &&\n  typeof window.document !== \"undefined\" &&\n  typeof window.document.createElement !== \"undefined\"\n    ? useLayoutEffect\n    : useEffect;\n"],"names":[],"mappings":";;AAOO,MAAM,yBACX,GAAA,OAAO,MAAW,KAAA,WAAA,IAClB,OAAO,MAAA,CAAO,QAAa,KAAA,WAAA,IAC3B,OAAO,MAAA,CAAO,QAAS,CAAA,aAAA,KAAkB,cACrC,eACA,GAAA;;;;"}

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

@@ -0,0 +1,12 @@
+import { useRef, useEffect } from 'react';
+
+function usePrevious(value, deps = [], initialValue) {
+  const ref = useRef(initialValue);
+  useEffect(() => {
+    ref.current = value;
+  }, deps);
+  return ref.current;
+}
+
+export { usePrevious };
+//# sourceMappingURL=usePrevious.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.js","sources":["../src/utils/usePrevious.ts"],"sourcesContent":["import { useRef, useEffect, DependencyList } from \"react\";\n\nexport function usePrevious<T>(\n  value: T,\n  deps: DependencyList = [],\n  initialValue?: T\n): T | undefined {\n  const ref = useRef<T | undefined>(initialValue);\n\n  useEffect(() => {\n    ref.current = value;\n  }, deps); // eslint-disable-line react-hooks/exhaustive-deps\n  return ref.current;\n}\n"],"names":[],"mappings":";;AAEO,SAAS,WACd,CAAA,KAAA,EACA,IAAuB,GAAA,IACvB,YACe,EAAA;AACf,EAAM,MAAA,GAAA,GAAM,OAAsB,YAAY,CAAA,CAAA;AAE9C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,GAAA,CAAI,OAAU,GAAA,KAAA,CAAA;AAAA,KACb,IAAI,CAAA,CAAA;AACP,EAAA,OAAO,GAAI,CAAA,OAAA,CAAA;AACb;;;;"}

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

@@ -0,0 +1,64 @@
+import { useBreakpoints } from '../salt-provider/SaltProvider.js';
+import { useViewport } from '../viewport/ViewportProvider.js';
+
+const getCurrentBreakpoint = (breakpoints, width) => {
+  const breakpointList = Object.entries(breakpoints);
+  const [currentBreakpoint] = breakpointList.reduce((acc, val) => {
+    const [, accWidth] = acc;
+    const [breakpoint, breakpointWidth] = val;
+    if (breakpointWidth < width && breakpointWidth > accWidth) {
+      return [breakpoint, breakpointWidth];
+    }
+    return [...acc];
+  }, breakpointList[0]);
+  return currentBreakpoint;
+};
+const useCurrentBreakpoint = () => {
+  const viewport = useViewport();
+  const breakpoints = useBreakpoints();
+  return getCurrentBreakpoint(breakpoints, viewport);
+};
+const useOrderedBreakpoints = () => {
+  const breakpoints = useBreakpoints();
+  const orderedBreakpoints = Object.entries(breakpoints).sort(([, a], [, b]) => a - b).map(([key]) => key);
+  return orderedBreakpoints;
+};
+const isObject = (value) => {
+  const type = typeof value;
+  return value !== null && (type === "object" || type === "function");
+};
+const hasBreakpointValues = (value, breakpoints) => {
+  return isObject(value) && Object.keys(value).every((key) => key in breakpoints);
+};
+const getResponsiveValue = (breakpointValues, breakpoints, viewport, defaultValue) => {
+  const value = Object.entries(breakpointValues).reduce(
+    (acc, val) => {
+      const [accWidth] = acc;
+      const [breakpoint, breakpointValue] = val;
+      const breakpointWidth = breakpoints[breakpoint];
+      if (breakpointWidth >= accWidth && breakpointWidth <= breakpoints[viewport]) {
+        return [breakpointWidth, breakpointValue];
+      }
+      return acc;
+    },
+    [0, defaultValue]
+  )[1];
+  return value;
+};
+const useResponsiveProp = (value, defaultValue) => {
+  const breakpoints = useBreakpoints();
+  const viewport = useViewport();
+  const currentViewport = getCurrentBreakpoint(breakpoints, viewport);
+  if (hasBreakpointValues(value, breakpoints)) {
+    return getResponsiveValue(
+      value,
+      breakpoints,
+      currentViewport,
+      defaultValue
+    );
+  }
+  return value;
+};
+
+export { getCurrentBreakpoint, useCurrentBreakpoint, useOrderedBreakpoints, useResponsiveProp };
+//# sourceMappingURL=useResponsiveProp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveProp.js","sources":["../src/utils/useResponsiveProp.ts"],"sourcesContent":["import { Breakpoints } from \"../breakpoints\";\nimport { useBreakpoints } from \"../salt-provider\";\nimport { useViewport } from \"../viewport\";\n\ntype BreakpointProp<T> = {\n  [K in keyof Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | BreakpointProp<T>;\n\nexport const getCurrentBreakpoint = (\n  breakpoints: Breakpoints,\n  width: number\n) => {\n  const breakpointList = Object.entries(breakpoints);\n\n  const [currentBreakpoint] = (\n    breakpointList as [keyof Breakpoints, number][]\n  ).reduce((acc, val) => {\n    const [, accWidth] = acc;\n    const [breakpoint, breakpointWidth] = val;\n    if (breakpointWidth < width && breakpointWidth > accWidth) {\n      return [breakpoint, breakpointWidth];\n    }\n    return [...acc];\n  }, breakpointList[0] as [keyof Breakpoints, number]);\n\n  return currentBreakpoint;\n};\n\nexport const useCurrentBreakpoint = () => {\n  const viewport = useViewport();\n\n  const breakpoints = useBreakpoints();\n\n  return getCurrentBreakpoint(breakpoints, viewport);\n};\n\nexport const useOrderedBreakpoints = () => {\n  const breakpoints = useBreakpoints();\n\n  const orderedBreakpoints = Object.entries(breakpoints)\n    .sort(([, a], [, b]) => a - b)\n    .map(([key]) => key);\n\n  return orderedBreakpoints;\n};\n\nconst isObject = <T>(\n  value: T\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): value is Record<string | number | symbol, any> => {\n  const type = typeof value;\n  return value !== null && (type === \"object\" || type === \"function\");\n};\n\nconst hasBreakpointValues = <T>(\n  value: ResponsiveProp<T>,\n  breakpoints: Breakpoints\n): value is BreakpointProp<T> => {\n  return (\n    isObject(value) && Object.keys(value).every((key) => key in breakpoints)\n  );\n};\n\nconst getResponsiveValue = <T>(\n  breakpointValues: BreakpointProp<T>,\n  breakpoints: Breakpoints,\n  viewport: keyof Breakpoints,\n  defaultValue: T\n) => {\n  const value = Object.entries(breakpointValues).reduce<[number, T]>(\n    (acc, val) => {\n      const [accWidth] = acc;\n      const [breakpoint, breakpointValue] = val;\n\n      const breakpointWidth =\n        breakpoints[breakpoint as keyof typeof breakpoints];\n\n      if (\n        breakpointWidth >= accWidth &&\n        breakpointWidth <= breakpoints[viewport]\n      ) {\n        return [breakpointWidth, breakpointValue];\n      }\n\n      return acc;\n    },\n    [0, defaultValue]\n  )[1];\n\n  return value;\n};\n\nexport const useResponsiveProp = <T>(\n  value: ResponsiveProp<T>,\n  defaultValue: T\n) => {\n  const breakpoints = useBreakpoints();\n  const viewport = useViewport();\n\n  const currentViewport = getCurrentBreakpoint(breakpoints, viewport);\n\n  if (hasBreakpointValues(value, breakpoints)) {\n    return getResponsiveValue(\n      value,\n      breakpoints,\n      currentViewport,\n      defaultValue\n    );\n  }\n  return value;\n};\n"],"names":[],"mappings":";;;AAUa,MAAA,oBAAA,GAAuB,CAClC,WAAA,EACA,KACG,KAAA;AACH,EAAM,MAAA,cAAA,GAAiB,MAAO,CAAA,OAAA,CAAQ,WAAW,CAAA,CAAA;AAEjD,EAAA,MAAM,CAAC,iBAAiB,CAAA,GACtB,eACA,MAAO,CAAA,CAAC,KAAK,GAAQ,KAAA;AACrB,IAAM,MAAA,GAAG,QAAQ,CAAI,GAAA,GAAA,CAAA;AACrB,IAAM,MAAA,CAAC,UAAY,EAAA,eAAe,CAAI,GAAA,GAAA,CAAA;AACtC,IAAI,IAAA,eAAA,GAAkB,KAAS,IAAA,eAAA,GAAkB,QAAU,EAAA;AACzD,MAAO,OAAA,CAAC,YAAY,eAAe,CAAA,CAAA;AAAA,KACrC;AACA,IAAO,OAAA,CAAC,GAAG,GAAG,CAAA,CAAA;AAAA,GAChB,EAAG,eAAe,CAAiC,CAAA,CAAA,CAAA;AAEnD,EAAO,OAAA,iBAAA,CAAA;AACT,EAAA;AAEO,MAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAE7B,EAAA,MAAM,cAAc,cAAe,EAAA,CAAA;AAEnC,EAAO,OAAA,oBAAA,CAAqB,aAAa,QAAQ,CAAA,CAAA;AACnD,EAAA;AAEO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,cAAc,cAAe,EAAA,CAAA;AAEnC,EAAM,MAAA,kBAAA,GAAqB,OAAO,OAAQ,CAAA,WAAW,EAClD,IAAK,CAAA,CAAC,GAAG,CAAC,CAAA,EAAG,GAAG,CAAC,CAAM,KAAA,CAAA,GAAI,CAAC,CAAA,CAC5B,IAAI,CAAC,CAAC,GAAG,CAAA,KAAM,GAAG,CAAA,CAAA;AAErB,EAAO,OAAA,kBAAA,CAAA;AACT,EAAA;AAEA,MAAM,QAAA,GAAW,CACf,KAEmD,KAAA;AACnD,EAAA,MAAM,OAAO,OAAO,KAAA,CAAA;AACpB,EAAA,OAAO,KAAU,KAAA,IAAA,KAAS,IAAS,KAAA,QAAA,IAAY,IAAS,KAAA,UAAA,CAAA,CAAA;AAC1D,CAAA,CAAA;AAEA,MAAM,mBAAA,GAAsB,CAC1B,KAAA,EACA,WAC+B,KAAA;AAC/B,EACE,OAAA,QAAA,CAAS,KAAK,CAAA,IAAK,MAAO,CAAA,IAAA,CAAK,KAAK,CAAA,CAAE,KAAM,CAAA,CAAC,GAAQ,KAAA,GAAA,IAAO,WAAW,CAAA,CAAA;AAE3E,CAAA,CAAA;AAEA,MAAM,kBAAqB,GAAA,CACzB,gBACA,EAAA,WAAA,EACA,UACA,YACG,KAAA;AACH,EAAA,MAAM,KAAQ,GAAA,MAAA,CAAO,OAAQ,CAAA,gBAAgB,CAAE,CAAA,MAAA;AAAA,IAC7C,CAAC,KAAK,GAAQ,KAAA;AACZ,MAAM,MAAA,CAAC,QAAQ,CAAI,GAAA,GAAA,CAAA;AACnB,MAAM,MAAA,CAAC,UAAY,EAAA,eAAe,CAAI,GAAA,GAAA,CAAA;AAEtC,MAAA,MAAM,kBACJ,WAAY,CAAA,UAAA,CAAA,CAAA;AAEd,MAAA,IACE,eAAmB,IAAA,QAAA,IACnB,eAAmB,IAAA,WAAA,CAAY,QAC/B,CAAA,EAAA;AACA,QAAO,OAAA,CAAC,iBAAiB,eAAe,CAAA,CAAA;AAAA,OAC1C;AAEA,MAAO,OAAA,GAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,GAAG,YAAY,CAAA;AAAA,GAChB,CAAA,CAAA,CAAA,CAAA;AAEF,EAAO,OAAA,KAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoB,CAC/B,KAAA,EACA,YACG,KAAA;AACH,EAAA,MAAM,cAAc,cAAe,EAAA,CAAA;AACnC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAE7B,EAAM,MAAA,eAAA,GAAkB,oBAAqB,CAAA,WAAA,EAAa,QAAQ,CAAA,CAAA;AAElE,EAAI,IAAA,mBAAA,CAAoB,KAAO,EAAA,WAAW,CAAG,EAAA;AAC3C,IAAO,OAAA,kBAAA;AAAA,MACL,KAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}

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

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useLayoutEffect } from 'react';
+
+const ViewportContext = createContext(null);
+const ViewportProvider = ({ children }) => {
+  const existingViewport = useContext(ViewportContext);
+  const [viewport, setViewport] = useState(existingViewport);
+  const noExistingViewport = existingViewport === null;
+  const viewportValue = existingViewport || viewport || 0;
+  useLayoutEffect(() => {
+    let observer = null;
+    if (noExistingViewport) {
+      observer = new ResizeObserver(
+        (observerEntries) => {
+          setViewport(observerEntries[0].contentRect.width);
+        }
+      );
+      observer.observe(document.body);
+    }
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [noExistingViewport]);
+  return /* @__PURE__ */ jsx(ViewportContext.Provider, {
+    value: viewportValue,
+    children
+  });
+};
+const useViewport = () => {
+  const value = useContext(ViewportContext);
+  return value === null ? 0 : value;
+};
+
+export { ViewportContext, ViewportProvider, useViewport };
+//# sourceMappingURL=ViewportProvider.js.map

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

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

package/dist-types/aria-announcer/AriaAnnounce.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from "react";
+export interface AriaAnnounceProps {
+    /**
+     * String which will be announced by screen readers on change
+     */
+    announcement?: string;
+}
+export declare const AriaAnnounce: ComponentType<AriaAnnounceProps>;

package/dist-types/aria-announcer/AriaAnnouncerContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type AnnounceFn = (announcement: string, delay?: number) => void;
+export declare type AriaAnnouncer = {
+    announce: AnnounceFn;
+};
+export declare const AriaAnnouncerContext: import("react").Context<AriaAnnouncer | undefined>;

package/dist-types/aria-announcer/AriaAnnouncerProvider.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, ReactNode } from "react";
+export declare const ARIA_ANNOUNCE_DELAY = 150;
+export interface AriaAnnouncerProviderProps {
+    children?: ReactNode;
+    /**
+     * Style overrides for the aria-live element
+     */
+    style?: CSSProperties;
+}
+export declare function AriaAnnouncerProvider({ children, style, }: AriaAnnouncerProviderProps): JSX.Element;

package/dist-types/aria-announcer/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./AriaAnnouncerContext";
+export * from "./AriaAnnounce";
+export * from "./AriaAnnouncerProvider";
+export * from "./useAriaAnnouncer";

package/dist-types/aria-announcer/useAriaAnnouncer.d.ts

@@ -0,0 +1,6 @@
+import { AriaAnnouncer } from "./AriaAnnouncerContext";
+export declare type useAnnouncerOptions = {
+    debounce?: number;
+};
+export declare type useAriaAnnouncerHook = (options?: useAnnouncerOptions) => AriaAnnouncer;
+export declare const useAriaAnnouncer: useAriaAnnouncerHook;

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

@@ -0,0 +1,27 @@
+import { ElementType, ReactElement } from "react";
+import { GridItemProps } from "../grid-item";
+import "./BorderItem.css";
+import { PolymorphicComponentPropWithRef } from "../utils";
+export declare const BORDER_POSITION: readonly ["north", "west", "center", "east", "south"];
+export declare type BorderPosition = typeof BORDER_POSITION[number];
+export declare type BorderItemProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
+    /**
+     * Aligns a grid item inside a cell along the inline (row) axis. Defaults to "stretch"
+     */
+    horizontalAlignment?: GridItemProps<T>["horizontalAlignment"];
+    /**
+     * Aligns a grid item inside a cell along the block (column) axis. Defaults to "stretch"
+     */
+    verticalAlignment?: GridItemProps<T>["verticalAlignment"];
+    /**
+     * Position in the border layout
+     */
+    position: BorderPosition;
+    /**
+     * Defines if the item should stick to the edges of its container. Defaults to "false"
+     */
+    sticky?: boolean;
+}>;
+declare type BorderItemComponent = <T extends ElementType = "div">(props: BorderItemProps<T>) => ReactElement | null;
+export declare const BorderItem: BorderItemComponent;
+export {};

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

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

package/dist-types/border-layout/BorderLayout.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement, ElementType } from "react";
+import { GridLayoutProps } from "../grid-layout";
+import { PolymorphicComponentPropWithRef } from "../utils";
+import { BorderItemProps } from "../border-item";
+export declare type BorderLayoutProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
+    /**
+     * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0
+     */
+    gap?: GridLayoutProps<T>["gap"];
+    /**
+     * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0
+     */
+    columnGap?: GridLayoutProps<T>["columnGap"];
+    /**
+     * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0
+     */
+    rowGap?: GridLayoutProps<T>["rowGap"];
+    /**
+     * Border item components to be rendered.
+     */
+    children: ReactElement<BorderItemProps<T>>[];
+}>;
+declare type BorderLayoutComponent = <T extends ElementType = "div">(props: BorderLayoutProps<T>) => ReactElement | null;
+export declare const BorderLayout: BorderLayoutComponent;
+export {};

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

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

package/dist-types/breakpoints/Breakpoints.d.ts

@@ -0,0 +1,8 @@
+export declare type Breakpoints = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export declare const DEFAULT_BREAKPOINTS: Breakpoints;

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

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

package/dist-types/button/Button.d.ts

@@ -0,0 +1,20 @@
+import { ComponentPropsWithoutRef } from "react";
+import "./Button.css";
+export declare const ButtonVariantValues: readonly ["primary", "secondary", "cta"];
+export declare type ButtonVariant = typeof ButtonVariantValues[number];
+export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+    /**
+     * If `true`, the button will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the button will be focusable when disabled.
+     */
+    focusableWhenDisabled?: boolean;
+    /**
+     * The variant to use. Options are 'primary', 'secondary' and 'cta'.
+     * 'primary' is the default value.
+     */
+    variant?: ButtonVariant;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,2 @@
+export * from "./Button";
+export * from "./useButton";

package/dist-types/button/useButton.d.ts

@@ -0,0 +1,22 @@
+import { FocusEvent, KeyboardEvent, MouseEvent } from "react";
+export interface ButtonHookProps<T extends Element> {
+    disabled?: boolean;
+    focusableWhenDisabled?: boolean;
+    onKeyUp?: (event: KeyboardEvent<T>) => void;
+    onKeyDown?: (event: KeyboardEvent<T>) => void;
+    onClick?: (event: MouseEvent<T>) => void;
+    onBlur?: (event: FocusEvent<T>) => void;
+}
+export interface ButtonHookResult<T extends Element> {
+    active: boolean;
+    buttonProps: {
+        "aria-disabled"?: boolean;
+        disabled?: boolean;
+        tabIndex: number;
+        onBlur: (event: FocusEvent<T>) => void;
+        onClick?: (event: MouseEvent<T>) => void;
+        onKeyDown: (event: KeyboardEvent<T>) => void;
+        onKeyUp: (event: KeyboardEvent<T>) => void;
+    };
+}
+export declare const useButton: <T extends Element>({ disabled, focusableWhenDisabled, onKeyUp, onKeyDown, onClick, onBlur, }: ButtonHookProps<T>) => ButtonHookResult<T>;

package/dist-types/flex-item/FlexItem.d.ts

@@ -0,0 +1,23 @@
+import { ElementType, ReactElement } from "react";
+import { ResponsiveProp, PolymorphicComponentPropWithRef } from "../utils";
+import "./FlexItem.css";
+export declare const FLEX_ITEM_ALIGNMENTS: readonly ["start", "end", "center", "stretch"];
+export declare type flexItemAlignment = typeof FLEX_ITEM_ALIGNMENTS[number];
+export declare type FlexItemProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
+    /**
+     * Allows the alignment specified by parent to be overridden for individual items, default is "start".
+     */
+    align?: flexItemAlignment;
+    /**
+ * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.
+
+ */
+    shrink?: ResponsiveProp<number>;
+    /**
+     * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.
+     */
+    grow?: ResponsiveProp<number>;
+}>;
+declare type FlexItemComponent = <T extends ElementType = "div">(props: FlexItemProps<T>) => ReactElement | null;
+export declare const FlexItem: FlexItemComponent;
+export {};

package/dist-types/flex-item/index.d.ts

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

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

@@ -0,0 +1,38 @@
+import { ElementType, ReactElement } from "react";
+import { ResponsiveProp, PolymorphicComponentPropWithRef } from "../utils";
+import "./FlexLayout.css";
+export declare type LayoutSeparator = "start" | "center" | "end";
+export declare type LayoutDirection = "row" | "column";
+export declare const FLEX_ALIGNMENT_BASE: readonly ["start", "end", "center"];
+export declare const FLEX_CONTENT_ALIGNMENT_BASE: readonly ["start", "end", "center", "space-between", "space-around", "space-evenly"];
+export declare type FlexAlignment = typeof FLEX_ALIGNMENT_BASE[number];
+export declare type FlexContentAlignment = typeof FLEX_CONTENT_ALIGNMENT_BASE[number];
+export declare type FlexLayoutProps<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?: FlexAlignment | "stretch" | "baseline";
+    /**
+     * Establishes the main-axis, defining the direction children are placed. Default is "row".
+     */
+    direction?: ResponsiveProp<LayoutDirection>;
+    /**
+     * Controls the space between items, default is 3.
+     */
+    gap?: ResponsiveProp<number>;
+    /**
+     * Defines the alignment along the main axis, default is "start".
+     */
+    justify?: FlexContentAlignment;
+    /**
+     * Adds a separator between elements if wrap is not active, default is false.
+     */
+    separators?: LayoutSeparator | true;
+    /**
+     * Allow the items to wrap as needed, default is false.
+     */
+    wrap?: ResponsiveProp<boolean>;
+}>;
+declare type FlexLayoutComponent = <T extends ElementType = "div">(props: FlexLayoutProps<T>) => ReactElement | null;
+export declare const FlexLayout: FlexLayoutComponent;
+export {};

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

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

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

@@ -0,0 +1,17 @@
+import { ElementType, HTMLAttributes } from "react";
+import { FlexLayoutProps } from "../flex-layout";
+export interface FlowLayoutProps 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"];
+    /**
+     * 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>>;

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

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

package/dist-types/grid-item/GridItem.d.ts

@@ -0,0 +1,27 @@
+import { ElementType, ReactElement } from "react";
+import { ResponsiveProp, PolymorphicComponentPropWithRef } from "../utils";
+import "./GridItem.css";
+export declare const GRID_ALIGNMENT_BASE: readonly ["start", "end", "center", "stretch"];
+declare type GridAlignment = typeof GRID_ALIGNMENT_BASE[number];
+declare type GridProperty = number | "auto";
+export declare type GridItemProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
+    /**
+     * The item will span across the provided number of grid columns. Defaults to "auto"
+     */
+    colSpan?: ResponsiveProp<GridProperty>;
+    /**
+     * The item will span across the provided number of grid rows. Defaults to "auto"
+     */
+    rowSpan?: ResponsiveProp<GridProperty>;
+    /**
+     * Aligns a grid item inside a cell along the inline (row) axis. Defaults to "stretch"
+     */
+    horizontalAlignment?: GridAlignment;
+    /**
+     * Aligns a grid item inside a cell along the block (column) axis. Defaults to "stretch"
+     */
+    verticalAlignment?: GridAlignment;
+}>;
+declare type GridItemComponent = <T extends ElementType = "div">(props: GridItemProps<T>) => ReactElement | null;
+export declare const GridItem: GridItemComponent;
+export {};

package/dist-types/grid-item/index.d.ts

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

package/dist-types/grid-layout/GridLayout.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement, ElementType } from "react";
+import { ResponsiveProp, PolymorphicComponentPropWithRef } from "../utils";
+import "./GridLayout.css";
+export declare type GridLayoutProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
+    /**
+     * Number of columns to be displayed. Defaults to 12
+     */
+    columns?: ResponsiveProp<number>;
+    /**
+     * Number of rows to be displayed. Defaults to 1
+     */
+    rows?: ResponsiveProp<number>;
+    /**
+     * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 3
+     */
+    gap?: ResponsiveProp<number>;
+    /**
+     * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 1
+     */
+    columnGap?: ResponsiveProp<number>;
+    /**
+     * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 1
+     */
+    rowGap?: ResponsiveProp<number>;
+}>;
+declare type GridLayoutComponent = <T extends ElementType = "div">(props: GridLayoutProps<T>) => ReactElement | null;
+export declare const GridLayout: GridLayoutComponent;
+export {};

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

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

package/dist-types/index.d.ts

@@ -0,0 +1,18 @@
+export * from "./aria-announcer";
+export * from "./border-item";
+export * from "./border-layout";
+export * from "./breakpoints";
+export * from "./button";
+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 "./stack-layout";
+export * from "./status-indicator";
+export * from "./text";
+export * from "./theme";
+export * from "./salt-provider";
+export * from "./utils";
+export * from "./viewport";