@ahrowe/ui 0.8.0 → 0.10.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 (77) hide show
  1. package/dist/esm/common/animatedLogo/animatedLogo.module.mjs.map +1 -1
  2. package/dist/esm/common/animatedText/animatedText.mjs +2 -0
  3. package/dist/esm/common/animatedText/animatedText.mjs.map +1 -0
  4. package/dist/esm/common/animatedText/animatedText.module.mjs +2 -0
  5. package/dist/esm/common/animatedText/animatedText.module.mjs.map +1 -0
  6. package/dist/esm/common/animatedText/animatedText.types.mjs +2 -0
  7. package/dist/esm/common/animatedText/animatedText.types.mjs.map +1 -0
  8. package/dist/esm/common/datePicker/datePicker.mjs +1 -1
  9. package/dist/esm/common/datePicker/datePicker.mjs.map +1 -1
  10. package/dist/esm/common/datePicker/datePicker.module.mjs +1 -1
  11. package/dist/esm/common/datePicker/datePicker.module.mjs.map +1 -1
  12. package/dist/esm/common/dropZone/dropZone.module.mjs.map +1 -1
  13. package/dist/esm/common/floatingMenu/useFloatingPosition.mjs +1 -1
  14. package/dist/esm/common/floatingMenu/useFloatingPosition.mjs.map +1 -1
  15. package/dist/esm/common/popover/popover.mjs +2 -0
  16. package/dist/esm/common/popover/popover.mjs.map +1 -0
  17. package/dist/esm/common/popover/popover.module.mjs +2 -0
  18. package/dist/esm/common/popover/popover.module.mjs.map +1 -0
  19. package/dist/esm/common/popover/popover.types.mjs +2 -0
  20. package/dist/esm/common/popover/popover.types.mjs.map +1 -0
  21. package/dist/esm/common/popover/usePopoverPosition.mjs +2 -0
  22. package/dist/esm/common/popover/usePopoverPosition.mjs.map +1 -0
  23. package/dist/esm/common/radioGroup/radioGroup.mjs +2 -0
  24. package/dist/esm/common/radioGroup/radioGroup.mjs.map +1 -0
  25. package/dist/esm/common/radioGroup/radioGroup.module.mjs +2 -0
  26. package/dist/esm/common/radioGroup/radioGroup.module.mjs.map +1 -0
  27. package/dist/esm/common/radioGroup/radioGroup.types.mjs +2 -0
  28. package/dist/esm/common/radioGroup/radioGroup.types.mjs.map +1 -0
  29. package/dist/esm/common/scrollbarProvider/scrollbarProvider.module.mjs.map +1 -1
  30. package/dist/esm/common/stepper/stepper.mjs +1 -1
  31. package/dist/esm/common/stepper/stepper.mjs.map +1 -1
  32. package/dist/esm/common/stepper/stepper.module.mjs +1 -1
  33. package/dist/esm/common/stepper/stepper.module.mjs.map +1 -1
  34. package/dist/esm/common/stepper/stepper.types.mjs +2 -0
  35. package/dist/esm/common/stepper/stepper.types.mjs.map +1 -0
  36. package/dist/esm/common/sticky/sticky.mjs +1 -1
  37. package/dist/esm/common/sticky/sticky.mjs.map +1 -1
  38. package/dist/esm/common/sticky/stickyStack.mjs +2 -0
  39. package/dist/esm/common/sticky/stickyStack.mjs.map +1 -0
  40. package/dist/esm/common/themeProvider/themeProvider.mjs +1 -1
  41. package/dist/esm/common/themeProvider/themeProvider.mjs.map +1 -1
  42. package/dist/esm/common/utils/scrollAncestors.mjs +2 -0
  43. package/dist/esm/common/utils/scrollAncestors.mjs.map +1 -0
  44. package/dist/esm/favicon.ico +0 -0
  45. package/dist/esm/index.mjs +1 -1
  46. package/dist/esm/logo.svg +4 -0
  47. package/dist/favicon.ico +0 -0
  48. package/dist/index.cjs +4 -4
  49. package/dist/index.cjs.map +1 -1
  50. package/dist/logo.svg +4 -0
  51. package/dist/style.css +1 -1
  52. package/dist/types/package/common/animatedText/animatedText.d.ts +4 -0
  53. package/dist/types/package/common/animatedText/animatedText.types.d.ts +59 -0
  54. package/dist/types/package/common/animatedText/index.d.ts +2 -0
  55. package/dist/types/package/common/configProvider/configProvider.types.d.ts +2 -0
  56. package/dist/types/package/common/popover/index.d.ts +2 -0
  57. package/dist/types/package/common/popover/popover.d.ts +3 -0
  58. package/dist/types/package/common/popover/popover.types.d.ts +58 -0
  59. package/dist/types/package/common/popover/usePopoverPosition.d.ts +23 -0
  60. package/dist/types/package/common/radioGroup/index.d.ts +2 -0
  61. package/dist/types/package/common/radioGroup/radioGroup.d.ts +4 -0
  62. package/dist/types/package/common/radioGroup/radioGroup.types.d.ts +45 -0
  63. package/dist/types/package/common/stepper/index.d.ts +1 -0
  64. package/dist/types/package/common/stepper/stepper.d.ts +1 -1
  65. package/dist/types/package/common/stepper/stepper.types.d.ts +61 -5
  66. package/dist/types/package/common/sticky/stickyStack.d.ts +41 -0
  67. package/dist/types/package/common/themeProvider/theme.types.d.ts +22 -0
  68. package/dist/types/package/common/utils/scrollAncestors.d.ts +2 -0
  69. package/dist/types/package/index.d.ts +6 -0
  70. package/docs/AnimatedText.md +94 -0
  71. package/docs/CLAUDE.md +3 -0
  72. package/docs/ConfigProvider.md +1 -1
  73. package/docs/Popover.md +61 -0
  74. package/docs/RadioGroup.md +76 -0
  75. package/docs/Stepper.md +101 -8
  76. package/docs/Sticky.md +11 -0
  77. package/package.json +2 -1
@@ -1 +1 @@
1
- {"version":3,"file":"stepper.module.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.module.pcss"],"sourcesContent":[".stepper {\n display: flex;\n align-items: center;\n margin-bottom: 30px;\n user-select: none;\n\n &-clickable {\n cursor: pointer;\n }\n\n &-vertical {\n flex-flow: column;\n }\n\n &-connector {\n width: 50px;\n height: 1px;\n background-position: 0% 50%;\n transition: all 0.6s;\n background-size: 200% 200%;\n background-image: repeating-linear-gradient(\n 90deg,\n var(--primary-lighter) 0%,\n var(--primary-lighter) 50%,\n var(--primary-color) 50%,\n var(--primary-color) 100%\n );\n\n &-vertical {\n width: 3px;\n height: 100px;\n background-position: 0% 100%;\n background-image: repeating-linear-gradient(\n 0deg,\n var(--primary-lighter) 0%,\n var(--primary-lighter) 50%,\n var(--primary-color) 50%,\n var(--primary-color) 100%\n );\n }\n\n &-filled {\n background-position: -100% 0%;\n height: 3px;\n }\n }\n\n &-entry {\n width: 40px;\n height: 40px;\n box-sizing: border-box;\n border: 1px solid var(--primary-lighter);\n color: var(--primary-lighter);\n position: relative;\n border-radius: var(--default-border-radius);\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: inset 0px 0px 0px var(--primary-color);\n transform: none;\n transition: all 0.4s;\n\n &-active {\n border: 2px solid var(--primary-color);\n color: var(--primary-color);\n transform: scale3d(1.1, 1.1, 1);\n }\n\n &-done {\n box-shadow: inset 0px 0px 0px 30px var(--primary-color);\n transform: none;\n }\n\n &-number {\n stroke-dasharray: 5;\n stroke-dashoffset: 5;\n\n &-done {\n animation: 0.4s 0.2s forwards showCheckmark;\n }\n }\n\n @keyframes showCheckmark {\n from {\n stroke-dashoffset: 5;\n }\n to {\n stroke-dashoffset: 0;\n }\n }\n\n &-label {\n position: absolute;\n top: 45px;\n left: 0px;\n width: 140px;\n transform: translate(-50px);\n text-align: center;\n\n &-vertical {\n top: 0px;\n left: 100px;\n text-align: left;\n }\n }\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"stepper.module.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.module.pcss"],"sourcesContent":[".stepper {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n public `--stepper-*` variables via ThemeProvider (theme-wide) or `style`\n (per instance) to override; unset ones fall back to the values below. */\n --custom-stepper-marker-size: var(--stepper-marker-size, 40px);\n --custom-stepper-marker-radius: var(--stepper-marker-radius, var(--default-border-radius));\n --custom-stepper-idle-color: var(--stepper-idle-color, var(--primary-lighter));\n --custom-stepper-active-color: var(--stepper-active-color, var(--primary-color));\n --custom-stepper-done-color: var(--stepper-done-color, var(--primary-color));\n --custom-stepper-error-color: var(--stepper-error-color, var(--error-color));\n --custom-stepper-connector-color: var(--stepper-connector-color, var(--primary-color));\n --custom-stepper-connector-thickness: var(--stepper-connector-thickness, 3px);\n --custom-stepper-connector-idle-thickness: var(--stepper-connector-idle-thickness, 1px);\n --custom-stepper-gap: var(--stepper-gap, 12px);\n --custom-stepper-text-on-marker: var(--stepper-text-on-marker, var(--text-on-primary));\n\n user-select: none;\n color: var(--text-color);\n\n &-vertical {\n display: flex;\n flex-flow: column;\n }\n\n &:not(.stepper-vertical) {\n display: flex;\n align-items: center;\n }\n &-label-bottom:not(.stepper-vertical) {\n padding-bottom: 46px;\n }\n &-label-top:not(.stepper-vertical) {\n padding-top: 46px;\n }\n\n /* Entry --------------------------------------------------------------- */\n &-entry {\n display: flex;\n align-items: flex-start;\n gap: var(--custom-stepper-gap);\n box-sizing: border-box;\n }\n &:not(.stepper-vertical) &-entry {\n position: relative;\n flex: 0 0 auto;\n align-items: center;\n gap: 0;\n }\n &-clickable {\n cursor: pointer;\n }\n &-entry-disabled {\n opacity: 0.5;\n }\n\n &-entry-number {\n width: var(--custom-stepper-marker-size);\n height: var(--custom-stepper-marker-size);\n box-sizing: border-box;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--custom-stepper-idle-color);\n color: var(--custom-stepper-idle-color);\n border-radius: var(--custom-stepper-marker-radius);\n font-weight: 600;\n font-size: calc(var(--custom-stepper-marker-size) * 0.4);\n box-shadow: inset 0px 0px 0px var(--custom-stepper-done-color);\n transition: all 0.4s;\n }\n &-entry-active &-entry-number {\n border: 2px solid var(--custom-stepper-active-color);\n color: var(--custom-stepper-active-color);\n transform: scale3d(1.1, 1.1, 1);\n }\n &-entry-done &-entry-number {\n border-color: var(--custom-stepper-done-color);\n color: var(--custom-stepper-text-on-marker);\n box-shadow: inset 0px 0px 0px 30px var(--custom-stepper-done-color);\n transform: none;\n }\n &-entry-error &-entry-number {\n border: 2px solid var(--custom-stepper-error-color);\n color: var(--custom-stepper-error-color);\n box-shadow: inset 0px 0px 0px var(--custom-stepper-error-color);\n transform: none;\n }\n\n &-checkmark path {\n stroke: var(--custom-stepper-text-on-marker);\n stroke-dasharray: 5;\n stroke-dashoffset: 5;\n animation: showCheckmark 0.4s 0.2s forwards;\n }\n\n &-entry-labels {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n }\n &-entry-label {\n color: var(--text-color);\n }\n &-description {\n color: var(--text-dark);\n font-size: var(--text-small-font-size, 0.85em);\n }\n &-optional {\n color: var(--text-light);\n font-size: var(--text-small-font-size, 0.85em);\n font-style: italic;\n }\n\n &:not(.stepper-vertical) &-entry-labels {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: max-content;\n max-width: 160px;\n text-align: center;\n align-items: center;\n }\n &-label-bottom:not(.stepper-vertical) &-entry-labels {\n top: calc(var(--custom-stepper-marker-size) + 6px);\n }\n &-label-top:not(.stepper-vertical) &-entry-labels {\n bottom: calc(var(--custom-stepper-marker-size) + 6px);\n }\n\n &-connector {\n flex: 1 1 auto;\n min-width: 24px;\n height: var(--custom-stepper-connector-idle-thickness);\n border-radius: 999px;\n background-size: 200% 100%;\n background-image: linear-gradient(\n 90deg,\n var(--custom-stepper-connector-color) 0 50%,\n var(--custom-stepper-idle-color) 50% 100%\n );\n background-position: 100% 0;\n transition: background-position 0.6s, height 0.4s, width 0.4s;\n\n &-filled {\n height: var(--custom-stepper-connector-thickness);\n background-position: 0 0;\n }\n }\n\n &-step {\n display: grid;\n grid-template-columns: var(--custom-stepper-marker-size) 1fr;\n column-gap: var(--custom-stepper-gap);\n }\n &-vertical &-entry {\n grid-column: 1 / -1;\n }\n &-vertical &-connector {\n grid-column: 1;\n justify-self: center;\n flex: none;\n width: var(--custom-stepper-connector-idle-thickness);\n min-width: 0;\n height: 100%;\n min-height: 24px;\n background-size: 100% 200%;\n background-image: linear-gradient(\n 180deg,\n var(--custom-stepper-connector-color) 0 50%,\n var(--custom-stepper-idle-color) 50% 100%\n );\n background-position: 0 100%;\n\n &-filled {\n width: var(--custom-stepper-connector-thickness);\n background-position: 0 0;\n }\n }\n &-vertical &-content {\n grid-column: 2;\n }\n\n &-vertical.stepper-label-left &-step {\n grid-template-columns: 1fr var(--custom-stepper-marker-size);\n }\n &-vertical.stepper-label-left &-entry {\n flex-direction: row-reverse;\n }\n &-vertical.stepper-label-left &-connector {\n grid-column: 2;\n }\n &-vertical.stepper-label-left &-content {\n grid-column: 1;\n text-align: right;\n }\n\n &-content {\n overflow: hidden;\n transition: height 0.25s ease;\n }\n &-content-inner {\n padding: 4px 0 12px;\n }\n\n /* Outlined: completed markers stay ringed — a coloured check, no solid fill */\n &-outlined {\n --stepper-text-on-marker: var(--custom-stepper-done-color);\n\n & .stepper-entry-done .stepper-entry-number {\n box-shadow: none;\n color: var(--custom-stepper-done-color);\n }\n }\n &-dots {\n --stepper-marker-size: 16px;\n --stepper-marker-radius: 50%;\n --stepper-gap: 10px;\n\n & .stepper-entry-number {\n font-size: 0;\n border-width: 2px;\n }\n & .stepper-entry-number svg {\n display: none;\n }\n }\n}\n\n@keyframes showCheckmark {\n to {\n stroke-dashoffset: 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .stepper-content {\n transition: none;\n }\n .stepper-entry-number,\n .stepper-connector {\n transition: none;\n }\n .stepper-checkmark path {\n animation: none;\n stroke-dashoffset: 0;\n }\n}\n"],"mappings":""}
@@ -0,0 +1,2 @@
1
+ var e=function(e){return e.Horizontal=`horizontal`,e.Vertical=`vertical`,e}({}),t=function(e){return e.Default=`default`,e.Outlined=`outlined`,e.Dots=`dots`,e}({}),n=function(e){return e.None=`none`,e.ActiveOnly=`activeOnly`,e.Completed=`completed`,e}({}),r=function(e){return e.Top=`top`,e.Bottom=`bottom`,e.Left=`left`,e.Right=`right`,e}({});export{e as StepperAlignment,n as StepperCollapse,r as StepperLabelPlacement,t as StepperStyleType};
2
+ //# sourceMappingURL=stepper.types.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stepper.types.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\n/** Layout direction of the stepper. */\nexport enum StepperAlignment {\n Horizontal = 'horizontal',\n Vertical = 'vertical',\n}\n\n/** Visual preset for the step markers and connectors. */\nexport enum StepperStyleType {\n /** Numbered markers, filled solid on completion (the default look). */\n Default = 'default',\n /** Numbered markers that stay ringed when completed — a coloured check, no solid fill. */\n Outlined = 'outlined',\n /** Minimal dots without numbers — compact onboarding / carousel style. */\n Dots = 'dots',\n}\n\n/**\n * Which step bodies (`step.content`) are expanded. Only affects vertical\n * steppers with per-step `content`; ignored otherwise.\n */\nexport enum StepperCollapse {\n /** Every step body stays expanded. */\n None = 'none',\n /** Only the current step's body is expanded (classic vertical wizard). */\n ActiveOnly = 'activeOnly',\n /** Completed (past) step bodies collapse; current and upcoming stay expanded. */\n Completed = 'completed',\n}\n\n/**\n * Where the label block sits relative to the marker. Horizontal steppers use\n * `Top`/`Bottom`; vertical steppers use `Left`/`Right`. An out-of-orientation\n * value falls back to that orientation's default.\n */\nexport enum StepperLabelPlacement {\n Top = 'top',\n Bottom = 'bottom',\n Left = 'left',\n Right = 'right',\n}\n\nexport type StepperSlots =\n | 'root'\n | 'entry'\n | 'entryNumber'\n | 'entryLabel'\n | 'connector'\n | 'description'\n | 'content'\n | 'optional'\n | 'icon';\n\nexport interface StepperStep {\n /** Primary label for the step. */\n label: React.ReactNode;\n /** Secondary line shown under the label. */\n description?: React.ReactNode;\n /** Collapsible body content, rendered under the label (vertical only). */\n content?: React.ReactNode;\n /** FontAwesome icon shown in the marker instead of the step number. */\n icon?: IconDefinition;\n /** Marks the step as errored — recolours the marker with `--stepper-error-color`. */\n error?: boolean;\n /** `true` renders an \"Optional\" hint; a node renders custom hint text. */\n optional?: boolean | React.ReactNode;\n /** Disables this step — never clickable, dimmed. */\n disabled?: boolean;\n}\n\nexport interface StepperProps extends HtmlProps {\n steps?: StepperStep[];\n currentStep?: number;\n alignment?: StepperAlignment | 'horizontal' | 'vertical';\n onStepClicked?: ((index: number) => void) | null;\n /** Allow clicking any step, not just completed ones. */\n nonLinear?: boolean;\n /** Hide the label text (and description) beneath each step entry. */\n hideLabels?: boolean;\n /** Visual preset for markers and connectors (default `Default`). */\n styleType?: StepperStyleType;\n /** Which step bodies are expanded — vertical `content` only (default `None`). */\n collapse?: StepperCollapse;\n /** Label position relative to the marker (default: horizontal `Bottom`, vertical `Right`). */\n labelPlacement?: StepperLabelPlacement;\n className?: string;\n style?: React.CSSProperties;\n classNames?: SlotClassNames<StepperSlots>;\n styles?: SlotStyles<StepperSlots>;\n}\n"],"mappings":"AAKA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,WAAA,aACA,EAAA,SAAA,YACF,EAAA,CAAA,CAAA,EAGY,EAAL,SAAA,EAAA,OAEL,GAAA,QAAA,UAEA,EAAA,SAAA,WAEA,EAAA,KAAA,QACF,EAAA,CAAA,CAAA,EAMY,EAAL,SAAA,EAAA,OAEL,GAAA,KAAA,OAEA,EAAA,WAAA,aAEA,EAAA,UAAA,aACF,EAAA,CAAA,CAAA,EAOY,EAAL,SAAA,EAAA,OACL,GAAA,IAAA,MACA,EAAA,OAAA,SACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
@@ -1,2 +1,2 @@
1
- import e from"./sticky.module.mjs";import{useCallback as t,useEffect as n,useLayoutEffect as r,useRef as i,useState as a}from"react";import o from"classnames";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l({children:l,offsetTop:u=0,zIndex:d=20,disabled:f=!1,onStuckChange:p,className:m,style:h,classNames:g,styles:_,...v}){let y=i(null),b=i(null),[x,S]=a(!1),[C,w]=a({width:0,left:0,height:0}),T=i(p);n(()=>{T.current=p},[p]);let E=t(()=>{let e=y.current,t=b.current;if(!e||!t)return;let n=e.getBoundingClientRect();w({width:e.clientWidth,left:n.left,height:t.offsetHeight}),S(!f&&n.top<=u)},[f,u]);r(()=>{E()},[E,l]),n(()=>{let e=0,t=()=>{cancelAnimationFrame(e),e=requestAnimationFrame(E)};window.addEventListener(`scroll`,t,{passive:!0,capture:!0}),window.addEventListener(`resize`,t);let n=new ResizeObserver(t);return y.current&&n.observe(y.current),b.current&&n.observe(b.current),()=>{cancelAnimationFrame(e),window.removeEventListener(`scroll`,t,{capture:!0}),window.removeEventListener(`resize`,t),n.disconnect()}},[E]);let D=i(!0);n(()=>{if(D.current){D.current=!1;return}T.current?.(x)},[x]);let O=x?{position:`fixed`,top:u,left:C.left,width:C.width,zIndex:d,..._?.content}:_?.content;return c(`div`,{ref:y,className:o(e.sticky,m,g?.root),style:{..._?.root,...h},...v,children:[x&&s(`div`,{"aria-hidden":!0,className:o(e.stickyPlaceholder,g?.placeholder),style:{height:C.height,..._?.placeholder}}),s(`div`,{ref:b,className:o(e.stickyContent,x&&e.stickyContentStuck,g?.content),style:O,children:l})]})}export{l as default};
1
+ import{stickyStack as e}from"./stickyStack.mjs";import t from"./sticky.module.mjs";import{useCallback as n,useEffect as r,useLayoutEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u({children:u,offsetTop:d=0,zIndex:f=20,disabled:p=!1,onStuckChange:m,className:h,style:g,classNames:_,styles:v,...y}){let b=a(null),x=a(null),S=a(null),[C,w]=o({width:0,left:0,height:0}),[T,E]=o({isStuck:!1,top:d}),D=a(m);r(()=>{D.current=m},[m]);let O=n(()=>{let t=b.current,n=x.current;if(!t||!n)return;let r=t.getBoundingClientRect();w({width:t.clientWidth,left:r.left,height:n.offsetHeight}),e.schedule()},[]);i(()=>{let t=e.register({node:b.current,offsetTop:d,disabled:p,getMetrics:()=>{let e=b.current,t=x.current;if(!e||!t)return null;let n=e.getBoundingClientRect();return{top:n.top,left:n.left,width:e.clientWidth,contentHeight:t.offsetHeight}}},E);return S.current=t,()=>{e.unregister(t),S.current=null}},[]),r(()=>{S.current&&e.updateEntry(S.current,{offsetTop:d,disabled:p}),e.schedule()},[d,p]),i(()=>{O()},[O,u]),r(()=>{let e=new ResizeObserver(O);return b.current&&e.observe(b.current),x.current&&e.observe(x.current),()=>e.disconnect()},[O]);let k=a(!0);r(()=>{if(k.current){k.current=!1;return}D.current?.(T.isStuck)},[T.isStuck]);let A=T.isStuck?{position:`fixed`,top:T.top,left:C.left,width:C.width,zIndex:f,...v?.content}:v?.content;return l(`div`,{ref:b,className:s(t.sticky,h,_?.root),style:{...v?.root,...g},...y,children:[T.isStuck&&c(`div`,{"aria-hidden":!0,className:s(t.stickyPlaceholder,_?.placeholder),style:{height:C.height,...v?.placeholder}}),c(`div`,{ref:x,className:s(t.stickyContent,T.isStuck&&t.stickyContentStuck,_?.content),style:A,children:u})]})}export{u as default};
2
2
  //# sourceMappingURL=sticky.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"sticky.mjs","names":[],"sources":["../../../../package/common/sticky/sticky.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport type { StickyProps } from './sticky.types';\n\nimport styles from './sticky.module.pcss';\n\ninterface Metrics {\n width: number;\n left: number;\n height: number;\n}\n\nexport default function Sticky({\n children,\n offsetTop = 0,\n zIndex = 20,\n disabled = false,\n onStuckChange,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: StickyProps) {\n const rootRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const [isStuck, setIsStuck] = useState(false);\n const [metrics, setMetrics] = useState<Metrics>({ width: 0, left: 0, height: 0 });\n\n const onStuckChangeRef = useRef(onStuckChange);\n useEffect(() => {\n onStuckChangeRef.current = onStuckChange;\n }, [onStuckChange]);\n\n const update = useCallback(() => {\n const root = rootRef.current;\n const content = contentRef.current;\n if (!root || !content) return;\n const rootRect = root.getBoundingClientRect();\n setMetrics({ width: root.clientWidth, left: rootRect.left, height: content.offsetHeight });\n setIsStuck(!disabled && rootRect.top <= offsetTop);\n }, [disabled, offsetTop]);\n\n useLayoutEffect(() => {\n update();\n }, [update, children]);\n\n useEffect(() => {\n let raf = 0;\n const schedule = () => {\n cancelAnimationFrame(raf);\n raf = requestAnimationFrame(update);\n };\n window.addEventListener('scroll', schedule, { passive: true, capture: true });\n window.addEventListener('resize', schedule);\n\n const ro = new ResizeObserver(schedule);\n if (rootRef.current) ro.observe(rootRef.current);\n if (contentRef.current) ro.observe(contentRef.current);\n\n return () => {\n cancelAnimationFrame(raf);\n window.removeEventListener('scroll', schedule, { capture: true } as EventListenerOptions);\n window.removeEventListener('resize', schedule);\n ro.disconnect();\n };\n }, [update]);\n\n const firstRun = useRef(true);\n useEffect(() => {\n if (firstRun.current) {\n firstRun.current = false;\n return;\n }\n onStuckChangeRef.current?.(isStuck);\n }, [isStuck]);\n\n const contentStyle: React.CSSProperties | undefined = isStuck\n ? {\n position: 'fixed',\n top: offsetTop,\n left: metrics.left,\n width: metrics.width,\n zIndex,\n ...slotStyles?.content,\n }\n : slotStyles?.content;\n\n return (\n <div ref={rootRef} className={cx(styles.sticky, className, classNames?.root)} style={{ ...slotStyles?.root, ...style }} {...rest}>\n {isStuck && (\n <div\n aria-hidden\n className={cx(styles.stickyPlaceholder, classNames?.placeholder)}\n style={{ height: metrics.height, ...slotStyles?.placeholder }}\n />\n )}\n <div\n ref={contentRef}\n className={cx(styles.stickyContent, isStuck && styles.stickyContentStuck, classNames?.content)}\n style={contentStyle}\n >\n {children}\n </div>\n </div>\n );\n}\n"],"mappings":"iNAYA,SAAwB,EAAO,CAC7B,WACA,YAAY,EACZ,SAAS,GACT,WAAW,GACX,gBACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACW,CACd,IAAM,EAAU,EAAuB,IAAI,EACrC,EAAa,EAAuB,IAAI,EACxC,CAAC,EAAS,GAAc,EAAS,EAAK,EACtC,CAAC,EAAS,GAAc,EAAkB,CAAE,MAAO,EAAG,KAAM,EAAG,OAAQ,CAAE,CAAC,EAE1E,EAAmB,EAAO,CAAa,EAC7C,MAAgB,CACd,EAAiB,QAAU,CAC7B,EAAG,CAAC,CAAa,CAAC,EAElB,IAAM,EAAS,MAAkB,CAC/B,IAAM,EAAO,EAAQ,QACf,EAAU,EAAW,QAC3B,GAAI,CAAC,GAAQ,CAAC,EAAS,OACvB,IAAM,EAAW,EAAK,sBAAsB,EAC5C,EAAW,CAAE,MAAO,EAAK,YAAa,KAAM,EAAS,KAAM,OAAQ,EAAQ,YAAa,CAAC,EACzF,EAAW,CAAC,GAAY,EAAS,KAAO,CAAS,CACnD,EAAG,CAAC,EAAU,CAAS,CAAC,EAExB,MAAsB,CACpB,EAAO,CACT,EAAG,CAAC,EAAQ,CAAQ,CAAC,EAErB,MAAgB,CACd,IAAI,EAAM,EACJ,MAAiB,CACrB,qBAAqB,CAAG,EACxB,EAAM,sBAAsB,CAAM,CACpC,EACA,OAAO,iBAAiB,SAAU,EAAU,CAAE,QAAS,GAAM,QAAS,EAAK,CAAC,EAC5E,OAAO,iBAAiB,SAAU,CAAQ,EAE1C,IAAM,EAAK,IAAI,eAAe,CAAQ,EAItC,OAHI,EAAQ,SAAS,EAAG,QAAQ,EAAQ,OAAO,EAC3C,EAAW,SAAS,EAAG,QAAQ,EAAW,OAAO,MAExC,CACX,qBAAqB,CAAG,EACxB,OAAO,oBAAoB,SAAU,EAAU,CAAE,QAAS,EAAK,CAAyB,EACxF,OAAO,oBAAoB,SAAU,CAAQ,EAC7C,EAAG,WAAW,CAChB,CACF,EAAG,CAAC,CAAM,CAAC,EAEX,IAAM,EAAW,EAAO,EAAI,EAC5B,MAAgB,CACd,GAAI,EAAS,QAAS,CACpB,EAAS,QAAU,GACnB,MACF,CACA,EAAiB,UAAU,CAAO,CACpC,EAAG,CAAC,CAAO,CAAC,EAEZ,IAAM,EAAgD,EAClD,CACE,SAAU,QACV,IAAK,EACL,KAAM,EAAQ,KACd,MAAO,EAAQ,MACf,SACA,GAAG,GAAY,OACjB,EACA,GAAY,QAEhB,OACE,EAAC,MAAD,CAAK,IAAK,EAAS,UAAW,EAAG,EAAO,OAAQ,EAAW,GAAY,IAAI,EAAG,MAAO,CAAE,GAAG,GAAY,KAAM,GAAG,CAAM,EAAG,GAAI,WAA5H,CACG,GACC,EAAC,MAAD,CACE,cAAA,GACA,UAAW,EAAG,EAAO,kBAAmB,GAAY,WAAW,EAC/D,MAAO,CAAE,OAAQ,EAAQ,OAAQ,GAAG,GAAY,WAAY,CAC7D,CAAA,EAEH,EAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAG,EAAO,cAAe,GAAW,EAAO,mBAAoB,GAAY,OAAO,EAC7F,MAAO,EAEN,UACE,CAAA,CACF,GAET"}
1
+ {"version":3,"file":"sticky.mjs","names":[],"sources":["../../../../package/common/sticky/sticky.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport type { StickyProps } from './sticky.types';\nimport { stickyStack } from './stickyStack';\nimport type { StickyStackResult } from './stickyStack';\n\nimport styles from './sticky.module.pcss';\n\ninterface Metrics {\n width: number;\n left: number;\n height: number;\n}\n\nexport default function Sticky({\n children,\n offsetTop = 0,\n zIndex = 20,\n disabled = false,\n onStuckChange,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: StickyProps) {\n const rootRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const stackIdRef = useRef<symbol | null>(null);\n const [metrics, setMetrics] = useState<Metrics>({ width: 0, left: 0, height: 0 });\n const [stackResult, setStackResult] = useState<StickyStackResult>({ isStuck: false, top: offsetTop });\n\n const onStuckChangeRef = useRef(onStuckChange);\n useEffect(() => {\n onStuckChangeRef.current = onStuckChange;\n }, [onStuckChange]);\n\n // Local geometry (width/left/height) doesn't depend on other Stickies — only the\n // effective `top` and `isStuck` (from the stack coordinator) do.\n const measure = useCallback(() => {\n const root = rootRef.current;\n const content = contentRef.current;\n if (!root || !content) return;\n const rootRect = root.getBoundingClientRect();\n setMetrics({ width: root.clientWidth, left: rootRect.left, height: content.offsetHeight });\n stickyStack.schedule();\n }, []);\n\n useLayoutEffect(() => {\n const id = stickyStack.register(\n {\n node: rootRef.current as HTMLElement,\n offsetTop,\n disabled,\n getMetrics: () => {\n const root = rootRef.current;\n const content = contentRef.current;\n if (!root || !content) return null;\n const rect = root.getBoundingClientRect();\n return { top: rect.top, left: rect.left, width: root.clientWidth, contentHeight: content.offsetHeight };\n },\n },\n setStackResult,\n );\n stackIdRef.current = id;\n return () => {\n stickyStack.unregister(id);\n stackIdRef.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (stackIdRef.current) {\n stickyStack.updateEntry(stackIdRef.current, { offsetTop, disabled });\n }\n stickyStack.schedule();\n }, [offsetTop, disabled]);\n\n useLayoutEffect(() => {\n measure();\n }, [measure, children]);\n\n useEffect(() => {\n const ro = new ResizeObserver(measure);\n if (rootRef.current) ro.observe(rootRef.current);\n if (contentRef.current) ro.observe(contentRef.current);\n return () => ro.disconnect();\n }, [measure]);\n\n const firstRun = useRef(true);\n useEffect(() => {\n if (firstRun.current) {\n firstRun.current = false;\n return;\n }\n onStuckChangeRef.current?.(stackResult.isStuck);\n }, [stackResult.isStuck]);\n\n const contentStyle: React.CSSProperties | undefined = stackResult.isStuck\n ? {\n position: 'fixed',\n top: stackResult.top,\n left: metrics.left,\n width: metrics.width,\n zIndex,\n ...slotStyles?.content,\n }\n : slotStyles?.content;\n\n return (\n <div ref={rootRef} className={cx(styles.sticky, className, classNames?.root)} style={{ ...slotStyles?.root, ...style }} {...rest}>\n {stackResult.isStuck && (\n <div\n aria-hidden\n className={cx(styles.stickyPlaceholder, classNames?.placeholder)}\n style={{ height: metrics.height, ...slotStyles?.placeholder }}\n />\n )}\n <div\n ref={contentRef}\n className={cx(styles.stickyContent, stackResult.isStuck && styles.stickyContentStuck, classNames?.content)}\n style={contentStyle}\n >\n {children}\n </div>\n </div>\n );\n}\n"],"mappings":"iQAcA,SAAwB,EAAO,CAC7B,WACA,YAAY,EACZ,SAAS,GACT,WAAW,GACX,gBACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACW,CACd,IAAM,EAAU,EAAuB,IAAI,EACrC,EAAa,EAAuB,IAAI,EACxC,EAAa,EAAsB,IAAI,EACvC,CAAC,EAAS,GAAc,EAAkB,CAAE,MAAO,EAAG,KAAM,EAAG,OAAQ,CAAE,CAAC,EAC1E,CAAC,EAAa,GAAkB,EAA4B,CAAE,QAAS,GAAO,IAAK,CAAU,CAAC,EAE9F,EAAmB,EAAO,CAAa,EAC7C,MAAgB,CACd,EAAiB,QAAU,CAC7B,EAAG,CAAC,CAAa,CAAC,EAIlB,IAAM,EAAU,MAAkB,CAChC,IAAM,EAAO,EAAQ,QACf,EAAU,EAAW,QAC3B,GAAI,CAAC,GAAQ,CAAC,EAAS,OACvB,IAAM,EAAW,EAAK,sBAAsB,EAC5C,EAAW,CAAE,MAAO,EAAK,YAAa,KAAM,EAAS,KAAM,OAAQ,EAAQ,YAAa,CAAC,EACzF,EAAY,SAAS,CACvB,EAAG,CAAC,CAAC,EAEL,MAAsB,CACpB,IAAM,EAAK,EAAY,SACrB,CACE,KAAM,EAAQ,QACd,YACA,WACA,eAAkB,CAChB,IAAM,EAAO,EAAQ,QACf,EAAU,EAAW,QAC3B,GAAI,CAAC,GAAQ,CAAC,EAAS,OAAO,KAC9B,IAAM,EAAO,EAAK,sBAAsB,EACxC,MAAO,CAAE,IAAK,EAAK,IAAK,KAAM,EAAK,KAAM,MAAO,EAAK,YAAa,cAAe,EAAQ,YAAa,CACxG,CACF,EACA,CACF,EAEA,MADA,GAAW,QAAU,MACR,CACX,EAAY,WAAW,CAAE,EACzB,EAAW,QAAU,IACvB,CAEF,EAAG,CAAC,CAAC,EAEL,MAAgB,CACV,EAAW,SACb,EAAY,YAAY,EAAW,QAAS,CAAE,YAAW,UAAS,CAAC,EAErE,EAAY,SAAS,CACvB,EAAG,CAAC,EAAW,CAAQ,CAAC,EAExB,MAAsB,CACpB,EAAQ,CACV,EAAG,CAAC,EAAS,CAAQ,CAAC,EAEtB,MAAgB,CACd,IAAM,EAAK,IAAI,eAAe,CAAO,EAGrC,OAFI,EAAQ,SAAS,EAAG,QAAQ,EAAQ,OAAO,EAC3C,EAAW,SAAS,EAAG,QAAQ,EAAW,OAAO,MACxC,EAAG,WAAW,CAC7B,EAAG,CAAC,CAAO,CAAC,EAEZ,IAAM,EAAW,EAAO,EAAI,EAC5B,MAAgB,CACd,GAAI,EAAS,QAAS,CACpB,EAAS,QAAU,GACnB,MACF,CACA,EAAiB,UAAU,EAAY,OAAO,CAChD,EAAG,CAAC,EAAY,OAAO,CAAC,EAExB,IAAM,EAAgD,EAAY,QAC9D,CACE,SAAU,QACV,IAAK,EAAY,IACjB,KAAM,EAAQ,KACd,MAAO,EAAQ,MACf,SACA,GAAG,GAAY,OACjB,EACA,GAAY,QAEhB,OACE,EAAC,MAAD,CAAK,IAAK,EAAS,UAAW,EAAG,EAAO,OAAQ,EAAW,GAAY,IAAI,EAAG,MAAO,CAAE,GAAG,GAAY,KAAM,GAAG,CAAM,EAAG,GAAI,WAA5H,CACG,EAAY,SACX,EAAC,MAAD,CACE,cAAA,GACA,UAAW,EAAG,EAAO,kBAAmB,GAAY,WAAW,EAC/D,MAAO,CAAE,OAAQ,EAAQ,OAAQ,GAAG,GAAY,WAAY,CAC7D,CAAA,EAEH,EAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAG,EAAO,cAAe,EAAY,SAAW,EAAO,mBAAoB,GAAY,OAAO,EACzG,MAAO,EAEN,UACE,CAAA,CACF,GAET"}
@@ -0,0 +1,2 @@
1
+ function e(e,t,n,r){return e<r&&n<t}function t(e,t){if(e===t)return 0;let n=e.compareDocumentPosition(t);return n&Node.DOCUMENT_POSITION_FOLLOWING?-1:n&Node.DOCUMENT_POSITION_PRECEDING?1:0}var n=new class{constructor(){this.entries=new Map,this.listeners=new Map,this.results=new Map,this.rafId=0,this.listenerCount=0,this.schedule=()=>{cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.recompute)},this.recompute=()=>{let n=[...this.entries.entries()].sort(([,e],[,n])=>t(e.node,n.node)),r=[];for(let[t,i]of n){let n=i.getMetrics();if(!n)continue;let a=r.filter(t=>e(t.left,t.right,n.left,n.left+n.width)).reduce((e,t)=>Math.max(e,t.bottom),i.offsetTop),o=!i.disabled&&n.top<=a,s={isStuck:o,top:o?a:i.offsetTop};o&&r.push({left:n.left,right:n.left+n.width,bottom:a+n.contentHeight});let c=this.results.get(t);(!c||c.isStuck!==s.isStuck||c.top!==s.top)&&(this.results.set(t,s),this.listeners.get(t)?.(s))}}}register(e,t){let n=Symbol(`sticky`);return this.entries.set(n,e),this.listeners.set(n,t),this.startListening(),n}updateEntry(e,t){let n=this.entries.get(e);n&&Object.assign(n,t)}unregister(e){this.entries.has(e)&&(this.entries.delete(e),this.listeners.delete(e),this.results.delete(e),this.stopListening())}startListening(){this.listenerCount===0&&(window.addEventListener(`scroll`,this.schedule,{passive:!0,capture:!0}),window.addEventListener(`resize`,this.schedule)),this.listenerCount++}stopListening(){this.listenerCount--,this.listenerCount===0&&(window.removeEventListener(`scroll`,this.schedule,{capture:!0}),window.removeEventListener(`resize`,this.schedule))}};export{n as stickyStack};
2
+ //# sourceMappingURL=stickyStack.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stickyStack.mjs","names":[],"sources":["../../../../package/common/sticky/stickyStack.ts"],"sourcesContent":["/**\n * Coordinates every mounted `Sticky` so ones that overlap horizontally stack\n * underneath each other (in DOM order) instead of pinning to the same spot.\n * Non-overlapping ones (e.g. side-by-side halves under a full-width one) land\n * at the same top instead of being pushed down by each other.\n */\n\nexport interface StickyStackMetrics {\n /** Current (unstuck-flow) top of the root element, from getBoundingClientRect. */\n top: number;\n left: number;\n width: number;\n contentHeight: number;\n}\n\nexport interface StickyStackEntry {\n node: HTMLElement;\n offsetTop: number;\n disabled: boolean;\n getMetrics: () => StickyStackMetrics | null;\n}\n\nexport interface StickyStackResult {\n isStuck: boolean;\n /** Effective `top` to pin at while stuck — offsetTop plus the height of any stuck, overlapping entries above it. */\n top: number;\n}\n\ntype ResultListener = (result: StickyStackResult) => void;\n\nfunction rangesOverlap(aLeft: number, aRight: number, bLeft: number, bRight: number): boolean {\n return aLeft < bRight && bLeft < aRight;\n}\n\nfunction compareDomOrder(a: HTMLElement, b: HTMLElement): number {\n if (a === b) return 0;\n const position = a.compareDocumentPosition(b);\n if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n return 0;\n}\n\nclass StickyStack {\n private entries = new Map<symbol, StickyStackEntry>();\n private listeners = new Map<symbol, ResultListener>();\n private results = new Map<symbol, StickyStackResult>();\n private rafId = 0;\n private listenerCount = 0;\n\n schedule = (): void => {\n cancelAnimationFrame(this.rafId);\n this.rafId = requestAnimationFrame(this.recompute);\n };\n\n register(entry: StickyStackEntry, onChange: ResultListener): symbol {\n const id = Symbol('sticky');\n this.entries.set(id, entry);\n this.listeners.set(id, onChange);\n this.startListening();\n return id;\n }\n\n updateEntry(id: symbol, patch: Partial<Pick<StickyStackEntry, 'offsetTop' | 'disabled'>>): void {\n const entry = this.entries.get(id);\n if (entry) Object.assign(entry, patch);\n }\n\n unregister(id: symbol): void {\n if (!this.entries.has(id)) return;\n this.entries.delete(id);\n this.listeners.delete(id);\n this.results.delete(id);\n this.stopListening();\n }\n\n recompute = (): void => {\n const ordered = [...this.entries.entries()].sort(([, a], [, b]) => compareDomOrder(a.node, b.node));\n const placed: { left: number; right: number; bottom: number }[] = [];\n\n for (const [id, entry] of ordered) {\n const metrics = entry.getMetrics();\n if (!metrics) continue;\n\n const overlapping = placed.filter((p) => rangesOverlap(p.left, p.right, metrics.left, metrics.left + metrics.width));\n const baseTop = overlapping.reduce((max, p) => Math.max(max, p.bottom), entry.offsetTop);\n const isStuck = !entry.disabled && metrics.top <= baseTop;\n const result: StickyStackResult = { isStuck, top: isStuck ? baseTop : entry.offsetTop };\n\n if (isStuck) {\n placed.push({ left: metrics.left, right: metrics.left + metrics.width, bottom: baseTop + metrics.contentHeight });\n }\n\n const prev = this.results.get(id);\n if (!prev || prev.isStuck !== result.isStuck || prev.top !== result.top) {\n this.results.set(id, result);\n this.listeners.get(id)?.(result);\n }\n }\n };\n\n private startListening(): void {\n if (this.listenerCount === 0) {\n window.addEventListener('scroll', this.schedule, { passive: true, capture: true });\n window.addEventListener('resize', this.schedule);\n }\n this.listenerCount++;\n }\n\n private stopListening(): void {\n this.listenerCount--;\n if (this.listenerCount === 0) {\n window.removeEventListener('scroll', this.schedule, { capture: true } as EventListenerOptions);\n window.removeEventListener('resize', this.schedule);\n }\n }\n}\n\nexport const stickyStack = new StickyStack();\n"],"mappings":"AA8BA,SAAS,EAAc,EAAe,EAAgB,EAAe,EAAyB,CAC5F,OAAO,EAAQ,GAAU,EAAQ,CACnC,CAEA,SAAS,EAAgB,EAAgB,EAAwB,CAC/D,GAAI,IAAM,EAAG,MAAO,GACpB,IAAM,EAAW,EAAE,wBAAwB,CAAC,EAG5C,OAFI,EAAW,KAAK,4BAAoC,GACpD,EAAW,KAAK,4BAAoC,EACjD,CACT,CA6EA,IAAa,EAAc,IAAI,KA3Eb,4BACE,IAAI,mBACF,IAAI,iBACN,IAAI,eACN,qBACQ,oBAED,CACrB,qBAAqB,KAAK,KAAK,EAC/B,KAAK,MAAQ,sBAAsB,KAAK,SAAS,CACnD,qBAuBwB,CACtB,IAAM,EAAU,CAAC,GAAG,KAAK,QAAQ,QAAQ,CAAC,EAAE,MAAM,EAAG,GAAI,EAAG,KAAO,EAAgB,EAAE,KAAM,EAAE,IAAI,CAAC,EAC5F,EAA4D,CAAC,EAEnE,IAAK,GAAM,CAAC,EAAI,KAAU,EAAS,CACjC,IAAM,EAAU,EAAM,WAAW,EACjC,GAAI,CAAC,EAAS,SAGd,IAAM,EADc,EAAO,OAAQ,GAAM,EAAc,EAAE,KAAM,EAAE,MAAO,EAAQ,KAAM,EAAQ,KAAO,EAAQ,KAAK,CAClG,EAAY,QAAQ,EAAK,IAAM,KAAK,IAAI,EAAK,EAAE,MAAM,EAAG,EAAM,SAAS,EACjF,EAAU,CAAC,EAAM,UAAY,EAAQ,KAAO,EAC5C,EAA4B,CAAE,UAAS,IAAK,EAAU,EAAU,EAAM,SAAU,EAElF,GACF,EAAO,KAAK,CAAE,KAAM,EAAQ,KAAM,MAAO,EAAQ,KAAO,EAAQ,MAAO,OAAQ,EAAU,EAAQ,aAAc,CAAC,EAGlH,IAAM,EAAO,KAAK,QAAQ,IAAI,CAAE,GAC5B,CAAC,GAAQ,EAAK,UAAY,EAAO,SAAW,EAAK,MAAQ,EAAO,OAClE,KAAK,QAAQ,IAAI,EAAI,CAAM,EAC3B,KAAK,UAAU,IAAI,CAAE,IAAI,CAAM,EAEnC,CACF,EA5CA,SAAS,EAAyB,EAAkC,CAClE,IAAM,EAAK,OAAO,QAAQ,EAI1B,OAHA,KAAK,QAAQ,IAAI,EAAI,CAAK,EAC1B,KAAK,UAAU,IAAI,EAAI,CAAQ,EAC/B,KAAK,eAAe,EACb,CACT,CAEA,YAAY,EAAY,EAAwE,CAC9F,IAAM,EAAQ,KAAK,QAAQ,IAAI,CAAE,EAC7B,GAAO,OAAO,OAAO,EAAO,CAAK,CACvC,CAEA,WAAW,EAAkB,CACtB,KAAK,QAAQ,IAAI,CAAE,IACxB,KAAK,QAAQ,OAAO,CAAE,EACtB,KAAK,UAAU,OAAO,CAAE,EACxB,KAAK,QAAQ,OAAO,CAAE,EACtB,KAAK,cAAc,EACrB,CA2BA,gBAA+B,CACzB,KAAK,gBAAkB,IACzB,OAAO,iBAAiB,SAAU,KAAK,SAAU,CAAE,QAAS,GAAM,QAAS,EAAK,CAAC,EACjF,OAAO,iBAAiB,SAAU,KAAK,QAAQ,GAEjD,KAAK,eACP,CAEA,eAA8B,CAC5B,KAAK,gBACD,KAAK,gBAAkB,IACzB,OAAO,oBAAoB,SAAU,KAAK,SAAU,CAAE,QAAS,EAAK,CAAyB,EAC7F,OAAO,oBAAoB,SAAU,KAAK,QAAQ,EAEtD,CACF"}
@@ -1,2 +1,2 @@
1
- import{defaultTheme as e}from"./defaultTheme.mjs";import t from"./theme.module.mjs";import n,{Component as r}from"react";import i from"classnames";import{jsx as a}from"react/jsx-runtime";var o=class extends r{constructor(...t){super(...t),this.state={resolvedVariables:{},colorFadeActive:!1,currentThemeColor:null},this.colorFadeTimeout=null,this.wrapperRef=n.createRef(),this.themeColorMeta=null,this.createdThemeColorMeta=!1,this.applyTheme=t=>{let n=this.props.themes??[e],r=n.find(e=>!e.baseThemeId)??n[0],i=r?r.variables:{},a=n.find(e=>e.id===t),o=a?this.resolveChain(a.id):[],s=Object.assign({},i,...o);this.setState({resolvedVariables:s,colorFadeActive:!0}),this.colorFadeTimeout&&clearTimeout(this.colorFadeTimeout),this.colorFadeTimeout=setTimeout(()=>{this.setState({colorFadeActive:!1}),this.colorFadeTimeout=null},500),setTimeout(()=>{this.wrapperRef.current&&this.setState({currentThemeColor:getComputedStyle(this.wrapperRef.current).getPropertyValue(`--primary-color`).trim()})},1)}}componentDidMount(){this.applyTheme(this.props.currentThemeId),this.syncThemeColorMeta(this.state.currentThemeColor??``)}componentDidUpdate(e,t){t.currentThemeColor!==this.state.currentThemeColor&&this.syncThemeColorMeta(this.state.currentThemeColor??``),(e.currentThemeId!==this.props.currentThemeId||e.themes!==this.props.themes)&&this.applyTheme(this.props.currentThemeId)}componentWillUnmount(){this.colorFadeTimeout&&clearTimeout(this.colorFadeTimeout),this.createdThemeColorMeta&&this.themeColorMeta?.remove()}syncThemeColorMeta(e){if(!(typeof document>`u`)){if(!this.themeColorMeta){let e=document.head.querySelector(`meta[name="theme-color"]`);if(e)this.themeColorMeta=e;else{let e=document.createElement(`meta`);e.setAttribute(`name`,`theme-color`),document.head.appendChild(e),this.themeColorMeta=e,this.createdThemeColorMeta=!0}}this.themeColorMeta.setAttribute(`content`,e)}}resolveChain(t){let n=(this.props.themes??[e]).find(e=>e.id===t);return n?[...n.baseThemeId?this.resolveChain(n.baseThemeId):[],n.variables]:[]}render(){let{children:e}=this.props,{resolvedVariables:n,colorFadeActive:r}=this.state;return a(`div`,{ref:this.wrapperRef,id:`themeProvider`,className:i(t.themeRoot,r&&t.colorFade),style:n,children:e})}};export{o as default};
1
+ import{defaultTheme as e}from"./defaultTheme.mjs";import t from"./theme.module.mjs";import n,{Component as r}from"react";import i from"classnames";import{jsx as a}from"react/jsx-runtime";var o=class extends r{constructor(...t){super(...t),this.state={resolvedVariables:{},colorFadeActive:!1,currentThemeColor:null},this.colorFadeTimeout=null,this.wrapperRef=n.createRef(),this.themeColorMeta=null,this.createdThemeColorMeta=!1,this.applyTheme=t=>{let n=this.props.themes??[e],r=n.find(e=>!e.baseThemeId)??n[0],i=r?r.variables:{},a=n.find(e=>e.id===t),o=a?this.resolveChain(a.id):[],s=Object.assign({},i,...o);this.setState({resolvedVariables:s,colorFadeActive:!0}),this.colorFadeTimeout&&clearTimeout(this.colorFadeTimeout),this.colorFadeTimeout=setTimeout(()=>{this.setState({colorFadeActive:!1}),this.colorFadeTimeout=null},500),setTimeout(()=>{this.wrapperRef.current&&this.setState({currentThemeColor:getComputedStyle(this.wrapperRef.current).getPropertyValue(`--primary-color`).trim()})},1)}}componentDidMount(){this.applyTheme(this.props.currentThemeId),this.syncThemeColorMeta(this.state.currentThemeColor??``)}componentDidUpdate(e,t){t.currentThemeColor!==this.state.currentThemeColor&&this.syncThemeColorMeta(this.state.currentThemeColor??``),(e.currentThemeId!==this.props.currentThemeId||e.themes!==this.props.themes)&&this.applyTheme(this.props.currentThemeId)}componentWillUnmount(){this.colorFadeTimeout&&clearTimeout(this.colorFadeTimeout),this.createdThemeColorMeta&&=(this.themeColorMeta?.remove(),this.themeColorMeta=null,!1)}syncThemeColorMeta(e){if(!(typeof document>`u`)){if(!this.themeColorMeta){let e=document.head.querySelector(`meta[name="theme-color"]`);if(e)this.themeColorMeta=e;else{let e=document.createElement(`meta`);e.setAttribute(`name`,`theme-color`),document.head.appendChild(e),this.themeColorMeta=e,this.createdThemeColorMeta=!0}}this.themeColorMeta.setAttribute(`content`,e)}}resolveChain(t){let n=(this.props.themes??[e]).find(e=>e.id===t);return n?[...n.baseThemeId?this.resolveChain(n.baseThemeId):[],n.variables]:[]}render(){let{children:e}=this.props,{resolvedVariables:n,colorFadeActive:r}=this.state;return a(`div`,{ref:this.wrapperRef,id:`themeProvider`,className:i(t.themeRoot,r&&t.colorFade),style:n,children:e})}};export{o as default};
2
2
  //# sourceMappingURL=themeProvider.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"themeProvider.mjs","names":[],"sources":["../../../../package/common/themeProvider/themeProvider.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport cx from 'classnames';\n\nimport type { Theme } from './theme.types';\nimport { defaultTheme } from './defaultTheme';\nimport styles from './theme.module.pcss';\n\ninterface Props {\n children: React.ReactNode;\n themes?: Theme[];\n currentThemeId?: string;\n}\n\ninterface State {\n resolvedVariables: Record<string, string>;\n colorFadeActive: boolean;\n currentThemeColor: string | null;\n}\n\nclass ThemeProvider extends Component<Props, State> {\n state: State = {\n resolvedVariables: {},\n colorFadeActive: false,\n currentThemeColor: null,\n };\n\n private colorFadeTimeout: ReturnType<typeof setTimeout> | null = null;\n private wrapperRef = React.createRef<HTMLDivElement>();\n private themeColorMeta: HTMLMetaElement | null = null;\n private createdThemeColorMeta = false;\n\n componentDidMount() {\n this.applyTheme(this.props.currentThemeId);\n this.syncThemeColorMeta(this.state.currentThemeColor ?? '');\n }\n\n componentDidUpdate(prevProps: Props, prevState: State) {\n if (prevState.currentThemeColor !== this.state.currentThemeColor) {\n this.syncThemeColorMeta(this.state.currentThemeColor ?? '');\n }\n if (\n prevProps.currentThemeId !== this.props.currentThemeId ||\n prevProps.themes !== this.props.themes\n ) {\n this.applyTheme(this.props.currentThemeId);\n }\n }\n\n componentWillUnmount() {\n if (this.colorFadeTimeout) clearTimeout(this.colorFadeTimeout);\n // Only remove the meta tag if we created it; leave a host-app tag intact.\n if (this.createdThemeColorMeta) this.themeColorMeta?.remove();\n }\n\n /**\n * Replaces the former react-helmet usage: keep a single\n * <meta name=\"theme-color\"> in sync with the active theme's primary colour.\n * Reuses a tag the host app already declares; otherwise creates its own\n * (and removes it again on unmount).\n */\n private syncThemeColorMeta(color: string) {\n if (typeof document === 'undefined') return;\n\n if (!this.themeColorMeta) {\n const existing = document.head.querySelector<HTMLMetaElement>(\n 'meta[name=\"theme-color\"]',\n );\n if (existing) {\n this.themeColorMeta = existing;\n } else {\n const meta = document.createElement('meta');\n meta.setAttribute('name', 'theme-color');\n document.head.appendChild(meta);\n this.themeColorMeta = meta;\n this.createdThemeColorMeta = true;\n }\n }\n\n this.themeColorMeta.setAttribute('content', color);\n }\n\n /**\n * Resolves the full variable set for a given theme ID by walking up the\n * baseThemeId chain. Returns variables ordered from deepest ancestor to\n * the requested theme so callers can merge in order (later entries win).\n */\n private resolveChain(id: string): Record<string, string>[] {\n const themes = this.props.themes ?? [defaultTheme];\n const theme = themes.find((t) => t.id === id);\n if (!theme) return [];\n\n const parentVars = theme.baseThemeId ? this.resolveChain(theme.baseThemeId) : [];\n\n return [...parentVars, theme.variables as Record<string, string>];\n }\n\n private applyTheme = (currentThemeId: string | undefined) => {\n const themes = this.props.themes ?? [defaultTheme];\n\n // The root theme is the first theme without a baseThemeId.\n // It is always applied as the variable foundation.\n const rootTheme = themes.find((t) => !t.baseThemeId) ?? themes[0];\n const rootVars: Record<string, string> = rootTheme\n ? (rootTheme.variables as Record<string, string>)\n : {};\n\n // Resolve the selected theme's full inheritance chain.\n const selectedTheme = themes.find((t) => t.id === currentThemeId);\n const chainVars = selectedTheme ? this.resolveChain(selectedTheme.id) : [];\n\n // Merge: root foundation → ancestor chain → selected theme (each step overrides)\n const resolvedVariables = Object.assign({}, rootVars, ...chainVars);\n\n this.setState({ resolvedVariables, colorFadeActive: true });\n\n if (this.colorFadeTimeout) clearTimeout(this.colorFadeTimeout);\n this.colorFadeTimeout = setTimeout(() => {\n this.setState({ colorFadeActive: false });\n this.colorFadeTimeout = null;\n }, 500);\n\n // Read --primary-color after the new style is painted for the theme-color meta tag.\n setTimeout(() => {\n if (this.wrapperRef.current) {\n this.setState({\n currentThemeColor: getComputedStyle(this.wrapperRef.current)\n .getPropertyValue('--primary-color')\n .trim(),\n });\n }\n }, 1);\n };\n\n render() {\n const { children } = this.props;\n const { resolvedVariables, colorFadeActive } = this.state;\n\n return (\n <div\n ref={this.wrapperRef}\n id=\"themeProvider\"\n className={cx(styles.themeRoot, colorFadeActive && styles.colorFade)}\n style={resolvedVariables as React.CSSProperties}\n >\n {children}\n </div>\n );\n }\n}\n\nexport default ThemeProvider;\n"],"mappings":"2LAmBA,IAAM,EAAN,cAA4B,CAAwB,0CACnC,CACb,kBAAmB,CAAC,EACpB,gBAAiB,GACjB,kBAAmB,IACrB,wBAEiE,qBAC5C,EAAM,UAA0B,sBACJ,gCACjB,mBAmEV,GAAuC,CAC3D,IAAM,EAAS,KAAK,MAAM,QAAU,CAAC,CAAY,EAI3C,EAAY,EAAO,KAAM,GAAM,CAAC,EAAE,WAAW,GAAK,EAAO,GACzD,EAAmC,EACpC,EAAU,UACX,CAAC,EAGC,EAAgB,EAAO,KAAM,GAAM,EAAE,KAAO,CAAc,EAC1D,EAAY,EAAgB,KAAK,aAAa,EAAc,EAAE,EAAI,CAAC,EAGnE,EAAoB,OAAO,OAAO,CAAC,EAAG,EAAU,GAAG,CAAS,EAElE,KAAK,SAAS,CAAE,oBAAmB,gBAAiB,EAAK,CAAC,EAEtD,KAAK,kBAAkB,aAAa,KAAK,gBAAgB,EAC7D,KAAK,iBAAmB,eAAiB,CACvC,KAAK,SAAS,CAAE,gBAAiB,EAAM,CAAC,EACxC,KAAK,iBAAmB,IAC1B,EAAG,GAAG,EAGN,eAAiB,CACX,KAAK,WAAW,SAClB,KAAK,SAAS,CACZ,kBAAmB,iBAAiB,KAAK,WAAW,OAAO,EACxD,iBAAiB,iBAAiB,EAClC,KAAK,CACV,CAAC,CAEL,EAAG,CAAC,CACN,EApGA,mBAAoB,CAClB,KAAK,WAAW,KAAK,MAAM,cAAc,EACzC,KAAK,mBAAmB,KAAK,MAAM,mBAAqB,EAAE,CAC5D,CAEA,mBAAmB,EAAkB,EAAkB,CACjD,EAAU,oBAAsB,KAAK,MAAM,mBAC7C,KAAK,mBAAmB,KAAK,MAAM,mBAAqB,EAAE,GAG1D,EAAU,iBAAmB,KAAK,MAAM,gBACxC,EAAU,SAAW,KAAK,MAAM,SAEhC,KAAK,WAAW,KAAK,MAAM,cAAc,CAE7C,CAEA,sBAAuB,CACjB,KAAK,kBAAkB,aAAa,KAAK,gBAAgB,EAEzD,KAAK,uBAAuB,KAAK,gBAAgB,OAAO,CAC9D,CAQA,mBAA2B,EAAe,CACpC,YAAO,SAAa,KAExB,IAAI,CAAC,KAAK,eAAgB,CACxB,IAAM,EAAW,SAAS,KAAK,cAC7B,0BACF,EACA,GAAI,EACF,KAAK,eAAiB,MACjB,CACL,IAAM,EAAO,SAAS,cAAc,MAAM,EAC1C,EAAK,aAAa,OAAQ,aAAa,EACvC,SAAS,KAAK,YAAY,CAAI,EAC9B,KAAK,eAAiB,EACtB,KAAK,sBAAwB,EAC/B,CACF,CAEA,KAAK,eAAe,aAAa,UAAW,CAAK,CAFjD,CAGF,CAOA,aAAqB,EAAsC,CAEzD,IAAM,GADS,KAAK,MAAM,QAAU,CAAC,CAAY,GAC5B,KAAM,GAAM,EAAE,KAAO,CAAE,EAK5C,OAJK,EAIE,CAAC,GAFW,EAAM,YAAc,KAAK,aAAa,EAAM,WAAW,EAAI,CAAC,EAExD,EAAM,SAAmC,EAJ7C,CAAC,CAKtB,CAuCA,QAAS,CACP,GAAM,CAAE,YAAa,KAAK,MACpB,CAAE,oBAAmB,mBAAoB,KAAK,MAEpD,OACE,EAAC,MAAD,CACE,IAAK,KAAK,WACV,GAAG,gBACH,UAAW,EAAG,EAAO,UAAW,GAAmB,EAAO,SAAS,EACnE,MAAO,EAEN,UACE,CAAA,CAET,CACF"}
1
+ {"version":3,"file":"themeProvider.mjs","names":[],"sources":["../../../../package/common/themeProvider/themeProvider.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport cx from 'classnames';\n\nimport type { Theme } from './theme.types';\nimport { defaultTheme } from './defaultTheme';\nimport styles from './theme.module.pcss';\n\ninterface Props {\n children: React.ReactNode;\n themes?: Theme[];\n currentThemeId?: string;\n}\n\ninterface State {\n resolvedVariables: Record<string, string>;\n colorFadeActive: boolean;\n currentThemeColor: string | null;\n}\n\nclass ThemeProvider extends Component<Props, State> {\n state: State = {\n resolvedVariables: {},\n colorFadeActive: false,\n currentThemeColor: null,\n };\n\n private colorFadeTimeout: ReturnType<typeof setTimeout> | null = null;\n private wrapperRef = React.createRef<HTMLDivElement>();\n private themeColorMeta: HTMLMetaElement | null = null;\n private createdThemeColorMeta = false;\n\n componentDidMount() {\n this.applyTheme(this.props.currentThemeId);\n this.syncThemeColorMeta(this.state.currentThemeColor ?? '');\n }\n\n componentDidUpdate(prevProps: Props, prevState: State) {\n if (prevState.currentThemeColor !== this.state.currentThemeColor) {\n this.syncThemeColorMeta(this.state.currentThemeColor ?? '');\n }\n if (\n prevProps.currentThemeId !== this.props.currentThemeId ||\n prevProps.themes !== this.props.themes\n ) {\n this.applyTheme(this.props.currentThemeId);\n }\n }\n\n componentWillUnmount() {\n if (this.colorFadeTimeout) clearTimeout(this.colorFadeTimeout);\n // Only remove the meta tag if we created it; leave a host-app tag intact.\n // Also clear the cached refs — StrictMode's dev-only mount/unmount/remount\n // cycle reuses this instance, and a stale ref would otherwise point at a\n // detached element on remount instead of re-inserting into <head>.\n if (this.createdThemeColorMeta) {\n this.themeColorMeta?.remove();\n this.themeColorMeta = null;\n this.createdThemeColorMeta = false;\n }\n }\n\n /**\n * Replaces the former react-helmet usage: keep a single\n * <meta name=\"theme-color\"> in sync with the active theme's primary colour.\n * Reuses a tag the host app already declares; otherwise creates its own\n * (and removes it again on unmount).\n */\n private syncThemeColorMeta(color: string) {\n if (typeof document === 'undefined') return;\n\n if (!this.themeColorMeta) {\n const existing = document.head.querySelector<HTMLMetaElement>(\n 'meta[name=\"theme-color\"]',\n );\n if (existing) {\n this.themeColorMeta = existing;\n } else {\n const meta = document.createElement('meta');\n meta.setAttribute('name', 'theme-color');\n document.head.appendChild(meta);\n this.themeColorMeta = meta;\n this.createdThemeColorMeta = true;\n }\n }\n\n this.themeColorMeta.setAttribute('content', color);\n }\n\n /**\n * Resolves the full variable set for a given theme ID by walking up the\n * baseThemeId chain. Returns variables ordered from deepest ancestor to\n * the requested theme so callers can merge in order (later entries win).\n */\n private resolveChain(id: string): Record<string, string>[] {\n const themes = this.props.themes ?? [defaultTheme];\n const theme = themes.find((t) => t.id === id);\n if (!theme) return [];\n\n const parentVars = theme.baseThemeId ? this.resolveChain(theme.baseThemeId) : [];\n\n return [...parentVars, theme.variables as Record<string, string>];\n }\n\n private applyTheme = (currentThemeId: string | undefined) => {\n const themes = this.props.themes ?? [defaultTheme];\n\n // The root theme is the first theme without a baseThemeId.\n // It is always applied as the variable foundation.\n const rootTheme = themes.find((t) => !t.baseThemeId) ?? themes[0];\n const rootVars: Record<string, string> = rootTheme\n ? (rootTheme.variables as Record<string, string>)\n : {};\n\n // Resolve the selected theme's full inheritance chain.\n const selectedTheme = themes.find((t) => t.id === currentThemeId);\n const chainVars = selectedTheme ? this.resolveChain(selectedTheme.id) : [];\n\n // Merge: root foundation → ancestor chain → selected theme (each step overrides)\n const resolvedVariables = Object.assign({}, rootVars, ...chainVars);\n\n this.setState({ resolvedVariables, colorFadeActive: true });\n\n if (this.colorFadeTimeout) clearTimeout(this.colorFadeTimeout);\n this.colorFadeTimeout = setTimeout(() => {\n this.setState({ colorFadeActive: false });\n this.colorFadeTimeout = null;\n }, 500);\n\n // Read --primary-color after the new style is painted for the theme-color meta tag.\n setTimeout(() => {\n if (this.wrapperRef.current) {\n this.setState({\n currentThemeColor: getComputedStyle(this.wrapperRef.current)\n .getPropertyValue('--primary-color')\n .trim(),\n });\n }\n }, 1);\n };\n\n render() {\n const { children } = this.props;\n const { resolvedVariables, colorFadeActive } = this.state;\n\n return (\n <div\n ref={this.wrapperRef}\n id=\"themeProvider\"\n className={cx(styles.themeRoot, colorFadeActive && styles.colorFade)}\n style={resolvedVariables as React.CSSProperties}\n >\n {children}\n </div>\n );\n }\n}\n\nexport default ThemeProvider;\n"],"mappings":"2LAmBA,IAAM,EAAN,cAA4B,CAAwB,0CACnC,CACb,kBAAmB,CAAC,EACpB,gBAAiB,GACjB,kBAAmB,IACrB,wBAEiE,qBAC5C,EAAM,UAA0B,sBACJ,gCACjB,mBA0EV,GAAuC,CAC3D,IAAM,EAAS,KAAK,MAAM,QAAU,CAAC,CAAY,EAI3C,EAAY,EAAO,KAAM,GAAM,CAAC,EAAE,WAAW,GAAK,EAAO,GACzD,EAAmC,EACpC,EAAU,UACX,CAAC,EAGC,EAAgB,EAAO,KAAM,GAAM,EAAE,KAAO,CAAc,EAC1D,EAAY,EAAgB,KAAK,aAAa,EAAc,EAAE,EAAI,CAAC,EAGnE,EAAoB,OAAO,OAAO,CAAC,EAAG,EAAU,GAAG,CAAS,EAElE,KAAK,SAAS,CAAE,oBAAmB,gBAAiB,EAAK,CAAC,EAEtD,KAAK,kBAAkB,aAAa,KAAK,gBAAgB,EAC7D,KAAK,iBAAmB,eAAiB,CACvC,KAAK,SAAS,CAAE,gBAAiB,EAAM,CAAC,EACxC,KAAK,iBAAmB,IAC1B,EAAG,GAAG,EAGN,eAAiB,CACX,KAAK,WAAW,SAClB,KAAK,SAAS,CACZ,kBAAmB,iBAAiB,KAAK,WAAW,OAAO,EACxD,iBAAiB,iBAAiB,EAClC,KAAK,CACV,CAAC,CAEL,EAAG,CAAC,CACN,EA3GA,mBAAoB,CAClB,KAAK,WAAW,KAAK,MAAM,cAAc,EACzC,KAAK,mBAAmB,KAAK,MAAM,mBAAqB,EAAE,CAC5D,CAEA,mBAAmB,EAAkB,EAAkB,CACjD,EAAU,oBAAsB,KAAK,MAAM,mBAC7C,KAAK,mBAAmB,KAAK,MAAM,mBAAqB,EAAE,GAG1D,EAAU,iBAAmB,KAAK,MAAM,gBACxC,EAAU,SAAW,KAAK,MAAM,SAEhC,KAAK,WAAW,KAAK,MAAM,cAAc,CAE7C,CAEA,sBAAuB,CACjB,KAAK,kBAAkB,aAAa,KAAK,gBAAgB,EAK7D,AAGE,KAAK,yBAFL,KAAK,gBAAgB,OAAO,EAC5B,KAAK,eAAiB,KACO,GAEjC,CAQA,mBAA2B,EAAe,CACpC,YAAO,SAAa,KAExB,IAAI,CAAC,KAAK,eAAgB,CACxB,IAAM,EAAW,SAAS,KAAK,cAC7B,0BACF,EACA,GAAI,EACF,KAAK,eAAiB,MACjB,CACL,IAAM,EAAO,SAAS,cAAc,MAAM,EAC1C,EAAK,aAAa,OAAQ,aAAa,EACvC,SAAS,KAAK,YAAY,CAAI,EAC9B,KAAK,eAAiB,EACtB,KAAK,sBAAwB,EAC/B,CACF,CAEA,KAAK,eAAe,aAAa,UAAW,CAAK,CAFjD,CAGF,CAOA,aAAqB,EAAsC,CAEzD,IAAM,GADS,KAAK,MAAM,QAAU,CAAC,CAAY,GAC5B,KAAM,GAAM,EAAE,KAAO,CAAE,EAK5C,OAJK,EAIE,CAAC,GAFW,EAAM,YAAc,KAAK,aAAa,EAAM,WAAW,EAAI,CAAC,EAExD,EAAM,SAAmC,EAJ7C,CAAC,CAKtB,CAuCA,QAAS,CACP,GAAM,CAAE,YAAa,KAAK,MACpB,CAAE,oBAAmB,mBAAoB,KAAK,MAEpD,OACE,EAAC,MAAD,CACE,IAAK,KAAK,WACV,GAAG,gBACH,UAAW,EAAG,EAAO,UAAW,GAAmB,EAAO,SAAS,EACnE,MAAO,EAEN,UACE,CAAA,CAET,CACF"}
@@ -0,0 +1,2 @@
1
+ function e(e){let t=[],n=e.parentElement;for(;n&&n!==document.body&&n!==document.documentElement;){let e=getComputedStyle(n);(e.overflowX!==`visible`||e.overflowY!==`visible`)&&t.push(n),n=n.parentElement}return t}function t(e,t){return t.some(t=>{let n=t.getBoundingClientRect();return e.bottom<=n.top||e.top>=n.bottom||e.right<=n.left||e.left>=n.right})}export{e as getScrollableAncestors,t as isHiddenByAnyAncestor};
2
+ //# sourceMappingURL=scrollAncestors.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scrollAncestors.mjs","names":[],"sources":["../../../../package/common/utils/scrollAncestors.ts"],"sourcesContent":["// Scrollable ancestors up to (not including) <body>. This is computed once per open rather\n// than on every scroll tick, since walking the tree and reading computed style forces layout,\n// which is too expensive to repeat at scroll frequency (Floating UI's autoUpdate does the same\n// thing, resolving the ancestor list once via getOverflowAncestors). Plain page/viewport scroll\n// is deliberately left out: a trigger that scrolls off the top of the page already renders its\n// fixed-position anchor off-screen for free.\nexport function getScrollableAncestors(el: HTMLElement): HTMLElement[] {\n const ancestors: HTMLElement[] = [];\n let node = el.parentElement;\n while (node && node !== document.body && node !== document.documentElement) {\n const style = getComputedStyle(node);\n if (style.overflowX !== 'visible' || style.overflowY !== 'visible') ancestors.push(node);\n node = node.parentElement;\n }\n return ancestors;\n}\n\nexport function isHiddenByAnyAncestor(rect: DOMRect, ancestors: HTMLElement[]): boolean {\n return ancestors.some((ancestor) => {\n const a = ancestor.getBoundingClientRect();\n return rect.bottom <= a.top || rect.top >= a.bottom || rect.right <= a.left || rect.left >= a.right;\n });\n}\n"],"mappings":"AAMA,SAAgB,EAAuB,EAAgC,CACrE,IAAM,EAA2B,CAAC,EAC9B,EAAO,EAAG,cACd,KAAO,GAAQ,IAAS,SAAS,MAAQ,IAAS,SAAS,iBAAiB,CAC1E,IAAM,EAAQ,iBAAiB,CAAI,GAC/B,EAAM,YAAc,WAAa,EAAM,YAAc,YAAW,EAAU,KAAK,CAAI,EACvF,EAAO,EAAK,aACd,CACA,OAAO,CACT,CAEA,SAAgB,EAAsB,EAAe,EAAmC,CACtF,OAAO,EAAU,KAAM,GAAa,CAClC,IAAM,EAAI,EAAS,sBAAsB,EACzC,OAAO,EAAK,QAAU,EAAE,KAAO,EAAK,KAAO,EAAE,QAAU,EAAK,OAAS,EAAE,MAAQ,EAAK,MAAQ,EAAE,KAChG,CAAC,CACH"}
Binary file
@@ -1 +1 @@
1
- import{AccordionStyleType as e}from"./common/accordion/accordion.types.mjs";import t from"./common/configProvider/configProvider.mjs";import{useComponentDefaults as n}from"./common/configProvider/useComponentDefaults.mjs";import r from"./common/accordion/accordion.mjs";import i from"./common/loading/spinnerLoading/index.mjs";import{ButtonSize as a,ButtonStyleType as o,ButtonType as s}from"./common/button/button.types.mjs";import c from"./common/ripple/ripple.mjs";import l from"./common/button/button.mjs";import u from"./common/actionButtons/actionButtons.mjs";import d from"./common/interactableDiv/index.mjs";import f from"./common/actionIcon/actionIcon.mjs";import p from"./common/animatedLogo/animatedLogo.mjs";import{BadgePosition as m,BadgeStyleType as h}from"./common/badge/badge.types.mjs";import g from"./common/badge/badge.mjs";import _ from"./common/avatar/avatar.mjs";import v from"./common/avatar/avatarGroup.mjs";import y from"./common/bodyEnd/bodyEnd.mjs";import{CardStyleType as b}from"./common/card/card.types.mjs";import x from"./common/card/Card.mjs";import S from"./common/card/CardHeader.mjs";import C from"./common/card/CardMedia.mjs";import w from"./common/card/CardContent.mjs";import T from"./common/card/CardActions.mjs";import E from"./common/checkbox/checkbox.mjs";import{ChipStyleType as D}from"./common/chip/chip.types.mjs";import O from"./common/chip/chip.mjs";import k from"./common/chip/chipContainer.mjs";import{Align as A}from"./common/floatingMenu/floatingMenu.types.mjs";import j from"./common/floatingMenu/floatingMenu.mjs";import M from"./common/tooltip/tooltip.mjs";import{InputType as N}from"./common/input/input.types.mjs";import P from"./common/input/input.mjs";import F from"./common/colorPicker/colorPicker.mjs";import I from"./common/modal/modal.mjs";import L from"./common/confirmModal/confirmModal.mjs";import{getLocale as R,mapLocale as z,setLocale as B}from"./services/localization.mjs";import V from"./common/infiniteBlock/infiniteBlock.mjs";import H from"./common/dropdown/dropdown.mjs";import U from"./common/datePicker/datePicker.mjs";import{DividerTextPosition as W}from"./common/divider/divider.types.mjs";import G from"./common/divider/divider.mjs";import K from"./common/drawer/drawer.mjs";import{DropZoneReturnType as q,DropZoneStatus as J}from"./common/dropZone/dropZone.types.mjs";import Y from"./common/dropZone/dropZone.mjs";import X from"./common/emptyState/emptyState.mjs";import Z from"./common/fab/fab.mjs";import Q from"./common/iconPicker/iconPicker.mjs";import $ from"./common/idleManager/idleManager.mjs";import ee from"./common/inputDropdown/inputDropdown.mjs";import te from"./common/kanbanBoard/KanbanColumn.mjs";import ne from"./common/kanbanBoard/KanbanBoard.mjs";import re from"./common/searchInput/searchInput.mjs";import ie from"./common/klipyPicker/klipyPicker.mjs";import ae from"./common/loading/iconLoading/index.mjs";import oe from"./common/numberInput/index.mjs";import se from"./common/optionPicker/optionPicker.mjs";import ce from"./common/overscroll/overscroll.mjs";import le from"./common/progressBar/progressBar.mjs";import ue from"./common/roomDrawer/roomDrawer.mjs";import de from"./common/roomViewer/roomViewer.mjs";import fe from"./common/scrollbarProvider/index.mjs";import{SectionHeaderSize as pe}from"./common/sectionHeader/sectionHeader.types.mjs";import me from"./common/sectionHeader/sectionHeader.mjs";import{SkeletonAnimation as he,SkeletonVariant as ge}from"./common/skeleton/skeleton.types.mjs";import _e from"./common/skeleton/skeleton.mjs";import ve from"./common/stepper/stepper.mjs";import ye from"./common/sticky/sticky.mjs";import be from"./common/switch/switch.mjs";import xe from"./common/tabHeader/tabHeader.mjs";import Se from"./common/textarea/textarea.mjs";import{defaultTheme as Ce}from"./common/themeProvider/defaultTheme.mjs";import we from"./common/themeProvider/themeProvider.mjs";import{useTheme as Te}from"./common/themeProvider/useTheme.mjs";import Ee from"./common/timeInput/timeInput.mjs";import{showToast as De}from"./common/toast/toastService.mjs";import Oe from"./common/toast/toastProvider.mjs";import ke from"./common/virtualList/virtualList.mjs";import Ae from"./common/wizard/wizard.mjs";import je from"./services/formValidation/FormValidatorGroupWithForm.mjs";import Me from"./services/formValidation/validatableComponent.mjs";import{useFormValidatorGroup as Ne}from"./services/formValidation/useFormValidatorGroup.mjs";import{FormValidator as Pe,Validators as Fe,useFormValidator as Ie}from"./services/formValidation/index.mjs";import{hasEightPasswordChars as Le,hasOnePasswordDigit as Re,hasOnePasswordLetter as ze,isBic as Be,isDate as Ve,isEmail as He,isISODate as Ue,isNumber as We,isPassword as Ge,isURL as Ke}from"@ahrowe/form-validation";export{r as Accordion,e as AccordionStyleType,u as ActionButtons,f as ActionIcon,A as Align,p as AnimatedLogo,_ as Avatar,v as AvatarGroup,g as Badge,m as BadgePosition,h as BadgeStyleType,y as BodyEnd,l as Button,a as ButtonSize,o as ButtonStyleType,s as ButtonType,x as Card,T as CardActions,w as CardContent,S as CardHeader,C as CardMedia,b as CardStyleType,E as Checkbox,O as Chip,k as ChipContainer,D as ChipStyleType,F as ColorPicker,t as ConfigProvider,L as ConfirmModal,U as DatePicker,G as Divider,W as DividerTextPosition,K as Drawer,Y as DropZone,q as DropZoneReturnType,J as DropZoneStatus,H as Dropdown,X as EmptyState,Z as Fab,j as FloatingMenu,Pe as FormValidator,je as FormValidatorGroup,ae as IconLoading,Q as IconPicker,$ as IdleManager,V as InfiniteBlock,P as Input,ee as InputDropdown,N as InputType,d as InteractableDiv,ne as KanbanBoard,te as KanbanColumn,ie as KlipyPicker,I as Modal,oe as NumberInput,se as OptionPicker,ce as Overscroll,le as ProgressBar,c as Ripple,ue as RoomDrawer,de as RoomViewer,fe as ScrollbarProvider,re as SearchInput,me as SectionHeader,pe as SectionHeaderSize,_e as Skeleton,he as SkeletonAnimation,ge as SkeletonVariant,i as SpinnerLoading,ve as Stepper,ye as Sticky,be as Switch,xe as TabHeader,Se as Textarea,we as ThemeProvider,Ee as TimeInput,Oe as ToastProvider,M as Tooltip,Me as ValidatableComponent,Fe as Validators,ke as VirtualList,Ae as Wizard,Ce as defaultTheme,R as getLocale,Le as hasEightPasswordChars,Re as hasOnePasswordDigit,ze as hasOnePasswordLetter,Be as isBic,Ve as isDate,He as isEmail,Ue as isISODate,We as isNumber,Ge as isPassword,Ke as isURL,z as mapLocale,B as setLocale,De as showToast,n as useComponentDefaults,Ie as useFormValidator,Ne as useFormValidatorGroup,Te as useTheme};
1
+ import{AccordionStyleType as e}from"./common/accordion/accordion.types.mjs";import t from"./common/configProvider/configProvider.mjs";import{useComponentDefaults as n}from"./common/configProvider/useComponentDefaults.mjs";import r from"./common/accordion/accordion.mjs";import i from"./common/loading/spinnerLoading/index.mjs";import{ButtonSize as a,ButtonStyleType as o,ButtonType as s}from"./common/button/button.types.mjs";import c from"./common/ripple/ripple.mjs";import l from"./common/button/button.mjs";import u from"./common/actionButtons/actionButtons.mjs";import d from"./common/interactableDiv/index.mjs";import f from"./common/actionIcon/actionIcon.mjs";import p from"./common/animatedLogo/animatedLogo.mjs";import{AnimatedTextUnit as m,AnimatedTextVariant as h}from"./common/animatedText/animatedText.types.mjs";import g from"./common/animatedText/animatedText.mjs";import{BadgePosition as _,BadgeStyleType as v}from"./common/badge/badge.types.mjs";import y from"./common/badge/badge.mjs";import b from"./common/avatar/avatar.mjs";import x from"./common/avatar/avatarGroup.mjs";import S from"./common/bodyEnd/bodyEnd.mjs";import{CardStyleType as C}from"./common/card/card.types.mjs";import w from"./common/card/Card.mjs";import T from"./common/card/CardHeader.mjs";import E from"./common/card/CardMedia.mjs";import D from"./common/card/CardContent.mjs";import O from"./common/card/CardActions.mjs";import k from"./common/checkbox/checkbox.mjs";import{ChipStyleType as A}from"./common/chip/chip.types.mjs";import j from"./common/chip/chip.mjs";import M from"./common/chip/chipContainer.mjs";import{Align as N}from"./common/floatingMenu/floatingMenu.types.mjs";import P from"./common/floatingMenu/floatingMenu.mjs";import F from"./common/tooltip/tooltip.mjs";import{InputType as I}from"./common/input/input.types.mjs";import L from"./common/input/input.mjs";import R from"./common/colorPicker/colorPicker.mjs";import z from"./common/modal/modal.mjs";import B from"./common/confirmModal/confirmModal.mjs";import{getLocale as V,mapLocale as H,setLocale as U}from"./services/localization.mjs";import W from"./common/infiniteBlock/infiniteBlock.mjs";import G from"./common/dropdown/dropdown.mjs";import K from"./common/datePicker/datePicker.mjs";import{DividerTextPosition as q}from"./common/divider/divider.types.mjs";import J from"./common/divider/divider.mjs";import Y from"./common/drawer/drawer.mjs";import{DropZoneReturnType as X,DropZoneStatus as Z}from"./common/dropZone/dropZone.types.mjs";import Q from"./common/dropZone/dropZone.mjs";import $ from"./common/emptyState/emptyState.mjs";import ee from"./common/fab/fab.mjs";import te from"./common/iconPicker/iconPicker.mjs";import ne from"./common/idleManager/idleManager.mjs";import re from"./common/inputDropdown/inputDropdown.mjs";import ie from"./common/kanbanBoard/KanbanColumn.mjs";import ae from"./common/kanbanBoard/KanbanBoard.mjs";import oe from"./common/searchInput/searchInput.mjs";import se from"./common/klipyPicker/klipyPicker.mjs";import ce from"./common/loading/iconLoading/index.mjs";import le from"./common/numberInput/index.mjs";import ue from"./common/optionPicker/optionPicker.mjs";import de from"./common/overscroll/overscroll.mjs";import{PopoverAlign as fe,PopoverPlacement as pe,PopoverTrigger as me}from"./common/popover/popover.types.mjs";import he from"./common/popover/popover.mjs";import ge from"./common/progressBar/progressBar.mjs";import{RadioGroupOrientation as _e}from"./common/radioGroup/radioGroup.types.mjs";import ve from"./common/radioGroup/radioGroup.mjs";import ye from"./common/roomDrawer/roomDrawer.mjs";import be from"./common/roomViewer/roomViewer.mjs";import xe from"./common/scrollbarProvider/index.mjs";import{SectionHeaderSize as Se}from"./common/sectionHeader/sectionHeader.types.mjs";import Ce from"./common/sectionHeader/sectionHeader.mjs";import{SkeletonAnimation as we,SkeletonVariant as Te}from"./common/skeleton/skeleton.types.mjs";import Ee from"./common/skeleton/skeleton.mjs";import{StepperAlignment as De,StepperCollapse as Oe,StepperLabelPlacement as ke,StepperStyleType as Ae}from"./common/stepper/stepper.types.mjs";import je from"./common/stepper/stepper.mjs";import Me from"./common/sticky/sticky.mjs";import Ne from"./common/switch/switch.mjs";import Pe from"./common/tabHeader/tabHeader.mjs";import Fe from"./common/textarea/textarea.mjs";import{defaultTheme as Ie}from"./common/themeProvider/defaultTheme.mjs";import Le from"./common/themeProvider/themeProvider.mjs";import{useTheme as Re}from"./common/themeProvider/useTheme.mjs";import ze from"./common/timeInput/timeInput.mjs";import{showToast as Be}from"./common/toast/toastService.mjs";import Ve from"./common/toast/toastProvider.mjs";import He from"./common/virtualList/virtualList.mjs";import Ue from"./common/wizard/wizard.mjs";import We from"./services/formValidation/FormValidatorGroupWithForm.mjs";import Ge from"./services/formValidation/validatableComponent.mjs";import{useFormValidatorGroup as Ke}from"./services/formValidation/useFormValidatorGroup.mjs";import{FormValidator as qe,Validators as Je,useFormValidator as Ye}from"./services/formValidation/index.mjs";import{hasEightPasswordChars as Xe,hasOnePasswordDigit as Ze,hasOnePasswordLetter as Qe,isBic as $e,isDate as et,isEmail as tt,isISODate as nt,isNumber as rt,isPassword as it,isURL as at}from"@ahrowe/form-validation";export{r as Accordion,e as AccordionStyleType,u as ActionButtons,f as ActionIcon,N as Align,p as AnimatedLogo,g as AnimatedText,m as AnimatedTextUnit,h as AnimatedTextVariant,b as Avatar,x as AvatarGroup,y as Badge,_ as BadgePosition,v as BadgeStyleType,S as BodyEnd,l as Button,a as ButtonSize,o as ButtonStyleType,s as ButtonType,w as Card,O as CardActions,D as CardContent,T as CardHeader,E as CardMedia,C as CardStyleType,k as Checkbox,j as Chip,M as ChipContainer,A as ChipStyleType,R as ColorPicker,t as ConfigProvider,B as ConfirmModal,K as DatePicker,J as Divider,q as DividerTextPosition,Y as Drawer,Q as DropZone,X as DropZoneReturnType,Z as DropZoneStatus,G as Dropdown,$ as EmptyState,ee as Fab,P as FloatingMenu,qe as FormValidator,We as FormValidatorGroup,ce as IconLoading,te as IconPicker,ne as IdleManager,W as InfiniteBlock,L as Input,re as InputDropdown,I as InputType,d as InteractableDiv,ae as KanbanBoard,ie as KanbanColumn,se as KlipyPicker,z as Modal,le as NumberInput,ue as OptionPicker,de as Overscroll,he as Popover,fe as PopoverAlign,pe as PopoverPlacement,me as PopoverTrigger,ge as ProgressBar,ve as RadioGroup,_e as RadioGroupOrientation,c as Ripple,ye as RoomDrawer,be as RoomViewer,xe as ScrollbarProvider,oe as SearchInput,Ce as SectionHeader,Se as SectionHeaderSize,Ee as Skeleton,we as SkeletonAnimation,Te as SkeletonVariant,i as SpinnerLoading,je as Stepper,De as StepperAlignment,Oe as StepperCollapse,ke as StepperLabelPlacement,Ae as StepperStyleType,Me as Sticky,Ne as Switch,Pe as TabHeader,Fe as Textarea,Le as ThemeProvider,ze as TimeInput,Ve as ToastProvider,F as Tooltip,Ge as ValidatableComponent,Je as Validators,He as VirtualList,Ue as Wizard,Ie as defaultTheme,V as getLocale,Xe as hasEightPasswordChars,Ze as hasOnePasswordDigit,Qe as hasOnePasswordLetter,$e as isBic,et as isDate,tt as isEmail,nt as isISODate,rt as isNumber,it as isPassword,at as isURL,H as mapLocale,U as setLocale,Be as showToast,n as useComponentDefaults,Ye as useFormValidator,Ke as useFormValidatorGroup,Re as useTheme};
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0.244 0.155 11.72 14.25">
2
+ <metadata>Copyright ahrowe.com</metadata>
3
+ <path d="M 1.292 0.278 C -0.41 4.855 3.185 6.433 0.344 8.916 Q 3.923 10.712 5.361 14.001 Q 6.128 14.398 6.876 14.003 Q 8.439 10.632 11.86 8.912 C 8.893 6.387 12.578 5.159 10.86 0.255 Q 8.655 1.166 7.391 3.377 Q 6.092 2.93 4.843 3.38 Q 3.246 0.883 1.292 0.278 Z M 1.663 1.28 Q 2.413 1.635 3.195 2.718 Q 2.083 2.778 1.595 3.884 Q 1.309 2.7 1.663 1.28 M 3.802 7.908 Q 4.426 8.069 3.284 9.003 Q 3.824 9.32 4.557 10.141 Q 4.812 10.869 4.849 11.671 Q 4.371 10.09 2.642 9.144 Q 2.438 9.033 2.609 8.922 Q 3.229 8.537 3.802 7.908 M 8.469 7.927 Q 8.955 8.469 9.646 8.926 Q 9.791 9.032 9.647 9.136 Q 7.821 10.157 7.389 11.702 Q 7.464 10.869 7.709 10.119 Q 8.219 9.53 8.956 9.025 Q 7.81 7.927 8.469 7.927" stroke="#FF5300" stroke-width="0.1" fill="#FF5300"/>
4
+ </svg>
Binary file