@lobehub/ui 5.23.5 → 5.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (299) hide show
  1. package/es/Accordion/Accordion.mjs.map +1 -1
  2. package/es/Accordion/AccordionItem.mjs.map +1 -1
  3. package/es/Accordion/ArrowIcon.mjs.map +1 -1
  4. package/es/ActionIcon/ActionIcon.mjs.map +1 -1
  5. package/es/ActionIconGroup/ActionIconGroup.mjs.map +1 -1
  6. package/es/Alert/Alert.mjs.map +1 -1
  7. package/es/Avatar/Avatar.mjs.map +1 -1
  8. package/es/Avatar/AvatarGroup/index.mjs.map +1 -1
  9. package/es/Burger/Burger.mjs.map +1 -1
  10. package/es/Checkbox/Checkbox.mjs.map +1 -1
  11. package/es/Checkbox/CheckboxGroup.mjs.map +1 -1
  12. package/es/CodeDiff/DiffPanel.mjs.map +1 -1
  13. package/es/CodeEditor/CodeEditor.mjs.map +1 -1
  14. package/es/Collapse/Collapse.mjs.map +1 -1
  15. package/es/ColorSwatches/ColorSwatches.mjs.map +1 -1
  16. package/es/ConfigProvider/index.mjs.map +1 -1
  17. package/es/ContextMenu/index.d.mts +2 -2
  18. package/es/ContextMenu/index.mjs +2 -2
  19. package/es/DraggablePanel/DraggablePanel.mjs.map +1 -1
  20. package/es/DraggablePanel/components/DraggablePanelHeader.mjs.map +1 -1
  21. package/es/DraggableSideNav/DraggableSideNav.mjs.map +1 -1
  22. package/es/Drawer/Drawer.mjs.map +1 -1
  23. package/es/Dropdown/Dropdown.mjs.map +1 -1
  24. package/es/EditableText/ControlInput.mjs.map +1 -1
  25. package/es/EditableText/EditableText.mjs.map +1 -1
  26. package/es/EditorSlashMenu/EditorSlashMenu.mjs.map +1 -1
  27. package/es/EditorSlashMenu/MenuItemRenderer.mjs.map +1 -1
  28. package/es/EmojiPicker/AvatarUploader.mjs.map +1 -1
  29. package/es/EmojiPicker/EmojiPicker.mjs.map +1 -1
  30. package/es/Empty/Empty.mjs.map +1 -1
  31. package/es/FileTypeIcon/FileTypeIcon.mjs.map +1 -1
  32. package/es/FileTypeIcon/components/FileIcon.mjs.map +1 -1
  33. package/es/FileTypeIcon/components/FolderIcon.mjs.map +1 -1
  34. package/es/FluentEmoji/FluentEmoji.mjs.map +1 -1
  35. package/es/Footer/Footer.mjs.map +1 -1
  36. package/es/Form/Form.mjs.map +1 -1
  37. package/es/Form/components/FormGroup.mjs.map +1 -1
  38. package/es/Form/components/FormSubmitFooter.mjs.map +1 -1
  39. package/es/Form/components/FormTitle.mjs.map +1 -1
  40. package/es/FormModal/FormModal.mjs.map +1 -1
  41. package/es/Freeze/Freeze.mjs.map +1 -1
  42. package/es/GroupAvatar/GroupAvatar.mjs.map +1 -1
  43. package/es/GuideCard/GuideCard.mjs.map +1 -1
  44. package/es/Header/Header.mjs.map +1 -1
  45. package/es/Highlighter/FullFeatured.mjs.map +1 -1
  46. package/es/Highlighter/Highlighter.mjs.map +1 -1
  47. package/es/Highlighter/LangSelect.mjs.map +1 -1
  48. package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs.map +1 -1
  49. package/es/Highlighter/SyntaxHighlighter/style.mjs +2 -2
  50. package/es/Highlighter/SyntaxHighlighter/style.mjs.map +1 -1
  51. package/es/Hotkey/Hotkey.mjs.map +1 -1
  52. package/es/HotkeyInput/HotkeyInput.mjs.map +1 -1
  53. package/es/HtmlPreview/HtmlPreview.mjs.map +1 -1
  54. package/es/HtmlPreview/Iframe.mjs.map +1 -1
  55. package/es/Icon/Icon.mjs.map +1 -1
  56. package/es/Image/Image.mjs.map +1 -1
  57. package/es/Image/components/Toolbar.mjs.map +1 -1
  58. package/es/Image/components/usePreview.mjs.map +1 -1
  59. package/es/Image/components/usePreviewGroup.mjs.map +1 -1
  60. package/es/ImageSelect/ImageSelect.mjs.map +1 -1
  61. package/es/Layout/Layout.mjs.map +1 -1
  62. package/es/List/List.mjs.map +1 -1
  63. package/es/List/ListItem/index.mjs.map +1 -1
  64. package/es/Markdown/Markdown.mjs.map +1 -1
  65. package/es/Markdown/SyntaxMarkdown/MarkdownRender.mjs.map +1 -1
  66. package/es/Markdown/SyntaxMarkdown/StreamdownRender.mjs.map +1 -1
  67. package/es/Markdown/SyntaxMarkdown/style.mjs.map +1 -1
  68. package/es/Markdown/components/CodeBlock.mjs.map +1 -1
  69. package/es/Markdown/components/Footnotes.mjs.map +1 -1
  70. package/es/Markdown/components/MarkdownTable/index.mjs.map +1 -1
  71. package/es/Markdown/components/SearchResultCards/SearchResultCard.mjs.map +1 -1
  72. package/es/Markdown/components/SearchResultCards/index.mjs.map +1 -1
  73. package/es/MaterialFileTypeIcon/MaterialFileTypeIcon.mjs.map +1 -1
  74. package/es/Menu/Menu.mjs.map +1 -1
  75. package/es/Mermaid/FullFeatured.mjs.map +1 -1
  76. package/es/Mermaid/Mermaid.mjs.map +1 -1
  77. package/es/Mermaid/SyntaxMermaid/MermaidFallback.mjs +35 -0
  78. package/es/Mermaid/SyntaxMermaid/MermaidFallback.mjs.map +1 -0
  79. package/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs +52 -0
  80. package/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs.map +1 -0
  81. package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs +13 -42
  82. package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs.map +1 -1
  83. package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs +13 -43
  84. package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs.map +1 -1
  85. package/es/Mermaid/SyntaxMermaid/prepareInlineSvg.mjs +52 -0
  86. package/es/Mermaid/SyntaxMermaid/prepareInlineSvg.mjs.map +1 -0
  87. package/es/Mermaid/SyntaxMermaid/prepareMermaidSvg.mjs +20 -0
  88. package/es/Mermaid/SyntaxMermaid/prepareMermaidSvg.mjs.map +1 -0
  89. package/es/Mermaid/SyntaxMermaid/style.mjs +11 -0
  90. package/es/Mermaid/SyntaxMermaid/style.mjs.map +1 -1
  91. package/es/Mermaid/const.mjs +10 -31
  92. package/es/Mermaid/const.mjs.map +1 -1
  93. package/es/Mermaid/index.d.mts +2 -1
  94. package/es/Mermaid/index.mjs +2 -1
  95. package/es/Mermaid/type.d.mts +2 -2
  96. package/es/Modal/Modal.mjs.map +1 -1
  97. package/es/Modal/ModalStackItem.mjs.map +1 -1
  98. package/es/Modal/RawModalStackItem.mjs.map +1 -1
  99. package/es/Modal/imperative.mjs.map +1 -1
  100. package/es/Modal/style.mjs.map +1 -1
  101. package/es/NeuralNetworkLoading/NeuralNetworkLoading.mjs.map +1 -1
  102. package/es/ScrollShadow/ScrollShadow.mjs.map +1 -1
  103. package/es/SearchBar/SearchBar.mjs.map +1 -1
  104. package/es/SideNav/SideNav.mjs.map +1 -1
  105. package/es/Skeleton/Skeleton.mjs.map +1 -1
  106. package/es/Skeleton/SkeletonParagraph.mjs.map +1 -1
  107. package/es/Skeleton/SkeletonTags.mjs.map +1 -1
  108. package/es/SliderWithInput/SliderWithInput.mjs.map +1 -1
  109. package/es/Snippet/Snippet.mjs.map +1 -1
  110. package/es/SortableList/SortableList.mjs.map +1 -1
  111. package/es/SortableList/components/SortableItem.mjs.map +1 -1
  112. package/es/Text/Text.mjs.map +1 -1
  113. package/es/ThemeProvider/ThemeProvider.mjs +1 -1
  114. package/es/ThemeProvider/ThemeProvider.mjs.map +1 -1
  115. package/es/ThemeSwitch/ThemeSwitch.mjs.map +1 -1
  116. package/es/Toc/Toc.mjs.map +1 -1
  117. package/es/Toc/TocMobile.mjs.map +1 -1
  118. package/es/Video/index.mjs.map +1 -1
  119. package/es/awesome/AuroraBackground/AuroraBackground.mjs.map +1 -1
  120. package/es/awesome/Features/FeatureItem.mjs.map +1 -1
  121. package/es/awesome/Giscus/Giscus.mjs.map +1 -1
  122. package/es/awesome/GradientButton/GradientButton.mjs.map +1 -1
  123. package/es/awesome/GridBackground/GridBackground.mjs.map +1 -1
  124. package/es/awesome/GridBackground/GridShowcase.mjs.map +1 -1
  125. package/es/awesome/GridBackground/components/Grid.mjs.map +1 -1
  126. package/es/awesome/Hero/Hero.mjs.map +1 -1
  127. package/es/awesome/Spline/ParentSize.mjs.map +1 -1
  128. package/es/awesome/Spline/Spine.mjs.map +1 -1
  129. package/es/awesome/SpotlightCard/SpotlightCard.mjs.map +1 -1
  130. package/es/awesome/SpotlightCard/SpotlightCardItem.mjs.map +1 -1
  131. package/es/awesome/TypewriterEffect/TypewriterEffect.mjs.map +1 -1
  132. package/es/base-ui/AutoComplete/AutoComplete.mjs.map +1 -1
  133. package/es/base-ui/Button/Button.mjs.map +1 -1
  134. package/es/base-ui/Button/SplitButton.mjs.map +1 -1
  135. package/es/base-ui/Checkbox/Checkbox.mjs.map +1 -1
  136. package/es/base-ui/Checkbox/CheckboxGroup.mjs.map +1 -1
  137. package/es/base-ui/ContextMenu/ContextMenuHost.mjs.map +1 -1
  138. package/es/base-ui/ContextMenu/imperative.d.mts +2 -2
  139. package/es/base-ui/ContextMenu/index.d.mts +2 -2
  140. package/es/base-ui/ContextMenu/renderItems.mjs.map +1 -1
  141. package/es/base-ui/ContextMenu/store.d.mts +13 -1
  142. package/es/base-ui/ContextMenu/store.mjs +29 -4
  143. package/es/base-ui/ContextMenu/store.mjs.map +1 -1
  144. package/es/base-ui/DropdownMenu/DropdownMenu.mjs.map +1 -1
  145. package/es/base-ui/DropdownMenu/atoms.mjs.map +1 -1
  146. package/es/base-ui/DropdownMenu/renderItems.mjs.map +1 -1
  147. package/es/base-ui/DropdownMenu/sharedStyle.mjs +3 -0
  148. package/es/base-ui/DropdownMenu/sharedStyle.mjs.map +1 -1
  149. package/es/base-ui/FloatingPanel/FloatingPanel.mjs.map +1 -1
  150. package/es/base-ui/FloatingSheet/FloatingSheet.mjs.map +1 -1
  151. package/es/base-ui/FloatingSheet/FloatingSheetHeader.mjs.map +1 -1
  152. package/es/base-ui/Form/Form.mjs.map +1 -1
  153. package/es/base-ui/Form/components/FormField.mjs.map +1 -1
  154. package/es/base-ui/Form/components/FormGroup.mjs.map +1 -1
  155. package/es/base-ui/Form/components/FormSubmitFooter.mjs.map +1 -1
  156. package/es/base-ui/Form/components/FormTitle.mjs.map +1 -1
  157. package/es/base-ui/Input/Input.mjs.map +1 -1
  158. package/es/base-ui/Input/InputNumber.mjs.map +1 -1
  159. package/es/base-ui/Input/InputOTP.mjs.map +1 -1
  160. package/es/base-ui/Input/InputPassword.mjs.map +1 -1
  161. package/es/base-ui/Input/TextArea.mjs.map +1 -1
  162. package/es/base-ui/Input/style.d.mts +1 -1
  163. package/es/base-ui/Modal/Modal.mjs.map +1 -1
  164. package/es/base-ui/Modal/atoms.mjs.map +1 -1
  165. package/es/base-ui/Modal/imperative.mjs.map +1 -1
  166. package/es/base-ui/Popover/ArrowIcon.mjs.map +1 -1
  167. package/es/base-ui/Popover/PopoverGroup.mjs.map +1 -1
  168. package/es/base-ui/Popover/PopoverStandalone.mjs.map +1 -1
  169. package/es/base-ui/Popover/atoms.mjs.map +1 -1
  170. package/es/base-ui/Radio/Radio.mjs.map +1 -1
  171. package/es/base-ui/Radio/RadioGroup.mjs.map +1 -1
  172. package/es/base-ui/ScrollArea/ScrollArea.mjs.map +1 -1
  173. package/es/base-ui/Segmented/Segmented.mjs.map +1 -1
  174. package/es/base-ui/Select/Select.mjs.map +1 -1
  175. package/es/base-ui/Select/parts.mjs.map +1 -1
  176. package/es/base-ui/Select/renderOptions.mjs.map +1 -1
  177. package/es/base-ui/Slider/Slider.mjs.map +1 -1
  178. package/es/base-ui/Slider/SliderWithInput.mjs.map +1 -1
  179. package/es/base-ui/SubmenuArrowIcon.mjs.map +1 -1
  180. package/es/base-ui/Switch/Switch.mjs.map +1 -1
  181. package/es/base-ui/Switch/atoms.d.mts +3 -3
  182. package/es/base-ui/Switch/atoms.mjs +99 -50
  183. package/es/base-ui/Switch/atoms.mjs.map +1 -1
  184. package/es/base-ui/Switch/style.mjs +44 -1
  185. package/es/base-ui/Switch/style.mjs.map +1 -1
  186. package/es/base-ui/Switch/type.d.mts +3 -7
  187. package/es/base-ui/Tabs/Tabs.mjs.map +1 -1
  188. package/es/base-ui/Tabs/atoms.mjs.map +1 -1
  189. package/es/base-ui/Toast/Toast.mjs.map +1 -1
  190. package/es/base-ui/Toast/imperative.mjs.map +1 -1
  191. package/es/base-ui/Tooltip/ArrowIcon.mjs.map +1 -1
  192. package/es/base-ui/Tooltip/TooltipGroup.mjs.map +1 -1
  193. package/es/base-ui/Tooltip/TooltipStandalone.mjs.map +1 -1
  194. package/es/base-ui/index.d.mts +2 -2
  195. package/es/base-ui/index.mjs +2 -2
  196. package/es/brand/LobeChat/index.mjs.map +1 -1
  197. package/es/brand/LobeChatText/index.mjs.map +1 -1
  198. package/es/brand/LobeHub/index.mjs.map +1 -1
  199. package/es/brand/LobeHubText/index.mjs.map +1 -1
  200. package/es/brand/LogoThree/Loading.mjs.map +1 -1
  201. package/es/brand/LogoThree/LogoSpline.mjs.map +1 -1
  202. package/es/brand/LogoThree/index.mjs.map +1 -1
  203. package/es/brand/components/Divider.mjs.map +1 -1
  204. package/es/chat/BackBottom/BackBottom.mjs.map +1 -1
  205. package/es/chat/ChatHeader/ChatHeader.mjs.map +1 -1
  206. package/es/chat/ChatHeader/ChatHeaderTitle.mjs.map +1 -1
  207. package/es/chat/ChatInputArea/ChatInputArea.mjs.map +1 -1
  208. package/es/chat/ChatInputArea/components/ChatInputActionBar.mjs.map +1 -1
  209. package/es/chat/ChatInputArea/components/ChatSendButton.mjs.map +1 -1
  210. package/es/chat/ChatItem/ChatItem.mjs.map +1 -1
  211. package/es/chat/ChatItem/components/Actions.mjs.map +1 -1
  212. package/es/chat/ChatItem/components/Avatar.mjs.map +1 -1
  213. package/es/chat/ChatItem/components/ErrorContent.mjs.map +1 -1
  214. package/es/chat/ChatItem/components/Loading.mjs.map +1 -1
  215. package/es/chat/ChatItem/components/MessageContent.mjs.map +1 -1
  216. package/es/chat/ChatItem/components/Title.mjs.map +1 -1
  217. package/es/chat/ChatList/ChatList.mjs.map +1 -1
  218. package/es/chat/ChatList/components/HistoryDivider.mjs.map +1 -1
  219. package/es/chat/EditableMessage/EditableMessage.mjs.map +1 -1
  220. package/es/chat/EditableMessageList/EditableMessageList.mjs.map +1 -1
  221. package/es/chat/LoadingDots/LoadingDots.mjs.map +1 -1
  222. package/es/chat/MessageInput/MessageInput.mjs.map +1 -1
  223. package/es/chat/MessageModal/MessageModal.mjs.map +1 -1
  224. package/es/color/ColorScales/ScaleRow.mjs.map +1 -1
  225. package/es/color/ColorScales/index.mjs.map +1 -1
  226. package/es/color/CssVar/ScaleRow.mjs.map +1 -1
  227. package/es/color/CssVar/VarRow.mjs.map +1 -1
  228. package/es/color/CssVar/index.mjs.map +1 -1
  229. package/es/hooks/useMarkdown/latex.mjs.map +1 -1
  230. package/es/hooks/useMarkdown/useMarkdownContent.mjs.map +1 -1
  231. package/es/hooks/useMermaid.mjs +80 -116
  232. package/es/hooks/useMermaid.mjs.map +1 -1
  233. package/es/hooks/useMermaidCdn.d.mts +10 -0
  234. package/es/hooks/useMermaidCdn.mjs +97 -0
  235. package/es/hooks/useMermaidCdn.mjs.map +1 -0
  236. package/es/hooks/useStreamMermaid.mjs +19 -70
  237. package/es/hooks/useStreamMermaid.mjs.map +1 -1
  238. package/es/icons/Auth0/components/Mono.mjs.map +1 -1
  239. package/es/icons/Authelia/components/Color.mjs.map +1 -1
  240. package/es/icons/Authelia/components/Mono.mjs.map +1 -1
  241. package/es/icons/Authentik/components/Color.mjs.map +1 -1
  242. package/es/icons/Authentik/components/Mono.mjs.map +1 -1
  243. package/es/icons/Casdoor/components/Color.mjs.map +1 -1
  244. package/es/icons/Casdoor/components/Mono.mjs.map +1 -1
  245. package/es/icons/Clerk/components/Color.mjs.map +1 -1
  246. package/es/icons/Clerk/components/Mono.mjs.map +1 -1
  247. package/es/icons/DingTalk/components/Color.mjs.map +1 -1
  248. package/es/icons/DingTalk/components/Mono.mjs.map +1 -1
  249. package/es/icons/Discord/components/Color.mjs.map +1 -1
  250. package/es/icons/Discord/components/Mono.mjs.map +1 -1
  251. package/es/icons/GoogleChat/components/Color.mjs.map +1 -1
  252. package/es/icons/GoogleChat/components/Mono.mjs.map +1 -1
  253. package/es/icons/IMessage/components/Color.mjs.map +1 -1
  254. package/es/icons/IMessage/components/Inner.mjs.map +1 -1
  255. package/es/icons/IMessage/components/Mono.mjs.map +1 -1
  256. package/es/icons/Lark/components/Color.mjs.map +1 -1
  257. package/es/icons/Lark/components/Mono.mjs.map +1 -1
  258. package/es/icons/Line/components/Color.mjs.map +1 -1
  259. package/es/icons/Line/components/Mono.mjs.map +1 -1
  260. package/es/icons/Logto/components/Color.mjs.map +1 -1
  261. package/es/icons/Logto/components/Mono.mjs.map +1 -1
  262. package/es/icons/MicrosoftEntra/components/Color.mjs.map +1 -1
  263. package/es/icons/MicrosoftEntra/components/Mono.mjs.map +1 -1
  264. package/es/icons/MicrosoftTeams/components/Color.mjs.map +1 -1
  265. package/es/icons/MicrosoftTeams/components/Mono.mjs.map +1 -1
  266. package/es/icons/NextAuth/components/Color.mjs.map +1 -1
  267. package/es/icons/NextAuth/components/Mono.mjs.map +1 -1
  268. package/es/icons/QQ/components/Color.mjs.map +1 -1
  269. package/es/icons/QQ/components/Mono.mjs.map +1 -1
  270. package/es/icons/Slack/components/Color.mjs.map +1 -1
  271. package/es/icons/Slack/components/Mono.mjs.map +1 -1
  272. package/es/icons/Telegram/components/Color.mjs.map +1 -1
  273. package/es/icons/Telegram/components/Inner.mjs.map +1 -1
  274. package/es/icons/Telegram/components/Mono.mjs.map +1 -1
  275. package/es/icons/WeChat/components/Color.mjs.map +1 -1
  276. package/es/icons/WeChat/components/Mono.mjs.map +1 -1
  277. package/es/icons/WhatsApp/components/Color.mjs.map +1 -1
  278. package/es/icons/WhatsApp/components/Mono.mjs.map +1 -1
  279. package/es/icons/Zitadel/components/Color.mjs.map +1 -1
  280. package/es/icons/Zitadel/components/Mono.mjs.map +1 -1
  281. package/es/index.d.mts +2 -2
  282. package/es/index.mjs +2 -2
  283. package/es/mdx/Callout/index.mjs.map +1 -1
  284. package/es/mdx/Cards/Card.mjs.map +1 -1
  285. package/es/mdx/FileTree/File.mjs.map +1 -1
  286. package/es/mdx/FileTree/Folder.mjs.map +1 -1
  287. package/es/mdx/Mdx/index.mjs.map +1 -1
  288. package/es/mdx/Tabs/Tab.mjs.map +1 -1
  289. package/es/mdx/Tabs/index.mjs.map +1 -1
  290. package/es/mdx/mdxComponents/Citation/PopoverPanel.mjs.map +1 -1
  291. package/es/mdx/mdxComponents/Citation/index.mjs.map +1 -1
  292. package/es/mdx/mdxComponents/CodeBlock.mjs.map +1 -1
  293. package/es/mdx/mdxComponents/Link.mjs.map +1 -1
  294. package/es/mobile/ChatHeader/ChatHeader.mjs.map +1 -1
  295. package/es/mobile/ChatHeader/ChatHeaderTitle.mjs.map +1 -1
  296. package/es/mobile/ChatInputArea/ChatInputArea.mjs.map +1 -1
  297. package/es/mobile/TabBar/TabBar.mjs.map +1 -1
  298. package/es/storybook/StoryBook/index.mjs.map +1 -1
  299. package/package.json +3 -4
@@ -1 +1 @@
1
- {"version":3,"file":"renderOptions.mjs","names":["BaseSelect","menuStyles","styles"],"sources":["../../../src/base-ui/Select/renderOptions.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { cx } from 'antd-style';\nimport { Check } from 'lucide-react';\nimport { type ComponentProps } from 'react';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport Icon from '@/Icon';\n\nimport { getOptionSearchText, isGroupOption } from './helpers';\nimport { styles } from './style';\nimport {\n type SelectClassNames,\n type SelectOption,\n type SelectOptions,\n type SelectProps,\n} from './type';\n\ninterface RenderOptionsParams {\n classNames: SelectClassNames | undefined;\n isBoldIndicator: boolean;\n items: SelectOptions<any>;\n itemTextClassName: string;\n listItemHeight: number | undefined;\n optionRender: SelectProps['optionRender'];\n renderVirtualItem: NonNullable<ComponentProps<typeof BaseSelect.Item>['render']>;\n virtual: boolean | undefined;\n}\n\nfunction renderItem(\n option: SelectOption<any>,\n index: number,\n params: Omit<RenderOptionsParams, 'items'>,\n) {\n const {\n classNames,\n isBoldIndicator,\n itemTextClassName,\n listItemHeight,\n optionRender,\n renderVirtualItem,\n virtual,\n } = params;\n\n return (\n <BaseSelect.Item\n disabled={option.disabled}\n key={`${String(option.value)}-${index}`}\n label={getOptionSearchText(option)}\n render={virtual ? renderVirtualItem : undefined}\n value={option.value}\n className={cx(\n menuStyles.item,\n styles.item,\n isBoldIndicator && styles.itemBoldSelected,\n classNames?.item,\n classNames?.option,\n option.className,\n )}\n style={{\n minHeight: listItemHeight,\n ...option.style,\n }}\n >\n <BaseSelect.ItemText className={itemTextClassName}>\n {optionRender ? optionRender(option, { index }) : option.label}\n </BaseSelect.ItemText>\n {!isBoldIndicator && (\n <BaseSelect.ItemIndicator className={cx(styles.itemIndicator, classNames?.itemIndicator)}>\n <Icon icon={Check} size={'small'} />\n </BaseSelect.ItemIndicator>\n )}\n </BaseSelect.Item>\n );\n}\n\nexport function renderOptions(params: RenderOptionsParams) {\n const { classNames, items } = params;\n let optionIndex = 0;\n\n return items.map((item, index) => {\n if (isGroupOption(item)) {\n return (\n <BaseSelect.Group className={cx(styles.group, classNames?.group)} key={`group-${index}`}>\n <BaseSelect.GroupLabel\n className={cx(menuStyles.groupLabel, styles.groupLabel, classNames?.groupLabel)}\n >\n {item.label}\n </BaseSelect.GroupLabel>\n {item.options.map((option) => renderItem(option, optionIndex++, params))}\n </BaseSelect.Group>\n );\n }\n\n return renderItem(item, optionIndex++, params);\n });\n}\n"],"mappings":";;;;;;;;;;AA8BA,SAAS,WACP,QACA,OACA,QACA;CACA,MAAM,EACJ,YACA,iBACA,mBACA,gBACA,cACA,mBACA,YACE;CAEJ,OACE,qBAACA,OAAW,MAAZ;EACE,UAAU,OAAO;EAEjB,OAAO,oBAAoB,MAAM;EACjC,QAAQ,UAAU,oBAAoB,KAAA;EACtC,OAAO,OAAO;EACd,WAAW,GACTC,OAAW,MACXC,SAAO,MACP,mBAAmBA,SAAO,kBAC1B,YAAY,MACZ,YAAY,QACZ,OAAO,SACT;EACA,OAAO;GACL,WAAW;GACX,GAAG,OAAO;EACZ;YAjBF,CAmBE,oBAACF,OAAW,UAAZ;GAAqB,WAAW;aAC7B,eAAe,aAAa,QAAQ,EAAE,MAAM,CAAC,IAAI,OAAO;EACtC,CAAA,GACpB,CAAC,mBACA,oBAACA,OAAW,eAAZ;GAA0B,WAAW,GAAGE,SAAO,eAAe,YAAY,aAAa;aACrF,oBAAC,MAAD;IAAM,MAAM;IAAO,MAAM;GAAU,CAAA;EACX,CAAA,CAEb;IAzBV,GAAG,OAAO,OAAO,KAAK,EAAE,GAAG,OAyBjB;AAErB;AAEA,SAAgB,cAAc,QAA6B;CACzD,MAAM,EAAE,YAAY,UAAU;CAC9B,IAAI,cAAc;CAElB,OAAO,MAAM,KAAK,MAAM,UAAU;EAChC,IAAI,cAAc,IAAI,GACpB,OACE,qBAACF,OAAW,OAAZ;GAAkB,WAAW,GAAGE,SAAO,OAAO,YAAY,KAAK;aAA/D,CACE,oBAACF,OAAW,YAAZ;IACE,WAAW,GAAGC,OAAW,YAAYC,SAAO,YAAY,YAAY,UAAU;cAE7E,KAAK;GACe,CAAA,GACtB,KAAK,QAAQ,KAAK,WAAW,WAAW,QAAQ,eAAe,MAAM,CAAC,CACvD;KAPqD,SAAS,OAO9D;EAItB,OAAO,WAAW,MAAM,eAAe,MAAM;CAC/C,CAAC;AACH"}
1
+ {"version":3,"file":"renderOptions.mjs","names":["BaseSelect","menuStyles","styles"],"sources":["../../../src/base-ui/Select/renderOptions.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { cx } from 'antd-style';\nimport { Check } from 'lucide-react';\nimport { type ComponentProps } from 'react';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport Icon from '@/Icon';\n\nimport { getOptionSearchText, isGroupOption } from './helpers';\nimport { styles } from './style';\nimport {\n type SelectClassNames,\n type SelectOption,\n type SelectOptions,\n type SelectProps,\n} from './type';\n\ninterface RenderOptionsParams {\n classNames: SelectClassNames | undefined;\n isBoldIndicator: boolean;\n items: SelectOptions<any>;\n itemTextClassName: string;\n listItemHeight: number | undefined;\n optionRender: SelectProps['optionRender'];\n renderVirtualItem: NonNullable<ComponentProps<typeof BaseSelect.Item>['render']>;\n virtual: boolean | undefined;\n}\n\nfunction renderItem(\n option: SelectOption<any>,\n index: number,\n params: Omit<RenderOptionsParams, 'items'>,\n) {\n const {\n classNames,\n isBoldIndicator,\n itemTextClassName,\n listItemHeight,\n optionRender,\n renderVirtualItem,\n virtual,\n } = params;\n\n return (\n <BaseSelect.Item\n disabled={option.disabled}\n key={`${String(option.value)}-${index}`}\n label={getOptionSearchText(option)}\n render={virtual ? renderVirtualItem : undefined}\n value={option.value}\n className={cx(\n menuStyles.item,\n styles.item,\n isBoldIndicator && styles.itemBoldSelected,\n classNames?.item,\n classNames?.option,\n option.className,\n )}\n style={{\n minHeight: listItemHeight,\n ...option.style,\n }}\n >\n <BaseSelect.ItemText className={itemTextClassName}>\n {optionRender ? optionRender(option, { index }) : option.label}\n </BaseSelect.ItemText>\n {!isBoldIndicator && (\n <BaseSelect.ItemIndicator className={cx(styles.itemIndicator, classNames?.itemIndicator)}>\n <Icon icon={Check} size={'small'} />\n </BaseSelect.ItemIndicator>\n )}\n </BaseSelect.Item>\n );\n}\n\nexport function renderOptions(params: RenderOptionsParams) {\n const { classNames, items } = params;\n let optionIndex = 0;\n\n return items.map((item, index) => {\n if (isGroupOption(item)) {\n return (\n <BaseSelect.Group className={cx(styles.group, classNames?.group)} key={`group-${index}`}>\n <BaseSelect.GroupLabel\n className={cx(menuStyles.groupLabel, styles.groupLabel, classNames?.groupLabel)}\n >\n {item.label}\n </BaseSelect.GroupLabel>\n {item.options.map((option) => renderItem(option, optionIndex++, params))}\n </BaseSelect.Group>\n );\n }\n\n return renderItem(item, optionIndex++, params);\n });\n}\n"],"mappings":";;;;;;;;;;AA8BA,SAAS,WACP,QACA,OACA,QACA;CACA,MAAM,EACJ,YACA,iBACA,mBACA,gBACA,cACA,mBACA,YACE;CAEJ,OACE,qBAACA,OAAW,MAAZ;EACE,UAAU,OAAO;EAEjB,OAAO,oBAAoB,MAAM;EACjC,QAAQ,UAAU,oBAAoB,KAAA;EACtC,OAAO,OAAO;EACd,WAAW,GACTC,OAAW,MACXC,SAAO,MACP,mBAAmBA,SAAO,kBAC1B,YAAY,MACZ,YAAY,QACZ,OAAO,SACT;EACA,OAAO;GACL,WAAW;GACX,GAAG,OAAO;EACZ;EAjBF,UAAA,CAmBE,oBAACF,OAAW,UAAZ;GAAqB,WAAW;GAC7B,UAAA,eAAe,aAAa,QAAQ,EAAE,MAAM,CAAC,IAAI,OAAO;EACtC,CAAA,GACpB,CAAC,mBACA,oBAACA,OAAW,eAAZ;GAA0B,WAAW,GAAGE,SAAO,eAAe,YAAY,aAAa;GACrF,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAO,MAAM;GAAU,CAAA;EACX,CAAA,CAEb;CAzBV,GAAA,GAAG,OAAO,OAAO,KAAK,EAAE,GAAG,OAyBjB;AAErB;AAEA,SAAgB,cAAc,QAA6B;CACzD,MAAM,EAAE,YAAY,UAAU;CAC9B,IAAI,cAAc;CAElB,OAAO,MAAM,KAAK,MAAM,UAAU;EAChC,IAAI,cAAc,IAAI,GACpB,OACE,qBAACF,OAAW,OAAZ;GAAkB,WAAW,GAAGE,SAAO,OAAO,YAAY,KAAK;GAA/D,UAAA,CACE,oBAACF,OAAW,YAAZ;IACE,WAAW,GAAGC,OAAW,YAAYC,SAAO,YAAY,YAAY,UAAU;IAE7E,UAAA,KAAK;GACe,CAAA,GACtB,KAAK,QAAQ,KAAK,WAAW,WAAW,QAAQ,eAAe,MAAM,CAAC,CACvD;EAPqD,GAAA,SAAS,OAO9D;EAItB,OAAO,WAAW,MAAM,eAAe,MAAM;CAC/C,CAAC;AACH"}
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.mjs","names":["Slider","BaseSlider"],"sources":["../../../src/base-ui/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport { Slider as BaseSlider } from '@base-ui/react/slider';\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from './style';\nimport type { SliderProps } from './type';\n\nconst Slider = memo<SliderProps>(\n ({ className, classNames, styles: customStyles, style, onChange, onChangeComplete, ...rest }) => (\n <BaseSlider.Root\n className={cx(styles.root, className)}\n style={style}\n onValueChange={(value) => onChange?.(value as number)}\n onValueCommitted={(value) => onChangeComplete?.(value as number)}\n {...rest}\n >\n <BaseSlider.Control\n className={cx(styles.control, classNames?.control)}\n style={customStyles?.control}\n >\n <BaseSlider.Track\n className={cx(styles.track, classNames?.track)}\n style={customStyles?.track}\n >\n <BaseSlider.Indicator\n className={cx(styles.indicator, classNames?.indicator)}\n style={customStyles?.indicator}\n />\n <BaseSlider.Thumb\n className={cx(styles.thumb, classNames?.thumb)}\n style={customStyles?.thumb}\n />\n </BaseSlider.Track>\n </BaseSlider.Control>\n </BaseSlider.Root>\n ),\n);\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":";;;;;;;AASA,MAAMA,WAAS,MACZ,EAAE,WAAW,YAAY,QAAQ,cAAc,OAAO,UAAU,kBAAkB,GAAG,WACpF,oBAACC,OAAW,MAAZ;CACE,WAAW,GAAG,OAAO,MAAM,SAAS;CAC7B;CACP,gBAAgB,UAAU,WAAW,KAAe;CACpD,mBAAmB,UAAU,mBAAmB,KAAe;CAC/D,GAAI;WAEJ,oBAACA,OAAW,SAAZ;EACE,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;EACjD,OAAO,cAAc;YAErB,qBAACA,OAAW,OAAZ;GACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;GAC7C,OAAO,cAAc;aAFvB,CAIE,oBAACA,OAAW,WAAZ;IACE,WAAW,GAAG,OAAO,WAAW,YAAY,SAAS;IACrD,OAAO,cAAc;GACtB,CAAA,GACD,oBAACA,OAAW,OAAZ;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IAC7C,OAAO,cAAc;GACtB,CAAA,CACe;;CACA,CAAA;AACL,CAAA,CAErB;AAEA,SAAO,cAAc"}
1
+ {"version":3,"file":"Slider.mjs","names":["Slider","BaseSlider"],"sources":["../../../src/base-ui/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport { Slider as BaseSlider } from '@base-ui/react/slider';\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from './style';\nimport type { SliderProps } from './type';\n\nconst Slider = memo<SliderProps>(\n ({ className, classNames, styles: customStyles, style, onChange, onChangeComplete, ...rest }) => (\n <BaseSlider.Root\n className={cx(styles.root, className)}\n style={style}\n onValueChange={(value) => onChange?.(value as number)}\n onValueCommitted={(value) => onChangeComplete?.(value as number)}\n {...rest}\n >\n <BaseSlider.Control\n className={cx(styles.control, classNames?.control)}\n style={customStyles?.control}\n >\n <BaseSlider.Track\n className={cx(styles.track, classNames?.track)}\n style={customStyles?.track}\n >\n <BaseSlider.Indicator\n className={cx(styles.indicator, classNames?.indicator)}\n style={customStyles?.indicator}\n />\n <BaseSlider.Thumb\n className={cx(styles.thumb, classNames?.thumb)}\n style={customStyles?.thumb}\n />\n </BaseSlider.Track>\n </BaseSlider.Control>\n </BaseSlider.Root>\n ),\n);\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":";;;;;;;AASA,MAAMA,WAAS,MACZ,EAAE,WAAW,YAAY,QAAQ,cAAc,OAAO,UAAU,kBAAkB,GAAG,WACpF,oBAACC,OAAW,MAAZ;CACE,WAAW,GAAG,OAAO,MAAM,SAAS;CAC7B;CACP,gBAAgB,UAAU,WAAW,KAAe;CACpD,mBAAmB,UAAU,mBAAmB,KAAe;CAC/D,GAAI;CAEJ,UAAA,oBAACA,OAAW,SAAZ;EACE,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;EACjD,OAAO,cAAc;EAErB,UAAA,qBAACA,OAAW,OAAZ;GACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;GAC7C,OAAO,cAAc;GAFvB,UAAA,CAIE,oBAACA,OAAW,WAAZ;IACE,WAAW,GAAG,OAAO,WAAW,YAAY,SAAS;IACrD,OAAO,cAAc;GACtB,CAAA,GACD,oBAACA,OAAW,OAAZ;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IAC7C,OAAO,cAAc;GACtB,CAAA,CACe;;CACA,CAAA;AACL,CAAA,CAErB;AAEA,SAAO,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"SliderWithInput.mjs","names":["Flexbox"],"sources":["../../../src/base-ui/Slider/SliderWithInput.tsx"],"sourcesContent":["'use client';\n\nimport { isNull } from 'es-toolkit/compat';\nimport { memo } from 'react';\n\nimport { InputNumber } from '@/base-ui/Input';\nimport { Flexbox } from '@/Flex';\n\nimport Slider from './Slider';\nimport type { SliderWithInputProps } from './type';\n\nconst SliderWithInput = memo<SliderWithInputProps>(\n ({\n step,\n value,\n onChange,\n max,\n min,\n defaultValue,\n size,\n controls,\n gap = 16,\n style,\n className,\n classNames,\n styles: customStyles,\n disabled,\n unlimitedInput = false,\n changeOnWheel,\n shadow,\n variant,\n ...rest\n }) => {\n const handleChange = (next: number | null) => {\n if (isNull(next) || Number.isNaN(next)) return;\n onChange?.(next);\n };\n\n const {\n slider: sliderClassName,\n input: inputClassName,\n ...sliderPartClassNames\n } = classNames || {};\n const { slider: sliderStyle, input: inputStyle, ...sliderPartStyles } = customStyles || {};\n\n return (\n <Flexbox horizontal align={'center'} className={className} gap={gap} style={style}>\n <Slider\n className={sliderClassName}\n classNames={sliderPartClassNames}\n defaultValue={defaultValue}\n disabled={disabled}\n max={max}\n min={min}\n step={step}\n style={{ flex: 1, ...sliderStyle }}\n styles={sliderPartStyles}\n value={value}\n onChange={handleChange}\n {...rest}\n />\n <InputNumber\n changeOnWheel={changeOnWheel}\n className={inputClassName}\n controls={size !== 'small' && controls !== false}\n defaultValue={defaultValue}\n disabled={disabled}\n max={unlimitedInput ? undefined : max}\n min={min}\n shadow={shadow}\n size={size}\n step={step === undefined || Number.isNaN(step) ? undefined : step}\n value={value}\n variant={variant}\n style={{\n flex: 'none',\n width: size === 'small' ? 48 : 88,\n ...inputStyle,\n }}\n onChange={handleChange}\n />\n </Flexbox>\n );\n },\n);\n\nSliderWithInput.displayName = 'SliderWithInput';\n\nexport default SliderWithInput;\n"],"mappings":";;;;;;;;AAWA,MAAM,kBAAkB,MACrB,EACC,MACA,OACA,UACA,KACA,KACA,cACA,MACA,UACA,MAAM,IACN,OACA,WACA,YACA,QAAQ,cACR,UACA,iBAAiB,OACjB,eACA,QACA,SACA,GAAG,WACC;CACJ,MAAM,gBAAgB,SAAwB;EAC5C,IAAI,OAAO,IAAI,KAAK,OAAO,MAAM,IAAI,GAAG;EACxC,WAAW,IAAI;CACjB;CAEA,MAAM,EACJ,QAAQ,iBACR,OAAO,gBACP,GAAG,yBACD,cAAc,CAAC;CACnB,MAAM,EAAE,QAAQ,aAAa,OAAO,YAAY,GAAG,qBAAqB,gBAAgB,CAAC;CAEzF,OACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAqB;EAAgB;EAAY;YAA5E,CACE,oBAAC,QAAD;GACE,WAAW;GACX,YAAY;GACE;GACJ;GACL;GACA;GACC;GACN,OAAO;IAAE,MAAM;IAAG,GAAG;GAAY;GACjC,QAAQ;GACD;GACP,UAAU;GACV,GAAI;EACL,CAAA,GACD,oBAAC,aAAD;GACiB;GACf,WAAW;GACX,UAAU,SAAS,WAAW,aAAa;GAC7B;GACJ;GACV,KAAK,iBAAiB,KAAA,IAAY;GAC7B;GACG;GACF;GACN,MAAM,SAAS,KAAA,KAAa,OAAO,MAAM,IAAI,IAAI,KAAA,IAAY;GACtD;GACE;GACT,OAAO;IACL,MAAM;IACN,OAAO,SAAS,UAAU,KAAK;IAC/B,GAAG;GACL;GACA,UAAU;EACX,CAAA,CACM;;AAEb,CACF;AAEA,gBAAgB,cAAc"}
1
+ {"version":3,"file":"SliderWithInput.mjs","names":["Flexbox"],"sources":["../../../src/base-ui/Slider/SliderWithInput.tsx"],"sourcesContent":["'use client';\n\nimport { isNull } from 'es-toolkit/compat';\nimport { memo } from 'react';\n\nimport { InputNumber } from '@/base-ui/Input';\nimport { Flexbox } from '@/Flex';\n\nimport Slider from './Slider';\nimport type { SliderWithInputProps } from './type';\n\nconst SliderWithInput = memo<SliderWithInputProps>(\n ({\n step,\n value,\n onChange,\n max,\n min,\n defaultValue,\n size,\n controls,\n gap = 16,\n style,\n className,\n classNames,\n styles: customStyles,\n disabled,\n unlimitedInput = false,\n changeOnWheel,\n shadow,\n variant,\n ...rest\n }) => {\n const handleChange = (next: number | null) => {\n if (isNull(next) || Number.isNaN(next)) return;\n onChange?.(next);\n };\n\n const {\n slider: sliderClassName,\n input: inputClassName,\n ...sliderPartClassNames\n } = classNames || {};\n const { slider: sliderStyle, input: inputStyle, ...sliderPartStyles } = customStyles || {};\n\n return (\n <Flexbox horizontal align={'center'} className={className} gap={gap} style={style}>\n <Slider\n className={sliderClassName}\n classNames={sliderPartClassNames}\n defaultValue={defaultValue}\n disabled={disabled}\n max={max}\n min={min}\n step={step}\n style={{ flex: 1, ...sliderStyle }}\n styles={sliderPartStyles}\n value={value}\n onChange={handleChange}\n {...rest}\n />\n <InputNumber\n changeOnWheel={changeOnWheel}\n className={inputClassName}\n controls={size !== 'small' && controls !== false}\n defaultValue={defaultValue}\n disabled={disabled}\n max={unlimitedInput ? undefined : max}\n min={min}\n shadow={shadow}\n size={size}\n step={step === undefined || Number.isNaN(step) ? undefined : step}\n value={value}\n variant={variant}\n style={{\n flex: 'none',\n width: size === 'small' ? 48 : 88,\n ...inputStyle,\n }}\n onChange={handleChange}\n />\n </Flexbox>\n );\n },\n);\n\nSliderWithInput.displayName = 'SliderWithInput';\n\nexport default SliderWithInput;\n"],"mappings":";;;;;;;;AAWA,MAAM,kBAAkB,MACrB,EACC,MACA,OACA,UACA,KACA,KACA,cACA,MACA,UACA,MAAM,IACN,OACA,WACA,YACA,QAAQ,cACR,UACA,iBAAiB,OACjB,eACA,QACA,SACA,GAAG,WACC;CACJ,MAAM,gBAAgB,SAAwB;EAC5C,IAAI,OAAO,IAAI,KAAK,OAAO,MAAM,IAAI,GAAG;EACxC,WAAW,IAAI;CACjB;CAEA,MAAM,EACJ,QAAQ,iBACR,OAAO,gBACP,GAAG,yBACD,cAAc,CAAC;CACnB,MAAM,EAAE,QAAQ,aAAa,OAAO,YAAY,GAAG,qBAAqB,gBAAgB,CAAC;CAEzF,OACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAqB;EAAgB;EAAY;EAA5E,UAAA,CACE,oBAAC,QAAD;GACE,WAAW;GACX,YAAY;GACE;GACJ;GACL;GACA;GACC;GACN,OAAO;IAAE,MAAM;IAAG,GAAG;GAAY;GACjC,QAAQ;GACD;GACP,UAAU;GACV,GAAI;EACL,CAAA,GACD,oBAAC,aAAD;GACiB;GACf,WAAW;GACX,UAAU,SAAS,WAAW,aAAa;GAC7B;GACJ;GACV,KAAK,iBAAiB,KAAA,IAAY;GAC7B;GACG;GACF;GACN,MAAM,SAAS,KAAA,KAAa,OAAO,MAAM,IAAI,IAAI,KAAA,IAAY;GACtD;GACE;GACT,OAAO;IACL,MAAM;IACN,OAAO,SAAS,UAAU,KAAK;IAC/B,GAAG;GACL;GACA,UAAU;EACX,CAAA,CACM;;AAEb,CACF;AAEA,gBAAgB,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"SubmenuArrowIcon.mjs","names":[],"sources":["../../src/base-ui/SubmenuArrowIcon.tsx"],"sourcesContent":["export const SubmenuArrowIcon = () => (\n <svg\n aria-hidden\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M6 5l4 3-4 3z\" />\n </svg>\n);\n"],"mappings":";;AAAA,MAAa,yBACX,oBAAC,OAAD;CACE,eAAA;CACA,MAAK;CACL,QAAO;CACP,gBAAe;CACf,aAAa;CACb,SAAQ;WAER,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;AACtB,CAAA"}
1
+ {"version":3,"file":"SubmenuArrowIcon.mjs","names":[],"sources":["../../src/base-ui/SubmenuArrowIcon.tsx"],"sourcesContent":["export const SubmenuArrowIcon = () => (\n <svg\n aria-hidden\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M6 5l4 3-4 3z\" />\n </svg>\n);\n"],"mappings":";;AAAA,MAAa,yBACX,oBAAC,OAAD;CACE,eAAA;CACA,MAAK;CACL,QAAO;CACP,gBAAe;CACf,aAAa;CACb,SAAQ;CAER,UAAA,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;AACtB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.mjs","names":[],"sources":["../../../src/base-ui/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { SwitchIcon, SwitchRoot, SwitchThumb } from './atoms';\nimport { styles } from './style';\nimport type { SwitchProps } from './type';\n\nconst Switch = memo<SwitchProps>(\n ({\n autoFocus,\n checked,\n checkedChildren,\n className,\n classNames,\n defaultChecked,\n defaultValue,\n disabled,\n id,\n loading,\n name,\n onChange,\n onClick,\n ref,\n rootClassName,\n size = 'default',\n style,\n styles: customStyles,\n tabIndex,\n title,\n unCheckedChildren,\n value,\n }) => {\n const isDisabled = disabled || loading;\n const resolvedChecked = value ?? checked;\n const resolvedDefaultChecked = defaultValue ?? defaultChecked;\n\n return (\n <SwitchRoot\n autoFocus={autoFocus}\n checked={resolvedChecked}\n className={cx(className, rootClassName, classNames?.root)}\n defaultChecked={resolvedDefaultChecked}\n disabled={isDisabled}\n id={id}\n name={name}\n ref={ref}\n size={size}\n style={{ ...style, ...customStyles?.root }}\n tabIndex={tabIndex}\n title={title}\n onCheckedChange={onChange}\n onClick={onClick}\n >\n {checkedChildren && (\n <SwitchIcon\n className={classNames?.content}\n position=\"left\"\n size={size}\n style={customStyles?.content}\n >\n {checkedChildren}\n </SwitchIcon>\n )}\n {unCheckedChildren && (\n <SwitchIcon\n className={classNames?.content}\n position=\"right\"\n size={size}\n style={customStyles?.content}\n >\n {unCheckedChildren}\n </SwitchIcon>\n )}\n <SwitchThumb className={classNames?.thumb} size={size} style={customStyles?.thumb}>\n {loading && (\n <Icon\n className={styles.loading}\n icon={Loader2}\n size={size === 'small' ? 8 : 12}\n style={{ color: 'var(--lobe-color-primary)' }}\n />\n )}\n </SwitchThumb>\n </SwitchRoot>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":";;;;;;;;;AAYA,MAAM,SAAS,MACZ,EACC,WACA,SACA,iBACA,WACA,YACA,gBACA,cACA,UACA,IACA,SACA,MACA,UACA,SACA,KACA,eACA,OAAO,WACP,OACA,QAAQ,cACR,UACA,OACA,mBACA,YACI;CACJ,MAAM,aAAa,YAAY;CAC/B,MAAM,kBAAkB,SAAS;CACjC,MAAM,yBAAyB,gBAAgB;CAE/C,OACE,qBAAC,YAAD;EACa;EACX,SAAS;EACT,WAAW,GAAG,WAAW,eAAe,YAAY,IAAI;EACxD,gBAAgB;EAChB,UAAU;EACN;EACE;EACD;EACC;EACN,OAAO;GAAE,GAAG;GAAO,GAAG,cAAc;EAAK;EAC/B;EACH;EACP,iBAAiB;EACR;YAdX;GAgBG,mBACC,oBAAC,YAAD;IACE,WAAW,YAAY;IACvB,UAAS;IACH;IACN,OAAO,cAAc;cAEpB;GACS,CAAA;GAEb,qBACC,oBAAC,YAAD;IACE,WAAW,YAAY;IACvB,UAAS;IACH;IACN,OAAO,cAAc;cAEpB;GACS,CAAA;GAEd,oBAAC,aAAD;IAAa,WAAW,YAAY;IAAa;IAAM,OAAO,cAAc;cACzE,WACC,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,MAAM;KACN,MAAM,SAAS,UAAU,IAAI;KAC7B,OAAO,EAAE,OAAO,4BAA4B;IAC7C,CAAA;GAEQ,CAAA;EACH;;AAEhB,CACF;AAEA,OAAO,cAAc"}
1
+ {"version":3,"file":"Switch.mjs","names":[],"sources":["../../../src/base-ui/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { SwitchIcon, SwitchRoot, SwitchThumb } from './atoms';\nimport { styles } from './style';\nimport type { SwitchProps } from './type';\n\nconst Switch = memo<SwitchProps>(\n ({\n autoFocus,\n checked,\n checkedChildren,\n className,\n classNames,\n defaultChecked,\n defaultValue,\n disabled,\n id,\n loading,\n name,\n onChange,\n onClick,\n ref,\n rootClassName,\n size = 'default',\n style,\n styles: customStyles,\n tabIndex,\n title,\n unCheckedChildren,\n value,\n }) => {\n const isDisabled = disabled || loading;\n const resolvedChecked = value ?? checked;\n const resolvedDefaultChecked = defaultValue ?? defaultChecked;\n\n return (\n <SwitchRoot\n autoFocus={autoFocus}\n checked={resolvedChecked}\n className={cx(className, rootClassName, classNames?.root)}\n defaultChecked={resolvedDefaultChecked}\n disabled={isDisabled}\n id={id}\n name={name}\n ref={ref}\n size={size}\n style={{ ...style, ...customStyles?.root }}\n tabIndex={tabIndex}\n title={title}\n onCheckedChange={onChange}\n onClick={onClick}\n >\n {checkedChildren && (\n <SwitchIcon\n className={classNames?.content}\n position=\"left\"\n size={size}\n style={customStyles?.content}\n >\n {checkedChildren}\n </SwitchIcon>\n )}\n {unCheckedChildren && (\n <SwitchIcon\n className={classNames?.content}\n position=\"right\"\n size={size}\n style={customStyles?.content}\n >\n {unCheckedChildren}\n </SwitchIcon>\n )}\n <SwitchThumb className={classNames?.thumb} size={size} style={customStyles?.thumb}>\n {loading && (\n <Icon\n className={styles.loading}\n icon={Loader2}\n size={size === 'small' ? 8 : 12}\n style={{ color: 'var(--lobe-color-primary)' }}\n />\n )}\n </SwitchThumb>\n </SwitchRoot>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":";;;;;;;;;AAYA,MAAM,SAAS,MACZ,EACC,WACA,SACA,iBACA,WACA,YACA,gBACA,cACA,UACA,IACA,SACA,MACA,UACA,SACA,KACA,eACA,OAAO,WACP,OACA,QAAQ,cACR,UACA,OACA,mBACA,YACI;CACJ,MAAM,aAAa,YAAY;CAC/B,MAAM,kBAAkB,SAAS;CACjC,MAAM,yBAAyB,gBAAgB;CAE/C,OACE,qBAAC,YAAD;EACa;EACX,SAAS;EACT,WAAW,GAAG,WAAW,eAAe,YAAY,IAAI;EACxD,gBAAgB;EAChB,UAAU;EACN;EACE;EACD;EACC;EACN,OAAO;GAAE,GAAG;GAAO,GAAG,cAAc;EAAK;EAC/B;EACH;EACP,iBAAiB;EACR;EAdX,UAAA;GAgBG,mBACC,oBAAC,YAAD;IACE,WAAW,YAAY;IACvB,UAAS;IACH;IACN,OAAO,cAAc;IAEpB,UAAA;GACS,CAAA;GAEb,qBACC,oBAAC,YAAD;IACE,WAAW,YAAY;IACvB,UAAS;IACH;IACN,OAAO,cAAc;IAEpB,UAAA;GACS,CAAA;GAEd,oBAAC,aAAD;IAAa,WAAW,YAAY;IAAa;IAAM,OAAO,cAAc;IACzE,UAAA,WACC,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,MAAM;KACN,MAAM,SAAS,UAAU,IAAI;KAC7B,OAAO,EAAE,OAAO,4BAA4B;IAC7C,CAAA;GAEQ,CAAA;EACH;;AAEhB,CACF;AAEA,OAAO,cAAc"}
@@ -7,15 +7,15 @@ type SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClic
7
7
  onClick?: SwitchChangeEventHandler;
8
8
  };
9
9
  declare const SwitchRoot: {
10
- ({ checked, className, defaultChecked, onCheckedChange, onClick, size, children, disabled, readOnly, required, inputRef, id, name, ...rest }: SwitchRootInternalProps): import("react").JSX.Element;
10
+ ({ checked, className, defaultChecked, onCheckedChange, onClick, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size, children, disabled, readOnly, required, inputRef, id, name, ...rest }: SwitchRootInternalProps): import("react").JSX.Element;
11
11
  displayName: string;
12
12
  };
13
13
  declare const SwitchThumb: {
14
- ({ className, pressedAnimation, size, transition, children, ...rest }: SwitchThumbProps): import("react").JSX.Element;
14
+ ({ className, size, style, children, ...rest }: SwitchThumbProps): import("react").JSX.Element;
15
15
  displayName: string;
16
16
  };
17
17
  declare const SwitchIcon: {
18
- ({ children, className, position, size, transition, ...rest }: SwitchIconProps): import("react").JSX.Element;
18
+ ({ children, className, position, size, ...rest }: SwitchIconProps): import("react").JSX.Element;
19
19
  displayName: string;
20
20
  };
21
21
  //#endregion
@@ -1,21 +1,38 @@
1
1
  "use client";
2
- import { useMotionComponent } from "../../MotionProvider/index.mjs";
3
2
  import { rootVariants, styles, thumbVariants } from "./style.mjs";
4
- import { createContext, use, useMemo, useRef, useState } from "react";
3
+ import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
5
4
  import { jsx } from "react/jsx-runtime";
6
5
  import { cx } from "antd-style";
7
- import { useReducedMotion } from "motion/react";
8
6
  import useMergeState from "use-merge-value";
9
7
  import { Switch } from "@base-ui/react/switch";
8
+ import { animate, motionValue } from "motion";
10
9
  //#region src/base-ui/Switch/atoms.tsx
10
+ const THUMB_METRICS = {
11
+ default: {
12
+ checkedX: 14,
13
+ pressedCheckedX: 10,
14
+ pressedWidth: 22,
15
+ width: 18
16
+ },
17
+ small: {
18
+ checkedX: 12,
19
+ pressedCheckedX: 8,
20
+ pressedWidth: 16,
21
+ width: 12
22
+ }
23
+ };
24
+ const THUMB_SPRING = {
25
+ damping: 24,
26
+ stiffness: 360,
27
+ type: "spring"
28
+ };
11
29
  const SwitchContext = createContext(null);
12
30
  const useSwitchContext = () => {
13
31
  const context = use(SwitchContext);
14
32
  if (!context) throw new Error("useSwitchContext must be used within a SwitchRoot");
15
33
  return context;
16
34
  };
17
- const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onClick, size = "default", children, disabled, readOnly, required, inputRef, id, name, ...rest }) => {
18
- const Motion = useMotionComponent();
35
+ const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onClick, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size = "default", children, disabled, readOnly, required, inputRef, id, name, ...rest }) => {
19
36
  const [isPressed, setIsPressed] = useState(false);
20
37
  const lastEventRef = useRef(null);
21
38
  const [isChecked, setIsChecked] = useMergeState(defaultChecked ?? false, {
@@ -40,9 +57,31 @@ const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onCli
40
57
  lastEventRef.current = event;
41
58
  onClick?.(!isChecked, event);
42
59
  };
60
+ const isInteractive = !disabled && !readOnly;
43
61
  const handleKeyDown = (event) => {
44
62
  if (event.key === "Enter" || event.key === " ") lastEventRef.current = event;
45
- rest.onKeyDown?.(event);
63
+ if (event.key === " " && isInteractive) setIsPressed(true);
64
+ onKeyDown?.(event);
65
+ };
66
+ const handleKeyUp = (event) => {
67
+ if (event.key === " ") setIsPressed(false);
68
+ onKeyUp?.(event);
69
+ };
70
+ const handlePointerDown = (event) => {
71
+ if (isInteractive) setIsPressed(true);
72
+ onPointerDown?.(event);
73
+ };
74
+ const handlePointerUp = (event) => {
75
+ setIsPressed(false);
76
+ onPointerUp?.(event);
77
+ };
78
+ const handlePointerCancel = (event) => {
79
+ setIsPressed(false);
80
+ onPointerCancel?.(event);
81
+ };
82
+ const handlePointerLeave = (event) => {
83
+ setIsPressed(false);
84
+ onPointerLeave?.(event);
46
85
  };
47
86
  return /* @__PURE__ */ jsx(SwitchContext, {
48
87
  value: contextValue,
@@ -56,16 +95,16 @@ const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onCli
56
95
  name,
57
96
  readOnly,
58
97
  required,
59
- render: /* @__PURE__ */ jsx(Motion.button, {
98
+ render: /* @__PURE__ */ jsx("button", {
60
99
  ...rest,
61
100
  className: cx(baseClassName, className),
62
- initial: false,
63
- whileTap: "tap",
64
101
  onClick: handleClick,
65
102
  onKeyDown: handleKeyDown,
66
- onTap: () => setIsPressed(false),
67
- onTapCancel: () => setIsPressed(false),
68
- onTapStart: () => setIsPressed(true)
103
+ onKeyUp: handleKeyUp,
104
+ onPointerCancel: handlePointerCancel,
105
+ onPointerDown: handlePointerDown,
106
+ onPointerLeave: handlePointerLeave,
107
+ onPointerUp: handlePointerUp
69
108
  }),
70
109
  onCheckedChange: setIsChecked,
71
110
  children
@@ -73,23 +112,54 @@ const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onCli
73
112
  });
74
113
  };
75
114
  SwitchRoot.displayName = "SwitchRoot";
76
- const SwitchThumb = ({ className, pressedAnimation, size = "default", transition = {
77
- damping: 24,
78
- stiffness: 360,
79
- type: "spring"
80
- }, children, ...rest }) => {
81
- const Motion = useMotionComponent();
82
- const { isPressed } = useSwitchContext();
83
- const shouldReduceMotion = useReducedMotion();
115
+ const SwitchThumb = ({ className, size = "default", style, children, ...rest }) => {
116
+ const { isChecked, isPressed } = useSwitchContext();
117
+ const ref = useRef(null);
84
118
  const baseClassName = thumbVariants({ size });
85
- const effectiveAnimate = !shouldReduceMotion && isPressed ? pressedAnimation || { width: size === "small" ? 16 : 22 } : void 0;
86
- const effectiveTransition = shouldReduceMotion ? { duration: 0 } : transition;
87
- return /* @__PURE__ */ jsx(Switch.Thumb, { render: /* @__PURE__ */ jsx(Motion.span, {
88
- layout: true,
89
- animate: effectiveAnimate,
90
- className: cx(baseClassName, className),
91
- transition: effectiveTransition,
119
+ const metrics = THUMB_METRICS[size];
120
+ const targetX = isChecked ? isPressed ? metrics.pressedCheckedX : metrics.checkedX : 0;
121
+ const targetWidth = isPressed ? metrics.pressedWidth : metrics.width;
122
+ const [values] = useState(() => ({
123
+ width: motionValue(targetWidth),
124
+ x: motionValue(targetX)
125
+ }));
126
+ const [initialStyle] = useState(() => ({
127
+ "--switch-x": `${targetX}px`,
128
+ "width": targetWidth
129
+ }));
130
+ useEffect(() => {
131
+ const el = ref.current;
132
+ if (!el) return;
133
+ const unsubscribeX = values.x.on("change", (x) => {
134
+ el.style.setProperty("--switch-x", `${x}px`);
135
+ });
136
+ const unsubscribeWidth = values.width.on("change", (width) => {
137
+ el.style.setProperty("width", `${width}px`);
138
+ });
139
+ return () => {
140
+ unsubscribeX();
141
+ unsubscribeWidth();
142
+ };
143
+ }, [values]);
144
+ useEffect(() => {
145
+ const transition = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false ? { duration: 0 } : THUMB_SPRING;
146
+ const animations = [animate(values.x, targetX, transition), animate(values.width, targetWidth, transition)];
147
+ return () => {
148
+ for (const animation of animations) animation.stop();
149
+ };
150
+ }, [
151
+ values,
152
+ targetX,
153
+ targetWidth
154
+ ]);
155
+ return /* @__PURE__ */ jsx(Switch.Thumb, { render: /* @__PURE__ */ jsx("span", {
92
156
  ...rest,
157
+ className: cx(baseClassName, className),
158
+ ref,
159
+ style: {
160
+ ...initialStyle,
161
+ ...style
162
+ },
93
163
  children
94
164
  }) });
95
165
  };
@@ -99,31 +169,10 @@ const getIconPositionClass = (position, size) => {
99
169
  if (position === "left") return size === "small" ? styles.iconLeftSmall : styles.iconLeft;
100
170
  return size === "small" ? styles.iconRightSmall : styles.iconRight;
101
171
  };
102
- const SwitchIcon = ({ children, className, position, size = "default", transition = {
103
- bounce: 0,
104
- type: "spring"
105
- }, ...rest }) => {
106
- const Motion = useMotionComponent();
107
- const { isChecked } = useSwitchContext();
108
- const shouldReduceMotion = useReducedMotion();
109
- const isAnimated = useMemo(() => {
110
- if (position === "right") return !isChecked;
111
- if (position === "left") return isChecked;
112
- if (position === "thumb") return true;
113
- return false;
114
- }, [position, isChecked]);
172
+ const SwitchIcon = ({ children, className, position, size = "default", ...rest }) => {
115
173
  const positionClass = getIconPositionClass(position, size);
116
- const effectiveTransition = shouldReduceMotion ? { duration: 0 } : transition;
117
- return /* @__PURE__ */ jsx(Motion.span, {
118
- animate: isAnimated ? {
119
- opacity: 1,
120
- scale: 1
121
- } : {
122
- opacity: 0,
123
- scale: 0
124
- },
174
+ return /* @__PURE__ */ jsx("span", {
125
175
  className: cx(styles.icon, positionClass, className),
126
- transition: effectiveTransition,
127
176
  ...rest,
128
177
  children
129
178
  });
@@ -1 +1 @@
1
- {"version":3,"file":"atoms.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Switch } from '@base-ui/react/switch';\nimport { cx } from 'antd-style';\nimport { useReducedMotion } from 'motion/react';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { createContext, use, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { rootVariants, styles, thumbVariants } from './style';\nimport type {\n SwitchChangeEventHandler,\n SwitchContextType,\n SwitchIconPosition,\n SwitchIconProps,\n SwitchRootProps,\n SwitchThumbProps,\n} from './type';\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n const context = use(SwitchContext);\n if (!context) {\n throw new Error('useSwitchContext must be used within a SwitchRoot');\n }\n return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n onCheckedChange?: SwitchChangeEventHandler;\n onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n checked,\n className,\n defaultChecked,\n onCheckedChange,\n onClick,\n size = 'default',\n children,\n disabled,\n readOnly,\n required,\n inputRef,\n id,\n name,\n ...rest\n}: SwitchRootInternalProps) => {\n const Motion = useMotionComponent();\n const [isPressed, setIsPressed] = useState(false);\n const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n null,\n );\n\n const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n defaultValue: defaultChecked,\n onChange: (value: boolean) => {\n if (lastEventRef.current) {\n onCheckedChange?.(value, lastEventRef.current);\n }\n },\n value: checked,\n });\n\n const baseClassName = rootVariants({ size });\n\n const contextValue = useMemo(\n () => ({\n isChecked: Boolean(isChecked),\n isPressed,\n setIsChecked: (value: boolean) => setIsChecked(value),\n setIsPressed,\n }),\n [isChecked, isPressed, setIsChecked],\n );\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n lastEventRef.current = event;\n onClick?.(!isChecked, event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n lastEventRef.current = event;\n }\n (rest as any).onKeyDown?.(event);\n };\n\n return (\n <SwitchContext value={contextValue}>\n <Switch.Root\n nativeButton\n checked={isChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={id}\n inputRef={inputRef}\n name={name}\n readOnly={readOnly}\n required={required}\n render={\n <Motion.button\n {...rest}\n className={cx(baseClassName, className)}\n initial={false}\n whileTap=\"tap\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onTap={() => setIsPressed(false)}\n onTapCancel={() => setIsPressed(false)}\n onTapStart={() => setIsPressed(true)}\n />\n }\n onCheckedChange={setIsChecked}\n >\n {children}\n </Switch.Root>\n </SwitchContext>\n );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n className,\n pressedAnimation,\n size = 'default',\n transition = { damping: 24, stiffness: 360, type: 'spring' },\n children,\n ...rest\n}: SwitchThumbProps) => {\n const Motion = useMotionComponent();\n const { isPressed } = useSwitchContext();\n const shouldReduceMotion = useReducedMotion();\n const baseClassName = thumbVariants({ size });\n\n const defaultPressedAnimation = {\n width: size === 'small' ? 16 : 22,\n };\n\n const effectiveAnimate =\n !shouldReduceMotion && isPressed ? pressedAnimation || defaultPressedAnimation : undefined;\n const effectiveTransition = shouldReduceMotion ? { duration: 0 } : transition;\n\n return (\n <Switch.Thumb\n render={\n <Motion.span\n layout\n animate={effectiveAnimate}\n className={cx(baseClassName, className)}\n transition={effectiveTransition}\n {...rest}\n >\n {children}\n </Motion.span>\n }\n />\n );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst getIconPositionClass = (position: SwitchIconPosition, size: 'default' | 'small') => {\n if (position === 'thumb') return styles.iconThumb;\n if (position === 'left') return size === 'small' ? styles.iconLeftSmall : styles.iconLeft;\n return size === 'small' ? styles.iconRightSmall : styles.iconRight;\n};\n\nexport const SwitchIcon = ({\n children,\n className,\n position,\n size = 'default',\n transition = { bounce: 0, type: 'spring' },\n ...rest\n}: SwitchIconProps) => {\n const Motion = useMotionComponent();\n const { isChecked } = useSwitchContext();\n const shouldReduceMotion = useReducedMotion();\n\n const isAnimated = useMemo(() => {\n if (position === 'right') return !isChecked;\n if (position === 'left') return isChecked;\n if (position === 'thumb') return true;\n return false;\n }, [position, isChecked]);\n\n const positionClass = getIconPositionClass(position, size);\n const effectiveTransition = shouldReduceMotion ? { duration: 0 } : transition;\n\n return (\n <Motion.span\n animate={isAnimated ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0 }}\n className={cx(styles.icon, positionClass, className)}\n transition={effectiveTransition}\n {...rest}\n >\n {children}\n </Motion.span>\n );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nexport { styles as switchStyles } from './style';\n"],"mappings":"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"}
1
+ {"version":3,"file":"atoms.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Switch } from '@base-ui/react/switch';\nimport { cx } from 'antd-style';\nimport { animate, motionValue } from 'motion';\nimport type { CSSProperties, KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport { createContext, use, useEffect, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { rootVariants, styles, thumbVariants } from './style';\nimport type {\n SwitchChangeEventHandler,\n SwitchContextType,\n SwitchIconPosition,\n SwitchIconProps,\n SwitchRootProps,\n SwitchSize,\n SwitchThumbProps,\n} from './type';\n\nconst THUMB_METRICS: Record<\n SwitchSize,\n { checkedX: number; pressedCheckedX: number; pressedWidth: number; width: number }\n> = {\n default: { checkedX: 14, pressedCheckedX: 10, pressedWidth: 22, width: 18 },\n small: { checkedX: 12, pressedCheckedX: 8, pressedWidth: 16, width: 12 },\n};\n\nconst THUMB_SPRING = { damping: 24, stiffness: 360, type: 'spring' as const };\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n const context = use(SwitchContext);\n if (!context) {\n throw new Error('useSwitchContext must be used within a SwitchRoot');\n }\n return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n onCheckedChange?: SwitchChangeEventHandler;\n onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n checked,\n className,\n defaultChecked,\n onCheckedChange,\n onClick,\n onKeyDown,\n onKeyUp,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n size = 'default',\n children,\n disabled,\n readOnly,\n required,\n inputRef,\n id,\n name,\n ...rest\n}: SwitchRootInternalProps) => {\n const [isPressed, setIsPressed] = useState(false);\n const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n null,\n );\n\n const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n defaultValue: defaultChecked,\n onChange: (value: boolean) => {\n if (lastEventRef.current) {\n onCheckedChange?.(value, lastEventRef.current);\n }\n },\n value: checked,\n });\n\n const baseClassName = rootVariants({ size });\n\n const contextValue = useMemo(\n () => ({\n isChecked: Boolean(isChecked),\n isPressed,\n setIsChecked: (value: boolean) => setIsChecked(value),\n setIsPressed,\n }),\n [isChecked, isPressed, setIsChecked],\n );\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n lastEventRef.current = event;\n onClick?.(!isChecked, event);\n };\n\n const isInteractive = !disabled && !readOnly;\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n lastEventRef.current = event;\n }\n if (event.key === ' ' && isInteractive) {\n setIsPressed(true);\n }\n onKeyDown?.(event);\n };\n\n const handleKeyUp = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === ' ') {\n setIsPressed(false);\n }\n onKeyUp?.(event);\n };\n\n const handlePointerDown = (event: PointerEvent<HTMLButtonElement>) => {\n if (isInteractive) {\n setIsPressed(true);\n }\n onPointerDown?.(event);\n };\n\n const handlePointerUp = (event: PointerEvent<HTMLButtonElement>) => {\n setIsPressed(false);\n onPointerUp?.(event);\n };\n\n const handlePointerCancel = (event: PointerEvent<HTMLButtonElement>) => {\n setIsPressed(false);\n onPointerCancel?.(event);\n };\n\n const handlePointerLeave = (event: PointerEvent<HTMLButtonElement>) => {\n setIsPressed(false);\n onPointerLeave?.(event);\n };\n\n return (\n <SwitchContext value={contextValue}>\n <Switch.Root\n nativeButton\n checked={isChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={id}\n inputRef={inputRef}\n name={name}\n readOnly={readOnly}\n required={required}\n render={\n <button\n {...rest}\n className={cx(baseClassName, className)}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n onPointerCancel={handlePointerCancel}\n onPointerDown={handlePointerDown}\n onPointerLeave={handlePointerLeave}\n onPointerUp={handlePointerUp}\n />\n }\n onCheckedChange={setIsChecked}\n >\n {children}\n </Switch.Root>\n </SwitchContext>\n );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n className,\n size = 'default',\n style,\n children,\n ...rest\n}: SwitchThumbProps) => {\n const { isChecked, isPressed } = useSwitchContext();\n const ref = useRef<HTMLSpanElement>(null);\n const baseClassName = thumbVariants({ size });\n\n const metrics = THUMB_METRICS[size];\n const targetX = isChecked ? (isPressed ? metrics.pressedCheckedX : metrics.checkedX) : 0;\n const targetWidth = isPressed ? metrics.pressedWidth : metrics.width;\n\n const [values] = useState(() => ({\n width: motionValue(targetWidth),\n x: motionValue(targetX),\n }));\n\n // animated keys stay referentially stable so React never rewrites mid-flight inline values\n const [initialStyle] = useState<CSSProperties>(\n () => ({ '--switch-x': `${targetX}px`, 'width': targetWidth }) as CSSProperties,\n );\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n const unsubscribeX = values.x.on('change', (x) => {\n el.style.setProperty('--switch-x', `${x}px`);\n });\n const unsubscribeWidth = values.width.on('change', (width) => {\n el.style.setProperty('width', `${width}px`);\n });\n return () => {\n unsubscribeX();\n unsubscribeWidth();\n };\n }, [values]);\n\n useEffect(() => {\n const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n const transition = reduceMotion ? { duration: 0 } : THUMB_SPRING;\n const animations = [\n animate(values.x, targetX, transition),\n animate(values.width, targetWidth, transition),\n ];\n return () => {\n for (const animation of animations) animation.stop();\n };\n }, [values, targetX, targetWidth]);\n\n return (\n <Switch.Thumb\n render={\n <span\n {...rest}\n className={cx(baseClassName, className)}\n ref={ref}\n style={{ ...initialStyle, ...style }}\n >\n {children}\n </span>\n }\n />\n );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst getIconPositionClass = (position: SwitchIconPosition, size: 'default' | 'small') => {\n if (position === 'thumb') return styles.iconThumb;\n if (position === 'left') return size === 'small' ? styles.iconLeftSmall : styles.iconLeft;\n return size === 'small' ? styles.iconRightSmall : styles.iconRight;\n};\n\nexport const SwitchIcon = ({\n children,\n className,\n position,\n size = 'default',\n ...rest\n}: SwitchIconProps) => {\n const positionClass = getIconPositionClass(position, size);\n\n return (\n <span className={cx(styles.icon, positionClass, className)} {...rest}>\n {children}\n </span>\n );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nexport { styles as switchStyles } from './style';\n"],"mappings":"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"}
@@ -13,18 +13,50 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
13
13
  justify-content: center;
14
14
 
15
15
  color: ${cssVar.colorBgLayout};
16
+
17
+ transition:
18
+ opacity 200ms ${cssVar.motionEaseOut},
19
+ scale 200ms ${cssVar.motionEaseOut};
20
+
21
+ @media (prefers-reduced-motion: reduce) {
22
+ transition-duration: 0s;
23
+ }
16
24
  `,
17
25
  iconLeft: css`
18
26
  inset-inline-start: 4px;
27
+ scale: 0;
28
+ opacity: 0;
29
+
30
+ [data-checked] & {
31
+ scale: 1;
32
+ opacity: 1;
33
+ }
19
34
  `,
20
35
  iconLeftSmall: css`
21
36
  inset-inline-start: 4px;
37
+ scale: 0;
38
+ opacity: 0;
39
+
40
+ [data-checked] & {
41
+ scale: 1;
42
+ opacity: 1;
43
+ }
22
44
  `,
23
45
  iconRight: css`
24
46
  inset-inline-end: 4px;
47
+
48
+ [data-checked] & {
49
+ scale: 0;
50
+ opacity: 0;
51
+ }
25
52
  `,
26
53
  iconRightSmall: css`
27
54
  inset-inline-end: 4px;
55
+
56
+ [data-checked] & {
57
+ scale: 0;
58
+ opacity: 0;
59
+ }
28
60
  `,
29
61
  iconThumb: css`
30
62
  position: relative;
@@ -50,6 +82,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
50
82
  }
51
83
  `,
52
84
  root: css`
85
+ --switch-dir: 1;
86
+
53
87
  cursor: pointer;
54
88
  user-select: none;
55
89
 
@@ -73,6 +107,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
73
107
  background 200ms ${cssVar.motionEaseOut},
74
108
  box-shadow 200ms ${cssVar.motionEaseOut};
75
109
 
110
+ &:dir(rtl) {
111
+ --switch-dir: -1;
112
+ }
113
+
114
+ [dir='rtl'] & {
115
+ --switch-dir: -1;
116
+ }
117
+
76
118
  &:focus-visible {
77
119
  outline: 2px solid ${cssVar.colorPrimaryBorder};
78
120
  outline-offset: 1px;
@@ -83,7 +125,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
83
125
  }
84
126
 
85
127
  &[data-checked] {
86
- justify-content: flex-end;
87
128
  background: ${cssVar.colorPrimary};
88
129
  box-shadow: inset 0 1.5px 3px rgb(0 0 0 / 18%);
89
130
 
@@ -112,6 +153,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
112
153
  height: 16px;
113
154
  `,
114
155
  thumb: css`
156
+ transform: translateX(calc(var(--switch-x, 0px) * var(--switch-dir, 1)));
157
+
115
158
  display: flex;
116
159
  flex-shrink: 0;
117
160
  align-items: center;
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Switch/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n icon: css`\n pointer-events: none;\n\n position: absolute;\n inset-block: 0;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: ${cssVar.colorBgLayout};\n `,\n iconLeft: css`\n inset-inline-start: 4px;\n `,\n iconLeftSmall: css`\n inset-inline-start: 4px;\n `,\n iconRight: css`\n inset-inline-end: 4px;\n `,\n iconRightSmall: css`\n inset-inline-end: 4px;\n `,\n iconThumb: css`\n position: relative;\n inset: unset;\n transform: none;\n color: ${cssVar.colorPrimary};\n `,\n loading: css`\n @keyframes lobe-switch-loading {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n animation: lobe-switch-loading 1s linear infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 0s;\n }\n `,\n root: css`\n cursor: pointer;\n user-select: none;\n\n position: relative;\n\n overflow: hidden;\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n\n box-sizing: border-box;\n padding: 2px;\n border: 0;\n border-radius: 100px;\n\n background: ${cssVar.colorFillSecondary};\n outline: none;\n box-shadow: inset 0 1.5px 2px rgb(0 0 0 / 8%);\n\n transition:\n background 200ms ${cssVar.motionEaseOut},\n box-shadow 200ms ${cssVar.motionEaseOut};\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n\n &:hover:not([data-disabled]) {\n background: ${cssVar.colorFill};\n }\n\n &[data-checked] {\n justify-content: flex-end;\n background: ${cssVar.colorPrimary};\n box-shadow: inset 0 1.5px 3px rgb(0 0 0 / 18%);\n\n &:hover:not([data-disabled]) {\n background: ${cssVar.colorPrimaryHover};\n }\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.45;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n rootDefault: css`\n width: 36px;\n min-width: 36px;\n height: 22px;\n `,\n rootSmall: css`\n width: 28px;\n min-width: 28px;\n height: 16px;\n `,\n thumb: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n border-radius: 50%;\n\n background: ${cssVar.colorBgContainer};\n box-shadow:\n 0 0 0 0.5px rgb(0 0 0 / 4%),\n 0 1px 1px rgb(0 0 0 / 6%),\n 0 3px 8px rgb(0 30 80 / 16%);\n\n transition: box-shadow 200ms ${cssVar.motionEaseOut};\n\n [role='switch']:hover:not([data-disabled]) > & {\n box-shadow:\n 0 0 0 0.5px rgb(0 0 0 / 4%),\n 0 1px 1px rgb(0 0 0 / 8%),\n 0 6px 14px rgb(0 30 80 / 24%);\n }\n\n [data-disabled] > & {\n box-shadow: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n thumbDefault: css`\n width: 18px;\n height: 18px;\n `,\n thumbSmall: css`\n width: 12px;\n height: 12px;\n `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n defaultVariants: {\n size: 'default',\n },\n variants: {\n size: {\n default: styles.rootDefault,\n small: styles.rootSmall,\n },\n },\n});\n\nexport const thumbVariants = cva(styles.thumb, {\n defaultVariants: {\n size: 'default',\n },\n variants: {\n size: {\n default: styles.thumbDefault,\n small: styles.thumbSmall,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;aAUE,OAAO,cAAc;;CAEhC,UAAU,GAAG;;;CAGb,eAAe,GAAG;;;CAGlB,WAAW,GAAG;;;CAGd,gBAAgB,GAAG;;;CAGnB,WAAW,GAAG;;;;aAIH,OAAO,aAAa;;CAE/B,SAAS,GAAG;;;;;;;;;;;;;;;;;CAiBZ,MAAM,GAAG;;;;;;;;;;;;;;;;kBAgBO,OAAO,mBAAmB;;;;;yBAKnB,OAAO,cAAc;yBACrB,OAAO,cAAc;;;2BAGnB,OAAO,mBAAmB;;;;;oBAKjC,OAAO,UAAU;;;;;oBAKjB,OAAO,aAAa;;;;sBAIlB,OAAO,kBAAkB;;;;;;;;;;;;;CAa7C,aAAa,GAAG;;;;;CAKhB,WAAW,GAAG;;;;;CAKd,OAAO,GAAG;;;;;;;;kBAQM,OAAO,iBAAiB;;;;;;mCAMP,OAAO,cAAc;;;;;;;;;;;;;;;;;CAiBtD,cAAc,GAAG;;;;CAIjB,YAAY,GAAG;;;;AAIjB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,MAAM,UACR;CACA,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,gBAAgB,IAAI,OAAO,OAAO;CAC7C,iBAAiB,EACf,MAAM,UACR;CACA,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;CAChB,EACF;AACF,CAAC"}
1
+ {"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Switch/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n icon: css`\n pointer-events: none;\n\n position: absolute;\n inset-block: 0;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: ${cssVar.colorBgLayout};\n\n transition:\n opacity 200ms ${cssVar.motionEaseOut},\n scale 200ms ${cssVar.motionEaseOut};\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n iconLeft: css`\n inset-inline-start: 4px;\n scale: 0;\n opacity: 0;\n\n [data-checked] & {\n scale: 1;\n opacity: 1;\n }\n `,\n iconLeftSmall: css`\n inset-inline-start: 4px;\n scale: 0;\n opacity: 0;\n\n [data-checked] & {\n scale: 1;\n opacity: 1;\n }\n `,\n iconRight: css`\n inset-inline-end: 4px;\n\n [data-checked] & {\n scale: 0;\n opacity: 0;\n }\n `,\n iconRightSmall: css`\n inset-inline-end: 4px;\n\n [data-checked] & {\n scale: 0;\n opacity: 0;\n }\n `,\n iconThumb: css`\n position: relative;\n inset: unset;\n transform: none;\n color: ${cssVar.colorPrimary};\n `,\n loading: css`\n @keyframes lobe-switch-loading {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n animation: lobe-switch-loading 1s linear infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 0s;\n }\n `,\n root: css`\n --switch-dir: 1;\n\n cursor: pointer;\n user-select: none;\n\n position: relative;\n\n overflow: hidden;\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n\n box-sizing: border-box;\n padding: 2px;\n border: 0;\n border-radius: 100px;\n\n background: ${cssVar.colorFillSecondary};\n outline: none;\n box-shadow: inset 0 1.5px 2px rgb(0 0 0 / 8%);\n\n transition:\n background 200ms ${cssVar.motionEaseOut},\n box-shadow 200ms ${cssVar.motionEaseOut};\n\n &:dir(rtl) {\n --switch-dir: -1;\n }\n\n [dir='rtl'] & {\n --switch-dir: -1;\n }\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n\n &:hover:not([data-disabled]) {\n background: ${cssVar.colorFill};\n }\n\n &[data-checked] {\n background: ${cssVar.colorPrimary};\n box-shadow: inset 0 1.5px 3px rgb(0 0 0 / 18%);\n\n &:hover:not([data-disabled]) {\n background: ${cssVar.colorPrimaryHover};\n }\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.45;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n rootDefault: css`\n width: 36px;\n min-width: 36px;\n height: 22px;\n `,\n rootSmall: css`\n width: 28px;\n min-width: 28px;\n height: 16px;\n `,\n thumb: css`\n transform: translateX(calc(var(--switch-x, 0px) * var(--switch-dir, 1)));\n\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n border-radius: 50%;\n\n background: ${cssVar.colorBgContainer};\n box-shadow:\n 0 0 0 0.5px rgb(0 0 0 / 4%),\n 0 1px 1px rgb(0 0 0 / 6%),\n 0 3px 8px rgb(0 30 80 / 16%);\n\n transition: box-shadow 200ms ${cssVar.motionEaseOut};\n\n [role='switch']:hover:not([data-disabled]) > & {\n box-shadow:\n 0 0 0 0.5px rgb(0 0 0 / 4%),\n 0 1px 1px rgb(0 0 0 / 8%),\n 0 6px 14px rgb(0 30 80 / 24%);\n }\n\n [data-disabled] > & {\n box-shadow: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n thumbDefault: css`\n width: 18px;\n height: 18px;\n `,\n thumbSmall: css`\n width: 12px;\n height: 12px;\n `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n defaultVariants: {\n size: 'default',\n },\n variants: {\n size: {\n default: styles.rootDefault,\n small: styles.rootSmall,\n },\n },\n});\n\nexport const thumbVariants = cva(styles.thumb, {\n defaultVariants: {\n size: 'default',\n },\n variants: {\n size: {\n default: styles.thumbDefault,\n small: styles.thumbSmall,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;aAUE,OAAO,cAAc;;;sBAGZ,OAAO,cAAc;oBACvB,OAAO,cAAc;;;;;;CAMvC,UAAU,GAAG;;;;;;;;;;CAUb,eAAe,GAAG;;;;;;;;;;CAUlB,WAAW,GAAG;;;;;;;;CAQd,gBAAgB,GAAG;;;;;;;;CAQnB,WAAW,GAAG;;;;aAIH,OAAO,aAAa;;CAE/B,SAAS,GAAG;;;;;;;;;;;;;;;;;CAiBZ,MAAM,GAAG;;;;;;;;;;;;;;;;;;kBAkBO,OAAO,mBAAmB;;;;;yBAKnB,OAAO,cAAc;yBACrB,OAAO,cAAc;;;;;;;;;;;2BAWnB,OAAO,mBAAmB;;;;;oBAKjC,OAAO,UAAU;;;;oBAIjB,OAAO,aAAa;;;;sBAIlB,OAAO,kBAAkB;;;;;;;;;;;;;CAa7C,aAAa,GAAG;;;;;CAKhB,WAAW,GAAG;;;;;CAKd,OAAO,GAAG;;;;;;;;;;kBAUM,OAAO,iBAAiB;;;;;;mCAMP,OAAO,cAAc;;;;;;;;;;;;;;;;;CAiBtD,cAAc,GAAG;;;;CAIjB,YAAY,GAAG;;;;AAIjB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,MAAM,UACR;CACA,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,gBAAgB,IAAI,OAAO,OAAO;CAC7C,iBAAiB,EACf,MAAM,UACR;CACA,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;CAChB,EACF;AACF,CAAC"}
@@ -1,5 +1,4 @@
1
1
  import { CSSProperties, ComponentProps, KeyboardEvent, MouseEvent, ReactNode, Ref } from "react";
2
- import { HTMLMotionProps, TargetAndTransition, Transition } from "motion/react";
3
2
  import { Switch } from "@base-ui/react/switch";
4
3
  //#region src/base-ui/Switch/type.d.ts
5
4
  type SwitchSize = 'default' | 'small';
@@ -21,19 +20,16 @@ interface SwitchContextType {
21
20
  setIsChecked: (checked: boolean) => void;
22
21
  setIsPressed: (pressed: boolean) => void;
23
22
  }
24
- type SwitchRootProps = Omit<ComponentProps<typeof Switch.Root>, 'render'> & HTMLMotionProps<'button'> & {
23
+ type SwitchRootProps = Omit<ComponentProps<typeof Switch.Root>, 'render'> & ComponentProps<'button'> & {
25
24
  size?: SwitchSize;
26
25
  };
27
- type SwitchThumbProps = Omit<ComponentProps<typeof Switch.Thumb>, 'render'> & HTMLMotionProps<'span'> & {
28
- pressedAnimation?: TargetAndTransition | boolean;
26
+ type SwitchThumbProps = Omit<ComponentProps<typeof Switch.Thumb>, 'render'> & ComponentProps<'span'> & {
29
27
  size?: SwitchSize;
30
- transition?: Transition;
31
28
  };
32
29
  type SwitchIconPosition = 'left' | 'right' | 'thumb';
33
- type SwitchIconProps = HTMLMotionProps<'span'> & {
30
+ type SwitchIconProps = ComponentProps<'span'> & {
34
31
  position: SwitchIconPosition;
35
32
  size?: SwitchSize;
36
- transition?: Transition;
37
33
  };
38
34
  interface SwitchProps {
39
35
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from './atoms';\nimport { styles } from './style';\nimport type { TabsProps } from './type';\n\nconst Tabs: FC<TabsProps> = ({\n activeKey,\n className,\n classNames,\n defaultActiveKey,\n items,\n onChange,\n orientation = 'horizontal',\n ref,\n size = 'middle',\n style,\n styles: customStyles,\n variant = 'rounded',\n}) => {\n const initialActiveKey = defaultActiveKey ?? items?.find((item) => !item.disabled)?.key ?? null;\n const [value, setValue] = useControlledState<string | null>(initialActiveKey, {\n defaultValue: initialActiveKey,\n onChange: (next) => {\n if (next != null) onChange?.(next);\n },\n value: activeKey,\n });\n\n const hasPanels = items?.some((item) => item.children != null);\n\n return (\n <TabsRoot\n className={cx(styles.root, classNames?.root, className)}\n orientation={orientation}\n ref={ref}\n size={size}\n style={{ ...style, ...customStyles?.root }}\n value={value}\n variant={variant}\n onValueChange={(next) => setValue(next ?? null)}\n >\n <TabsList className={cx(classNames?.list)} style={customStyles?.list}>\n <TabsIndicator className={cx(classNames?.indicator)} style={customStyles?.indicator} />\n {items?.map((item) => (\n <TabsTab\n className={cx(classNames?.tab)}\n disabled={item.disabled}\n key={item.key}\n style={customStyles?.tab}\n value={item.key}\n >\n {item.icon}\n {item.label}\n </TabsTab>\n ))}\n </TabsList>\n {hasPanels &&\n items?.map((item) => (\n <TabsPanel\n className={cx(classNames?.panel)}\n key={item.key}\n style={customStyles?.panel}\n value={item.key}\n >\n {item.children}\n </TabsPanel>\n ))}\n </TabsRoot>\n );\n};\n\nTabs.displayName = 'Tabs';\n\nexport default Tabs;\n"],"mappings":";;;;;;;AAUA,MAAM,QAAuB,EAC3B,WACA,WACA,YACA,kBACA,OACA,UACA,cAAc,cACd,KACA,OAAO,UACP,OACA,QAAQ,cACR,UAAU,gBACN;CACJ,MAAM,mBAAmB,oBAAoB,OAAO,MAAM,SAAS,CAAC,KAAK,QAAQ,CAAC,EAAE,OAAO;CAC3F,MAAM,CAAC,OAAO,YAAYA,cAAkC,kBAAkB;EAC5E,cAAc;EACd,WAAW,SAAS;GAClB,IAAI,QAAQ,MAAM,WAAW,IAAI;EACnC;EACA,OAAO;CACT,CAAC;CAED,MAAM,YAAY,OAAO,MAAM,SAAS,KAAK,YAAY,IAAI;CAE7D,OACE,qBAAC,UAAD;EACE,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,SAAS;EACzC;EACR;EACC;EACN,OAAO;GAAE,GAAG;GAAO,GAAG,cAAc;EAAK;EAClC;EACE;EACT,gBAAgB,SAAS,SAAS,QAAQ,IAAI;YARhD,CAUE,qBAAC,UAAD;GAAU,WAAW,GAAG,YAAY,IAAI;GAAG,OAAO,cAAc;aAAhE,CACE,oBAAC,eAAD;IAAe,WAAW,GAAG,YAAY,SAAS;IAAG,OAAO,cAAc;GAAY,CAAA,GACrF,OAAO,KAAK,SACX,qBAAC,SAAD;IACE,WAAW,GAAG,YAAY,GAAG;IAC7B,UAAU,KAAK;IAEf,OAAO,cAAc;IACrB,OAAO,KAAK;cALd,CAOG,KAAK,MACL,KAAK,KACC;MANF,KAAK,GAMH,CACV,CACO;MACT,aACC,OAAO,KAAK,SACV,oBAAC,WAAD;GACE,WAAW,GAAG,YAAY,KAAK;GAE/B,OAAO,cAAc;GACrB,OAAO,KAAK;aAEX,KAAK;EACG,GALJ,KAAK,GAKD,CACZ,CACK;;AAEd;AAEA,KAAK,cAAc"}
1
+ {"version":3,"file":"Tabs.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from './atoms';\nimport { styles } from './style';\nimport type { TabsProps } from './type';\n\nconst Tabs: FC<TabsProps> = ({\n activeKey,\n className,\n classNames,\n defaultActiveKey,\n items,\n onChange,\n orientation = 'horizontal',\n ref,\n size = 'middle',\n style,\n styles: customStyles,\n variant = 'rounded',\n}) => {\n const initialActiveKey = defaultActiveKey ?? items?.find((item) => !item.disabled)?.key ?? null;\n const [value, setValue] = useControlledState<string | null>(initialActiveKey, {\n defaultValue: initialActiveKey,\n onChange: (next) => {\n if (next != null) onChange?.(next);\n },\n value: activeKey,\n });\n\n const hasPanels = items?.some((item) => item.children != null);\n\n return (\n <TabsRoot\n className={cx(styles.root, classNames?.root, className)}\n orientation={orientation}\n ref={ref}\n size={size}\n style={{ ...style, ...customStyles?.root }}\n value={value}\n variant={variant}\n onValueChange={(next) => setValue(next ?? null)}\n >\n <TabsList className={cx(classNames?.list)} style={customStyles?.list}>\n <TabsIndicator className={cx(classNames?.indicator)} style={customStyles?.indicator} />\n {items?.map((item) => (\n <TabsTab\n className={cx(classNames?.tab)}\n disabled={item.disabled}\n key={item.key}\n style={customStyles?.tab}\n value={item.key}\n >\n {item.icon}\n {item.label}\n </TabsTab>\n ))}\n </TabsList>\n {hasPanels &&\n items?.map((item) => (\n <TabsPanel\n className={cx(classNames?.panel)}\n key={item.key}\n style={customStyles?.panel}\n value={item.key}\n >\n {item.children}\n </TabsPanel>\n ))}\n </TabsRoot>\n );\n};\n\nTabs.displayName = 'Tabs';\n\nexport default Tabs;\n"],"mappings":";;;;;;;AAUA,MAAM,QAAuB,EAC3B,WACA,WACA,YACA,kBACA,OACA,UACA,cAAc,cACd,KACA,OAAO,UACP,OACA,QAAQ,cACR,UAAU,gBACN;CACJ,MAAM,mBAAmB,oBAAoB,OAAO,MAAM,SAAS,CAAC,KAAK,QAAQ,CAAC,EAAE,OAAO;CAC3F,MAAM,CAAC,OAAO,YAAYA,cAAkC,kBAAkB;EAC5E,cAAc;EACd,WAAW,SAAS;GAClB,IAAI,QAAQ,MAAM,WAAW,IAAI;EACnC;EACA,OAAO;CACT,CAAC;CAED,MAAM,YAAY,OAAO,MAAM,SAAS,KAAK,YAAY,IAAI;CAE7D,OACE,qBAAC,UAAD;EACE,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,SAAS;EACzC;EACR;EACC;EACN,OAAO;GAAE,GAAG;GAAO,GAAG,cAAc;EAAK;EAClC;EACE;EACT,gBAAgB,SAAS,SAAS,QAAQ,IAAI;EARhD,UAAA,CAUE,qBAAC,UAAD;GAAU,WAAW,GAAG,YAAY,IAAI;GAAG,OAAO,cAAc;GAAhE,UAAA,CACE,oBAAC,eAAD;IAAe,WAAW,GAAG,YAAY,SAAS;IAAG,OAAO,cAAc;GAAY,CAAA,GACrF,OAAO,KAAK,SACX,qBAAC,SAAD;IACE,WAAW,GAAG,YAAY,GAAG;IAC7B,UAAU,KAAK;IAEf,OAAO,cAAc;IACrB,OAAO,KAAK;IALd,UAAA,CAOG,KAAK,MACL,KAAK,KACC;GANF,GAAA,KAAK,GAMH,CACV,CACO;EACT,CAAA,GAAA,aACC,OAAO,KAAK,SACV,oBAAC,WAAD;GACE,WAAW,GAAG,YAAY,KAAK;GAE/B,OAAO,cAAc;GACrB,OAAO,KAAK;GAEX,UAAA,KAAK;EACG,GALJ,KAAK,GAKD,CACZ,CACK;;AAEd;AAEA,KAAK,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"atoms.mjs","names":["BaseUITabs"],"sources":["../../../src/base-ui/Tabs/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Tabs as BaseUITabs } from '@base-ui/react/tabs';\nimport { cx } from 'antd-style';\nimport { createContext, type FC, use, useMemo } from 'react';\n\nimport { indicatorVariants, listVariants, styles, tabVariants } from './style';\nimport type {\n TabsIndicatorProps,\n TabsListProps,\n TabsPanelProps,\n TabsRootProps,\n TabsSize,\n TabsTabProps,\n TabsVariant,\n} from './type';\n\ninterface TabsContextValue {\n size: TabsSize;\n variant: TabsVariant;\n}\n\nconst TabsContext = createContext<TabsContextValue>({ size: 'middle', variant: 'rounded' });\n\nexport const useTabsContext = () => use(TabsContext);\n\ntype TabsRootInternalProps = TabsRootProps & {\n size?: TabsSize;\n variant?: TabsVariant;\n};\n\nexport const TabsRoot: FC<TabsRootInternalProps> = ({\n children,\n size = 'middle',\n variant = 'rounded',\n ...rest\n}) => {\n const contextValue = useMemo(() => ({ size, variant }), [size, variant]);\n\n return (\n <TabsContext value={contextValue}>\n <BaseUITabs.Root {...rest}>{children}</BaseUITabs.Root>\n </TabsContext>\n );\n};\n\nTabsRoot.displayName = 'TabsRoot';\n\nexport const TabsList: FC<TabsListProps> = ({ className, variant: variantProp, ...rest }) => {\n const ctx = useTabsContext();\n const variant = variantProp ?? ctx.variant;\n\n return <BaseUITabs.List className={cx(listVariants({ variant }), className)} {...rest} />;\n};\n\nTabsList.displayName = 'TabsList';\n\nexport const TabsTab: FC<TabsTabProps> = ({\n className,\n size: sizeProp,\n variant: variantProp,\n ...rest\n}) => {\n const ctx = useTabsContext();\n const size = sizeProp ?? ctx.size;\n const variant = variantProp ?? ctx.variant;\n\n return <BaseUITabs.Tab className={cx(tabVariants({ size, variant }), className)} {...rest} />;\n};\n\nTabsTab.displayName = 'TabsTab';\n\nexport const TabsPanel: FC<TabsPanelProps> = ({ className, ...rest }) => {\n return <BaseUITabs.Panel className={cx(styles.panel, className)} {...rest} />;\n};\n\nTabsPanel.displayName = 'TabsPanel';\n\nexport const TabsIndicator: FC<TabsIndicatorProps> = ({\n className,\n variant: variantProp,\n ...rest\n}) => {\n const ctx = useTabsContext();\n const variant = variantProp ?? ctx.variant;\n\n return (\n <BaseUITabs.Indicator\n renderBeforeHydration\n className={cx(indicatorVariants({ variant }), className)}\n {...rest}\n />\n );\n};\n\nTabsIndicator.displayName = 'TabsIndicator';\n\nexport { styles as tabsStyles } from './style';\n"],"mappings":";;;;;;;AAsBA,MAAM,cAAc,cAAgC;CAAE,MAAM;CAAU,SAAS;AAAU,CAAC;AAE1F,MAAa,uBAAuB,IAAI,WAAW;AAOnD,MAAa,YAAuC,EAClD,UACA,OAAO,UACP,UAAU,WACV,GAAG,WACC;CACJ,MAAM,eAAe,eAAe;EAAE;EAAM;CAAQ,IAAI,CAAC,MAAM,OAAO,CAAC;CAEvE,OACE,oBAAC,aAAD;EAAa,OAAO;YAClB,oBAACA,KAAW,MAAZ;GAAiB,GAAI;GAAO;EAA0B,CAAA;CAC3C,CAAA;AAEjB;AAEA,SAAS,cAAc;AAEvB,MAAa,YAA+B,EAAE,WAAW,SAAS,aAAa,GAAG,WAAW;CAC3F,MAAM,MAAM,eAAe;CAC3B,MAAM,UAAU,eAAe,IAAI;CAEnC,OAAO,oBAACA,KAAW,MAAZ;EAAiB,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAC1F;AAEA,SAAS,cAAc;AAEvB,MAAa,WAA6B,EACxC,WACA,MAAM,UACN,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,eAAe;CAC3B,MAAM,OAAO,YAAY,IAAI;CAC7B,MAAM,UAAU,eAAe,IAAI;CAEnC,OAAO,oBAACA,KAAW,KAAZ;EAAgB,WAAW,GAAG,YAAY;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAC9F;AAEA,QAAQ,cAAc;AAEtB,MAAa,aAAiC,EAAE,WAAW,GAAG,WAAW;CACvE,OAAO,oBAACA,KAAW,OAAZ;EAAkB,WAAW,GAAG,OAAO,OAAO,SAAS;EAAG,GAAI;CAAO,CAAA;AAC9E;AAEA,UAAU,cAAc;AAExB,MAAa,iBAAyC,EACpD,WACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,eAAe;CAC3B,MAAM,UAAU,eAAe,IAAI;CAEnC,OACE,oBAACA,KAAW,WAAZ;EACE,uBAAA;EACA,WAAW,GAAG,kBAAkB,EAAE,QAAQ,CAAC,GAAG,SAAS;EACvD,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc"}
1
+ {"version":3,"file":"atoms.mjs","names":["BaseUITabs"],"sources":["../../../src/base-ui/Tabs/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Tabs as BaseUITabs } from '@base-ui/react/tabs';\nimport { cx } from 'antd-style';\nimport { createContext, type FC, use, useMemo } from 'react';\n\nimport { indicatorVariants, listVariants, styles, tabVariants } from './style';\nimport type {\n TabsIndicatorProps,\n TabsListProps,\n TabsPanelProps,\n TabsRootProps,\n TabsSize,\n TabsTabProps,\n TabsVariant,\n} from './type';\n\ninterface TabsContextValue {\n size: TabsSize;\n variant: TabsVariant;\n}\n\nconst TabsContext = createContext<TabsContextValue>({ size: 'middle', variant: 'rounded' });\n\nexport const useTabsContext = () => use(TabsContext);\n\ntype TabsRootInternalProps = TabsRootProps & {\n size?: TabsSize;\n variant?: TabsVariant;\n};\n\nexport const TabsRoot: FC<TabsRootInternalProps> = ({\n children,\n size = 'middle',\n variant = 'rounded',\n ...rest\n}) => {\n const contextValue = useMemo(() => ({ size, variant }), [size, variant]);\n\n return (\n <TabsContext value={contextValue}>\n <BaseUITabs.Root {...rest}>{children}</BaseUITabs.Root>\n </TabsContext>\n );\n};\n\nTabsRoot.displayName = 'TabsRoot';\n\nexport const TabsList: FC<TabsListProps> = ({ className, variant: variantProp, ...rest }) => {\n const ctx = useTabsContext();\n const variant = variantProp ?? ctx.variant;\n\n return <BaseUITabs.List className={cx(listVariants({ variant }), className)} {...rest} />;\n};\n\nTabsList.displayName = 'TabsList';\n\nexport const TabsTab: FC<TabsTabProps> = ({\n className,\n size: sizeProp,\n variant: variantProp,\n ...rest\n}) => {\n const ctx = useTabsContext();\n const size = sizeProp ?? ctx.size;\n const variant = variantProp ?? ctx.variant;\n\n return <BaseUITabs.Tab className={cx(tabVariants({ size, variant }), className)} {...rest} />;\n};\n\nTabsTab.displayName = 'TabsTab';\n\nexport const TabsPanel: FC<TabsPanelProps> = ({ className, ...rest }) => {\n return <BaseUITabs.Panel className={cx(styles.panel, className)} {...rest} />;\n};\n\nTabsPanel.displayName = 'TabsPanel';\n\nexport const TabsIndicator: FC<TabsIndicatorProps> = ({\n className,\n variant: variantProp,\n ...rest\n}) => {\n const ctx = useTabsContext();\n const variant = variantProp ?? ctx.variant;\n\n return (\n <BaseUITabs.Indicator\n renderBeforeHydration\n className={cx(indicatorVariants({ variant }), className)}\n {...rest}\n />\n );\n};\n\nTabsIndicator.displayName = 'TabsIndicator';\n\nexport { styles as tabsStyles } from './style';\n"],"mappings":";;;;;;;AAsBA,MAAM,cAAc,cAAgC;CAAE,MAAM;CAAU,SAAS;AAAU,CAAC;AAE1F,MAAa,uBAAuB,IAAI,WAAW;AAOnD,MAAa,YAAuC,EAClD,UACA,OAAO,UACP,UAAU,WACV,GAAG,WACC;CACJ,MAAM,eAAe,eAAe;EAAE;EAAM;CAAQ,IAAI,CAAC,MAAM,OAAO,CAAC;CAEvE,OACE,oBAAC,aAAD;EAAa,OAAO;EAClB,UAAA,oBAACA,KAAW,MAAZ;GAAiB,GAAI;GAAO;EAA0B,CAAA;CAC3C,CAAA;AAEjB;AAEA,SAAS,cAAc;AAEvB,MAAa,YAA+B,EAAE,WAAW,SAAS,aAAa,GAAG,WAAW;CAC3F,MAAM,MAAM,eAAe;CAC3B,MAAM,UAAU,eAAe,IAAI;CAEnC,OAAO,oBAACA,KAAW,MAAZ;EAAiB,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAC1F;AAEA,SAAS,cAAc;AAEvB,MAAa,WAA6B,EACxC,WACA,MAAM,UACN,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,eAAe;CAC3B,MAAM,OAAO,YAAY,IAAI;CAC7B,MAAM,UAAU,eAAe,IAAI;CAEnC,OAAO,oBAACA,KAAW,KAAZ;EAAgB,WAAW,GAAG,YAAY;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAC9F;AAEA,QAAQ,cAAc;AAEtB,MAAa,aAAiC,EAAE,WAAW,GAAG,WAAW;CACvE,OAAO,oBAACA,KAAW,OAAZ;EAAkB,WAAW,GAAG,OAAO,OAAO,SAAS;EAAG,GAAI;CAAO,CAAA;AAC9E;AAEA,UAAU,cAAc;AAExB,MAAa,iBAAyC,EACpD,WACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,eAAe;CAC3B,MAAM,UAAU,eAAe,IAAI;CAEnC,OACE,oBAACA,KAAW,WAAZ;EACE,uBAAA;EACA,WAAW,GAAG,kBAAkB,EAAE,QAAQ,CAAC,GAAG,SAAS;EACvD,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.mjs","names":["BaseToast"],"sources":["../../../src/base-ui/Toast/Toast.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { cssVar, cx } from 'antd-style';\nimport { AlertTriangle, CheckCircle, Info, Loader2, X, XCircle } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useToastContext } from './context';\nimport { actionVariants, rootVariants, styles } from './style';\nimport { type ToastOptions, type ToastProps, type ToastType } from './type';\n\nconst typeIcons: Record<ToastType, typeof Info> = {\n default: Info,\n error: XCircle,\n info: Info,\n loading: Loader2,\n success: CheckCircle,\n warning: AlertTriangle,\n};\n\nconst typeColors: Record<ToastType, string> = {\n default: cssVar.colorText,\n error: cssVar.colorError,\n info: cssVar.colorInfo,\n loading: cssVar.colorPrimary,\n success: cssVar.colorSuccess,\n warning: cssVar.colorWarning,\n};\n\nconst ToastItem = memo<ToastProps>(({ toast, classNames, styles: customStyles }) => {\n const { position, swipeDirection } = useToastContext();\n const toastData = toast.data as ToastOptions | undefined;\n const type = toastData?.type ?? 'default';\n const closable = toastData?.closable ?? true;\n const hideCloseButton = toastData?.hideCloseButton ?? false;\n const showCloseButton = closable && !hideCloseButton;\n const icon = toastData?.icon;\n const title = toast.title ?? toastData?.title;\n const description = toast.description ?? toastData?.description;\n const actionProps = toast.actionProps ?? toastData?.actionProps;\n const actions = toastData?.actions;\n\n const iconColor = typeColors[type];\n const IconComponent = icon ?? typeIcons[type];\n const isLoading = type === 'loading';\n const standaloneDescriptionClassName = cx(\n styles.description,\n styles.descriptionStandalone,\n classNames?.description,\n );\n\n const renderIcon = (): ReactNode => {\n if (!IconComponent) return null;\n return (\n <div className={cx(styles.icon, classNames?.icon)} style={customStyles?.icon}>\n <Icon color={iconColor} icon={IconComponent} size={18} spin={isLoading} />\n </div>\n );\n };\n\n const renderActions = (): ReactNode => {\n if (actions && actions.length > 0) {\n return (\n <div className={cx(styles.actions, classNames?.actions)} style={customStyles?.actions}>\n {actions.map((action, index) => (\n <BaseToast.Action\n key={index}\n style={customStyles?.action}\n className={cx(\n actionVariants({ variant: action.variant ?? 'primary' }),\n classNames?.action,\n )}\n onClick={action.onClick}\n {...action.props}\n >\n {action.label}\n </BaseToast.Action>\n ))}\n </div>\n );\n }\n if (actionProps) {\n return (\n <BaseToast.Action\n className={cx(actionVariants({ variant: 'primary' }), classNames?.action)}\n style={customStyles?.action}\n {...actionProps}\n />\n );\n }\n return null;\n };\n\n return (\n <BaseToast.Root\n className={cx(rootVariants({ position }), classNames?.root)}\n swipeDirection={swipeDirection}\n toast={toast}\n style={{\n ...customStyles?.root,\n ...toastData?.style,\n }}\n >\n <BaseToast.Content\n className={cx(styles.content, classNames?.content)}\n style={customStyles?.content}\n >\n <div className={title ? styles.toastBody : styles.toastBodyCenter}>\n {renderIcon()}\n <div className={styles.contentArea}>\n {title ? (\n <>\n <div className={styles.titleRow}>\n <BaseToast.Title\n className={cx(styles.title, classNames?.title)}\n style={customStyles?.title}\n >\n {title}\n </BaseToast.Title>\n {showCloseButton && (\n <BaseToast.Close\n aria-label=\"Close\"\n className={cx(styles.close, classNames?.close)}\n style={customStyles?.close}\n >\n <X size={14} />\n </BaseToast.Close>\n )}\n </div>\n {description && (\n <BaseToast.Description\n className={cx(styles.description, classNames?.description)}\n style={{\n marginBlockStart: 4,\n ...customStyles?.description,\n }}\n >\n {description}\n </BaseToast.Description>\n )}\n </>\n ) : (\n description && (\n <div className={styles.titleRow}>\n <BaseToast.Description\n className={standaloneDescriptionClassName}\n style={customStyles?.description}\n >\n {description}\n </BaseToast.Description>\n {showCloseButton && (\n <BaseToast.Close\n aria-label=\"Close\"\n className={cx(styles.close, classNames?.close)}\n style={customStyles?.close}\n >\n <X size={14} />\n </BaseToast.Close>\n )}\n </div>\n )\n )}\n {renderActions()}\n </div>\n </div>\n </BaseToast.Content>\n </BaseToast.Root>\n );\n});\n\nToastItem.displayName = 'ToastItem';\n\nexport default ToastItem;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Toast.mjs","names":["BaseToast"],"sources":["../../../src/base-ui/Toast/Toast.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { cssVar, cx } from 'antd-style';\nimport { AlertTriangle, CheckCircle, Info, Loader2, X, XCircle } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useToastContext } from './context';\nimport { actionVariants, rootVariants, styles } from './style';\nimport { type ToastOptions, type ToastProps, type ToastType } from './type';\n\nconst typeIcons: Record<ToastType, typeof Info> = {\n default: Info,\n error: XCircle,\n info: Info,\n loading: Loader2,\n success: CheckCircle,\n warning: AlertTriangle,\n};\n\nconst typeColors: Record<ToastType, string> = {\n default: cssVar.colorText,\n error: cssVar.colorError,\n info: cssVar.colorInfo,\n loading: cssVar.colorPrimary,\n success: cssVar.colorSuccess,\n warning: cssVar.colorWarning,\n};\n\nconst ToastItem = memo<ToastProps>(({ toast, classNames, styles: customStyles }) => {\n const { position, swipeDirection } = useToastContext();\n const toastData = toast.data as ToastOptions | undefined;\n const type = toastData?.type ?? 'default';\n const closable = toastData?.closable ?? true;\n const hideCloseButton = toastData?.hideCloseButton ?? false;\n const showCloseButton = closable && !hideCloseButton;\n const icon = toastData?.icon;\n const title = toast.title ?? toastData?.title;\n const description = toast.description ?? toastData?.description;\n const actionProps = toast.actionProps ?? toastData?.actionProps;\n const actions = toastData?.actions;\n\n const iconColor = typeColors[type];\n const IconComponent = icon ?? typeIcons[type];\n const isLoading = type === 'loading';\n const standaloneDescriptionClassName = cx(\n styles.description,\n styles.descriptionStandalone,\n classNames?.description,\n );\n\n const renderIcon = (): ReactNode => {\n if (!IconComponent) return null;\n return (\n <div className={cx(styles.icon, classNames?.icon)} style={customStyles?.icon}>\n <Icon color={iconColor} icon={IconComponent} size={18} spin={isLoading} />\n </div>\n );\n };\n\n const renderActions = (): ReactNode => {\n if (actions && actions.length > 0) {\n return (\n <div className={cx(styles.actions, classNames?.actions)} style={customStyles?.actions}>\n {actions.map((action, index) => (\n <BaseToast.Action\n key={index}\n style={customStyles?.action}\n className={cx(\n actionVariants({ variant: action.variant ?? 'primary' }),\n classNames?.action,\n )}\n onClick={action.onClick}\n {...action.props}\n >\n {action.label}\n </BaseToast.Action>\n ))}\n </div>\n );\n }\n if (actionProps) {\n return (\n <BaseToast.Action\n className={cx(actionVariants({ variant: 'primary' }), classNames?.action)}\n style={customStyles?.action}\n {...actionProps}\n />\n );\n }\n return null;\n };\n\n return (\n <BaseToast.Root\n className={cx(rootVariants({ position }), classNames?.root)}\n swipeDirection={swipeDirection}\n toast={toast}\n style={{\n ...customStyles?.root,\n ...toastData?.style,\n }}\n >\n <BaseToast.Content\n className={cx(styles.content, classNames?.content)}\n style={customStyles?.content}\n >\n <div className={title ? styles.toastBody : styles.toastBodyCenter}>\n {renderIcon()}\n <div className={styles.contentArea}>\n {title ? (\n <>\n <div className={styles.titleRow}>\n <BaseToast.Title\n className={cx(styles.title, classNames?.title)}\n style={customStyles?.title}\n >\n {title}\n </BaseToast.Title>\n {showCloseButton && (\n <BaseToast.Close\n aria-label=\"Close\"\n className={cx(styles.close, classNames?.close)}\n style={customStyles?.close}\n >\n <X size={14} />\n </BaseToast.Close>\n )}\n </div>\n {description && (\n <BaseToast.Description\n className={cx(styles.description, classNames?.description)}\n style={{\n marginBlockStart: 4,\n ...customStyles?.description,\n }}\n >\n {description}\n </BaseToast.Description>\n )}\n </>\n ) : (\n description && (\n <div className={styles.titleRow}>\n <BaseToast.Description\n className={standaloneDescriptionClassName}\n style={customStyles?.description}\n >\n {description}\n </BaseToast.Description>\n {showCloseButton && (\n <BaseToast.Close\n aria-label=\"Close\"\n className={cx(styles.close, classNames?.close)}\n style={customStyles?.close}\n >\n <X size={14} />\n </BaseToast.Close>\n )}\n </div>\n )\n )}\n {renderActions()}\n </div>\n </div>\n </BaseToast.Content>\n </BaseToast.Root>\n );\n});\n\nToastItem.displayName = 'ToastItem';\n\nexport default ToastItem;\n"],"mappings":"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"}