@salt-ds/core 1.57.1 → 1.59.0

package/dist-es/toggletip/Toggletip.js

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import { useFloatingRootContext, useInteractions, useRole, useClick, useDismiss } from '@floating-ui/react';
+import { useState } from 'react';
+import 'clsx';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { ToggletipContext } from './ToggletipContext.js';
+
+const Toggletip = ({
+  children,
+  open,
+  onOpenChange,
+  placement = "top"
+}) => {
+  const [openState, setOpenState] = useControlled({
+    controlled: open,
+    default: false,
+    name: "Toggletip",
+    state: "open"
+  });
+  const handleOpenChange = (newOpen) => {
+    setOpenState(newOpen);
+    onOpenChange == null ? void 0 : onOpenChange(newOpen);
+  };
+  const [reference, setReference] = useState(null);
+  const [floating, setFloating] = useState(null);
+  const [floatingContent, setFloatingContent] = useState(
+    null
+  );
+  const [triggerId, setTriggerId] = useState(void 0);
+  const floatingRootContext = useFloatingRootContext({
+    open: openState,
+    onOpenChange: handleOpenChange,
+    elements: {
+      reference,
+      floating
+    }
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useRole(floatingRootContext, { role: "dialog" }),
+    useClick(floatingRootContext),
+    useDismiss(floatingRootContext)
+  ]);
+  return /* @__PURE__ */ jsx(
+    ToggletipContext.Provider,
+    {
+      value: {
+        openState,
+        floatingRootContext,
+        placement,
+        floatingContent,
+        getFloatingProps,
+        getReferenceProps,
+        setFloating,
+        setFloatingContent,
+        setReference,
+        setTriggerId,
+        triggerId
+      },
+      children
+    }
+  );
+};
+
+export { Toggletip };
+//# sourceMappingURL=Toggletip.js.map

package/dist-es/toggletip/Toggletip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggletip.js","sources":["../src/toggletip/Toggletip.tsx"],"sourcesContent":["import {\n  useClick,\n  useDismiss,\n  useFloatingRootContext,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { type ReactNode, useState } from \"react\";\nimport { useControlled } from \"../utils\";\nimport { ToggletipContext } from \"./ToggletipContext\";\n\nexport interface ToggletipProps {\n  children?: ReactNode;\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /*\n   * Set the placement of the Toggletip component relative to the trigger element. Defaults to `top`.\n   */\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nexport const Toggletip = ({\n  children,\n  open,\n  onOpenChange,\n  placement = \"top\",\n}: ToggletipProps) => {\n  const [openState, setOpenState] = useControlled({\n    controlled: open,\n    default: false,\n    name: \"Toggletip\",\n    state: \"open\",\n  });\n\n  const handleOpenChange = (newOpen: boolean) => {\n    setOpenState(newOpen);\n    onOpenChange?.(newOpen);\n  };\n\n  const [reference, setReference] = useState<HTMLButtonElement | null>(null);\n  const [floating, setFloating] = useState<HTMLDivElement | null>(null);\n  const [floatingContent, setFloatingContent] = useState<HTMLDivElement | null>(\n    null,\n  );\n  const [triggerId, setTriggerId] = useState<string | undefined>(undefined);\n\n  const floatingRootContext = useFloatingRootContext({\n    open: openState,\n    onOpenChange: handleOpenChange,\n    elements: {\n      reference,\n      floating,\n    },\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(floatingRootContext, { role: \"dialog\" }),\n    useClick(floatingRootContext),\n    useDismiss(floatingRootContext),\n  ]);\n\n  return (\n    <ToggletipContext.Provider\n      value={{\n        openState,\n        floatingRootContext,\n        placement,\n        floatingContent,\n        getFloatingProps,\n        getReferenceProps,\n        setFloating,\n        setFloatingContent,\n        setReference,\n        setTriggerId,\n        triggerId,\n      }}\n    >\n      {children}\n    </ToggletipContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA2BO,MAAM,YAAY,CAAC;AAAA,EACxB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,KAAsB;AACpB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAA,CAAc;AAAA,IAC9C,UAAA,EAAY,IAAA;AAAA,IACZ,OAAA,EAAS,KAAA;AAAA,IACT,IAAA,EAAM,WAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmB,CAAC,OAAA,KAAqB;AAC7C,IAAA,YAAA,CAAa,OAAO,CAAA;AACpB,IAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,OAAA,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAmC,IAAI,CAAA;AACzE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAgC,IAAI,CAAA;AACpE,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA;AAAA,IAC5C;AAAA,GACF;AACA,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA6B,MAAS,CAAA;AAExE,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,IAAA,EAAM,SAAA;AAAA,IACN,YAAA,EAAc,gBAAA;AAAA,IACd,QAAA,EAAU;AAAA,MACR,SAAA;AAAA,MACA;AAAA;AACF,GACD,CAAA;AAED,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAA,EAAiB,GAAI,eAAA,CAAgB;AAAA,IAC9D,OAAA,CAAQ,mBAAA,EAAqB,EAAE,IAAA,EAAM,UAAU,CAAA;AAAA,IAC/C,SAAS,mBAAmB,CAAA;AAAA,IAC5B,WAAW,mBAAmB;AAAA,GAC/B,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,gBAAA,CAAiB,QAAA;AAAA,IAAjB;AAAA,MACC,KAAA,EAAO;AAAA,QACL,SAAA;AAAA,QACA,mBAAA;AAAA,QACA,SAAA;AAAA,QACA,eAAA;AAAA,QACA,gBAAA;AAAA,QACA,iBAAA;AAAA,QACA,WAAA;AAAA,QACA,kBAAA;AAAA,QACA,YAAA;AAAA,QACA,YAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist-es/toggletip/ToggletipContext.js

@@ -0,0 +1,39 @@
+import { useContext } from 'react';
+import { createContext } from '../utils/createContext.js';
+import 'clsx';
+import 'react/jsx-runtime';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+
+const ToggletipContext = createContext(
+  "ToggletipContext",
+  {
+    openState: false,
+    floatingRootContext: {},
+    placement: "top",
+    floatingContent: null,
+    getFloatingProps() {
+      return {};
+    },
+    getReferenceProps() {
+      return {};
+    },
+    setFloating: () => {
+    },
+    setFloatingContent: () => {
+    },
+    setReference: () => {
+    },
+    setTriggerId: () => {
+    },
+    triggerId: void 0
+  }
+);
+function useToggletipContext() {
+  return useContext(ToggletipContext);
+}
+
+export { ToggletipContext, useToggletipContext };
+//# sourceMappingURL=ToggletipContext.js.map

package/dist-es/toggletip/ToggletipContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggletipContext.js","sources":["../src/toggletip/ToggletipContext.ts"],"sourcesContent":["import type { FloatingRootContext, Placement } from \"@floating-ui/react\";\nimport {\n  type Dispatch,\n  type HTMLProps,\n  type SetStateAction,\n  useContext,\n} from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface ToggletipContextValue {\n  openState: boolean;\n  floatingRootContext: FloatingRootContext;\n  placement: Placement;\n  floatingContent: HTMLDivElement | null;\n  getFloatingProps: (\n    userProps?: HTMLProps<HTMLElement> | undefined,\n  ) => Record<string, unknown>;\n  getReferenceProps: (\n    userProps?: HTMLProps<Element> | undefined,\n  ) => Record<string, unknown>;\n  setFloating: Dispatch<SetStateAction<HTMLDivElement | null>>;\n  setFloatingContent: Dispatch<SetStateAction<HTMLDivElement | null>>;\n  setReference: Dispatch<SetStateAction<HTMLButtonElement | null>>;\n  setTriggerId: Dispatch<SetStateAction<string | undefined>>;\n  triggerId: string | undefined;\n}\n\nexport const ToggletipContext = createContext<ToggletipContextValue>(\n  \"ToggletipContext\",\n  {\n    openState: false,\n    floatingRootContext: {} as FloatingRootContext,\n    placement: \"top\",\n    floatingContent: null,\n    getFloatingProps() {\n      return {} as Record<string, unknown>;\n    },\n    getReferenceProps() {\n      return {} as Record<string, unknown>;\n    },\n    setFloating: () => {},\n    setFloatingContent: () => {},\n    setReference: () => {},\n    setTriggerId: () => {},\n    triggerId: undefined,\n  },\n);\n\nexport function useToggletipContext() {\n  return useContext(ToggletipContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AA2BO,MAAM,gBAAA,GAAmB,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,qBAAqB,EAAC;AAAA,IACtB,SAAA,EAAW,KAAA;AAAA,IACX,eAAA,EAAiB,IAAA;AAAA,IACjB,gBAAA,GAAmB;AACjB,MAAA,OAAO,EAAC;AAAA,IACV,CAAA;AAAA,IACA,iBAAA,GAAoB;AAClB,MAAA,OAAO,EAAC;AAAA,IACV,CAAA;AAAA,IACA,aAAa,MAAM;AAAA,IAAC,CAAA;AAAA,IACpB,oBAAoB,MAAM;AAAA,IAAC,CAAA;AAAA,IAC3B,cAAc,MAAM;AAAA,IAAC,CAAA;AAAA,IACrB,cAAc,MAAM;AAAA,IAAC,CAAA;AAAA,IACrB,SAAA,EAAW;AAAA;AAEf;AAEO,SAAS,mBAAA,GAAsB;AACpC,EAAA,OAAO,WAAW,gBAAgB,CAAA;AACpC;;;;"}

package/dist-es/toggletip/ToggletipPanel.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltToggletipPanel {\n  --toggletip-background: var(--salt-container-primary-background);\n  --toggletip-borderColor: var(--salt-container-primary-borderColor);\n\n  box-sizing: border-box;\n  padding: var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--toggletip-borderColor);\n  border-radius: var(--salt-palette-corner-weak);\n\n  background: var(--toggletip-background);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n\n  color: var(--salt-content-primary-foreground);\n  z-index: var(--salt-zIndex-flyover);\n\n  max-width: 45ch;\n  max-height: 100vh;\n}\n\n.saltToggletipPanel-content {\n  max-height: 100%;\n  overflow-y: auto;\n}\n\n.saltToggletipPanel-content:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ToggletipPanel.css.js.map

package/dist-es/toggletip/ToggletipPanel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggletipPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/toggletip/ToggletipPanel.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { offset, shift, limitShift, flip, arrow, FloatingArrow } from '@floating-ui/react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useFloatingComponent, useFloatingUI } from '../utils/useFloatingUI/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useToggletipContext } from './ToggletipContext.js';
+import css_248z from './ToggletipPanel.css.js';
+
+const withBaseName = makePrefixer("saltToggletipPanel");
+const ToggletipPanel = forwardRef(
+  function ToggletipPanel2(props, ref) {
+    var _a, _b;
+    const {
+      className,
+      "aria-labelledby": ariaLabelledby,
+      children,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-toggletip-panel",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { Component: FloatingComponent } = useFloatingComponent();
+    const {
+      openState,
+      floatingRootContext,
+      setFloatingContent,
+      getFloatingProps,
+      setFloating,
+      placement,
+      triggerId
+    } = useToggletipContext();
+    const handleRef = useForkRef(setFloating, ref);
+    const arrowRef = useRef(null);
+    const contentRef = useRef(null);
+    const handleContentRef = useForkRef(
+      contentRef,
+      setFloatingContent
+    );
+    const { y, x, elements, strategy, context } = useFloatingUI({
+      rootContext: floatingRootContext,
+      placement,
+      middleware: [
+        offset(8),
+        shift({ limiter: limitShift() }),
+        flip({
+          fallbackAxisSideDirection: "end",
+          fallbackStrategy: "initialPlacement"
+        }),
+        arrow({
+          element: arrowRef
+        })
+      ]
+    });
+    return /* @__PURE__ */ jsxs(
+      FloatingComponent,
+      {
+        open: openState,
+        className: clsx(withBaseName(), className),
+        ref: handleRef,
+        width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+        height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+        top: y ?? 0,
+        left: x ?? 0,
+        position: strategy,
+        focusManagerProps: {
+          context,
+          modal: false,
+          initialFocus: contentRef,
+          closeOnFocusOut: true,
+          order: ["floating", "content"]
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: handleContentRef,
+              className: withBaseName("content"),
+              tabIndex: 0,
+              ...getFloatingProps({
+                "aria-labelledby": clsx(ariaLabelledby, triggerId) || void 0,
+                ...rest
+              }),
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FloatingArrow,
+            {
+              ref: arrowRef,
+              context,
+              strokeWidth: 1,
+              fill: "var(--toggletip-background)",
+              stroke: "var(--toggletip-borderColor)",
+              height: 6,
+              width: 12
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { ToggletipPanel };
+//# sourceMappingURL=ToggletipPanel.js.map

package/dist-es/toggletip/ToggletipPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggletipPanel.js","sources":["../src/toggletip/ToggletipPanel.tsx"],"sourcesContent":["import {\n  arrow,\n  FloatingArrow,\n  flip,\n  limitShift,\n  offset,\n  shift,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useRef,\n} from \"react\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n} from \"../utils\";\nimport { useToggletipContext } from \"./ToggletipContext\";\nimport toggletipPanelCss from \"./ToggletipPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltToggletipPanel\");\n\nexport interface ToggletipPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Toggletip Panel\n   */\n  children?: ReactNode;\n}\n\nexport const ToggletipPanel = forwardRef<HTMLDivElement, ToggletipPanelProps>(\n  function ToggletipPanel(props, ref) {\n    const {\n      className,\n      \"aria-labelledby\": ariaLabelledby,\n      children,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggletip-panel\",\n      css: toggletipPanelCss,\n      window: targetWindow,\n    });\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      openState,\n      floatingRootContext,\n      setFloatingContent,\n      getFloatingProps,\n      setFloating,\n      placement,\n      triggerId,\n    } = useToggletipContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(setFloating, ref);\n\n    const arrowRef = useRef<SVGSVGElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleContentRef = useForkRef<HTMLDivElement>(\n      contentRef,\n      setFloatingContent,\n    );\n    const { y, x, elements, strategy, context } = useFloatingUI({\n      rootContext: floatingRootContext,\n      placement,\n      middleware: [\n        offset(8),\n        shift({ limiter: limitShift() }),\n        flip({\n          fallbackAxisSideDirection: \"end\",\n          fallbackStrategy: \"initialPlacement\",\n        }),\n        arrow({\n          element: arrowRef,\n        }),\n      ],\n    });\n    return (\n      <FloatingComponent\n        open={openState}\n        className={clsx(withBaseName(), className)}\n        ref={handleRef}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n        top={y ?? 0}\n        left={x ?? 0}\n        position={strategy}\n        focusManagerProps={{\n          context,\n          modal: false,\n          initialFocus: contentRef,\n          closeOnFocusOut: true,\n          order: [\"floating\", \"content\"],\n        }}\n      >\n        <div\n          ref={handleContentRef}\n          className={withBaseName(\"content\")}\n          tabIndex={0}\n          {...getFloatingProps({\n            \"aria-labelledby\": clsx(ariaLabelledby, triggerId) || undefined,\n            ...rest,\n          })}\n        >\n          {children}\n        </div>\n        <FloatingArrow\n          ref={arrowRef}\n          context={context}\n          strokeWidth={1}\n          fill=\"var(--toggletip-background)\"\n          stroke=\"var(--toggletip-borderColor)\"\n          height={6}\n          width={12}\n        />\n      </FloatingComponent>\n    );\n  },\n);\n"],"names":["ToggletipPanel","toggletipPanelCss"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAS/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AApCtC,IAAA,IAAA,EAAA,EAAA,EAAA;AAqCI,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,iBAAA,EAAmB,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAI,oBAAA,EAAqB;AAE9D,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,kBAAA;AAAA,MACA,gBAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,QACE,mBAAA,EAAoB;AAExB,IAAA,MAAM,SAAA,GAAY,UAAA,CAA2B,WAAA,EAAa,GAAG,CAAA;AAE7D,IAAA,MAAM,QAAA,GAAW,OAAsB,IAAI,CAAA;AAC3C,IAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,IAAA,MAAM,gBAAA,GAAmB,UAAA;AAAA,MACvB,UAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,CAAA,EAAG,CAAA,EAAG,UAAU,QAAA,EAAU,OAAA,KAAY,aAAA,CAAc;AAAA,MAC1D,WAAA,EAAa,mBAAA;AAAA,MACb,SAAA;AAAA,MACA,UAAA,EAAY;AAAA,QACV,OAAO,CAAC,CAAA;AAAA,QACR,KAAA,CAAM,EAAE,OAAA,EAAS,UAAA,IAAc,CAAA;AAAA,QAC/B,IAAA,CAAK;AAAA,UACH,yBAAA,EAA2B,KAAA;AAAA,UAC3B,gBAAA,EAAkB;AAAA,SACnB,CAAA;AAAA,QACD,KAAA,CAAM;AAAA,UACJ,OAAA,EAAS;AAAA,SACV;AAAA;AACH,KACD,CAAA;AACD,IAAA,uBACE,IAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,SAAA;AAAA,QACN,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA,EAAK,SAAA;AAAA,QACL,KAAA,EAAA,CAAO,EAAA,GAAA,QAAA,CAAS,QAAA,KAAT,IAAA,GAAA,MAAA,GAAA,EAAA,CAAmB,WAAA;AAAA,QAC1B,MAAA,EAAA,CAAQ,EAAA,GAAA,QAAA,CAAS,QAAA,KAAT,IAAA,GAAA,MAAA,GAAA,EAAA,CAAmB,YAAA;AAAA,QAC3B,KAAK,CAAA,IAAK,CAAA;AAAA,QACV,MAAM,CAAA,IAAK,CAAA;AAAA,QACX,QAAA,EAAU,QAAA;AAAA,QACV,iBAAA,EAAmB;AAAA,UACjB,OAAA;AAAA,UACA,KAAA,EAAO,KAAA;AAAA,UACP,YAAA,EAAc,UAAA;AAAA,UACd,eAAA,EAAiB,IAAA;AAAA,UACjB,KAAA,EAAO,CAAC,UAAA,EAAY,SAAS;AAAA,SAC/B;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,gBAAA;AAAA,cACL,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,cACjC,QAAA,EAAU,CAAA;AAAA,cACT,GAAG,gBAAA,CAAiB;AAAA,gBACnB,iBAAA,EAAmB,IAAA,CAAK,cAAA,EAAgB,SAAS,CAAA,IAAK,MAAA;AAAA,gBACtD,GAAG;AAAA,eACJ,CAAA;AAAA,cAEA;AAAA;AAAA,WACH;AAAA,0BACA,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,QAAA;AAAA,cACL,OAAA;AAAA,cACA,WAAA,EAAa,CAAA;AAAA,cACb,IAAA,EAAK,6BAAA;AAAA,cACL,MAAA,EAAO,8BAAA;AAAA,cACP,MAAA,EAAQ,CAAA;AAAA,cACR,KAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-es/toggletip/ToggletipTrigger.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltToggletipTrigger {\n  box-sizing: border-box;\n  align-items: center;\n  appearance: none;\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: center;\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  padding: 0;\n  margin: 0;\n  min-height: var(--salt-size-icon);\n  min-width: var(--salt-size-icon);\n  position: relative;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  transition: none;\n  width: auto;\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n\n  color: var(--salt-content-primary-foreground);\n  background: transparent;\n  border: none;\n\n  cursor: var(--salt-cursor-hover);\n  flex: 0;\n}\n\n.saltToggletipTrigger:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-size-fixed-100);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ToggletipTrigger.css.js.map

package/dist-es/toggletip/ToggletipTrigger.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggletipTrigger.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/toggletip/ToggletipTrigger.js

@@ -0,0 +1,65 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import { useId } from '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useToggletipContext } from './ToggletipContext.js';
+import css_248z from './ToggletipTrigger.css.js';
+
+const withBaseName = makePrefixer("saltToggletipTrigger");
+const ToggletipTrigger = forwardRef(function ToggletipTrigger2(props, ref) {
+  const { children, className, id: idProp, onKeyDown, ...rest } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-toggletip-trigger",
+    css: css_248z,
+    window: targetWindow
+  });
+  const {
+    floatingContent,
+    openState,
+    setReference,
+    getReferenceProps,
+    setTriggerId
+  } = useToggletipContext();
+  const handleRef = useForkRef(setReference, ref);
+  const id = useId(idProp);
+  useEffect(() => {
+    if (id) {
+      setTriggerId == null ? void 0 : setTriggerId(id);
+    }
+  }, [id, setTriggerId]);
+  const handleKeyDown = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (!openState || event.key !== "Tab" || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
+      return;
+    }
+    if (floatingContent) {
+      event.preventDefault();
+      floatingContent.focus();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...getReferenceProps({
+        ref: handleRef,
+        className: clsx(withBaseName(), className),
+        id,
+        onKeyDown: handleKeyDown,
+        ...rest
+      }),
+      children
+    }
+  );
+});
+
+export { ToggletipTrigger };
+//# sourceMappingURL=ToggletipTrigger.js.map

package/dist-es/toggletip/ToggletipTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggletipTrigger.js","sources":["../src/toggletip/ToggletipTrigger.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  type ReactNode,\n  useEffect,\n} from \"react\";\nimport { makePrefixer, useForkRef, useId } from \"../utils\";\nimport { useToggletipContext } from \"./ToggletipContext\";\nimport toggletipTriggerCss from \"./ToggletipTrigger.css\";\n\nexport interface ToggletipTriggerProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltToggletipTrigger\");\n\nexport const ToggletipTrigger = forwardRef<\n  HTMLButtonElement,\n  ToggletipTriggerProps\n>(function ToggletipTrigger(props, ref) {\n  const { children, className, id: idProp, onKeyDown, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggletip-trigger\",\n    css: toggletipTriggerCss,\n    window: targetWindow,\n  });\n\n  const {\n    floatingContent,\n    openState,\n    setReference,\n    getReferenceProps,\n    setTriggerId,\n  } = useToggletipContext();\n\n  const handleRef = useForkRef<HTMLButtonElement>(setReference, ref);\n\n  const id = useId(idProp);\n\n  useEffect(() => {\n    if (id) {\n      setTriggerId?.(id);\n    }\n  }, [id, setTriggerId]);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (\n      !openState ||\n      event.key !== \"Tab\" ||\n      event.shiftKey ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey\n    ) {\n      return;\n    }\n\n    if (floatingContent) {\n      // React 16 support: explicitly move focus back into the open panel.\n      event.preventDefault();\n      floatingContent.focus();\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      {...getReferenceProps({\n        ref: handleRef,\n        className: clsx(withBaseName(), className),\n        id,\n        onKeyDown: handleKeyDown,\n        ...rest,\n      })}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["ToggletipTrigger","toggletipTriggerCss"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,EAAA,EAAI,QAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAEhE,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM;AAAA,IACJ,eAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,MACE,mBAAA,EAAoB;AAExB,EAAA,MAAM,SAAA,GAAY,UAAA,CAA8B,YAAA,EAAc,GAAG,CAAA;AAEjE,EAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAA,EAAI;AACN,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,EAAA,CAAA;AAAA,IACjB;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,YAAY,CAAC,CAAA;AAErB,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA4C;AACjE,IAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AAEZ,IAAA,IACE,CAAC,SAAA,IACD,KAAA,CAAM,GAAA,KAAQ,KAAA,IACd,KAAA,CAAM,QAAA,IACN,KAAA,CAAM,MAAA,IACN,KAAA,CAAM,OAAA,IACN,KAAA,CAAM,OAAA,EACN;AACA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,eAAA,EAAiB;AAEnB,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,eAAA,CAAgB,KAAA,EAAM;AAAA,IACxB;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACJ,GAAG,iBAAA,CAAkB;AAAA,QACpB,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,EAAA;AAAA,QACA,SAAA,EAAW,aAAA;AAAA,QACX,GAAG;AAAA,OACJ,CAAA;AAAA,MAEA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-es/tooltip/TooltipBase.js

@@ -51,8 +51,8 @@ const TooltipBase = (props) => {
         strokeWidth: 1,
         fill: "var(--salt-container-primary-background)",
         stroke: "var(--tooltip-status-borderColor)",
-        height: 5,
-        width: 10
+        height: 6,
+        width: 12
       }
     )
   ] });

package/dist-es/tooltip/TooltipBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { FloatingArrow, type FloatingArrowProps } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport type { TooltipProps } from \"./Tooltip\";\nimport tooltipCss from \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n  arrowProps: FloatingArrowProps;\n  /**\n   * Optional string to determine the status of the Tooltip.\n   */\n  status?: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tooltip\",\n    css: tooltipCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps } = useFormFieldProps();\n\n  const { arrowProps, content, hideArrow, hideIcon, status } = props;\n\n  return (\n    <>\n      <div className={withBaseName(\"container\")}>\n        {!hideIcon && status && (\n          <StatusIndicator\n            status={status}\n            size={1}\n            className={withBaseName(\"icon\")}\n          />\n        )}\n        <span\n          id={a11yProps?.[\"aria-describedby\"]}\n          className={withBaseName(\"content\")}\n        >\n          {content}\n        </span>\n      </div>\n      {!hideArrow && (\n        <FloatingArrow\n          {...arrowProps}\n          className={withBaseName(\"arrow\")}\n          strokeWidth={1}\n          fill=\"var(--salt-container-primary-background)\"\n          stroke=\"var(--tooltip-status-borderColor)\"\n          height={5}\n          width={10}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["tooltipCss"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAUxC,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AACtD,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,cAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,iBAAA,EAAkB;AAExC,EAAA,MAAM,EAAE,UAAA,EAAY,OAAA,EAAS,SAAA,EAAW,QAAA,EAAU,QAAO,GAAI,KAAA;AAE7D,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACrC,QAAA,EAAA;AAAA,MAAA,CAAC,YAAY,MAAA,oBACZ,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,IAAA,EAAM,CAAA;AAAA,UACN,SAAA,EAAW,aAAa,MAAM;AAAA;AAAA,OAChC;AAAA,sBAEF,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAI,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,kBAAA,CAAA;AAAA,UAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAEhC,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EACF,CAAA;AAAA,IACC,CAAC,SAAA,oBACA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAA,EAAa,CAAA;AAAA,QACb,IAAA,EAAK,0CAAA;AAAA,QACL,MAAA,EAAO,mCAAA;AAAA,QACP,MAAA,EAAQ,CAAA;AAAA,QACR,KAAA,EAAO;AAAA;AAAA;AACT,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { FloatingArrow, type FloatingArrowProps } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport type { TooltipProps } from \"./Tooltip\";\nimport tooltipCss from \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n  arrowProps: FloatingArrowProps;\n  /**\n   * Optional string to determine the status of the Tooltip.\n   */\n  status?: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tooltip\",\n    css: tooltipCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps } = useFormFieldProps();\n\n  const { arrowProps, content, hideArrow, hideIcon, status } = props;\n\n  return (\n    <>\n      <div className={withBaseName(\"container\")}>\n        {!hideIcon && status && (\n          <StatusIndicator\n            status={status}\n            size={1}\n            className={withBaseName(\"icon\")}\n          />\n        )}\n        <span\n          id={a11yProps?.[\"aria-describedby\"]}\n          className={withBaseName(\"content\")}\n        >\n          {content}\n        </span>\n      </div>\n      {!hideArrow && (\n        <FloatingArrow\n          {...arrowProps}\n          className={withBaseName(\"arrow\")}\n          strokeWidth={1}\n          fill=\"var(--salt-container-primary-background)\"\n          stroke=\"var(--tooltip-status-borderColor)\"\n          height={6}\n          width={12}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["tooltipCss"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAUxC,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AACtD,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,cAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,iBAAA,EAAkB;AAExC,EAAA,MAAM,EAAE,UAAA,EAAY,OAAA,EAAS,SAAA,EAAW,QAAA,EAAU,QAAO,GAAI,KAAA;AAE7D,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACrC,QAAA,EAAA;AAAA,MAAA,CAAC,YAAY,MAAA,oBACZ,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,IAAA,EAAM,CAAA;AAAA,UACN,SAAA,EAAW,aAAa,MAAM;AAAA;AAAA,OAChC;AAAA,sBAEF,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAI,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,kBAAA,CAAA;AAAA,UAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAEhC,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EACF,CAAA;AAAA,IACC,CAAC,SAAA,oBACA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAA,EAAa,CAAA;AAAA,QACb,IAAA,EAAK,0CAAA;AAAA,QACL,MAAA,EAAO,mCAAA;AAAA,QACP,MAAA,EAAQ,CAAA;AAAA,QACR,KAAA,EAAO;AAAA;AAAA;AACT,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist-es/tooltip/useTooltip.js

@@ -1,4 +1,4 @@
-import { offset, shift, flip, arrow, limitShift, useInteractions, useHover, useFocus, useRole, useDismiss, safePolygon } from '@floating-ui/react';
+import { offset, shift, limitShift, flip, arrow, useInteractions, useHover, safePolygon, useFocus, useRole, useDismiss } from '@floating-ui/react';
 import { useRef } from 'react';
 import 'clsx';
 import 'react/jsx-runtime';

package/dist-es/utils/useFloatingUI/useFloatingUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  FloatingFocusManager,\n  type FloatingFocusManagerProps,\n  FloatingPortal,\n  flip,\n  limitShift,\n  type Middleware,\n  type Platform,\n  platform,\n  type Strategy,\n  shift,\n  type UseFloatingOptions,\n  useFloating,\n} from \"@floating-ui/react\";\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  forwardRef,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { usePreventScroll } from \"../usePreventScroll\";\n\nexport interface FloatingComponentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the floating component is open (used for determining whether to show the component)\n   * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n   * for caching windows and reusing them, rather than always spawning a new one\n   */\n  open: boolean;\n  /**\n   * Use this prop when `FloatingFocusManager` is needed for floating component\n   */\n  focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n  /**\n   * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n   * `width` and `height` are used to define the size of the floating element.\n   *\n   */\n  top?: number;\n  left?: number;\n  width?: number;\n  height?: number;\n  position?: Strategy;\n  /**\n   * Makes the page unscrollable when the floating component is open.\n   */\n  lockScroll?: boolean;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n  HTMLDivElement,\n  FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n  const {\n    open,\n    top,\n    left,\n    position,\n    width: _width,\n    height: _height,\n    focusManagerProps,\n    lockScroll,\n    style: styleProp,\n    ...rest\n  } = props;\n  const style = {\n    ...styleProp,\n    top,\n    left,\n    position,\n  };\n\n  const { themeNext } = useTheme();\n  usePreventScroll({ isDisabled: !lockScroll || !open });\n\n  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n  if (focusManagerProps && open) {\n    return (\n      <FloatingPortal>\n        <ChosenSaltProvider applyClassesTo=\"scope\">\n          <FloatingFocusManager {...focusManagerProps}>\n            <div style={style} {...rest} ref={ref} />\n          </FloatingFocusManager>\n        </ChosenSaltProvider>\n      </FloatingPortal>\n    );\n  }\n\n  return open ? (\n    <FloatingPortal>\n      <ChosenSaltProvider applyClassesTo=\"scope\">\n        <div style={style} {...rest} ref={ref} />\n      </ChosenSaltProvider>\n    </FloatingPortal>\n  ) : null;\n});\n\nexport interface FloatingComponentContextType {\n  Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n  Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n  extends FloatingComponentContextType {\n  children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n  props: FloatingComponentProviderProps,\n) {\n  const { Component, children } = props;\n  const value = useMemo(() => ({ Component }), [Component]);\n\n  return (\n    <FloatingComponentContext.Provider value={value}>\n      {children}\n    </FloatingComponentContext.Provider>\n  );\n}\n\nexport function useFloatingComponent() {\n  return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps\n  extends Pick<\n    UseFloatingOptions,\n    \"placement\" | \"strategy\" | \"open\" | \"onOpenChange\" | \"nodeId\"\n  > {\n  /**\n   * Function to update the default middleware used to extend or replace it\n   */\n  middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n  defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n  platform: Platform;\n  middleware: GetMiddleware;\n  animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n  platform,\n  middleware: defaultGetMiddleware,\n  animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n  defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n  platform?: Platform;\n  middleware?: GetMiddleware;\n  children: ReactNode;\n  animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n  const {\n    platform: platformProp,\n    middleware,\n    animationFrame,\n    children,\n  } = props;\n\n  const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n    () => ({\n      platform: platformProp ?? platform,\n      middleware: middleware ?? defaultGetMiddleware,\n      animationFrame: animationFrame || false,\n    }),\n    [platformProp, middleware, animationFrame],\n  );\n\n  return (\n    <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n      {children}\n    </FloatingPlatformContext.Provider>\n  );\n}\n\nexport function useFloatingPlatform() {\n  return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n  reference: UseFloatingRefs[\"setReference\"];\n  floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n  const {\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n    ...other\n  } = props;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    open,\n    boolean,\n    reason,\n  ) => {\n    update();\n    onOpenChange?.(open, boolean, reason);\n  };\n\n  const {\n    platform: contextPlatform,\n    middleware: contextMiddleware,\n    animationFrame,\n  } = useFloatingPlatform();\n\n  const { refs, update, ...rest } = useFloating({\n    ...other,\n    middleware: contextMiddleware(middleware),\n    open,\n    onOpenChange: handleOpenChange,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, { animationFrame });\n\n      return cleanup;\n    },\n    platform: contextPlatform,\n  });\n\n  return {\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["DefaultFloatingComponent","open"],"mappings":";;;;;;AAsDA,MAAM,wBAAA,GAA2B,UAAA,CAG/B,SAASA,yBAAAA,CAAyB,OAAO,GAAA,EAAK;AAC9C,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,MAAA;AAAA,IACP,MAAA,EAAQ,OAAA;AAAA,IACR,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,GAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,QAAA,EAAS;AAC/B,EAAA,gBAAA,CAAiB,EAAE,UAAA,EAAY,CAAC,UAAA,IAAc,CAAC,MAAM,CAAA;AAErD,EAAA,MAAM,kBAAA,GAAqB,YAAY,gBAAA,GAAmB,YAAA;AAE1D,EAAA,IAAI,qBAAqB,IAAA,EAAM;AAC7B,IAAA,2BACG,cAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,sBAAmB,cAAA,EAAe,OAAA,EACjC,8BAAC,oBAAA,EAAA,EAAsB,GAAG,iBAAA,EACxB,QAAA,kBAAA,GAAA,CAAC,SAAI,KAAA,EAAe,GAAG,MAAM,GAAA,EAAU,CAAA,EACzC,GACF,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,IAAA,mBACL,GAAA,CAAC,cAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,sBAAmB,cAAA,EAAe,OAAA,EACjC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,OAAe,GAAG,IAAA,EAAM,GAAA,EAAU,CAAA,EACzC,GACF,CAAA,GACE,IAAA;AACN,CAAC,CAAA;AAMD,MAAM,2BAA2B,aAAA,CAA4C;AAAA,EAC3E,SAAA,EAAW;AACb,CAAC,CAAA;AAED,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,EAAc;AACzC,EAAA,wBAAA,CAAyB,WAAA,GAAc,0BAAA;AACzC;AAOO,SAAS,0BACd,KAAA,EACA;AACA,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAS,GAAI,KAAA;AAChC,EAAA,MAAM,KAAA,GAAQ,QAAQ,OAAO,EAAE,WAAU,CAAA,EAAI,CAAC,SAAS,CAAC,CAAA;AAExD,EAAA,uBACE,GAAA,CAAC,wBAAA,CAAyB,QAAA,EAAzB,EAAkC,OAChC,QAAA,EACH,CAAA;AAEJ;AAEO,SAAS,oBAAA,GAAuB;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA;AAC5C;AAeA,MAAM,oBAAA,GAAsC,CAAC,iBAAA,KAC3C,iBAAA;AAQF,MAAM,sBAAA,GAAsD;AAAA,EAC1D,QAAA;AAAA,EACA,UAAA,EAAY,oBAAA;AAAA,EACZ,cAAA,EAAgB;AAClB,CAAA;AAEA,MAAM,uBAAA,GAA0B,aAAA;AAAA,EAC9B;AACF,CAAA;AASO,SAAS,yBAAyB,KAAA,EAAsC;AAC7E,EAAA,MAAM;AAAA,IACJ,QAAA,EAAU,YAAA;AAAA,IACV,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,4BAAA,GAA+B,OAAA;AAAA,IACnC,OAAO;AAAA,MACL,UAAU,YAAA,IAAgB,QAAA;AAAA,MAC1B,YAAY,UAAA,IAAc,oBAAA;AAAA,MAC1B,gBAAgB,cAAA,IAAkB;AAAA,KACpC,CAAA;AAAA,IACA,CAAC,YAAA,EAAc,UAAA,EAAY,cAAc;AAAA,GAC3C;AAEA,EAAA,2BACG,uBAAA,CAAwB,QAAA,EAAxB,EAAiC,KAAA,EAAO,8BACtC,QAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,GAAsB;AACpC,EAAA,OAAO,WAAW,uBAAuB,CAAA;AAC3C;AAEO,MAAM,8BAAA,GAAiC;AAAA,EAC5C,IAAA,EAAK;AAAA,EACL,KAAA,CAAM,EAAE,OAAA,EAAS,UAAA,IAAc;AACjC;AASO,SAAS,cAAc,KAAA,EAAgD;AAC5E,EAAA,MAAM;AAAA,IACJ,UAAA,GAAa,8BAAA;AAAA,IACb,IAAA,GAAO,KAAA;AAAA,IACP,YAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,gBAAA,GAAuD,CAC3DC,KAAAA,EACA,OAAA,EACA,MAAA,KACG;AACH,IAAA,MAAA,EAAO;AACP,IAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAeA,OAAM,OAAA,EAAS,MAAA,CAAA;AAAA,EAChC,CAAA;AAEA,EAAA,MAAM;AAAA,IACJ,QAAA,EAAU,eAAA;AAAA,IACV,UAAA,EAAY,iBAAA;AAAA,IACZ;AAAA,MACE,mBAAA,EAAoB;AAExB,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAQ,GAAG,IAAA,KAAS,WAAA,CAAY;AAAA,IAC5C,GAAG,KAAA;AAAA,IACH,UAAA,EAAY,kBAAkB,UAAU,CAAA;AAAA,IACxC,IAAA;AAAA,IACA,YAAA,EAAc,gBAAA;AAAA,IACd,oBAAA,EAAsB,IAAI,IAAA,KAAS;AACjC,MAAA,MAAM,UAAU,UAAA,CAAW,GAAG,IAAA,EAAM,EAAE,gBAAgB,CAAA;AAEtD,MAAA,OAAO,OAAA;AAAA,IACT,CAAA;AAAA,IACA,QAAA,EAAU;AAAA,GACX,CAAA;AAED,EAAA,OAAO;AAAA,IACL,WAAW,IAAA,CAAK,YAAA;AAAA,IAChB,UAAU,IAAA,CAAK,WAAA;AAAA,IACf,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,GACL;AACF;;;;"}
+{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  FloatingFocusManager,\n  type FloatingFocusManagerProps,\n  FloatingPortal,\n  flip,\n  limitShift,\n  type Middleware,\n  type Platform,\n  platform,\n  type Strategy,\n  shift,\n  type UseFloatingOptions,\n  useFloating,\n} from \"@floating-ui/react\";\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  forwardRef,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { usePreventScroll } from \"../usePreventScroll\";\n\nexport interface FloatingComponentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the floating component is open (used for determining whether to show the component)\n   * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n   * for caching windows and reusing them, rather than always spawning a new one\n   */\n  open: boolean;\n  /**\n   * Use this prop when `FloatingFocusManager` is needed for floating component\n   */\n  focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n  /**\n   * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n   * `width` and `height` are used to define the size of the floating element.\n   *\n   */\n  top?: number;\n  left?: number;\n  width?: number;\n  height?: number;\n  position?: Strategy;\n  /**\n   * Makes the page unscrollable when the floating component is open.\n   */\n  lockScroll?: boolean;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n  HTMLDivElement,\n  FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n  const {\n    open,\n    top,\n    left,\n    position,\n    width: _width,\n    height: _height,\n    focusManagerProps,\n    lockScroll,\n    style: styleProp,\n    ...rest\n  } = props;\n  const style = {\n    ...styleProp,\n    top,\n    left,\n    position,\n  };\n\n  const { themeNext } = useTheme();\n  usePreventScroll({ isDisabled: !lockScroll || !open });\n\n  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n  if (focusManagerProps && open) {\n    return (\n      <FloatingPortal>\n        <ChosenSaltProvider applyClassesTo=\"scope\">\n          <FloatingFocusManager {...focusManagerProps}>\n            <div style={style} {...rest} ref={ref} />\n          </FloatingFocusManager>\n        </ChosenSaltProvider>\n      </FloatingPortal>\n    );\n  }\n\n  return open ? (\n    <FloatingPortal>\n      <ChosenSaltProvider applyClassesTo=\"scope\">\n        <div style={style} {...rest} ref={ref} />\n      </ChosenSaltProvider>\n    </FloatingPortal>\n  ) : null;\n});\n\nexport interface FloatingComponentContextType {\n  Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n  Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n  extends FloatingComponentContextType {\n  children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n  props: FloatingComponentProviderProps,\n) {\n  const { Component, children } = props;\n  const value = useMemo(() => ({ Component }), [Component]);\n\n  return (\n    <FloatingComponentContext.Provider value={value}>\n      {children}\n    </FloatingComponentContext.Provider>\n  );\n}\n\nexport function useFloatingComponent() {\n  return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps\n  extends Pick<\n    UseFloatingOptions,\n    | \"placement\"\n    | \"strategy\"\n    | \"open\"\n    | \"onOpenChange\"\n    | \"nodeId\"\n    | \"rootContext\"\n  > {\n  /**\n   * Function to update the default middleware used to extend or replace it\n   */\n  middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n  defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n  platform: Platform;\n  middleware: GetMiddleware;\n  animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n  platform,\n  middleware: defaultGetMiddleware,\n  animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n  defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n  platform?: Platform;\n  middleware?: GetMiddleware;\n  children: ReactNode;\n  animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n  const {\n    platform: platformProp,\n    middleware,\n    animationFrame,\n    children,\n  } = props;\n\n  const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n    () => ({\n      platform: platformProp ?? platform,\n      middleware: middleware ?? defaultGetMiddleware,\n      animationFrame: animationFrame || false,\n    }),\n    [platformProp, middleware, animationFrame],\n  );\n\n  return (\n    <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n      {children}\n    </FloatingPlatformContext.Provider>\n  );\n}\n\nexport function useFloatingPlatform() {\n  return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n  reference: UseFloatingRefs[\"setReference\"];\n  floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n  const {\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n    ...other\n  } = props;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    open,\n    boolean,\n    reason,\n  ) => {\n    update();\n    onOpenChange?.(open, boolean, reason);\n  };\n\n  const {\n    platform: contextPlatform,\n    middleware: contextMiddleware,\n    animationFrame,\n  } = useFloatingPlatform();\n\n  const { refs, update, ...rest } = useFloating({\n    ...other,\n    middleware: contextMiddleware(middleware),\n    open,\n    onOpenChange: handleOpenChange,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, { animationFrame });\n\n      return cleanup;\n    },\n    platform: contextPlatform,\n  });\n\n  return {\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["DefaultFloatingComponent","open"],"mappings":"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"}

package/dist-es/utils/useForkRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForkRef.js","sources":["../src/utils/useForkRef.ts"],"sourcesContent":["import { type Ref, useMemo } from \"react\";\nimport { setRef } from \"./setRef\";\n\nexport function useForkRef<Instance>(\n  refA: Ref<Instance> | null | undefined,\n  refB: Ref<Instance> | null | undefined,\n): Ref<Instance> | null {\n  /**\n   * This will create a new function if the ref props change and are defined.\n   * This means React will call the old forkRef with `null` and the new forkRef\n   * with the ref. Cleanup naturally emerges from this behavior\n   */\n  return useMemo(() => {\n    if (refA == null && refB == null) {\n      return () => null;\n    }\n    return (refValue) => {\n      setRef(refA, refValue);\n      setRef(refB, refValue);\n    };\n  }, [refA, refB]);\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,UAAA,CACd,MACA,IAAA,EACsB;AAMtB,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,IAAI,IAAA,IAAQ,IAAA,IAAQ,IAAA,IAAQ,IAAA,EAAM;AAChC,MAAA,OAAO,MAAM,IAAA;AAAA,IACf;AACA,IAAA,OAAO,CAAC,QAAA,KAAa;AACnB,MAAA,MAAA,CAAO,MAAM,QAAQ,CAAA;AACrB,MAAA,MAAA,CAAO,MAAM,QAAQ,CAAA;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AACjB;;;;"}
+{"version":3,"file":"useForkRef.js","sources":["../src/utils/useForkRef.ts"],"sourcesContent":["import { type Ref, useMemo } from \"react\";\nimport { setRef } from \"./setRef\";\n\nexport function useForkRef<Instance>(\n  refA: Ref<Instance> | null | undefined,\n  refB: Ref<Instance> | null | undefined,\n): Ref<Instance> | null {\n  /**\n   * This will create a new function if the ref props change and are defined.\n   * This means React will call the old forkRef with `null` and the new forkRef\n   * with the ref. Cleanup naturally emerges from this behavior\n   */\n  return useMemo(() => {\n    if (refA == null && refB == null) {\n      return () => null;\n    }\n    return (refValue: Instance | null) => {\n      setRef(refA, refValue);\n      setRef(refB, refValue);\n    };\n  }, [refA, refB]);\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,UAAA,CACd,MACA,IAAA,EACsB;AAMtB,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,IAAI,IAAA,IAAQ,IAAA,IAAQ,IAAA,IAAQ,IAAA,EAAM;AAChC,MAAA,OAAO,MAAM,IAAA;AAAA,IACf;AACA,IAAA,OAAO,CAAC,QAAA,KAA8B;AACpC,MAAA,MAAA,CAAO,MAAM,QAAQ,CAAA;AACrB,MAAA,MAAA,CAAO,MAAM,QAAQ,CAAA;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AACjB;;;;"}

package/dist-types/dialog/Dialog.d.ts

@@ -37,6 +37,8 @@ export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
      * */
     disableScrim?: boolean;
     /**
+     * @deprecated IDs are now auto-generated internally for proper ARIA labeling.
+     *
      * Optional id prop
      * Used for accessibility purposes to announce the title and subtitle when using a screen reader
      * */

package/dist-types/dialog/DialogContext.d.ts

@@ -1,9 +1,10 @@
 import type { ValidationStatus } from "../status-indicator";
-export declare const DialogContext: import("react").Context<{
+export interface DialogContextValue {
     status?: ValidationStatus;
-    id: string | undefined;
-}>;
-export declare const useDialogContext: () => {
-    status?: ValidationStatus;
-    id: string | undefined;
-};
+    id?: string;
+    setId?: (id: string) => void;
+    dialogId?: string;
+    setDialogId?: (id: string) => void;
+}
+export declare const DialogContext: import("react").Context<DialogContextValue>;
+export declare const useDialogContext: () => DialogContextValue;

package/dist-types/dropdown/Dropdown.d.ts

@@ -39,7 +39,7 @@ export interface DropdownProps<Item = string> extends Omit<ComponentPropsWithout
     /**
      * Styling variant. Defaults to "primary".
      */
-    variant?: "primary" | "secondary";
+    variant?: "primary" | "secondary" | "tertiary";
     /**
      * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.
      */

package/dist-types/index.d.ts

@@ -25,6 +25,7 @@ export * from "./grid-item";
 export * from "./grid-layout";
 export * from "./input";
 export * from "./interactable-card";
+export * from "./kbd";
 export * from "./link";
 export * from "./link-card";
 export * from "./list-box";
@@ -65,6 +66,7 @@ export * from "./theme";
 export * from "./toast";
 export * from "./toggle-button";
 export * from "./toggle-button-group";
+export * from "./toggletip";
 export * from "./tooltip";
 export * from "./types";
 export * from "./utils";

package/dist-types/input/Input.d.ts

@@ -38,7 +38,7 @@ export interface InputProps extends Omit<ComponentPropsWithoutRef<"div">, "defau
     /**
      * Styling variant. Defaults to "primary".
      */
-    variant?: "primary" | "secondary";
+    variant?: "primary" | "secondary" | "tertiary";
     /** Styling variant with full border. Defaults to false
      */
     bordered?: boolean;

package/dist-types/kbd/Kbd.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface KbdProps extends ComponentPropsWithoutRef<"kbd"> {
+    /**
+     * The variant of the kbd. Defaults to `"primary"`.
+     */
+    variant?: "primary" | "secondary" | "tertiary";
+}
+export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist-types/multiline-input/MultilineInput.d.ts

@@ -37,6 +37,6 @@ export interface MultilineInputProps extends Omit<ComponentPropsWithoutRef<"div"
     /**
      * Styling variant. Defaults to "primary".
      */
-    variant?: "primary" | "secondary";
+    variant?: "primary" | "secondary" | "tertiary";
 }
 export declare const MultilineInput: import("react").ForwardRefExoticComponent<MultilineInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/number-input/NumberInput.d.ts

@@ -140,7 +140,7 @@ export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<"div">,
      * Styling variant.
      * @default "primary"
      */
-    variant?: "primary" | "secondary";
+    variant?: "primary" | "secondary" | "tertiary";
     /**
      * Value of the `NumberInput`, to be used when in a controlled state.
      */

package/dist-types/pill-input/PillInput.d.ts

@@ -43,7 +43,7 @@ export interface PillInputProps extends Omit<ComponentPropsWithoutRef<"div">, "d
     /**
      * Styling variant. Defaults to "primary".
      */
-    variant?: "primary" | "secondary";
+    variant?: "primary" | "secondary" | "tertiary";
     hidePillClose?: boolean;
     truncate?: boolean;
     /** Styling variant with full border. Defaults to false

package/dist-types/toggletip/Toggletip.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+export interface ToggletipProps {
+    children?: ReactNode;
+    /**
+     * Display or hide the component.
+     */
+    open?: boolean;
+    /**
+     * Callback function triggered when open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    placement?: "top" | "bottom" | "left" | "right";
+}
+export declare const Toggletip: ({ children, open, onOpenChange, placement, }: ToggletipProps) => import("react/jsx-runtime").JSX.Element;

package/dist-types/toggletip/ToggletipContext.d.ts

@@ -0,0 +1,17 @@
+import type { FloatingRootContext, Placement } from "@floating-ui/react";
+import { type Dispatch, type HTMLProps, type SetStateAction } from "react";
+export interface ToggletipContextValue {
+    openState: boolean;
+    floatingRootContext: FloatingRootContext;
+    placement: Placement;
+    floatingContent: HTMLDivElement | null;
+    getFloatingProps: (userProps?: HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => Record<string, unknown>;
+    setFloating: Dispatch<SetStateAction<HTMLDivElement | null>>;
+    setFloatingContent: Dispatch<SetStateAction<HTMLDivElement | null>>;
+    setReference: Dispatch<SetStateAction<HTMLButtonElement | null>>;
+    setTriggerId: Dispatch<SetStateAction<string | undefined>>;
+    triggerId: string | undefined;
+}
+export declare const ToggletipContext: import("react").Context<ToggletipContextValue>;
+export declare function useToggletipContext(): ToggletipContextValue;

package/dist-types/toggletip/ToggletipPanel.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface ToggletipPanelProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of Toggletip Panel
+     */
+    children?: ReactNode;
+}
+export declare const ToggletipPanel: import("react").ForwardRefExoticComponent<ToggletipPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/toggletip/ToggletipTrigger.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface ToggletipTriggerProps extends ComponentPropsWithoutRef<"button"> {
+    children?: ReactNode;
+}
+export declare const ToggletipTrigger: import("react").ForwardRefExoticComponent<ToggletipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,3 @@
+export * from "./Toggletip";
+export * from "./ToggletipPanel";
+export * from "./ToggletipTrigger";

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

@@ -35,7 +35,7 @@ export interface FloatingComponentProviderProps extends FloatingComponentContext
 }
 export declare function FloatingComponentProvider(props: FloatingComponentProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useFloatingComponent(): FloatingComponentContextType;
-export interface UseFloatingUIProps extends Pick<UseFloatingOptions, "placement" | "strategy" | "open" | "onOpenChange" | "nodeId"> {
+export interface UseFloatingUIProps extends Pick<UseFloatingOptions, "placement" | "strategy" | "open" | "onOpenChange" | "nodeId" | "rootContext"> {
     /**
      * Function to update the default middleware used to extend or replace it
      */