@adgytec/adgytec-web-ui-components 2.1.7 → 2.1.8

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 (196) hide show
  1. package/dist/assets/core.css +1 -1
  2. package/dist/chunks/ActionDialog.map +1 -1
  3. package/dist/chunks/AppBarAction.map +1 -1
  4. package/dist/chunks/AppBarAvatar +38 -30
  5. package/dist/chunks/AppBarAvatar.map +1 -1
  6. package/dist/chunks/AppBarHeadline +18 -12
  7. package/dist/chunks/AppBarHeadline.map +1 -1
  8. package/dist/chunks/BaseCalendar.map +1 -1
  9. package/dist/chunks/BottomSheet +23 -16
  10. package/dist/chunks/BottomSheet.map +1 -1
  11. package/dist/chunks/BottomSheetModal.map +1 -1
  12. package/dist/chunks/ButtonGroup +28 -20
  13. package/dist/chunks/ButtonGroup.map +1 -1
  14. package/dist/chunks/CalendarCell.map +1 -1
  15. package/dist/chunks/CalendarGrid +40 -22
  16. package/dist/chunks/CalendarGrid.map +1 -1
  17. package/dist/chunks/CalendarMenuItem +18 -9
  18. package/dist/chunks/CalendarMenuItem.map +1 -1
  19. package/dist/chunks/CenteredSlider.map +1 -1
  20. package/dist/chunks/ComboBox.map +1 -1
  21. package/dist/chunks/ComboBoxPopover.map +1 -1
  22. package/dist/chunks/ComboBoxTrigger +66 -44
  23. package/dist/chunks/ComboBoxTrigger.map +1 -1
  24. package/dist/chunks/ConnectedButtonGroup.map +1 -1
  25. package/dist/chunks/Dialog +21 -12
  26. package/dist/chunks/Dialog.map +1 -1
  27. package/dist/chunks/Disclosure +17 -8
  28. package/dist/chunks/Disclosure.map +1 -1
  29. package/dist/chunks/DisclosureGroup +28 -15
  30. package/dist/chunks/DisclosureGroup.map +1 -1
  31. package/dist/chunks/DisclosureHeader +53 -35
  32. package/dist/chunks/DisclosureHeader.map +1 -1
  33. package/dist/chunks/DisclosurePanel +22 -12
  34. package/dist/chunks/DisclosurePanel.map +1 -1
  35. package/dist/chunks/Divider +18 -9
  36. package/dist/chunks/Divider.map +1 -1
  37. package/dist/chunks/FieldError +18 -9
  38. package/dist/chunks/FieldError.map +1 -1
  39. package/dist/chunks/Icon +20 -15
  40. package/dist/chunks/Icon.map +1 -1
  41. package/dist/chunks/Input +72 -64
  42. package/dist/chunks/Input.map +1 -1
  43. package/dist/chunks/Input2 +82 -72
  44. package/dist/chunks/Input2.map +1 -1
  45. package/dist/chunks/Loader +17 -10
  46. package/dist/chunks/Loader.map +1 -1
  47. package/dist/chunks/MenuPopover +17 -8
  48. package/dist/chunks/MenuPopover.map +1 -1
  49. package/dist/chunks/Modal +17 -8
  50. package/dist/chunks/Modal.map +1 -1
  51. package/dist/chunks/ModalOverlay +17 -8
  52. package/dist/chunks/ModalOverlay.map +1 -1
  53. package/dist/chunks/Navigation +46 -36
  54. package/dist/chunks/Navigation.map +1 -1
  55. package/dist/chunks/NavigationScrollContainer +37 -27
  56. package/dist/chunks/NavigationScrollContainer.map +1 -1
  57. package/dist/chunks/NavigationSection +16 -7
  58. package/dist/chunks/NavigationSection.map +1 -1
  59. package/dist/chunks/NavigationSectionLabel +18 -9
  60. package/dist/chunks/NavigationSectionLabel.map +1 -1
  61. package/dist/chunks/NavigationState.map +1 -1
  62. package/dist/chunks/Popover +17 -8
  63. package/dist/chunks/Popover.map +1 -1
  64. package/dist/chunks/Radio +59 -52
  65. package/dist/chunks/Radio.map +1 -1
  66. package/dist/chunks/RichTooltip +17 -8
  67. package/dist/chunks/RichTooltip.map +1 -1
  68. package/dist/chunks/RichTooltipActions +16 -7
  69. package/dist/chunks/RichTooltipActions.map +1 -1
  70. package/dist/chunks/RichTooltipInfo +16 -7
  71. package/dist/chunks/RichTooltipInfo.map +1 -1
  72. package/dist/chunks/SearchField.map +1 -1
  73. package/dist/chunks/SelectPopover +17 -8
  74. package/dist/chunks/SelectPopover.map +1 -1
  75. package/dist/chunks/SelectTrigger +34 -24
  76. package/dist/chunks/SelectTrigger.map +1 -1
  77. package/dist/chunks/SideSheet +64 -52
  78. package/dist/chunks/SideSheet.map +1 -1
  79. package/dist/chunks/SideSheetModal.map +1 -1
  80. package/dist/chunks/Slider.map +1 -1
  81. package/dist/chunks/SliderOutput +21 -16
  82. package/dist/chunks/SliderOutput.map +1 -1
  83. package/dist/chunks/SliderStops.map +1 -1
  84. package/dist/chunks/Snackbar.map +1 -1
  85. package/dist/chunks/SplitButtonTrigger +48 -38
  86. package/dist/chunks/SplitButtonTrigger.map +1 -1
  87. package/dist/chunks/SubmenuPopover.map +1 -1
  88. package/dist/chunks/Switch.map +1 -1
  89. package/dist/chunks/Tab +41 -29
  90. package/dist/chunks/Tab.map +1 -1
  91. package/dist/chunks/TabList +16 -8
  92. package/dist/chunks/TabList.map +1 -1
  93. package/dist/chunks/TabPanel +16 -8
  94. package/dist/chunks/TabPanel.map +1 -1
  95. package/dist/chunks/TabPanels +17 -9
  96. package/dist/chunks/TabPanels.map +1 -1
  97. package/dist/chunks/Tabs +17 -8
  98. package/dist/chunks/Tabs.map +1 -1
  99. package/dist/chunks/Tag.map +1 -1
  100. package/dist/chunks/ThemeSelector +73 -72
  101. package/dist/chunks/ThemeSelector.map +1 -1
  102. package/dist/chunks/Toolbar +20 -12
  103. package/dist/chunks/Toolbar.map +1 -1
  104. package/dist/chunks/Tooltip.map +1 -1
  105. package/dist/chunks/compiler-runtime +24 -0
  106. package/dist/chunks/compiler-runtime.map +1 -0
  107. package/dist/chunks/core +75 -68
  108. package/dist/chunks/core.map +1 -1
  109. package/dist/chunks/core3.map +1 -1
  110. package/dist/chunks/core8.map +1 -1
  111. package/dist/chunks/navContext.map +1 -1
  112. package/dist/chunks/useGlobalListeners.map +1 -1
  113. package/dist/chunks/useHover +1 -1
  114. package/dist/chunks/useHover.map +1 -1
  115. package/dist/chunks/usePress +1 -1
  116. package/dist/chunks/usePress.map +1 -1
  117. package/dist/chunks/useSplash +42 -27
  118. package/dist/chunks/useSplash.map +1 -1
  119. package/dist/components/AppBar/core/index.js.map +1 -1
  120. package/dist/components/Button/Button/index.js +61 -48
  121. package/dist/components/Button/Button/index.js.map +1 -1
  122. package/dist/components/Button/ButtonGroups/ButtonGroupContext/index.js.map +1 -1
  123. package/dist/components/Button/IconButton/index.js.map +1 -1
  124. package/dist/components/Button/LinkButton/index.js +61 -48
  125. package/dist/components/Button/LinkButton/index.js.map +1 -1
  126. package/dist/components/Button/LinkIconButton/index.js.map +1 -1
  127. package/dist/components/Button/SplitButton/SplitButtonContext/index.js.map +1 -1
  128. package/dist/components/Button/SplitButton/SplitButtonPrimary/index.js.map +1 -1
  129. package/dist/components/Button/ToggleButton/index.js +69 -54
  130. package/dist/components/Button/ToggleButton/index.js.map +1 -1
  131. package/dist/components/Button/ToggleIconButton/index.js.map +1 -1
  132. package/dist/components/Calendar/Calendar/index.js +22 -12
  133. package/dist/components/Calendar/Calendar/index.js.map +1 -1
  134. package/dist/components/Calendar/CalendarMonthMenu/index.js +38 -33
  135. package/dist/components/Calendar/CalendarMonthMenu/index.js.map +1 -1
  136. package/dist/components/Calendar/CalendarYearMenu/index.js +31 -26
  137. package/dist/components/Calendar/CalendarYearMenu/index.js.map +1 -1
  138. package/dist/components/Calendar/RangeCalendar/index.js +25 -15
  139. package/dist/components/Calendar/RangeCalendar/index.js.map +1 -1
  140. package/dist/components/Dialog/core/index.js.map +1 -1
  141. package/dist/components/Disclosure/context/index.js +11 -12
  142. package/dist/components/Disclosure/context/index.js.map +1 -1
  143. package/dist/components/Image/index.js.map +1 -1
  144. package/dist/components/Input/CharacterCount/index.js +18 -10
  145. package/dist/components/Input/CharacterCount/index.js.map +1 -1
  146. package/dist/components/Input/DateField/index.js.map +1 -1
  147. package/dist/components/Input/DatePicker/DatePicker/index.js.map +1 -1
  148. package/dist/components/Input/DatePicker/DateRangePicker/index.js.map +1 -1
  149. package/dist/components/Input/Description/index.js +21 -10
  150. package/dist/components/Input/Description/index.js.map +1 -1
  151. package/dist/components/Input/Label/index.js +18 -10
  152. package/dist/components/Input/Label/index.js.map +1 -1
  153. package/dist/components/Input/Select/Select/index.js.map +1 -1
  154. package/dist/components/Input/Select/SelectItem/index.js.map +1 -1
  155. package/dist/components/Input/Select/SelectList/index.js.map +1 -1
  156. package/dist/components/Input/Select/SelectListSection/index.js +17 -9
  157. package/dist/components/Input/Select/SelectListSection/index.js.map +1 -1
  158. package/dist/components/Input/Select/SelectListSectionHeader/index.js +18 -10
  159. package/dist/components/Input/Select/SelectListSectionHeader/index.js.map +1 -1
  160. package/dist/components/Input/Slider/RangeSlider/index.js.map +1 -1
  161. package/dist/components/Input/TextArea/index.js.map +1 -1
  162. package/dist/components/Input/TimeField/index.js.map +1 -1
  163. package/dist/components/Input/hooks/index.js +16 -10
  164. package/dist/components/Input/hooks/index.js.map +1 -1
  165. package/dist/components/Menu/Menu/index.js +19 -14
  166. package/dist/components/Menu/Menu/index.js.map +1 -1
  167. package/dist/components/Menu/MenuItem/index.js +48 -38
  168. package/dist/components/Menu/MenuItem/index.js.map +1 -1
  169. package/dist/components/Menu/MenuSection/index.js +18 -10
  170. package/dist/components/Menu/MenuSection/index.js.map +1 -1
  171. package/dist/components/Menu/MenuSectionHeader/index.js +18 -10
  172. package/dist/components/Menu/MenuSectionHeader/index.js.map +1 -1
  173. package/dist/components/Menu/MenuShortcut/index.js +16 -8
  174. package/dist/components/Menu/MenuShortcut/index.js.map +1 -1
  175. package/dist/components/Menu/MenuTrailingText/index.js +16 -8
  176. package/dist/components/Menu/MenuTrailingText/index.js.map +1 -1
  177. package/dist/components/Menu/MenuTrigger/index.js +21 -11
  178. package/dist/components/Menu/MenuTrigger/index.js.map +1 -1
  179. package/dist/components/Menu/context/index.js.map +1 -1
  180. package/dist/components/Navigation/NavigationItem/NavigationButton/index.js +30 -21
  181. package/dist/components/Navigation/NavigationItem/NavigationButton/index.js.map +1 -1
  182. package/dist/components/Navigation/NavigationItem/NavigationItemIconRenderer/index.js +30 -8
  183. package/dist/components/Navigation/NavigationItem/NavigationItemIconRenderer/index.js.map +1 -1
  184. package/dist/components/Navigation/NavigationItem/NavigationLink/index.js +29 -20
  185. package/dist/components/Navigation/NavigationItem/NavigationLink/index.js.map +1 -1
  186. package/dist/components/Navigation/SubNavigation/SubNavigation/index.js +69 -56
  187. package/dist/components/Navigation/SubNavigation/SubNavigation/index.js.map +1 -1
  188. package/dist/components/Navigation/SubNavigation/SubNavigationTrigger/index.js +48 -29
  189. package/dist/components/Navigation/SubNavigation/SubNavigationTrigger/index.js.map +1 -1
  190. package/dist/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipSubhead/index.js +17 -9
  191. package/dist/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipSubhead/index.js.map +1 -1
  192. package/dist/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipText/index.js +17 -9
  193. package/dist/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipText/index.js.map +1 -1
  194. package/dist/components/Tooltip/TooltipTrigger/index.js.map +1 -1
  195. package/dist/index.js.map +1 -1
  196. package/package.json +4 -4
@@ -1 +1 @@
1
- {"version":3,"file":"Slider","names":[],"sources":["../../src/components/Input/Slider/Slider/slider.module.css","../../src/components/Input/Slider/Slider/Slider.tsx"],"sourcesContent":["@layer adgytec.comps {\n .visual-track {\n position: absolute;\n inset: 0;\n z-index: 0;\n\n border-radius: var(--_md-slider-track-shape);\n\n display: flex;\n gap: var(--_track-gap);\n\n &[data-orientation=\"horizontal\"] {\n inset-inline: var(--_orientation-inset);\n }\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column-reverse;\n inset-block: var(--_orientation-inset);\n }\n }\n\n .active-track {\n background-color: var(--_active-track-color);\n border-radius: var(--_md-slider-track-shape);\n\n &[data-orientation=\"horizontal\"] {\n border-start-end-radius: var(--_md-slider-track-inner-shape);\n border-end-end-radius: var(--_md-slider-track-inner-shape);\n }\n\n &[data-orientation=\"vertical\"] {\n border-start-end-radius: var(--_md-slider-track-inner-shape);\n border-start-start-radius: var(--_md-slider-track-inner-shape);\n }\n }\n\n .inactive-track {\n background-color: var(--_inactive-track-color);\n border-radius: var(--_md-slider-track-shape);\n\n &[data-orientation=\"horizontal\"] {\n border-start-start-radius: var(--_md-slider-track-inner-shape);\n border-end-start-radius: var(--_md-slider-track-inner-shape);\n }\n\n &[data-orientation=\"vertical\"] {\n border-end-end-radius: var(--_md-slider-track-inner-shape);\n border-end-start-radius: var(--_md-slider-track-inner-shape);\n }\n }\n\n .icon {\n --_min-icon-gap: calc(var(--_track-gap) / 1.5);\n\n position: absolute;\n\n color: var(--_md-slider-icon-color);\n transition: color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-minimum-value] {\n color: var(--_md-slider-minimum-value-icon-color);\n }\n\n &[data-disabled] {\n color: rgb(\n from var(--md-sys-color-inverse-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-minimum-value] {\n color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n\n &[data-orientation=\"horizontal\"] {\n inset-block-start: 50%;\n translate: 0 -50%;\n\n &[data-minimum-value] {\n inset-inline-start: var(--_min-icon-gap);\n }\n }\n\n &[data-orientation=\"vertical\"] {\n inset-block-end: 0;\n inset-inline-start: 50%;\n translate: -50% 0;\n\n &[data-minimum-value] {\n inset-block-end: var(--_min-icon-gap);\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Slider as AriaSlider, SliderTrack } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Label } from \"../../Label\";\nimport {\n SliderColors,\n SliderSizeStyles,\n SliderStyles,\n TrackContainerStyles,\n TrackStyles,\n} from \"../core\";\nimport { SliderStops } from \"../SliderStops\";\nimport { SliderThumb } from \"../SliderThumb\";\nimport styles from \"./slider.module.css\";\nimport type { SliderProps } from \"./types\";\n\nexport const Slider = <T extends number>({\n label,\n thumbLabel,\n size = \"small\",\n step = 1,\n minValue = 0,\n maxValue = 100,\n showInBetweenSteps,\n insetIcon,\n minInsetIcon,\n maxStops,\n outputRenderer,\n className,\n ...props\n}: SliderProps<T>) => {\n const canShowIcon = size !== \"extra-small\" && size !== \"small\";\n const iconSize = size === \"extra-large\" ? 32 : 24;\n\n return (\n <AriaSlider\n minValue={minValue}\n maxValue={maxValue}\n step={step}\n className={(renderProps) =>\n clsx(\n SliderStyles,\n SliderColors,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n >\n {({ orientation, state, isDisabled }) => {\n const thumbValue = state.getThumbPercent(0);\n\n let visibleIcon = insetIcon;\n if (thumbValue === 0 && minInsetIcon) {\n visibleIcon = minInsetIcon;\n }\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n <div\n className={clsx(TrackContainerStyles)}\n data-orientation={orientation}\n >\n <SliderTrack\n className={clsx(\n TrackStyles,\n SliderSizeStyles(size)\n )}\n >\n <div\n className={clsx(styles[\"visual-track\"])}\n data-orientation={orientation}\n >\n <div\n className={clsx(styles[\"active-track\"])}\n data-orientation={orientation}\n style={{\n flexGrow: state.getThumbPercent(0),\n }}\n />\n\n <div\n className={clsx(\n styles[\"inactive-track\"]\n )}\n style={{\n flexGrow:\n 1 - state.getThumbPercent(0),\n }}\n data-orientation={orientation}\n />\n </div>\n\n {canShowIcon && visibleIcon && (\n <Icon\n icon={visibleIcon}\n size={iconSize}\n className={clsx(styles[\"icon\"])}\n data-minimum-value={\n thumbValue === 0 || undefined\n }\n data-disabled={isDisabled || undefined}\n data-orientation={orientation}\n />\n )}\n\n <SliderThumb\n size={size}\n orientation={orientation}\n aria-label={thumbLabel}\n outputRenderer={outputRenderer}\n />\n\n <SliderStops\n minValue={minValue}\n maxValue={maxValue}\n step={step}\n orientation={orientation}\n showInBetweenSteps={showInBetweenSteps}\n maxStops={maxStops}\n />\n </SliderTrack>\n </div>\n </>\n );\n }}\n </AriaSlider>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCgBa,KAA4B,EACrC,UACA,eACA,UAAO,SACP,UAAO,GACP,cAAW,GACX,cAAW,KACX,uBACA,cACA,iBACA,aACA,mBACA,cACA,GAAG,QACe;CAClB,IAAM,IAAc,MAAS,iBAAiB,MAAS,SACjD,IAAW,MAAS,gBAAgB,KAAK;CAE/C,OACI,kBAAC,GAAD;EACc;EACA;EACJ;EACN,YAAY,MACR,EACI,GACA,GACA,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;aAEF,EAAE,gBAAa,UAAO,oBAAiB;GACrC,IAAM,IAAa,EAAM,gBAAgB,CAAC,GAEtC,IAAc;GAKlB,OAJI,MAAe,KAAK,MACpB,IAAc,IAId,kBAAA,GAAA,EAAA,UAAA,CACK,KAAS,kBAAC,GAAD,EAAA,UAAQ,EAAa,CAAA,GAE/B,kBAAC,OAAD;IACI,WAAW,EAAK,CAAoB;IACpC,oBAAkB;cAElB,kBAAC,GAAD;KACI,WAAW,EACP,GACA,EAAiB,CAAI,CACzB;eAJJ;MAMI,kBAAC,OAAD;OACI,WAAW,EAAK,EAAO,eAAe;OACtC,oBAAkB;iBAFtB,CAII,kBAAC,OAAD;QACI,WAAW,EAAK,EAAO,eAAe;QACtC,oBAAkB;QAClB,OAAO,EACH,UAAU,EAAM,gBAAgB,CAAC,EACrC;OACH,CAAA,GAED,kBAAC,OAAD;QACI,WAAW,EACP,EAAO,iBACX;QACA,OAAO,EACH,UACI,IAAI,EAAM,gBAAgB,CAAC,EACnC;QACA,oBAAkB;OACrB,CAAA,CACA;;MAEJ,KAAe,KACZ,kBAAC,GAAD;OACI,MAAM;OACN,MAAM;OACN,WAAW,EAAK,EAAO,IAAO;OAC9B,sBACI,MAAe,KAAK,KAAA;OAExB,iBAAe,KAAc,KAAA;OAC7B,oBAAkB;MACrB,CAAA;MAGL,kBAAC,GAAD;OACU;OACO;OACb,cAAY;OACI;MACnB,CAAA;MAED,kBAAC,GAAD;OACc;OACA;OACJ;OACO;OACO;OACV;MACb,CAAA;KACQ;;GACZ,CAAA,CACP,EAAA,CAAA;EAEV;CACQ,CAAA;AAEpB"}
1
+ {"version":3,"file":"Slider","names":[],"sources":["../../src/components/Input/Slider/Slider/slider.module.css","../../src/components/Input/Slider/Slider/Slider.tsx"],"sourcesContent":["@layer adgytec.comps {\n .visual-track {\n position: absolute;\n inset: 0;\n z-index: 0;\n\n border-radius: var(--_md-slider-track-shape);\n\n display: flex;\n gap: var(--_track-gap);\n\n &[data-orientation=\"horizontal\"] {\n inset-inline: var(--_orientation-inset);\n }\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column-reverse;\n inset-block: var(--_orientation-inset);\n }\n }\n\n .active-track {\n background-color: var(--_active-track-color);\n border-radius: var(--_md-slider-track-shape);\n\n &[data-orientation=\"horizontal\"] {\n border-start-end-radius: var(--_md-slider-track-inner-shape);\n border-end-end-radius: var(--_md-slider-track-inner-shape);\n }\n\n &[data-orientation=\"vertical\"] {\n border-start-end-radius: var(--_md-slider-track-inner-shape);\n border-start-start-radius: var(--_md-slider-track-inner-shape);\n }\n }\n\n .inactive-track {\n background-color: var(--_inactive-track-color);\n border-radius: var(--_md-slider-track-shape);\n\n &[data-orientation=\"horizontal\"] {\n border-start-start-radius: var(--_md-slider-track-inner-shape);\n border-end-start-radius: var(--_md-slider-track-inner-shape);\n }\n\n &[data-orientation=\"vertical\"] {\n border-end-end-radius: var(--_md-slider-track-inner-shape);\n border-end-start-radius: var(--_md-slider-track-inner-shape);\n }\n }\n\n .icon {\n --_min-icon-gap: calc(var(--_track-gap) / 1.5);\n\n position: absolute;\n\n color: var(--_md-slider-icon-color);\n transition: color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-minimum-value] {\n color: var(--_md-slider-minimum-value-icon-color);\n }\n\n &[data-disabled] {\n color: rgb(\n from var(--md-sys-color-inverse-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-minimum-value] {\n color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n\n &[data-orientation=\"horizontal\"] {\n inset-block-start: 50%;\n translate: 0 -50%;\n\n &[data-minimum-value] {\n inset-inline-start: var(--_min-icon-gap);\n }\n }\n\n &[data-orientation=\"vertical\"] {\n inset-block-end: 0;\n inset-inline-start: 50%;\n translate: -50% 0;\n\n &[data-minimum-value] {\n inset-block-end: var(--_min-icon-gap);\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Slider as AriaSlider, SliderTrack } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Label } from \"../../Label\";\nimport {\n SliderColors,\n SliderSizeStyles,\n SliderStyles,\n TrackContainerStyles,\n TrackStyles,\n} from \"../core\";\nimport { SliderStops } from \"../SliderStops\";\nimport { SliderThumb } from \"../SliderThumb\";\nimport styles from \"./slider.module.css\";\nimport type { SliderProps } from \"./types\";\n\nexport const Slider = <T extends number>({\n label,\n thumbLabel,\n size = \"small\",\n step = 1,\n minValue = 0,\n maxValue = 100,\n showInBetweenSteps,\n insetIcon,\n minInsetIcon,\n maxStops,\n outputRenderer,\n className,\n ...props\n}: SliderProps<T>) => {\n const canShowIcon = size !== \"extra-small\" && size !== \"small\";\n const iconSize = size === \"extra-large\" ? 32 : 24;\n\n return (\n <AriaSlider\n minValue={minValue}\n maxValue={maxValue}\n step={step}\n className={(renderProps) =>\n clsx(\n SliderStyles,\n SliderColors,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n >\n {({ orientation, state, isDisabled }) => {\n const thumbValue = state.getThumbPercent(0);\n\n let visibleIcon = insetIcon;\n if (thumbValue === 0 && minInsetIcon) {\n visibleIcon = minInsetIcon;\n }\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n <div\n className={clsx(TrackContainerStyles)}\n data-orientation={orientation}\n >\n <SliderTrack\n className={clsx(\n TrackStyles,\n SliderSizeStyles(size)\n )}\n >\n <div\n className={clsx(styles[\"visual-track\"])}\n data-orientation={orientation}\n >\n <div\n className={clsx(styles[\"active-track\"])}\n data-orientation={orientation}\n style={{\n flexGrow: state.getThumbPercent(0),\n }}\n />\n\n <div\n className={clsx(\n styles[\"inactive-track\"]\n )}\n style={{\n flexGrow:\n 1 - state.getThumbPercent(0),\n }}\n data-orientation={orientation}\n />\n </div>\n\n {canShowIcon && visibleIcon && (\n <Icon\n icon={visibleIcon}\n size={iconSize}\n className={clsx(styles[\"icon\"])}\n data-minimum-value={\n thumbValue === 0 || undefined\n }\n data-disabled={isDisabled || undefined}\n data-orientation={orientation}\n />\n )}\n\n <SliderThumb\n size={size}\n orientation={orientation}\n aria-label={thumbLabel}\n outputRenderer={outputRenderer}\n />\n\n <SliderStops\n minValue={minValue}\n maxValue={maxValue}\n step={step}\n orientation={orientation}\n showInBetweenSteps={showInBetweenSteps}\n maxStops={maxStops}\n />\n </SliderTrack>\n </div>\n </>\n );\n }}\n </AriaSlider>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCgBa,KAA4B,EACrC,UACA,eACA,UAAO,SACP,UAAO,GACP,cAAW,GACX,cAAW,KACX,uBACA,cACA,iBACA,aACA,mBACA,cACA,GAAG,QACe;CAClB,IAAM,IAAc,MAAS,iBAAiB,MAAS,SACjD,IAAW,MAAS,gBAAgB,KAAK;CAE/C,OACI,kBAAC,GAAD;EACc;EACA;EACJ;EACN,YAAY,MACR,EACI,GACA,GACA,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;aAEF,EAAE,gBAAa,UAAO,oBAAiB;GACrC,IAAM,IAAa,EAAM,gBAAgB,CAAC,GAEtC,IAAc;GAKlB,OAJI,MAAe,KAAK,MACpB,IAAc,IAId,kBAAA,GAAA,EAAA,UAAA,CACK,KAAS,kBAAC,GAAD,EAAA,UAAQ,EAAa,CAAA,GAE/B,kBAAC,OAAD;IACI,WAAW,EAAK,CAAoB;IACpC,oBAAkB;cAElB,kBAAC,GAAD;KACI,WAAW,EACP,GACA,EAAiB,CAAI,CACzB;eAJJ;MAMI,kBAAC,OAAD;OACI,WAAW,EAAK,EAAO,eAAe;OACtC,oBAAkB;iBAFtB,CAII,kBAAC,OAAD;QACI,WAAW,EAAK,EAAO,eAAe;QACtC,oBAAkB;QAClB,OAAO,EACH,UAAU,EAAM,gBAAgB,CAAC,EACrC;OAAE,CAAA,GAGN,kBAAC,OAAD;QACI,WAAW,EACP,EAAO,iBACX;QACA,OAAO,EACH,UACI,IAAI,EAAM,gBAAgB,CAAC,EACnC;QACA,oBAAkB;OAAY,CAAA,CAEjC;;MAEJ,KAAe,KACZ,kBAAC,GAAD;OACI,MAAM;OACN,MAAM;OACN,WAAW,EAAK,EAAO,IAAO;OAC9B,sBACI,MAAe,KAAK,KAAA;OAExB,iBAAe,KAAc,KAAA;OAC7B,oBAAkB;MAAY,CAAA;MAItC,kBAAC,GAAD;OACU;OACO;OACb,cAAY;OACI;MAAe,CAAA;MAGnC,kBAAC,GAAD;OACc;OACA;OACJ;OACO;OACO;OACV;MAAS,CAAA;KAEd;;GACZ,CAAA,CACT,EAAA,CAAA;EAER;CACQ,CAAA;AAEpB"}
@@ -1,22 +1,27 @@
1
- import { t as e } from "./base";
2
- import t from "clsx";
3
- import { createContext as n, useContext as r } from "react";
4
- import { jsx as i } from "react/jsx-runtime";
5
- import { SliderOutput as a } from "react-aria-components";
1
+ import { t as e } from "./compiler-runtime";
2
+ import { t } from "./base";
3
+ import n from "clsx";
4
+ import { createContext as r, useContext as i } from "react";
5
+ import { jsx as a } from "react/jsx-runtime";
6
+ import { SliderOutput as o } from "react-aria-components";
6
7
  import '../assets/SliderOutput.css';//#region src/components/Input/Slider/SliderThumb/context.ts
7
- var o = n({}), s = { output: "_output_licmo_2" }, c = ({ className: n, ...c }) => {
8
- let { isDragging: l, isHovered: u, isFocused: d, isFocusVisible: f } = r(o);
9
- return /* @__PURE__ */ i(a, {
10
- className: (r) => t(s.output, e.labelLarge, typeof n == "function" ? n(r) : n),
11
- ...c,
12
- "data-focus-visible": f || void 0,
13
- "data-dragging": l || void 0,
14
- "data-hovered": u || void 0,
15
- "data-focused": d || void 0,
8
+ var s = e(), c = r({}), l = { output: "_output_licmo_2" }, u = (e) => {
9
+ let r = (0, s.c)(12), u, d;
10
+ r[0] === e ? (u = r[1], d = r[2]) : ({className: u, ...d} = e, r[0] = e, r[1] = u, r[2] = d);
11
+ let { isDragging: f, isHovered: p, isFocused: m, isFocusVisible: h } = i(c), g;
12
+ r[3] === u ? g = r[4] : (g = (e) => n(l.output, t.labelLarge, typeof u == "function" ? u(e) : u), r[3] = u, r[4] = g);
13
+ let _ = h || void 0, v = f || void 0, y = p || void 0, b = m || void 0, x;
14
+ return r[5] !== d || r[6] !== g || r[7] !== _ || r[8] !== v || r[9] !== y || r[10] !== b ? (x = /* @__PURE__ */ a(o, {
15
+ className: g,
16
+ ...d,
17
+ "data-focus-visible": _,
18
+ "data-dragging": v,
19
+ "data-hovered": y,
20
+ "data-focused": b,
16
21
  "data-slider-output": !0
17
- });
22
+ }), r[5] = d, r[6] = g, r[7] = _, r[8] = v, r[9] = y, r[10] = b, r[11] = x) : x = r[11], x;
18
23
  };
19
24
  //#endregion
20
- export { o as n, c as t };
25
+ export { c as n, u as t };
21
26
 
22
27
  //# sourceMappingURL=SliderOutput.map
@@ -1 +1 @@
1
- {"version":3,"file":"SliderOutput","names":[],"sources":["../../src/components/Input/Slider/SliderThumb/context.ts","../../src/components/Input/Slider/SliderOutput/sliderOutput.module.css","../../src/components/Input/Slider/SliderOutput/SliderOutput.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type SliderThumbStateContextValue = {\n isDragging?: boolean;\n isHovered?: boolean;\n isFocused?: boolean;\n isFocusVisible?: boolean;\n};\n\nexport const SliderThumbStateContext =\n createContext<SliderThumbStateContextValue>({});\n","@layer adgytec.comps {\n .output {\n position: absolute;\n\n padding-block: var(--md-sys-layout-space-12);\n padding-inline: var(--md-sys-layout-space-16);\n\n background-color: var(--_md-slider-output-background);\n color: var(--_md-slider-output-color);\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n &[data-orientation=\"horizontal\"] {\n inset-block-end: 100%;\n inset-inline-start: 50%;\n translate: -50% calc(-4 * var(--dp, 1px));\n\n transform-origin: bottom;\n }\n\n &[data-orientation=\"vertical\"] {\n inset-inline-end: 100%;\n inset-block-start: 50%;\n translate: calc(-4 * var(--dp, 1px)) -50%;\n\n transform-origin: right;\n }\n\n scale: 0;\n opacity: 0;\n\n transition:\n scale var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n opacity var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-dragging],\n &[data-focus-visible] {\n scale: 1;\n opacity: 1;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport { SliderOutput as AriaSliderOutput } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { SliderThumbStateContext } from \"../SliderThumb/context\";\nimport styles from \"./sliderOutput.module.css\";\n\nexport const SliderOutput: React.FC<\n React.ComponentPropsWithRef<typeof AriaSliderOutput>\n> = ({ className, ...props }) => {\n const { isDragging, isHovered, isFocused, isFocusVisible } = useContext(\n SliderThumbStateContext\n );\n\n return (\n <AriaSliderOutput\n className={(renderProps) =>\n clsx(\n styles[\"output\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-focus-visible={isFocusVisible || undefined}\n data-dragging={isDragging || undefined}\n data-hovered={isHovered || undefined}\n data-focused={isFocused || undefined}\n data-slider-output\n />\n );\n};\n"],"mappings":";;;;;;AASA,IAAa,IACT,EAA4C,CAAC,CAAC,sCEHrC,KAER,EAAE,cAAW,GAAG,QAAY;CAC7B,IAAM,EAAE,eAAY,cAAW,cAAW,sBAAmB,EACzD,CACJ;CAEA,OACI,kBAAC,GAAD;EACI,YAAY,MACR,EACI,EAAO,QACP,EAAW,YACX,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;EACJ,sBAAoB,KAAkB,KAAA;EACtC,iBAAe,KAAc,KAAA;EAC7B,gBAAc,KAAa,KAAA;EAC3B,gBAAc,KAAa,KAAA;EAC3B,sBAAA;CACH,CAAA;AAET"}
1
+ {"version":3,"file":"SliderOutput","names":[],"sources":["../../src/components/Input/Slider/SliderThumb/context.ts","../../src/components/Input/Slider/SliderOutput/sliderOutput.module.css","../../src/components/Input/Slider/SliderOutput/SliderOutput.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type SliderThumbStateContextValue = {\n isDragging?: boolean;\n isHovered?: boolean;\n isFocused?: boolean;\n isFocusVisible?: boolean;\n};\n\nexport const SliderThumbStateContext =\n createContext<SliderThumbStateContextValue>({});\n","@layer adgytec.comps {\n .output {\n position: absolute;\n\n padding-block: var(--md-sys-layout-space-12);\n padding-inline: var(--md-sys-layout-space-16);\n\n background-color: var(--_md-slider-output-background);\n color: var(--_md-slider-output-color);\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n &[data-orientation=\"horizontal\"] {\n inset-block-end: 100%;\n inset-inline-start: 50%;\n translate: -50% calc(-4 * var(--dp, 1px));\n\n transform-origin: bottom;\n }\n\n &[data-orientation=\"vertical\"] {\n inset-inline-end: 100%;\n inset-block-start: 50%;\n translate: calc(-4 * var(--dp, 1px)) -50%;\n\n transform-origin: right;\n }\n\n scale: 0;\n opacity: 0;\n\n transition:\n scale var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n opacity var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-dragging],\n &[data-focus-visible] {\n scale: 1;\n opacity: 1;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport { SliderOutput as AriaSliderOutput } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { SliderThumbStateContext } from \"../SliderThumb/context\";\nimport styles from \"./sliderOutput.module.css\";\n\nexport const SliderOutput: React.FC<\n React.ComponentPropsWithRef<typeof AriaSliderOutput>\n> = ({ className, ...props }) => {\n const { isDragging, isHovered, isFocused, isFocusVisible } = useContext(\n SliderThumbStateContext\n );\n\n return (\n <AriaSliderOutput\n className={(renderProps) =>\n clsx(\n styles[\"output\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-focus-visible={isFocusVisible || undefined}\n data-dragging={isDragging || undefined}\n data-hovered={isHovered || undefined}\n data-focused={isFocused || undefined}\n data-slider-output\n />\n );\n};\n"],"mappings":";;;;;;;aASA,IAAA,EAAA,CAAA,CAAA,sCEFa,KAET,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,EAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAAwB,IAAA,EAAA,IAAA,IAAA,EAAA,OAAvB,kBAAA,KAAA,GAAuB,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CACxB,IAAA,EAAA,eAAA,cAAA,cAAA,sBAA6D,EACzD,CACJ,GAAE;CAAA,AAAA,EAAA,OAAA,IAWW,IAAA,EAAA,MAPM,KAAA,MACP,EACI,EAAM,QACN,EAAU,YACV,OAAO,KAAc,aACf,EAAU,CACF,IAFd,CAGJ,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAGe,IAAA,IAAA,KAAA,KAAA,GACL,IAAA,KAAA,KAAA,GACD,IAAA,KAAA,KAAA,GACA,IAAA,KAAA,KAAA,GAAsB;CAEtC,OAFsC,EAAA,OAAA,KAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAAA,EAAA,QAAA,KAdxC,IAAA,kBAAC,GAAD;EACe,WAAA;EAON,GAED;EACgB,sBAAA;EACL,iBAAA;EACD,gBAAA;EACA,gBAAA;EACd,sBAAA;CAAkB,CAAA,GACpB,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,KAAA,IAAA,EAAA,KAhBF;AAgBE"}
@@ -1 +1 @@
1
- {"version":3,"file":"SliderStops","names":[],"sources":["../../src/components/Input/Slider/SliderStops/core.ts","../../src/components/Input/Slider/SliderStops/sliderStops.module.css","../../src/components/Input/Slider/SliderStops/SliderStops.tsx"],"sourcesContent":["import type { SliderVariant } from \"../core\";\nimport type { CalculateStops, Stop } from \"./types\";\n\nconst DEFAULT_MAX_STOPS = 20;\n\n/**\n * React Aria style clamp.\n */\nexport const clamp = (\n value: number,\n min: number = -Infinity,\n max: number = Infinity\n): number => {\n return Math.min(Math.max(value, min), max);\n};\n\n/**\n * React Aria precision extraction.\n *\n * Handles:\n * - 0.1\n * - 0.01\n * - 1e-7\n */\nexport const getStepPrecision = (step: number): number => {\n let precision = 0;\n\n const stepString = step.toString();\n\n const exponentialIndex = stepString.toLowerCase().indexOf(\"e-\");\n\n if (exponentialIndex > 0) {\n precision =\n Math.abs(Math.floor(Math.log10(Math.abs(step)))) + exponentialIndex;\n } else {\n const pointIndex = stepString.indexOf(\".\");\n\n if (pointIndex >= 0) {\n precision = stepString.length - pointIndex;\n }\n }\n\n return precision;\n};\n\n/**\n * React Aria style precision correction.\n */\nexport const roundToStepPrecision = (value: number, step: number): number => {\n const precision = getStepPrecision(step);\n\n if (precision <= 0) {\n return value;\n }\n\n const pow = 10 ** precision;\n\n return Math.round(value * pow) / pow;\n};\n\n/**\n * React Aria snap implementation.\n */\nexport const snapValueToStep = ({\n value,\n minValue,\n maxValue,\n step,\n}: {\n value: number;\n minValue: number;\n maxValue: number;\n step: number;\n}): number => {\n const remainder = (value - minValue) % step;\n\n let snappedValue = roundToStepPrecision(\n Math.abs(remainder) * 2 >= step\n ? value + Math.sign(remainder) * (step - Math.abs(remainder))\n : value - remainder,\n step\n );\n\n if (snappedValue < minValue) {\n snappedValue = minValue;\n } else if (snappedValue > maxValue) {\n snappedValue =\n minValue +\n Math.floor(\n roundToStepPrecision((maxValue - minValue) / step, step)\n ) *\n step;\n }\n\n snappedValue = roundToStepPrecision(snappedValue, step);\n\n return snappedValue;\n};\n\n/**\n * Generates all valid slider stops using\n * the same stepping logic as React Aria.\n */\nexport const calcStops: CalculateStops = ({\n minValue,\n maxValue,\n step,\n showInBetweenSteps = true,\n maxStops = DEFAULT_MAX_STOPS,\n}) => {\n /**\n * Invalid configuration fallback.\n */\n if (step <= 0 || Number.isNaN(step) || maxValue < minValue) {\n return [];\n }\n\n const range = maxValue - minValue;\n\n /**\n * React Aria consistent last valid stop.\n *\n * Example:\n * min=0\n * max=10\n * step=3\n *\n * valid values:\n * 0 3 6 9\n */\n const lastStopValue = snapValueToStep({\n value: maxValue,\n minValue,\n maxValue,\n step,\n });\n\n const createStop = (stopValue: number): Stop => ({\n stopValue,\n percent: range === 0 ? 0 : (stopValue - minValue) / range,\n });\n\n /**\n * Reduced stop rendering mode.\n */\n if (step === 1 || !showInBetweenSteps) {\n return [createStop(minValue), createStop(lastStopValue)];\n }\n\n const stops: Stop[] = [];\n\n let value = minValue;\n\n while (value <= lastStopValue) {\n stops.push(createStop(value));\n\n const nextValue = snapValueToStep({\n value: value + step,\n minValue,\n maxValue,\n step,\n });\n\n /**\n * Prevent infinite loops caused by\n * floating precision edge cases.\n */\n if (nextValue === value) {\n break;\n }\n\n value = nextValue;\n\n /**\n * DOM safety guard.\n */\n if (stops.length > maxStops) {\n return [createStop(minValue), createStop(lastStopValue)];\n }\n }\n\n return stops;\n};\n\nconst checkInActiveRangeStandardSlider = ({\n thumbValue,\n stopValue,\n}: {\n thumbValue: number;\n stopValue: number;\n}): boolean => {\n return stopValue < thumbValue;\n};\n\nconst checkInActiveRangeRangeSlider = ({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n}: {\n firstThumbValue: number;\n secondThumbValue: number;\n stopValue: number;\n}): boolean => {\n return stopValue > firstThumbValue && stopValue < secondThumbValue;\n};\n\nconst checkInActiveRangeCenteredSlider = ({\n thumbValue,\n stopValue,\n midValue,\n}: {\n thumbValue: number;\n stopValue: number;\n midValue: number;\n}): boolean => {\n return (\n (stopValue < midValue && stopValue > thumbValue) ||\n (stopValue > midValue && stopValue < thumbValue) ||\n stopValue === midValue\n );\n};\n\nexport const checkInActiveRange = ({\n slider,\n midValue,\n firstThumbValue,\n secondThumbValue,\n stopValue,\n}: {\n slider: SliderVariant;\n midValue: number;\n firstThumbValue: number;\n secondThumbValue: number;\n stopValue: number;\n}): boolean => {\n switch (slider) {\n case \"standard\":\n return checkInActiveRangeStandardSlider({\n thumbValue: firstThumbValue,\n stopValue,\n });\n\n case \"range\":\n return checkInActiveRangeRangeSlider({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n });\n\n case \"centered\":\n return checkInActiveRangeCenteredSlider({\n thumbValue: firstThumbValue,\n midValue,\n stopValue,\n });\n }\n};\n\nexport const checkIsBelowThumb = ({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n}: {\n firstThumbValue: number;\n secondThumbValue: number;\n stopValue: number;\n}): boolean => {\n return stopValue === firstThumbValue || stopValue === secondThumbValue;\n};\n\nexport const shouldHide = ({\n slider,\n midValue,\n stopValue,\n}: {\n slider: SliderVariant;\n midValue: number;\n stopValue: number;\n}): boolean => {\n if (slider !== \"centered\") {\n return false;\n }\n\n return stopValue === midValue;\n};\n","@layer adgytec.comps {\n .stops {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n .stop {\n position: absolute;\n\n &[data-orientation=\"horizontal\"] {\n inset-block-start: 50%;\n translate: -50% -50%;\n }\n\n &[data-orientation=\"vertical\"] {\n inset-inline-start: 50%;\n translate: -50% 50%;\n }\n\n inline-size: var(--md-sys-layout-space-4);\n aspect-ratio: 1 / 1;\n\n border-radius: var(--md-sys-shape-corner-radius-full);\n background-color: var(--_md-slider-inactive-stop-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-in-active] {\n background-color: var(--_md-slider-active-stop-color);\n }\n\n &[data-hide] {\n background-color: transparent;\n }\n\n &[data-disabled] {\n background-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n\n &[data-in-active] {\n background-color: rgb(\n from var(--md-sys-color-inverse-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n\n &[data-hide] {\n background-color: transparent;\n }\n }\n\n &[data-below-thumb] {\n background-color: transparent;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { useContext, useMemo } from \"react\";\nimport { SliderStateContext } from \"react-aria-components\";\nimport {\n calcStops,\n checkInActiveRange,\n checkIsBelowThumb,\n shouldHide,\n} from \"./core\";\nimport styles from \"./sliderStops.module.css\";\nimport type { SliderStopsProps } from \"./types\";\n\nexport const SliderStops: React.FC<SliderStopsProps> = ({\n orientation,\n slider = \"standard\",\n minValue,\n maxValue,\n step,\n showInBetweenSteps,\n maxStops,\n}) => {\n const stops = useMemo(() => {\n const stops = calcStops({\n minValue,\n maxValue,\n step,\n showInBetweenSteps,\n maxStops,\n });\n if (orientation === \"vertical\") {\n stops.reverse();\n }\n\n return stops;\n }, [minValue, maxValue, step, showInBetweenSteps, orientation, maxStops]);\n\n const sliderState = useContext(SliderStateContext);\n if (!sliderState) return null;\n\n const midValue = (minValue + maxValue) / 2;\n const firstThumbValue = sliderState.getThumbValue(0);\n const secondThumbValue = sliderState.getThumbValue(1) ?? NaN;\n\n const shouldHideActive = stops.length === 2;\n\n return (\n <div\n className={clsx(styles[\"stops\"])}\n data-orientation={orientation}\n data-slider-stops\n >\n {stops.map(({ stopValue, percent }) => {\n const inActiveRange = checkInActiveRange({\n slider,\n midValue,\n firstThumbValue,\n secondThumbValue,\n stopValue,\n });\n\n const belowThumb = checkIsBelowThumb({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n });\n\n const hide = shouldHide({ slider, midValue, stopValue });\n\n const style =\n orientation === \"horizontal\"\n ? { insetInlineStart: `${percent * 100}%` }\n : { insetBlockEnd: `${percent * 100}%` };\n\n return (\n <div\n key={stopValue}\n style={style}\n data-orientation={orientation}\n className={clsx(styles[\"stop\"])}\n data-disabled={sliderState.isDisabled || undefined}\n data-below-thumb={belowThumb || undefined}\n data-stop-value={stopValue}\n data-in-active={inActiveRange || undefined}\n data-hide={\n hide ||\n (shouldHideActive && inActiveRange) ||\n undefined\n }\n data-slider-stop\n />\n );\n })}\n </div>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"SliderStops","names":["stops"],"sources":["../../src/components/Input/Slider/SliderStops/core.ts","../../src/components/Input/Slider/SliderStops/sliderStops.module.css","../../src/components/Input/Slider/SliderStops/SliderStops.tsx"],"sourcesContent":["import type { SliderVariant } from \"../core\";\nimport type { CalculateStops, Stop } from \"./types\";\n\nconst DEFAULT_MAX_STOPS = 20;\n\n/**\n * React Aria style clamp.\n */\nexport const clamp = (\n value: number,\n min: number = -Infinity,\n max: number = Infinity\n): number => {\n return Math.min(Math.max(value, min), max);\n};\n\n/**\n * React Aria precision extraction.\n *\n * Handles:\n * - 0.1\n * - 0.01\n * - 1e-7\n */\nexport const getStepPrecision = (step: number): number => {\n let precision = 0;\n\n const stepString = step.toString();\n\n const exponentialIndex = stepString.toLowerCase().indexOf(\"e-\");\n\n if (exponentialIndex > 0) {\n precision =\n Math.abs(Math.floor(Math.log10(Math.abs(step)))) + exponentialIndex;\n } else {\n const pointIndex = stepString.indexOf(\".\");\n\n if (pointIndex >= 0) {\n precision = stepString.length - pointIndex;\n }\n }\n\n return precision;\n};\n\n/**\n * React Aria style precision correction.\n */\nexport const roundToStepPrecision = (value: number, step: number): number => {\n const precision = getStepPrecision(step);\n\n if (precision <= 0) {\n return value;\n }\n\n const pow = 10 ** precision;\n\n return Math.round(value * pow) / pow;\n};\n\n/**\n * React Aria snap implementation.\n */\nexport const snapValueToStep = ({\n value,\n minValue,\n maxValue,\n step,\n}: {\n value: number;\n minValue: number;\n maxValue: number;\n step: number;\n}): number => {\n const remainder = (value - minValue) % step;\n\n let snappedValue = roundToStepPrecision(\n Math.abs(remainder) * 2 >= step\n ? value + Math.sign(remainder) * (step - Math.abs(remainder))\n : value - remainder,\n step\n );\n\n if (snappedValue < minValue) {\n snappedValue = minValue;\n } else if (snappedValue > maxValue) {\n snappedValue =\n minValue +\n Math.floor(\n roundToStepPrecision((maxValue - minValue) / step, step)\n ) *\n step;\n }\n\n snappedValue = roundToStepPrecision(snappedValue, step);\n\n return snappedValue;\n};\n\n/**\n * Generates all valid slider stops using\n * the same stepping logic as React Aria.\n */\nexport const calcStops: CalculateStops = ({\n minValue,\n maxValue,\n step,\n showInBetweenSteps = true,\n maxStops = DEFAULT_MAX_STOPS,\n}) => {\n /**\n * Invalid configuration fallback.\n */\n if (step <= 0 || Number.isNaN(step) || maxValue < minValue) {\n return [];\n }\n\n const range = maxValue - minValue;\n\n /**\n * React Aria consistent last valid stop.\n *\n * Example:\n * min=0\n * max=10\n * step=3\n *\n * valid values:\n * 0 3 6 9\n */\n const lastStopValue = snapValueToStep({\n value: maxValue,\n minValue,\n maxValue,\n step,\n });\n\n const createStop = (stopValue: number): Stop => ({\n stopValue,\n percent: range === 0 ? 0 : (stopValue - minValue) / range,\n });\n\n /**\n * Reduced stop rendering mode.\n */\n if (step === 1 || !showInBetweenSteps) {\n return [createStop(minValue), createStop(lastStopValue)];\n }\n\n const stops: Stop[] = [];\n\n let value = minValue;\n\n while (value <= lastStopValue) {\n stops.push(createStop(value));\n\n const nextValue = snapValueToStep({\n value: value + step,\n minValue,\n maxValue,\n step,\n });\n\n /**\n * Prevent infinite loops caused by\n * floating precision edge cases.\n */\n if (nextValue === value) {\n break;\n }\n\n value = nextValue;\n\n /**\n * DOM safety guard.\n */\n if (stops.length > maxStops) {\n return [createStop(minValue), createStop(lastStopValue)];\n }\n }\n\n return stops;\n};\n\nconst checkInActiveRangeStandardSlider = ({\n thumbValue,\n stopValue,\n}: {\n thumbValue: number;\n stopValue: number;\n}): boolean => {\n return stopValue < thumbValue;\n};\n\nconst checkInActiveRangeRangeSlider = ({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n}: {\n firstThumbValue: number;\n secondThumbValue: number;\n stopValue: number;\n}): boolean => {\n return stopValue > firstThumbValue && stopValue < secondThumbValue;\n};\n\nconst checkInActiveRangeCenteredSlider = ({\n thumbValue,\n stopValue,\n midValue,\n}: {\n thumbValue: number;\n stopValue: number;\n midValue: number;\n}): boolean => {\n return (\n (stopValue < midValue && stopValue > thumbValue) ||\n (stopValue > midValue && stopValue < thumbValue) ||\n stopValue === midValue\n );\n};\n\nexport const checkInActiveRange = ({\n slider,\n midValue,\n firstThumbValue,\n secondThumbValue,\n stopValue,\n}: {\n slider: SliderVariant;\n midValue: number;\n firstThumbValue: number;\n secondThumbValue: number;\n stopValue: number;\n}): boolean => {\n switch (slider) {\n case \"standard\":\n return checkInActiveRangeStandardSlider({\n thumbValue: firstThumbValue,\n stopValue,\n });\n\n case \"range\":\n return checkInActiveRangeRangeSlider({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n });\n\n case \"centered\":\n return checkInActiveRangeCenteredSlider({\n thumbValue: firstThumbValue,\n midValue,\n stopValue,\n });\n }\n};\n\nexport const checkIsBelowThumb = ({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n}: {\n firstThumbValue: number;\n secondThumbValue: number;\n stopValue: number;\n}): boolean => {\n return stopValue === firstThumbValue || stopValue === secondThumbValue;\n};\n\nexport const shouldHide = ({\n slider,\n midValue,\n stopValue,\n}: {\n slider: SliderVariant;\n midValue: number;\n stopValue: number;\n}): boolean => {\n if (slider !== \"centered\") {\n return false;\n }\n\n return stopValue === midValue;\n};\n","@layer adgytec.comps {\n .stops {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n .stop {\n position: absolute;\n\n &[data-orientation=\"horizontal\"] {\n inset-block-start: 50%;\n translate: -50% -50%;\n }\n\n &[data-orientation=\"vertical\"] {\n inset-inline-start: 50%;\n translate: -50% 50%;\n }\n\n inline-size: var(--md-sys-layout-space-4);\n aspect-ratio: 1 / 1;\n\n border-radius: var(--md-sys-shape-corner-radius-full);\n background-color: var(--_md-slider-inactive-stop-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-in-active] {\n background-color: var(--_md-slider-active-stop-color);\n }\n\n &[data-hide] {\n background-color: transparent;\n }\n\n &[data-disabled] {\n background-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n\n &[data-in-active] {\n background-color: rgb(\n from var(--md-sys-color-inverse-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n\n &[data-hide] {\n background-color: transparent;\n }\n }\n\n &[data-below-thumb] {\n background-color: transparent;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { useContext, useMemo } from \"react\";\nimport { SliderStateContext } from \"react-aria-components\";\nimport {\n calcStops,\n checkInActiveRange,\n checkIsBelowThumb,\n shouldHide,\n} from \"./core\";\nimport styles from \"./sliderStops.module.css\";\nimport type { SliderStopsProps } from \"./types\";\n\nexport const SliderStops: React.FC<SliderStopsProps> = ({\n orientation,\n slider = \"standard\",\n minValue,\n maxValue,\n step,\n showInBetweenSteps,\n maxStops,\n}) => {\n const stops = useMemo(() => {\n const stops = calcStops({\n minValue,\n maxValue,\n step,\n showInBetweenSteps,\n maxStops,\n });\n if (orientation === \"vertical\") {\n stops.reverse();\n }\n\n return stops;\n }, [minValue, maxValue, step, showInBetweenSteps, orientation, maxStops]);\n\n const sliderState = useContext(SliderStateContext);\n if (!sliderState) return null;\n\n const midValue = (minValue + maxValue) / 2;\n const firstThumbValue = sliderState.getThumbValue(0);\n const secondThumbValue = sliderState.getThumbValue(1) ?? NaN;\n\n const shouldHideActive = stops.length === 2;\n\n return (\n <div\n className={clsx(styles[\"stops\"])}\n data-orientation={orientation}\n data-slider-stops\n >\n {stops.map(({ stopValue, percent }) => {\n const inActiveRange = checkInActiveRange({\n slider,\n midValue,\n firstThumbValue,\n secondThumbValue,\n stopValue,\n });\n\n const belowThumb = checkIsBelowThumb({\n firstThumbValue,\n secondThumbValue,\n stopValue,\n });\n\n const hide = shouldHide({ slider, midValue, stopValue });\n\n const style =\n orientation === \"horizontal\"\n ? { insetInlineStart: `${percent * 100}%` }\n : { insetBlockEnd: `${percent * 100}%` };\n\n return (\n <div\n key={stopValue}\n style={style}\n data-orientation={orientation}\n className={clsx(styles[\"stop\"])}\n data-disabled={sliderState.isDisabled || undefined}\n data-below-thumb={belowThumb || undefined}\n data-stop-value={stopValue}\n data-in-active={inActiveRange || undefined}\n data-hide={\n hide ||\n (shouldHideActive && inActiveRange) ||\n undefined\n }\n data-slider-stop\n />\n );\n })}\n </div>\n );\n};\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Snackbar","names":[],"sources":["../../src/components/Snackbar/context.ts","../../src/components/Snackbar/snackbar.module.css","../../src/components/Snackbar/SnackbarRegion.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { UNSTABLE_ToastQueue as ToastQueue } from \"react-aria-components\";\nimport type { SnackbarContent } from \"./types\";\n\nexport const SnackbarQueueContext =\n createContext<ToastQueue<SnackbarContent> | null>(null);\n\nexport function useSnackbarQueue() {\n const queue = useContext(SnackbarQueueContext);\n\n if (!queue) {\n throw new Error(\"useSnackbarQueue must be used inside SnackbarRegion\");\n }\n\n return queue;\n}\n","/* configurable tokens\n*\n* --md-snackbar-background\n* --md-snackbar-color\n* --md-snackbar-action-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .snackbar-region {\n position: fixed;\n\n display: flex;\n flex-direction: column-reverse;\n gap: calc(2 * var(--dp, 1px));\n\n inset-block-end: var(--md-sys-layout-space-24);\n\n inset-inline-start: 50%;\n translate: -50%;\n }\n\n .snackbar {\n --_md-snackbar-background: var(\n --md-snackbar-background,\n var(--md-sys-color-inverse-surface)\n );\n --_md-snackbar-color: var(\n --md-snackbar-color,\n var(--md-sys-color-inverse-on-surface)\n );\n --_md-snackbar-action-color: var(\n --md-snackbar-action-color,\n var(--md-sys-color-inverse-primary)\n );\n\n inline-size: min(90svi, calc(568 * var(--dp, 1px)));\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-4);\n\n padding-block: var(--md-sys-layout-space-4);\n padding-inline: var(--md-sys-layout-space-16);\n\n box-shadow: var(--md-sys-elevation-shadow-3);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n background-color: var(--_md-snackbar-background);\n color: var(--_md-snackbar-color);\n\n &[data-close] {\n padding-inline-end: var(--md-sys-layout-space-4);\n }\n\n &[data-action] {\n padding-inline-end: var(--md-sys-layout-space-8);\n }\n\n [data-close-button] {\n --md-button-color: var(--_md-snackbar-color);\n }\n }\n\n .snackbar-content {\n inline-size: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-8);\n\n [data-button] {\n --md-button-color: var(--_md-snackbar-action-color);\n }\n }\n\n .text {\n padding-block: calc(10 * var(--dp, 1px));\n }\n}\n","import { clsx } from \"clsx\";\nimport { X } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport {\n Text,\n UNSTABLE_Toast as Toast,\n UNSTABLE_ToastContent as ToastContent,\n UNSTABLE_ToastQueue as ToastQueue,\n UNSTABLE_ToastRegion as ToastRegion,\n} from \"react-aria-components\";\nimport { flushSync } from \"react-dom\";\nimport { typography } from \"@/utils\";\nimport { IconButton } from \"../Button\";\nimport { SnackbarQueueContext } from \"./context\";\nimport styles from \"./snackbar.module.css\";\nimport type { SnackbarContent, SnackbarRegionProps } from \"./types\";\n\nexport const SnackbarRegion: React.FC<SnackbarRegionProps> = ({\n children,\n maxVisibleSnackbars = 1,\n}) => {\n const queue = useMemo(() => {\n return new ToastQueue<SnackbarContent>({\n maxVisibleToasts: maxVisibleSnackbars,\n\n wrapUpdate(fn) {\n if (\"startViewTransition\" in document) {\n document.startViewTransition(() => {\n flushSync(fn);\n });\n } else {\n fn();\n }\n },\n });\n }, [maxVisibleSnackbars]);\n\n return (\n <SnackbarQueueContext value={queue}>\n {children}\n <ToastRegion\n queue={queue}\n className={clsx(styles[\"snackbar-region\"])}\n >\n {({ toast }) => (\n <Toast\n toast={toast}\n className={clsx(styles[\"snackbar\"])}\n style={{ viewTransitionName: toast.key }}\n data-close={!toast.content.hideCloseAction || undefined}\n data-action={\n (toast.content.hideCloseAction &&\n !!toast.content.action) ||\n undefined\n }\n >\n <ToastContent className={styles[\"snackbar-content\"]}>\n <Text\n slot=\"description\"\n className={clsx(\n styles[\"text\"],\n typography.bodyMedium\n )}\n >\n {toast.content.supportingText}\n </Text>\n\n {toast.content.action}\n </ToastContent>\n\n {!toast.content.hideCloseAction && (\n <IconButton\n slot=\"close\"\n icon={X}\n color=\"standard\"\n data-close-button\n />\n )}\n </Toast>\n )}\n </ToastRegion>\n </SnackbarQueueContext>\n );\n};\n"],"mappings":";;;;;;;;;AAIA,IAAa,IACT,EAAkD,IAAI;AAE1D,SAAgB,IAAmB;CAC/B,IAAM,IAAQ,EAAW,CAAoB;CAE7C,IAAI,CAAC,GACD,MAAU,MAAM,qDAAqD;CAGzE,OAAO;AACX;;;;;;GEEa,KAAiD,EAC1D,aACA,yBAAsB,QACpB;CACF,IAAM,IAAQ,QACH,IAAI,EAA4B;EACnC,kBAAkB;EAElB,WAAW,GAAI;GACX,AAAI,yBAAyB,WACzB,SAAS,0BAA0B;IAC/B,EAAU,CAAE;GAChB,CAAC,IAED,EAAG;EAEX;CACJ,CAAC,GACF,CAAC,CAAmB,CAAC;CAExB,OACI,kBAAC,GAAD;EAAsB,OAAO;YAA7B,CACK,GACD,kBAAC,GAAD;GACW;GACP,WAAW,EAAK,EAAO,kBAAkB;cAEvC,EAAE,eACA,kBAAC,GAAD;IACW;IACP,WAAW,EAAK,EAAO,QAAW;IAClC,OAAO,EAAE,oBAAoB,EAAM,IAAI;IACvC,cAAY,CAAC,EAAM,QAAQ,mBAAmB,KAAA;IAC9C,eACK,EAAM,QAAQ,mBACX,CAAC,CAAC,EAAM,QAAQ,UACpB,KAAA;cARR,CAWI,kBAAC,GAAD;KAAc,WAAW,EAAO;eAAhC,CACI,kBAAC,GAAD;MACI,MAAK;MACL,WAAW,EACP,EAAO,MACP,EAAW,UACf;gBAEC,EAAM,QAAQ;KACb,CAAA,GAEL,EAAM,QAAQ,MACL;QAEb,CAAC,EAAM,QAAQ,mBACZ,kBAAC,GAAD;KACI,MAAK;KACL,MAAM;KACN,OAAM;KACN,qBAAA;IACH,CAAA,CAEF;;EAEF,CAAA,CACK;;AAE9B"}
1
+ {"version":3,"file":"Snackbar","names":[],"sources":["../../src/components/Snackbar/context.ts","../../src/components/Snackbar/snackbar.module.css","../../src/components/Snackbar/SnackbarRegion.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { UNSTABLE_ToastQueue as ToastQueue } from \"react-aria-components\";\nimport type { SnackbarContent } from \"./types\";\n\nexport const SnackbarQueueContext =\n createContext<ToastQueue<SnackbarContent> | null>(null);\n\nexport function useSnackbarQueue() {\n const queue = useContext(SnackbarQueueContext);\n\n if (!queue) {\n throw new Error(\"useSnackbarQueue must be used inside SnackbarRegion\");\n }\n\n return queue;\n}\n","/* configurable tokens\n*\n* --md-snackbar-background\n* --md-snackbar-color\n* --md-snackbar-action-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .snackbar-region {\n position: fixed;\n\n display: flex;\n flex-direction: column-reverse;\n gap: calc(2 * var(--dp, 1px));\n\n inset-block-end: var(--md-sys-layout-space-24);\n\n inset-inline-start: 50%;\n translate: -50%;\n }\n\n .snackbar {\n --_md-snackbar-background: var(\n --md-snackbar-background,\n var(--md-sys-color-inverse-surface)\n );\n --_md-snackbar-color: var(\n --md-snackbar-color,\n var(--md-sys-color-inverse-on-surface)\n );\n --_md-snackbar-action-color: var(\n --md-snackbar-action-color,\n var(--md-sys-color-inverse-primary)\n );\n\n inline-size: min(90svi, calc(568 * var(--dp, 1px)));\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-4);\n\n padding-block: var(--md-sys-layout-space-4);\n padding-inline: var(--md-sys-layout-space-16);\n\n box-shadow: var(--md-sys-elevation-shadow-3);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n background-color: var(--_md-snackbar-background);\n color: var(--_md-snackbar-color);\n\n &[data-close] {\n padding-inline-end: var(--md-sys-layout-space-4);\n }\n\n &[data-action] {\n padding-inline-end: var(--md-sys-layout-space-8);\n }\n\n [data-close-button] {\n --md-button-color: var(--_md-snackbar-color);\n }\n }\n\n .snackbar-content {\n inline-size: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-8);\n\n [data-button] {\n --md-button-color: var(--_md-snackbar-action-color);\n }\n }\n\n .text {\n padding-block: calc(10 * var(--dp, 1px));\n }\n}\n","import { clsx } from \"clsx\";\nimport { X } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport {\n Text,\n UNSTABLE_Toast as Toast,\n UNSTABLE_ToastContent as ToastContent,\n UNSTABLE_ToastQueue as ToastQueue,\n UNSTABLE_ToastRegion as ToastRegion,\n} from \"react-aria-components\";\nimport { flushSync } from \"react-dom\";\nimport { typography } from \"@/utils\";\nimport { IconButton } from \"../Button\";\nimport { SnackbarQueueContext } from \"./context\";\nimport styles from \"./snackbar.module.css\";\nimport type { SnackbarContent, SnackbarRegionProps } from \"./types\";\n\nexport const SnackbarRegion: React.FC<SnackbarRegionProps> = ({\n children,\n maxVisibleSnackbars = 1,\n}) => {\n const queue = useMemo(() => {\n return new ToastQueue<SnackbarContent>({\n maxVisibleToasts: maxVisibleSnackbars,\n\n wrapUpdate(fn) {\n if (\"startViewTransition\" in document) {\n document.startViewTransition(() => {\n flushSync(fn);\n });\n } else {\n fn();\n }\n },\n });\n }, [maxVisibleSnackbars]);\n\n return (\n <SnackbarQueueContext value={queue}>\n {children}\n <ToastRegion\n queue={queue}\n className={clsx(styles[\"snackbar-region\"])}\n >\n {({ toast }) => (\n <Toast\n toast={toast}\n className={clsx(styles[\"snackbar\"])}\n style={{ viewTransitionName: toast.key }}\n data-close={!toast.content.hideCloseAction || undefined}\n data-action={\n (toast.content.hideCloseAction &&\n !!toast.content.action) ||\n undefined\n }\n >\n <ToastContent className={styles[\"snackbar-content\"]}>\n <Text\n slot=\"description\"\n className={clsx(\n styles[\"text\"],\n typography.bodyMedium\n )}\n >\n {toast.content.supportingText}\n </Text>\n\n {toast.content.action}\n </ToastContent>\n\n {!toast.content.hideCloseAction && (\n <IconButton\n slot=\"close\"\n icon={X}\n color=\"standard\"\n data-close-button\n />\n )}\n </Toast>\n )}\n </ToastRegion>\n </SnackbarQueueContext>\n );\n};\n"],"mappings":";;;;;;;;;AAIA,IAAa,IACT,EAAkD,IAAI;AAE1D,SAAO,IAAA;CACH,IAAA,IAAc,EAAW,CAAoB;CAE7C,IAAI,CAAC,GACD,MAAU,MAAM,qDAAqD;CACxE,OAEM;AAAK;;;;;;GEGH,KAAiD,EAC1D,aACA,yBAAsB,QACpB;CACF,IAAM,IAAQ,QACH,IAAI,EAA4B;EACnC,kBAAkB;EAElB,WAAW,GAAI;GACX,AAAI,yBAAyB,WACzB,SAAS,0BAA0B;IAC/B,EAAU,CAAE;GAChB,CAAC,IAED,EAAG;EAEX;CACJ,CAAC,GACF,CAAC,CAAmB,CAAC;CAExB,OACI,kBAAC,GAAD;EAAsB,OAAO;YAA7B,CACK,GACD,kBAAC,GAAD;GACW;GACP,WAAW,EAAK,EAAO,kBAAkB;cAEvC,EAAE,eACA,kBAAC,GAAD;IACW;IACP,WAAW,EAAK,EAAO,QAAW;IAClC,OAAO,EAAE,oBAAoB,EAAM,IAAI;IACvC,cAAY,CAAC,EAAM,QAAQ,mBAAmB,KAAA;IAC9C,eACK,EAAM,QAAQ,mBACX,CAAC,CAAC,EAAM,QAAQ,UACpB,KAAA;cARR,CAWI,kBAAC,GAAD;KAAc,WAAW,EAAO;eAAhC,CACI,kBAAC,GAAD;MACI,MAAK;MACL,WAAW,EACP,EAAO,MACP,EAAW,UACf;gBAEC,EAAM,QAAQ;KACb,CAAA,GAEL,EAAM,QAAQ,MACL;QAEb,CAAC,EAAM,QAAQ,mBACZ,kBAAC,GAAD;KACI,MAAK;KACL,MAAM;KACN,OAAM;KACN,qBAAA;IAAiB,CAAA,CAGtB;;EAEF,CAAA,CACK;;AAE9B"}
@@ -1,44 +1,54 @@
1
- import { t as e } from "./tapTarget";
2
- import { t } from "./Icon";
3
- import { n, t as r } from "./useSplash";
4
- import { d as i, f as a, l as o, t as s, u as c } from "./core";
5
- import { i as l, n as u, r as d } from "./core2";
6
- import { useSplitButtonContext as f } from "../components/Button/SplitButton/SplitButtonContext/index.js";
7
- import { clsx as p } from "clsx";
8
- import { jsx as m, jsxs as h } from "react/jsx-runtime";
9
- import { Button as g } from "react-aria-components";
10
- import { ChevronDown as _ } from "lucide-react";
11
- import '../assets/SplitButtonTrigger.css';var v = { trigger: "_trigger_5plck_2" }, y = ({ tooltip: y, onPress: b, isDisabled: x, isPending: S, className: C, ...w }) => {
12
- let T = f(), { splashInfo: E, handlePress: D } = r(b), O = S || T.isPending;
13
- return s(/* @__PURE__ */ m(g, {
14
- onPress: D,
15
- isDisabled: x || T.isDisabled,
16
- isPending: O,
17
- className: (t) => p(a, e, u, c(T.color), typeof C == "function" ? C(t) : C),
18
- ...w,
1
+ import { t as e } from "./compiler-runtime";
2
+ import { t } from "./tapTarget";
3
+ import { t as n } from "./Icon";
4
+ import { n as r, t as i } from "./useSplash";
5
+ import { d as a, f as o, l as s, t as c, u as l } from "./core";
6
+ import { i as u, n as d, r as f } from "./core2";
7
+ import { useSplitButtonContext as p } from "../components/Button/SplitButton/SplitButtonContext/index.js";
8
+ import { clsx as m } from "clsx";
9
+ import { jsx as h, jsxs as g } from "react/jsx-runtime";
10
+ import { Button as _ } from "react-aria-components";
11
+ import { ChevronDown as v } from "lucide-react";
12
+ import '../assets/SplitButtonTrigger.css';//#region src/components/Button/SplitButton/SplitButtonTrigger/splitButtonTrigger.module.css
13
+ var y = e(), b = { trigger: "_trigger_5plck_2" }, x = (e) => {
14
+ let x = (0, y.c)(23), S, C, w, T, E, D;
15
+ x[0] === e ? (S = x[1], C = x[2], w = x[3], T = x[4], E = x[5], D = x[6]) : ({tooltip: D, onPress: T, isDisabled: C, isPending: w, className: S, ...E} = e, x[0] = e, x[1] = S, x[2] = C, x[3] = w, x[4] = T, x[5] = E, x[6] = D);
16
+ let O = p(), { splashInfo: k, handlePress: A } = i(T), j = w || O.isPending, M = C || O.isDisabled, N;
17
+ x[7] !== S || x[8] !== O.color ? (N = (e) => m(o, t, d, l(O.color), typeof S == "function" ? S(e) : S), x[7] = S, x[8] = O.color, x[9] = N) : N = x[9];
18
+ let P;
19
+ x[10] !== k || x[11] !== O.size ? (P = (e) => {
20
+ let { isDisabled: t, isFocusVisible: i, isFocused: o, isPressed: c, isHovered: l } = e, d = {
21
+ "data-hovered": l || void 0,
22
+ "data-disabled": t || void 0,
23
+ "data-focused": o || void 0,
24
+ "data-focus-visible": i || void 0,
25
+ "data-pressed": c || void 0,
26
+ "data-visual-button": !0
27
+ };
28
+ return /* @__PURE__ */ g("span", {
29
+ className: m(a, s, b.trigger, u),
30
+ ...d,
31
+ children: [k && /* @__PURE__ */ h(r, { ...k }), /* @__PURE__ */ h(n, {
32
+ icon: v,
33
+ size: f[O.size]
34
+ })]
35
+ });
36
+ }, x[10] = k, x[11] = O.size, x[12] = P) : P = x[12];
37
+ let F;
38
+ x[13] !== M || x[14] !== A || x[15] !== j || x[16] !== E || x[17] !== N || x[18] !== P ? (F = /* @__PURE__ */ h(_, {
39
+ onPress: A,
40
+ isDisabled: M,
41
+ isPending: j,
42
+ className: N,
43
+ ...E,
19
44
  "data-button": !0,
20
45
  "data-split-button-trigger": !0,
21
- children: ({ isDisabled: e, isFocusVisible: r, isFocused: a, isPressed: s, isHovered: c }) => {
22
- let u = {
23
- "data-hovered": c || void 0,
24
- "data-disabled": e || void 0,
25
- "data-focused": a || void 0,
26
- "data-focus-visible": r || void 0,
27
- "data-pressed": s || void 0,
28
- "data-visual-button": !0
29
- };
30
- return /* @__PURE__ */ h("span", {
31
- className: p(i, o, v.trigger, l),
32
- ...u,
33
- children: [E && /* @__PURE__ */ m(n, { ...E }), /* @__PURE__ */ m(t, {
34
- icon: _,
35
- size: d[T.size]
36
- })]
37
- });
38
- }
39
- }), y);
46
+ children: P
47
+ }), x[13] = M, x[14] = A, x[15] = j, x[16] = E, x[17] = N, x[18] = P, x[19] = F) : F = x[19];
48
+ let I;
49
+ return x[20] !== F || x[21] !== D ? (I = c(F, D), x[20] = F, x[21] = D, x[22] = I) : I = x[22], I;
40
50
  };
41
51
  //#endregion
42
- export { y as t };
52
+ export { x as t };
43
53
 
44
54
  //# sourceMappingURL=SplitButtonTrigger.map
@@ -1 +1 @@
1
- {"version":3,"file":"SplitButtonTrigger","names":[],"sources":["../../src/components/Button/SplitButton/SplitButtonTrigger/splitButtonTrigger.module.css","../../src/components/Button/SplitButton/SplitButtonTrigger/SplitButtonTrigger.tsx"],"sourcesContent":["@layer adgytec.comps {\n .trigger {\n --rotate: 0;\n\n &[data-pressed] {\n --rotate: 180deg;\n }\n\n > svg {\n rotate: var(--rotate);\n transition: rotate var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n }\n}\n","import { clsx } from \"clsx\";\nimport { ChevronDown } from \"lucide-react\";\nimport { Button as AriaButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport {\n ButtonCore,\n ButtonReset,\n buttonColorBase,\n buttonColorConfig,\n withTooltip,\n} from \"../../core\";\nimport {\n SplitButtonTriggerBase,\n SplitButtonTriggerIconSize,\n SplitButtonVariantBase,\n} from \"../core\";\nimport { useSplitButtonContext } from \"../SplitButtonContext\";\nimport styles from \"./splitButtonTrigger.module.css\";\nimport type { SplitButtonTriggerProps } from \"./types\";\n\nexport const SplitButtonTrigger: React.FC<SplitButtonTriggerProps> = ({\n tooltip,\n onPress,\n isDisabled,\n isPending,\n className,\n ...props\n}) => {\n const splitButtonState = useSplitButtonContext();\n\n const { splashInfo, handlePress } = useSplash(onPress);\n\n const pending = isPending || splitButtonState.isPending;\n const disabled = isDisabled || splitButtonState.isDisabled;\n\n return withTooltip(\n <AriaButton\n onPress={handlePress}\n isDisabled={disabled}\n isPending={pending}\n className={(renderProps) =>\n clsx(\n ButtonReset,\n TapTarget,\n SplitButtonTriggerBase,\n buttonColorConfig(splitButtonState.color),\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-button\n data-split-button-trigger\n >\n {({\n isDisabled,\n isFocusVisible,\n isFocused,\n isPressed,\n isHovered,\n }) => {\n const dataAttrs = {\n \"data-hovered\": isHovered || undefined,\n \"data-disabled\": isDisabled || undefined,\n \"data-focused\": isFocused || undefined,\n \"data-focus-visible\": isFocusVisible || undefined,\n \"data-pressed\": isPressed || undefined,\n \"data-visual-button\": true,\n };\n\n return (\n <span\n className={clsx(\n ButtonCore,\n buttonColorBase,\n styles[\"trigger\"],\n SplitButtonVariantBase\n )}\n {...dataAttrs}\n >\n {splashInfo && <Splash {...splashInfo} />}\n <Icon\n icon={ChevronDown}\n size={\n SplitButtonTriggerIconSize[\n splitButtonState.size\n ]\n }\n />\n </span>\n );\n }}\n </AriaButton>,\n tooltip\n );\n};\n"],"mappings":";;;;;;;;;;yCCuBa,KAAyD,EAClE,YACA,YACA,eACA,cACA,cACA,GAAG,QACD;CACF,IAAM,IAAmB,EAAsB,GAEzC,EAAE,eAAY,mBAAgB,EAAU,CAAO,GAE/C,IAAU,KAAa,EAAiB;CAG9C,OAAO,EACH,kBAAC,GAAD;EACI,SAAS;EACT,YALS,KAAc,EAAiB;EAMxC,WAAW;EACX,YAAY,MACR,EACI,GACA,GACA,GACA,EAAkB,EAAiB,KAAK,GACxC,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;EACJ,eAAA;EACA,6BAAA;aAEE,EACE,eACA,mBACA,cACA,cACA,mBACE;GACF,IAAM,IAAY;IACd,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB,KAAkB,KAAA;IACxC,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB;GAC1B;GAEA,OACI,kBAAC,QAAD;IACI,WAAW,EACP,GACA,GACA,EAAO,SACP,CACJ;IACA,GAAI;cAPR,CASK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAa,CAAA,GACxC,kBAAC,GAAD;KACI,MAAM;KACN,MACI,EACI,EAAiB;IAG5B,CAAA,CACC;;EAEd;CACQ,CAAA,GACZ,CACJ;AACJ"}
1
+ {"version":3,"file":"SplitButtonTrigger","names":["ChevronDown","handlePress","disabled","pending"],"sources":["../../src/components/Button/SplitButton/SplitButtonTrigger/splitButtonTrigger.module.css","../../src/components/Button/SplitButton/SplitButtonTrigger/SplitButtonTrigger.tsx"],"sourcesContent":["@layer adgytec.comps {\n .trigger {\n --rotate: 0;\n\n &[data-pressed] {\n --rotate: 180deg;\n }\n\n > svg {\n rotate: var(--rotate);\n transition: rotate var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n }\n}\n","import { clsx } from \"clsx\";\nimport { ChevronDown } from \"lucide-react\";\nimport { Button as AriaButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport {\n ButtonCore,\n ButtonReset,\n buttonColorBase,\n buttonColorConfig,\n withTooltip,\n} from \"../../core\";\nimport {\n SplitButtonTriggerBase,\n SplitButtonTriggerIconSize,\n SplitButtonVariantBase,\n} from \"../core\";\nimport { useSplitButtonContext } from \"../SplitButtonContext\";\nimport styles from \"./splitButtonTrigger.module.css\";\nimport type { SplitButtonTriggerProps } from \"./types\";\n\nexport const SplitButtonTrigger: React.FC<SplitButtonTriggerProps> = ({\n tooltip,\n onPress,\n isDisabled,\n isPending,\n className,\n ...props\n}) => {\n const splitButtonState = useSplitButtonContext();\n\n const { splashInfo, handlePress } = useSplash(onPress);\n\n const pending = isPending || splitButtonState.isPending;\n const disabled = isDisabled || splitButtonState.isDisabled;\n\n return withTooltip(\n <AriaButton\n onPress={handlePress}\n isDisabled={disabled}\n isPending={pending}\n className={(renderProps) =>\n clsx(\n ButtonReset,\n TapTarget,\n SplitButtonTriggerBase,\n buttonColorConfig(splitButtonState.color),\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-button\n data-split-button-trigger\n >\n {({\n isDisabled,\n isFocusVisible,\n isFocused,\n isPressed,\n isHovered,\n }) => {\n const dataAttrs = {\n \"data-hovered\": isHovered || undefined,\n \"data-disabled\": isDisabled || undefined,\n \"data-focused\": isFocused || undefined,\n \"data-focus-visible\": isFocusVisible || undefined,\n \"data-pressed\": isPressed || undefined,\n \"data-visual-button\": true,\n };\n\n return (\n <span\n className={clsx(\n ButtonCore,\n buttonColorBase,\n styles[\"trigger\"],\n SplitButtonVariantBase\n )}\n {...dataAttrs}\n >\n {splashInfo && <Splash {...splashInfo} />}\n <Icon\n icon={ChevronDown}\n size={\n SplitButtonTriggerIconSize[\n splitButtonState.size\n ]\n }\n />\n </span>\n );\n }}\n </AriaButton>,\n tooltip\n );\n};\n"],"mappings":";;;;;;;;;;;;kDCuBa,KAAwD,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,EAAA,GAAA,GAAA,GAAA,GAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAOpE,IAAA,EAAA,IAAA,IAAA,EAAA,IAAA,IAAA,EAAA,IAAA,IAAA,EAAA,IAAA,IAAA,EAAA,IAAA,IAAA,EAAA,OAPqE,uEAAA,KAAA,GAOrE,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CACG,IAAA,IAAyB,EAAsB,GAE/C,EAAA,eAAA,mBAAoC,EAAU,CAAO,GAErD,IAAgB,KAAa,EAAgB,WAC7C,IAAiB,KAAc,EAAgB,YAAY;CAAA,AAAA,EAAA,OAAA,KAAA,EAAA,OAAA,EAAA,SAOxC,KAAA,MACP,EACI,GACA,GACA,GACA,EAAkB,EAAgB,KAAM,GACxC,OAAO,KAAc,aACf,EAAU,CACF,IAFd,CAGJ,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,KAAA,IAAA,EAAA;CAAA,IAAA;CAAA,AAAA,EAAA,QAAA,KAAA,EAAA,QAAA,EAAA,QAMJ,KAAA,MAAA;EAAC,IAAA,EAAA,YAAA,GAAA,mBAAA,cAAA,cAAA,iBAAA,GAOE,IAAkB;GAAA,gBACE,KAAA,KAAA;GAAsB,iBACrB,KAAA,KAAA;GAAuB,gBACxB,KAAA,KAAA;GAAsB,sBAChB,KAAA,KAAA;GAA2B,gBACjC,KAAA,KAAA;GAAsB,sBAChB;EAC1B;EAAE,OAGE,kBAAA,QAAA;GACe,WAAA,EACP,GACA,GACA,EAAM,SACN,CACJ;GAAC,GACG;aAPR,CASK,KAAc,kBAAC,GAAD,EAAO,GAAK,EAAU,CAAA,GACrC,kBAAC,GAAD;IACUA,MAAA;IAEF,MAAA,EACI,EAAgB;GACnB,CAAA,CAGN;;CAAA,GAEd,EAAA,MAAA,GAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,KAAA,IAAA,EAAA;CAAA,IAAA;CAAA,AAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAxDL,IAAA,kBAAC,GAAD;EACaC,SAAA;EACGC,YAAA;EACDC,WAAA;EACA,WAAA;EASN,GAED;EACJ,eAAA;EACA,6BAAA;YAEC;CAnBM,CAAA,GAyDE,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,KAAA,IAAA,EAAA;CAAA,IAAA;CAEhB,OAFgB,EAAA,QAAA,KAAA,EAAA,QAAA,KA1DV,IAAA,EACH,GA0DA,CACJ,GAAC,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,KAAA,IAAA,EAAA,KA5DM;AA4DN"}
@@ -1 +1 @@
1
- {"version":3,"file":"SubmenuPopover","names":[],"sources":["../../src/components/Menu/SubmenuPopover/submenuPopover.module.css","../../src/components/Menu/SubmenuPopover/SubmenuPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n .popover {\n display: grid;\n grid-template-rows: 1fr;\n }\n}\n","import clsx from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./submenuPopover.module.css\";\n\nexport const SubmenuPopover: React.FC<\n React.ComponentPropsWithRef<typeof Popover>\n> = ({ offset = -1, className, ...props }) => {\n return (\n <Popover\n offset={offset}\n className={(renderProps) =>\n clsx(\n styles[\"popover\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;yCCIa,KAER,EAAE,YAAS,IAAI,cAAW,GAAG,QAE1B,kBAAC,GAAD;CACY;CACR,YAAY,MACR,EACI,EAAO,SACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;AACP,CAAA"}
1
+ {"version":3,"file":"SubmenuPopover","names":[],"sources":["../../src/components/Menu/SubmenuPopover/submenuPopover.module.css","../../src/components/Menu/SubmenuPopover/SubmenuPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n .popover {\n display: grid;\n grid-template-rows: 1fr;\n }\n}\n","import clsx from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./submenuPopover.module.css\";\n\nexport const SubmenuPopover: React.FC<\n React.ComponentPropsWithRef<typeof Popover>\n> = ({ offset = -1, className, ...props }) => {\n return (\n <Popover\n offset={offset}\n className={(renderProps) =>\n clsx(\n styles[\"popover\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;yCCIa,KAER,EAAE,YAAS,IAAI,cAAW,GAAG,QAE1B,kBAAC,GAAD;CACY;CACR,YAAY,MACR,EACI,EAAO,SACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;AAAM,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"Switch","names":[],"sources":["../../src/components/Input/Switch/switch.module.css","../../src/components/Input/Switch/Switch.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-switch-handle-color\n* --md-switch-selected-handle-color\n*\n* --md-switch-handle-interaction-color\n* --md-switch-selected-handle-interaction-color\n*\n* --md-switch-handle-icon-color\n* --md-switch-selected-handle-icon-color\n*\n* --md-switch-track-color\n* --md-switch-selected-track-color\n* --md-switch-track-outline-color\n*\n* --md-switch-state-layer-color\n* --md-switch-selected-state-layer-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .switch {\n /* switch tokens */\n /* handle tokens */\n --_md-switch-handle-color: var(\n --md-switch-handle-color,\n var(--md-sys-color-outline)\n );\n --_md-switch-selected-handle-color: var(\n --md-switch-selected-handle-color,\n var(--md-sys-color-on-primary)\n );\n\n /* for hovered, focused and pressed state */\n --_md-switch-handle-interaction-color: var(\n --md-switch-handle-interaction-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-switch-selected-handle-interaction-color: var(\n --md-switch-selected-handle-interaction-color,\n var(--md-sys-color-primary-container)\n );\n\n /* handle icon tokens */\n --_md-switch-handle-icon-color: var(\n --md-switch-handle-icon-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-handle-icon-color: var(\n --md-switch-selected-handle-icon-color,\n var(--md-sys-color-primary)\n );\n\n /* track tokens */\n --_md-switch-track-color: var(\n --md-switch-track-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-track-color: var(\n --md-switch-selected-track-color,\n var(--md-sys-color-primary)\n );\n --_md-switch-track-outline-color: var(\n --md-switch-track-outline-color,\n var(--md-sys-color-outline)\n );\n\n /* state layer tokens */\n --_md-switch-state-layer-color: var(\n --md-switch-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-switch-selected-state-layer-color: var(\n --md-switch-selected-state-layer-color,\n var(--_md-switch-selected-track-color)\n );\n\n /* configurable tokens end */\n\n /* handle specific tokens */\n /* size */\n --_md-switch-handle-size: calc(16 * var(--dp, 1px));\n --_md-switch-handle-with-icon-size: calc(24 * var(--dp, 1px));\n --_md-switch-selected-handle-size: calc(24 * var(--dp, 1px));\n --_md-switch-pressed-handle-size: calc(28 * var(--dp, 1px));\n\n /* shape */\n --_md-switch-handle-shape: var(--md-sys-shape-corner-radius-full);\n\n /* handle tokens end */\n\n /* track tokens */\n /* dimensions and shape */\n --_md-switch-track-block-size: calc(32 * var(--dp, 1px));\n --_md-switch-track-inline-size: calc(52 * var(--dp, 1px));\n --_md-switch-track-shape: var(--md-sys-shape-corner-radius-full);\n\n /* outline */\n --_md-switch-track-outline-thickness: calc(2 * var(--dp, 1px));\n\n /* track tokens end */\n\n /* state layer tokens */\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-switch-state-layer-color);\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n /* state layer tokens end */\n\n position: relative;\n display: inline-flex;\n\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-16);\n\n color: inherit;\n cursor: pointer;\n\n & * {\n cursor: inherit;\n }\n\n &[data-disabled] {\n color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n\n &[data-selected] {\n --_state-color: var(--_md-switch-selected-state-layer-color);\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n z-index: 1;\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n z-index: 1;\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n }\n\n .state-layer::before {\n content: \"\";\n\n position: absolute;\n inset: calc(-1 * var(--md-sys-layout-space-12));\n\n background-color: var(--_state-layer-color);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n pointer-events: none;\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .icon {\n color: var(--_icon-color);\n }\n\n .handle {\n /* derived size */\n --_handle-size: var(--_md-switch-handle-size);\n --_handle-color: var(--_md-switch-handle-color);\n --_handle-x: calc(6 * var(--dp, 1px));\n\n --_icon-color: var(--_md-switch-handle-icon-color);\n\n /* handle style */\n position: absolute;\n inset-block-start: 50%;\n translate: var(--_handle-x) -50%;\n\n inline-size: var(--_handle-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_md-switch-handle-shape);\n\n background-color: var(--_handle-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n transition:\n translate var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n inline-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n block-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-icon] {\n --_handle-size: var(--_md-switch-handle-with-icon-size);\n --_handle-x: calc(2 * var(--dp, 1px));\n }\n\n &[data-selected] {\n --_handle-color: var(--_md-switch-selected-handle-color);\n --_handle-size: var(--_md-switch-selected-handle-size);\n --_handle-x: calc(22 * var(--dp, 1px));\n --_icon-color: var(--_md-switch-selected-handle-icon-color);\n }\n\n &[data-pressed] {\n --_handle-size: var(--_md-switch-pressed-handle-size);\n --_handle-x: 0;\n\n &[data-selected] {\n --_handle-x: calc(20 * var(--dp, 1px));\n }\n }\n\n &[data-focus-visible],\n &[data-hovered],\n &[data-pressed] {\n --_handle-color: var(--_md-switch-handle-interaction-color);\n\n &[data-selected] {\n --_handle-color: var(\n --_md-switch-selected-handle-interaction-color\n );\n }\n }\n\n &[data-disabled] {\n --_icon-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-selected] {\n --_icon-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-surface) r g b /\n 1\n );\n }\n }\n }\n\n /* handle state layer */\n .handle[data-show-state-layer]::before {\n --_state-size: calc(40 * var(--dp, 1px));\n --_state-shape: var(--md-sys-shape-corner-radius-full);\n\n content: \"\";\n\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n inline-size: var(--_state-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_state-shape);\n\n background-color: var(--_state-layer-color);\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .track {\n --_track-color: var(--_md-switch-track-color);\n --_track-outline-color: var(--_md-switch-track-outline-color);\n\n position: relative;\n border-radius: var(--_md-switch-track-shape);\n\n inline-size: var(--_md-switch-track-inline-size);\n min-inline-size: var(--_md-switch-track-inline-size);\n\n block-size: var(--_md-switch-track-block-size);\n min-block-size: var(--_md-switch-track-block-size);\n\n border-width: var(--_md-switch-track-outline-thickness);\n border-style: solid;\n border-color: var(--_track-outline-color);\n\n background-color: var(--_track-color);\n\n transition:\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n border-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .track[data-disabled] {\n --_track-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_track-outline-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n\n &[data-selected] {\n --_track-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n\n .track[data-selected] {\n --_track-color: var(--_md-switch-selected-track-color);\n --_track-outline-color: transparent;\n }\n\n .track[data-focus-visible] {\n --focus-indicator-color: var(--md-sys-color-secondary);\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n }\n}\n","import clsx from \"clsx\";\nimport { Check, type LucideIcon, X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Switch as AriaSwitch } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport styles from \"./switch.module.css\";\nimport type { SwitchProps } from \"./types\";\n\nexport const Switch: React.FC<SwitchProps> = ({\n className,\n children,\n icon = \"selected\",\n labelPlacement = \"start\",\n containerStateLayer = false,\n unselectedIcon = X,\n selectedIcon = Check,\n ...props\n}) => {\n return (\n <AriaSwitch\n className={(renderProps) =>\n clsx(\n styles[\"switch\"],\n containerStateLayer && styles[\"state-layer\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-switch\n >\n {(renderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isReadOnly,\n } = renderProps;\n\n let iconValue: LucideIcon | undefined;\n if (icon !== \"none\" && isSelected) {\n iconValue = selectedIcon;\n }\n\n if (icon === \"both\" && !isSelected) {\n iconValue = unselectedIcon;\n }\n\n const dataAttrs = {\n \"data-selected\": isSelected || undefined,\n \"data-hovered\": isHovered || undefined,\n \"data-disabled\": isDisabled || undefined,\n \"data-focused\": isFocused || undefined,\n \"data-focus-visible\": isFocusVisible || undefined,\n \"data-pressed\": isPressed || undefined,\n \"data-readonly\": isReadOnly || undefined,\n \"data-icon\": iconValue ? true : undefined,\n \"data-show-state-layer\": !containerStateLayer || undefined,\n };\n\n let iconElement: ReactNode;\n if (iconValue) {\n iconElement = (\n <Icon\n icon={iconValue}\n size={16}\n className={clsx(styles[\"icon\"])}\n {...dataAttrs}\n />\n );\n }\n\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n\n return (\n <>\n {labelPlacement === \"start\" && label}\n\n <span\n {...dataAttrs}\n className={clsx(styles[\"track\"], TapTarget)}\n >\n <span\n {...dataAttrs}\n className={clsx(styles[\"handle\"])}\n >\n {iconElement}\n </span>\n </span>\n\n {labelPlacement === \"end\" && label}\n </>\n );\n }}\n </AriaSwitch>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCUa,KAAiC,EAC1C,cACA,aACA,UAAO,YACP,oBAAiB,SACjB,yBAAsB,IACtB,oBAAiB,GACjB,kBAAe,GACf,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,QACP,KAAuB,EAAO,gBAC9B,EAAW,YACX,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;CACJ,eAAA;YAEE,MAAgB;EACd,IAAM,EACF,eACA,cACA,eACA,cACA,mBACA,cACA,kBACA,GAEA;EAKJ,AAJI,MAAS,UAAU,MACnB,IAAY,IAGZ,MAAS,UAAU,CAAC,MACpB,IAAY;EAGhB,IAAM,IAAY;GACd,iBAAiB,KAAc,KAAA;GAC/B,gBAAgB,KAAa,KAAA;GAC7B,iBAAiB,KAAc,KAAA;GAC/B,gBAAgB,KAAa,KAAA;GAC7B,sBAAsB,KAAkB,KAAA;GACxC,gBAAgB,KAAa,KAAA;GAC7B,iBAAiB,KAAc,KAAA;GAC/B,aAAa,IAAY,KAAO,KAAA;GAChC,yBAAyB,CAAC,KAAuB,KAAA;EACrD,GAEI;EACJ,AAAI,MACA,IACI,kBAAC,GAAD;GACI,MAAM;GACN,MAAM;GACN,WAAW,EAAK,EAAO,IAAO;GAC9B,GAAI;EACP,CAAA;EAIT,IAAM,IACF,OAAO,KAAa,aACd,EAAS,CAAW,IACpB;EAEV,OACI,kBAAA,GAAA,EAAA,UAAA;GACK,MAAmB,WAAW;GAE/B,kBAAC,QAAD;IACI,GAAI;IACJ,WAAW,EAAK,EAAO,OAAU,CAAS;cAE1C,kBAAC,QAAD;KACI,GAAI;KACJ,WAAW,EAAK,EAAO,MAAS;eAE/B;IACC,CAAA;GACJ,CAAA;GAEL,MAAmB,SAAS;EAC/B,EAAA,CAAA;CAEV;AACQ,CAAA"}
1
+ {"version":3,"file":"Switch","names":["renderProps"],"sources":["../../src/components/Input/Switch/switch.module.css","../../src/components/Input/Switch/Switch.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-switch-handle-color\n* --md-switch-selected-handle-color\n*\n* --md-switch-handle-interaction-color\n* --md-switch-selected-handle-interaction-color\n*\n* --md-switch-handle-icon-color\n* --md-switch-selected-handle-icon-color\n*\n* --md-switch-track-color\n* --md-switch-selected-track-color\n* --md-switch-track-outline-color\n*\n* --md-switch-state-layer-color\n* --md-switch-selected-state-layer-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .switch {\n /* switch tokens */\n /* handle tokens */\n --_md-switch-handle-color: var(\n --md-switch-handle-color,\n var(--md-sys-color-outline)\n );\n --_md-switch-selected-handle-color: var(\n --md-switch-selected-handle-color,\n var(--md-sys-color-on-primary)\n );\n\n /* for hovered, focused and pressed state */\n --_md-switch-handle-interaction-color: var(\n --md-switch-handle-interaction-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-switch-selected-handle-interaction-color: var(\n --md-switch-selected-handle-interaction-color,\n var(--md-sys-color-primary-container)\n );\n\n /* handle icon tokens */\n --_md-switch-handle-icon-color: var(\n --md-switch-handle-icon-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-handle-icon-color: var(\n --md-switch-selected-handle-icon-color,\n var(--md-sys-color-primary)\n );\n\n /* track tokens */\n --_md-switch-track-color: var(\n --md-switch-track-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-track-color: var(\n --md-switch-selected-track-color,\n var(--md-sys-color-primary)\n );\n --_md-switch-track-outline-color: var(\n --md-switch-track-outline-color,\n var(--md-sys-color-outline)\n );\n\n /* state layer tokens */\n --_md-switch-state-layer-color: var(\n --md-switch-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-switch-selected-state-layer-color: var(\n --md-switch-selected-state-layer-color,\n var(--_md-switch-selected-track-color)\n );\n\n /* configurable tokens end */\n\n /* handle specific tokens */\n /* size */\n --_md-switch-handle-size: calc(16 * var(--dp, 1px));\n --_md-switch-handle-with-icon-size: calc(24 * var(--dp, 1px));\n --_md-switch-selected-handle-size: calc(24 * var(--dp, 1px));\n --_md-switch-pressed-handle-size: calc(28 * var(--dp, 1px));\n\n /* shape */\n --_md-switch-handle-shape: var(--md-sys-shape-corner-radius-full);\n\n /* handle tokens end */\n\n /* track tokens */\n /* dimensions and shape */\n --_md-switch-track-block-size: calc(32 * var(--dp, 1px));\n --_md-switch-track-inline-size: calc(52 * var(--dp, 1px));\n --_md-switch-track-shape: var(--md-sys-shape-corner-radius-full);\n\n /* outline */\n --_md-switch-track-outline-thickness: calc(2 * var(--dp, 1px));\n\n /* track tokens end */\n\n /* state layer tokens */\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-switch-state-layer-color);\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n /* state layer tokens end */\n\n position: relative;\n display: inline-flex;\n\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-16);\n\n color: inherit;\n cursor: pointer;\n\n & * {\n cursor: inherit;\n }\n\n &[data-disabled] {\n color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n\n &[data-selected] {\n --_state-color: var(--_md-switch-selected-state-layer-color);\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n z-index: 1;\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n z-index: 1;\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n }\n\n .state-layer::before {\n content: \"\";\n\n position: absolute;\n inset: calc(-1 * var(--md-sys-layout-space-12));\n\n background-color: var(--_state-layer-color);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n pointer-events: none;\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .icon {\n color: var(--_icon-color);\n }\n\n .handle {\n /* derived size */\n --_handle-size: var(--_md-switch-handle-size);\n --_handle-color: var(--_md-switch-handle-color);\n --_handle-x: calc(6 * var(--dp, 1px));\n\n --_icon-color: var(--_md-switch-handle-icon-color);\n\n /* handle style */\n position: absolute;\n inset-block-start: 50%;\n translate: var(--_handle-x) -50%;\n\n inline-size: var(--_handle-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_md-switch-handle-shape);\n\n background-color: var(--_handle-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n transition:\n translate var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n inline-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n block-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-icon] {\n --_handle-size: var(--_md-switch-handle-with-icon-size);\n --_handle-x: calc(2 * var(--dp, 1px));\n }\n\n &[data-selected] {\n --_handle-color: var(--_md-switch-selected-handle-color);\n --_handle-size: var(--_md-switch-selected-handle-size);\n --_handle-x: calc(22 * var(--dp, 1px));\n --_icon-color: var(--_md-switch-selected-handle-icon-color);\n }\n\n &[data-pressed] {\n --_handle-size: var(--_md-switch-pressed-handle-size);\n --_handle-x: 0;\n\n &[data-selected] {\n --_handle-x: calc(20 * var(--dp, 1px));\n }\n }\n\n &[data-focus-visible],\n &[data-hovered],\n &[data-pressed] {\n --_handle-color: var(--_md-switch-handle-interaction-color);\n\n &[data-selected] {\n --_handle-color: var(\n --_md-switch-selected-handle-interaction-color\n );\n }\n }\n\n &[data-disabled] {\n --_icon-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-selected] {\n --_icon-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-surface) r g b /\n 1\n );\n }\n }\n }\n\n /* handle state layer */\n .handle[data-show-state-layer]::before {\n --_state-size: calc(40 * var(--dp, 1px));\n --_state-shape: var(--md-sys-shape-corner-radius-full);\n\n content: \"\";\n\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n inline-size: var(--_state-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_state-shape);\n\n background-color: var(--_state-layer-color);\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .track {\n --_track-color: var(--_md-switch-track-color);\n --_track-outline-color: var(--_md-switch-track-outline-color);\n\n position: relative;\n border-radius: var(--_md-switch-track-shape);\n\n inline-size: var(--_md-switch-track-inline-size);\n min-inline-size: var(--_md-switch-track-inline-size);\n\n block-size: var(--_md-switch-track-block-size);\n min-block-size: var(--_md-switch-track-block-size);\n\n border-width: var(--_md-switch-track-outline-thickness);\n border-style: solid;\n border-color: var(--_track-outline-color);\n\n background-color: var(--_track-color);\n\n transition:\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n border-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .track[data-disabled] {\n --_track-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_track-outline-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n\n &[data-selected] {\n --_track-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n\n .track[data-selected] {\n --_track-color: var(--_md-switch-selected-track-color);\n --_track-outline-color: transparent;\n }\n\n .track[data-focus-visible] {\n --focus-indicator-color: var(--md-sys-color-secondary);\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n }\n}\n","import clsx from \"clsx\";\nimport { Check, type LucideIcon, X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Switch as AriaSwitch } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport styles from \"./switch.module.css\";\nimport type { SwitchProps } from \"./types\";\n\nexport const Switch: React.FC<SwitchProps> = ({\n className,\n children,\n icon = \"selected\",\n labelPlacement = \"start\",\n containerStateLayer = false,\n unselectedIcon = X,\n selectedIcon = Check,\n ...props\n}) => {\n return (\n <AriaSwitch\n className={(renderProps) =>\n clsx(\n styles[\"switch\"],\n containerStateLayer && styles[\"state-layer\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-switch\n >\n {(renderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isReadOnly,\n } = renderProps;\n\n let iconValue: LucideIcon | undefined;\n if (icon !== \"none\" && isSelected) {\n iconValue = selectedIcon;\n }\n\n if (icon === \"both\" && !isSelected) {\n iconValue = unselectedIcon;\n }\n\n const dataAttrs = {\n \"data-selected\": isSelected || undefined,\n \"data-hovered\": isHovered || undefined,\n \"data-disabled\": isDisabled || undefined,\n \"data-focused\": isFocused || undefined,\n \"data-focus-visible\": isFocusVisible || undefined,\n \"data-pressed\": isPressed || undefined,\n \"data-readonly\": isReadOnly || undefined,\n \"data-icon\": iconValue ? true : undefined,\n \"data-show-state-layer\": !containerStateLayer || undefined,\n };\n\n let iconElement: ReactNode;\n if (iconValue) {\n iconElement = (\n <Icon\n icon={iconValue}\n size={16}\n className={clsx(styles[\"icon\"])}\n {...dataAttrs}\n />\n );\n }\n\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n\n return (\n <>\n {labelPlacement === \"start\" && label}\n\n <span\n {...dataAttrs}\n className={clsx(styles[\"track\"], TapTarget)}\n >\n <span\n {...dataAttrs}\n className={clsx(styles[\"handle\"])}\n >\n {iconElement}\n </span>\n </span>\n\n {labelPlacement === \"end\" && label}\n </>\n );\n }}\n </AriaSwitch>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCUa,KAAiC,EAC1C,cACA,aACA,UAAO,YACP,oBAAiB,SACjB,yBAAsB,IACtB,oBAAiB,GACjB,kBAAe,GACf,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,QACP,KAAuB,EAAO,gBAC9B,EAAW,YACX,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;CACJ,eAAA;YAEEA,MAAgB;EACd,IAAM,EACF,eACA,cACA,eACA,cACA,mBACA,cACA,kBACAA,GAEA;EAKJ,AAJI,MAAS,UAAU,MACnB,IAAY,IAGZ,MAAS,UAAU,CAAC,MACpB,IAAY;EAGhB,IAAM,IAAY;GACd,iBAAiB,KAAc,KAAA;GAC/B,gBAAgB,KAAa,KAAA;GAC7B,iBAAiB,KAAc,KAAA;GAC/B,gBAAgB,KAAa,KAAA;GAC7B,sBAAsB,KAAkB,KAAA;GACxC,gBAAgB,KAAa,KAAA;GAC7B,iBAAiB,KAAc,KAAA;GAC/B,aAAa,IAAY,KAAO,KAAA;GAChC,yBAAyB,CAAC,KAAuB,KAAA;EACrD,GAEI;EACJ,AAAI,MACA,IACI,kBAAC,GAAD;GACI,MAAM;GACN,MAAM;GACN,WAAW,EAAK,EAAO,IAAO;GAC9B,GAAI;EAAU,CAAA;EAK1B,IAAM,IACF,OAAO,KAAa,aACd,EAASA,CAAW,IACpB;EAEV,OACI,kBAAA,GAAA,EAAA,UAAA;GACK,MAAmB,WAAW;GAE/B,kBAAC,QAAD;IACI,GAAI;IACJ,WAAW,EAAK,EAAO,OAAU,CAAS;cAE1C,kBAAC,QAAD;KACI,GAAI;KACJ,WAAW,EAAK,EAAO,MAAS;eAE/B;IACC,CAAA;GACJ,CAAA;GAEL,MAAmB,SAAS;EACjC,EAAA,CAAA;CAER;AACQ,CAAA"}
package/dist/chunks/Tab CHANGED
@@ -1,39 +1,51 @@
1
- import { t as e } from "./base";
2
- import { t } from "./Icon";
3
- import { n, t as r } from "./useSplash";
4
- import i from "clsx";
5
- import { jsx as a, jsxs as o } from "react/jsx-runtime";
6
- import { SelectionIndicator as s, Tab as c } from "react-aria-components";
7
- import '../assets/Tab.css';var l = {
1
+ import { t as e } from "./compiler-runtime";
2
+ import { t } from "./base";
3
+ import { t as n } from "./Icon";
4
+ import { n as r, t as i } from "./useSplash";
5
+ import a from "clsx";
6
+ import { jsx as o, jsxs as s } from "react/jsx-runtime";
7
+ import { SelectionIndicator as c, Tab as l } from "react-aria-components";
8
+ import '../assets/Tab.css';//#region src/components/Tabs/Tab/tab.module.css
9
+ var u = e(), d = {
8
10
  tab: "_tab_1lw7s_2",
9
11
  "selection-indicator": "_selection-indicator_1lw7s_117",
10
12
  splash: "_splash_1lw7s_130"
11
- }, u = ({ className: u, label: d, icon: f, onPress: p, ...m }) => {
12
- let { splashInfo: h, handlePress: g } = r(p);
13
- return /* @__PURE__ */ o(c, {
14
- onPress: g,
15
- className: (t) => i(l.tab, e.titleSmall, typeof u == "function" ? u(t) : u),
16
- ...m,
17
- "data-icon": f ? !0 : void 0,
13
+ }, f = (e) => {
14
+ let f = (0, u.c)(21), p, m, h, g, _;
15
+ f[0] === e ? (p = f[1], m = f[2], h = f[3], g = f[4], _ = f[5]) : ({className: p, label: h, icon: m, onPress: g, ..._} = e, f[0] = e, f[1] = p, f[2] = m, f[3] = h, f[4] = g, f[5] = _);
16
+ let { splashInfo: v, handlePress: y } = i(g), b;
17
+ f[6] === p ? b = f[7] : (b = (e) => a(d.tab, t.titleSmall, typeof p == "function" ? p(e) : p), f[6] = p, f[7] = b);
18
+ let x = m ? !0 : void 0, S;
19
+ f[8] === v ? S = f[9] : (S = v && /* @__PURE__ */ o("span", {
20
+ className: a(d.splash),
21
+ children: /* @__PURE__ */ o(r, { ...v })
22
+ }), f[8] = v, f[9] = S);
23
+ let C;
24
+ f[10] === m ? C = f[11] : (C = m && /* @__PURE__ */ o(n, {
25
+ icon: m,
26
+ size: 24
27
+ }), f[10] = m, f[11] = C);
28
+ let w;
29
+ f[12] === Symbol.for("react.memo_cache_sentinel") ? (w = /* @__PURE__ */ o(c, {
30
+ className: a(d["selection-indicator"]),
31
+ "data-selection-indicator": !0
32
+ }), f[12] = w) : w = f[12];
33
+ let T;
34
+ return f[13] !== y || f[14] !== h || f[15] !== _ || f[16] !== b || f[17] !== x || f[18] !== S || f[19] !== C ? (T = /* @__PURE__ */ s(l, {
35
+ onPress: y,
36
+ className: b,
37
+ ..._,
38
+ "data-icon": x,
18
39
  "data-tab": !0,
19
40
  children: [
20
- h && /* @__PURE__ */ a("span", {
21
- className: i(l.splash),
22
- children: /* @__PURE__ */ a(n, { ...h })
23
- }),
24
- f && /* @__PURE__ */ a(t, {
25
- icon: f,
26
- size: 24
27
- }),
28
- d,
29
- /* @__PURE__ */ a(s, {
30
- className: i(l["selection-indicator"]),
31
- "data-selection-indicator": !0
32
- })
41
+ S,
42
+ C,
43
+ h,
44
+ w
33
45
  ]
34
- });
46
+ }), f[13] = y, f[14] = h, f[15] = _, f[16] = b, f[17] = x, f[18] = S, f[19] = C, f[20] = T) : T = f[20], T;
35
47
  };
36
48
  //#endregion
37
- export { u as t };
49
+ export { f as t };
38
50
 
39
51
  //# sourceMappingURL=Tab.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tab","names":[],"sources":["../../src/components/Tabs/Tab/tab.module.css","../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["@layer adgytec.comps {\n .tab {\n --_state-color: var(--md-sys-color-on-surface);\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n --_color: var(--_md-tabs-color);\n\n --_focus-inset-inline-start: var(--md-sys-layout-space-4);\n --_focus-inset-inline-end: var(--md-sys-layout-space-4);\n --_focus-inset-block-start: var(--md-sys-layout-space-4);\n --_focus-inset-block-end: var(--md-sys-layout-space-4);\n\n position: relative;\n outline: none;\n\n padding-block: calc(14 * var(--dp, 1px));\n padding-inline: var(--md-sys-layout-space-16);\n\n white-space: nowrap;\n\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-8);\n\n color: var(--_color);\n\n cursor: pointer;\n\n transition: color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-icon] {\n padding-block: var(--md-sys-layout-space-12);\n }\n\n &[data-selected] {\n --_color: var(--_md-tabs-active-color);\n\n --_focus-inset-inline-end: var(--_focus-inset-inline-end-active);\n --_focus-inset-block-end: var(--_focus-inset-block-end-active);\n }\n\n &[data-hovered] {\n --_color: var(--_md-tabs-active-color);\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n\n &[data-disabled] {\n cursor: default;\n\n --_color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n --_md-tabs-active-indicator-color: var(--_color);\n }\n }\n\n /* state layer */\n .tab::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n /* focus indicator */\n .tab[data-focus-visible]::after {\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n content: \"\";\n position: absolute;\n\n inset-inline-start: var(--_focus-inset-inline-start);\n inset-inline-end: var(--_focus-inset-inline-end);\n inset-block-start: var(--_focus-inset-block-start);\n inset-block-end: var(--_focus-inset-block-end);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-color: var(--focus-indicator-color);\n\n border-radius: var(--md-sys-shape-corner-radius-small);\n\n z-index: 1;\n }\n\n .selection-indicator {\n position: absolute;\n\n transition-timing-function: var(--md-sys-motion-standard-fast-spatial);\n transition-duration: var(\n --md-sys-motion-standard-fast-spatial-duration\n );\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .splash {\n position: absolute;\n inset: 0;\n overflow: clip;\n }\n}\n","import clsx from \"clsx\";\nimport type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Tab as AriaTab, SelectionIndicator } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { typography } from \"@/utils\";\nimport styles from \"./tab.module.css\";\n\nexport const Tab: React.FC<\n Omit<React.ComponentPropsWithRef<typeof AriaTab>, \"children\"> & {\n label?: ReactNode;\n icon?: LucideIcon;\n }\n> = ({ className, label, icon, onPress, ...props }) => {\n const { splashInfo, handlePress } = useSplash(onPress);\n\n return (\n <AriaTab\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n styles[\"tab\"],\n typography.titleSmall,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-icon={icon ? true : undefined}\n data-tab={true}\n >\n {splashInfo && (\n <span className={clsx(styles[\"splash\"])}>\n <Splash {...splashInfo} />\n </span>\n )}\n {icon && <Icon icon={icon} size={24} />}\n {label}\n <SelectionIndicator\n className={clsx(styles[\"selection-indicator\"])}\n data-selection-indicator={true}\n />\n </AriaTab>\n );\n};\n"],"mappings":";;;;;;;;;;GCUa,KAKR,EAAE,cAAW,UAAO,SAAM,YAAS,GAAG,QAAY;CACnD,IAAM,EAAE,eAAY,mBAAgB,EAAU,CAAO;CAErD,OACI,kBAAC,GAAD;EACI,SAAS;EACT,YAAY,MACR,EACI,EAAO,KACP,EAAW,YACX,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;EACJ,aAAW,IAAO,KAAO,KAAA;EACzB,YAAU;YAbd;GAeK,KACG,kBAAC,QAAD;IAAM,WAAW,EAAK,EAAO,MAAS;cAClC,kBAAC,GAAD,EAAQ,GAAI,EAAa,CAAA;GACvB,CAAA;GAET,KAAQ,kBAAC,GAAD;IAAY;IAAM,MAAM;GAAK,CAAA;GACrC;GACD,kBAAC,GAAD;IACI,WAAW,EAAK,EAAO,sBAAsB;IAC7C,4BAA0B;GAC7B,CAAA;EACI;;AAEjB"}
1
+ {"version":3,"file":"Tab","names":["icon","handlePress","label"],"sources":["../../src/components/Tabs/Tab/tab.module.css","../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["@layer adgytec.comps {\n .tab {\n --_state-color: var(--md-sys-color-on-surface);\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n --_color: var(--_md-tabs-color);\n\n --_focus-inset-inline-start: var(--md-sys-layout-space-4);\n --_focus-inset-inline-end: var(--md-sys-layout-space-4);\n --_focus-inset-block-start: var(--md-sys-layout-space-4);\n --_focus-inset-block-end: var(--md-sys-layout-space-4);\n\n position: relative;\n outline: none;\n\n padding-block: calc(14 * var(--dp, 1px));\n padding-inline: var(--md-sys-layout-space-16);\n\n white-space: nowrap;\n\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-8);\n\n color: var(--_color);\n\n cursor: pointer;\n\n transition: color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-icon] {\n padding-block: var(--md-sys-layout-space-12);\n }\n\n &[data-selected] {\n --_color: var(--_md-tabs-active-color);\n\n --_focus-inset-inline-end: var(--_focus-inset-inline-end-active);\n --_focus-inset-block-end: var(--_focus-inset-block-end-active);\n }\n\n &[data-hovered] {\n --_color: var(--_md-tabs-active-color);\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n\n &[data-disabled] {\n cursor: default;\n\n --_color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n --_md-tabs-active-indicator-color: var(--_color);\n }\n }\n\n /* state layer */\n .tab::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n /* focus indicator */\n .tab[data-focus-visible]::after {\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n content: \"\";\n position: absolute;\n\n inset-inline-start: var(--_focus-inset-inline-start);\n inset-inline-end: var(--_focus-inset-inline-end);\n inset-block-start: var(--_focus-inset-block-start);\n inset-block-end: var(--_focus-inset-block-end);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-color: var(--focus-indicator-color);\n\n border-radius: var(--md-sys-shape-corner-radius-small);\n\n z-index: 1;\n }\n\n .selection-indicator {\n position: absolute;\n\n transition-timing-function: var(--md-sys-motion-standard-fast-spatial);\n transition-duration: var(\n --md-sys-motion-standard-fast-spatial-duration\n );\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .splash {\n position: absolute;\n inset: 0;\n overflow: clip;\n }\n}\n","import clsx from \"clsx\";\nimport type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Tab as AriaTab, SelectionIndicator } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { typography } from \"@/utils\";\nimport styles from \"./tab.module.css\";\n\nexport const Tab: React.FC<\n Omit<React.ComponentPropsWithRef<typeof AriaTab>, \"children\"> & {\n label?: ReactNode;\n icon?: LucideIcon;\n }\n> = ({ className, label, icon, onPress, ...props }) => {\n const { splashInfo, handlePress } = useSplash(onPress);\n\n return (\n <AriaTab\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n styles[\"tab\"],\n typography.titleSmall,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-icon={icon ? true : undefined}\n data-tab={true}\n >\n {splashInfo && (\n <span className={clsx(styles[\"splash\"])}>\n <Splash {...splashInfo} />\n </span>\n )}\n {icon && <Icon icon={icon} size={24} />}\n {label}\n <SelectionIndicator\n className={clsx(styles[\"selection-indicator\"])}\n data-selection-indicator={true}\n />\n </AriaTab>\n );\n};\n"],"mappings":";;;;;;;;;;;;GCUa,KAKT,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,EAAA,GAAA,GAAA,GAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAA8C,IAAA,EAAA,IAAA,IAAA,EAAA,IAAA,IAAA,EAAA,IAAA,IAAA,EAAA,IAAA,IAAA,EAAA,OAA7C,iDAAA,KAAA,GAA6C,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAC9C,IAAA,EAAA,eAAA,mBAAoC,EAAU,CAAO,GAAE;CAAA,AAAA,EAAA,OAAA,IAY1C,IAAA,EAAA,MAPM,KAAA,MACP,EACI,EAAM,KACN,EAAU,YACV,OAAO,KAAc,aACf,EAAU,CACF,IAFd,CAGJ,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAGM,IAAA,IAAA,IAAA,KAAA,KAAA,GAAuB;CAAA,AAAA,EAAA,OAAA,IAOjC,IAAA,EAAA,MAJA,IAAA,KACG,kBAAA,QAAA;EAAiB,WAAA,EAAK,EAAM,MAAU;YAClC,kBAAC,GAAD,EAAO,GAAK,EAAU,CAAA;CACnB,CAAA,GACV,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,QAAA,IACsC,IAAA,EAAA,OAAtC,IAAA,KAAQ,kBAAC,GAAD;EAAY;EAAY,MAAA;CAAE,CAAA,GAAI,EAAA,MAAA,GAAA,EAAA,MAAA;CAAA,IAAA;CAAA,AAAA,EAAA,QAAA,OAAA,IAAA,2BAAA,KAEvC,IAAA,kBAAC,GAAD;EACe,WAAA,EAAK,EAAO,sBAAsB;EACnB,4BAAA;CAAI,CAAA,GAChC,EAAA,MAAA,KAAA,IAAA,EAAA;CAAA,IAAA;CACI,OADJ,EAAA,QAAA,KAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAzBN,IAAA,kBAAC,GAAD;EACaC,SAAA;EACE,WAAA;EAON,GAED;EACO,aAAA;EACD,YAAA;YAbd;GAeK;GAKA;GACA;GACD;EAtBI;KA0BE,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,KAAA,IAAA,EAAA,KA1BV;AA0BU"}
@@ -1,12 +1,20 @@
1
- import e from "clsx";
2
- import { jsx as t } from "react/jsx-runtime";
3
- import { TabList as n } from "react-aria-components";
1
+ import { t as e } from "./compiler-runtime";
2
+ import t from "clsx";
3
+ import { jsx as n } from "react/jsx-runtime";
4
+ import { TabList as r } from "react-aria-components";
4
5
  import '../assets/TabList.css';//#region src/components/Tabs/TabList/tabList.module.css
5
- var r = { "tab-list": "_tab-list_8hi4u_12" }, i = ({ className: i, ...a }) => /* @__PURE__ */ t(n, {
6
- className: (t) => e(r["tab-list"], typeof i == "function" ? i(t) : i),
7
- ...a
8
- });
6
+ var i = e(), a = { "tab-list": "_tab-list_8hi4u_12" }, o = (e) => {
7
+ let o = (0, i.c)(8), s, c;
8
+ o[0] === e ? (s = o[1], c = o[2]) : ({className: s, ...c} = e, o[0] = e, o[1] = s, o[2] = c);
9
+ let l;
10
+ o[3] === s ? l = o[4] : (l = (e) => t(a["tab-list"], typeof s == "function" ? s(e) : s), o[3] = s, o[4] = l);
11
+ let u;
12
+ return o[5] !== c || o[6] !== l ? (u = /* @__PURE__ */ n(r, {
13
+ className: l,
14
+ ...c
15
+ }), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
16
+ };
9
17
  //#endregion
10
- export { i as t };
18
+ export { o as t };
11
19
 
12
20
  //# sourceMappingURL=TabList.map