@salt-ds/core 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (133) hide show
  1. package/dist-cjs/packages/core/src/aria-announcer/useAriaAnnouncer.js +1 -0
  2. package/dist-cjs/packages/core/src/aria-announcer/useAriaAnnouncer.js.map +1 -1
  3. package/dist-cjs/packages/core/src/border-item/BorderItem.js +1 -0
  4. package/dist-cjs/packages/core/src/border-item/BorderItem.js.map +1 -1
  5. package/dist-cjs/packages/core/src/border-layout/BorderLayout.js +1 -0
  6. package/dist-cjs/packages/core/src/border-layout/BorderLayout.js.map +1 -1
  7. package/dist-cjs/packages/core/src/button/Button.js +1 -0
  8. package/dist-cjs/packages/core/src/button/Button.js.map +1 -1
  9. package/dist-cjs/packages/core/src/card/Card.css.js +1 -1
  10. package/dist-cjs/packages/core/src/card/Card.js +1 -0
  11. package/dist-cjs/packages/core/src/card/Card.js.map +1 -1
  12. package/dist-cjs/packages/core/src/flex-item/FlexItem.js +1 -0
  13. package/dist-cjs/packages/core/src/flex-item/FlexItem.js.map +1 -1
  14. package/dist-cjs/packages/core/src/flex-layout/FlexLayout.js +1 -0
  15. package/dist-cjs/packages/core/src/flex-layout/FlexLayout.js.map +1 -1
  16. package/dist-cjs/packages/core/src/grid-item/GridItem.js +1 -0
  17. package/dist-cjs/packages/core/src/grid-item/GridItem.js.map +1 -1
  18. package/dist-cjs/packages/core/src/grid-layout/GridLayout.js +1 -0
  19. package/dist-cjs/packages/core/src/grid-layout/GridLayout.js.map +1 -1
  20. package/dist-cjs/packages/core/src/index.js +12 -0
  21. package/dist-cjs/packages/core/src/index.js.map +1 -1
  22. package/dist-cjs/packages/core/src/link/Link.js +1 -0
  23. package/dist-cjs/packages/core/src/link/Link.js.map +1 -1
  24. package/dist-cjs/packages/core/src/panel/Panel.js +1 -0
  25. package/dist-cjs/packages/core/src/panel/Panel.js.map +1 -1
  26. package/dist-cjs/packages/core/src/salt-provider/SaltProvider.js +1 -0
  27. package/dist-cjs/packages/core/src/salt-provider/SaltProvider.js.map +1 -1
  28. package/dist-cjs/packages/core/src/spinner/Spinner.css.js +9 -0
  29. package/dist-cjs/packages/core/src/spinner/Spinner.css.js.map +1 -0
  30. package/dist-cjs/packages/core/src/spinner/Spinner.js +81 -0
  31. package/dist-cjs/packages/core/src/spinner/Spinner.js.map +1 -0
  32. package/dist-cjs/packages/core/src/spinner/svgSpinners/SpinnerSVG.js +80 -0
  33. package/dist-cjs/packages/core/src/spinner/svgSpinners/SpinnerSVG.js.map +1 -0
  34. package/dist-cjs/packages/core/src/split-layout/SplitLayout.js +25 -0
  35. package/dist-cjs/packages/core/src/split-layout/SplitLayout.js.map +1 -0
  36. package/dist-cjs/packages/core/src/stack-layout/StackLayout.js +1 -0
  37. package/dist-cjs/packages/core/src/stack-layout/StackLayout.js.map +1 -1
  38. package/dist-cjs/packages/core/src/status-indicator/StatusIndicator.js +1 -0
  39. package/dist-cjs/packages/core/src/status-indicator/StatusIndicator.js.map +1 -1
  40. package/dist-cjs/packages/core/src/text/Display.js +1 -0
  41. package/dist-cjs/packages/core/src/text/Display.js.map +1 -1
  42. package/dist-cjs/packages/core/src/text/Text.css.js +1 -1
  43. package/dist-cjs/packages/core/src/text/Text.js +5 -2
  44. package/dist-cjs/packages/core/src/text/Text.js.map +1 -1
  45. package/dist-cjs/packages/core/src/tooltip/Tooltip.css.js +9 -0
  46. package/dist-cjs/packages/core/src/tooltip/Tooltip.css.js.map +1 -0
  47. package/dist-cjs/packages/core/src/tooltip/Tooltip.js +91 -0
  48. package/dist-cjs/packages/core/src/tooltip/Tooltip.js.map +1 -0
  49. package/dist-cjs/packages/core/src/tooltip/useAriaAnnounce.js +94 -0
  50. package/dist-cjs/packages/core/src/tooltip/useAriaAnnounce.js.map +1 -0
  51. package/dist-cjs/packages/core/src/tooltip/useTooltip.js +106 -0
  52. package/dist-cjs/packages/core/src/tooltip/useTooltip.js.map +1 -0
  53. package/dist-cjs/packages/core/src/utils/marginMiddleware.js.map +1 -1
  54. package/dist-cjs/packages/core/src/utils/useFloatingUI.js +38 -0
  55. package/dist-cjs/packages/core/src/utils/useFloatingUI.js.map +1 -0
  56. package/dist-cjs/packages/core/src/viewport/ViewportProvider.js +1 -0
  57. package/dist-cjs/packages/core/src/viewport/ViewportProvider.js.map +1 -1
  58. package/dist-es/packages/core/src/aria-announcer/useAriaAnnouncer.js +1 -0
  59. package/dist-es/packages/core/src/aria-announcer/useAriaAnnouncer.js.map +1 -1
  60. package/dist-es/packages/core/src/border-item/BorderItem.js +1 -0
  61. package/dist-es/packages/core/src/border-item/BorderItem.js.map +1 -1
  62. package/dist-es/packages/core/src/border-layout/BorderLayout.js +1 -0
  63. package/dist-es/packages/core/src/border-layout/BorderLayout.js.map +1 -1
  64. package/dist-es/packages/core/src/button/Button.js +1 -0
  65. package/dist-es/packages/core/src/button/Button.js.map +1 -1
  66. package/dist-es/packages/core/src/card/Card.css.js +1 -1
  67. package/dist-es/packages/core/src/card/Card.js +1 -0
  68. package/dist-es/packages/core/src/card/Card.js.map +1 -1
  69. package/dist-es/packages/core/src/flex-item/FlexItem.js +1 -0
  70. package/dist-es/packages/core/src/flex-item/FlexItem.js.map +1 -1
  71. package/dist-es/packages/core/src/flex-layout/FlexLayout.js +1 -0
  72. package/dist-es/packages/core/src/flex-layout/FlexLayout.js.map +1 -1
  73. package/dist-es/packages/core/src/grid-item/GridItem.js +1 -0
  74. package/dist-es/packages/core/src/grid-item/GridItem.js.map +1 -1
  75. package/dist-es/packages/core/src/grid-layout/GridLayout.js +1 -0
  76. package/dist-es/packages/core/src/grid-layout/GridLayout.js.map +1 -1
  77. package/dist-es/packages/core/src/index.js +5 -0
  78. package/dist-es/packages/core/src/index.js.map +1 -1
  79. package/dist-es/packages/core/src/link/Link.js +1 -0
  80. package/dist-es/packages/core/src/link/Link.js.map +1 -1
  81. package/dist-es/packages/core/src/panel/Panel.js +1 -0
  82. package/dist-es/packages/core/src/panel/Panel.js.map +1 -1
  83. package/dist-es/packages/core/src/salt-provider/SaltProvider.js +1 -0
  84. package/dist-es/packages/core/src/salt-provider/SaltProvider.js.map +1 -1
  85. package/dist-es/packages/core/src/spinner/Spinner.css.js +7 -0
  86. package/dist-es/packages/core/src/spinner/Spinner.css.js.map +1 -0
  87. package/dist-es/packages/core/src/spinner/Spinner.js +76 -0
  88. package/dist-es/packages/core/src/spinner/Spinner.js.map +1 -0
  89. package/dist-es/packages/core/src/spinner/svgSpinners/SpinnerSVG.js +76 -0
  90. package/dist-es/packages/core/src/spinner/svgSpinners/SpinnerSVG.js.map +1 -0
  91. package/dist-es/packages/core/src/split-layout/SplitLayout.js +21 -0
  92. package/dist-es/packages/core/src/split-layout/SplitLayout.js.map +1 -0
  93. package/dist-es/packages/core/src/stack-layout/StackLayout.js +1 -0
  94. package/dist-es/packages/core/src/stack-layout/StackLayout.js.map +1 -1
  95. package/dist-es/packages/core/src/status-indicator/StatusIndicator.js +1 -0
  96. package/dist-es/packages/core/src/status-indicator/StatusIndicator.js.map +1 -1
  97. package/dist-es/packages/core/src/text/Display.js +1 -0
  98. package/dist-es/packages/core/src/text/Display.js.map +1 -1
  99. package/dist-es/packages/core/src/text/Text.css.js +1 -1
  100. package/dist-es/packages/core/src/text/Text.js +5 -2
  101. package/dist-es/packages/core/src/text/Text.js.map +1 -1
  102. package/dist-es/packages/core/src/tooltip/Tooltip.css.js +7 -0
  103. package/dist-es/packages/core/src/tooltip/Tooltip.css.js.map +1 -0
  104. package/dist-es/packages/core/src/tooltip/Tooltip.js +87 -0
  105. package/dist-es/packages/core/src/tooltip/Tooltip.js.map +1 -0
  106. package/dist-es/packages/core/src/tooltip/useAriaAnnounce.js +90 -0
  107. package/dist-es/packages/core/src/tooltip/useAriaAnnounce.js.map +1 -0
  108. package/dist-es/packages/core/src/tooltip/useTooltip.js +102 -0
  109. package/dist-es/packages/core/src/tooltip/useTooltip.js.map +1 -0
  110. package/dist-es/packages/core/src/utils/marginMiddleware.js.map +1 -1
  111. package/dist-es/packages/core/src/utils/useFloatingUI.js +33 -0
  112. package/dist-es/packages/core/src/utils/useFloatingUI.js.map +1 -0
  113. package/dist-es/packages/core/src/viewport/ViewportProvider.js +1 -0
  114. package/dist-es/packages/core/src/viewport/ViewportProvider.js.map +1 -1
  115. package/dist-types/border-item/BorderItem.d.ts +1 -1
  116. package/dist-types/index.d.ts +3 -0
  117. package/dist-types/link/Link.d.ts +2 -2
  118. package/dist-types/spinner/Spinner.d.ts +45 -0
  119. package/dist-types/spinner/index.d.ts +1 -0
  120. package/dist-types/spinner/svgSpinners/SpinnerSVG.d.ts +5 -0
  121. package/dist-types/split-layout/SplitLayout.d.ts +28 -0
  122. package/dist-types/split-layout/index.d.ts +1 -0
  123. package/dist-types/text/Display.d.ts +3 -3
  124. package/dist-types/text/Headings.d.ts +4 -4
  125. package/dist-types/text/Label.d.ts +1 -1
  126. package/dist-types/text/Text.d.ts +4 -0
  127. package/dist-types/tooltip/Tooltip.d.ts +47 -0
  128. package/dist-types/tooltip/index.d.ts +2 -0
  129. package/dist-types/tooltip/useAriaAnnounce.d.ts +9 -0
  130. package/dist-types/tooltip/useTooltip.d.ts +36 -0
  131. package/dist-types/utils/index.d.ts +1 -0
  132. package/dist-types/utils/useFloatingUI.d.ts +34 -0
  133. package/package.json +2 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n style: {\n left: arrowX ? `${arrowX}px` : \"\",\n top: arrowY ? `${arrowY}px` : \"\",\n },\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n style: {\n top: y ?? \"\",\n left: x ?? \"\",\n position: strategy,\n },\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n };\n}\n"],"names":["useRef","useControlled","open","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useAriaAnnounce"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\nimport { MiddlewareArguments } from \"@floating-ui/react-dom-interactions\";\n\nexport const margin = (value = 0): Middleware => ({\n name: \"margin\",\n options: value,\n fn(middlewareArguments: MiddlewareArguments) {\n const { x, y, elements } = middlewareArguments;\n\n if (elements.floating.children.length > 0) {\n const rootChildElement = elements.floating.children[0] as HTMLElement;\n rootChildElement.style.setProperty(\"margin\", value.toString());\n }\n return {\n x: x,\n y: y,\n };\n },\n});\n"],"names":[],"mappings":";;;;AAGa,MAAA,MAAA,GAAS,CAAC,KAAA,GAAQ,CAAmB,MAAA;AAAA,EAChD,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,KAAA;AAAA,EACT,GAAG,mBAA0C,EAAA;AAC3C,IAAA,MAAM,EAAE,CAAA,EAAG,CAAG,EAAA,QAAA,EAAa,GAAA,mBAAA,CAAA;AAE3B,IAAA,IAAI,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA;AACzC,MAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,CAAA,CAAA,CAAA;AACpD,MAAA,gBAAA,CAAiB,KAAM,CAAA,WAAA,CAAY,QAAU,EAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,KAC/D;AACA,IAAO,OAAA;AAAA,MACL,CAAA;AAAA,MACA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAA;;;;"}
1
+ {"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\nimport { MiddlewareArguments } from \"@floating-ui/react\";\n\nexport const margin = (value = 0): Middleware => ({\n name: \"margin\",\n options: value,\n fn(middlewareArguments: MiddlewareArguments) {\n const { x, y, elements } = middlewareArguments;\n\n if (elements.floating.children.length > 0) {\n const rootChildElement = elements.floating.children[0] as HTMLElement;\n rootChildElement.style.setProperty(\"margin\", value.toString());\n }\n return {\n x: x,\n y: y,\n };\n },\n});\n"],"names":[],"mappings":";;;;AAGa,MAAA,MAAA,GAAS,CAAC,KAAA,GAAQ,CAAmB,MAAA;AAAA,EAChD,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,KAAA;AAAA,EACT,GAAG,mBAA0C,EAAA;AAC3C,IAAA,MAAM,EAAE,CAAA,EAAG,CAAG,EAAA,QAAA,EAAa,GAAA,mBAAA,CAAA;AAE3B,IAAA,IAAI,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA;AACzC,MAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,CAAA,CAAA,CAAA;AACpD,MAAA,gBAAA,CAAiB,KAAM,CAAA,WAAA,CAAY,QAAU,EAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,KAC/D;AACA,IAAO,OAAA;AAAA,MACL,CAAA;AAAA,MACA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAA;;;;"}
@@ -0,0 +1,38 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var react = require('@floating-ui/react');
6
+
7
+ const DEFAULT_FLOATING_UI_MIDDLEWARE = [
8
+ react.flip(),
9
+ react.shift({ limiter: react.limitShift() })
10
+ ];
11
+ function useFloatingUI(props) {
12
+ const {
13
+ placement,
14
+ strategy,
15
+ middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,
16
+ open = false,
17
+ onOpenChange
18
+ } = props;
19
+ const { reference, floating, refs, update, ...rest } = react.useFloating({
20
+ placement,
21
+ strategy,
22
+ middleware,
23
+ open,
24
+ onOpenChange,
25
+ whileElementsMounted: react.autoUpdate
26
+ });
27
+ return {
28
+ reference,
29
+ floating,
30
+ refs,
31
+ update,
32
+ ...rest
33
+ };
34
+ }
35
+
36
+ exports.DEFAULT_FLOATING_UI_MIDDLEWARE = DEFAULT_FLOATING_UI_MIDDLEWARE;
37
+ exports.useFloatingUI = useFloatingUI;
38
+ //# sourceMappingURL=useFloatingUI.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type { Middleware, Placement, Strategy } from \"@floating-ui/react\";\nimport {\n autoUpdate,\n flip,\n limitShift,\n shift,\n useFloating,\n} from \"@floating-ui/react\";\n\nexport type UseFloatingUIProps = {\n /**\n * Set position relative to trigger\n */\n placement?: Placement;\n strategy?: Strategy;\n middleware?: Middleware[];\n /**\n * Set visible state. Defaults to false\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes\n */\n onOpenChange?: (open: boolean) => void;\n};\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n const {\n placement,\n strategy,\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n } = props;\n\n const { reference, floating, refs, update, ...rest } = useFloating({\n placement,\n strategy,\n middleware,\n open,\n onOpenChange,\n whileElementsMounted: autoUpdate,\n });\n\n return {\n reference,\n floating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["flip","shift","limitShift","useFloating","autoUpdate"],"mappings":";;;;;;AA0BO,MAAM,8BAAiC,GAAA;AAAA,EAC5CA,UAAK,EAAA;AAAA,EACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,IAAc,CAAA;AACjC,EAAA;AAEO,SAAS,cACd,KACgC,EAAA;AAChC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAa,GAAA,8BAAA;AAAA,IACb,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,MAAM,MAAW,EAAA,GAAA,IAAA,KAASC,iBAAY,CAAA;AAAA,IACjE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAAC,gBAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACF;;;;;"}
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var React = require('react');
7
+ require('../utils/useFloatingUI.js');
7
8
  require('../utils/useId.js');
8
9
  var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
9
10
  require('../salt-provider/SaltProvider.js');
@@ -1 +1 @@
1
- {"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport || viewport || 0;\n\n useIsomorphicLayoutEffect(() => {\n let observer: ResizeObserver | null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":["createContext","useContext","useState","useIsomorphicLayoutEffect","jsx"],"mappings":";;;;;;;;;;AAGM,MAAA,eAAA,GAAkBA,oBAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmBC,iBAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAAC,cAAA,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,GAAQH,iBAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;;;"}
1
+ {"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport || viewport || 0;\n\n useIsomorphicLayoutEffect(() => {\n let observer: ResizeObserver | null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":["createContext","useContext","useState","useIsomorphicLayoutEffect","jsx"],"mappings":";;;;;;;;;;;AAGM,MAAA,eAAA,GAAkBA,oBAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmBC,iBAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAAC,cAAA,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,GAAQH,iBAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;;;"}
@@ -1,5 +1,6 @@
1
1
  import { useContext, useRef, useCallback, useMemo, useEffect } from 'react';
2
2
  import { debounce } from '../utils/debounce.js';
3
+ import '../utils/useFloatingUI.js';
3
4
  import '../utils/useId.js';
4
5
  import '../salt-provider/SaltProvider.js';
5
6
  import '../viewport/ViewportProvider.js';
@@ -1 +1 @@
1
- {"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context && context.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\"\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context]\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval]\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce]\n );\n\n useEffect(\n () => () => {\n mountedRef.current = false;\n },\n []\n );\n\n return ariaAnnouncer;\n};\n"],"names":[],"mappings":";;;;;;;AAWA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAM,MAAA,yBAAA,GAA4B,WAAW,OAAQ,CAAA,QAAA,CAAA;AAErD,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACf,QAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,SAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
1
+ {"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context && context.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\"\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context]\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval]\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce]\n );\n\n useEffect(\n () => () => {\n mountedRef.current = false;\n },\n []\n );\n\n return ariaAnnouncer;\n};\n"],"names":[],"mappings":";;;;;;;;AAWA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAM,MAAA,yBAAA,GAA4B,WAAW,OAAQ,CAAA,QAAA,CAAA;AAErD,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACf,QAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,SAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
@@ -4,6 +4,7 @@ import { clsx } from 'clsx';
4
4
  import { GridItem } from '../grid-item/GridItem.js';
5
5
  import './BorderItem.css.js';
6
6
  import { makePrefixer } from '../utils/makePrefixer.js';
7
+ import '../utils/useFloatingUI.js';
7
8
  import '../utils/useId.js';
8
9
  import '../salt-provider/SaltProvider.js';
9
10
  import '../viewport/ViewportProvider.js';
@@ -1 +1 @@
1
- {"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { GridItem, GridItemProps } from \"../grid-item\";\nimport \"./BorderItem.css\";\nimport {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\n\nexport const BORDER_POSITION = [\n \"north\",\n \"west\",\n \"center\",\n \"east\",\n \"south\",\n] as const;\n\nexport type BorderPosition = typeof BORDER_POSITION[number];\n\nexport type BorderItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n /**\n * Position in the border layout\n */\n position: BorderPosition;\n /**\n * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n */\n sticky?: boolean;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n <T extends ElementType>(\n {\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n }: BorderItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const gridItemStyles = {\n ...style,\n \"--gridItem-gridArea\": position,\n };\n\n return (\n <GridItem\n ref={ref}\n className={clsx(withBaseName(), className, \"saltGridItem-area\", {\n [withBaseName(\"sticky\")]: sticky,\n })}\n style={gridItemStyles}\n {...rest}\n >\n {children}\n </GridItem>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;AAUO,MAAM,eAAkB,GAAA;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,EAAA;AA2BA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,cAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,qBAAuB,EAAA,QAAA;AAAA,KACzB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,WAAW,mBAAqB,EAAA;AAAA,QAC9D,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC3B,CAAA;AAAA,MACD,KAAO,EAAA,cAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { GridItem, GridItemProps } from \"../grid-item\";\nimport \"./BorderItem.css\";\nimport {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\n\nexport const BORDER_POSITION = [\n \"north\",\n \"west\",\n \"center\",\n \"east\",\n \"south\",\n] as const;\n\nexport type BorderPosition = typeof BORDER_POSITION[number];\n\nexport type BorderItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n /**\n * Position in the Border Layout\n */\n position: BorderPosition;\n /**\n * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n */\n sticky?: boolean;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n <T extends ElementType>(\n {\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n }: BorderItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const gridItemStyles = {\n ...style,\n \"--gridItem-gridArea\": position,\n };\n\n return (\n <GridItem\n ref={ref}\n className={clsx(withBaseName(), className, \"saltGridItem-area\", {\n [withBaseName(\"sticky\")]: sticky,\n })}\n style={gridItemStyles}\n {...rest}\n >\n {children}\n </GridItem>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAUO,MAAM,eAAkB,GAAA;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,EAAA;AA2BA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,cAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,qBAAuB,EAAA,QAAA;AAAA,KACzB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,WAAW,mBAAqB,EAAA;AAAA,QAC9D,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC3B,CAAA;AAAA,MACD,KAAO,EAAA,cAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -3,6 +3,7 @@ import { forwardRef, Children, useEffect } from 'react';
3
3
  import { clsx } from 'clsx';
4
4
  import { GridLayout } from '../grid-layout/GridLayout.js';
5
5
  import { makePrefixer } from '../utils/makePrefixer.js';
6
+ import '../utils/useFloatingUI.js';
6
7
  import '../utils/useId.js';
7
8
  import '../salt-provider/SaltProvider.js';
8
9
  import '../viewport/ViewportProvider.js';
@@ -1 +1 @@
1
- {"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import {\n Children,\n forwardRef,\n ReactElement,\n useEffect,\n ElementType,\n} from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { GridLayout, GridLayoutProps } from \"../grid-layout\";\nimport {\n makePrefixer,\n PolymorphicRef,\n PolymorphicComponentPropWithRef,\n} from \"../utils\";\nimport { BorderItemProps } from \"../border-item\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n */\n gap?: GridLayoutProps<T>[\"gap\"];\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n */\n columnGap?: GridLayoutProps<T>[\"columnGap\"];\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n */\n rowGap?: GridLayoutProps<T>[\"rowGap\"];\n /**\n * Border item components to be rendered.\n */\n children: ReactElement<BorderItemProps<T>>[];\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n props: BorderLayoutProps<T>\n) => ReactElement | null;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n <T extends ElementType>(\n { children, className, gap, style, ...rest }: BorderLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const borderAreas = Children.map(\n children,\n (child: ReactElement<BorderItemProps<T>>) => child.props.position\n );\n\n const topSection = borderAreas.includes(\"north\")\n ? \"north \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const leftSection = borderAreas.includes(\"west\") ? \"west\" : \"center\";\n\n const rightSection = borderAreas.includes(\"east\") ? \"east\" : \"center\";\n\n const midSection = `${leftSection} center ${rightSection}`;\n\n const bottomSection = borderAreas.includes(\"south\")\n ? \"south \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const gridTemplateAreas = `\"${topSection}\" \"${midSection}\" \"${bottomSection}\"`;\n\n const hasMainSection = borderAreas.includes(\"center\");\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!hasMainSection) {\n console.warn(\n \"No main section has been found. A main section should be provided.\"\n );\n }\n }\n }, [hasMainSection]);\n\n const borderLayoutStyles = {\n ...style,\n \"--gridLayout-gridTemplate\": gridTemplateAreas,\n };\n\n return (\n <GridLayout\n className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n columns={numberOfColumns}\n gap={gap || 0}\n style={borderLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </GridLayout>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAEpD,MAAM,eAAkB,GAAA,CAAA,CAAA;AAMjB,MAAM,YAAsC,GAAA,UAAA;AAAA,EACjD,CACE,EAAE,QAAU,EAAA,SAAA,EAAW,KAAK,KAAU,EAAA,GAAA,IAAA,IACtC,GACG,KAAA;AACH,IAAA,MAAM,cAAc,QAAS,CAAA,GAAA;AAAA,MAC3B,QAAA;AAAA,MACA,CAAC,KAA4C,KAAA,KAAA,CAAM,KAAM,CAAA,QAAA;AAAA,KAC3D,CAAA;AAEA,IAAM,MAAA,UAAA,GAAa,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC3C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA,CAAA;AAElC,IAAA,MAAM,WAAc,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA,CAAA;AAE5D,IAAA,MAAM,YAAe,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA,CAAA;AAE7D,IAAM,MAAA,UAAA,GAAa,GAAG,WAAsB,CAAA,QAAA,EAAA,YAAA,CAAA,CAAA,CAAA;AAE5C,IAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC9C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA,CAAA;AAElC,IAAM,MAAA,iBAAA,GAAoB,CAAI,CAAA,EAAA,UAAA,CAAA,GAAA,EAAgB,UAAgB,CAAA,GAAA,EAAA,aAAA,CAAA,CAAA,CAAA,CAAA;AAE9D,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAEpD,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,oEAAA;AAAA,WACF,CAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAEnB,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,GAAG,KAAA;AAAA,MACH,2BAA6B,EAAA,iBAAA;AAAA,KAC/B,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,WAAW,qBAAqB,CAAA;AAAA,MAChE,OAAS,EAAA,eAAA;AAAA,MACT,KAAK,GAAO,IAAA,CAAA;AAAA,MACZ,KAAO,EAAA,kBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import {\n Children,\n forwardRef,\n ReactElement,\n useEffect,\n ElementType,\n} from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { GridLayout, GridLayoutProps } from \"../grid-layout\";\nimport {\n makePrefixer,\n PolymorphicRef,\n PolymorphicComponentPropWithRef,\n} from \"../utils\";\nimport { BorderItemProps } from \"../border-item\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n */\n gap?: GridLayoutProps<T>[\"gap\"];\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n */\n columnGap?: GridLayoutProps<T>[\"columnGap\"];\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n */\n rowGap?: GridLayoutProps<T>[\"rowGap\"];\n /**\n * Border item components to be rendered.\n */\n children: ReactElement<BorderItemProps<T>>[];\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n props: BorderLayoutProps<T>\n) => ReactElement | null;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n <T extends ElementType>(\n { children, className, gap, style, ...rest }: BorderLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const borderAreas = Children.map(\n children,\n (child: ReactElement<BorderItemProps<T>>) => child.props.position\n );\n\n const topSection = borderAreas.includes(\"north\")\n ? \"north \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const leftSection = borderAreas.includes(\"west\") ? \"west\" : \"center\";\n\n const rightSection = borderAreas.includes(\"east\") ? \"east\" : \"center\";\n\n const midSection = `${leftSection} center ${rightSection}`;\n\n const bottomSection = borderAreas.includes(\"south\")\n ? \"south \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const gridTemplateAreas = `\"${topSection}\" \"${midSection}\" \"${bottomSection}\"`;\n\n const hasMainSection = borderAreas.includes(\"center\");\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!hasMainSection) {\n console.warn(\n \"No main section has been found. A main section should be provided.\"\n );\n }\n }\n }, [hasMainSection]);\n\n const borderLayoutStyles = {\n ...style,\n \"--gridLayout-gridTemplate\": gridTemplateAreas,\n };\n\n return (\n <GridLayout\n className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n columns={numberOfColumns}\n gap={gap || 0}\n style={borderLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </GridLayout>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAEpD,MAAM,eAAkB,GAAA,CAAA,CAAA;AAMjB,MAAM,YAAsC,GAAA,UAAA;AAAA,EACjD,CACE,EAAE,QAAU,EAAA,SAAA,EAAW,KAAK,KAAU,EAAA,GAAA,IAAA,IACtC,GACG,KAAA;AACH,IAAA,MAAM,cAAc,QAAS,CAAA,GAAA;AAAA,MAC3B,QAAA;AAAA,MACA,CAAC,KAA4C,KAAA,KAAA,CAAM,KAAM,CAAA,QAAA;AAAA,KAC3D,CAAA;AAEA,IAAM,MAAA,UAAA,GAAa,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC3C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA,CAAA;AAElC,IAAA,MAAM,WAAc,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA,CAAA;AAE5D,IAAA,MAAM,YAAe,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA,CAAA;AAE7D,IAAM,MAAA,UAAA,GAAa,GAAG,WAAsB,CAAA,QAAA,EAAA,YAAA,CAAA,CAAA,CAAA;AAE5C,IAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC9C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA,CAAA;AAElC,IAAM,MAAA,iBAAA,GAAoB,CAAI,CAAA,EAAA,UAAA,CAAA,GAAA,EAAgB,UAAgB,CAAA,GAAA,EAAA,aAAA,CAAA,CAAA,CAAA,CAAA;AAE9D,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAEpD,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,oEAAA;AAAA,WACF,CAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAEnB,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,GAAG,KAAA;AAAA,MACH,2BAA6B,EAAA,iBAAA;AAAA,KAC/B,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,WAAW,qBAAqB,CAAA;AAAA,MAChE,OAAS,EAAA,eAAA;AAAA,MACT,KAAK,GAAO,IAAA,CAAA;AAAA,MACZ,KAAO,EAAA,kBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef } from 'react';
3
3
  import { clsx } from 'clsx';
4
4
  import { makePrefixer } from '../utils/makePrefixer.js';
5
+ import '../utils/useFloatingUI.js';
5
6
  import '../utils/useId.js';
6
7
  import '../salt-provider/SaltProvider.js';
7
8
  import '../viewport/ViewportProvider.js';
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nimport \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport type ButtonVariant = typeof ButtonVariantValues[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * If `true`, the button will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be focusable when disabled.\n */\n focusableWhenDisabled?: boolean;\n /**\n * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n * 'primary' is the default value.\n */\n variant?: ButtonVariant;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n children,\n className,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n type = \"button\",\n variant = \"primary\",\n ...restProps\n },\n ref?\n ): ReactElement<ButtonProps> {\n const { active, buttonProps } = useButton({\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n });\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n const { tabIndex, ...restButtonProps } = buttonProps;\n return (\n <button\n {...restButtonProps}\n className={clsx(withBaseName(), className, withBaseName(variant), {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n })}\n {...restProps}\n ref={ref}\n type={type}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["Button"],"mappings":";;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,mBAAsB,GAAA,CAAC,SAAW,EAAA,WAAA,EAAa,KAAK,EAAA;AAmB1D,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,OACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GAC2B,EAAA;AAC3B,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAY,EAAA,GAAI,SAAU,CAAA;AAAA,MACxC,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAGD,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AACzC,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACE,GAAG,eAAA;AAAA,MACJ,WAAW,IAAK,CAAA,YAAA,IAAgB,SAAW,EAAA,YAAA,CAAa,OAAO,CAAG,EAAA;AAAA,QAChE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC3B,CAAA;AAAA,MACA,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,IAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nimport \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport type ButtonVariant = typeof ButtonVariantValues[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * If `true`, the button will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be focusable when disabled.\n */\n focusableWhenDisabled?: boolean;\n /**\n * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n * 'primary' is the default value.\n */\n variant?: ButtonVariant;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n children,\n className,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n type = \"button\",\n variant = \"primary\",\n ...restProps\n },\n ref?\n ): ReactElement<ButtonProps> {\n const { active, buttonProps } = useButton({\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n });\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n const { tabIndex, ...restButtonProps } = buttonProps;\n return (\n <button\n {...restButtonProps}\n className={clsx(withBaseName(), className, withBaseName(variant), {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n })}\n {...restProps}\n ref={ref}\n type={type}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["Button"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,mBAAsB,GAAA,CAAC,SAAW,EAAA,WAAA,EAAa,KAAK,EAAA;AAmB1D,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,OACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GAC2B,EAAA;AAC3B,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAY,EAAA,GAAI,SAAU,CAAA;AAAA,MACxC,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAGD,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AACzC,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACE,GAAG,eAAA;AAAA,MACJ,WAAW,IAAK,CAAA,YAAA,IAAgB,SAAW,EAAA,YAAA,CAAa,OAAO,CAAG,EAAA;AAAA,QAChE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC3B,CAAA;AAAA,MACA,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,IAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = "/* Styles applied to the root element */\n.saltCard {\n background: var(--saltCard-background, var(--salt-container-primary-background));\n border-width: var(--saltCard-borderWidth, var(--salt-size-border));\n border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));\n border-color: var(--saltCard-borderColor, var(--salt-container-primary-borderColor));\n border-radius: var(--saltCard-borderRadius, 0);\n box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n color: var(--saltCard-color, var(--salt-text-primary-foreground));\n overflow: hidden;\n transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Styles applied to Card content */\n.saltCard-content {\n color: inherit;\n font-size: var(--saltCard-content-fontSize, var(--salt-text-fontSize));\n letter-spacing: var(--saltCard-content-letterSpacing, normal);\n line-height: var(--salt-text-lineHeight);\n min-height: var(--saltCard-content-minHeight, var(--salt-text-minHeight));\n padding: var(--saltCard-padding, calc(var(--salt-size-unit) * 3));\n}\n\n/* Styles applied if `interactable={true}` */\n.saltCard-interactable {\n display: block;\n transition: none;\n}\n\n/* Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n border-color: var(--saltCard-borderColor-hover, var(--salt-selectable-borderColor-hover));\n color: var(--saltCard-color-hover, var(--salt-text-primary-foreground));\n cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n position: relative;\n box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n border-color: var(--saltCard-borderColor-hover, var(--salt-selectable-borderColor-selected));\n box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n box-shadow: var(--saltCard-boxShadow-hover-disabled, var(--salt-overlayable-shadow));\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n border-color: var(--saltCard-borderColor, var(--salt-container-primary-borderColor-disabled));\n cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n color: var(--saltCard-color-disabled, var(--salt-text-primary-foreground-disabled));\n outline: none;\n}\n\n/* Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n pointer-events: none;\n}\n";
3
+ var css_248z = "/* Styles applied to the root element */\n.saltCard {\n --card-borderColor: var(--salt-container-primary-borderColor);\n --card-shadow: var(--salt-overlayable-shadow);\n\n background: var(--saltCard-background, var(--salt-container-primary-background));\n border-width: var(--saltCard-borderWidth, var(--salt-size-border));\n border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));\n border-color: var(--saltCard-borderColor, var(--card-borderColor));\n border-radius: var(--saltCard-borderRadius, 0);\n box-shadow: var(--saltCard-boxShadow, var(--card-shadow));\n overflow: hidden;\n transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* TODO: this should possibly be moved to animation.css? */\n}\n\n/* Styles applied to Card content */\n.saltCard-content {\n color: var(--saltCard-color, var(--salt-text-primary-foreground));\n min-height: var(--salt-text-minHeight);\n padding: var(--saltCard-padding, calc(var(--salt-size-unit) * 3));\n}\n\n/* Styles applied if `interactable={true}` */\n.saltCard-interactable {\n display: block;\n transition: none;\n}\n\n/* Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n --card-borderColor: var(--salt-selectable-borderColor-hover);\n --card-shadow: var(--salt-overlayable-shadow-hover);\n\n cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n position: relative;\n}\n\n/* Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n --card-borderColor: var(--salt-selectable-borderColor-selected);\n --card-shadow: var(--salt-overlayable-shadow-hover);\n\n outline: var(--salt-focused-outline);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n --card-shadow: var(--salt-overlayable-shadow);\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n --card-borderColor: var(--salt-container-primary-borderColor-disabled);\n\n color: var(--saltCard-color-disabled, var(--salt-text-primary-foreground-disabled));\n cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n outline: none;\n}\n\n/* Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n pointer-events: none;\n}\n";
4
4
  styleInject(css_248z);
5
5
 
6
6
  export { css_248z as default };
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { clsx } from 'clsx';
3
3
  import { forwardRef } from 'react';
4
4
  import { makePrefixer } from '../utils/makePrefixer.js';
5
+ import '../utils/useFloatingUI.js';
5
6
  import '../utils/useId.js';
6
7
  import '../salt-provider/SaltProvider.js';
7
8
  import '../viewport/ViewportProvider.js';
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport \"./Card.css\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the card will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n * on the page.\n */\n interactable?: boolean;\n}\n\n/**\n * Card component is a sheet if material that serves as an entry point to more detailed information.\n * Cards display content composed of different elements whose size or supported actions vary.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n props,\n ref\n) {\n const { className, disabled, interactable, children, ...rest } = props;\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"interactable\")]: interactable,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <div className={withBaseName(\"content\")}>{children}</div>\n </div>\n );\n});\n"],"names":["Card"],"mappings":";;;;;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAkBrC,MAAM,IAAO,GAAA,UAAA,CAAsC,SAASA,KAAAA,CACjE,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,YAAc,EAAA,QAAA,EAAA,GAAa,MAAS,GAAA,KAAA,CAAA;AAEjE,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,OAClC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MAAI,QAAA;AAAA,KAAS,CAAA;AAAA,GACrD,CAAA,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport \"./Card.css\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the card will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n * on the page.\n */\n interactable?: boolean;\n}\n\n/**\n * Card component is a sheet if material that serves as an entry point to more detailed information.\n * Cards display content composed of different elements whose size or supported actions vary.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n props,\n ref\n) {\n const { className, disabled, interactable, children, ...rest } = props;\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"interactable\")]: interactable,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <div className={withBaseName(\"content\")}>{children}</div>\n </div>\n );\n});\n"],"names":["Card"],"mappings":";;;;;;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAkBrC,MAAM,IAAO,GAAA,UAAA,CAAsC,SAASA,KAAAA,CACjE,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,YAAc,EAAA,QAAA,EAAA,GAAa,MAAS,GAAA,KAAA,CAAA;AAEjE,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,OAClC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MAAI,QAAA;AAAA,KAAS,CAAA;AAAA,GACrD,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -1,6 +1,7 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef } from 'react';
3
3
  import { makePrefixer } from '../utils/makePrefixer.js';
4
+ import '../utils/useFloatingUI.js';
4
5
  import '../utils/useId.js';
5
6
  import { useResponsiveProp } from '../utils/useResponsiveProp.js';
6
7
  import './FlexItem.css.js';
@@ -1 +1 @@
1
- {"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport \"./FlexItem.css\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\nexport type flexItemAlignment = typeof FLEX_ITEM_ALIGNMENTS[number];\n\nexport type FlexItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n */\n align?: flexItemAlignment;\n /**\n * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n */\n shrink?: ResponsiveProp<number>;\n /**\n * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n */\n grow?: ResponsiveProp<number>;\n }\n >;\n\ntype FlexItemComponent = <T extends ElementType = \"div\">(\n props: FlexItemProps<T>\n) => ReactElement | null;\n\nexport const FlexItem: FlexItemComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n align,\n children,\n className,\n shrink,\n grow,\n style,\n ...rest\n }: FlexItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as || \"div\";\n const flexItemShrink = useResponsiveProp(shrink, 1);\n const flexItemGrow = useResponsiveProp(grow, 0);\n\n const itemStyle = {\n \"--saltFlexItem-alignment\": align,\n \"--saltFlexItem-shrink\": flexItemShrink,\n \"--saltFlexItem-grow\": flexItemGrow,\n ...style,\n };\n return (\n <Component\n className={clsx(className, withBaseName())}\n ref={ref}\n style={itemStyle}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AACzC,MAAM,oBAAuB,GAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA4BO,MAAM,QAA8B,GAAA,UAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,cAAA,GAAiB,iBAAkB,CAAA,MAAA,EAAQ,CAAC,CAAA,CAAA;AAClD,IAAM,MAAA,YAAA,GAAe,iBAAkB,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAE9C,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,0BAA4B,EAAA,KAAA;AAAA,MAC5B,uBAAyB,EAAA,cAAA;AAAA,MACzB,qBAAuB,EAAA,YAAA;AAAA,MACvB,GAAG,KAAA;AAAA,KACL,CAAA;AACA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,EAAc,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport \"./FlexItem.css\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\nexport type flexItemAlignment = typeof FLEX_ITEM_ALIGNMENTS[number];\n\nexport type FlexItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n */\n align?: flexItemAlignment;\n /**\n * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n */\n shrink?: ResponsiveProp<number>;\n /**\n * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n */\n grow?: ResponsiveProp<number>;\n }\n >;\n\ntype FlexItemComponent = <T extends ElementType = \"div\">(\n props: FlexItemProps<T>\n) => ReactElement | null;\n\nexport const FlexItem: FlexItemComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n align,\n children,\n className,\n shrink,\n grow,\n style,\n ...rest\n }: FlexItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as || \"div\";\n const flexItemShrink = useResponsiveProp(shrink, 1);\n const flexItemGrow = useResponsiveProp(grow, 0);\n\n const itemStyle = {\n \"--saltFlexItem-alignment\": align,\n \"--saltFlexItem-shrink\": flexItemShrink,\n \"--saltFlexItem-grow\": flexItemGrow,\n ...style,\n };\n return (\n <Component\n className={clsx(className, withBaseName())}\n ref={ref}\n style={itemStyle}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AACzC,MAAM,oBAAuB,GAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA4BO,MAAM,QAA8B,GAAA,UAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,cAAA,GAAiB,iBAAkB,CAAA,MAAA,EAAQ,CAAC,CAAA,CAAA;AAClD,IAAM,MAAA,YAAA,GAAe,iBAAkB,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAE9C,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,0BAA4B,EAAA,KAAA;AAAA,MAC5B,uBAAyB,EAAA,cAAA;AAAA,MACzB,qBAAuB,EAAA,YAAA;AAAA,MACvB,GAAG,KAAA;AAAA,KACL,CAAA;AACA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,EAAc,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef } from 'react';
3
3
  import { clsx } from 'clsx';
4
4
  import { makePrefixer } from '../utils/makePrefixer.js';
5
+ import '../utils/useFloatingUI.js';
5
6
  import '../utils/useId.js';
6
7
  import { useResponsiveProp } from '../utils/useResponsiveProp.js';
7
8
  import './FlexLayout.css.js';
@@ -1 +1 @@
1
- {"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\n\nimport \"./FlexLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltFlexLayout\");\n\nexport type LayoutSeparator = \"start\" | \"center\" | \"end\";\nexport type LayoutDirection = \"row\" | \"column\";\n\nexport const FLEX_ALIGNMENT_BASE = [\"start\", \"end\", \"center\"] as const;\nexport const FLEX_CONTENT_ALIGNMENT_BASE = [\n ...FLEX_ALIGNMENT_BASE,\n \"space-between\",\n \"space-around\",\n \"space-evenly\",\n] as const;\n\nexport type FlexAlignment = typeof FLEX_ALIGNMENT_BASE[number];\nexport type FlexContentAlignment = typeof FLEX_CONTENT_ALIGNMENT_BASE[number];\n\nexport type FlexLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexAlignment | \"stretch\" | \"baseline\";\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n */\n direction?: ResponsiveProp<LayoutDirection>;\n /**\n * Controls the space between items, default is 3.\n */\n gap?: ResponsiveProp<number>;\n /**\n * Defines the alignment along the main axis, default is \"start\".\n */\n justify?: FlexContentAlignment;\n /**\n * **Deprecated:** For separators see `StackLayout` component instead.\n *\n * Adds a separator between elements if wrap is not active, default is false.\n */\n separators?: LayoutSeparator | true;\n /**\n * Allow the items to wrap as needed, default is false.\n */\n wrap?: ResponsiveProp<boolean>;\n }\n >;\n\ntype FlexLayoutComponent = <T extends ElementType = \"div\">(\n props: FlexLayoutProps<T>\n) => ReactElement | null;\n\nexport const FlexLayout: FlexLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n align,\n children,\n className,\n direction,\n gap,\n justify,\n separators,\n style,\n wrap,\n ...rest\n }: FlexLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as || \"div\";\n const separatorAlignment = separators === true ? \"center\" : separators;\n const addPrefix = (style: string) => {\n return style === \"start\" || style === \"end\" ? `flex-${style}` : style;\n };\n\n const flexGap = useResponsiveProp(gap, 3);\n const flexDirection = useResponsiveProp(direction, \"row\");\n const flexWrap = useResponsiveProp(wrap, false);\n const flexLayoutStyles = {\n ...style,\n \"--flexLayout-align\": align && addPrefix(align),\n \"--flexLayout-direction\": flexDirection,\n \"--flexLayout-gap-multiplier\": flexGap,\n \"--flexLayout-justify\": justify && addPrefix(justify),\n \"--flexLayout-wrap\": flexWrap ? \"wrap\" : \"nowrap\",\n };\n\n return (\n <Component\n className={clsx(className, withBaseName(), {\n [withBaseName(\"separator\")]: separatorAlignment && !wrap,\n [withBaseName(\n `separator-${flexDirection || \"row\"}-${\n separatorAlignment || \"center\"\n }`\n )]: separatorAlignment && !wrap,\n [withBaseName(`separator-${flexDirection || \"row\"}`)]:\n separatorAlignment && !wrap,\n })}\n ref={ref}\n style={flexLayoutStyles}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["style"],"mappings":";;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAK3C,MAAM,mBAAsB,GAAA,CAAC,OAAS,EAAA,KAAA,EAAO,QAAQ,EAAA;AACrD,MAAM,2BAA8B,GAAA;AAAA,EACzC,GAAG,mBAAA;AAAA,EACH,eAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AACF,EAAA;AA0CO,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAC5D,IAAM,MAAA,SAAA,GAAY,CAACA,MAAkB,KAAA;AACnC,MAAA,OAAOA,MAAU,KAAA,OAAA,IAAWA,MAAU,KAAA,KAAA,GAAQ,QAAQA,MAAUA,CAAAA,CAAAA,GAAAA,MAAAA,CAAAA;AAAA,KAClE,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,iBAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AACxC,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,SAAA,EAAW,KAAK,CAAA,CAAA;AACxD,IAAM,MAAA,QAAA,GAAW,iBAAkB,CAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAC9C,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,oBAAA,EAAsB,KAAS,IAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MAC9C,wBAA0B,EAAA,aAAA;AAAA,MAC1B,6BAA+B,EAAA,OAAA;AAAA,MAC/B,sBAAA,EAAwB,OAAW,IAAA,SAAA,CAAU,OAAO,CAAA;AAAA,MACpD,mBAAA,EAAqB,WAAW,MAAS,GAAA,QAAA;AAAA,KAC3C,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,EAAgB,EAAA;AAAA,QACzC,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,sBAAsB,CAAC,IAAA;AAAA,QACpD,CAAC,YAAA;AAAA,UACC,CAAA,UAAA,EAAa,aAAiB,IAAA,KAAA,CAAA,CAAA,EAC5B,kBAAsB,IAAA,QAAA,CAAA,CAAA;AAAA,SAE1B,GAAI,sBAAsB,CAAC,IAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,CAAA,UAAA,EAAa,iBAAiB,KAAO,CAAA,CAAA,CAAA,GACjD,sBAAsB,CAAC,IAAA;AAAA,OAC1B,CAAA;AAAA,MACD,GAAA;AAAA,MACA,KAAO,EAAA,gBAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\n\nimport \"./FlexLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltFlexLayout\");\n\nexport type LayoutSeparator = \"start\" | \"center\" | \"end\";\nexport type LayoutDirection = \"row\" | \"column\";\n\nexport const FLEX_ALIGNMENT_BASE = [\"start\", \"end\", \"center\"] as const;\nexport const FLEX_CONTENT_ALIGNMENT_BASE = [\n ...FLEX_ALIGNMENT_BASE,\n \"space-between\",\n \"space-around\",\n \"space-evenly\",\n] as const;\n\nexport type FlexAlignment = typeof FLEX_ALIGNMENT_BASE[number];\nexport type FlexContentAlignment = typeof FLEX_CONTENT_ALIGNMENT_BASE[number];\n\nexport type FlexLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexAlignment | \"stretch\" | \"baseline\";\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n */\n direction?: ResponsiveProp<LayoutDirection>;\n /**\n * Controls the space between items, default is 3.\n */\n gap?: ResponsiveProp<number>;\n /**\n * Defines the alignment along the main axis, default is \"start\".\n */\n justify?: FlexContentAlignment;\n /**\n * **Deprecated:** For separators see `StackLayout` component instead.\n *\n * Adds a separator between elements if wrap is not active, default is false.\n */\n separators?: LayoutSeparator | true;\n /**\n * Allow the items to wrap as needed, default is false.\n */\n wrap?: ResponsiveProp<boolean>;\n }\n >;\n\ntype FlexLayoutComponent = <T extends ElementType = \"div\">(\n props: FlexLayoutProps<T>\n) => ReactElement | null;\n\nexport const FlexLayout: FlexLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n align,\n children,\n className,\n direction,\n gap,\n justify,\n separators,\n style,\n wrap,\n ...rest\n }: FlexLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as || \"div\";\n const separatorAlignment = separators === true ? \"center\" : separators;\n const addPrefix = (style: string) => {\n return style === \"start\" || style === \"end\" ? `flex-${style}` : style;\n };\n\n const flexGap = useResponsiveProp(gap, 3);\n const flexDirection = useResponsiveProp(direction, \"row\");\n const flexWrap = useResponsiveProp(wrap, false);\n const flexLayoutStyles = {\n ...style,\n \"--flexLayout-align\": align && addPrefix(align),\n \"--flexLayout-direction\": flexDirection,\n \"--flexLayout-gap-multiplier\": flexGap,\n \"--flexLayout-justify\": justify && addPrefix(justify),\n \"--flexLayout-wrap\": flexWrap ? \"wrap\" : \"nowrap\",\n };\n\n return (\n <Component\n className={clsx(className, withBaseName(), {\n [withBaseName(\"separator\")]: separatorAlignment && !wrap,\n [withBaseName(\n `separator-${flexDirection || \"row\"}-${\n separatorAlignment || \"center\"\n }`\n )]: separatorAlignment && !wrap,\n [withBaseName(`separator-${flexDirection || \"row\"}`)]:\n separatorAlignment && !wrap,\n })}\n ref={ref}\n style={flexLayoutStyles}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["style"],"mappings":";;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAK3C,MAAM,mBAAsB,GAAA,CAAC,OAAS,EAAA,KAAA,EAAO,QAAQ,EAAA;AACrD,MAAM,2BAA8B,GAAA;AAAA,EACzC,GAAG,mBAAA;AAAA,EACH,eAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AACF,EAAA;AA0CO,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAC5D,IAAM,MAAA,SAAA,GAAY,CAACA,MAAkB,KAAA;AACnC,MAAA,OAAOA,MAAU,KAAA,OAAA,IAAWA,MAAU,KAAA,KAAA,GAAQ,QAAQA,MAAUA,CAAAA,CAAAA,GAAAA,MAAAA,CAAAA;AAAA,KAClE,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,iBAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AACxC,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,SAAA,EAAW,KAAK,CAAA,CAAA;AACxD,IAAM,MAAA,QAAA,GAAW,iBAAkB,CAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAC9C,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,oBAAA,EAAsB,KAAS,IAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MAC9C,wBAA0B,EAAA,aAAA;AAAA,MAC1B,6BAA+B,EAAA,OAAA;AAAA,MAC/B,sBAAA,EAAwB,OAAW,IAAA,SAAA,CAAU,OAAO,CAAA;AAAA,MACpD,mBAAA,EAAqB,WAAW,MAAS,GAAA,QAAA;AAAA,KAC3C,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,EAAgB,EAAA;AAAA,QACzC,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,sBAAsB,CAAC,IAAA;AAAA,QACpD,CAAC,YAAA;AAAA,UACC,CAAA,UAAA,EAAa,aAAiB,IAAA,KAAA,CAAA,CAAA,EAC5B,kBAAsB,IAAA,QAAA,CAAA,CAAA;AAAA,SAE1B,GAAI,sBAAsB,CAAC,IAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,CAAA,UAAA,EAAa,iBAAiB,KAAO,CAAA,CAAA,CAAA,GACjD,sBAAsB,CAAC,IAAA;AAAA,OAC1B,CAAA;AAAA,MACD,GAAA;AAAA,MACA,KAAO,EAAA,gBAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef } from 'react';
3
3
  import { clsx } from 'clsx';
4
4
  import { makePrefixer } from '../utils/makePrefixer.js';
5
+ import '../utils/useFloatingUI.js';
5
6
  import '../utils/useId.js';
6
7
  import { useResponsiveProp } from '../utils/useResponsiveProp.js';
7
8
  import './GridItem.css.js';
@@ -1 +1 @@
1
- {"version":3,"file":"GridItem.js","sources":["../src/grid-item/GridItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicRef,\n PolymorphicComponentPropWithRef,\n} from \"../utils\";\nimport \"./GridItem.css\";\n\nexport const GRID_ALIGNMENT_BASE = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\ntype GridAlignment = typeof GRID_ALIGNMENT_BASE[number];\n\ntype GridProperty = number | \"auto\";\nexport type GridItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * The item will span across the provided number of grid columns. Defaults to \"auto\"\n */\n colSpan?: ResponsiveProp<GridProperty>;\n /**\n * The item will span across the provided number of grid rows. Defaults to \"auto\"\n */\n rowSpan?: ResponsiveProp<GridProperty>;\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridAlignment;\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridAlignment;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltGridItem\");\n\nconst colStart = \"auto\";\nconst colEnd = \"auto\";\nconst rowStart = \"auto\";\nconst rowEnd = \"auto\";\n\ntype GridItemComponent = <T extends ElementType = \"div\">(\n props: GridItemProps<T>\n) => ReactElement | null;\n\nexport const GridItem: GridItemComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n colSpan,\n rowSpan,\n horizontalAlignment = \"stretch\",\n verticalAlignment = \"stretch\",\n style,\n ...rest\n }: GridItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as || \"div\";\n const gridItemColSpan = useResponsiveProp(colSpan, \"auto\");\n\n const gridItemRowSpan = useResponsiveProp(rowSpan, \"auto\");\n\n const gridColumnStart = gridItemColSpan\n ? `span ${gridItemColSpan}`\n : colStart;\n\n const gridColumnEnd = gridItemColSpan ? `span ${gridItemColSpan}` : colEnd;\n\n const gridRowStart = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowStart;\n\n const gridRowEnd = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowEnd;\n\n const gridStyles = {\n ...style,\n \"--gridItem-justifySelf\": horizontalAlignment,\n \"--gridItem-alignSelf\": verticalAlignment,\n \"--gridItem-gridRowStart\": gridRowStart,\n \"--gridItem-gridColumnStart\": gridColumnStart,\n \"--gridItem-gridRowEnd\": gridRowEnd,\n \"--gridItem-gridColumnEnd\": gridColumnEnd,\n };\n\n return (\n <Component\n className={clsx(withBaseName(), className)}\n style={gridStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;AAYO,MAAM,mBAAsB,GAAA;AAAA,EACjC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA4BA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEhD,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AACf,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AAMR,MAAM,QAA8B,GAAA,UAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,mBAAsB,GAAA,SAAA;AAAA,IACtB,iBAAoB,GAAA,SAAA;AAAA,IACpB,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,eAAA,GAAkB,iBAAkB,CAAA,OAAA,EAAS,MAAM,CAAA,CAAA;AAEzD,IAAM,MAAA,eAAA,GAAkB,iBAAkB,CAAA,OAAA,EAAS,MAAM,CAAA,CAAA;AAEzD,IAAM,MAAA,eAAA,GAAkB,eACpB,GAAA,CAAA,KAAA,EAAQ,eACR,CAAA,CAAA,GAAA,QAAA,CAAA;AAEJ,IAAM,MAAA,aAAA,GAAgB,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEpE,IAAM,MAAA,YAAA,GAAe,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,QAAA,CAAA;AAEnE,IAAM,MAAA,UAAA,GAAa,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEjE,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAG,KAAA;AAAA,MACH,wBAA0B,EAAA,mBAAA;AAAA,MAC1B,sBAAwB,EAAA,iBAAA;AAAA,MACxB,yBAA2B,EAAA,YAAA;AAAA,MAC3B,4BAA8B,EAAA,eAAA;AAAA,MAC9B,uBAAyB,EAAA,UAAA;AAAA,MACzB,0BAA4B,EAAA,aAAA;AAAA,KAC9B,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,UAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"GridItem.js","sources":["../src/grid-item/GridItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicRef,\n PolymorphicComponentPropWithRef,\n} from \"../utils\";\nimport \"./GridItem.css\";\n\nexport const GRID_ALIGNMENT_BASE = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\ntype GridAlignment = typeof GRID_ALIGNMENT_BASE[number];\n\ntype GridProperty = number | \"auto\";\nexport type GridItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * The item will span across the provided number of grid columns. Defaults to \"auto\"\n */\n colSpan?: ResponsiveProp<GridProperty>;\n /**\n * The item will span across the provided number of grid rows. Defaults to \"auto\"\n */\n rowSpan?: ResponsiveProp<GridProperty>;\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridAlignment;\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridAlignment;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltGridItem\");\n\nconst colStart = \"auto\";\nconst colEnd = \"auto\";\nconst rowStart = \"auto\";\nconst rowEnd = \"auto\";\n\ntype GridItemComponent = <T extends ElementType = \"div\">(\n props: GridItemProps<T>\n) => ReactElement | null;\n\nexport const GridItem: GridItemComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n colSpan,\n rowSpan,\n horizontalAlignment = \"stretch\",\n verticalAlignment = \"stretch\",\n style,\n ...rest\n }: GridItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as || \"div\";\n const gridItemColSpan = useResponsiveProp(colSpan, \"auto\");\n\n const gridItemRowSpan = useResponsiveProp(rowSpan, \"auto\");\n\n const gridColumnStart = gridItemColSpan\n ? `span ${gridItemColSpan}`\n : colStart;\n\n const gridColumnEnd = gridItemColSpan ? `span ${gridItemColSpan}` : colEnd;\n\n const gridRowStart = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowStart;\n\n const gridRowEnd = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowEnd;\n\n const gridStyles = {\n ...style,\n \"--gridItem-justifySelf\": horizontalAlignment,\n \"--gridItem-alignSelf\": verticalAlignment,\n \"--gridItem-gridRowStart\": gridRowStart,\n \"--gridItem-gridColumnStart\": gridColumnStart,\n \"--gridItem-gridRowEnd\": gridRowEnd,\n \"--gridItem-gridColumnEnd\": gridColumnEnd,\n };\n\n return (\n <Component\n className={clsx(withBaseName(), className)}\n style={gridStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;AAYO,MAAM,mBAAsB,GAAA;AAAA,EACjC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA4BA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEhD,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AACf,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AAMR,MAAM,QAA8B,GAAA,UAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,mBAAsB,GAAA,SAAA;AAAA,IACtB,iBAAoB,GAAA,SAAA;AAAA,IACpB,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,eAAA,GAAkB,iBAAkB,CAAA,OAAA,EAAS,MAAM,CAAA,CAAA;AAEzD,IAAM,MAAA,eAAA,GAAkB,iBAAkB,CAAA,OAAA,EAAS,MAAM,CAAA,CAAA;AAEzD,IAAM,MAAA,eAAA,GAAkB,eACpB,GAAA,CAAA,KAAA,EAAQ,eACR,CAAA,CAAA,GAAA,QAAA,CAAA;AAEJ,IAAM,MAAA,aAAA,GAAgB,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEpE,IAAM,MAAA,YAAA,GAAe,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,QAAA,CAAA;AAEnE,IAAM,MAAA,UAAA,GAAa,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEjE,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAG,KAAA;AAAA,MACH,wBAA0B,EAAA,mBAAA;AAAA,MAC1B,sBAAwB,EAAA,iBAAA;AAAA,MACxB,yBAA2B,EAAA,YAAA;AAAA,MAC3B,4BAA8B,EAAA,eAAA;AAAA,MAC9B,uBAAyB,EAAA,UAAA;AAAA,MACzB,0BAA4B,EAAA,aAAA;AAAA,KAC9B,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,UAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef } from 'react';
3
3
  import { clsx } from 'clsx';
4
4
  import { makePrefixer } from '../utils/makePrefixer.js';
5
+ import '../utils/useFloatingUI.js';
5
6
  import '../utils/useId.js';
6
7
  import { useResponsiveProp } from '../utils/useResponsiveProp.js';
7
8
  import './GridLayout.css.js';
@@ -1 +1 @@
1
- {"version":3,"file":"GridLayout.js","sources":["../src/grid-layout/GridLayout.tsx"],"sourcesContent":["import { forwardRef, ReactElement, ElementType } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\n\nimport \"./GridLayout.css\";\n\nexport type GridLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Number of columns to be displayed. Defaults to 12\n */\n columns?: ResponsiveProp<number>;\n /**\n * Number of rows to be displayed. Defaults to 1\n */\n rows?: ResponsiveProp<number>;\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 3\n */\n gap?: ResponsiveProp<number>;\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 1\n */\n columnGap?: ResponsiveProp<number>;\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 1\n */\n rowGap?: ResponsiveProp<number>;\n }\n >;\n\ntype GridLayoutComponent = <T extends ElementType = \"div\">(\n props: GridLayoutProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltGridLayout\");\n\nexport const GridLayout: GridLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n columns = 12,\n rows = 1,\n gap,\n columnGap,\n rowGap,\n style,\n ...rest\n }: GridLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as || \"div\";\n\n const gridColumns = useResponsiveProp(columns, 12);\n\n const gridRows = useResponsiveProp(rows, 1);\n\n const gridGap = useResponsiveProp(gap, 3);\n\n const gridColumnGap = useResponsiveProp(columnGap, 3);\n\n const gridRowGap = useResponsiveProp(rowGap, 3);\n\n const gridLayoutStyles = {\n ...style,\n \"--gridLayout-columns\": gridColumns,\n \"--gridLayout-rows\": gridRows,\n \"--gridLayout-columnGap\": gridColumnGap || gridGap,\n \"--gridLayout-rowGap\": gridRowGap || gridGap,\n };\n\n return (\n <Component\n className={clsx(withBaseName(), className)}\n style={gridLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;AA4CA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAE3C,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAU,GAAA,EAAA;AAAA,IACV,IAAO,GAAA,CAAA;AAAA,IACP,GAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAM,MAAA,WAAA,GAAc,iBAAkB,CAAA,OAAA,EAAS,EAAE,CAAA,CAAA;AAEjD,IAAM,MAAA,QAAA,GAAW,iBAAkB,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAE1C,IAAM,MAAA,OAAA,GAAU,iBAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AAExC,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,SAAA,EAAW,CAAC,CAAA,CAAA;AAEpD,IAAM,MAAA,UAAA,GAAa,iBAAkB,CAAA,MAAA,EAAQ,CAAC,CAAA,CAAA;AAE9C,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,sBAAwB,EAAA,WAAA;AAAA,MACxB,mBAAqB,EAAA,QAAA;AAAA,MACrB,0BAA0B,aAAiB,IAAA,OAAA;AAAA,MAC3C,uBAAuB,UAAc,IAAA,OAAA;AAAA,KACvC,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,gBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"GridLayout.js","sources":["../src/grid-layout/GridLayout.tsx"],"sourcesContent":["import { forwardRef, ReactElement, ElementType } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\n\nimport \"./GridLayout.css\";\n\nexport type GridLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Number of columns to be displayed. Defaults to 12\n */\n columns?: ResponsiveProp<number>;\n /**\n * Number of rows to be displayed. Defaults to 1\n */\n rows?: ResponsiveProp<number>;\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 3\n */\n gap?: ResponsiveProp<number>;\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 1\n */\n columnGap?: ResponsiveProp<number>;\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 1\n */\n rowGap?: ResponsiveProp<number>;\n }\n >;\n\ntype GridLayoutComponent = <T extends ElementType = \"div\">(\n props: GridLayoutProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltGridLayout\");\n\nexport const GridLayout: GridLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n columns = 12,\n rows = 1,\n gap,\n columnGap,\n rowGap,\n style,\n ...rest\n }: GridLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as || \"div\";\n\n const gridColumns = useResponsiveProp(columns, 12);\n\n const gridRows = useResponsiveProp(rows, 1);\n\n const gridGap = useResponsiveProp(gap, 3);\n\n const gridColumnGap = useResponsiveProp(columnGap, 3);\n\n const gridRowGap = useResponsiveProp(rowGap, 3);\n\n const gridLayoutStyles = {\n ...style,\n \"--gridLayout-columns\": gridColumns,\n \"--gridLayout-rows\": gridRows,\n \"--gridLayout-columnGap\": gridColumnGap || gridGap,\n \"--gridLayout-rowGap\": gridRowGap || gridGap,\n };\n\n return (\n <Component\n className={clsx(withBaseName(), className)}\n style={gridLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;AA4CA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAE3C,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAU,GAAA,EAAA;AAAA,IACV,IAAO,GAAA,CAAA;AAAA,IACP,GAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAM,MAAA,WAAA,GAAc,iBAAkB,CAAA,OAAA,EAAS,EAAE,CAAA,CAAA;AAEjD,IAAM,MAAA,QAAA,GAAW,iBAAkB,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAE1C,IAAM,MAAA,OAAA,GAAU,iBAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AAExC,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,SAAA,EAAW,CAAC,CAAA,CAAA;AAEpD,IAAM,MAAA,UAAA,GAAa,iBAAkB,CAAA,MAAA,EAAQ,CAAC,CAAA,CAAA;AAE9C,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,sBAAwB,EAAA,WAAA;AAAA,MACxB,mBAAqB,EAAA,QAAA;AAAA,MACrB,0BAA0B,aAAiB,IAAA,OAAA;AAAA,MAC3C,uBAAuB,UAAc,IAAA,OAAA;AAAA,KACvC,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,gBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -15,6 +15,7 @@ export { GRID_ALIGNMENT_BASE, GridItem } from './grid-item/GridItem.js';
15
15
  export { GridLayout } from './grid-layout/GridLayout.js';
16
16
  export { Link } from './link/Link.js';
17
17
  export { Panel } from './panel/Panel.js';
18
+ export { Spinner, SpinnerSizeValues } from './spinner/Spinner.js';
18
19
  export { StackLayout } from './stack-layout/StackLayout.js';
19
20
  export { StatusIndicator } from './status-indicator/StatusIndicator.js';
20
21
  export { VALIDATION_NAMED_STATUS } from './status-indicator/ValidationStatus.js';
@@ -26,6 +27,9 @@ export { DensityValues } from './theme/Density.js';
26
27
  export { getCharacteristicValue } from './theme/Theme.js';
27
28
  export { ModeValues } from './theme/Mode.js';
28
29
  export { BreakpointContext, DEFAULT_DENSITY, DensityContext, SaltProvider, ThemeContext, useBreakpoints, useDensity, useTheme } from './salt-provider/SaltProvider.js';
30
+ export { SplitLayout } from './split-layout/SplitLayout.js';
31
+ export { Tooltip } from './tooltip/Tooltip.js';
32
+ export { useTooltip } from './tooltip/useTooltip.js';
29
33
  export { createChainedFunction } from './utils/createChainedFunction.js';
30
34
  export { createContext } from './utils/createContext.js';
31
35
  export { debounce } from './utils/debounce.js';
@@ -35,6 +39,7 @@ export { ownerDocument } from './utils/ownerDocument.js';
35
39
  export { ownerWindow } from './utils/ownerWindow.js';
36
40
  export { setRef } from './utils/setRef.js';
37
41
  export { useControlled } from './utils/useControlled.js';
42
+ export { DEFAULT_FLOATING_UI_MIDDLEWARE, useFloatingUI } from './utils/useFloatingUI.js';
38
43
  export { useForkRef } from './utils/useForkRef.js';
39
44
  export { useId, useIdMemo } from './utils/useId.js';
40
45
  export { teardown, useIsFocusVisible } from './utils/useIsFocusVisible.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
3
3
  import { clsx } from 'clsx';
4
4
  import { TearOutIcon } from '@salt-ds/icons';
5
5
  import { makePrefixer } from '../utils/makePrefixer.js';
6
+ import '../utils/useFloatingUI.js';
6
7
  import '../utils/useId.js';
7
8
  import '../salt-provider/SaltProvider.js';
8
9
  import '../viewport/ViewportProvider.js';
@@ -1 +1 @@
1
- {"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import { ComponentType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { IconProps, TearOutIcon } from \"@salt-ds/icons\";\nimport { makePrefixer } from \"../utils\";\nimport { Text, TextProps } from \"../text\";\n\nimport \"./Link.css\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps extends Omit<TextProps<\"a\">, \"as\"> {\n IconComponent?: ComponentType<IconProps>;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n {\n IconComponent = TearOutIcon,\n href,\n className,\n children,\n variant = \"primary\",\n target = \"_self\",\n ...rest\n },\n ref\n): ReactElement<LinkProps> {\n return (\n <Text\n as=\"a\"\n className={clsx(withBaseName(), className)}\n href={href}\n ref={ref}\n target={target}\n variant={variant}\n {...rest}\n >\n {children}\n {target === \"_blank\" && (\n <>\n <IconComponent className={withBaseName(\"icon\")} aria-hidden />\n <span className={withBaseName(\"externalLinkADA\")}>External Link</span>\n </>\n )}\n </Text>\n );\n});\n"],"names":["Link"],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAY/B,MAAA,IAAA,GAAO,UAAyC,CAAA,SAASA,KACpE,CAAA;AAAA,EACE,aAAgB,GAAA,WAAA;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,SAAA;AAAA,EACV,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,IAAA;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,EAAG,EAAA,GAAA;AAAA,IACH,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAA;AAAA,IACA,GAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,WAAW,QACV,oBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACE,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAAG,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,0BAC3D,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YAAG,QAAA,EAAA,eAAA;AAAA,WAAa,CAAA;AAAA,SAAA;AAAA,OACjE,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import { ComponentType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { IconProps, TearOutIcon } from \"@salt-ds/icons\";\nimport { makePrefixer } from \"../utils\";\nimport { Text, TextProps } from \"../text\";\n\nimport \"./Link.css\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps extends Omit<TextProps<\"a\">, \"as\" | \"disabled\"> {\n IconComponent?: ComponentType<IconProps>;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n {\n IconComponent = TearOutIcon,\n href,\n className,\n children,\n variant = \"primary\",\n target = \"_self\",\n ...rest\n },\n ref\n): ReactElement<LinkProps> {\n return (\n <Text\n as=\"a\"\n className={clsx(withBaseName(), className)}\n href={href}\n ref={ref}\n target={target}\n variant={variant}\n {...rest}\n >\n {children}\n {target === \"_blank\" && (\n <>\n <IconComponent className={withBaseName(\"icon\")} aria-hidden />\n <span className={withBaseName(\"externalLinkADA\")}>External Link</span>\n </>\n )}\n </Text>\n );\n});\n"],"names":["Link"],"mappings":";;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAY/B,MAAA,IAAA,GAAO,UAAyC,CAAA,SAASA,KACpE,CAAA;AAAA,EACE,aAAgB,GAAA,WAAA;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,SAAA;AAAA,EACV,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,IAAA;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,EAAG,EAAA,GAAA;AAAA,IACH,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAA;AAAA,IACA,GAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,WAAW,QACV,oBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACE,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAAG,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,0BAC3D,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YAAG,QAAA,EAAA,eAAA;AAAA,WAAa,CAAA;AAAA,SAAA;AAAA,OACjE,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { clsx } from 'clsx';
3
3
  import { forwardRef } from 'react';
4
4
  import { makePrefixer } from '../utils/makePrefixer.js';
5
+ import '../utils/useFloatingUI.js';
5
6
  import '../utils/useId.js';
6
7
  import '../salt-provider/SaltProvider.js';
7
8
  import '../viewport/ViewportProvider.js';
@@ -1 +1 @@
1
- {"version":3,"file":"Panel.js","sources":["../src/panel/Panel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport \"./Panel.css\";\n\n/**\n * Panel component that acts as wrapper around a node\n *\n * @example\n * const PanelExample = () => (\n * <Panel>\n * <p>This is a panel around some text.</p>\n * </Panel>\n * );\n *\n */\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Styling variant; defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltPanel\");\n\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n { className, children, variant = \"primary\", ...restProps },\n ref\n) {\n return (\n <div\n className={clsx(withBaseName(), withBaseName(variant), className)}\n ref={ref}\n {...restProps}\n >\n {children}\n </div>\n );\n});\n"],"names":["Panel"],"mappings":";;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAEhC,MAAA,KAAA,GAAQ,UAAuC,CAAA,SAASA,MACnE,CAAA,EAAE,SAAW,EAAA,QAAA,EAAU,OAAU,GAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACzD,GACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,IAChE,GAAA;AAAA,IACC,GAAG,SAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"Panel.js","sources":["../src/panel/Panel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport \"./Panel.css\";\n\n/**\n * Panel component that acts as wrapper around a node\n *\n * @example\n * const PanelExample = () => (\n * <Panel>\n * <p>This is a panel around some text.</p>\n * </Panel>\n * );\n *\n */\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Styling variant; defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltPanel\");\n\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n { className, children, variant = \"primary\", ...restProps },\n ref\n) {\n return (\n <div\n className={clsx(withBaseName(), withBaseName(variant), className)}\n ref={ref}\n {...restProps}\n >\n {children}\n </div>\n );\n});\n"],"names":["Panel"],"mappings":";;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAEhC,MAAA,KAAA,GAAQ,UAAuC,CAAA,SAASA,MACnE,CAAA,EAAE,SAAW,EAAA,QAAA,EAAU,OAAU,GAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACzD,GACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,IAChE,GAAA;AAAA,IACC,GAAG,SAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { clsx } from 'clsx';
3
3
  import React__default, { createContext, useContext, useMemo } from 'react';
4
4
  import '../aria-announcer/AriaAnnouncerContext.js';
5
+ import '../utils/useFloatingUI.js';
5
6
  import '../utils/useId.js';
6
7
  import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
7
8
  import { ViewportProvider } from '../viewport/ViewportProvider.js';
@@ -1 +1 @@
1
- {"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n createContext,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport \"./SaltProvider.css\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n children: ReactNode,\n themeName: ThemeName,\n density: Density,\n mode: Mode,\n applyClassesTo?: TargetElement\n) => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\") {\n return children;\n } else if (applyClassesTo === \"child\") {\n if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return React.cloneElement(children, {\n className: clsx(\n children.props?.className,\n ...themeNames,\n `salt-density-${density}`\n ),\n // @ts-ignore\n \"data-mode\": mode,\n });\n } else {\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`\n );\n return children;\n }\n } else {\n return (\n <div\n className={clsx(\n `salt-provider`,\n ...themeNames,\n `salt-density-${density}`\n )}\n data-mode={mode}\n >\n {children}\n </div>\n );\n }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ntype SaltProviderBaseProps = {\n applyClassesTo?: TargetElement;\n density?: Density;\n theme?: ThemeName;\n mode?: Mode;\n breakpoints?: Breakpoints;\n};\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nexport function SaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n}: SaltProviderProps) {\n const inheritedDensity = useContext(DensityContext);\n const { theme: inheritedThemes, mode: inheritedMode } = useTheme();\n\n const isRoot = inheritedThemes === undefined || inheritedThemes === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ??\n (inheritedThemes === \"\" ? DEFAULT_THEME_NAME : inheritedThemes);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n const applyClassesTo = applyClassesToProp ?? (isRoot ? \"root\" : \"scope\");\n\n const themeContextValue = useMemo(\n () => ({ theme: themeName, mode }),\n [themeName, mode]\n );\n\n const themedChildren = createThemedChildren(\n children,\n themeName,\n density,\n mode,\n applyClassesTo\n );\n\n useIsomorphicLayoutEffect(() => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\") {\n if (isRoot) {\n // add the styles we want to apply\n document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`\n );\n document.documentElement.dataset.mode = mode;\n } else {\n console.warn(\n \"\\nSaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\") {\n // When unmounting/remounting, remove the applied styles from the root\n document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`\n );\n document.documentElement.dataset.mode = undefined;\n }\n };\n }, [applyClassesTo, density, isRoot, mode, themeName]);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n );\n\n if (isRoot) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n } else {\n return saltProvider;\n }\n}\n\nexport const useTheme = (): ThemeContextProps => {\n return useContext(ThemeContext);\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density || densityFromContext || DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n createContext,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport \"./SaltProvider.css\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n children: ReactNode,\n themeName: ThemeName,\n density: Density,\n mode: Mode,\n applyClassesTo?: TargetElement\n) => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\") {\n return children;\n } else if (applyClassesTo === \"child\") {\n if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return React.cloneElement(children, {\n className: clsx(\n children.props?.className,\n ...themeNames,\n `salt-density-${density}`\n ),\n // @ts-ignore\n \"data-mode\": mode,\n });\n } else {\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`\n );\n return children;\n }\n } else {\n return (\n <div\n className={clsx(\n `salt-provider`,\n ...themeNames,\n `salt-density-${density}`\n )}\n data-mode={mode}\n >\n {children}\n </div>\n );\n }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ntype SaltProviderBaseProps = {\n applyClassesTo?: TargetElement;\n density?: Density;\n theme?: ThemeName;\n mode?: Mode;\n breakpoints?: Breakpoints;\n};\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nexport function SaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n}: SaltProviderProps) {\n const inheritedDensity = useContext(DensityContext);\n const { theme: inheritedThemes, mode: inheritedMode } = useTheme();\n\n const isRoot = inheritedThemes === undefined || inheritedThemes === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ??\n (inheritedThemes === \"\" ? DEFAULT_THEME_NAME : inheritedThemes);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n const applyClassesTo = applyClassesToProp ?? (isRoot ? \"root\" : \"scope\");\n\n const themeContextValue = useMemo(\n () => ({ theme: themeName, mode }),\n [themeName, mode]\n );\n\n const themedChildren = createThemedChildren(\n children,\n themeName,\n density,\n mode,\n applyClassesTo\n );\n\n useIsomorphicLayoutEffect(() => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\") {\n if (isRoot) {\n // add the styles we want to apply\n document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`\n );\n document.documentElement.dataset.mode = mode;\n } else {\n console.warn(\n \"\\nSaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\") {\n // When unmounting/remounting, remove the applied styles from the root\n document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`\n );\n document.documentElement.dataset.mode = undefined;\n }\n };\n }, [applyClassesTo, density, isRoot, mode, themeName]);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n );\n\n if (isRoot) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n } else {\n return saltProvider;\n }\n}\n\nexport const useTheme = (): ThemeContextProps => {\n return useContext(ThemeContext);\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density || densityFromContext || DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["React"],"mappings":"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"}
@@ -0,0 +1,7 @@
1
+ import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
2
+
3
+ var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n stop-color: var(--saltSpinner-gradient-color, var(--salt-measured-fill));\n}\n\n/* Styles applied when `size=\"default\"` */\n.saltSpinner-default {\n height: var(--salt-size-base);\n width: var(--salt-size-base);\n}\n\n/* Styles applied when `size=\"large\"` */\n.saltSpinner-large {\n height: calc(var(--salt-size-base) * 2);\n width: calc(var(--salt-size-base) * 2);\n}\n\n/* Styles applied to the SVG */\n.saltSpinner-spinner {\n animation: spinner 0.9s linear infinite;\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n}\n\n@keyframes spinner {\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n";
4
+ styleInject(css_248z);
5
+
6
+ export { css_248z as default };
7
+ //# sourceMappingURL=Spinner.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Spinner.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}